/**
 * SiteHeader : en-tête compact et collant (site-header.html.twig).
 *
 * Grand écran (1600px et plus) : une seule ligne avec logo, tous les
 * premiers niveaux, recherche, newsletter et compte.
 * De 1100 à 1600px : la même barre, le menu sur une seconde ligne fine.
 * En dessous : barre réduite, menu en tiroir latéral.
 * La recherche s'ouvre sous la barre (loupe) à toutes les tailles.
 *
 * Les blocs hérités (.Header-logo, .Header-social, .MenuUser, .HeaderSearch)
 * gardent leurs classes ; on remet à zéro leur mise en page d'origine.
 */
.SiteHeader {
  /* En haut de page, la barre est plus haute et le logo plus grand ;
     dès qu'on défile (.is-scrolled), elle revient à --header-height. */
  --sh-row: calc(var(--header-height) + 20px);
  --sh-logo: 30px;
  position: sticky;
  top: 0;
  z-index: 500;
  background: var(--u-surface);
  border-bottom: 1px solid var(--u-rule);
  transition: box-shadow 0.25s ease;
}
.SiteHeader.is-scrolled {
  --sh-row: var(--header-height);
  --sh-logo: 24px;
  box-shadow: 0 8px 24px -16px rgba(0, 0, 0, 0.35);
}
.SiteHeader {
  transition: box-shadow 0.25s ease, transform 0.3s ease;
}
.SiteHeader.is-hidden {
  transform: translateY(-100%);
  box-shadow: none;
}

html {
  scroll-padding-top: calc(var(--header-height) + 16px);
}
html.is-nav-open {
  overflow: hidden;
}

.SiteHeader-bar {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  grid-template-rows: var(--sh-row);
  grid-template-areas: "burger logo search user";
  align-items: center;
  gap: 4px;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 12px;
  transition: grid-template-rows 0.3s ease;
}

.SiteHeader-region {
  display: contents;
}

/* Boutons-icônes : menu, recherche, compte, fermeture */
.SiteHeader-iconButton,
.SiteHeader .MenuUser .MenuUser-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--am-radius);
  background: none;
  color: var(--u-ink);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.SiteHeader-iconButton svg,
.SiteHeader .MenuUser .MenuUser-button svg {
  fill: currentColor;
}
.SiteHeader-iconButton:hover,
.SiteHeader .MenuUser .MenuUser-button:hover,
.SiteHeader-iconButton[aria-expanded="true"] {
  background: var(--u-surface-alt);
  color: var(--u-accent-strong);
}

.SiteHeader-burger { grid-area: burger; }
.SiteHeader-searchToggle { grid-area: search; }

/* Logo */
.SiteHeader .Header-logo {
  grid-area: logo;
  order: 0;
  flex: none;
  padding-left: 4px;
}
.SiteHeader .Header-logo > a {
  display: inline-block;
  max-width: none;
}
.SiteHeader .Header-logo img {
  display: block;
  height: var(--sh-logo);
  width: auto;
  max-width: none;
  transition: height 0.3s ease;
}

/* Newsletter (bloc social_media_links) */
.SiteHeader .Header-social {
  grid-area: social;
  display: none;
  margin: 0;
  order: 0;
}
.SiteHeader .Header-social .social-media-links--platforms.horizontal {
  margin: 0;
  padding: 0;
}
.SiteHeader .Header-social .social-media-links--platforms.horizontal li {
  padding: 0;
}
.SiteHeader .Header-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--am-radius);
  color: var(--u-ink);
  transition: background-color 0.15s, color 0.15s;
}
.SiteHeader .Header-social a span {
  font-size: 18px;
  line-height: 1;
}
.SiteHeader .Header-social a:hover {
  background: var(--u-surface-alt);
  color: var(--u-accent-strong);
}

/* Compte */
.SiteHeader .MenuUser {
  grid-area: user;
  order: 0;
}
.SiteHeader .MenuUser .MenuUser-toggled {
  top: 44px;
  padding-top: 12px;
}
.SiteHeader .MenuUser .MenuUser-container {
  border-radius: var(--am-radius);
  background: var(--u-surface);
}
.SiteHeader .MenuUser .MenuUser-container::before {
  display: none;
}

