/* ══════════════════════════════════════════════════════════════════════════
   EN-TÊTE DU SITE — barre unique, translucide, avec recherche et réseaux.
   Chargé après styles.css : les sélecteurs sont préfixés par .site-header
   pour neutraliser les anciennes règles génériques (header, nav, nav ul…).
   ══════════════════════════════════════════════════════════════════════════ */

.site-header {
    --sh-ink: #1d2633;
    --sh-muted: #5d6877;
    --sh-green: #6fa784;
    --sh-green-soft: rgba(156, 199, 170, .22);
    --sh-line: rgba(29, 38, 51, .09);
    --sh-h: 68px;
    --sh-ui: 'fira', 'Fira Sans Condensed', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    position: sticky;
    top: 0;
    z-index: 1000;
    margin: 0;
    padding: 0;
    background: rgba(255, 255, 255, .86);
    backdrop-filter: saturate(1.6) blur(14px);
    -webkit-backdrop-filter: saturate(1.6) blur(14px);
    box-shadow: 0 1px 0 var(--sh-line), 0 8px 24px -18px rgba(29, 38, 51, .35);
    font-family: var(--sh-ui);
}
/* Fin liseré aux couleurs des deux univers */
.site-header::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -2px;
    height: 2px;
    background: linear-gradient(90deg, #4fd8ff 0%, #9cc7aa 50%, #f6cf5a 100%);
    opacity: .85;
    pointer-events: none;
}

.site-header *,
.site-header *::before,
.site-header *::after { box-sizing: border-box; }

.site-header ul { list-style: none; margin: 0; padding: 0; }
.site-header li { margin: 0; padding: 0; }
.site-header a { text-decoration: none; }
.site-header a:hover { text-decoration: none; }
.site-header a:focus-visible,
.site-header summary:focus-visible,
.site-header button:focus-visible,
.site-header input:focus-visible,
.site-header select:focus-visible {
    outline: 3px solid #174f35;
    outline-offset: 2px;
}

.site-header .sh-sr {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

.site-header .sh-inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    max-width: 1320px;
    height: var(--sh-h);
    margin: 0 auto;
    padding: 0 clamp(.9rem, 2.5vw, 2rem);
}

/* ── Marque ──────────────────────────────────────────────────────────────── */
.site-header .sh-brand {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    flex: 0 0 auto;
    color: var(--sh-ink);
}
.site-header .sh-brand:hover { color: var(--sh-ink); }
.site-header .sh-logo {
    display: block;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border-radius: 12px;
    transition: transform .3s ease;
}
.site-header .sh-brand:hover .sh-logo { transform: rotate(-6deg) scale(1.04); }
.site-header .sh-name {
    font-family: 'WindSong', cursive;
    font-size: 1.85rem;
    line-height: 1;
    white-space: nowrap;
    padding-top: .35rem;
}

/* ── Navigation (bureau) ─────────────────────────────────────────────────── */
.site-header .sh-nav {
    display: block;
    flex: 1 1 auto;
    margin: 0;
    position: static;
}
.site-header .sh-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .25rem;
}
.site-header .sh-links a {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: .4rem .95rem;
    border-radius: 999px;
    color: var(--sh-ink);
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: .01em;
    transition: background-color .2s ease, color .2s ease;
}
.site-header .sh-links a:hover {
    color: var(--sh-ink);
    background: var(--sh-green-soft);
}
.site-header .sh-links a[aria-current="page"] {
    color: #174f35;
    background: rgba(156, 199, 170, .32);
}

.site-header .sh-nav-social { display: none; }

/* ── Outils : réseaux + recherche + menu ─────────────────────────────────── */
.site-header .sh-tools {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex: 0 0 auto;
    margin-left: auto;
}

.site-header .sh-social {
    display: flex;
    align-items: center;
    gap: .1rem;
}
.site-header .sh-social-bar {
    padding-right: .6rem;
    margin-right: .25rem;
    border-right: 1px solid var(--sh-line);
}
.site-header .sh-social a {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    transition: background-color .2s ease;
}
.site-header .sh-social img {
    display: block;
    width: 17px;
    height: 17px;
    opacity: .62;
    transition: opacity .2s ease, transform .2s ease;
}
.site-header .sh-social a:hover { background: var(--sh-green-soft); }
.site-header .sh-social a:hover img { opacity: 1; transform: scale(1.08); }

