/* =========================================================================
 * LBYLCL Nav — Bloc : styles du shadow root.
 *
 * Aucun token n'est DÉCLARÉ ici. Tous viennent du :host du Nav et sont hérités
 * à travers l'arbre aplati ; chaque var() porte un repli pour que la colonne
 * reste lisible si elle est déposée hors d'un Nav.
 *
 * « Cstm Neighbor » n'existe qu'en 400 / 700 / 900. Le titre est en 900, jamais
 * en 500 ni en 600 — ces graisses n'existent pas et seraient synthétisées.
 * ========================================================================= */

/*
 * Aucune propriété flex ici, et surtout aucune largeur.
 *
 * Aucune largeur ici : c'est la COLONNE qui contient le bloc, et le panneau qui
 * dimensionne la colonne. Les règles de l'arbre externe battent `:host` pour
 * toute déclaration normale (§ 6.5), donc le dimensionnement ne peut pas vivre
 * du côté de l'enfant. L'écart entre deux blocs appartient à la colonne, pas au
 * bloc : un bloc déposé ailleurs ne doit pas traîner une marge orpheline.
 */
:host {
  display: block;
  min-width: 0;
  font-family: var(--lcl-font-body, Inter, sans-serif);
}

/*
 * ═══ L'ÉCART SOUS LE BLOC VIT ICI, ET NULLE PART AILLEURS ═══
 *
 * `.root` est un élément de NOTRE shadow root. Ni le CSS de la page, ni le
 * wrapper que Webflow interpose autour du contenu d'un slot, ni la cascade de
 * l'arbre externe ne peuvent l'atteindre. C'est le seul endroit où une valeur
 * est certaine d'arriver jusqu'au navigateur.
 *
 * Tout le reste a été essayé et n'a RIEN produit de visible : un `gap` sur le
 * conteneur parent (le wrapper s'interpose, et les blocs sont SES enfants), une
 * marge sur notre `:host` (battue par l'arbre externe, § 6.5), le même `gap`
 * posé sur le wrapper lui-même via `::slotted()`. **Ne pas y revenir.**
 *
 * Un PADDING et non une marge : deux marges verticales adjacentes fusionnent, et
 * celle-ci se ferait absorber par la première venue. Un padding ne fusionne avec
 * rien.
 *
 * Conséquence assumée : le dernier bloc d'une colonne porte lui aussi cet écart.
 * Le retirer demanderait `:last-child`, qui désigne notre position parmi nos
 * frères — or un composant slotté ne connaît pas ses frères (§ 6.4).
 */
.QqL9o9RWC3Rl6lh01i0P {
  display: block;
  min-width: 0;
  padding-bottom: var(--lcl-block-gap, 32px);
}

/*
 * Le retrait horizontal est celui d'un lien de menu, et c'est tout l'intérêt :
 * un lien porte un padding qui lui sert de surface de survol, donc son TEXTE est
 * décalé vers l'intérieur. Sans le même décalage sur le titre, les liens
 * paraissent indentés sous lui. Le token vient du `:host` du Nav, seul endroit
 * où les deux composants peuvent s'accorder (§ 5).
 */