/* Recherche : dépliée sous la barre */
.SiteHeader .SiteSearch {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  order: 0;
  width: auto;
  margin: 0;
  padding: 12px var(--page-gutter) 16px;
  background: var(--u-surface);
  border-bottom: 1px solid var(--u-rule);
}
.SiteHeader.is-search-open .SiteSearch {
  display: block;
}
.SiteHeader .HeaderSearch .HeaderSearch-container {
  max-width: var(--search-width);
  margin: 0 auto;
  padding: 0 18px;
  height: 52px;
  border: 1px solid var(--u-rule);
  border-radius: var(--am-radius);
  background: var(--u-surface-alt);
  transition: border-color 0.15s, background-color 0.15s;
}
.SiteHeader .HeaderSearch .HeaderSearch-container:focus-within {
  border-color: var(--u-ink);
  background: var(--u-surface);
}
.SiteHeader .HeaderSearch .HeaderSearch-icon svg {
  fill: var(--u-ink-muted);
}
.SiteHeader .HeaderSearch .HeaderSearch--input {
  background: transparent;
  color: var(--u-ink);
  font-size: 16px;
}
.SiteHeader .HeaderSearch .HeaderSearch--input::placeholder {
  color: var(--u-ink-muted);
}
/* Le contour du champ suffit : pas d'anneau de focus doublé */
.SiteHeader .HeaderSearch .HeaderSearch--input:focus-visible {
  outline: none;
}
/* Prédiction : le bandeau de recherche se prolonge sous le champ, même
   fond, sans filet ; plus large que le champ pour montrer plus de
   résultats, centré comme lui. */
.SiteHeader {
  --search-width: 760px;
  --suggest-width: 1200px;
  --suggest-inset: max(var(--page-gutter), calc((100% - var(--suggest-width)) / 2));
}
.SiteHeader .SiteSearch:has(.HeaderSearch--panel.visible) {
  border-bottom-color: transparent;
}
.SiteHeader .HeaderSearch--panel {
  top: 100%;
  left: 0;
  right: 0;
  max-width: none;
  margin: 0;
  padding: 4px var(--suggest-inset) 28px;
  background: var(--u-surface);
  border: 0;
  border-bottom: 1px solid var(--u-rule);
  border-radius: 0;
  box-shadow: 0 28px 40px -28px rgba(0, 0, 0, 0.35);
}
.SiteHeader .HeaderSearch--panel .SearchSuggest-close {
  top: 0;
  right: calc(var(--suggest-inset) - 8px);
}

/* Navigation : tiroir (mobile) -------------------------------------- */
.SiteNav {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 600;
  display: flex;
  flex-direction: column;
  width: min(360px, 88vw);
  overflow-y: auto;
  padding: 0 0 32px;
  background: var(--u-surface);
  box-shadow: var(--am-shadow-menu);
  transform: translateX(-105%);
  transition: transform 0.25s ease;
  visibility: hidden;
}
html.is-nav-open .SiteNav {
  transform: none;
  visibility: visible;
}

.SiteNav-drawerHead {
  order: -2;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  padding: 0 12px 0 24px;
  border-bottom: 1px solid var(--u-rule);
}
.SiteNav-drawerTitle {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.SiteNav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 550;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
html.is-nav-open .SiteNav-backdrop {
  opacity: 1;
  pointer-events: auto;
}

.SiteNav-list {
  list-style: none;
  margin: 0;
  padding: 8px 12px;
}
.SiteNav-list--books {
  order: -1;
  border-bottom: 1px solid var(--u-rule);
}

/* Entrée scindée : lien du domaine + chevron des rubriques */
.SiteNav-item--split {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.SiteNav-item--split > .SiteNav-link {
  flex: 1;
}
.SiteNav-item--split > .SiteNav-panel {
  flex-basis: 100%;
}

.SiteNav-trigger,
.SiteNav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 14px 12px;
  border: 0;
  border-radius: var(--am-radius);
  background: none;
  color: var(--u-ink);
  font-family: var(--am-font-base);
  font-size: 17px;
  font-weight: 700;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.SiteNav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--am-radius);
  background: none;
  color: var(--u-ink);
  cursor: pointer;
}
.SiteNav-trigger svg,
.SiteNav-toggle svg {
  flex: none;
  fill: currentColor;
  transition: transform 0.2s ease;
}
.SiteNav-item.is-open > .SiteNav-trigger svg,
.SiteNav-item.is-open > .SiteNav-toggle svg {
  transform: rotate(180deg);
}
.SiteNav-trigger:hover,
.SiteNav-link:hover,
.SiteNav-toggle:hover {
  color: var(--u-accent-strong);
}
.SiteNav-item.is-active > .SiteNav-trigger,
.SiteNav-item.is-active > .SiteNav-link,
.SiteNav-link[aria-current] {
  color: var(--u-accent-strong);
}

