:root {
    --bg: white;
    --card-bg:#fff;
    --text:#1f2937;
    --muted:#6b7280;
    --brand:#0e7490;
    --shadow: 0 8px 24px rgba(0,0,0,.08);
    --radius:18px;

    /* Feuilles (décor) */
    --leaf-img: url("assets/leaf.png");
    --leaf-ar: 0.7402;                  /* ratio largeur/hauteur de TON image (410.484 / 554.553) */
    --leaf-w-desktop: clamp(220px, 20vw, 420px);
    --leaf-w-mobile:  clamp(220px, 20vw, 300px);
}

* { box-sizing:border-box; }
html, body {
    height: 100vh;
    width: 100vw;
    overflow-x: hidden; /* empêche le scroll horizontal sur mobile */
}

body {
    margin:0;
    font-family:"Open Sans", "sans-serif";
    color:var(--text);
    background:var(--bg);
    display:flex; align-items:center; justify-content:center;

}

.container { max-width:1000px; width:100%; padding: 32px; height: 100%  }

/* ===== Header (logo image) ===== */
.site-header { text-align:center; margin-bottom:160px; position:relative; }
.logo-main {
    display:block;
    margin:0 auto 8px auto;
    height: 120px;
    max-width:548px;
    width: 100%;
}
.baseline { color:var(--muted); margin:4px 0 0; font-size:clamp(14px, 2vw, 16px); }

/* ===== Cards ===== */
.cards { display:grid; gap:24px; grid-template-columns:repeat(2, minmax(0,1fr)); }


.card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background:var(--card-bg);
    padding:74px 24px 0;
    position:relative;
    transition:transform .2s ease, box-shadow .2s ease;
    border-radius: 16px;
    border: 1px solid #DCDCDC;
    background: #FFF;
    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.06);
}
.card:focus-within,
.card:hover {
    transform:translateY(-2px);
    box-shadow:0 12px 30px rgba(0,0,0,.12);
}

.card h2{
    color: #716F6F;
    text-align: center;
    font-family: "Open Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

/* === Badge fleur centrée === */
.badge {
    width:110px;
    height:110px;
    border-radius:50%;
    overflow:hidden;
    background:white;
    display:flex;
    align-items:center;
    justify-content:center;
    position:absolute;
    left:calc(50% - 55px);
    top:-55px;
    border:1px solid white;
    fill:#FFF;
    filter: drop-shadow(0 4px 4px rgba(0,0,0,0.25));
}
.badge img {
    width:90%;
    height:90%;
    object-fit:contain;
    object-position:center;
    border-radius:50%;
    display:block;
}

/* === Contenu cartes === */
.logo {
    display:block;
    margin:22px auto 10px auto;
    height:36px;
    object-fit:contain;
}
.title {
    text-align:center;
    margin:17px 32px 8px;
    font-weight:700;
    letter-spacing:.4px;
    font-size:18px;
}
.desc {
    text-align:center;
    color:var(--muted);
    margin:0 auto 12px;
    max-width:520px;
    font-size:14px;
}
.center { text-align:center; }

/* === Sous-logo Sudinfo === */
.logo-grid {
    display:flex;
    gap:10px;
    align-items:center;
    justify-content:center;
    margin:6px auto 2px;
    max-width:640px;
}
.logo-grid img {
    max-height:40px;
    width:80%;
    object-fit:contain;
    opacity:.95;
}

/* === CTA === */
.cta {
    display:inline-flex;
    align-items:center;
    gap:8px;
    justify-content:center;
    padding:10px 14px;
    font-size:14px;
    color:#716F6F;
    text-align:center;
    font-style:normal;
    font-weight:500;
    line-height:normal;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}
.cta:focus { outline:3px solid #a7e1f3; outline-offset:2px; }

/* === Décors (feuilles responsives, non rognées, sans débordement) === */
.leaf{
    position: fixed;
    pointer-events: none;
    opacity: .35;

    background: var(--leaf-img) center/contain no-repeat;

    width: var(--leaf-w-desktop);
    max-width: 100vw;     /* sécurité anti overflow */
    aspect-ratio: var(--leaf-ar);

    border-radius: 4px;
    filter: opacity(0.3);
    transform-origin: center;
    will-change: transform;
}
.leaf.lt{
    left: max(-6vw, -40px);
    top:  max(-8vh, -60px);
    transform: rotate(152.262deg);
}
.leaf.rb{
    right:  max(-8vw, -80px);
    bottom: max(-8vh, -80px);
    transform: rotate(-27.738deg);
}


@media (max-width: 1024px){
    .leaf{ width: var(--leaf-w-mobile); }
    .leaf.lt{ left: max(-4vw, -24px); top: max(-6vh, -48px); }
    .leaf.rb{ right: max(-4vw, -24px); bottom: max(-6vh, -48px); }
}


/* ===== Mobile: compacter le titre + header pour garder le même aspect ===== */
@media (max-width: 768px) {
    .container{
        padding: 100px 20px 20px 20px;
    }
    .logo-main {
        height: 120px;        /* avant 178px */
        max-width: 420px;     /* limite la largeur visible */
    }
    .site-header {
        margin-bottom: 96px;  /* avant 160px */
    }
    .title {
        font-size: clamp(16px, 4.6vw, 18px);
        line-height: 1.2;
        margin: 12px 24px 6px;
        text-wrap: balance;
        hyphens: auto;
        word-break: normal;
    }
    .cards{
        gap: 5rem;
        grid-template-columns:1fr;
    }
    .card { padding-top: 56px; }    /* avant 74px */
    .badge {
        width: 92px; height: 92px;
        left: calc(50% - 46px); top: -46px;
    }
    .badge img { width: 88%; height: 88%; }

}


/* ===== Ajustement du centrage et des espacements entre 500px et 768px ===== */
@media (max-width: 768px) and (min-width: 500px) {
    body {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
    }

    .container {
        margin: 0 auto;
        width: 100%;
        max-width: 95%;
    }

    .site-header {
        margin-bottom: 100px; /* espace plus équilibré avec le logo */
    }

    .cards {
        width: 100%;
        max-width: 640px;     /* recentre les cartes sur les écrans moyens */
        margin: 0 auto;
    }

    .card {
        margin: 0 auto;       /* centre horizontalement chaque carte */
    }
}



@media (max-width: 500px){
    .leaf{ width: min(var(--leaf-w-mobile), 80vw); }

    .container{
        padding: 40px 20px 20px 20px;
    }

    .logo-main {
        height: 100px;        /* avant 178px */
        max-width: 280px;     /* limite la largeur visible */
    }
}