.site-header .sh-icon-btn {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: var(--sh-ink);
    background: transparent;
    cursor: pointer;
    list-style: none;
    transition: background-color .2s ease;
}
.site-header .sh-icon-btn::-webkit-details-marker { display: none; }
.site-header .sh-icon-btn::marker { content: ''; }
.site-header .sh-icon-btn:hover { background: var(--sh-green-soft); }
.site-header .sh-icon-btn svg {
    width: 21px;
    height: 21px;
    fill: currentColor;
}

/* Recherche déroulante (neutralise le style générique des <details>) */
.site-header details.sh-search,
.site-header details.sh-filters {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
}
.site-header details.sh-search > summary,
.site-header details.sh-filters > summary {
    margin: 0;
    border: 0;
}
.site-header details[open].sh-search > summary { margin: 0; padding: 0; border: 0; }
.site-header details[open].sh-filters > summary { margin: 0; padding: 0; border: 0; }
.site-header .sh-search { position: static; }
.site-header .sh-search[open] > .sh-icon-btn { background: var(--sh-ink); color: #fff; }
.site-header .sh-search-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: clamp(.9rem, 2.5vw, 2rem);
    z-index: 5;
    width: min(460px, calc(100vw - 1.8rem));
    padding: 1rem;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 0 0 1px var(--sh-line), 0 24px 50px -20px rgba(29, 38, 51, .45);
    animation: sh-drop .22s ease;
}
.site-header .sh-search-field {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .3rem .3rem 1rem;
    border-radius: 999px;
    background: #f3f5f7;
    box-shadow: inset 0 0 0 1px var(--sh-line);
}
.site-header .sh-search-field:focus-within { box-shadow: inset 0 0 0 2px var(--sh-green); background: #fff; }
.site-header .sh-search-field input {
    flex: 1 1 auto;
    min-width: 0;
    height: 40px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--sh-ink);
    font: 400 1rem/1.2 var(--sh-ui);
}
.site-header .sh-search-field input:focus,
.site-header .sh-search-field input:focus-visible { outline: none; }
.site-header .sh-search-submit {
    flex: 0 0 auto;
    height: 40px;
    margin: 0;
    padding: 0 1.1rem;
    border: 0;
    border-radius: 999px;
    color: #fff;
    background: var(--sh-ink);
    font: 700 .92rem/1 var(--sh-ui);
    cursor: pointer;
}
.site-header .sh-search-submit:hover { background: #0e141c; }

.site-header details.sh-filters { margin-top: .75rem; }
.site-header .sh-filters > summary {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--sh-muted);
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}
.site-header .sh-filters > summary::-webkit-details-marker { display: none; }
.site-header .sh-filters > summary::before {
    content: '';
    width: .45rem;
    height: .45rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform .2s ease;
}
.site-header .sh-filters[open] > summary::before { transform: rotate(45deg); }
.site-header .sh-filters-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem;
    margin-top: .7rem;
}
.site-header .sh-filters-grid label { display: grid; gap: .2rem; margin: 0; }
.site-header .sh-filters-grid span {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #7c8896;
}
.site-header .sh-filters-grid select,
.site-header .sh-filters-grid input {
    width: 100%;
    height: 38px;
    margin: 0;
    padding: 0 .6rem;
    border: 1px solid rgba(29, 38, 51, .16);
    border-radius: 10px;
    background: #fff;
    color: var(--sh-ink);
    font: 400 .92rem/1 var(--sh-ui);
}

