/*
 * LBYLCL Nav — chrome et système de tokens.
 *
 * Tous les tokens sont déclarés ici, sur :host, et RELUS par les composants
 * enfants avec un fallback. Les custom properties sont le seul canal de style
 * qui traverse la frontière shadow vers le contenu slotté : les entrées, les
 * colonnes et les liens déposés par le designer vivent dans le light DOM, notre
 * CSS ne les atteint pas, mais ils héritent de ces variables via l'arbre aplati.
 *
 * Les couleurs et les deux familles de police viennent du site publié
 * (cdn.prod.website-files.com/690258e7118739cdeb65e121). Rien d'autre n'a été
 * repris de sa CSS : ni échelle typographique, ni espacements, ni classes.
 *
 * ATTENTION : « Cstm Neighbor » n'existe qu'en 400, 700 et 900. Pas de 500 ni
 * de 600 — toute valeur intermédiaire sera arrondie par le navigateur.
 */
:host {
  /* — Palette de marque, verbatim du site — */
  --lcl-eggplant-900: #2a2240;
  --lcl-eggplant-800: #372d54;
  --lcl-eggplant-600: #4f4177;
  --lcl-eggplant-400: #7c5ed1;
  --lcl-yellow-400: #e0fa00;
  --lcl-yellow-300: #f1ff77;
  --lcl-whiteegg-100: #f3f2ef;
  --lcl-whiteegg-200: #e8e7e2;
  --lcl-bluefrost-100: #e7fbff;
  --lcl-bluefrost-200: #ccf6ff;
  /* Bas du dégradé du premier jet (--brand-light). */
  --lcl-brand-light: #e1f9fe;
  --lcl-bluefrost-400: #5fe0fc;
  --lcl-white: #fff;

  /* — Typographie — */
  --lcl-font-display: "Cstm Neighbor", Impact, sans-serif;
  --lcl-font-body: Inter, sans-serif;
  /* Cstm Neighbor : 400 | 700 | 900 uniquement. Aucun 500/600. */
  --lcl-entry-weight: 700;

  /* — Encre — */
  --lcl-ink: var(--lcl-eggplant-900);
  --lcl-ink-soft: color-mix(in srgb, var(--lcl-eggplant-900) 62%, transparent);
  --lcl-hairline: color-mix(in srgb, var(--lcl-eggplant-900) 12%, transparent);

  /* — Géométrie — */
  --lcl-bar-h: 60px;
  --lcl-max: 1240px;
  --lcl-gutter: 16px;
  --lcl-pad: 24px;
  /*
   * Retrait intérieur d'un lien de menu. Déclaré ICI et pas dans NavLink parce
   * que DEUX composants en dépendent et doivent s'accorder : le lien, qui en
   * fait sa surface de survol, et le titre de bloc de `Nav — Colonne`, qui s'en
   * décale d'autant pour que le texte du titre tombe sur celui des liens.
   *
   * Le retrait HORIZONTAL est nul, et c'est un choix : tout retrait y décale le
   * texte du lien par rapport au titre de son bloc, et la compensation sur le
   * titre reste fragile — un réglage qui doit tenir dans deux shadow roots
   * distincts. Aligner par zéro ne peut pas se désaccorder.
   *
   * Le retrait VERTICAL est la surface tactile et l'espacement entre liens à la
   * fois : le `gap` de la pile est presque nul, c'est lui qui rythme la liste.
   */
  --lcl-link-pad-x: 0px;
  --lcl-link-pad-y: 7px;

  /* Fond de barre au repos : translucide + flou, sur les DEUX variantes. */
  --lcl-bar-bg: color-mix(in srgb, var(--lcl-white) 66%, transparent);
  /* Fond dès qu'un menu est ouvert : opaque, sans flou. La transparence et le
     backdrop-filter posaient des problèmes de lisibilité sur du contenu
     arbitraire ; un dégradé plein règle la question. */
  /* Repris du premier jet : linear-gradient(180deg, #5FE0FC 10%, #E1F9FE 80%).
     Les bornes à 10% et 80% sont volontaires, elles laissent une amorce pleine
     en haut et une sortie pleine en bas. */
  --lcl-open-bg: linear-gradient(
    180deg,
    var(--lcl-bluefrost-400) 10%,
    var(--lcl-brand-light) 80%
  );
  /* Haut du dégradé, pour la barre — donc le bleu. La barre et le panneau sont
     deux boîtes distinctes : la barre tient une couleur plate égale au point de
     départ du dégradé, et le panneau déroule tout le dégradé sous elle. C'est ce
     qui rend la jointure continue. */
  --lcl-open-bar-bg: var(--lcl-bluefrost-400);
  /* Le BAS du dégradé, isolé : la barre du bas en écran étroit s'y raccorde
     exactement, donc la jointure ne se voit pas. */
  --lcl-open-bg-end: var(--lcl-brand-light);
  /* Hauteur réservée à la barre du bas du menu mobile. Lue par le Nav (qui la
     réserve en retrait de la feuille) ET par l'entrée (qui en déduit la hauteur
     maximale de son panneau) : elle se déclare donc ici, seul canal qui traverse
     la frontière shadow (§ 5). */
  --lcl-bottom-bar-h: 86px;

  /* — Mouvement : un seul easing dans tout le système — */
  --lcl-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --lcl-dur: 420ms;
  --lcl-dur-fast: 170ms;

  display: block;
  font-family: var(--lcl-font-display);
  color: var(--lcl-ink);
}

