/*
 * LBYLCL Nav — Entrée.
 *
 * Ce composant a son propre shadow root : les tokens ne sont pas déclarés ici,
 * ils sont hérités de l'hôte du Nav à travers l'arbre aplati (les custom
 * properties sont le seul canal de style qui traverse la frontière shadow). On
 * les relit avec un fallback, pour que l'entrée reste présentable si elle est
 * déposée seule.
 *
 * POINT CLÉ DE POSITIONNEMENT — ni :host ni .root ne sont positionnés, et c'est
 * volontaire. Le panneau est en `position: absolute`, donc il cherche le plus
 * proche ancêtre positionné dans l'arbre APLATI : il traverse la frontière
 * shadow et tombe sur le `.shell` du Nav. Résultat : le panneau épouse
 * exactement la largeur du container, sans une seule mesure JavaScript. Mettre
 * `position: relative` ici casserait ça.
 */
:host {
  display: inline-flex;
  font-family: var(--lcl-font-display, "Cstm Neighbor", Impact, sans-serif);
}

.NyXENBPPCwyLiNVkEycE {
  display: inline-flex;
}

/* ───────────────────────────── Déclencheur ───────────────────────────── */
.JYn7k4XiNxAKJTbPy3F2 {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  /* Pill dimensionnée par son contenu, pas sur toute la hauteur de la barre :
     c'est ce qui permet au fond de survol de lire comme une pill. */
  padding: 9px 16px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  font: inherit;
  font-family: var(--lcl-font-display, "Cstm Neighbor", Impact, sans-serif);
  font-size: 16px;
  /* Cstm Neighbor n'a que 400/700/900 — le token évite d'inventer un 500. */
  font-weight: var(--lcl-entry-weight, 700);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--lcl-ink, #2a2240);
  text-decoration: none;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--lcl-dur-fast, 170ms) var(--lcl-ease, cubic-bezier(0.16, 1, 0.3, 1)),
    color var(--lcl-dur-fast, 170ms) var(--lcl-ease, cubic-bezier(0.16, 1, 0.3, 1));
}
/*
 * État de survol repris du premier jet : une pill pleine encre avec le texte en
 * jaune de marque. Le même traitement s'applique quand le menu est ouvert —
 * dans le premier jet c'était la classe `.active`, ici c'est `aria-expanded`,
 * qui porte déjà l'information et évite un état de plus.
 */
