/* =========================================================================
 * LBYLCL Nav — Carte : styles du shadow root.
 *
 * Aucun token n'est DÉCLARÉ ici : tous sont relus avec un repli littéral (§ 5).
 * Ils viennent du `:host` du Nav et traversent la frontière shadow par héritage,
 * seul canal qui le permette.
 * ========================================================================= */

/*
 * Aucune largeur ni `flex-basis` : c'est la colonne qui place la carte, et les
 * règles de l'arbre externe battent `:host` (§ 6.5). Comme un bloc, elle porte
 * son propre écart bas — c'est le seul endroit qu'aucun wrapper de slot ne
 * s'interpose pour atteindre (§ 3.3 bis).
 */
:host {
  display: block;
  min-width: 0;
  font-family: var(--lcl-font-body, Inter, sans-serif);
}

/*
 * ═══ UNE COLONNE, ET LA FLÈCHE POUSSÉE EN BAS ═══
 *
 * `margin-top: auto` sur la flèche demande que la carte ait une hauteur à
 * distribuer : `height: 100%` la lui donne quand la colonne l'étire, sans
 * imposer de minimum quand elle est seule.
 */
.YX6eq5ktYyrCcXJoB__T {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--lcl-card-gap, 10px);
  height: 100%;
  min-height: var(--lcl-card-min-h, 150px);
  padding: var(--lcl-card-pad, 20px);
  margin-bottom: var(--lcl-block-gap, 32px);
  border-radius: var(--lcl-card-radius, 18px);
  /*
   * Blanc TRANSLUCIDE et non plein : le panneau est un dégradé, 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;
  /*
   * Une courbe qui accélère puis décélère, et non l'expo-out du système : sur un
   * survol de quelques pixels, une expo-out consomme tout le mouvement dans les
   * premières images et se lit comme un à-coup.
   */
  transition:
    background-color var(--lcl-card-dur, 260ms) var(--lcl-card-ease, cubic-bezier(0.33, 0, 0.2, 1)),
    transform var(--lcl-card-dur, 260ms) var(--lcl-card-ease, cubic-bezier(0.33, 0, 0.2, 1)),
    box-shadow var(--lcl-card-dur, 260ms) var(--lcl-card-ease, cubic-bezier(0.33, 0, 0.2, 1));
}

/* Le survol n'anime QUE la carte cliquable : animer un pavé inerte promet une
   interaction qui n'existe pas. */
.YX6eq5ktYyrCcXJoB__T[data-clickable="true"]:hover {
  background-color: rgba(255, 255, 255, 0.82);
  background-color: color-mix(in srgb, var(--lcl-white, #fff) 82%, transparent);
  transform: translateY(-3px);
  box-shadow: 0 14px 28px -18px
    color-mix(in srgb, var(--lcl-eggplant-900, #2a2240) 55%, transparent);
}

.YX6eq5ktYyrCcXJoB__T[data-clickable="true"]:active {
  transform: translateY(-1px);
}

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

/*
 * L'icône est EN TÊTE, à la même place que sur un bloc de liste : les deux
 * objets se déposent côte à côte dans un panneau, et une icône qui change de
 * coin d'un composant à l'autre casse la lecture de la colonne.
 */
.ZjmGRgPtBNVeYPWMUOuA {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  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. */
.ZjmGRgPtBNVeYPWMUOuA slot::slotted(*) {
  width: var(--lcl-card-icon-size, 26px);
  height: var(--lcl-card-icon-size, 26px);
}

/*
 * Capitales et graisse 900 — la plus lourde de « Cstm Neighbor », qui n'existe
 * qu'en 400 / 700 / 900 (§ 4). Jamais de 500 ni de 600 : ils seraient
 * synthétisés sans erreur et le rendu partirait en biais.
 */
.V2w4Vr0cuObG5tZVnJjj {
  font-family: var(--lcl-font-display, "Cstm Neighbor", Impact, sans-serif);
  font-weight: 900;
  font-size: var(--lcl-card-title-size, 17px);
  letter-spacing: 0.03em;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--lcl-ink, #2a2240);
}

.zMhoCPeL_dxF9FuecsBj {
  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
 * `.description 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 — un `row-gap` n'est pas une propriété de
 * boîte, donc rien que le « Line Height Trim » du site ne puisse absorber
 * (§ 6.6).
 */
.zMhoCPeL_dxF9FuecsBj > slot::slotted(*) {
  display: grid !important;
  row-gap: 6px !important;
  margin: 0 !important;
}

/*
 * La flèche est en bas À GAUCHE, alignée sur le texte : c'est la marque que la
 * surface mène quelque part, et elle se lit dans le sens de lecture plutôt qu'au
 * coin opposé.
 *
 * `margin-top: auto` la pousse au bas de la carte quel que soit le volume de
 * texte — c'est ce couple qui tient la composition sans hauteur figée.
 */
.VH_tf5yLCkuG1vpUdzzQ {
  margin-top: auto;
  display: inline-flex;
  flex: 0 0 auto;
  line-height: 0;
  color: var(--lcl-ink, #2a2240);
  /*
   * Au repos la flèche est en retrait et à demi effacée ; au survol elle arrive
   * et avance. Deux propriétés seulement, toutes deux composables par le
   * navigateur.
   */
  opacity: 0.45;
  transform: translateX(-4px);
  transition:
    opacity var(--lcl-card-dur, 260ms) var(--lcl-card-ease, cubic-bezier(0.33, 0, 0.2, 1)),
    transform var(--lcl-card-dur, 260ms) var(--lcl-card-ease, cubic-bezier(0.33, 0, 0.2, 1));
}

.YX6eq5ktYyrCcXJoB__T[data-clickable="true"]:hover .VH_tf5yLCkuG1vpUdzzQ,
.YX6eq5ktYyrCcXJoB__T[data-clickable="true"]:focus-visible .VH_tf5yLCkuG1vpUdzzQ {
  opacity: 1;
  transform: translateX(4px);
}

@media (max-width: 1023px) {
  .YX6eq5ktYyrCcXJoB__T {
    min-height: var(--lcl-card-min-h-sm, 0px);
    margin-bottom: var(--lcl-block-gap-sm, 14px);
  }
}

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