/* ================================================================ HEADER
   Repris de badapt.com3.0/css/header.css : îlot centré, transparent sur le
   hero, qui se replie en un bouton rond au scroll et se rouvre en remontant.
   Ajout : une fois sur le Lin, l'îlot prend un fond Lin translucide pour
   rester lisible au-dessus des sections Encre et Bleu. */
.site-header {
  --hfg: var(--encre);
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding-top: calc(env(safe-area-inset-top, 0px) + .9rem);
  padding-left: var(--gutter);
  padding-right: var(--gutter-r);
  pointer-events: none;
  animation: header-drop .8s var(--ease-expo) both .2s;
}
:root[data-ground="dark"] .site-header { --hfg: var(--lin); }
@keyframes header-drop { from { transform: translateY(-120%); opacity: 0; } }

.site-header__shell {
  position: relative;
  display: flex;
  justify-content: center;
  height: 3.5rem;
}

.site-header__island {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3.5vw, 2.75rem);
  padding: 0 .55rem 0 1.25rem;
  border-radius: var(--r-pill);
  background: transparent;
  pointer-events: auto;
  transition: background-color .4s var(--ease-expo), box-shadow .4s var(--ease-expo), opacity .4s var(--ease-expo), transform .5s var(--ease-expo);
}
:root[data-ground="light"] .site-header__island {
  background: var(--lin-a86);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 0 0 1px var(--encre-a07), 0 12px 32px -14px var(--encre-a35);
}

.logo {
  display: inline-flex; align-items: center; gap: .45em;
  color: var(--hfg);
  text-decoration: none;
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -.035em;
  line-height: 1;
  transition: color .3s var(--ease-expo);
}
.logo__mark { width: auto; height: 1.15em; flex: none; }
.logo__word { transform: translateY(-.06em); }

.nav ul {
  display: flex; align-items: center;
  gap: clamp(.9rem, 2.4vw, 2rem);
  margin: 0; padding: 0; list-style: none;
}
.nav a {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  padding: .4rem 0;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--hfg);
  text-decoration: none;
  transition: color .3s var(--ease-expo), opacity .4s var(--ease-expo), transform .5s var(--ease-expo);
}
.nav a::before { content: ""; position: absolute; inset: -.6rem -.5rem; }
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  border-radius: 3px; background: var(--corail);
  transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease-expo);
}
.nav a:hover::after, .nav a:focus-visible::after { transform: scaleX(1); }

.site-header__cta {
  padding: .85em 1.25em;
  font-size: .8125rem;
  opacity: 0; width: 0; padding-inline: 0; overflow: hidden;
  transition: opacity .4s var(--ease-expo), transform .4s var(--ease-back), background-color .25s;
}
/* Le bouton RDV n'existe qu'une fois sorti du hero : sur le noir il ferait
   concurrence aux mots. */
:root[data-ground="light"] .site-header__cta { opacity: 1; width: auto; padding-inline: 1.25em; }
:root[data-ground="dark"] .site-header__island { padding-right: 1.25rem; }

.site-header__dock {
  position: absolute; top: 50%; left: 50%;
  translate: -50% -50%;
  width: max-content;
  display: flex; align-items: center; gap: .6rem;
  pointer-events: none;
}
.site-header__toggle {
  position: relative; flex: none;
  display: grid; place-items: center;
  width: 3.5rem; height: 3.5rem;
  padding: 0; border: 0; border-radius: 50%;
  background: var(--bleu); color: var(--blanc);
  /* Liseré Lin : reste visible au-dessus des sections Bleu. */
  box-shadow: 0 0 0 2px var(--lin), 0 10px 28px -10px var(--bleu-a70);
  cursor: pointer;
  pointer-events: auto;
  transition: opacity .35s var(--ease-expo), transform .5s var(--ease-back);
}
.site-header__cross { width: 1.5rem; height: 1.5rem; rotate: 0deg; transition: rotate .75s var(--ease-expo), scale .55s var(--ease-expo); }
.site-header__toggle:hover .site-header__cross,
.site-header__toggle:focus-visible .site-header__cross { rotate: 225deg; scale: 1.15; }