.JYn7k4XiNxAKJTbPy3F2:hover,
.JYn7k4XiNxAKJTbPy3F2[aria-expanded="true"] {
  background: var(--lcl-eggplant-900, #2a2240);
  color: var(--lcl-yellow-400, #e0fa00);
}
.JYn7k4XiNxAKJTbPy3F2:focus-visible {
  outline: 2px solid var(--lcl-ink, #2a2240);
  outline-offset: -2px;
  border-radius: 16px;
}

.BdGvRk8hs7vXjxBeEM9p {
  display: block;
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  transition: transform var(--lcl-dur, 420ms)
    var(--lcl-ease, cubic-bezier(0.16, 1, 0.3, 1));
}
.JYn7k4XiNxAKJTbPy3F2[aria-expanded="true"] .BdGvRk8hs7vXjxBeEM9p {
  transform: rotate(180deg);
}

/* ─────────────────────────────── Panneau ─────────────────────────────── */
.JTmJEuD_pFbkWyJUlHyY {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 5;
  margin-top: var(--lcl-panel-offset, 0px);
  box-sizing: border-box;
  /*
   * La hauteur passe par une custom property posée en style inline plutôt que
   * par une hauteur inline directe : la feuille garde ainsi la main, notamment
   * en mobile et sur le canvas.
   */
  height: var(--panel-h, 0px);
  overflow: hidden;
  /*
   * Les QUATRE angles au repos, et les deux du haut s'effacent à l'ouverture
   * (voir l'état ouvert). Le panneau fait donc le mouvement inverse de la barre,
   * au même rythme : à chaque image, le rayon bas de la barre vaut le rayon haut
   * du panneau et la jointure reste nette. Un panneau qui arriverait déjà carré
   * laisserait une encoche pendant toute la transition de la barre.
   */
  border-radius: var(--lcl-panel-radius, 0px);
  /* Fond opaque en dégradé, sans flou ni transparence : du contenu arbitraire
     derrière un panneau translucide devenait illisible. */
  background: var(--lcl-open-bg, linear-gradient(180deg, #fff 0%, #e7fbff 100%));
  /*
   * Ombre à zéro au repos, et TRANSITIONNÉE. À hauteur nulle, une ombre portée
   * reste peinte : elle laissait une bande claire sous la barre pendant toute la
   * fermeture, puis disparaissait d'un coup quand `visibility` basculait — c'est
   * ça, le flash de fermeture.
   */
  box-shadow: 0 0 0 0 transparent;
  visibility: hidden;
  pointer-events: none;
  /*
   * `visibility` bascule à la FIN de la fermeture (délai = durée) : sans ça le
   * contenu disparaîtrait d'un coup et le panneau se replierait vide. À
   * l'ouverture le délai est nul.
   */
  transition: height var(--lcl-dur, 420ms) var(--lcl-ease, cubic-bezier(0.16, 1, 0.3, 1)),
    box-shadow var(--lcl-dur, 420ms) var(--lcl-ease, cubic-bezier(0.16, 1, 0.3, 1)),
    border-top-left-radius var(--lcl-dur, 420ms) var(--lcl-ease, cubic-bezier(0.16, 1, 0.3, 1)),
    border-top-right-radius var(--lcl-dur, 420ms) var(--lcl-ease, cubic-bezier(0.16, 1, 0.3, 1)),
    visibility 0s linear var(--lcl-dur, 420ms);
}
.JTmJEuD_pFbkWyJUlHyY[data-open="true"] {
  visibility: visible;
  pointer-events: auto;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  box-shadow: 0 28px 56px -32px
    color-mix(in srgb, var(--lcl-eggplant-900, #2a2240) 55%, transparent);
  transition: height var(--lcl-dur, 420ms) var(--lcl-ease, cubic-bezier(0.16, 1, 0.3, 1)),
    box-shadow var(--lcl-dur, 420ms) var(--lcl-ease, cubic-bezier(0.16, 1, 0.3, 1)),
    border-top-left-radius var(--lcl-dur, 420ms) var(--lcl-ease, cubic-bezier(0.16, 1, 0.3, 1)),
    border-top-right-radius var(--lcl-dur, 420ms) var(--lcl-ease, cubic-bezier(0.16, 1, 0.3, 1)),
    visibility 0s;
}
/*
 * Image instantanée : sert à caler la hauteur de départ quand un panneau reprend
 * la place d'un autre, et à effacer celui qui cède la place sans animer (c'est
 * le panneau entrant qui porte le mouvement).
 */
.JTmJEuD_pFbkWyJUlHyY[data-instant="true"] {
  transition: none;
}
/* Sur le canvas Webflow : tout ouvert, tout visible, rien qui bouge. */
.JTmJEuD_pFbkWyJUlHyY[data-editor="true"] {
  height: auto;
  visibility: visible;
  pointer-events: auto;
  transition: none;
}

/*
 * ═══ LE WRAPPER DE WEBFLOW EST NEUTRALISÉ, PAS CONFIGURÉ ═══
 *
 * Fait constaté dans le DOM rendu, pas déduit : Webflow enveloppe tout le
 * contenu d'un slot dans un unique <div> (celui que l'inspecteur badge
 * « reveal »). Le <slot> n'a donc qu'un seul enfant assigné :
 *
 *   <div class=panelInner>
 *     <slot name="links">
 *       ↳ <div>              ← wrapper Webflow, UN seul
 *           <nav-colonne>
 *           <nav-colonne>
 *     </slot>
 *   </div>
 *
 * Une grille sur `.panelInner` ou sur le `<slot>` n'a donc qu'un item, et les
 * colonnes s'empilent en blocs à l'intérieur du wrapper.
 *
 * Plutôt que d'essayer de faire du wrapper une grille — ce qui laisserait la
 * définition de la grille sur un élément que Webflow possède —, on le rend
 * transparent à la mise en page. `display: contents` ne génère aucune boîte :
 * ses enfants remontent d'un niveau et deviennent les items de grille de
 * `.panelInner`, qui est un élément de NOTRE shadow root. Toute l'autorité de
 * mise en page revient chez nous, et il ne reste qu'une seule déclaration à
 * faire passer à l'extérieur.
 *
 * `!important` est nécessaire, pas cosmétique : le wrapper appartient à l'arbre
 * du document, et les règles de l'arbre externe l'emportent sur celles d'un
 * arbre interne — sauf pour les déclarations `!important`, où l'ordre
 * s'inverse.
 */
.KBONYyXULypJOhiFHfJ6 {
  display: block;
  /*
   * `align-items: start` (plus bas) et une hauteur de rangée AUTOMATIQUE : le
   * panneau s'étend pour contenir la plus haute des colonnes, il ne répartit
   * rien. C'est toute la différence avec un conteneur multi-colonnes, qui
   * prenait sa hauteur comme une contrainte d'entrée et coupait les blocs pour
   * les y faire entrer.
   */
  align-items: start;
  gap: 22px 28px;
  max-width: var(--lcl-max, 1240px);
  margin: 0 auto;
  padding: 26px var(--lcl-panel-pad-x, 24px) 30px;
  box-sizing: border-box;
  /*
   * Entrée du contenu en bloc.
   *
   * Le stagger par item n'est PAS réalisable : `::slotted()` ne cible que les
   * nœuds de premier niveau — donc le wrapper — et ne peut pas descendre dans
   * ses enfants. Les anciennes règles `nth-child` animaient un seul wrapper, et
   * se battaient en plus avec l'animation « reveal » que Webflow pose dessus.
   * On anime donc ce qu'on possède réellement.
   */
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--lcl-dur, 420ms) var(--lcl-ease, cubic-bezier(0.16, 1, 0.3, 1)),
    transform var(--lcl-dur, 420ms) var(--lcl-ease, cubic-bezier(0.16, 1, 0.3, 1));
}
.JTmJEuD_pFbkWyJUlHyY[data-open="true"] .KBONYyXULypJOhiFHfJ6 {
  opacity: 1;
  transform: none;
}
.JTmJEuD_pFbkWyJUlHyY[data-editor="true"] .KBONYyXULypJOhiFHfJ6 {
  opacity: 1;
  transform: none;
  transition: none;
}

/*
 * ═══ LE WRAPPER DE WEBFLOW EST STYLÉ, PAS NEUTRALISÉ ═══
 *
 * C'est l'inverse de la règle générale (§ 6.4), et c'est un constat, pas une
 * préférence : dans ce panneau, `display: contents` sur le wrapper n'a jamais
 * produit l'effet attendu — les déclarations posées sur `.panelInner`
 * n'atteignaient pas les colonnes. Le styler directement fonctionne, lui : le
 * wrapper est le seul nœud que `::slotted()` peut viser, et il devient donc la
 * boîte qui met en page.
 *
 * `grid-auto-flow: column` SANS `grid-template-columns` : le nombre de colonnes
 * suit le nombre de composants déposés. Un `repeat(N, …)` en créait un nombre
 * FIXE — trois colonnes déposées dans une grille de quatre laissaient une
 * cellule vide, et les colonnes étaient trop étroites.
 *
 * Le wrapper appartient à l'arbre du document, d'où les `!important` (§ 6.5).
 */
.KBONYyXULypJOhiFHfJ6 > slot {
  display: contents;
}

.KBONYyXULypJOhiFHfJ6 > slot::slotted(*) {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: minmax(0, 1fr) !important;
  align-items: start !important;
  gap: var(--lcl-panel-col-gap, 28px) !important;
}

/* Le harnais Vite n'a ni shadow root ni `<slot>` : la règle ci-dessus y est
   inerte. Sans ce doublon, la mise en page n'y serait pas testable. */
.KBONYyXULypJOhiFHfJ6:not(:has(> slot)) {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  align-items: start;
  gap: var(--lcl-panel-col-gap, 28px);
}

/*
 * ═══ DISPOSITION « BLOCS QUI COULENT » ═══
 *
 * En grille, chaque bloc déposé occupe sa propre cellule : trois blocs courts et
 * un long laissent trois trous. Ici le panneau devient un conteneur
 * MULTI-COLONNES : le contenu coule, remplit une colonne de haut en bas, puis
 * passe à la suivante. C'est la seule mise en page qui donne ce comportement
 * sans que le panneau ait à connaître ses blocs — or il ne peut pas les
 * connaître, une valeur de slot est opaque (§ 6.4).
 *
 * Une chose ne peut PAS se régler d'ici, et c'est structurel : la LARGEUR d'un
 * bloc. `::slotted()` n'atteint que le wrapper de Webflow, jamais les blocs qui
 * en sont les enfants (§ 6.5). Elle est donc calculée ici et transmise par un
 * token hérité — seul canal qui traverse la frontière shadow (§ 5) — que le bloc
 * applique à son propre `flex-basis`.
 */
@media (max-width: 1199px) {
  .KBONYyXULypJOhiFHfJ6 {
    --lcl-panel-col-gap: 22px;
  }
}

/* ─────────────────────────────── Mobile ─────────────────────────────── */
@media (max-width: 1023px) {
  /*
   * L'entrée s'empile dans la feuille du shell. Une media query fonctionne dans
   * un shadow root — elle interroge le viewport —, donc l'entrée s'adapte seule,
   * sans rien apprendre de son parent.
   */
  /*
   * L'entrée est un ONGLET : une pilule qui ne s'étire pas et ne se coupe pas.
   * `flex: 0 0 auto` est ce qui l'empêche d'être compressée par la piste.
   */
  :host,
  .NyXENBPPCwyLiNVkEycE {
    position: static;
    display: inline-flex;
    width: auto;
    flex: 0 0 auto;
  }
  .JYn7k4XiNxAKJTbPy3F2 {
    width: auto;
    height: 38px;
    justify-content: center;
    padding: 0 16px;
    border-radius: 999px;
    border-bottom: 0;
    white-space: nowrap;
  }
  /* L'onglet actif porte un fond plein : c'est le seul signal d'état d'une
     piste défilante, où la position ne dit rien. */
  .JYn7k4XiNxAKJTbPy3F2[aria-expanded="true"] {
    background: var(--lcl-white, #fff);
    color: var(--lcl-ink, #2a2240);
  }
  /* Le chevron n'a plus de sens : un onglet ne se déplie pas vers le bas, il
     remplace le contenu affiché dessous. */
  .BdGvRk8hs7vXjxBeEM9p {
    display: none;
  }
  /*
   * Le panneau repasse dans le flux MAIS garde la mécanique de hauteur : c'est
   * ce qui donne un accordéon animé au lieu d'une apparition sèche. Pas de
   * `display: none` — il empêcherait toute transition.
   */
  /*
   * ⚠️ LE PANNEAU RESTE DANS LE FLUX. Ne pas le repasser en `position: fixed`.
   *
   * Il l'a été, pour le poser sous la piste d'onglets sur toute la largeur, et
   * c'était faux : la barre porte un `backdrop-filter`, et un `backdrop-filter`
   * **crée un bloc conteneur pour tout descendant en `position: fixed`**. Le
   * panneau n'était donc pas placé par rapport à l'écran mais par rapport à la
   * barre — d'où un dégradé qui apparaissait n'importe où. Même cause pour le
   * CTA d'appoint, qui se retrouvait collé en haut (§ 3.1).
   *
   * Dans le flux, il s'ouvre simplement sous la piste, à l'intérieur de la
   * feuille qui défile — et il garde sa mécanique de hauteur, donc l'accordéon
   * reste animé.
   */
  /*
   * ═══ `fixed`, ET LES GOUTTIÈRES SONT ÉCRITES ═══
   *
   * `absolute` a été essayé et échoue des deux côtés : calé sur l'entrée, le
   * panneau s'ouvre À DROITE de son onglet — `.root` est une boîte en ligne ;
   * calé sur la feuille, il est clippé par l'`overflow` de celle-ci. `fixed` est
   * la seule position qui le sorte à la fois du défilement horizontal de la
   * piste et du clipping de la feuille. Elle n'est praticable que parce que le
   * `backdrop-filter` de la barre est retiré en écran étroit (§ 3.1).
   *
   * Un `fixed` se plaçant par rapport à l'écran, les gouttières ne sont plus
   * héritées de personne : elles s'écrivent, avec la même valeur que celles de
   * la barre.
   */
  .JTmJEuD_pFbkWyJUlHyY {
    position: fixed;
    top: var(--panel-top, 0px);
    left: var(--lcl-bar-gutter, 20px);
    right: var(--lcl-bar-gutter, 20px);
    margin-top: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  /*
   * Ouvert, le panneau DÉFILE. `overflow-y` ne peut pas être posé à l'état
   * fermé : c'est `overflow: hidden` qui rend l'animation de hauteur possible.
   * La hauteur maximale réserve la place de la barre du bas, sans quoi les
   * derniers liens passent dessous.
   */
  .JTmJEuD_pFbkWyJUlHyY[data-open="true"] {
    max-height: calc(100dvh - var(--panel-top, 0px) - var(--lcl-bottom-bar-h, 86px));
    overflow-y: auto;
    overscroll-behavior: contain;
    /* La gouttière de défilement est RÉSERVÉE en permanence : sans elle,
       l'apparition de la barre de défilement rétrécit le contenu d'un coup, ce
       qui se lit comme un second saut. */
    scrollbar-gutter: stable;
    box-shadow: none;
  }

  /*
   * ⚠️ Tant que le décalage n'est pas mesuré, le panneau n'est pas peint. Il
   * apparaissait sinon trop bas et trop court le temps d'un rendu — avec une
   * barre de défilement et un contenu rétréci — avant de sauter à sa place.
   */
  .JTmJEuD_pFbkWyJUlHyY[data-open="true"][data-placed="false"] {
    visibility: hidden;
  }
  .KBONYyXULypJOhiFHfJ6 {
    max-width: none;
    padding: 10px var(--lcl-pad, 24px) 20px;
  }

  /* Les colonnes s'empilent : une par rangée, dans l'ordre de dépôt. */
  .KBONYyXULypJOhiFHfJ6 > slot::slotted(*) {
    grid-auto-flow: row !important;
    gap: 0 !important;
  }

  .KBONYyXULypJOhiFHfJ6:not(:has(> slot)) {
    grid-auto-flow: row;
    gap: 0;
  }
  /* Une seule colonne : les blocs s'enchaînent verticalement, comme le reste de
     l'accordéon. */
}

@media (prefers-reduced-motion: reduce) {
  .JYn7k4XiNxAKJTbPy3F2,
  .BdGvRk8hs7vXjxBeEM9p,
  .JTmJEuD_pFbkWyJUlHyY {
    transition: none;
  }
  .KBONYyXULypJOhiFHfJ6 {
    opacity: 1;
    transform: none;
    transition: none;
  }
}