/* HEADER 11 - ILOT FLOTTANT
   ---------------------------------------------------------------------------
   Au repos, une barre pleine largeur, posee sur le hero. Au defilement, elle
   se detache des bords et devient un ilot : les marges s'ouvrent, les angles
   s'arrondissent, la capsule se resserre en largeur et en hauteur, tres
   lentement, puis flotte sur le contenu avec un filet et une ombre a peine
   visible.

   Differente de header-6 (pilule blanche permanente) : ici la capsule n'existe
   pas en haut de page, elle NAIT du defilement — c'est la signature.

   HAUTEUR MESUREE CONSTANTE : la racine garde la hauteur pleine (`__barre`),
   seule la capsule se transforme a l'interieur. `--header-height`, mesuree par
   assets/js/main.js sur la racine, reste donc juste dans tous les etats, et la
   bande laissee libre autour de l'ilot laisse passer le pointeur.

   ETATS : opaque par defaut, transparent en haut d'une page dont le hero le
   declare (`data-hero-immersif`), avec un voile ecrit par le header (§4.14). */

.header-11 {
  --header-11-hauteur: 88px;
  --header-11-ilot: 64px;
  --header-11-marge: 14px;
  --header-11-largeur: 1080px;
  --header-11-fond: var(--white);
  --header-11-texte: var(--black);
  --header-11-voile: 0;
  --header-11-lent: 0.95s;
  --header-11-courbe: cubic-bezier(0.22, 1, 0.36, 1);

  --burger-color: var(--header-11-texte);
  --burger-color-hover: var(--header-11-texte);
  --burger-bg-hover: color-mix(in srgb, var(--header-11-texte) 10%, transparent);
  --burger-reserve: 0;

  background: none;
  pointer-events: none;
  transition: top 0.5s var(--header-11-courbe);
}

html:has([data-hero-immersif]) .header-11.at-top {
  --header-11-fond: transparent;
  --header-11-texte: var(--white);
  --header-11-voile: 1;
}

.header-11__barre {
  position: relative;
  /* `flow-root` : la marge haute de l'ilot ne doit pas traverser la barre,
     sinon la racine grandit de cette marge et la mesure de hauteur ment. */
  display: flow-root;
  height: var(--header-11-hauteur);
}

.header-11__barre::before {
  content: "";
  position: absolute;
  inset: 0 0 -72px 0;
  /* Dense sur toute la hauteur du texte (lisible sur une photo blanche : >= 4,5:1),
     puis fondu sous la barre. */
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.62) 0, rgba(0, 0, 0, 0.55) calc(100% - 72px), rgba(0, 0, 0, 0) 100%);
  opacity: var(--header-11-voile);
  transition: opacity 0.6s ease;
  pointer-events: none;
}

/* ---- La capsule : barre au repos, ilot au defilement ---- */
.header-11__capsule {
  position: relative; /* ancre du panneau de services : il tombe sous l'ilot */
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(1rem, 2.6vw, 2.5rem);
  width: 100%;
  max-width: 100%;
  height: var(--header-11-hauteur);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3.5rem);
  border-radius: 0;
  background-color: var(--header-11-fond);
  color: var(--header-11-texte);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--black) 0%, transparent),
    0 12px 32px rgba(0, 0, 0, 0);
  pointer-events: auto;
  transition:
    max-width var(--header-11-lent) var(--header-11-courbe),
    height var(--header-11-lent) var(--header-11-courbe),
    margin var(--header-11-lent) var(--header-11-courbe),
    padding var(--header-11-lent) var(--header-11-courbe),
    border-radius var(--header-11-lent) var(--header-11-courbe),
    box-shadow var(--header-11-lent) ease,
    background-color 0.6s ease,
    color 0.6s ease;
}

/* Page sans hero, en haut : la barre opaque se separe du contenu par un filet. */
.header-11.at-top .header-11__capsule {
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--black) 8%, transparent),
    0 12px 32px rgba(0, 0, 0, 0);
}
html:has([data-hero-immersif]) .header-11.at-top .header-11__capsule {
  box-shadow:
    0 0 0 0 transparent,
    0 12px 32px rgba(0, 0, 0, 0);
}

.header-11:not(.at-top) .header-11__capsule {
  max-width: min(var(--header-11-largeur), calc(100% - 2 * var(--header-11-marge)));
  height: var(--header-11-ilot);
  margin-top: var(--header-11-marge);
  padding: 0 clamp(1rem, 2vw, 1.75rem) 0 clamp(1.25rem, 2.4vw, 2rem);
  border-radius: calc(var(--header-11-ilot) / 2);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--black) 7%, transparent),
    0 12px 32px rgba(0, 0, 0, 0.07);
}

/* ---- Marque ---- */
.header-11__marque,
.header-11__marque:hover,
.header-11__marque:focus {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  min-height: 44px;
  color: var(--header-11-texte);
  text-decoration: none;
}
.header-11__marque:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 6px;
}

.header-11__logo {
  display: block;
  max-height: calc(var(--header-11-ilot) - 18px);
  transition: filter 0.6s ease;
}
.header-11__logo--clair {
  display: none;
}
html:has([data-hero-immersif]) .header-11.at-top .header-11__marque:not(.header-11__marque--double) .header-11__logo {
  filter: brightness(0) invert(1);
}
html:has([data-hero-immersif]) .header-11.at-top .header-11__marque--double .header-11__logo {
  display: none;
}
html:has([data-hero-immersif]) .header-11.at-top .header-11__marque--double .header-11__logo--clair {
  display: block;
}