.SiteNav-panel {
  display: none;
  padding: 0 12px 12px;
}
.SiteNav-item.is-open > .SiteNav-panel {
  display: block;
}
.SiteNav-sublinks {
  list-style: none;
  margin: 0;
  padding: 0;
}
.SiteNav-sublinks a {
  display: block;
  padding: 10px 12px;
  border-radius: var(--am-radius);
  color: var(--u-ink);
  font-size: 15px;
  text-decoration: none;
}
.SiteNav-sublinks a:hover,
.SiteNav-sublinks a[aria-current] {
  color: var(--u-accent-strong);
}
.SiteNav-panelAll {
  display: inline-flex;
  white-space: nowrap;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding: 10px 12px;
  color: var(--u-accent-strong);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.SiteNav-panelAll svg {
  fill: currentColor;
}

/* Tablette : newsletter visible ---------------------------------------- */
@media (min-width: 700px) {
  .SiteHeader-bar {
    grid-template-columns: auto 1fr auto auto auto;
    grid-template-areas: "burger logo search social user";
    padding: 0 var(--page-gutter);
  }
  .SiteHeader {
    --sh-logo: 34px;
  }
  .SiteHeader.is-scrolled {
    --sh-logo: 26px;
  }
  .SiteHeader .Header-social {
    display: block;
  }
}

/* Desktop : menu horizontal, sur une seconde ligne fine ----------------- */
@media (min-width: 1100px) {
  .SiteHeader-bar {
    grid-template-columns: auto 1fr auto auto auto;
    grid-template-rows: var(--sh-row) 48px;
    grid-template-areas:
      "logo . search social user"
      "nav nav nav nav nav";
    gap: 0 4px;
  }
  .SiteHeader-burger,
  .SiteNav-drawerHead,
  .SiteNav-backdrop {
    display: none;
  }
  .SiteHeader {
    --sh-row: calc(var(--header-height) + 28px);
    --sh-logo: 36px;
  }
  .SiteHeader.is-scrolled {
    --sh-row: var(--header-height);
    --sh-logo: 28px;
  }
  .SiteHeader .Header-logo {
    padding-left: 0;
  }

  /* Toute la hauteur de sa rangée (la barre centre ses autres éléments) :
     les entrées s'étirent dessus, toute leur surface est cliquable. */
  .SiteNav {
    grid-area: nav;
    align-self: stretch;
    position: static;
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start;
    width: auto;
    margin: 0 -10px;
    padding: 0;
    overflow: visible;
    background: none;
    box-shadow: none;
    transform: none;
    visibility: visible;
    transition: none;
  }
  .SiteNav-list {
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 0;
  }
  .SiteNav-list--books {
    border: 0;
  }
  .SiteNav-item {
    position: relative;
    display: flex;
    align-items: stretch;
  }
  .SiteNav-item--split {
    flex-wrap: nowrap;
  }

  .SiteNav-trigger,
  .SiteNav-link {
    position: relative;
    width: auto;
    height: auto;
    padding: 0 10px;
    border-radius: 0;
    font-size: 14.5px;
    white-space: nowrap;
  }
  /* Le survol ouvre les rubriques : le chevron devient un repère discret,
     toujours atteignable au clavier. Lien et chevron prennent toute la
     hauteur de l'entrée, sans marge entre eux : pas de zone morte. */
  .SiteNav-item--split > .SiteNav-link {
    padding-right: 2px;
  }
  .SiteNav-toggle {
    width: 28px;
    height: auto;
    padding: 0 6px 0 0;
    border-radius: 0;
    opacity: 0.45;
  }
  .SiteNav-item:hover > .SiteNav-toggle,
  .SiteNav-item.is-open > .SiteNav-toggle,
  .SiteNav-toggle:focus-visible {
    opacity: 1;
  }
  /* Le chevron prend la couleur de son nom (noir, rouge sur le domaine
     courant), pas une couleur à lui au survol */
  .SiteNav-toggle:hover {
    color: var(--u-ink);
  }
  .SiteNav-item.is-active > .SiteNav-toggle {
    color: var(--u-accent-strong);
  }
  .SiteNav-toggle svg {
    width: 9px;
    height: 6px;
  }

  /* Filet d'accent sous le nom de l'entrée survolée, ouverte ou courante :
     juste sous le texte (quelle que soit la hauteur de la barre) et de sa
     largeur, sans le chevron. */
  .SiteNav-item > .SiteNav-link::after,
  .SiteNav-item > .SiteNav-trigger::after {
    content: "";
    position: absolute;
    top: calc(50% + 14px);
    left: 10px;
    right: 10px;
    height: 3px;
    border-radius: 2px;
    background: var(--u-accent);
    transform: scaleX(0);
    transition: transform 0.2s ease;
  }
  .SiteNav-item--split > .SiteNav-link::after {
    right: 2px;
  }
  /* Bouton à chevron intégré (menu éditorial) : filet sous le texte seul */
  .SiteNav-item > .SiteNav-trigger::after {
    right: 29px;
  }
  .SiteNav-item:hover > .SiteNav-link::after,
  .SiteNav-item:hover > .SiteNav-trigger::after,
  .SiteNav-item.is-open > .SiteNav-link::after,
  .SiteNav-item.is-open > .SiteNav-trigger::after,
  .SiteNav-item.is-active > .SiteNav-link::after,
  .SiteNav-item.is-active > .SiteNav-trigger::after {
    transform: none;
  }

  /* Entrées à panneau : le filet est porté par l'entrée et devient le
     bord haut du panneau, sans script. Fermé : sous le nom (l'entrée moins
     son chevron) ; ouvert : il s'étire sur la largeur du panneau, connue
     (--panel-w, ou l'entrée si plus large), puis revient au nom quand le
     panneau se masque. */
  .SiteNav-item[data-site-nav-item] > .SiteNav-link::after,
  .SiteNav-item[data-site-nav-item] > .SiteNav-trigger::after {
    content: none;
  }
  .SiteNav-item[data-site-nav-item] {
    --panel-w: 280px;
  }
  .SiteNav-item[data-site-nav-item]::before {
    content: "";
    position: absolute;
    z-index: 11;
    top: calc(50% + 14px);
    left: 10px;
    /* Domaine : lien (marge 2px) + chevron (28px) ; menu éditorial :
       chevron dans le bouton (8 + 11 + 10px) */
    right: 30px;
    height: 3px;
    border-radius: 2px;
    background: var(--u-accent);
    pointer-events: none;
    transform: scaleX(0);
    transition: transform 0.2s ease, left 0.3s ease, right 0.3s ease, border-radius 0.3s ease;
  }
  .SiteNav-list--main > .SiteNav-item[data-site-nav-item]::before {
    right: 29px;
  }
  .SiteNav-item[data-site-nav-item]:hover::before,
  .SiteNav-item[data-site-nav-item].is-active::before {
    transform: none;
  }
  .SiteNav-item[data-site-nav-item].is-open::before {
    left: 0;
    right: min(0px, calc(100% - var(--panel-w)));
    border-radius: 0;
    transform: none;
  }
  /* Panneaux ouverts vers la gauche : le filet s'étire vers la gauche */
  .SiteNav-list--main > .SiteNav-item[data-site-nav-item].is-open::before,
  .SiteNav-list--books > .SiteNav-item:nth-last-child(-n + 2).is-open::before {
    left: min(0px, calc(100% - var(--panel-w)));
    right: 0;
  }
  .SiteNav-trigger:hover,
  .SiteNav-link:hover,
  .SiteNav-item.is-open > .SiteNav-trigger,
  .SiteNav-item.is-open > .SiteNav-link {
    color: var(--u-ink);
  }

  /* Liste des rubriques : son bord haut est le filet du nom (même repère,
     le centre de la barre). Elle apparaît en fondu une fois le filet
     étiré, et disparaît avant qu'il ne revienne au nom. */
  .SiteNav-panel {
    position: absolute;
    top: calc(50% + 14px);
    left: 0;
    z-index: 10;
    display: block;
    /* Largeur connue, pour le filet : celle de l'entrée si plus large */
    width: max(100%, var(--panel-w));
    padding: 15px 12px 12px;
    border-radius: 0 0 var(--am-radius) var(--am-radius);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.15s ease 0.1s, transform 0.15s ease 0.1s, visibility 0s linear 0.25s;
    background: var(--u-surface);
    box-shadow: var(--am-shadow-menu);
  }
  .SiteNav-item.is-open > .SiteNav-panel {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity 0.2s ease 0.15s, transform 0.2s ease 0.15s, visibility 0s;
  }
  .SiteNav-sublinks a {
    padding: 8px 12px;
  }
  .SiteNav-sublinks a:hover {
    background: var(--u-surface-alt);
    color: var(--u-ink);
  }
  .SiteNav-panelAll {
    width: 100%;
    margin-top: 8px;
    border-top: 1px solid var(--u-rule);
    border-radius: 0;
  }
  /* Menu éditorial (À la Une, Auteurs) : à la suite des domaines */
  .SiteNav-list--main {
    position: relative;
    margin-left: 14px;
    padding-left: 14px;
  }
  .SiteNav-list--main::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    height: 20px;
    border-left: 1px solid var(--u-rule);
    transform: translateY(-50%);
  }
  .SiteNav-list--main > .SiteNav-item {
    --panel-w: 440px;
  }
  .SiteNav-list--main .SiteNav-panel .SiteNav-sublinks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 8px;
  }
  /* Les dernières entrées ouvrent leur liste vers la gauche */
  .SiteNav-list--main .SiteNav-panel,
  .SiteNav-list--books > .SiteNav-item:nth-last-child(-n + 2) > .SiteNav-panel {
    left: auto;
    right: 0;
  }
}