.hKuYUT3W8Mhb1M4A8O9g {
  display: flex;
  align-items: center;
  gap: 8px;
  /* `line-height: 1` sur la RANGÉE et pas seulement sur le titre : sans lui la
     boîte du header est plus haute que le glyphe, et cette demi-interligne
     s'ajoutait à la marge — d'où un écart titre/liens deux fois trop grand. */
  line-height: 1;
  margin-bottom: var(--lcl-block-title-gap, 11px);
  padding-inline: var(--lcl-link-pad-x, 0px);
  color: var(--lcl-ink, #2a2240);
}

/*
 * Wrapper de l'icône. On ne sait pas si le slot est rempli — sa valeur est
 * toujours un <slot> truthy — donc le wrapper est toujours rendu et se contente
 * de tomber à zéro de large quand rien n'y est distribué (un <slot> sans
 * contenu attribué ne produit aucune boîte). Reste alors le gap de 8px du
 * header, soit un titre décalé de 8px : sans conséquence fonctionnelle, et non
 * détectable en CSS d'ici (`:empty` ne voit que le <slot>, toujours présent, et
 * `::slotted()` ne matche que ce qui existe déjà).
 */
.C0Pw64uccOzoG7EoyuHw {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  line-height: 0;
  color: inherit;
}

/*
 * Dimensionnement de l'icône slottée, et sa conséquence, assumée : une règle
 * ::slotted() écrite depuis CE shadow root BAT les règles :host du composant
 * icône lui-même — pour les déclarations normales, l'arbre extérieur gagne sur
 * :host, quelle que soit la spécificité. C'est donc la colonne qui dicte la
 * taille de l'icône, et le seul levier pour la changer est le token
 * --lcl-icon-size (posé sur la colonne, ou plus haut par héritage).
 *
 * La couleur, elle, n'a pas besoin de règle : un SVG dessiné en
 * fill/stroke="currentColor" hérite du color de .header, parce que l'héritage
 * suit l'arbre aplati et non l'arbre du document.
 */
.C0Pw64uccOzoG7EoyuHw slot::slotted(*) {
  width: var(--lcl-icon-size, 18px);
  height: var(--lcl-icon-size, 18px);
  flex: 0 0 auto;
}

/*
 * Le designer tape « Banque » ; la CSS capitalise. On ne demande jamais une
 * saisie en majuscules dans le panneau de droite.
 */
.yeW6bMfqTRH08wfGGuZa {
  font-family: var(--lcl-font-display, "Cstm Neighbor", Impact, sans-serif);
  font-weight: 900;
  font-size: var(--lcl-block-title-size, 15px);
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
  color: inherit;
}

/*
 * ═══ LE REPLI EST NATIF ═══
 *
 * `<details>` / `<summary>` : aucun JavaScript n'est nécessaire pour ouvrir et
 * fermer, donc le déclencheur fonctionne même si ce composant n'est jamais
 * hydraté. C'est le correctif d'un défaut constaté — une détection de largeur
 * qui ne s'exécutait pas laissait le bloc sans déclencheur visible.
 *
 * Le marqueur par défaut du navigateur est retiré des deux façons possibles :
 * `list-style` pour les moteurs modernes, le pseudo-élément WebKit pour les
 * autres. Aucune des deux n'est suffisante seule.
 */
.hKuYUT3W8Mhb1M4A8O9g {
  list-style: none;
  cursor: default;
}

.hKuYUT3W8Mhb1M4A8O9g::-webkit-details-marker {
  display: none;
}

.hKuYUT3W8Mhb1M4A8O9g::marker {
  content: "";
}

/*
 * Au-dessus de 1024px, l'en-tête redevient un titre : le chevron disparaît et
 * `pointer-events: none` empêche de replier un bloc dans un méga-menu, où ça
 * n'a pas de sens. Le `<summary>` reste focusable au clavier — c'est le prix du
 * repli natif, et il est plus faible que le prix constaté d'un déclencheur qui
 * n'apparaît pas du tout.
 */
.dyUWaqXksFXf4K2nnafb {
  display: none;
}

.zYO0bTZNv7ORyvsDIOrO {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/*
 * ≤ 1023px : la grappe du Nav quitte la barre et devient une feuille empilée
 * (même point de rupture que Nav.module.css). Le panneau de l'entrée y passe à
 * une seule colonne de grille, donc la colonne prend toute la ligne sans que
 * rien n'ait à être déclaré ici : il ne reste qu'à resserrer l'en-tête. Une
 * media query fonctionne dans un shadow root — elle interroge le viewport —
 * donc la colonne s'adapte seule, sans rien apprendre de son parent.
 */
@media (max-width: 1023px) {
  /* À cette largeur c'est une liste de rangées dépliables, pas un titre de
     colonne : la rangée gagne une cible tactile, un filet et son chevron. */
  .hKuYUT3W8Mhb1M4A8O9g {
    min-height: 44px;
    margin-bottom: 0;
    padding: 4px var(--lcl-link-pad-x, 0px);
    border-bottom: 1px solid var(--lcl-hairline, rgb(42 34 64 / 12%));
    cursor: pointer;
  }

  .dyUWaqXksFXf4K2nnafb {
    display: inline-flex;
    margin-left: auto;
    flex: 0 0 auto;
    color: inherit;
  }

  .QqL9o9RWC3Rl6lh01i0P[open] > .hKuYUT3W8Mhb1M4A8O9g .dyUWaqXksFXf4K2nnafb {
    transform: rotate(180deg);
  }

  .zYO0bTZNv7ORyvsDIOrO {
    padding: 8px 0 12px;
  }

  /* En accordéon, le filet sous chaque titre fait la séparation : l'écart
     n'aurait plus de rôle et ne ferait que creuser la liste. */
  .QqL9o9RWC3Rl6lh01i0P {
    padding-bottom: 0;
  }
}