/*
 * Carte tarif.
 *
 * Composant de PREMIER NIVEAU : il déclare son bloc de tokens complet sur son
 * propre `:host` — aucun ancêtre ne porterait les `--lcl-*` (§ 5).
 *
 * ═══ LA COULEUR SUIT LE THÈME DE LA SECTION, SANS AUCUNE PROP ═══
 *
 * Le site définit ses couleurs dans la collection de variables Webflow
 * « Theme », qui porte sept modes (Base, Brand EggPlant / Dark, Brand Yellow,
 * Brand Blue Frost, Brand Pink, TDF, TDF DARK). Appliquer un mode à une section
 * redéfinit ces variables SUR CETTE SECTION.
 *
 * Or les custom properties sont le seul canal de style qui traverse la
 * frontière shadow, et l'héritage suit l'arbre APLATI (§ 5). Les variables de
 * la section descendent donc jusqu'ici. La carte lit le design system du site
 * directement : pas de prop de thème, pas de classe à poser, rien à recâbler
 * quand une couleur de marque change.
 *
 * Les noms sont ceux réellement émis par Webflow, relevés sur la collection
 * `Theme` du site le 2026-09-15 — ils ne s'inventent pas. Chaque `var()` porte
 * un repli littéral : hors Webflow (harnais Vite, section sans mode) la carte
 * retombe sur l'allure claire, et un `var()` non résolu invaliderait sinon la
 * déclaration en silence (§ 5).
 *
 * NON VÉRIFIÉ : que Webflow émette bien ces variables sur l'élément de section
 * et non uniquement dans un bloc de portée globale. Ça se constate sur une page
 * publiée, pas depuis un terminal.
 */