/* ──────────── Géométrie du chrome, COMMUNE aux deux variantes ──────────── */
/*
 * Pill flottante, floutée, arrondie : `.root` n'est pas sélectionné par variante,
 * donc « L by LCL » et « L by LCL Pro » partagent exactement cette géométrie.
 * Le rayon de la pill est aligné sur celui des CTA de la variante standard.
 * Les deux blocs qui suivent ne portent, chacun, que ses tokens de CTA.
 */
.HW6kQvYAyMPFu1grH8zL {
  --lcl-bar-gutter: 20px;
  --lcl-bar-inset: 12px;
  --lcl-bar-radius: 28px;
  /* Le MÊME rayon que la barre, et non une valeur à lui. Le panneau prolonge
     la pill vers le bas : deux rayons différents font une rupture au bas de la
     jointure, visible dès qu'on ouvre un menu. Il suit donc la barre, y compris
     quand elle descend à 24px sous 1200px. */
  --lcl-panel-radius: var(--lcl-bar-radius, 28px);
  --lcl-panel-pad-x: var(--lcl-pad);
  --lcl-panel-offset: 0px;
}

.HW6kQvYAyMPFu1grH8zL[data-variant="standard"] {
  --lcl-cta-radius: 16px;
  --lcl-cta-solid-bg: var(--lcl-yellow-400);
  --lcl-cta-solid-ink: var(--lcl-eggplant-900);
}

/* ───────────── Variante « L by LCL Pro » : ses tokens de CTA ───────────── */
.HW6kQvYAyMPFu1grH8zL[data-variant="pro"] {
  --lcl-cta-radius: 999px;
  --lcl-cta-solid-bg: var(--lcl-eggplant-900);
  --lcl-cta-solid-ink: var(--lcl-white);
}

/* ───────────────────────────── Structure ───────────────────────────── */
/*
 * Le positionnement vit ICI, pas sur :host — et c'est le point important.
 *
 * Les règles de l'arbre externe battent :host : le CSS de la page Webflow
 * s'applique à l'élément hôte par-dessus le nôtre. Un `position: relative` posé
 * par Webflow sur l'instance suffisait à annuler notre sticky. `.root` est à
 * l'intérieur du shadow root : rien d'extérieur ne peut l'atteindre.
 *
 * `fixed` et non `sticky` : sticky ne colle qu'à l'intérieur de la boîte de son
 * parent, or on ne sait pas dans quoi Webflow enveloppe le composant — si ce
 * parent fait la hauteur de la nav, sticky n'a aucune amplitude et ne fait
 * rien. `fixed` ne dépend d'aucun ancêtre (sauf transform/filter, cf. plus bas).
 *
 * CONSÉQUENCE ASSUMÉE : la nav ne prend plus de place dans le flux. C'est le
 * comportement voulu pour une barre en surimpression d'un hero. Sur une page
 * sans hero, le contenu passe dessous.
 */
.HW6kQvYAyMPFu1grH8zL {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: block;
  box-sizing: border-box;
  /* La gouttière empêche la pill de toucher les bords de l'écran quand la nav
     n'est pas déjà dans un conteneur — ce qui est le cas sur la page. */
  padding-inline: var(--lcl-bar-gutter, 0px);
}

/*
 * Lien d'évitement — invisible jusqu'au focus clavier.
 *
 * `position: absolute` se réfère à `.root`, qui est en `position: fixed` : le
 * translate vers le haut le sort donc du viewport, il n'occupe aucune place et
 * ne se voit pas. Au focus il redescend dans la barre.
 *
 * Pas de `transition` ici, et c'est volontaire : un lien d'évitement doit
 * apparaître instantanément, et une transition obligerait à l'annuler dans le
 * bloc `prefers-reduced-motion` de cette feuille pour rien.
 */
