/*
 * Carte add-on.
 *
 * Composant de PREMIER NIVEAU : il déclare son bloc de tokens complet sur son
 * propre `:host` (§ 5). Couleurs et échelle typographique sont celles de la
 * « Carte contenu » — copie assumée, chaque composant étant bundlé séparément.
 *
 * La couleur suit le mode de thème de la section : les variables `--_theme---*`
 * descendent jusqu'ici par héritage, seul canal qui traverse la frontière
 * shadow (§ 5). Chaque `var()` porte un repli littéral.
 */
:host {
  --lcl-font-display: "Cstm Neighbor", Impact, sans-serif;
  --lcl-font-body: Inter, sans-serif;

  --lcl-ac-surface: var(--_theme---cards--background, #e8e7e2);
  --lcl-ac-ink: var(--_theme---text-1, #2a2240);
  --lcl-ac-ink-soft: var(--_theme---text-2, rgba(42, 34, 64, 0.62));
  --lcl-ac-border: var(--_theme---border, rgba(42, 34, 64, 0.16));

  /* Échelle commune aux cartes — mêmes valeurs que « Carte contenu ». */
  --lcl-card-text: 1rem;
  --lcl-card-title: 1.375rem;
  --lcl-card-lh: 1.55;
  --lcl-card-lh-title: 1.25;

  /* Le montant est le seul élément qui hausse la voix. */
  --lcl-ac-amount: 1.75rem;
  --lcl-ac-suffix: 1.25rem;

  --lcl-ac-radius: 24px;
  --lcl-ac-pad-y: 2.75rem;
  --lcl-ac-pad-x: 2.5rem;
  --lcl-ac-body-gap: 0.75rem;
  --lcl-ac-foot-gap: 2.25rem;

  /* `:host` sert de conteneur à `.root` : une requête de conteneur interroge
     le plus proche ANCÊTRE, jamais l'élément qui l'établit. */
  container-type: inline-size;
  display: block;
  font-family: var(--lcl-font-body, Inter, sans-serif);
}

.IuOScCWFDe6iJGcaopaG {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--lcl-ac-pad-y, 2.75rem) var(--lcl-ac-pad-x, 2.5rem);
  border: 1px solid transparent;
  border-radius: var(--lcl-ac-radius, 24px);
  background: var(--lcl-ac-surface, #e8e7e2);
  color: var(--lcl-ac-ink, #2a2240);
  /* `text-align` est hérité : une section centrée centrerait sinon le texte
     alors que le prix, une boîte flex, resterait à gauche. */
  text-align: start;
}

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

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

.IuOScCWFDe6iJGcaopaG[data-surface="transparent"] {
  background: transparent;
}

/* — Titre et texte — */

.AZz1M4jP9vPJQGYtm5uU {
  display: flex;
  flex-direction: column;
  gap: var(--lcl-ac-body-gap, 0.75rem);
  min-width: 0;
}

/* Le CSS du site atteint nos balises (§ 6.6) : la classe fixe marge, corps et
   graisse du `<h3>`. « Cstm Neighbor » n'existe qu'en 400/700/900. */
.blFMJ29znjXUefBcoP_l {
  margin: 0;
  font-family: var(--lcl-font-display, "Cstm Neighbor", Impact, sans-serif);
  font-weight: 900;
  font-size: var(--lcl-card-title, 1.375rem);
  line-height: var(--lcl-card-lh-title, 1.25);
  text-transform: uppercase;
}

.blFMJ29znjXUefBcoP_l > 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). Typographie par héritage ; écart
 * entre paragraphes par une grille sur le nœud slotté, d'une ligne pleine comme
 * sur la « Carte contenu » — le « Line Height Trim » du site rogne le
 * demi-interlignage de chaque `<p>` (§ 6.6).
 */
.orG7WGfJgfIcNTSFCtb9 {
  font-size: var(--lcl-card-text, 1rem);
  line-height: var(--lcl-card-lh, 1.55);
  color: var(--lcl-ac-ink-soft, rgba(42, 34, 64, 0.62));
}

.orG7WGfJgfIcNTSFCtb9 > slot::slotted(*) {
  display: grid !important;
  row-gap: 1.5em !important;
  row-gap: 1lh !important;
  margin: 0 !important;
}

/* — Prix, calé en bas — */

/* `margin-top: auto` pousse le prix au pied de la carte : dans une rangée de
   cartes de même hauteur, les prix s'alignent quel que soit le texte. */
.FHDNHNgUwnA1k2rpCuCK {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  margin-top: auto;
  padding-top: var(--lcl-ac-foot-gap, 2.25rem);
}

.za_bbPSP8jExnfKlLXlJ {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.5rem;
  margin: 0;
}

.ZpoU2tpVLPvNOhnEuBqG {
  font-family: var(--lcl-font-display, "Cstm Neighbor", Impact, sans-serif);
  font-weight: 900;
  font-size: var(--lcl-ac-amount, 1.75rem);
  line-height: 1;
  color: var(--lcl-ac-ink, #2a2240);
}

.clDyImQ0iGIDLrl3W4Wa {
  font-size: var(--lcl-ac-suffix, 1.25rem);
  line-height: 1.2;
  color: var(--lcl-ac-ink-soft, rgba(42, 34, 64, 0.62));
}

/* Le bouton est SLOTTÉ, la carte ne le peint pas (§ 6.12) : on neutralise
   seulement le wrapper de Webflow (§ 6.4). */
.S4KnmUUKu2Lp0qjGrWcI {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.S4KnmUUKu2Lp0qjGrWcI > slot {
  display: contents;
}

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

/* — Palier, sur la largeur de la CARTE — */

@container (max-width: 420px) {
  .IuOScCWFDe6iJGcaopaG {
    --lcl-ac-pad-y: 1.75rem;
    --lcl-ac-pad-x: 1.5rem;
    --lcl-ac-foot-gap: 1.75rem;
    --lcl-card-title: 1.25rem;
    --lcl-ac-radius: 18px;
  }
}