/**
 * CBS Theme — en-tête (navigation.md §2)
 * Couleurs : tokens design-system (silver-900 = corps, sous-menus = principale, gold = secondaire).
 */

/* Dimensions et disposition identiques à la boutique (cb-boutique,
   layout/header.css) et à ARS, réunion du 21/09/2026 : 5 rem de haut,
   conteneur 1440 px + 3 rem, burger à gauche, logo centré en absolu plafonné
   à 3,75 rem, actions carrées de 2,75 rem à droite. Seules les couleurs sont
   GRS : fond noir, accent bleu principal éclairci (lisible sur noir). */
.site-header {
  --cbs-header-height: calc(5rem + 1px);
  --cbs-header-bg: var(--cbs-silver-900);
  --cbs-header-accent: var(--cbs-primary-light);
  --cbs-header-border: color-mix(in srgb, var(--cbs-white) 20%, transparent);
  --cbs-header-muted: var(--cbs-silver-400);
  --cbs-header-hover: var(--cbs-silver-350);
  /* Largeur réservée de chaque côté du logo centré, même valeur que la
     boutique et ARS pour un logo de même emprise sur les trois sites. */
  --cbs-header-side: 13rem;

  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  overflow: visible;
  background-color: var(--cbs-header-bg);
  color: var(--cbs-white);
  border-bottom: 1px solid var(--cbs-header-border);
}

.site-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cbs-space-3);
  width: 100%;
  max-width: min(100%, calc(var(--cbs-container-wide) + 3rem));
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
  min-height: 5rem;
  overflow: visible;
}

.site-header__brand {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  max-width: calc(100% - 2 * var(--cbs-header-side));
}

/* ——— Logo image (réglage « Logo du site » du personnalisateur) ———
   Sans ces règles, `the_custom_logo()` sort l'image à sa taille intrinsèque et
   fait exploser la hauteur de l'en-tête.
   Le fichier recadré ne contient plus de marge transparente : le tracé touche
   les bords de l'image. On réserve donc 10 px de respiration en haut et en bas
   via un padding réel sur le lien, et on plafonne l'image à 3.75rem (60 px).
   60 + 10 + 10 = 80 px = le `min-height` de .site-header__inner : l'en-tête
   garde exactement sa hauteur d'origine (81 px bordure comprise). */
.site-header__brand .custom-logo-link {
  display: block;
  line-height: 0;
  max-width: 100%;
  padding-block: 10px;
}

.site-header__brand .custom-logo-link:focus-visible {
  outline: 2px solid var(--cbs-header-accent);
  outline-offset: 4px;
}

.site-header__brand .custom-logo {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 3.75rem;
  object-fit: contain;
}

.site-header__logo-link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--cbs-white);
  transition: color 0.2s ease;
}

.site-header__logo-main {
  font-family: var(--cbs-font-serif);
  font-size: clamp(1.1rem, 1.94vw, 1.32rem);
  line-height: var(--cbs-leading-tight);
  font-weight: 700;
  letter-spacing: 0.15em;
  transition: color 0.2s ease;
}

.site-header__logo-sub {
  font-family: var(--cbs-font-sans);
  font-size: clamp(0.5rem, 1.4vw, 0.6rem);
  line-height: var(--cbs-leading-tight);
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--cbs-header-muted);
  transition: color 0.2s ease;
}

.site-header__logo-link:hover .site-header__logo-main,
.site-header__logo-link:focus-visible .site-header__logo-main {
  color: var(--cbs-header-hover);
  transition: color 0.2s ease;
}

.site-header__logo-link:hover .site-header__logo-sub,
.site-header__logo-link:focus-visible .site-header__logo-sub {
  color: var(--cbs-header-hover);
  transition: color 0.2s ease;
}

.site-header__logo-link:focus-visible {
  outline: 2px solid var(--cbs-header-accent);
  outline-offset: 4px;
}

.site-header__nav {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  /* Loupe collée au burger (Camille). */
  gap: 0;
  min-width: 0;
  /* Le burger affleure le bord du conteneur, comme sur la boutique et ARS. */
  margin-left: calc(var(--cbs-space-2) * -1);
}

.site-header__brand {
  transition: opacity var(--cbs-transition-base);
}