.uMElEJ_LEadts5EQdMCA {
  position: absolute;
  z-index: 2;
  left: var(--lcl-bar-gutter, 20px);
  top: var(--lcl-bar-inset, 12px);
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--lcl-white, #fff);
  color: var(--lcl-ink, #2a2240);
  font-family: var(--lcl-font-body, Inter, sans-serif);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transform: translateY(calc(-100% - var(--lcl-bar-inset, 12px)));
}

.uMElEJ_LEadts5EQdMCA:focus-visible {
  transform: translateY(0);
  outline: 2px solid var(--lcl-eggplant-900, #2a2240);
  outline-offset: 2px;
}

.yYkzKVZ3YcHJXP0Rltmm {
  display: block;
  position: relative;
  box-sizing: border-box;
  margin: var(--lcl-bar-inset) auto;
  max-width: calc(var(--lcl-max) + 2 * var(--lcl-pad));
  width: 100%;
  border-radius: var(--lcl-bar-radius);
  background: var(--lcl-bar-bg);
  backdrop-filter: blur(18px) saturate(1.35);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  /*
   * Les angles bas s'effacent à l'ouverture et reviennent à la fermeture, sur la
   * même durée et la même courbe que les angles HAUTS du panneau (`.panel` de
   * NavEntry). C'est la condition de la jointure : les deux rayons valent la
   * même chose à chaque image, donc le raccord reste net pendant tout le
   * mouvement, dans les deux sens. Changer l'un sans l'autre rouvre une encoche.
   */
  transition: border-bottom-left-radius var(--lcl-dur) var(--lcl-ease),
    border-bottom-right-radius var(--lcl-dur) var(--lcl-ease);
}

/*
 * Couche opaque, en fondu.
 *
 * On ne peut pas transitionner un fond translucide vers un dégradé : une couleur
 * et une `linear-gradient` ne s'interpolent pas, le changement était donc sec —
 * c'est une partie du flash constaté. On superpose plutôt une couche opaque dont
 * seule l'opacité s'anime. Elle couvre entièrement le fond translucide et le
 * flou quand un menu est ouvert, ce qui donne bien l'opacité demandée.
 */
.yYkzKVZ3YcHJXP0Rltmm::before {
  content: "";
  position: absolute;
  inset: 0;
  /*
   * z-index négatif, et c'est important : la couche peint au-dessus du fond de
   * `.shell` et sous son contenu, SANS qu'il faille positionner `.inner`.
   * Positionner `.inner` lui faisait voler le bloc conteneur du panneau des
   * entrées (qui est en position: absolute et remonte l'arbre aplati), et le
   * panneau prenait alors la largeur de `.inner` — 1240px — au lieu de celle de
   * `.shell` — 1288px. D'où un décalage de 24px de chaque côté, visible
   * seulement au-delà de ~1336px de large.
   */
  z-index: -1;
  border-radius: inherit;
  /*
   * Couleur plate, PAS le dégradé : la pill et le panneau sont deux boîtes
   * distinctes, un même dégradé appliqué aux deux repartirait de zéro sur le
   * panneau et créerait une couture. La barre tient donc le haut du dégradé
   * — donc le bleu, `--lcl-bluefrost-400` — et le panneau déroule tout le
   * dégradé sous elle : la transition est continue.
   */
  background: var(--lcl-open-bar-bg);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--lcl-dur) var(--lcl-ease);
}
.HW6kQvYAyMPFu1grH8zL[data-panel-open="true"] .yYkzKVZ3YcHJXP0Rltmm::before {
  opacity: 1;
}
/*
 * Menu ouvert : fond opaque en dégradé, plus aucun flou ni transparence, et les
 * angles bas de la pill s'effacent pour faire une jointure nette avec le
 * panneau. L'état vient du canal navChannel — le Nav ne peut pas voir dans le
 * shadow root des entrées.
 */
.HW6kQvYAyMPFu1grH8zL[data-panel-open="true"] .yYkzKVZ3YcHJXP0Rltmm {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.hPK0Y6GIF3Q3ex6MsVfK {
  display: flex;
  align-items: center;
  gap: 18px;
  /* 14px en haut/bas, 12px à gauche/droite. La hauteur n'est pas figée, le
     contenu la dicte — `--lcl-bar-h` ne sert que de plancher. Avec un logo de
     56px, la barre fait donc 84px de haut. */
  min-height: var(--lcl-bar-h);
  max-width: var(--lcl-max);
  margin: 0 auto;
  padding: 14px 12px;
  box-sizing: border-box;
}

/* — Logo — */
.evsXK6leOgBnCmXIxSlk {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  text-decoration: none;
  color: inherit;
  border-radius: 12px;
}
.evsXK6leOgBnCmXIxSlk:focus-visible {
  outline: 2px solid var(--lcl-ink);
  outline-offset: 3px;
}
.Us9Ae2UOKlfGpEyWxrqK {
  display: block;
  /* 56px : la barre atteint alors 88px de haut avec ses 16px de padding —
     exactement la hauteur du premier jet. */
  height: 56px;
  width: auto;
}

/*
 * Grappe de navigation : le slot d'entrées, le séparateur, puis le lien vers
 * l'autre univers. Un seul arbre de markup — un slot ne peut être rendu qu'une
 * fois, donc le passage desktop → mobile est un changement de CSS sur cette
 * même grappe, jamais un second arbre.
 */
.EkmmPy0dLj9bE_l1ViHQ {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.Ix5fmiaCWRReXPHJb_Er {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  height: 100%;
}

.bBNSDNp6PROnEPdXCo7N {
  flex: 0 0 auto;
  width: 1px;
  height: 20px;
  margin: 0 12px;
  background: color-mix(in srgb, var(--lcl-ink) 28%, transparent);
}

/*
 * Pill « glass » : elle met le lien vers l'autre univers légèrement en avant
 * sans le transformer en CTA. Blanc très translucide + flou, un filet clair, et
 * c'est tout — au-dessus de la barre floutée comme au-dessus du bleu opaque
 * d'un menu ouvert, le rendu reste léger dans les deux cas.
 */

/*
 * Enveloppe du CTA d'appoint. Au-dessus de 1024px elle ne génère AUCUNE boîte :
 * le séparateur et le lien restent des enfants directs de la grappe, et la
 * disposition de la barre est inchangée. Elle ne prend corps qu'en écran étroit
 * (voir la media query), où elle devient la barre du bas.
 */
.UJGNJ9otfIMvIOTT0XSg {
  display: contents;
}

.Sjhu6CERyHbA_S2qArjN {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  height: 34px;
  padding: 0 15px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--lcl-white) 58%, transparent);
  background: color-mix(in srgb, var(--lcl-white) 40%, transparent);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  font-family: var(--lcl-font-display);
  font-size: 15px;
  font-weight: 400;
  color: var(--lcl-ink);
  text-decoration: none;
  white-space: nowrap;

  /* Durée du balayage. Plus longue que `--lcl-dur-fast` : un reflet qui
     traverse doit se laisser suivre de l'œil, sinon il ressemble à un
     clignotement. Seul levier de réglage du geste. */
  --lcl-sheen-dur: 620ms;

  /* Le reflet est en `position: absolute` et `overflow: hidden` le clippe au
     rayon de la pill. `isolation: isolate` n'est pas décoratif : le
     `backdrop-filter` ci-dessus crée déjà un contexte d'empilement qui
     contiendrait le `z-index: -1` du reflet, mais sur un moteur sans
     backdrop-filter il n'y en aurait plus et la bande passerait DERRIÈRE la
     barre au lieu de rester dans la pill. */
  position: relative;
  overflow: hidden;
  isolation: isolate;

  /* Ombre déclarée à zéro au repos, pour que le halo du survol s'interpole
     au lieu d'apparaître d'un coup — `none` ne s'interpole pas. */
  box-shadow: 0 0 0 0 rgba(95, 224, 252, 0);
  transition: background-color var(--lcl-dur-fast, 170ms) var(--lcl-ease, ease),
    border-color var(--lcl-dur-fast, 170ms) var(--lcl-ease, ease),
    box-shadow var(--lcl-dur-fast, 170ms) var(--lcl-ease, ease);
}

/*
 * Le reflet spéculaire. Une bande claire et inclinée, garée hors-champ à
 * gauche au repos, qui traverse la pill au survol.
 *
 * `z-index: -1` la place au-dessus du fond de la pill mais SOUS le libellé :
 * le texte reste lisible pendant le passage. C'est ce qui distingue un reflet
 * d'un surlignage.
 *
 * La transition vit sur la règle de survol, pas ici : à la sortie, la bande
 * revient donc instantanément à sa position de départ au lieu de repartir en
 * marche arrière. Un reflet passe, il ne fait pas l'aller-retour.
 */
.Sjhu6CERyHbA_S2qArjN::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -60%;
  bottom: -60%;
  left: 0;
  width: 45%;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.9) 50%,
    transparent 100%
  );
  transform: translateX(-160%) skewX(-18deg);
  opacity: 0;
}

