/* =========================================================================
 * 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, 48px);
}

/*
 * 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);
  /*
   * Encre ATTÉNUÉE. Le titre de bloc est une étiquette de repérage, pas un
   * contenu : c'est la liste de liens qui se lit. Les mettre à la même encre
   * met les deux au même niveau et fait disparaître la hiérarchie.
   * `--lcl-ink-soft` est redéfini par le Footer selon sa variante, donc ce bloc
   * suivrait les deux contextes sans rien câbler (§ 5).
   */
  color: var(--lcl-ink-soft, rgba(42, 34, 64, 0.62));
}

/*
 * 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, 13px);
  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;
  }
}

/* ═══════════════════════════ Variante « Carte » ═══════════════════════════
 *
 * Un pavé qui se lit d'un coup d'œil : titre, accroche, et l'icône posée en bas
 * à droite. Elle ne se replie pas — d'où une racine distincte du `<details>` de
 * la variante « Liste », et non un jeu de surcharges sur la même.
 *
 * Aucun token n'est déclaré ici non plus : tout est relu avec un repli (§ 5).
 */
.uyo1RvAa4f7dejz8rF9R {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--lcl-card-gap, 8px);
  min-height: var(--lcl-card-min-h, 150px);
  padding: var(--lcl-card-pad, 20px);
  border-radius: var(--lcl-card-radius, 18px);
  /*
   * Un blanc TRANSLUCIDE et non un blanc plein : le panneau est un dégradé, et
   * un aplat opaque y ferait une tache qui ne suit pas le fond. La déclaration
   * `rgba()` précède le `color-mix()` et sert de repli aux moteurs qui ne le
   * connaissent pas (§ 5).
   */
  background-color: rgba(255, 255, 255, 0.55);
  background-color: color-mix(in srgb, var(--lcl-white, #fff) 55%, transparent);
  color: var(--lcl-ink, #2a2240);
  text-decoration: none;
  transition:
    background-color var(--lcl-dur-fast, 170ms) var(--lcl-ease, ease),
    transform var(--lcl-dur-fast, 170ms) var(--lcl-ease, ease);
}

/* Le survol n'anime QUE la carte cliquable : animer un pavé inerte promet une
   interaction qui n'existe pas. */
.uyo1RvAa4f7dejz8rF9R[data-clickable="true"]:hover {
  background-color: rgba(255, 255, 255, 0.78);
  background-color: color-mix(in srgb, var(--lcl-white, #fff) 78%, transparent);
  transform: translateY(-2px);
}

.uyo1RvAa4f7dejz8rF9R[data-clickable="true"]:focus-visible {
  outline: 3px solid var(--lcl-ink, #2a2240);
  outline-offset: 3px;
}

/*
 * Le titre de carte ne reprend PAS celui de la variante « Liste » : là c'est une
 * étiquette de repérage, en capitales et atténuée ; ici c'est le sujet du pavé,
 * donc en casse normale, en encre pleine et plus grand. Le même style pour les
 * deux effacerait la différence de rôle.
 */
.T0d6hImRkkMpw33EaxqX {
  font-family: var(--lcl-font-display, "Cstm Neighbor", Impact, sans-serif);
  font-weight: 700;
  font-size: var(--lcl-card-title-size, 20px);
  line-height: 1.2;
  color: var(--lcl-ink, #2a2240);
}

.MR9S9znwt7LjWoPIBe4C {
  font-family: var(--lcl-font-body, Inter, sans-serif);
  font-size: var(--lcl-card-text-size, 14px);
  line-height: 1.45;
  color: var(--lcl-ink-soft, rgba(42, 34, 64, 0.62));
}

/*
 * L'accroche est un `props.RichText` : son contenu arrive SLOTTÉ, donc
 * `.cardText p` ne matche RIEN — les paragraphes ne sont pas nos descendants
 * dans l'arbre DOM (§ 6.3). Deux canaux seulement, et les deux sont ici : les
 * propriétés héritées posées sur ce conteneur, et une grille sur le nœud de
 * premier niveau pour l'espacement, qu'aucune marge ne peut se faire aspirer
 * par le « Line Height Trim » du site (§ 6.6).
 */
.MR9S9znwt7LjWoPIBe4C > slot::slotted(*) {
  display: grid !important;
  row-gap: 6px !important;
  margin: 0 !important;
}

/*
 * `margin-top: auto` pousse l'icône au bas de la carte quel que soit le volume
 * de texte, et `align-self: flex-end` la cale à droite. C'est ce couple qui tient
 * la composition de la maquette sans hauteur fixe.
 */
.zAPbxfZUqH5kx94Bd87I {
  margin-top: auto;
  align-self: flex-end;
  display: inline-flex;
  line-height: 0;
  color: inherit;
}

/* La carte impose la taille du SVG déposé, ce qui bat aussi ses attributs
   `width` / `height` (§ 6.5). Seul levier : le token. */
.zAPbxfZUqH5kx94Bd87I slot::slotted(*) {
  width: var(--lcl-card-icon-size, 34px);
  height: var(--lcl-card-icon-size, 34px);
}

@media (max-width: 1023px) {
  .uyo1RvAa4f7dejz8rF9R {
    min-height: var(--lcl-card-min-h-sm, 0px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .uyo1RvAa4f7dejz8rF9R {
    transition: none;
  }
  .uyo1RvAa4f7dejz8rF9R[data-clickable="true"]:hover {
    transform: none;
  }
}