.header-11__nom {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  max-width: 18ch;
  color: var(--header-11-texte);
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  font-weight: 400;
  line-height: 1.15;
  transition: color 0.6s ease;
}

/* ---- Navigation ---- */
.header-11__nav {
  display: flex;
  justify-content: center;
  gap: clamp(0.9rem, 2.2vw, 2.25rem);
}

.header-11__item {
  align-items: center;
}

.header-11 .header-11__lien,
.header-11 .header-11__lien:hover {
  position: relative;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  height: auto;
  min-height: 44px;
  padding: 0 0.15rem;
  border: 0;
  background: none;
  color: var(--header-11-texte);
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.6s ease, opacity 0.25s ease;
}

/* Au survol, les voisins s'estompent : l'onglet vise ressort sans couleur. */
.header-11__nav:hover .header-11__lien {
  opacity: 0.55;
}
.header-11__nav .header-11__lien:hover,
.header-11__nav .header-11__item:hover .header-11__lien {
  opacity: 1;
}

.header-11 .header-11__lien:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 6px;
  opacity: 1;
}

.header-11__chevron {
  width: 12px;
  height: 12px;
  transition: transform 0.4s var(--header-11-courbe);
}
.header-11__item:hover .header-11__chevron,
.header-11__item:focus-within .header-11__chevron {
  transform: rotate(180deg);
}

/* ---- Actions ---- */
.header-11__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.header-11__rdv,
.header-11__rdv:hover,
.header-11__rdv:focus {
  appearance: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1.35rem;
  border: 0;
  border-radius: 4px;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.header-11__rdv:hover {
  background: var(--secondary);
  color: var(--on-secondary);
}
.header-11__rdv:focus-visible {
  outline: 2px solid var(--header-11-texte);
  outline-offset: 3px;
}

.header-11__toggle {
  appearance: none;
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0 -8px 0 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--header-11-texte);
  font-family: inherit;
  cursor: pointer;
  transition: color 0.6s ease, background-color 0.25s ease;
}
.header-11__toggle:hover,
.header-11__toggle:focus {
  background: color-mix(in srgb, var(--header-11-texte) 10%, transparent);
  color: var(--header-11-texte);
}
.header-11__toggle:focus-visible {
  outline: 2px solid var(--header-11-texte);
  outline-offset: 2px;
}
.header-11__toggle svg {
  width: 24px;
  height: 24px;
}

.header-11__annexes {
  display: contents;
  pointer-events: auto;
}

/* ---- Menu burger (sous-composant optionnel, menu-burger/main.css) ----
   Comme sur les headers 1 a 6, le declencheur se pose SUR la barre : la
   racine ne lui reserve aucune bande (`--burger-reserve: 0`) — la barre
   s'arretait sinon avant le bord, et le declencheur flottait a cote, sans
   fond ni voile. C'est la barre qui lui fait la place, a droite, et
   `--burger-y` le garde centre sur elle dans chaque etat. */
.header-11[data-burger] .header-11__capsule {
  padding-right: calc(clamp(0.9rem, 2.5vw, 1.6rem) + clamp(42px, 5vw, 50px) + clamp(0.5rem, 1.2vw, 1rem));
}

/* L'ilot : il se resserre au centre et descend de sa marge. Le declencheur
   le suit (bord droit de l'ilot, centre de sa hauteur), au meme rythme. */
.header-11[data-burger]:not(.at-top) .header-11__capsule {
  padding-right: calc(clamp(0.6rem, 1.2vw, 0.9rem) + clamp(42px, 5vw, 50px) + clamp(0.4rem, 1vw, 0.75rem));
}

.header-11:not(.at-top) {
  --burger-y: calc(var(--header-11-marge) + var(--header-11-ilot) / 2 - var(--header-11-hauteur) / 2);
}

/* COUPLAGE avec headers/menu-burger : ces deux regles ecrivent directement
   `transition` et `right` sur `.burger-trigger`, classe du sous-composant
   partage (menu-burger/main.css n'offre pas de variable `--burger-x`, seul
   `--burger-y` existe). Si le sous-composant renomme cette classe, change sa
   transition ou passe d'un ancrage `right` a autre chose, revoir ce bloc (et
   ses equivalents dans header-7.css et header-10.css). */
.header-11[data-burger] .burger-trigger {
  transition:
    top var(--header-11-lent) var(--header-11-courbe),
    right var(--header-11-lent) var(--header-11-courbe),
    background 0.3s ease,
    color 0.3s ease,
    box-shadow 0.3s ease;
}

.header-11[data-burger]:not(.at-top) .burger-trigger {
  right: calc(max((100% - var(--header-11-largeur)) / 2, var(--header-11-marge)) + clamp(0.6rem, 1.2vw, 0.9rem));
}

/* ---- Tablette et mobile ---- */
@media (max-width: 1024px) {
  .header-11 {
    --header-11-hauteur: 74px;
    --header-11-ilot: 58px;
    --header-11-marge: 10px;
  }

  .header-11__capsule {
    grid-template-columns: 1fr auto;
  }

  .header-11__nav {
    display: none;
  }

  .header-11__toggle {
    display: grid;
  }

  .header-11:has(.cta-mobile-2) .header-11__rdv {
    display: none;
  }
}

@media (max-width: 600px) {
  .header-11 {
    --header-11-hauteur: 68px;
    --header-11-ilot: 54px;
    --header-11-marge: 8px;
  }

  .header-11__rdv {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .header-11 {
    --header-11-lent: 0s;
  }
  .header-11__barre::before {
    transition: none;
  }
}