.Sjhu6CERyHbA_S2qArjN:hover {
  background: color-mix(in srgb, var(--lcl-white) 68%, transparent);
  border-color: color-mix(in srgb, var(--lcl-white) 85%, transparent);
  /* Halo bleu givré. Le `rgba()` précède le `color-mix()` — même convention
     que les badges : sur un moteur sans `color-mix()`, c'est le rgba qui
     reprend la main au lieu de laisser la déclaration invalide. */
  box-shadow: 0 6px 22px rgba(95, 224, 252, 0.45);
  box-shadow: 0 6px 22px
    color-mix(in srgb, var(--lcl-bluefrost-400, #5fe0fc) 45%, transparent);
}

.Sjhu6CERyHbA_S2qArjN:hover::after,
.Sjhu6CERyHbA_S2qArjN:focus-visible::after {
  /* 320 % de la largeur de la BANDE, soit 144 % de celle de la pill : elle
     ressort entièrement par la droite, où `overflow: hidden` la masque. */
  transform: translateX(320%) skewX(-18deg);
  opacity: 1;
  transition: transform var(--lcl-sheen-dur, 620ms)
      var(--lcl-ease, cubic-bezier(0.16, 1, 0.3, 1)),
    opacity 140ms linear;
}
.Sjhu6CERyHbA_S2qArjN:focus-visible {
  outline: 2px solid var(--lcl-ink);
  outline-offset: -2px;
  border-radius: 16px;
}

/* — CTA — */
.LKawqem7TblI35xvX501 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  margin-left: auto;
}

.MTl1t8VJy12qYaDRF30C {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 22px;
  border-radius: var(--lcl-cta-radius);
  font-family: var(--lcl-font-display);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--lcl-dur-fast) var(--lcl-ease),
    color var(--lcl-dur-fast) var(--lcl-ease),
    border-color var(--lcl-dur-fast) var(--lcl-ease),
    transform var(--lcl-dur-fast) var(--lcl-ease);
}
.MTl1t8VJy12qYaDRF30C:focus-visible {
  outline: 2px solid var(--lcl-ink);
  outline-offset: 2px;
}
.MTl1t8VJy12qYaDRF30C:active {
  transform: translateY(1px);
}