:host {
  /* Police et mouvement — recopiés de Nav.module.css, source de vérité. */
  --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-pc-surface: var(--_theme---cards--background, #f3f2ef);
  --lcl-pc-ink: var(--_theme---text-1, #2a2240);
  --lcl-pc-ink-soft: var(--_theme---text-2, rgba(42, 34, 64, 0.62));
  --lcl-pc-rule: var(--_theme---border, rgba(42, 34, 64, 0.16));

  --lcl-pc-accent: var(--_theme---cards--icon-background, #e0fa00);
  --lcl-pc-accent-ink: var(--_theme---cards--icon, #2a2240);
  --lcl-pc-badge-bg: var(--_theme---heading-accent, #e0fa00);
  /*
   * Encre LITTÉRALE, et c'est délibéré après trois tentatives ratées.
   *
   * L'accent de la marque est un jaune-vert dans tous les modes utilisés, et
   * rien ne se lit dessus à part une encre sombre. Chaque token de thème que
   * j'ai essayé — `text-1`, puis `background`, puis la paire icône — vaut du
   * clair dans au moins un mode, donc du clair sur jaune. Une valeur fixe est
   * ici plus juste qu'une valeur dérivée : elle ne dépend d'aucun mode.
   *
   * Le token reste, pour la changer sans toucher au composant.
   */
  --lcl-pc-badge-ink: #2a2240;


  /*
   * Le sélecteur est une PAIRE, pas deux couleurs prises séparément : une piste
   * sombre avec une encre claire, une pastille claire avec une encre sombre.
   * L'encre inactive lisait `--_theme---button-primary--text`, qui vaut le
   * JAUNE dans ce thème — d'où des libellés vert acide sur la piste. Un token de
   * texte de bouton ne dit rien de ce qui se lit sur une piste.
   */
  --lcl-pc-toggle-bg: var(--_theme---button-primary--background, #2a2240);
  --lcl-pc-toggle-ink: #fff;
  --lcl-pc-toggle-on-bg: #fff;
  --lcl-pc-toggle-on-ink: var(--_theme---button-primary--background, #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 ═══
   *
   * Ces cinq valeurs sont IDENTIQUES dans « Carte tarif », « Carte tarif —
   * Item » et « Carte contenu ». C'est une copie assumée et non une seconde
   * source de vérité : chaque composant est bundlé séparément par Webflow, un
   * fichier 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` et non en `px` : la taille suit le réglage de police du visiteur,
   * ce qu'un `px` ignore. Elle suit aussi la `font-size` racine du site — c'est
   * la contrepartie, et elle est voulue.
   *
   * Plus de `clamp()` sur le texte courant : il doit valoir 1rem, pas « entre
   * 15 et 18 selon la largeur ». Seuls les deux corps d'affichage descendent
   * d'un cran sur une carte étroite, et c'est écrit dans le palier.
   */
  --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;

  /* Corps d'affichage, propres à cette carte : le montant est le seul élément
     qui hausse la voix, et le montant barré se tient un cran en dessous. */
  --lcl-card-amount: 2.25rem;
  --lcl-card-amount-strike: 1.5rem;

  /*
   * Le crème de la palette — `--lcl-whiteegg-100` (§ 4), la valeur que
   * `--_theme---background` prend dans le mode de BASE.
   *
   * Littéral et non `var(--_theme---background)`, et ce n'est pas un
   * renoncement : une variable CSS rend toujours la valeur du mode COURANT. Sur
   * une section en mode Brand Pink, elle vaudrait le rose, et la carte
   * reprendrait la teinte dont on cherche justement à la détacher. Il n'existe
   * aucun moyen de lire « la valeur du mode de base » depuis l'intérieur.
   */
  --lcl-pc-surface-base: #f3f2ef;

  --lcl-pc-radius: 28px;
  --lcl-pc-pad: 28px;
  --lcl-pc-gap: 22px;
  --lcl-pc-marker: 20px;
  --lcl-pc-marker-icon: 12px;
  --lcl-pc-item-gap: 12px;
  --lcl-pc-item-size: var(--lcl-card-text, 1rem);
  --lcl-pc-item-lh: var(--lcl-card-lh, 1.55);
  /* 400 et non 700 : le gras des items de la maquette tarifaire est une
     exception, pas la règle — la carte d'avantage les a en graisse normale.
     Le token reste là pour le remonter à 700 sur une carte qui le demande. */
  --lcl-pc-item-weight: 400;
  --lcl-pc-list-gap: 18px;
  /* Course de la pastille du sélecteur. Plus lente que `--lcl-dur-fast` : c'est
     un objet qui se déplace, il doit se laisser suivre. */
  --lcl-pc-slide: 380ms;
  --lcl-pc-roll: 460ms;
  /* Apparition du prix barré, du suffixe et du badge au basculement. Plus
     courte que le défilement des chiffres : ce sont des éléments qui ENTRENT,
     pas une valeur qui se transforme. */
  --lcl-pc-reveal: 420ms;
  /*
   * Une courbe PROPRE à l'apparition, et non `--lcl-ease`.
   *
   * `--lcl-ease` est une expo-out (0.16, 1, 0.3, 1) : elle part très vite puis
   * s'écrase. Sur un glissement de pastille c'est exactement ce qu'on veut, sur
   * une arrivée de quelques pixels ça se lit comme un à-coup — presque tout le
   * mouvement est consommé dans les premières images. Celle-ci accélère et
   * décélère, donc l'arrivée se voit du début à la fin.
   */
  --lcl-pc-reveal-ease: cubic-bezier(0.33, 0, 0.2, 1);

  /* Corps du suffixe et du badge. Ils descendent d'un cran en carte étroite :
     c'est ce qui décide si la rangée de prix tient sur une ligne. */
  --lcl-pc-suffix-size: var(--lcl-card-text, 1rem);
  --lcl-pc-badge-size: var(--lcl-card-text-sm, 0.875rem);
  --lcl-pc-badge-pad: 5px 12px;

  /*
   * 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 conteneur ANCÊTRE. Avec
   * `container-type` sur `.root` seulement, les règles de palier visant `.root`
   * lui-même ne trouvaient aucun conteneur et ne s'appliquaient jamais — seules
   * celles visant ses enfants fonctionnaient.
   *
   * `:host` sert donc de conteneur à `.root`, et `.root` de conteneur à ses
   * enfants. Dans le harnais Vite `:host` ne correspond à rien, donc seules les
   * règles sur les enfants y répondent : c'est une dégradation connue, pas un
   * oubli.
   */
  container-type: inline-size;

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

/*
 * Deux états de fond, et le sens de la valeur est contre-intuitif — d'où le
 * renommage : ce qu'on dose n'est pas l'opacité de la carte, c'est la TEINTE DE
 * THÈME posée par-dessus la base crème. Or cette teinte est elle-même
 * translucide dans le design system.
 *
 *   · teinte à 0 %   → on ne voit que la base crème : aplat franc.
 *   · teinte à 100 % → on voit la teinte du thème, donc la section à travers.
 *
 * Nommer ça « opacité » inversait la lecture : monter le nombre rendait la
 * carte plus transparente.
 */
.JNqx8wLDF1T4cCQAcfxu[data-surface="normal"] {
  --lcl-pc-surface-tint: 0%;
}

.JNqx8wLDF1T4cCQAcfxu[data-surface="faded"] {
  --lcl-pc-surface-tint: 100%;
}

.JNqx8wLDF1T4cCQAcfxu {
  container-type: inline-size;
  box-sizing: border-box;
  /*
   * La carte impose son alignement au lieu de le subir. `text-align` est une
   * propriété HÉRITÉE, donc elle traverse la frontière shadow — c'est le canal
   * qu'on exploite pour les tokens, et il joue ici contre nous : déposée dans
   * une section centrée, la carte héritait du centrage sur son titre, son texte
   * et le titre de sa liste, alors que son prix et ses items restaient à gauche
   * (ce sont des boîtes flex). `start` et non `left` : l'alignement reste juste
   * si la direction d'écriture change.
   */
  text-align: start;
  display: flex;
  flex-direction: column;
  gap: var(--lcl-pc-gap, 22px);
  padding: var(--lcl-pc-pad, 40px);
  border-radius: var(--lcl-pc-radius, 28px);
  /*
   * Deux couches, et le choix de la base est tout le sujet.
   *
   * La base était `--_theme---background`, c'est-à-dire LE FOND DE LA SECTION.
   * Une couleur de carte semi-transparente posée dessus reste donc teintée par
   * la section quelle que soit l'opacité — la carte ne devenait jamais claire.
   *
   * La base est le CRÈME de la palette, et `background-image` peint la teinte
   * du thème par-dessus, dosée par `color-mix()`. En « Normal » cette teinte
   * est à zéro : on voit le crème, franc. En « Atténué » elle est pleine, et
   * comme elle est translucide dans le design system, la section transparaît.
   *
   * `background-image` et non un second `background-color` : une seule couleur
   * de fond est possible par élément, alors qu'un dégradé plat se superpose.
   *
   * Sur une section sombre, cette base claire est à remplacer —
   * `--lcl-pc-surface-base` est là pour ça.
   */
  background-color: var(--lcl-pc-surface-base, #f3f2ef);
  background-image: linear-gradient(
    color-mix(
        in srgb,
        var(--lcl-pc-surface, #f3f2ef) var(--lcl-pc-surface-tint, 0%),
        transparent
      )
      0 0
  );
  color: var(--lcl-pc-ink, #2a2240);
}

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

/* — Tête : prix à gauche, sélecteur à droite — */

/*
 * `flex-wrap` et non un palier : le prix et le sélecteur restent sur une ligne
 * tant qu'ils tiennent, et ne se séparent que quand la place manque vraiment.
 */
.Itqu2C2c0DUHhUfECHN5 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px 24px;
}

/*
 * La pile de prix. Les deux états et la rangée vivante occupent la MÊME cellule
 * de grille, donc la cellule prend la largeur du plus large. Le bloc prix ne
 * change plus de largeur au basculement, et la décision de retour à la ligne du
 * sélecteur est prise une fois pour toutes.
 *
 * `min-width: 0` sans quoi la pile refuserait de descendre sous la largeur de
 * son contenu et déborderait au lieu de laisser le sélecteur se replier.
 */
.NIsSprT8gQsuce7eE5bJ {
  display: grid;
  min-width: 0;
}

.NIsSprT8gQsuce7eE5bJ > * {
  grid-area: 1 / 1;
}

.e95WGEmqu9bRimeo5z9I {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 10px;
  margin: 0;
  min-width: 0;
}

/*
 * `visibility: hidden` et non `display: none` : un fantôme doit occuper sa
 * place, c'est toute sa raison d'être. `display: none` le retirerait du calcul
 * de largeur et ne réserverait rien.
 */
.X81BcdXKcNQNwcCu4hJg {
  visibility: hidden;
  pointer-events: none;
}

/*
 * Le montant est la seule chose qui hausse la voix dans la carte. « Cstm
 * Neighbor » n'existe qu'en 400/700/900 : jamais de 500 ni de 600 (§ 4).
 */
.ihbrVdTw7mvJ1t_9Wvtu {
  font-family: var(--lcl-font-display, "Cstm Neighbor", Impact, sans-serif);
  font-weight: 900;
  font-size: var(--lcl-card-amount, 2.25rem);
  line-height: 1;
  letter-spacing: -0.01em;
  /* Même métrique que la colonne défilante, sinon la largeur réservée par le
     fantôme ne correspondrait pas à celle du montant réellement affiché. */
  font-variant-numeric: tabular-nums;
}

/*
 * Apparition du prix barré et du badge.
 *
 * Une `animation` et non une `transition`, et ce n'est pas un détail de style :
 * ces deux éléments sont MONTÉS et DÉMONTÉS par React au basculement. Une
 * transition n'a rien à interpoler sur un élément qui vient d'apparaître — elle
 * ne se déclenche qu'entre deux états d'un élément déjà présent. Seule une
 * animation jouée au montage peut adoucir une arrivée.
 *
 * Conséquence assumée : l'arrivée est animée, le départ non. Retenir un élément
 * pendant sa sortie demanderait de le garder monté et de piloter son
 * démontage — beaucoup de machinerie pour un aller-retour que personne ne
 * regarde.
 *
 * Les fantômes en sont exclus : ils ne servent qu'à réserver la largeur, animer
 * une boîte invisible ne coûterait que du calcul.
 */
@keyframes owyF39H1QmxYc3F_VE8M {
  from {
    opacity: 0;
    /* Moins d'échelle qu'avant : à 0.94 le glyphe grossit visiblement en
       arrivant, ce qui se lit comme un rebond plutôt que comme une entrée. */
    transform: translateY(-5px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/*
 * Le SUFFIXE est de la partie, et c'est ce qui manquait.
 *
 * Il n'est pas monté/démonté comme les deux autres : c'est le même élément dont
 * le texte change (« /mois HT » → « /an HT »). Il se replaçait donc d'un coup,
 * pendant que le barré et le badge, eux, arrivaient en douceur. Le TSX lui donne
 * une `key` tirée de son texte : React le remonte quand le texte change, et
 * l'animation de montage joue. Si les deux libellés sont identiques, la clé ne
 * bouge pas, rien n'est remonté, rien ne s'anime — ce qui est le bon
 * comportement.
 */
.fkp_xl0yHxXZCgHD3IoN,
.ZiYMOzWrJGrHlSIVeyJf,
.hZKEjfYKb3kYL91aIZRL {
  animation: owyF39H1QmxYc3F_VE8M var(--lcl-pc-reveal, 420ms) var(--lcl-pc-reveal-ease, ease) both;
}

/* Le badge entre juste après le barré : une séquence se lit, deux apparitions
   simultanées clignotent. */
.hZKEjfYKb3kYL91aIZRL {
  animation-delay: 70ms;
}

.X81BcdXKcNQNwcCu4hJg .fkp_xl0yHxXZCgHD3IoN,
.X81BcdXKcNQNwcCu4hJg .ZiYMOzWrJGrHlSIVeyJf,
.X81BcdXKcNQNwcCu4hJg .hZKEjfYKb3kYL91aIZRL {
  animation: none;
}

.fkp_xl0yHxXZCgHD3IoN {
  font-family: var(--lcl-font-display, "Cstm Neighbor", Impact, sans-serif);
  font-weight: 700;
  font-size: var(--lcl-card-amount-strike, 1.5rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--lcl-pc-ink-soft, rgba(42, 34, 64, 0.62));
}

.ZiYMOzWrJGrHlSIVeyJf {
  font-size: var(--lcl-pc-suffix-size, 1rem);
  line-height: 1.2;
  white-space: nowrap;
  color: var(--lcl-pc-ink-soft, rgba(42, 34, 64, 0.62));
}

.hZKEjfYKb3kYL91aIZRL {
  padding: var(--lcl-pc-badge-pad, 5px 12px);
  border-radius: 8px;
  background: var(--lcl-pc-badge-bg, #e0fa00);
  color: var(--lcl-pc-badge-ink, #2a2240);
  font-size: var(--lcl-pc-badge-size, 0.875rem);
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}

/* — Chiffres défilants — */

/*
 * Même mécanisme que le simulateur de découvert, et la logique est partagée
 * (components/shared/rollingDigits.tsx). Seules les classes sont locales :
 * chaque composant est bundlé séparément, un CSS Module partagé dupliquerait la
 * feuille (§ 5).
 *
 * `vertical-align: top` sur les deux sortes de caractères : `overflow: hidden`
 * casse l'alignement sur la ligne de base d'une boîte en ligne, et les aligner
 * tous sur le HAUT d'une boîte d'un cadratin les remet d'aplomb sans dépendre
 * des métriques de la police.
 */
.jmDBpo3xOdgJwnIHAriF {
  display: inline-flex;
  align-items: flex-start;
}

.VuUAyNzhsNNNouIQwZFH,
.sSU1XdX9P7eaQSZAgKKn {
  display: inline-block;
  height: 1em;
  line-height: 1;
  vertical-align: top;
}

.sSU1XdX9P7eaQSZAgKKn {
  overflow: hidden;
}

.gphhloHeYMgQKpybxmIU {
  display: flex;
  flex-direction: column;
  transform: translateY(calc(var(--chiffre, 0) * -1em));
  transition: transform var(--lcl-pc-roll, 460ms) var(--lcl-ease, ease);
  /* Sur la colonne et non sur le montant : c'est elle qui doit avoir dix
     chiffres de même largeur, sinon la fenêtre se redimensionne en cours de
     défilement et le nombre tressaute latéralement. */
  font-variant-numeric: tabular-nums;
}

.bl4DpjkOqxxEEftVlmhj {
  height: 1em;
  line-height: 1;
}

/*
 * Le trait du prix barré est DESSINÉ, il n'est pas la décoration native.
 *
 * `text-decoration: line-through` ne traverse pas une boîte `inline-block` — or
 * chaque fenêtre de chiffre défilant en est une. Le trait du `<s>` s'arrêtait
 * donc avant d'atteindre les chiffres, et le prix n'était pas barré du tout.
 *
 * Une ligne en pseudo-élément couvre le nombre entier quelle que soit la
 * structure interne, et conserve le défilement.
 */
.fkp_xl0yHxXZCgHD3IoN {
  position: relative;
  text-decoration: none;
}

.fkp_xl0yHxXZCgHD3IoN::after {
  content: "";
  position: absolute;
  left: -0.04em;
  right: -0.04em;
  top: 52%;
  height: 0.08em;
  border-radius: 999px;
  background: currentColor;
  pointer-events: none;
}

.lbyY81BfwWp872pKGJ1T {
  display: inline-block;
}

/* — Sélecteur — */

/* `position: relative` sert d'ancre au badge, qui déborde en haut à droite. */
.iG3X6tYZN7UjvmbKuS92 {
  position: relative;
  flex: 0 0 auto;
}

.U8lwM9o6BUYpMqJOKRXx {
  position: absolute;
  right: 6px;
  bottom: calc(100% - 10px);
  z-index: 1;
  padding: 3px 9px;
  border-radius: 7px;
  background: var(--lcl-pc-badge-bg, #e0fa00);
  color: var(--lcl-pc-badge-ink, #2a2240);
  font-size: var(--lcl-pc-badge-size, 0.875rem);
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}

/* Le sélecteur est un BOUTON : toute sa surface bascule l'état, il n'y a aucune
   zone morte. `position: relative` ancre la pastille coulissante. */
.VS4ZXE4XL1a5Lfg10Lcz {
  appearance: none;
  position: relative;
  display: flex;
  align-items: center;
  padding: 3px;
  border: 0;
  border-radius: 999px;
  background: var(--lcl-pc-toggle-bg, #2a2240);
  font-family: inherit;
  cursor: pointer;
}

.VS4ZXE4XL1a5Lfg10Lcz:focus-visible {
  outline: 3px solid var(--lcl-pc-toggle-on-bg, #fff);
  outline-offset: 3px;
}

/*
 * La pastille est posée par ses BORDS, et non par une largeur calculée puis
 * translatée.
 *
 * `width: calc(50% - 3px)` reposait sur une hypothèse — que le pourcentage se
 * résolve sur la boîte de remplissage de la piste — et le moindre écart
 * décalait la pastille par rapport au libellé qu'elle est censée souligner.
 * Avec `left` et `right`, la moitié est la moitié : le bord droit au repos et
 * le bord gauche en position 2 tombent tous deux sur 50 %, exactement là où les
 * deux libellés se séparent.
 *
 * On anime `left` et `right` plutôt qu'un `transform` : c'est moins bien
 * composité par le navigateur, mais sur une pastille de cette taille ça ne se
 * voit pas, et l'exactitude prime sur l'optimisation.
 */
.BY2AD_1lFyZkJ7xdqQ2L {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  right: 50%;
  border-radius: 999px;
  background: var(--lcl-pc-toggle-on-bg, #fff);
  /* Elle ne doit jamais intercepter un clic : c'est le bouton qui le reçoit,
     sur toute sa surface. */
  pointer-events: none;
  transition:
    left var(--lcl-pc-slide, 380ms) var(--lcl-ease, ease),
    right var(--lcl-pc-slide, 380ms) var(--lcl-ease, ease);
}

.BY2AD_1lFyZkJ7xdqQ2L[data-on="2"] {
  left: 50%;
  right: 3px;
}

/* `flex: 1 1 0` : les deux libellés font la même largeur, ce qui est la
   condition pour que la pastille tombe juste. `position: relative` + `z-index`
   les gardent AU-DESSUS d'elle, sinon le libellé actif passerait dessous. */
/*
 * `min-width: 0` est LA ligne qui aligne les libellés sur la pastille.
 *
 * `flex: 1 1 0` ne suffit pas : un élément flex garde `min-width: auto` et
 * refuse de descendre sous sa largeur de contenu. « Mensuel » étant plus long
 * qu'« Annuel », il prenait plus de la moitié de la piste — alors que la
 * pastille, elle, fait exactement 50 %. D'où le décalage.
 */
.QuPHYnHnq1nKKrgohYIl {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  z-index: 1;
  padding: 7px 14px;
  text-align: center;
  color: var(--lcl-pc-toggle-ink, #fff);
  font-size: var(--lcl-card-text, 1rem);
  /* Même graisse dans les deux états. L'état est porté par la pastille et par
     la couleur ; le faire porter AUSSI par la graisse épaissit le libellé actif
     et décale sa largeur optique à chaque bascule. */
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
  transition: color var(--lcl-dur-fast, 170ms) var(--lcl-ease, ease);
}

.QuPHYnHnq1nKKrgohYIl[data-on="true"] {
  color: var(--lcl-pc-toggle-on-ink, #2a2240);
}

/* — Corps — */

/*
 * Le titre est un `props.RichText` : son contenu arrive SLOTTÉ, donc
 * `.title p` ne matche rien. Voir `.title > slot::slotted()` plus bas (§ 6.3).
 */
.GhtkSxUJazCd1s_kr1_M {
  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);
  letter-spacing: 0.03em;
  /* La saisie reste en casse normale dans le panneau : on ne demande jamais de
     taper en majuscules (§ 3.3). */
  text-transform: uppercase;
}

.GhtkSxUJazCd1s_kr1_M > slot::slotted(*),
.N5nvT4zpahFvWXUWaMsS > 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.
 */
.HcaSndgdZ76BPaLoZFBg {
  max-width: 62ch;
  font-size: var(--lcl-card-text, 1rem);
  line-height: var(--lcl-card-lh, 1.55);
  color: var(--lcl-pc-ink-soft, rgba(42, 34, 64, 0.62));
}

/* L'espacement entre paragraphes passe par une grille sur le nœud slotté : ses
   `<p>` sont ses vrais enfants, et un `row-gap` n'est pas une propriété de
   boîte — donc rien que les marges négatives du site ne puissent absorber
   (§ 6.3, § 6.6). */
.HcaSndgdZ76BPaLoZFBg > slot::slotted(*) {
  display: grid !important;
  row-gap: 10px !important;
  margin: 0 !important;
}

/* — Tags — */

/* Le wrapper que Webflow interpose est un flex EN COLONNE : tant qu'il génère
   une boîte, les tags s'empilent quoi qu'ils déclarent. On le fait disparaître
   de l'arbre de boîtes (§ 6.4). */
.o8M9WDMsnZ7SSSrJxqWt {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.o8M9WDMsnZ7SSSrJxqWt > slot {
  display: contents;
}

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

/* — Filet — */

.XWyNph7ClBQgNRYxjyGC {
  height: 1px;
  margin: 2px 0;
  border: 0;
  background: var(--lcl-pc-rule, rgba(42, 34, 64, 0.16));
}

/* — Liste — */

.N5nvT4zpahFvWXUWaMsS {
  margin: 0;
  font-size: var(--lcl-card-text, 1rem);
  font-weight: 700;
  line-height: 1.4;
}

.UGIlLso2pYd3p5Q8PNZD {
  display: flex;
  flex-direction: column;
  gap: var(--lcl-pc-list-gap, 18px);
}

.UGIlLso2pYd3p5Q8PNZD > slot {
  display: contents;
}

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

/* — Bouton — */

.WVNE9Q_ofIvQRVkneDtX {
  display: flex;
  justify-content: center;
  margin-top: 6px;
}

/*
 * Le bouton est SLOTTÉ : c'est un élément Webflow ordinaire, stylé dans le
 * Designer. La carte ne le peint pas — elle ne peut pas, et c'est l'intérêt :
 * un bouton light DOM reste atteignable par les scripts du site (§ 6.12).
 *
 * Reste à faire disparaître le `<div>` colonne que Webflow interpose autour du
 * contenu d'un slot, sans quoi le bouton n'est pas l'item flex de `.footer`
 * mais l'enfant d'un wrapper qui, lui, l'est (§ 6.4).
 */
.WVNE9Q_ofIvQRVkneDtX > slot {
  display: contents;
}

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

/* — Réservé aux lecteurs d'écran — */

.nRJVXCPqO26H0PVfnw76 {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

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

@container (max-width: 560px) {
  .JNqx8wLDF1T4cCQAcfxu {
    /* Seuls les corps d'AFFICHAGE descendent d'un cran. Le texte courant ne
       bouge pas : c'est le point de toute cette échelle. */
    --lcl-card-title: 1.25rem;
    --lcl-card-amount: 1.875rem;
    /* Le barré, le suffixe et le badge descendent PLUS BAS que le montant :
       ce sont eux, et non lui, qui décident si la rangée de prix tient sur une
       ligne. Les rétrécir est ce qui achète cette ligne unique. */
    --lcl-card-amount-strike: 1.125rem;
    --lcl-pc-suffix-size: 0.8125rem;
    --lcl-pc-badge-size: 0.75rem;
    --lcl-pc-badge-pad: 3px 8px;
    --lcl-pc-pad: 20px;
    --lcl-pc-radius: 22px;
    --lcl-pc-gap: 18px;
    --lcl-pc-list-gap: 14px;
  }

  /* Même raison : à cette largeur, les gouttières de la rangée de prix comptent
     autant que les corps de texte. */
  .e95WGEmqu9bRimeo5z9I {
    gap: 6px 7px;
  }

  /* Le bouton cesse d'être centré et prend la largeur : à cette échelle, une
     pilule centrée laisse deux vides qui déséquilibrent la carte. Le bouton
     lui-même est SLOTTÉ : on ne peut que placer son wrapper (§ 6.12). */
  .WVNE9Q_ofIvQRVkneDtX {
    justify-content: stretch;
  }

  /*
   * ═══ LE SÉLECTEUR PASSE AU-DESSUS DU PRIX ═══
   *
   * `order` et non un changement de direction sur `.head` : `.head` est déjà en
   * `flex-wrap`, et `column-reverse` retournerait aussi l'alignement de tout ce
   * qu'on y ajouterait plus tard. Un ordre négatif plus une base de 100 % dit
   * exactement ce qu'on veut — le sélecteur d'abord, seul sur sa ligne.
   */
  .iG3X6tYZN7UjvmbKuS92 {
    order: -1;
    flex: 1 1 100%;
    /*
     * Le badge « économisez » repasse DANS LE FLUX, au-dessus du sélecteur.
     * En absolu il débordait du haut de la carte, puisque le sélecteur est
     * désormais le premier élément : il n'y a plus rien au-dessus de lui pour
     * l'accueillir.
     */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
  }

  .U8lwM9o6BUYpMqJOKRXx {
    position: static;
    right: auto;
    bottom: auto;
  }

  /* Plus fin : la piste perd un tiers de sa hauteur, et prend toute la largeur
     pour que les deux moitiés restent lisibles malgré tout. */
  .VS4ZXE4XL1a5Lfg10Lcz {
    width: 100%;
    padding: 2px;
  }

  .QuPHYnHnq1nKKrgohYIl {
    padding: 5px 10px;
    font-size: var(--lcl-card-text-sm, 0.875rem);
  }

  .BY2AD_1lFyZkJ7xdqQ2L {
    top: 2px;
    bottom: 2px;
    left: 2px;
  }

  .BY2AD_1lFyZkJ7xdqQ2L[data-on="2"] {
    right: 2px;
  }
}

/* — Mouvement réduit — */

@media (prefers-reduced-motion: reduce) {
  .QuPHYnHnq1nKKrgohYIl,
  .BY2AD_1lFyZkJ7xdqQ2L,
  .gphhloHeYMgQKpybxmIU {
    transition: none;
  }

  /* Les trois éléments se posent directement à leur état final. `animation:
     none` et pas une durée nulle : une durée nulle rejoue quand même le
     `from`, donc un saut visible. */
  .fkp_xl0yHxXZCgHD3IoN,
  .ZiYMOzWrJGrHlSIVeyJf,
  .hZKEjfYKb3kYL91aIZRL {
    animation: none;
  }
}