/* Recherche ouverte sous 1280 px : burger + loupe + champ de 16 rem
   chevaucheraient le logo centré, on l'efface le temps de la saisie. Au-delà,
   le logo reste. */
@media (max-width: 1279.98px) {
  .site-header--search-open .site-header__brand {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

/* ——— Actions : recherche, contact (enveloppe) ——— */
.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--cbs-space-2);
  flex-shrink: 0;
  margin-left: auto;
}

.site-header__action {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: none;
  border-radius: var(--cbs-radius-sm);
  background: transparent;
  color: var(--cbs-white);
  cursor: pointer;
  text-decoration: none;
  transition: color var(--cbs-transition-base);
}

.site-header__action:hover,
.site-header__action:focus-visible,
.site-header__action[aria-expanded="true"] {
  color: var(--cbs-header-accent);
}

.site-header__action:focus-visible {
  outline: 2px solid var(--cbs-header-accent);
  outline-offset: 2px;
}

/* ——— Recherche : loupe à gauche, champ déplié en ligne (demande Camille) ———
   La loupe est collée au burger. Au clic, nav.js pose .site-search--open et
   un champ compact (16 rem) se déplie juste à droite de la loupe, sans
   s'étirer vers le reste de la barre. Fermé, le champ est à largeur nulle ET
   invisible : il sort du parcours clavier. */
.site-search {
  --cbs-search-width: 16rem;

  display: flex;
  align-items: center;
  flex: 0 0 auto;
  margin: 0;
}

.site-search__toggle {
  flex-shrink: 0;
}

.site-search__field {
  flex: 0 0 auto;
  width: 0;
  overflow: hidden;
  visibility: hidden;
  transition:
    width var(--cbs-transition-base),
    visibility 0s linear 0.25s;
}

.site-search--open .site-search__field {
  width: var(--cbs-search-width);
  visibility: visible;
  transition:
    width var(--cbs-transition-base),
    visibility 0s;
}

.site-search__input {
  display: block;
  width: 100%;
  height: 2.5rem;
  padding: 0 var(--cbs-space-4);
  border: 1px solid color-mix(in srgb, var(--cbs-white) 35%, transparent);
  border-radius: var(--cbs-radius-sm);
  background-color: color-mix(in srgb, var(--cbs-white) 8%, transparent);
  font-family: var(--cbs-font-sans);
  font-size: var(--cbs-text-small);
  color: var(--cbs-white);
  /* Fermé, l'input ne peut pas descendre sous padding + bordures (34 px) et
     déborde du conteneur à 0 px : le clip laissait 1 px de bordure sur
     certains rendus. On le fait donc aussi disparaître en opacité. */
  opacity: 0;
  transition: opacity var(--cbs-transition-base);
}

.site-search--open .site-search__input {
  opacity: 1;
}

.site-search__input::placeholder {
  color: var(--cbs-header-muted);
}

.site-search__input:focus-visible {
  outline: 2px solid var(--cbs-header-accent);
  outline-offset: 2px;
}

/* Croix native du type=search : Safari/Chrome en mettent une, on garde le
   champ sobre. */
.site-search__input::-webkit-search-decoration,
.site-search__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

/* ——— Largeurs latérales par palier (mêmes valeurs que la boutique et ARS) ——— */
@media (max-width: 479.98px) {
  .site-header {
    --cbs-header-side: 9.5rem;
  }
}

/* Petits écrans : logo + actions + burger doivent tenir sans déborder. */
@media (max-width: 429px) {
  .site-header {
    --cbs-header-side: 8.5rem;
  }

  /* 2 x 2,75 rem de boutons + enveloppe + marges : il reste ~12 rem. */
  .site-search {
    --cbs-search-width: 11rem;
  }

  .site-header__brand .custom-logo {
    max-height: 2.5rem;
  }

  .site-header__actions {
    gap: 0;
  }
}

@media (max-width: 359px) {
  .site-header {
    --cbs-header-side: 8rem;
  }

  .site-header__inner {
    gap: var(--cbs-space-2);
  }

  .site-header__brand .custom-logo {
    max-height: 2rem;
  }

  .site-header__action {
    width: 2.5rem;
  }
}