.ECOrHU_eOn2oWObKdyQN {
  color: var(--lcl-ink);
  border: 1.5px solid color-mix(in srgb, var(--lcl-ink) 45%, transparent);
  background: transparent;
}
.ECOrHU_eOn2oWObKdyQN:hover {
  border-color: var(--lcl-ink);
}

.ZjWeYLP_nS7TQ83GN3lG {
  color: var(--lcl-cta-solid-ink);
  background: var(--lcl-cta-solid-bg);
  border: 1.5px solid transparent;
}
.ZjWeYLP_nS7TQ83GN3lG:hover {
  background: color-mix(in srgb, var(--lcl-cta-solid-bg) 86%, var(--lcl-eggplant-900));
}

/* — Burger — */
.OLEzVu2LYtJ8btTfAmDk {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: var(--lcl-cta-radius);
  background: transparent;
  color: var(--lcl-ink);
  cursor: pointer;
}
.OLEzVu2LYtJ8btTfAmDk:focus-visible {
  outline: 2px solid var(--lcl-ink);
  outline-offset: 2px;
}
.mrmxamEY3C9jCeFNUOO_ {
  display: block;
  position: relative;
  width: 17px;
  height: 11px;
}
.mrmxamEY3C9jCeFNUOO_::before,
.mrmxamEY3C9jCeFNUOO_::after,
.mrmxamEY3C9jCeFNUOO_ > i {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1.6px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--lcl-dur-fast) var(--lcl-ease),
    opacity var(--lcl-dur-fast) var(--lcl-ease);
}
.mrmxamEY3C9jCeFNUOO_::before {
  top: 0;
}
.mrmxamEY3C9jCeFNUOO_ > i {
  top: 4.7px;
}
.mrmxamEY3C9jCeFNUOO_::after {
  bottom: 0;
}

.OLEzVu2LYtJ8btTfAmDk[aria-expanded="true"] .mrmxamEY3C9jCeFNUOO_::before {
  transform: translateY(4.7px) rotate(45deg);
}
.OLEzVu2LYtJ8btTfAmDk[aria-expanded="true"] .mrmxamEY3C9jCeFNUOO_ > i {
  opacity: 0;
  transform: scaleX(0.3);
}
.OLEzVu2LYtJ8btTfAmDk[aria-expanded="true"] .mrmxamEY3C9jCeFNUOO_::after {
  transform: translateY(-4.7px) rotate(-45deg);
}

