/* ═══════════════════════════════════════════════════════════
   Studio ESEO — Menu de navigation adaptatif (nav.css)
   Commun à Index, Impression, Catalogue et Contact.

   • Écran large : AUCUN changement, chaque page garde son menu actuel.
   • Écran étroit : les liens se replient derrière un bouton « ☰ Menu ».
   • CSS pur (case à cocher cachée) : aucun JavaScript.

   Ce fichier doit être chargé APRÈS la feuille de style de la page
   (accueil.css, impression.css ou style.css).

   Seuils de bascule (en pixels de largeur d'écran) :
     • Impression, Catalogue, Admin ... 1400 px   (texte à la taille d'origine)
     • Accueil et Contact ............. 1820 px   (= 1400 × 1,3 : texte agrandi,
                                                    voir --zoom dans typo.css)
   Pour modifier : changer les valeurs dans les deux lignes @media ci-dessous.
═══════════════════════════════════════════════════════════ */

/* Case cachée (reste utilisable au clavier) et bouton : invisibles sur grand écran */
.nav-toggle {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.nav-burger {
    display: none;
    cursor: pointer;
    user-select: none;
    color: #ffffff;
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-nav);
    line-height: 1;
    text-transform: uppercase;
    padding: 10px 16px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 8px;
    transition: background 0.2s;
}

.nav-burger:hover { background: rgba(255, 255, 255, 0.12); }
.nav-toggle:focus-visible + .nav-burger { outline: 2px solid #ffffff; outline-offset: 2px; }

/* ── Écrans étroits : menu repliable (toutes les pages) ───────────────── */
@media (max-width: 1150px) {
    nav {
        flex-wrap: wrap;
        align-items: center;
    }

    .nav-burger { display: inline-block; margin-left: auto; }
    nav.menu .nav-burger { margin-top: 8px; margin-bottom: 8px; }   

    
    nav .nav-links {
        display: none;
        flex: 0 0 100%;
        flex-direction: column;
        gap: 0;
        margin: 10px 0 0;
        padding: 0 4px;
        max-height: calc(100vh - 100px);
        overflow-y: auto;
    }
    nav .nav-toggle:checked ~ .nav-links { display: flex; }

    
    nav:not(.menu) .nav-links { background: rgba(13, 13, 15, 0.97); border-radius: 8px; padding: 0 16px; }
    nav.menu .nav-links { padding-bottom: 8px; }

    nav .nav-links li { border-top: 1px solid rgba(255, 255, 255, 0.08); }
    nav .nav-links li:first-child { border-top: 0; }

    
    nav .nav-links a,
    nav .nav-links a:hover,
    nav .nav-links a.active {
        display: block;
        padding: 14px 4px;
        border-bottom: 0;
        font-size: var(--fs-ui);
    }
}

/* ── Accueil et Contact : texte agrandi, donc menu replié plus tôt (1401 → 1820 px) ── */
@media (min-width: 1401px) and (max-width: 1200px) {
    html:where(:has(.Presentation, .contact-hero)) nav {
        flex-wrap: wrap;
        align-items: center;
    }

    html:where(:has(.Presentation, .contact-hero)) .nav-burger {
        display: inline-block; margin-left: auto;
    }

    html:where(:has(.Presentation, .contact-hero)) nav .nav-links {
        display: none;
        flex: 0 0 100%;
        flex-direction: column;
        gap: 0;
        margin: 10px 0 0;
        padding: 0 4px;
        max-height: calc(100vh - 100px);
        overflow-y: auto;
    }

    html:where(:has(.Presentation, .contact-hero)) nav .nav-toggle:checked ~ .nav-links {
        display: flex;
    }

    html:where(:has(.Presentation, .contact-hero)) nav:not(.menu) .nav-links {
        background: rgba(13, 13, 15, 0.97); border-radius: 8px; padding: 0 16px;
    }

    html:where(:has(.Presentation, .contact-hero)) nav .nav-links li {
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    html:where(:has(.Presentation, .contact-hero)) nav .nav-links li:first-child {
        border-top: 0;
    }

    html:where(:has(.Presentation, .contact-hero)) nav .nav-links a,
    html:where(:has(.Presentation, .contact-hero)) nav .nav-links a:hover,
    html:where(:has(.Presentation, .contact-hero)) nav .nav-links a.active {
        display: block;
        padding: 14px 4px;
        border-bottom: 0;
        font-size: var(--fs-ui);
    }
}
/* ── Catalogue : logo à gauche, liens à droite, titre dessous ── */
header.header-catalogue {
    padding: 0;
}
/* Image de fond du header Catalogue */
header.header-catalogue {
    position: relative;
    background-image: url("fond_catalogue.jpg");   /* ← ton image */
    background-size: cover;
    background-position: center;
}

/* Voile : le dégradé bleu à 80 % d'opacité par-dessus l'image */
header.header-catalogue::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--bg-header);
    opacity: 0.8;
    pointer-events: none;
}

/* Le menu et le titre passent au-dessus du voile */
header.header-catalogue nav.menu,
header.header-catalogue h1 {
    position: relative;
    z-index: 1;
}
header.header-catalogue nav.menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

header.header-catalogue .nav-logo {
    color: #ffffff;
    font-size: var(--fs-logo);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-logo);
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
}

header.header-catalogue h1 {
    margin: 0;
    padding: 32px 16px;
}