/* cssLayout.css — Navigation propre mobile/desktop */

.container    { width:100%; padding:0 16px; margin:0 auto }
.container-sm { width:100%; padding:0 16px; margin:0 auto }
@media(min-width:720px)  { .container-sm { max-width:680px; padding:0 24px } }
@media(min-width:1140px) { .container { max-width:1100px; padding:0 24px } }

html.txt-grande { font-size: 17px }
html.txt-xl     { font-size: 19px }

/* ══ HEADER ══ */
.site-header {
    position:sticky; top:0; z-index:200;
    background:linear-gradient(135deg,#7F0F14 0%,#AA151B 60%,#C84A1D 100%);
    box-shadow:0 2px 12px rgba(0,0,0,.25);
}
.header-inner {
    display:flex; align-items:center; gap:8px;
    min-height:56px; padding:0 16px; position:relative;
}
@media(min-width:640px){ .header-inner{ min-height:60px; padding:0 24px } }

/* Brand */
.brand { display:flex; align-items:center; gap:8px; color:#fff; font-family:var(--font-d); font-size:1rem; font-weight:900; flex-shrink:0; text-decoration:none }
.brand-ico { width:30px; height:30px; background:var(--jaune); border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:.95rem; flex-shrink:0 }
.brand-txt { display:none }
@media(min-width:480px){ .brand-txt{ display:inline } }

/* Hamburger — visible SEULEMENT mobile */
.nav-toggle {
    display:flex; align-items:center; justify-content:center;
    min-width:44px; min-height:44px;
    background:rgba(255,255,255,.18); color:#fff;
    border-radius:7px; font-size:1.3rem; flex-shrink:0;
    margin-left:auto; /* pousse à droite */
    border:none; cursor:pointer;
}
@media(min-width:900px){ .nav-toggle{ display:none } }

/* ══ NAV MOBILE (< 900px) ══ */
/* Sur mobile: nav cachée par défaut, ouverte par JS */
.nav-principale {
    display:none;
    position:absolute; top:100%; left:0; right:0;
    background:#7F0F14;
    flex-direction:column;
    padding:4px 0 16px;
    box-shadow:0 10px 32px rgba(0,0,0,.4);
    z-index:300;
    max-height:80vh;
    overflow-y:auto;
}
.nav-principale.ouverte { display:flex }

/* Liens mobile */
.nav-lien {
    display:flex; align-items:center; gap:10px;
    color:rgba(255,255,255,.9); font-size:.9rem; font-weight:500;
    padding:11px 20px; min-height:44px;
    text-decoration:none; transition:background .1s;
}
.nav-lien:hover, .nav-lien.actif { background:rgba(255,255,255,.12); color:#fff }
.nav-lien .nav-ico { font-size:1rem; width:20px; text-align:center; flex-shrink:0 }

/* Trigger dropdown mobile */
.nav-dropdown-trigger {
    display:flex; align-items:center; gap:10px;
    color:rgba(255,255,255,.9); font-size:.9rem; font-weight:500;
    padding:11px 20px; min-height:44px; width:100%;
    background:rgba(255,255,255,.08); border:none; cursor:pointer;
    text-align:left;
}
.nav-dropdown-trigger:hover { background:rgba(255,255,255,.14); color:#fff }

/* Sous-menu mobile — caché, ouvert par JS */
.nav-mobile-sub { display:none; flex-direction:column }
[data-dropdown-group].ouvert .nav-mobile-sub { display:flex }

/* Items sous-menu mobile */
.nav-mobile-sub .nav-lien {
    padding-left:44px;
    font-size:.85rem;
    background:rgba(0,0,0,.15);
}

/* Séparateur */
.nav-separateur-v { height:1px; background:rgba(255,255,255,.1); margin:3px 16px }

/* Badge révision */
.nav-badge {
    background:rgba(255,255,255,.25); color:#fff;
    font-size:.65rem; font-weight:700;
    border-radius:999px; padding:1px 6px; margin-left:3px;
}

/* CTA S'inscrire */
.nav-cta {
    display:flex; align-items:center; gap:8px;
    background:var(--jaune); color:var(--dark);
    font-weight:700; margin:6px 16px 0;
    border-radius:8px; padding:10px 16px;
    justify-content:center; text-decoration:none;
}

/* IMPORTANT: dropdown desktop caché sur mobile */
.nav-dropdown { display:none !important }

/* ══ NAV DESKTOP (≥ 900px) ══ */
@media(min-width:900px){

    /* Nav visible en ligne */
    .nav-principale {
        display:flex !important;
        position:static;
        flex-direction:row;
        background:transparent;
        padding:0; box-shadow:none;
        gap:2px; align-items:center;
        overflow:visible; max-height:none;
        margin-left:auto; /* pousse à droite */
    }

    /* Liens desktop */
    .nav-lien { padding:5px 9px; border-radius:6px; font-size:.78rem; min-height:auto; gap:5px }
    .nav-lien .nav-ico { font-size:.85rem; width:auto }

    /* Trigger desktop */
    .nav-dropdown-trigger {
        padding:5px 9px; border-radius:6px; font-size:.78rem;
        min-height:auto; gap:5px; width:auto;
        background:transparent;
    }
    .nav-dropdown-trigger:hover { background:rgba(255,255,255,.12) }

    /* Séparateur vertical */
    .nav-separateur-v { width:1px; height:18px; background:rgba(255,255,255,.2); margin:0 3px; display:inline-block }

    /* Groupe dropdown — position:relative pour le dropdown absolu */
    .nav-groupe-dropdown { position:relative }

    /* Dropdown desktop — visible au hover */
    .nav-dropdown {
        display:none !important;
        position:absolute;
        top:calc(100% + 6px); left:0;
        background:#3a0407;
        border-radius:10px; min-width:210px;
        padding:6px 0;
        box-shadow:0 16px 40px rgba(0,0,0,.6);
        border:1px solid rgba(255,255,255,.15);
        z-index:9999;
    }
    /* Pont invisible */
    .nav-dropdown::before {
        content:''; position:absolute; bottom:100%; left:0; right:0; height:8px;
    }
    /* Ouverture hover */
    .nav-groupe-dropdown:hover .nav-dropdown { display:block !important }
    .nav-groupe-dropdown.dd-ouvert .nav-dropdown { display:block !important }

    /* Items dropdown */
    .nav-dropdown-item {
        display:flex; align-items:center; gap:10px;
        padding:9px 16px; color:rgba(255,255,255,.85);
        font-size:.82rem; transition:background .1s;
        white-space:nowrap; text-decoration:none;
    }
    .nav-dropdown-item:hover { background:rgba(255,255,255,.12); color:#fff }
    .nav-dropdown-item.actif { background:rgba(255,255,255,.18); color:#fff; font-weight:600 }

    /* Cacher sous-menus mobile sur desktop */
    .nav-mobile-sub { display:none !important }

    .nav-cta { margin:0 0 0 4px; border-radius:7px; padding:5px 12px }

    /* Sur desktop le hamburger est caché (déjà géré) */
}

@keyframes ddIn { from{opacity:0;transform:translateY(-4px)} to{opacity:1;transform:none} }

/* ══ MAIN ══ */
.site-main { min-height:60vh; padding-bottom:48px }
.section { padding:28px 0 }
@media(min-width:640px){ .section{ padding:48px 0 } }

/* ══ PAGE HEADER ══ */
.page-header { background:var(--blanc); border-bottom:3px solid var(--bordure); padding:20px 0 }
@media(min-width:640px){ .page-header{ padding:26px 0 } }

/* ══ FOOTER ══ */
.site-footer { background:var(--dark); color:rgba(255,255,255,.65); padding:32px 0 20px }
.footer-inner { display:grid; grid-template-columns:1fr; gap:24px; margin-bottom:24px }
@media(min-width:560px){ .footer-inner{ grid-template-columns:1fr 1fr } .footer-inner>:first-child{ grid-column:1/-1 } }
@media(min-width:900px){ .footer-inner{ grid-template-columns:2fr 1fr 1fr } .footer-inner>:first-child{ grid-column:auto } }
.footer-brand { font-family:var(--font-d); font-size:1.1rem; font-weight:900; color:#fff; margin-bottom:6px }
.footer-tagline { font-size:.825rem; line-height:1.6 }
.footer-col-titre { font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.1em; color:#fff; margin-bottom:10px }
.footer-liens { list-style:none; margin:0; padding:0 }
.footer-liens li { margin-bottom:8px }
.footer-liens a { color:rgba(255,255,255,.55); font-size:.825rem; transition:color var(--transition) }
.footer-liens a:hover { color:#fff }
.footer-bas { border-top:1px solid rgba(255,255,255,.1); padding-top:16px; font-size:.775rem; display:flex; flex-direction:column; gap:6px; text-align:center }
@media(min-width:640px){ .footer-bas{ flex-direction:row; justify-content:space-between; align-items:center } }