/*
 * En-tête du site — SiteHeader (sources-design-components/SiteHeader.dc.html).
 * Sticky, logo + nav desktop + recherche + burger <1024px.
 * Sous-menu Fromages en pattern disclosure (aria-expanded/aria-controls,
 * ouverture CSS via [data-open], :hover, :focus-within).
 */

/* Hauteur exacte de la source Symfony (--navbar-height : 62px puis 96px à
   partir de 768px, header{height:96px} en CSS compilé) : sans elle, les
   sections héros (dont le padding/margin-top est calé sur cette même
   hauteur côté source) démarraient plus bas que prévu chez nous — un
   header plus court que prévu, même sans marge/gap ajouté nulle part,
   suffit à décaler tout ce qui suit. */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--mr-blanc);
    height: 62px;
}

@media (min-width: 768px) {
    .site-header {
        height: 96px;
    }
}

.site-header__inner {
    max-width: var(--mr-content-max);
    margin: 0 auto;
    height: 100%;
    /* 10px (pas 14px) en vertical sous 768px : avec le logo à 40px de haut
       ci-dessous, 14px de padding dépasserait la hauteur fixe de 62px du
       header (40 + 14*2 = 68 > 62). */
    padding: 10px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .site-header__inner {
        padding: 14px 24px;
    }
}

.site-header__logo-link {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.site-header__logo {
    height: 48px;
    width: auto;
    display: block;
}

@media (max-width: 1023px) {
    .site-header__logo {
        height: 40px;
    }
}

.site-nav-desktop {
    display: flex;
    flex: 1;
    justify-content: center;
    min-width: 0;
}

.site-nav-desktop ul {
    display: flex;
    gap: 38px;
    margin: 0;
    padding: 0;
    list-style: none;
    align-items: center;
}

.site-nav-desktop li {
    flex-shrink: 0;
}

.nav-link {
    font-size: 16px;
    font-weight: 700;
    color: var(--mr-encre);
    text-decoration: none;
    padding: 6px 2px;
    white-space: nowrap;
}

.nav-link[aria-current='page'] {
    /* Dans la maquette rendue, le lien actif ne change PAS de couleur (un
       style inline color:#2B2B2B gagne sur la règle de couleur de la
       feuille de style) : seul le soulignement signale la page active. */
    box-shadow: inset 0 -3px 0 var(--mr-corail-fonce);
}

/* Sous-menu Fromages — disclosure. */
.fromages-group {
    position: relative;
}

.fromages-group__inner {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.fromages-group__trigger {
    background: none;
    border: 0;
    cursor: pointer;
    padding: 8px 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--mr-encre);
}

.fromages-group__trigger svg {
    transition: transform 0.15s ease;
}

.fromages-group__trigger[aria-expanded='true'] svg {
    transform: rotate(180deg);
}

.fromages-group .flyout {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 6px;
    list-style: none;
    padding: 10px;
    background: var(--mr-blanc);
    border-radius: 16px;
    border: 1px solid rgba(17, 17, 17, 0.06);
    box-shadow:
        0 1px 2px rgba(17, 17, 17, 0.04),
        0 8px 16px -6px rgba(17, 17, 17, 0.08),
        0 24px 48px -12px rgba(17, 17, 17, 0.14);
    width: max-content;
    z-index: 60;
}

.fromages-group .flyout[data-open='true'],
.fromages-group:hover .flyout,
.fromages-group:focus-within .flyout {
    display: block;
}

.fromages-group .flyout::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -16px;
    height: 16px;
}

.fromages-group .flyout li + li {
    margin-top: 4px;
}

.fromages-group .flyout a {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--mr-encre);
    font-weight: 500;
    font-size: 16px;
    padding: 12px 18px;
    border-radius: 10px;
    white-space: nowrap;
}

.fromages-group .flyout a svg {
    flex: 0 0 auto;
    color: var(--mr-corail);
}

.fromages-group .flyout a:hover {
    background: var(--mr-rose-pale);
}

/* Recherche */
.site-search {
    display: flex;
    align-items: center;
    gap: 6px;
}

.site-search__input {
    border: 2px solid #ddd;
    border-radius: var(--mr-r-pill);
    padding: 9px 16px;
    font-size: 15px;
    width: 190px;
    font-family: inherit;
}

