/* =========================================================================
 * LBYLCL Nav — Lien : styles du shadow root de la feuille.
 *
 * Ce composant est déposé soit dans le slot des liens d'une
 * « LBYLCL Nav — Entrée », soit dans celui d'une « LBYLCL Nav — Colonne ». Il
 * doit être correct dans les deux cas sans jamais savoir dans lequel il est.
 *
 * Il ne DÉCLARE aucun token : les custom properties sont le seul canal de style
 * qui traverse la frontière shadow vers du contenu slotté, donc les valeurs
 * viennent du :host du Nav par héritage à travers l'arbre aplati. Chaque var()
 * porte un repli littéral pour rester lisible hors de ce contexte.
 *
 * Typographie de corps (Inter) ici, pas d'affichage : « Cstm Neighbor » est
 * réservée aux libellés d'entrée, aux titres de colonne et aux CTA.
 * ========================================================================= */

:host {
  /*
   * `inline-flex` et non `block`, et ça règle les TROIS contextes d'un coup —
   * sans que le parent ait à savoir ce qu'il contient, ce qu'il ne peut pas :
   *
   *  · panneau d'entrée (grille) : un item de grille est blockifié et s'étire,
   *    et `grid-column: 1 / -1` lui fait prendre toute la ligne — les liens nus
   *    s'empilent, les colonnes gardent leur cellule ;
   *  · colonne de footer (flex column) : l'item s'étire en largeur, le lien
   *    remplit la colonne ;
   *  · bandeau légal (flux de bloc derrière le wrapper Webflow) : une boîte de
   *    niveau inline s'enchaîne HORIZONTALEMENT. C'est exactement ce qui fait
   *    que les entrées de la barre s'alignent, et la seule chose qui marche à
   *    travers un wrapper qu'on ne maîtrise pas.
   *
   * Ni opacity ni transform ici : l'entrée fait apparaître son panneau EN BLOC,
   * sur son propre `.panelInner`, et pour les déclarations normales l'arbre
   * extérieur bat :host — ce qu'on mettrait ici serait écrasé sans erreur.
   */
  display: inline-flex;
  grid-column: 1 / -1;
  min-width: 0;
}

.oRHvKoYMo89fVqf6yM40 {
  display: block;
  /*
   * `auto`, et SURTOUT pas `100%`.
   *
   * C'est la ligne qui a cassé le bandeau légal trois fois de suite. Avec
   * `width: 100%`, dès que l'hôte n'est pas dimensionné par son contenu — un
   * wrapper de Webflow autour du contenu slotté, ou un `:host` battu par le CSS
   * de la page —, chaque lien prend toute la largeur : un par ligne, et
   * `text-align: center` ne fait alors que centrer le texte DANS chaque bloc.
   *
   * En `auto`, le lien remplit son hôte quand celui-ci est étiré par son
   * conteneur (item de grille dans un panneau, item d'une colonne flex) et se
   * réduit à son contenu quand l'hôte est de niveau inline (bandeau légal). Le
   * même mot juste pour les trois contextes — et c'est le CONTENEUR qui décide,
   * jamais nous.
   */
  width: auto;
  box-sizing: border-box;
  background-color: transparent;
  text-decoration: none;
  transition:
    color var(--lcl-dur-fast, 170ms) var(--lcl-ease, cubic-bezier(0.16, 1, 0.3, 1)),
    background-color var(--lcl-dur-fast, 170ms) var(--lcl-ease, cubic-bezier(0.16, 1, 0.3, 1)),
    transform var(--lcl-dur-fast, 170ms) var(--lcl-ease, cubic-bezier(0.16, 1, 0.3, 1));
}

.oRHvKoYMo89fVqf6yM40 *,
.oRHvKoYMo89fVqf6yM40 *::before,
.oRHvKoYMo89fVqf6yM40 *::after {
  box-sizing: border-box;
}

.u9Pv8i3LePrjPbFvmp2f {
  display: block;
  font-family: var(--lcl-font-body, Inter, sans-serif);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--lcl-ink, #2a2240);
  transition: color var(--lcl-dur-fast, 170ms) var(--lcl-ease, cubic-bezier(0.16, 1, 0.3, 1));
}

.aUX7yyOXRS3mYqqP5Rgo {
  display: block;
  margin-top: 2px;
  font-family: var(--lcl-font-body, Inter, sans-serif);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--lcl-ink-soft, rgba(42, 34, 64, 0.62));
}

/* ─────────────── Variante « Menu déroulant » : la plus dense ───────────────
 * Survol volontairement pauvre : le panneau est déjà un fond teinté, donc ni
 * bordure ni ombre — un voile d'aubergine, le libellé qui s'éclaircit, 2px de
 * décalage. La première déclaration de fond sert de repli aux moteurs sans
 * color-mix().
 */
.oRHvKoYMo89fVqf6yM40[data-variant="menu"] {
  padding: var(--lcl-link-pad-y, 4px) var(--lcl-link-pad-x, 0px);
  border-radius: 8px;
}
/*
 * Survol SOBRE : l'encre seule bouge.
 *
 * Le voile d'aubergine et le décalage de 2px se lisaient comme une pilule
 * qu'on pousse, dans un panneau qui est déjà un aplat teinté — deux effets pour
 * une seule intention. Un changement de couleur suffit à dire « celui-ci », et
 * ne fait pas bouger la liste sous le curseur.
 */