.site-header[data-state="expanded"] .site-header__toggle { opacity: 0; transform: scale(.6); pointer-events: none; }
.site-header[data-state="collapsed"] .site-header__toggle { opacity: 1; transform: scale(1); pointer-events: auto; }

/* Bouton « Prendre rendez-vous » à côté du + quand le menu est replié :
   il glisse depuis le + avec un léger retard. */
.site-header__book {
  flex: none; height: 3.5rem; padding-inline: 1.4em;
  font-size: .8125rem; white-space: nowrap;
  box-shadow: 0 0 0 2px var(--lin), 0 10px 28px -12px var(--encre-a60);
  transition: opacity .35s var(--ease-expo), transform .55s var(--ease-back), background-color .25s, color .25s;
}
.site-header__book:hover { background: var(--citron); color: var(--encre); }
.site-header[data-state="expanded"] .site-header__book { opacity: 0; transform: translateX(-2.5rem) scale(.7); pointer-events: none; }
.site-header[data-state="collapsed"] .site-header__book { opacity: 1; transform: none; pointer-events: auto; transition-delay: .08s; }
@media (max-width: 23rem) { .site-header__book { padding-inline: 1.1em; font-size: .75rem; } }
.site-header[data-state="collapsed"] .site-header__island { opacity: 0; transform: scale(.92); pointer-events: none; }

@media (max-width: 64rem) {
  .site-header__cta { display: none !important; }
}
@media (max-width: 40rem) {
  .site-header__cta { display: none; }
  .logo__word { display: none; }
  .logo { font-size: 1.6rem; }
  .site-header__island, :root[data-ground="dark"] .site-header__island { padding: 0 .8rem; gap: .6rem; }
  .nav ul { gap: .6rem; }
  /* « Qui nous sommes » passe sur deux lignes plutôt que de déborder. */
  .nav a { font-size: .78rem; line-height: 1.05; text-align: center; max-width: 5.2rem; white-space: normal; }
  .nav li:last-child a { min-width: 4.2rem; }
}
@media (max-width: 23rem) {
  .site-header__island, :root[data-ground="dark"] .site-header__island { padding: 0 .6rem; gap: .45rem; }
  .nav ul { gap: .45rem; }
  .logo { font-size: 1.4rem; }
  .lang { min-width: 2.1rem; height: 2rem; padding: 0 .45rem; font-size: .6875rem; }
}

/* Bouton de langue : une pastille qui annonce la langue d'arrivée. */
.lang {
  display: grid; place-items: center;
  min-width: 2.6rem; height: 2.25rem;
  padding: 0 .7rem;
  border: 0; border-radius: var(--r-pill);
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--hfg);
  color: var(--hfg);
  font: 600 .75rem/1 var(--font);
  letter-spacing: .12em;
  cursor: pointer;
  transition: background-color .25s, color .25s, box-shadow .25s, transform .4s var(--ease-back);
}
.lang:hover { background: var(--hfg); color: var(--ground, var(--lin)); transform: scale(1.06); }
:root[data-ground="light"] .lang:hover { color: var(--lin); }

/* Fondu court pendant le changement de langue. */
main, .footer { transition: opacity .25s ease; }
.is-switching main, .is-switching .footer { opacity: 0; }

/* Très petits écrans (≤ 21rem, 336 px) : l'îlot déplié doit tenir dans
   l'écran (la maquette était vérifiée à partir de 360 px). En fin de
   fichier pour passer après la règle de base de .lang. */
@media (max-width: 21rem) {
  .site-header__island, :root[data-ground="dark"] .site-header__island { padding: 0 .5rem; gap: .35rem; }
  .nav ul { gap: .3rem; }
  .nav a { font-size: .72rem; }
  .lang { padding: 0 .35rem; }
}