/* Bouton menu (mobile) */
.site-header .menu-toggle {
    display: none;
    position: relative;
    border: 0;
    box-shadow: none;
}
.site-header .menu-toggle svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.site-header .menu-toggle .menu-icon-bars,
.site-header .menu-toggle .menu-icon-close { transition: opacity .18s ease; }
.site-header .menu-toggle .menu-icon-close { opacity: 0; }
.site-header .menu-toggle[aria-expanded="true"] { background: var(--sh-ink); color: #fff; }
.site-header .menu-toggle[aria-expanded="true"] .menu-icon-bars { opacity: 0; }
.site-header .menu-toggle[aria-expanded="true"] .menu-icon-close { opacity: 1; }

/* ── Fil d'Ariane (pages internes) ───────────────────────────────────────── */
.sh-trail-bar {
    background: #f6f8f7;
    border-bottom: 1px solid rgba(29, 38, 51, .07);
}
.sh-trail-bar nav.sh-trail {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: .5rem;
    max-width: 1320px;
    margin: 0 auto;
    padding: .55rem clamp(.9rem, 2.5vw, 2rem);
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
    font: 400 .86rem/1.3 'fira', 'Fira Sans Condensed', system-ui, sans-serif;
    color: #5d6877;
}
.sh-trail-bar nav.sh-trail::-webkit-scrollbar { display: none; }
.sh-trail-bar .sh-trail a { color: #1d2633; text-decoration: none; }
.sh-trail-bar .sh-trail a:hover { text-decoration: underline; }
.sh-trail-bar .sh-trail .crumb-sep { color: #9aa5b1; }

@keyframes sh-drop {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1180px) {
    .site-header .sh-links a { padding: .4rem .7rem; font-size: .98rem; }
    .site-header .sh-social a { width: 30px; height: 30px; }
}

@media (max-width: 1060px) {
    .site-header { --sh-h: 62px; }
    .site-header .sh-inner { gap: .75rem; }
    .site-header .sh-logo { width: 40px; height: 40px; border-radius: 11px; }
    .site-header .sh-name { font-size: 1.7rem; }
    .site-header .sh-social-bar { display: none; }
    .site-header .menu-toggle { display: grid; }

    /* Le menu devient un panneau sous la barre */
    .site-header .sh-nav,
    .site-header nav.sh-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex: none;
        margin: 2px 0 0;
        padding: .75rem clamp(.9rem, 2.5vw, 2rem) 1.25rem;
        background: #fff;
        box-shadow: 0 24px 40px -24px rgba(29, 38, 51, .5);
        max-height: calc(100vh - var(--sh-h) - 3.5rem);
        overflow-y: auto;
    }
    .site-header .sh-nav.active,
    .site-header nav.sh-nav.active {
        display: block;
        animation: sh-drop .22s ease;
    }
    .site-header .sh-links {
        flex-direction: column;
        align-items: stretch;
        gap: .15rem;
    }
    .site-header .sh-links li { width: auto; text-align: left; margin: 0; }
    .site-header .sh-links a {
        display: flex;
        width: 100%;
        min-height: 50px;
        padding: .6rem 1rem;
        border-radius: 14px;
        font-size: 1.15rem;
    }
    .site-header .sh-nav-social {
        display: block;
        margin-top: .9rem;
        padding: .9rem 1rem 0;
        border-top: 1px solid var(--sh-line);
    }
    .site-header .sh-nav-social-title {
        margin: 0 0 .45rem;
        font-size: .74rem;
        font-weight: 700;
        letter-spacing: .16em;
        text-transform: uppercase;
        color: var(--sh-muted);
        text-align: left;
    }
    .site-header .sh-social-panel { gap: .4rem; flex-wrap: wrap; }
    .site-header .sh-social-panel a { width: 44px; height: 44px; background: #f3f5f7; }
    .site-header .sh-social-panel img { width: 19px; height: 19px; opacity: .75; }

    .site-header .sh-search-panel { right: clamp(.9rem, 2.5vw, 2rem); }
}

@media (max-width: 520px) {
    .site-header .sh-name { font-size: 1.55rem; }
    .site-header .sh-search-panel {
        left: .6rem;
        right: .6rem;
        width: auto;
        padding: .85rem;
    }
    .site-header .sh-search-submit { padding: 0 .9rem; }
}

@media (max-width: 360px) {
    .site-header .sh-inner { gap: .5rem; }
    .site-header .sh-tools { gap: .15rem; }
    .site-header .sh-name { font-size: 1.35rem; }
    .site-header .sh-logo { width: 36px; height: 36px; }
    .site-header .sh-icon-btn { width: 40px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
    .site-header .sh-search-panel,
    .site-header .sh-nav.active { animation: none; }
    .site-header .sh-logo { transition: none; }
}

/* Neutralise les anciens styles génériques (form, nav ul li, focus global) */
.site-header .sh-search-form {
    max-width: none;
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}
.site-header .sh-search-field input:focus-visible { outline: none !important; }
.site-header .sh-social li,
.site-header nav.sh-nav .sh-social li { width: auto; margin: 0; text-align: center; }
.site-header .sh-social,
.site-header nav.sh-nav .sh-social { flex-direction: row; justify-content: flex-start; align-items: center; }

/* ══════════════════════════════════════════════════════════════════════════
   THÈME — vert profond + touches de jaune (couleurs de la marque, en plus vif)
   ══════════════════════════════════════════════════════════════════════════ */
.site-header {
    --sh-deep: #133426;
    --sh-forest: #1c4a37;
    --sh-leaf: #2c6e51;
    --sh-sun: #f6cf5a;
    --sh-cream: #fbf3df;
    color: #fff;
    background:
        radial-gradient(60% 140% at 85% 0%, rgba(246, 207, 90, .16) 0%, transparent 60%),
        radial-gradient(50% 160% at 10% 100%, rgba(79, 216, 255, .12) 0%, transparent 60%),
        linear-gradient(100deg, var(--sh-deep) 0%, var(--sh-forest) 55%, var(--sh-leaf) 100%);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 10px 30px -18px rgba(8, 24, 17, .8);
}
.site-header::after {
    height: 3px;
    bottom: -3px;
    opacity: 1;
    background: linear-gradient(90deg, #4fd8ff, #9cc7aa, #f6cf5a, #e2372b, #f6cf5a, #9cc7aa, #4fd8ff);
    background-size: 300% 100%;
    animation: sh-flow 14s linear infinite;
}
@keyframes sh-flow { to { background-position: -300% 0; } }

.site-header a:focus-visible,
.site-header summary:focus-visible,
.site-header button:focus-visible { outline-color: var(--sh-sun); }

.site-header .sh-brand,
.site-header .sh-brand:hover { color: var(--sh-cream); }
.site-header .sh-logo { box-shadow: 0 0 0 2px rgba(255, 255, 255, .18), 0 6px 16px -6px rgba(0, 0, 0, .6); }
.site-header .sh-name { text-shadow: 0 2px 10px rgba(0, 0, 0, .25); }

.site-header .sh-links a { color: rgba(255, 255, 255, .88); }
.site-header .sh-links a:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.site-header .sh-links a[aria-current="page"] {
    color: #1d2633;
    background: var(--sh-sun);
    box-shadow: 0 6px 16px -8px rgba(246, 207, 90, .9);
}

.site-header .sh-social-bar { border-right-color: rgba(255, 255, 255, .18); }
.site-header .sh-social img { filter: invert(1); opacity: .78; }
.site-header .sh-social a:hover { background: rgba(255, 255, 255, .14); }
.site-header .sh-social a:hover img { opacity: 1; }

.site-header .sh-icon-btn { color: #fff; }
.site-header .sh-icon-btn:hover { background: rgba(255, 255, 255, .14); }
.site-header .sh-search > .sh-icon-btn {
    color: #1d2633;
    background: var(--sh-sun);
    box-shadow: 0 6px 16px -8px rgba(246, 207, 90, .9);
}
.site-header .sh-search > .sh-icon-btn:hover { background: #ffdc73; }
.site-header .sh-search[open] > .sh-icon-btn { color: var(--sh-sun); background: #0d241a; box-shadow: inset 0 0 0 2px var(--sh-sun); }
.site-header .menu-toggle[aria-expanded="true"] { color: #1d2633; background: var(--sh-sun); }

.site-header .sh-search-field:focus-within { box-shadow: inset 0 0 0 2px var(--sh-leaf); }
.site-header .sh-search-submit { background: var(--sh-forest); }
.site-header .sh-search-submit:hover { background: var(--sh-deep); }

.sh-trail-bar { background: #eef6f0; border-bottom-color: rgba(28, 74, 55, .12); }
.sh-trail-bar .sh-trail a { color: #1c4a37; }

@media (max-width: 1060px) {
    .site-header .sh-nav,
    .site-header nav.sh-nav {
        margin-top: 3px;
        background: linear-gradient(180deg, var(--sh-forest) 0%, var(--sh-deep) 100%);
        box-shadow: 0 30px 50px -24px rgba(8, 24, 17, .9);
    }
    .site-header .sh-links a { color: #fff; }
    .site-header .sh-nav-social { border-top-color: rgba(255, 255, 255, .14); }
    .site-header .sh-nav-social-title { color: rgba(255, 255, 255, .6); }
    .site-header .sh-social-panel a { background: rgba(255, 255, 255, .1); }
    .site-header .sh-social-panel img { opacity: .9; }
}

@media (prefers-reduced-motion: reduce) {
    .site-header::after { animation: none; }
}

/* Sur les petits écrans, le filet animé reste visible en permanence au-dessus
   du contenu principal et force des repeints pendant la mesure du LCP. */
@media (max-width: 959px) {
    .site-header::after {
        animation: none;
        background-position: 50% 0;
    }
}