/*
 * ═══ LA FLÈCHE DE LIEN ═══
 *
 * Elle n'apparaît qu'au survol et au focus clavier, et elle n'occupe AUCUNE
 * place au repos : `max-width: 0` plutôt que `display: none`, sans quoi son
 * apparition pousserait le texte d'un coup. Elle s'ouvre donc en même temps
 * qu'elle se révèle, et la ligne ne saute pas.
 */
.iQ_Y1vRgno_Mw6X3iNTs {
  display: inline-flex;
  vertical-align: middle;
  overflow: hidden;
  max-width: 0;
  margin-left: 0;
  opacity: 0;
  transform: translateX(-4px);
  color: currentColor;
  transition:
    max-width var(--lcl-dur-fast, 170ms) var(--lcl-link-ease, cubic-bezier(0.33, 0, 0.2, 1)),
    margin-left var(--lcl-dur-fast, 170ms) var(--lcl-link-ease, cubic-bezier(0.33, 0, 0.2, 1)),
    opacity var(--lcl-dur-fast, 170ms) var(--lcl-link-ease, cubic-bezier(0.33, 0, 0.2, 1)),
    transform var(--lcl-dur-fast, 170ms) var(--lcl-link-ease, cubic-bezier(0.33, 0, 0.2, 1));
}

/* Le footer a ses propres codes — soulignement au survol — et pas de flèche. */
.oRHvKoYMo89fVqf6yM40[data-variant="footer"] .iQ_Y1vRgno_Mw6X3iNTs {
  display: none;
}

/*
 * Survol : trois choses ensemble, parce qu'une seule ne se voyait pas. Le lien
 * avance, son encre s'éclaircit, la flèche s'ouvre. Toujours sans fond : le
 * panneau est déjà un aplat teinté, une pilule y ferait double emploi.
 */
.oRHvKoYMo89fVqf6yM40[data-variant="menu"]:hover,
.oRHvKoYMo89fVqf6yM40[data-variant="menu"]:focus-visible {
  background-color: transparent;
  transform: translateX(3px);
}

.oRHvKoYMo89fVqf6yM40[data-variant="menu"]:hover .u9Pv8i3LePrjPbFvmp2f,
.oRHvKoYMo89fVqf6yM40[data-variant="menu"]:focus-visible .u9Pv8i3LePrjPbFvmp2f {
  color: var(--lcl-eggplant-600, #4f4177);
}

.oRHvKoYMo89fVqf6yM40[data-variant="menu"]:hover .iQ_Y1vRgno_Mw6X3iNTs,
.oRHvKoYMo89fVqf6yM40[data-variant="menu"]:focus-visible .iQ_Y1vRgno_Mw6X3iNTs {
  max-width: 22px;
  margin-left: 6px;
  opacity: 1;
  transform: translateX(0);
}

/* ─────────── Variante « Footer » : fine, soulignée au survol ───────────
 * Aucun fond, aucun rayon, aucun décalage : sur un aplat de couleur pleine, un
 * voile teinté se voit mal et un rectangle arrondi alourdit une liste de dix
 * liens. Le soulignement suffit et c'est ce que demande la maquette.
 */
/*
 * `5px 0` : avec le `gap: 6px` de la colonne, l'écart entre deux liens fait
 * 16px — le rythme de la maquette. Aucun padding horizontal, pour que le lien
 * s'aligne exactement sur le titre de sa colonne. L'espacement du bandeau légal
 * n'est PAS le problème de cette variante : il a la sienne.
 */
.oRHvKoYMo89fVqf6yM40[data-variant="footer"] {
  padding: 5px 0;
}
.oRHvKoYMo89fVqf6yM40[data-variant="footer"] .u9Pv8i3LePrjPbFvmp2f {
  font-size: 14px;
}

.oRHvKoYMo89fVqf6yM40[data-variant="footer"]:hover .u9Pv8i3LePrjPbFvmp2f {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Mobile : cible tactile plus généreuse. La largeur, elle, ne change pas — elle
   reste celle que dicte le conteneur, cf. `width: auto` sur `.link`. */
@media (max-width: 639px) {
  /* Les tokens et non des valeurs en dur : le titre de bloc lit les mêmes, et
     les deux doivent bouger ensemble. */
  .oRHvKoYMo89fVqf6yM40[data-variant="menu"] {
    padding: var(--lcl-link-pad-y-sm, 8px) var(--lcl-link-pad-x-sm, 0px);
  }
  .oRHvKoYMo89fVqf6yM40[data-variant="footer"] {
    padding: 7px 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .oRHvKoYMo89fVqf6yM40,
  .u9Pv8i3LePrjPbFvmp2f,
  .iQ_Y1vRgno_Mw6X3iNTs {
    transition: none;
  }
  /* Les décalages disparaissent aussi, pas seulement leurs transitions. La
     flèche, elle, reste affichée au survol : c'est une information, pas un
     mouvement. */
  .oRHvKoYMo89fVqf6yM40[data-variant="menu"]:hover,
  .oRHvKoYMo89fVqf6yM40[data-variant="menu"]:focus-visible {
    transform: none;
  }
  .oRHvKoYMo89fVqf6yM40[data-variant="menu"]:hover .iQ_Y1vRgno_Mw6X3iNTs,
  .oRHvKoYMo89fVqf6yM40[data-variant="menu"]:focus-visible .iQ_Y1vRgno_Mw6X3iNTs {
    transform: none;
  }
}