.site-search__submit {
    width: 42px;
    height: 42px;
    border-radius: var(--mr-r-pill);
    border: 0;
    background: var(--mr-corail);
    color: var(--mr-blanc);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

.site-search__submit:hover {
    background: var(--mr-corail-fonce);
}

@media (max-width: 767px) {
    .site-search__submit {
        width: 46px;
        height: 46px;
    }
}

/* Retour utilisateur : loupe et bordure du champ de recherche pas assez
   contrastées en mode contraste élevé — la loupe est blanche à l'intérieur
   du SVG (voir header.php), donc son contraste dépend entièrement du fond
   du bouton : --mr-corail ne donne que ~2,88:1 (seuil composant d'interface
   3:1). La bordure #ddd du champ n'atteint que ~1,36:1 sur fond blanc.
   Même traitement que .arrow-btn (carousel.css) : accent de marque foncé
   pour le bouton, encre pour la bordure — jamais de noir/blanc pur. */
html.a11y-contrast .site-search__input,
html.a11y-enhanced .site-search__input {
    border-color: var(--mr-encre) !important;
}

html.a11y-contrast .site-search__submit,
html.a11y-enhanced .site-search__submit {
    background: var(--mr-a11y-vif) !important;
}

html.a11y-contrast .site-search__submit:hover,
html.a11y-enhanced .site-search__submit:hover {
    background: var(--mr-encre) !important;
}

/* Burger */
.burger-btn {
    display: none;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    border: 0;
    background: var(--mr-gris-fond);
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

@media (max-width: 1023px) {
    .desktop-nav,
    .desktop-search {
        display: none !important;
    }

    .burger-btn {
        display: inline-flex;
    }
}

@media (min-width: 1024px) {
    .burger-btn {
        display: none !important;
    }
}

/* Menu mobile */
.mobile-menu {
    display: none;
    background: var(--mr-blanc);
    border-top: 1px solid #eee;
    padding: 10px 24px 20px;
}

.mobile-menu[data-open='true'] {
    display: block;
}

.mobile-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-menu .nav-link {
    display: block;
    text-decoration: none;
    color: var(--mr-encre);
    font-weight: 700;
    font-size: 17px;
    padding: 14px 8px;
    border-bottom: 1px solid #f0f0f0;
    white-space: normal;
}

.mobile-menu li:last-child > .nav-link {
    border-bottom: 0;
}

.mobile-menu .mobile-submenu-link {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: #555;
    font-weight: 600;
    font-size: 16px;
    padding: 12px 8px 12px 24px;
    border-bottom: 1px solid #f0f0f0;
}

.mobile-menu .mobile-submenu-link svg {
    flex: 0 0 auto;
    color: var(--mr-corail);
}

.mobile-menu form[role='search'] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
}

.mobile-menu form[role='search'] input {
    flex: 1;
    border: 2px solid #ddd;
    border-radius: var(--mr-r-pill);
    padding: 11px 16px;
    font-size: 16px;
    font-family: inherit;
}

.mobile-menu form[role='search'] button {
    background: var(--mr-corail);
    border: 0;
    border-radius: var(--mr-r-pill);
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
}

/* Même bug, même correctif que .site-search__input/.site-search__submit
   ci-dessus : ce formulaire de recherche du menu mobile duplique les
   mêmes couleurs sous-contrastées. */
html.a11y-contrast .mobile-menu form[role='search'] input,
html.a11y-enhanced .mobile-menu form[role='search'] input {
    border-color: var(--mr-encre) !important;
}

html.a11y-contrast .mobile-menu form[role='search'] button,
html.a11y-enhanced .mobile-menu form[role='search'] button {
    background: var(--mr-a11y-vif) !important;
}

html.a11y-contrast .nav-link,
html.a11y-contrast .fromages-group__trigger,
html.a11y-contrast .mobile-menu .nav-link,
html.a11y-enhanced .nav-link,
html.a11y-enhanced .fromages-group__trigger,
html.a11y-enhanced .mobile-menu .nav-link {
    color: var(--mr-a11y-accent) !important;
}

html.a11y-contrast .nav-link[aria-current='page'],
html.a11y-enhanced .nav-link[aria-current='page'] {
    box-shadow: inset 0 -3px 0 var(--mr-a11y-accent) !important;
}