@media (max-width: 1199px) {
  .HW6kQvYAyMPFu1grH8zL {
    --lcl-bar-radius: 24px;
  }
}

@media (max-width: 1023px) {
  /*
   * ⚠️ LE FLOU EST RETIRÉ EN ÉCRAN ÉTROIT, ET CE N'EST PAS ESTHÉTIQUE.
   *
   * Un `backdrop-filter` crée un bloc conteneur pour tout descendant en
   * `position: fixed` : tant qu'il est là, le panneau d'onglet ne peut pas se
   * placer par rapport à l'ÉCRAN et se cale sur la barre. Or il DOIT être fixe —
   * c'est la seule position qui le sorte à la fois du défilement horizontal de
   * la piste et du clipping de la feuille. La feuille est opaque dès qu'elle
   * s'ouvre : le flou ne s'y voit pas, et il coûte ce positionnement.
   */
  /*
   * ⚠️ LE FLOU NE PART QUE QUAND LE MENU EST OUVERT.
   *
   * Il doit partir à ce moment-là : un `backdrop-filter` crée un bloc conteneur
   * pour tout descendant en `position: fixed`, et le panneau d'onglet en est un
   * (§ 3.2) — tant que le flou est là, il se cale sur la barre au lieu de
   * l'écran. Mais le retirer en permanence coûtait le flou de la barre AU REPOS,
   * qui est l'un des deux seuls effets de chrome de cette nav.
   *
   * `isolation: isolate` est la CONSÉQUENCE du retrait, pas une option : c'était
   * le `backdrop-filter` qui créait le contexte d'empilement de la barre ; sans
   * lui, la couche de couleur `.shell::before`, posée en `z-index: -1`, passe
   * DERRIÈRE le fond blanc translucide et la barre reste claire alors que la
   * feuille est bleue. Constaté.
   */
  .HW6kQvYAyMPFu1grH8zL[data-panel-open="true"] .yYkzKVZ3YcHJXP0Rltmm {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    isolation: isolate;
  }

  .OLEzVu2LYtJ8btTfAmDk {
    display: inline-flex;
    order: 3;
  }
  .LKawqem7TblI35xvX501 {
    order: 2;
  }
  /* La grappe quitte la barre et devient une feuille empilée sous celle-ci. */
  .EkmmPy0dLj9bE_l1ViHQ {
    position: absolute;
    top: calc(100% + var(--lcl-panel-offset));
    left: 0;
    right: 0;
    z-index: 40;
    display: block;
    /*
     * PLEINE HAUTEUR, dès l'ouverture. La feuille occupait 72vh au plus et se
     * terminait sur un bord flottant, ce qui donnait une surface qui hésite
     * entre le panneau et l'écran. Elle descend maintenant jusqu'en bas.
     *
     * `100dvh` d'abord, `100vh` en repli : sur mobile, `vh` compte la barre
     * d'adresse du navigateur comme si elle n'existait pas, et la feuille
     * dépasse alors sous le pli. `dvh` suit la hauteur réellement visible. Le
     * repli est déclaré AVANT, pour qu'un moteur sans `dvh` garde la valeur
     * qu'il comprend.
     */
    /*
     * La hauteur retranchée est celle MESURÉE de la barre, pas le token.
     * `--lcl-bar-h` est un PLANCHER (§ 5) : avec un logo, deux CTA et un burger,
     * la barre monte bien au-dessus, et la feuille — dont le `top` vaut la
     * hauteur réelle — dépassait alors sous le pli de tout l'écart.
     */
    /* Le même retrait qu'en haut est laissé EN BAS : la feuille flotte au-dessus
       du bord de l'écran et ses angles se voient, au lieu d'être coupés. */
    height: calc(100vh - var(--lcl-shell-bottom, 120px) - var(--lcl-bar-inset, 12px));
    height: calc(100dvh - var(--lcl-shell-bottom, 120px) - var(--lcl-bar-inset, 12px));
    /*
     * Colonne flex, et c'est ce qui pousse le CTA d'appoint en bas — voir son
     * `margin-top: auto`. `position: sticky` avait été essayé et ne collait
     * pas : sticky ne s'active que si le contenu DÉPASSE le scroller, or la
     * feuille est plus haute que son contenu. Une colonne flex n'a pas cette
     * condition.
     */
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    /*
     * Le défilement tactile qui n'a nulle part où aller dans cette feuille se
     * propageait à la page derrière — c'est le « chaînage » de défilement, et il
     * est indépendant du verrou `overflow: hidden` posé sur le body.
     */
    overscroll-behavior: contain;
    /*
     * Le retrait bas RÉSERVE la place de la barre du bas, qui est en `absolute`
     * dans cette feuille et ne pousse donc rien.
     *
     * Il est écrit dans le raccourci, et pas en `padding-bottom` séparé : la
     * déclaration longue était posée AVANT le raccourci, qui la réécrivait en
     * entier — la réserve n'existait pas, et le contenu passait sous la barre.
     */
    padding: 10px var(--lcl-pad) calc(env(safe-area-inset-bottom, 0px) + 14px);
    box-sizing: border-box;
    /* Les angles BAS reviennent : la feuille ne touche plus le bord de l'écran.
       Les angles hauts restent droits — c'est la jointure avec la barre. */
    border-radius: 0 0 var(--lcl-bar-radius) var(--lcl-bar-radius);
    /*
     * Un APLAT, et non le dégradé. La feuille ne contient plus que la piste
     * d'onglets : le panneau de l'onglet actif est une boîte distincte, posée
     * juste dessous (§ 3.2). Deux dégradés qui se suivent produisent une
     * cassure nette à la jointure — chacun repart de sa propre couleur de
     * départ. La feuille tient donc le HAUT du dégradé en couleur plate, et le
     * panneau déroule le dégradé entier à partir de là : la continuité est
     * exacte, par construction.
     */
    background: var(--lcl-open-bar-bg);
    box-shadow: 0 24px 48px -28px color-mix(in srgb, var(--lcl-eggplant-900) 45%, transparent);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity var(--lcl-dur) var(--lcl-ease),
      transform var(--lcl-dur) var(--lcl-ease), visibility var(--lcl-dur);
  }
  .EkmmPy0dLj9bE_l1ViHQ[data-open="true"] {
    visibility: visible;
    opacity: 1;
    transform: none;
  }
  /*
   * ═══ LES ENTRÉES DEVIENNENT UNE PISTE D'ONGLETS ═══
   *
   * Une rangée horizontale défilante, et non une pile de lignes pleine largeur :
   * à cette largeur, une liste d'entrées dépliables enterre le contenu sous
   * plusieurs écrans de titres. Les onglets gardent tout le niveau 1 visible
   * d'un coup d'œil.
   *
   * Le wrapper de slot est neutralisé ICI SEULEMENT (§ 6.4) : en desktop, il
   * est laissé tel quel — c'est un écart constaté et non expliqué qu'on ne
   * touche pas —, mais un wrapper flex EN COLONNE empêcherait toute rangée.
   */
  /*
   * Piste défilante sur UNE ligne : les onglets ne passent jamais à la ligne.
   * Le panneau n'est plus clippé par ce défilement puisqu'il est `fixed`.
   */
  .Ix5fmiaCWRReXPHJb_Er {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    flex: 0 0 auto;
    gap: 6px;
    height: auto;
    margin: 0 calc(-1 * var(--lcl-pad));
    padding: 2px var(--lcl-pad) 10px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .Ix5fmiaCWRReXPHJb_Er::-webkit-scrollbar {
    display: none;
  }
  .Ix5fmiaCWRReXPHJb_Er > slot {
    display: contents;
  }
  .Ix5fmiaCWRReXPHJb_Er > slot::slotted(*) {
    display: contents !important;
  }
  /* CTA compact dès que le burger apparaît : à cette largeur, la barre doit
     tenir le logo, un CTA et le burger. */
  .MTl1t8VJy12qYaDRF30C {
    height: 38px;
    padding: 0 16px;
    font-size: 13.5px;
  }
  .bBNSDNp6PROnEPdXCo7N {
    width: auto;
    height: 1px;
    margin: 10px 0;
    background: var(--lcl-hairline);
  }
  /*
   * ═══ LE CTA D'APPOINT COLLE EN BAS DE LA FEUILLE ═══
   *
   * `sticky` et surtout PAS `fixed` : la barre porte un `backdrop-filter`, qui
   * **crée un bloc conteneur pour tout descendant en `position: fixed`**. Un
   * `fixed` ici n'est donc pas placé par rapport à l'écran mais par rapport à la
   * barre, et le CTA se retrouvait collé tout en haut. Constaté, pas supposé.
   *
   * `sticky` n'a pas ce défaut : il se cale dans la boîte qui défile, et la
   * feuille défile et fait toute la hauteur visible. Le CTA reste donc au bas de
   * l'écran quel que soit le défilement, sans quitter le flux.
   */
  /*
   * L'enveloppe devient la BARRE DU BAS, et elle reste DANS la feuille.
   *
   * `absolute` par rapport à la feuille — qui est elle-même positionnée — et non
   * `fixed` par rapport à l'écran : en `fixed` elle se collait aux bords de
   * l'écran, donc elle débordait des gouttières et des angles arrondis du menu.
   * Ses bords reprennent le retrait de la feuille, elle reste à l'intérieur.
   *
   * Un FOND est nécessaire — sans lui le contenu du menu défile derrière le
   * libellé — et c'est exactement celui de la feuille, `--lcl-open-bar-bg`, sans
   * quoi on voit une bande d'une autre couleur en bas du menu.
   */
  /*
   * ═══ AUCUN POSITIONNEMENT : LA BARRE EST DANS LE FLUX ═══
   *
   * La feuille est une colonne flex ; `margin-top: auto` met tout l'espace
   * restant AU-DESSUS de la barre, qui tombe donc en bas. Elle reste un enfant
   * ordinaire, donc elle hérite du retrait de la feuille et ne peut pas en
   * sortir — quelle que soit la boîte de référence.
   *
   * `position: absolute` a été essayé deux fois et a débordé les deux fois : un
   * élément absolu se cale sur la boîte de PADDING, laquelle inclut le padding
   * de la feuille, donc `left: 0` colle au bord ; et y ajouter le retrait le
   * décale de deux fois trop. `fixed`, lui, se colle aux bords de l'écran.
   * **Ne pas repositionner cette barre.**
   *
   * Elle ne recouvre rien : le panneau d'onglet est `fixed` et borne sa hauteur
   * à `--lcl-bottom-bar-h`, la feuille ne contient donc que la piste et elle.
   */
  .UJGNJ9otfIMvIOTT0XSg {
    display: flex;
    /* `align-self: stretch` explicite : la feuille est une colonne flex, et un
       item n'y est étiré que si rien ne l'en empêche. On ne le suppose pas. */
    align-self: stretch;
    width: 100%;
    box-sizing: border-box;
    margin-top: auto;
    padding-top: 14px;
  }

  .Sjhu6CERyHbA_S2qArjN {
    /* `flex: 1 1 auto` et non une largeur : dans la barre, le lien est le seul
       item, il prend donc toute la place — sans dépendre d'un pourcentage dont
       la référence a changé trois fois. */
    flex: 1 1 auto;
    width: auto;
    height: 50px;
    justify-content: center;
    padding: 0 18px;
  }

  /*
   * ⚠️ Cette règle est un RAPPEL, pas un réglage : elle ne fait que répéter
   * l'`overflow-y` déclaré plus haut, parce qu'un `overflow: visible` y a été
   * posé un temps et a supprimé le défilement de la feuille — il était déclaré
   * APRÈS, donc il gagnait. Le panneau d'onglet est `fixed` : il n'est clippé
   * par aucun `overflow`, la feuille peut défiler sans lui nuire.
   */
  .EkmmPy0dLj9bE_l1ViHQ {
    overflow-x: hidden;
    overflow-y: auto;
  }

  /* Le séparateur n'a plus rien à séparer : le lien a quitté le flux. */
  .bBNSDNp6PROnEPdXCo7N {
    display: none;
  }
}

@media (max-width: 639px) {
  .ECOrHU_eOn2oWObKdyQN {
    display: none;
  }
  .hPK0Y6GIF3Q3ex6MsVfK {
    gap: 12px;
    padding: 0 var(--lcl-gutter);
  }
  .Us9Ae2UOKlfGpEyWxrqK {
    height: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .yYkzKVZ3YcHJXP0Rltmm,
  .yYkzKVZ3YcHJXP0Rltmm::before,
  .MTl1t8VJy12qYaDRF30C,
  .Sjhu6CERyHbA_S2qArjN,
  .EkmmPy0dLj9bE_l1ViHQ,
  .mrmxamEY3C9jCeFNUOO_::before,
  .mrmxamEY3C9jCeFNUOO_::after,
  .mrmxamEY3C9jCeFNUOO_ > i {
    transition: none;
  }

  /* Le reflet est un mouvement, et rien d'autre : il n'a aucun equivalent
     statique. On le retire plutot que de le figer a mi-course. */
  .Sjhu6CERyHbA_S2qArjN::after {
    display: none;
  }
}