/* Grand écran : tout sur une seule ligne ------------------------------ */
@media (min-width: 1600px) {
  .SiteHeader-bar {
    grid-template-rows: var(--sh-row);
    grid-template-areas: "logo nav search social user";
    gap: 0 8px;
  }
  .SiteHeader {
    --sh-logo: 32px;
  }
  .SiteHeader.is-scrolled {
    --sh-logo: 26px;
  }
  .SiteNav {
    justify-content: flex-start;
    gap: 4px;
    margin: 0 8px 0 24px;
  }

}

@media (prefers-reduced-motion: reduce) {
  .SiteHeader,
  .SiteHeader-bar,
  .SiteHeader .Header-logo img,
  .SiteNav,
  .SiteNav-backdrop,
  .SiteNav-trigger svg,
  .SiteNav-toggle svg,
  .SiteNav-link::after,
  .SiteNav-trigger::after,
  .SiteNav-item::before,
  .SiteNav-panel {
    transition: none;
  }
}

/* Survol sans dépendre du script. Pas de « pont » invisible au-dessus du
   panneau : il est collé à l'entrée, et un pont recouvrirait le nom. */
@media (min-width: 1100px) and (hover: hover) {
  /* Ouverture au survol en CSS (le script ne gère que clic et clavier) ;
     le léger délai évite d'ouvrir en passant juste dessus. */
  .SiteNav-item:hover > .SiteNav-panel {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity 0.2s ease 0.15s, transform 0.2s ease 0.15s, visibility 0s linear 0.15s;
  }
  .SiteNav-item:hover > .SiteNav-toggle svg,
  .SiteNav-item:hover > .SiteNav-trigger svg {
    transform: rotate(180deg);
  }
  .SiteNav-item[data-site-nav-item]:hover::before {
    left: 0;
    right: min(0px, calc(100% - var(--panel-w)));
    border-radius: 0;
    transition-delay: 0.05s;
  }
  .SiteNav-list--main > .SiteNav-item[data-site-nav-item]:hover::before,
  .SiteNav-list--books > .SiteNav-item:nth-last-child(-n + 2):hover::before {
    left: min(0px, calc(100% - var(--panel-w)));
    right: 0;
  }
}

/* Enveloppe de la newsletter (sprite du thème) */
.SiteHeader .Header-social a svg {
  display: block;
  fill: currentColor;
}