/*
 * Carte de contenu.
 *
 * Composant de PREMIER NIVEAU : il déclare son bloc de tokens complet sur son
 * propre `:host` (§ 5).
 *
 * ═══ LA COULEUR SUIT LE THÈME DE LA SECTION ═══
 *
 * Mêmes variables que la carte tarif : celles de la collection « Theme » du
 * site, qu'un mode appliqué à une section redéfinit sur elle-même et qui
 * descendent jusqu'ici par héritage — seul canal de style qui traverse la
 * frontière shadow (§ 5). Il n'y a donc aucune couleur à régler dans le
 * panneau, et rien à recâbler quand une couleur de marque change.
 *
 * Chaque `var()` porte un repli littéral : hors Webflow, ou dans une section
 * sans mode, la carte reste lisible au lieu de perdre ses couleurs — un `var()`
 * non résolu invalide la déclaration en silence.
 */
:host {
  --lcl-font-display: "Cstm Neighbor", Impact, sans-serif;
  --lcl-font-body: Inter, sans-serif;
  --lcl-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --lcl-dur-fast: 170ms;

  /* — Couleurs : lues sur le design system du site — */
  --lcl-fc-surface: var(--_theme---cards--background, #f3f2ef);
  --lcl-fc-ink: var(--_theme---text-1, #2a2240);
  --lcl-fc-ink-soft: var(--_theme---text-2, rgba(42, 34, 64, 0.62));
  --lcl-fc-border: var(--_theme---border, rgba(42, 34, 64, 0.16));
  --lcl-fc-pastille: var(--_theme---cards--icon-background, #e0fa00);
  --lcl-fc-pastille-ink: var(--_theme---cards--icon, #2a2240);

  /* — Géométrie, commune à tous les réglages : c'est elle qui rend les cartes
       consistantes entre elles quel que soit le contenu affiché — */

  /*
   * ═══ ÉCHELLE TYPOGRAPHIQUE COMMUNE AUX CARTES ═══
   *
   * FIXE, et c'est tout l'enjeu. Ces tailles étaient en `clamp()` avec des
   * unités `cqi`, donc relatives à la largeur du CONTENEUR : une carte pleine
   * largeur avait un titre plus gros que la même carte dans une grille de
   * trois. Acceptable pour un montant d'affichage, faux pour du texte courant —
   * deux cartes côte à côte doivent se lire pareil.
   *
   * Ces cinq valeurs sont IDENTIQUES dans « Carte tarif », « Carte tarif —
   * Item » et « Carte contenu ». Copie assumée et non seconde source de vérité :
   * chaque composant est bundlé séparément, un CSS partagé dupliquerait la
   * feuille et introduirait un risque inter-bundler (§ 5). Toute retouche se
   * fait donc dans les TROIS fichiers, et un écart entre eux est un bug.
   *
   * En `rem` : la taille suit le réglage de police du visiteur, ce qu'un `px`
   * ignore. Elle suit aussi la `font-size` racine du site — contrepartie voulue.
   */
  --lcl-card-text: 1rem;
  --lcl-card-text-sm: 0.875rem;
  --lcl-card-title: 1.375rem;
  --lcl-card-lh: 1.55;
  --lcl-card-lh-title: 1.25;

  --lcl-fc-radius: 24px;
  --lcl-fc-pad-y: 20px;
  --lcl-fc-pad-x: 20px;
  --lcl-fc-gap: 18px;
  --lcl-fc-inner-gap: 16px;
  /* Écart titre ↔ texte. Il doit être plus généreux qu'on ne le croirait : le
     titre est un paragraphe SLOTTÉ, auquel le CSS du site retire ses marges et
     dont le « Line Height Trim » rogne le demi-interlignage. L'air que donnait
     le leading a disparu, cette valeur doit le rendre (§ 6.6). */
  --lcl-fc-body-gap: 20px;
  --lcl-fc-pastille-size: 44px;
  --lcl-fc-pastille-radius: 12px;
  --lcl-fc-pastille-icon: 22px;
  --lcl-fc-media-radius: 16px;

  /*
   * Conteneur posé sur `:host` ET sur `.root`, et les deux sont nécessaires :
   * une requête de conteneur ne peut jamais interroger l'élément qui établit le
   * conteneur, elle cherche le plus proche ANCÊTRE. `:host` sert donc de
   * conteneur à `.root`, et `.root` à ses enfants.
   */
  container-type: inline-size;

  display: block;
  font-family: var(--lcl-font-body, Inter, sans-serif);
}

.MKKqEM7vTvK_BXnMR8dd {
  container-type: inline-size;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--lcl-fc-gap, 18px);
  padding: var(--lcl-fc-pad-y, 34px) var(--lcl-fc-pad-x, 28px);
  border-radius: var(--lcl-fc-radius, 24px);
  background: var(--lcl-fc-surface, #f3f2ef);
  color: var(--lcl-fc-ink, #2a2240);
  /* La carte impose son alignement au lieu de le subir : `text-align` est une
     propriété héritée, donc une section centrée centrerait son titre et son
     texte alors que ses blocs flex resteraient à gauche (§ 6.6). */
  text-align: start;
  text-decoration: none;
  border: 1px solid transparent;
  transition:
    transform var(--lcl-dur-fast, 170ms) var(--lcl-ease, ease),
    border-color var(--lcl-dur-fast, 170ms) var(--lcl-ease, ease),
    box-shadow var(--lcl-dur-fast, 170ms) var(--lcl-ease, ease);
}

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

.MKKqEM7vTvK_BXnMR8dd[data-border="true"] {
  border-color: var(--lcl-fc-border, rgba(42, 34, 64, 0.16));
}

/*
 * Fond transparent. `transparent` et non une couleur : la carte laisse
 * réellement passer le fond de la section, quel que soit son mode de thème —
 * une couleur, même bien choisie, se décalerait dès qu'on change de mode.
 *
 * Le contour est forcé côté composant, pas ici : une carte sans fond ni contour
 * n'est plus une carte. Et l'ombre du survol disparaît, parce qu'une ombre sous
 * une surface invisible flotte dans le vide.
 */
.MKKqEM7vTvK_BXnMR8dd[data-surface="transparent"] {
  background: transparent;
}

.MKKqEM7vTvK_BXnMR8dd[data-surface="transparent"][data-clickable="true"]:hover {
  box-shadow: none;
  border-color: var(--lcl-fc-ink, #2a2240);
}

/*
 * Le survol ne bouge QUE si la carte est cliquable. Animer une carte inerte
 * promet une interaction qui n'existe pas — c'est le genre de détail qui fait
 * qu'une interface ment sans qu'on sache dire pourquoi.
 */
.MKKqEM7vTvK_BXnMR8dd[data-clickable="true"] {
  cursor: pointer;
}

.MKKqEM7vTvK_BXnMR8dd[data-clickable="true"]:hover {
  transform: translateY(-3px);
  border-color: var(--lcl-fc-border, rgba(42, 34, 64, 0.16));
  box-shadow: 0 12px 28px rgba(20, 16, 40, 0.16);
}

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

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

/* — Visuel — */

/*
 * Le wrapper que Webflow interpose autour d'un contenu slotté est un flex EN
 * COLONNE. On le fait disparaître de l'arbre de boîtes pour que l'image
 * remplisse vraiment le cadre, et `::slotted()` impose sa taille — la seule
 * déclaration qui passe du parent vers l'enfant slotté, et qui bat aussi ses
 * attributs `width` / `height` (§ 6.4, § 6.5).
 */
.RSkNgyx3ZHSIJnQ2eB8P {
  overflow: hidden;
  border-radius: var(--lcl-fc-media-radius, 16px);
  line-height: 0;
}

.RSkNgyx3ZHSIJnQ2eB8P > slot {
  display: contents;
}

.RSkNgyx3ZHSIJnQ2eB8P > slot::slotted(*) {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

/* — L'axe : pastille au-dessus du texte, ou à côté — */

.Sjaq2rKfUBZPHNb983wb {
  display: flex;
  gap: var(--lcl-fc-inner-gap, 16px);
}

.MKKqEM7vTvK_BXnMR8dd[data-axis="vertical"] .Sjaq2rKfUBZPHNb983wb {
  flex-direction: column;
  align-items: flex-start;
}

/* `flex-start` et non `center` : la pastille se pose en face de la PREMIÈRE
   ligne, pas au milieu d'un paragraphe de trois lignes. */
.MKKqEM7vTvK_BXnMR8dd[data-axis="horizontal"] .Sjaq2rKfUBZPHNb983wb {
  flex-direction: row;
  align-items: flex-start;
}

/* — La pastille — */

.dNVx_RQs_OgsrTGj1V1w {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--lcl-fc-pastille-size, 44px);
  height: var(--lcl-fc-pastille-size, 44px);
  border-radius: var(--lcl-fc-pastille-radius, 12px);
  background: var(--lcl-fc-pastille, #e0fa00);
  /* `color` traverse la frontière shadow : un SVG déposé et peint en
     `currentColor` prend cette encre sans une ligne de JavaScript (§ 5). */
  color: var(--lcl-fc-pastille-ink, #2a2240);
}

.dNVx_RQs_OgsrTGj1V1w slot::slotted(*) {
  width: var(--lcl-fc-pastille-icon, 22px) !important;
  height: var(--lcl-fc-pastille-icon, 22px) !important;
  display: block !important;
}

/* — Le corps — */

.ID16UJxtOEC_bPjr62fg {
  display: flex;
  flex-direction: column;
  gap: var(--lcl-fc-body-gap, 16px);
  /* Sans `min-width: 0`, un élément flex refuse de descendre sous la largeur de
     son contenu et déborde au lieu de laisser le texte se replier. */
  min-width: 0;
}

/*
 * Le titre est un `props.RichText` : son contenu arrive SLOTTÉ, donc
 * `.title p` ne matche rien. Les canaux sont les propriétés héritées posées ici,
 * et `::slotted()` sur le nœud de premier niveau (§ 6.3).
 */
.LRQnJFM4gVPrQV7i5kYw {
  margin: 0;
  font-family: var(--lcl-font-display, "Cstm Neighbor", Impact, sans-serif);
  /* « Cstm Neighbor » n'existe qu'en 400/700/900 : jamais de 500 ni de 600. */
  font-weight: 700;
  font-size: var(--lcl-card-title, 1.375rem);
  line-height: var(--lcl-card-lh-title, 1.25);
}

.LRQnJFM4gVPrQV7i5kYw > slot::slotted(*) {
  display: grid !important;
  row-gap: 4px !important;
  margin: 0 !important;
}

/*
 * Le texte est un `props.RichText` : son contenu arrive SLOTTÉ, donc
 * `.description p` ne matche rien (§ 6.3). Les seuls canaux sont les propriétés
 * héritées posées ici, et `::slotted()` sur le nœud de premier niveau.
 */
.sfOfVtodagZ0bxKENEUd {
  font-size: var(--lcl-card-text, 1rem);
  line-height: var(--lcl-card-lh, 1.55);
  color: var(--lcl-fc-ink-soft, rgba(42, 34, 64, 0.62));
}

/* L'espacement entre paragraphes passe par une grille posée sur le nœud slotté :
   ses `<p>` sont ses vrais enfants, et un `row-gap` n'est pas une propriété de
   boîte.
   Une ligne pleine (`1lh`) et non 8px : le « Line Height Trim » du site retire
   un demi-interlignage en haut et en bas de chaque `<p>` (§ 6.6), donc 8px
   valaient l'écart entre deux lignes d'un même paragraphe — le second
   paragraphe paraissait collé. `1.5em` d'abord, pour un moteur sans `lh`. */
.sfOfVtodagZ0bxKENEUd > slot::slotted(*) {
  display: grid !important;
  row-gap: 1.5em !important;
  row-gap: 1lh !important;
  margin: 0 !important;
}

/* — L'action — */

.m3J0fdYx2W0hWlOt9AGR {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

/*
 * Le bouton est SLOTTÉ : la carte ne le peint pas. Même raison que sur la carte
 * tarif — un bouton light DOM reste atteignable par les scripts du site
 * (§ 6.12). On neutralise seulement le `<div>` colonne que Webflow interpose
 * autour du contenu d'un slot (§ 6.4).
 */
.m3J0fdYx2W0hWlOt9AGR > slot {
  display: contents;
}

.m3J0fdYx2W0hWlOt9AGR > slot::slotted(*) {
  display: contents !important;
}

/* — Paliers, sur la largeur de la CARTE et non de la fenêtre — */

@container (max-width: 420px) {
  .MKKqEM7vTvK_BXnMR8dd {
    --lcl-fc-pad-y: 16px;
    --lcl-fc-pad-x: 16px;
    /* Seul le titre descend d'un cran : le texte courant reste à 1rem, c'est
       le point de toute cette échelle. */
    --lcl-card-title: 1.25rem;
    --lcl-fc-radius: 18px;
    --lcl-fc-pastille-size: 38px;
  }

  /* Sous cette largeur, une rangée laisse trop peu de place au texte : la
     pastille repasse au-dessus, quel que soit l'axe demandé. */
  .MKKqEM7vTvK_BXnMR8dd[data-axis="horizontal"] .Sjaq2rKfUBZPHNb983wb {
    flex-direction: column;
  }
}

/* — Mouvement réduit — */

@media (prefers-reduced-motion: reduce) {
  .MKKqEM7vTvK_BXnMR8dd,
  .LTPF53JR7Eo1NgPEj7Jv {
    transition: none;
  }

  /* La transition ne suffit pas : sans ceci la carte sauterait d'un coup au
     survol au lieu de glisser. */
  .MKKqEM7vTvK_BXnMR8dd[data-clickable="true"]:hover,
  .MKKqEM7vTvK_BXnMR8dd[data-clickable="true"]:active {
    transform: none;
  }
}