/* ============================================================
   Revalta by Altus Conseil — design-system/sections/pricing.css
   ------------------------------------------------------------
   Section tarifs — 2 (parfois 3) formules / offres.

   Class names — CONTRAT FIGÉ (consommé par Claude.ai) :
     .revalta-section-pricing
       .revalta-section-pricing-content
         .revalta-section-pricing-header
           .revalta-section-pricing-eyebrow
           .revalta-section-pricing-title
           .revalta-section-pricing-lede
         .revalta-section-pricing-grid
           .revalta-section-pricing-card
             .revalta-section-pricing-card-eyebrow
             .revalta-section-pricing-card-title
             .revalta-section-pricing-card-baseline
             .revalta-section-pricing-card-price-block
               .revalta-section-pricing-card-price
                 .revalta-section-pricing-card-price-figure
                 .revalta-section-pricing-card-price-per
               .revalta-section-pricing-card-price-sub
             .revalta-section-pricing-card-features (ul > li)
             .revalta-section-pricing-card-cta       (sur .revalta-btn)
           .revalta-section-pricing-card.revalta-section-pricing-card-featured
             .revalta-section-pricing-card-badge

   Variantes — A / B / C-flat / C, identiques au reste du système.
   La card phare contraste avec le fond de section.
   Le badge "Formule phare" est le seul bleu encre toléré.

   Requiert : colors_and_type.css, hero.css (.revalta-btn).
   ============================================================ */

/* ─── Container ────────────────────────────────────────────── */

.revalta-section-pricing {
  position: relative;
  background: var(--revalta-bg);
  color: var(--revalta-fg1);
  font-family: var(--revalta-font);
  font-weight: var(--revalta-w-light);
  isolation: isolate;
  padding-block: clamp(96px, 14vh, 180px);
  padding-inline: var(--revalta-web-pad-x);
}

/* Première section de la page : compensation globale du header fixe
   (body.revalta main > :first-child, colors_and_type.css). Rien ici. */

.revalta-section-pricing-content {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(64px, 8vh, 96px);
}

/* ─── Header ───────────────────────────────────────────────── */

.revalta-section-pricing-header {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 50vw;
}

.revalta-section-pricing-eyebrow {
  margin: 0;
  font-size: 13px;
  font-weight: var(--revalta-w-medium);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--revalta-accent);
}

.revalta-section-pricing-title {
  margin: 0;
  font-size: clamp(36px, 4.4vw, 64px);
  font-weight: var(--revalta-w-light);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--revalta-fg1);
  text-wrap: balance;
}

.revalta-section-pricing-lede {
  margin: 0;
  font-size: clamp(17px, 1.4vw, 20px);
  font-weight: var(--revalta-w-light);
  line-height: 1.5;
  color: var(--revalta-fg2);
  max-width: 60ch;
  text-wrap: pretty;
}

/* ─── Grille des cards ─────────────────────────────────────── */

.revalta-section-pricing-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;                           /* identité : cartes détachées, plus de grille hairline */
  background: transparent;
}
.revalta-section-pricing-grid:has(> :nth-child(3)) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ─── Card ─────────────────────────────────────────────────── */

.revalta-section-pricing-card {
  position: relative;
  /* Identité : alignement par sous-grille — 7 rangées (eyebrow · titre ·
     baseline · bloc prix · faits ou features · risque · bouton), le bouton
     calé en bas. Les marges internes cèdent la place au row-gap. */
  display: grid;
  grid-row: span 7;
  grid-template-rows: subgrid;
  row-gap: 18px;
  align-content: start;
  min-width: 0;
  padding: clamp(24px, 2.4vw, 32px);
  background: var(--revalta-light);
  border: 1px solid var(--revalta-sep);
  border-radius: var(--revalta-r-card);
  color: var(--revalta-fg1);
}
[data-revalta-band="white"] .revalta-section-pricing-card { background: var(--revalta-bg); border-color: transparent; }
.revalta-section-pricing-card > * { margin: 0; }
.revalta-section-pricing.revalta-section-inverse .revalta-section-pricing-card {
  background: rgba(245, 243, 238, 0.06);
  border-color: var(--revalta-sep-inverse);
  color: var(--revalta-fg1-inverse);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
}

.revalta-section-pricing-card-eyebrow {
  margin: 0;
  font-size: 12px;
  font-weight: var(--revalta-w-medium);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--revalta-fg2);
}
.revalta-section-pricing.revalta-section-inverse .revalta-section-pricing-card-eyebrow {
  color: var(--revalta-fg2-inverse);
}

.revalta-section-pricing-card-title {
  margin: 0;
  font-size: clamp(24px, 2.2vw, 32px);
  font-weight: var(--revalta-w-medium);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: inherit;
}

.revalta-section-pricing-card-baseline {
  margin: 0;
  font-size: clamp(15px, 1.1vw, 17px);
  font-weight: var(--revalta-w-light);
  line-height: 1.45;
  color: var(--revalta-fg2);
  max-width: 32ch;
}
.revalta-section-pricing.revalta-section-inverse .revalta-section-pricing-card-baseline {
  color: var(--revalta-fg2-inverse);
}

/* ─── Prix — block (price-line + sub) ──────────────────────── */

.revalta-section-pricing-card-price-block {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 0;
  border-block: 1px solid var(--revalta-sep);
}
/* Libellé optionnel « À partir de » (identité). */
.revalta-section-pricing-card-price-label {
  margin: 0;
  font-size: 12px;
  font-weight: var(--revalta-w-medium);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--revalta-fg2);
}
.revalta-section-pricing-card-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-variant-numeric: tabular-nums;
  margin: 0;
}
.revalta-section-pricing-card-price-figure {
  font-size: clamp(30px, 2.6vw, 38px);
  font-weight: var(--revalta-w-title);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--revalta-gold);        /* identité : l'or porte la valeur */
}
.revalta-section-pricing .revalta-section-pricing-card-featured .revalta-section-pricing-card-price-figure,
.revalta-section-pricing.revalta-section-inverse .revalta-section-pricing-card-price-figure { color: var(--revalta-gold-inverse); }
.revalta-section-pricing-card-price-per {
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: var(--revalta-w-light);
  color: var(--revalta-fg2);
}
.revalta-section-pricing.revalta-section-inverse .revalta-section-pricing-card-price-per {
  color: var(--revalta-fg2-inverse);
}

.revalta-section-pricing-card-price-sub {
  margin: 0;
  font-size: 13px;
  font-weight: var(--revalta-w-light);
  letter-spacing: 0;
  color: var(--revalta-fg2);
}
.revalta-section-pricing.revalta-section-inverse .revalta-section-pricing-card-price-sub {
  color: var(--revalta-fg2-inverse);
}

/* ─── Features list ────────────────────────────────────────── */

.revalta-section-pricing-card-features {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.revalta-section-pricing.revalta-section-inverse .revalta-section-pricing-card-features {
  border-top-color: var(--revalta-sep);
}

.revalta-section-pricing-card-features li {
  position: relative;
  padding-left: 24px;
  font-size: 15px;
  font-weight: var(--revalta-w-light);
  line-height: 1.55;
  color: var(--revalta-fg2);
  text-wrap: pretty;
}
.revalta-section-pricing.revalta-section-inverse .revalta-section-pricing-card-features li {
  color: var(--revalta-fg2-inverse);
}

/* Bullet — hairline horizontale courte. */
.revalta-section-pricing-card-features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 12px;
  height: 1px;
  background: var(--revalta-fg2);
}
.revalta-section-pricing.revalta-section-inverse .revalta-section-pricing-card-features li::before {
  background: var(--revalta-fg2-inverse);
}

.revalta-section-pricing-card-features li strong {
  display: block;
  font-weight: var(--revalta-w-medium);
  color: var(--revalta-fg1);
  margin-bottom: 2px;
}
.revalta-section-pricing.revalta-section-inverse .revalta-section-pricing-card-features li strong {
  color: var(--revalta-fg1-inverse);
}

/* ─── CTA en pied de card (taille réduite) ─────────────────── */
/* Surcharge le .revalta-btn par défaut pour rentrer visuellement
   dans la card : font-size 14px, padding compact 12px 24px.
   Se combine avec .revalta-btn.revalta-btn-primary OU .revalta-btn-secondary.
*/
.revalta-section-pricing-card > .revalta-btn,
.revalta-section-pricing-card-cta {
  align-self: end;         /* dernière rangée de la sous-grille : calé en bas */
  justify-self: stretch;
  width: 100%;
  justify-content: center;
  white-space: normal;
  text-align: center;
  margin-top: 4px;
}
.revalta-btn.revalta-section-pricing-card-cta {
  font-size: 15px;
  padding: 14px 22px;
}
.revalta-section-pricing-card-cta svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 1;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 200ms var(--revalta-ease);
}
.revalta-section-pricing-card-cta:hover svg,
.revalta-section-pricing-card-cta:focus-visible svg {
  transform: translateX(4px);
}

/* ────────────────────────────────────────────────────────────
   Card "phare" — contraste inversé.
   ──────────────────────────────────────────────────────────── */
.revalta-section-pricing .revalta-section-pricing-card-featured,
.revalta-section-pricing.revalta-section-inverse .revalta-section-pricing-card.revalta-section-pricing-card-featured {
  background: var(--revalta-bg-inverse);
  border-color: var(--revalta-bg-inverse);
  color: var(--revalta-fg1-inverse);
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}
.revalta-section-pricing .revalta-section-pricing-card-featured .revalta-section-pricing-card-eyebrow,
.revalta-section-pricing .revalta-section-pricing-card-featured .revalta-section-pricing-card-baseline,
.revalta-section-pricing .revalta-section-pricing-card-featured .revalta-section-pricing-card-price-per,
.revalta-section-pricing .revalta-section-pricing-card-featured .revalta-section-pricing-card-price-sub,
.revalta-section-pricing .revalta-section-pricing-card-featured .revalta-section-pricing-card-features li {
  color: var(--revalta-fg2-inverse);
}
.revalta-section-pricing .revalta-section-pricing-card-featured .revalta-section-pricing-card-features {
  border-top-color: var(--revalta-sep);
}
.revalta-section-pricing .revalta-section-pricing-card-featured .revalta-section-pricing-card-features li::before {
  background: var(--revalta-fg2-inverse);
}
.revalta-section-pricing .revalta-section-pricing-card-featured .revalta-section-pricing-card-features li strong {
  color: var(--revalta-fg1-inverse);
}
.revalta-section-pricing .revalta-section-pricing-card-featured .revalta-btn-primary {
  background: var(--revalta-fg1-inverse);
  color: var(--revalta-bg-inverse);
}
.revalta-section-pricing .revalta-section-pricing-card-featured .revalta-btn-primary:hover {
  background: var(--revalta-accent);
  color: var(--revalta-bg-inverse);
}

/* Inverse : la card phare reste marine (identité) ; ses textes gardent le papier. */
.revalta-section-pricing.revalta-section-inverse .revalta-section-pricing-card-featured {
  background: var(--revalta-bg-inverse);
  color: var(--revalta-fg1-inverse);
}
.revalta-section-pricing.revalta-section-inverse .revalta-section-pricing-card-featured .revalta-section-pricing-card-eyebrow,
.revalta-section-pricing.revalta-section-inverse .revalta-section-pricing-card-featured .revalta-section-pricing-card-baseline,
.revalta-section-pricing.revalta-section-inverse .revalta-section-pricing-card-featured .revalta-section-pricing-card-price-per,
.revalta-section-pricing.revalta-section-inverse .revalta-section-pricing-card-featured .revalta-section-pricing-card-price-sub,
.revalta-section-pricing.revalta-section-inverse .revalta-section-pricing-card-featured .revalta-section-pricing-card-features li {
  color: var(--revalta-fg2-inverse);
}
.revalta-section-pricing.revalta-section-inverse .revalta-section-pricing-card-featured .revalta-section-pricing-card-features {
  border-top-color: var(--revalta-sep);
}
.revalta-section-pricing.revalta-section-inverse .revalta-section-pricing-card-featured .revalta-section-pricing-card-features li::before {
  background: var(--revalta-fg2-inverse);
}
.revalta-section-pricing.revalta-section-inverse .revalta-section-pricing-card-featured .revalta-section-pricing-card-features li strong {
  color: var(--revalta-fg1-inverse);
}
.revalta-section-pricing.revalta-section-inverse .revalta-section-pricing-card-featured .revalta-btn-primary {
  background: var(--revalta-fg1-inverse);
  color: var(--revalta-bg-inverse);
}
.revalta-section-pricing.revalta-section-inverse .revalta-section-pricing-card-featured .revalta-btn-primary:hover {
  background: var(--revalta-gold-inverse);
  color: var(--revalta-bg-inverse);
}

/* ─── Badge "Formule phare" — pill bleu encre, top-right ───────── */
/* Spec : 11px, uppercase, letter-spacing 0.18em, color --revalta-accent,
   padding 4px 12px, border 1px solid --revalta-accent, top-right de la card.
   Seul bleu encre de la section (au-delà de l'eyebrow). */
.revalta-section-pricing-card-badge {
  position: absolute;
  top: clamp(20px, 2vw, 28px);
  right: clamp(20px, 2vw, 28px);
  display: inline-block;
  padding: 6px 12px;
  border: 0;
  border-radius: var(--revalta-r-pill);
  font-size: 11px;
  font-weight: var(--revalta-w-medium);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--revalta-bg-inverse);
  background: var(--revalta-gold-inverse);   /* identité : badge pilule or */
}

/* ────────────────────────────────────────────────────────────
   Variante inverse — fond marine (C-flat / C)
   ──────────────────────────────────────────────────────────── */
.revalta-section-pricing.revalta-section-inverse {
  background: var(--revalta-bg-inverse);
  color: var(--revalta-fg1-inverse);
}
.revalta-section-pricing.revalta-section-inverse .revalta-section-pricing-title { color: var(--revalta-fg1-inverse); }
.revalta-section-pricing.revalta-section-inverse .revalta-section-pricing-lede  { color: var(--revalta-fg2-inverse); }
.revalta-section-pricing.revalta-section-inverse .revalta-section-pricing-grid  { background: transparent; }

/* C-flat (marine plat, sans image) — la card standard passe en --revalta-light pour
   se détacher du fond marine de la section ; la card phare conserve sa bascule
   en papier (déjà gérée plus haut). Sans cette règle, le premier card serait
   de la même teinte que le fond — illisible comme objet. */
.revalta-section-pricing.revalta-section-inverse:not([data-revalta-broll]) .revalta-section-pricing-card:not(.revalta-section-pricing-card-featured) {
  background: rgba(245, 243, 238, 0.06);
}

.revalta-section-pricing.revalta-section-inverse .revalta-btn-primary {
  background: var(--revalta-fg1-inverse);
  color: var(--revalta-bg-inverse);
}
.revalta-section-pricing.revalta-section-inverse .revalta-btn-primary:hover {
  background: var(--revalta-gold-inverse);
  color: var(--revalta-bg-inverse);
}

/* ────────────────────────────────────────────────────────────
   Variante broll — fond image + voile B/C + noise
   ──────────────────────────────────────────────────────────── */
.revalta-section-pricing[data-revalta-broll] {
  background-image: var(--revalta-broll);
  background-size: cover;
  background-position: center;
}
.revalta-section-pricing[data-revalta-broll]::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--revalta-veil);
  z-index: 0;
}
.revalta-section-pricing.revalta-section-inverse[data-revalta-broll]::before {
  background: var(--revalta-veil-inverse);
}
.revalta-section-pricing[data-revalta-broll]::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='5' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.22;
  mix-blend-mode: overlay;
  z-index: 1;
  pointer-events: none;
}

/* Card standard sur fond image (B et C avec broll) — effet « verre » :
   on retire le fond opaque et on applique le même blur que le header
   au scroll, pour laisser transparaître l'image floutée derrière la card.
   La card phare garde son fond plein (contraste fort) ; le hairline du
   grid reste visible parce que la grille porte le séparateur en background. */
.revalta-section-pricing[data-revalta-broll] .revalta-section-pricing-card:not(.revalta-section-pricing-card-featured) {
  background: transparent;
  -webkit-backdrop-filter: blur(20px) saturate(140%);
          backdrop-filter: blur(20px) saturate(140%);
}

/* B (papier + image) — sur la card frostée au-dessus de l'image sombre,
   les textes secondaires en fg2 (#5A6579) tombent contre un fond gris
   moyen et perdent leur lisibilité. On les remonte en --revalta-light pour
   tenir au-dessus du blur. Le titre et la figure (qui héritent de fg1 =
   encre) restent inchangés. */
.revalta-section-pricing:not(.revalta-section-inverse)[data-revalta-broll] .revalta-section-pricing-card:not(.revalta-section-pricing-card-featured) {
  color: var(--revalta-light);
}
.revalta-section-pricing:not(.revalta-section-inverse)[data-revalta-broll] .revalta-section-pricing-card:not(.revalta-section-pricing-card-featured) .revalta-section-pricing-card-eyebrow,
.revalta-section-pricing:not(.revalta-section-inverse)[data-revalta-broll] .revalta-section-pricing-card:not(.revalta-section-pricing-card-featured) .revalta-section-pricing-card-baseline,
.revalta-section-pricing:not(.revalta-section-inverse)[data-revalta-broll] .revalta-section-pricing-card:not(.revalta-section-pricing-card-featured) .revalta-section-pricing-card-price-per,
.revalta-section-pricing:not(.revalta-section-inverse)[data-revalta-broll] .revalta-section-pricing-card:not(.revalta-section-pricing-card-featured) .revalta-section-pricing-card-price-sub,
.revalta-section-pricing:not(.revalta-section-inverse)[data-revalta-broll] .revalta-section-pricing-card:not(.revalta-section-pricing-card-featured) .revalta-section-pricing-card-features li {
  color: var(--revalta-light);
}
.revalta-section-pricing:not(.revalta-section-inverse)[data-revalta-broll] .revalta-section-pricing-card:not(.revalta-section-pricing-card-featured) .revalta-section-pricing-card-features li strong {
  color: var(--revalta-light);
}
.revalta-section-pricing:not(.revalta-section-inverse)[data-revalta-broll] .revalta-section-pricing-card:not(.revalta-section-pricing-card-featured) .revalta-section-pricing-card-features li::before {
  background: var(--revalta-light);
}
.revalta-section-pricing:not(.revalta-section-inverse)[data-revalta-broll] .revalta-section-pricing-card:not(.revalta-section-pricing-card-featured) .revalta-section-pricing-card-features {
  border-top-color: var(--revalta-sep);
}

/* C (encre + image, 3 colonnes) — la grille porte 3 cards :
   middle = phare (papier plein), first + last = non-phare.
   Les deux reçoivent déjà l'effet verre via la règle ci-dessus. On donne
   en plus à la DERNIÈRE colonne un fond --revalta-light pour créer un
   rythme card-flotté / card-papier / card-pleine-encre. Le blur reste
   déclaré (innocuité visuelle) pour préserver une règle commune.

   :nth-last-child(1) plutôt que :last-child pour rester explicite sur
   l'intention « dans une grille de 3 ». */
.revalta-section-pricing.revalta-section-inverse[data-revalta-broll] .revalta-section-pricing-grid:has(> :nth-child(3)) .revalta-section-pricing-card:last-child {
  background: var(--revalta-light);
}

/* ─── Animation d'entrée ───────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .revalta-section-pricing-header,
  .revalta-section-pricing-card {
    opacity: 0;
    animation: revalta-pricing-fade-in 600ms var(--revalta-ease) both;
  }
  .revalta-section-pricing-header { animation-delay: 0ms; }
  .revalta-section-pricing-card:nth-child(1) { animation-delay: 120ms; }
  .revalta-section-pricing-card:nth-child(2) { animation-delay: 200ms; }
  .revalta-section-pricing-card:nth-child(3) { animation-delay: 280ms; }
}
@keyframes revalta-pricing-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Responsive ───────────────────────────────────────────── */
@media (max-width: 1100px) {
  .revalta-section-pricing-grid:has(> :nth-child(3)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .revalta-section-pricing-grid,
  .revalta-section-pricing-grid:has(> :nth-child(3)) {
    grid-template-columns: minmax(0, 1fr);
  }
  .revalta-section-pricing-card { grid-row: auto; grid-template-rows: none; }
}
@media (max-width: 640px) {
  .revalta-section-pricing {
    padding-block: clamp(72px, 12vh, 120px);
    padding-inline: 22px;
  }
  .revalta-section-pricing-header { max-width: 90vw; }
  .revalta-section-pricing-content { gap: 48px; }
  .revalta-section-pricing-card { padding: 24px 22px; }
  .revalta-section-pricing-card-badge {
    top: 20px;
    right: 20px;
  }
}

/* BASCULE B — la card phare est une surface inverse : accent et filet suivent la surface, pas la section.
   Le thème est porté par l'attribut data-revalta-surface="inverse|default" sur la card (scope de tokens),
   et non par un sélecteur composé. */
[data-revalta-surface="inverse"] { --revalta-accent: var(--revalta-accent-inverse); --revalta-sep: var(--revalta-sep-inverse); }
[data-revalta-surface="default"] { --revalta-accent: var(--revalta-accent-default); --revalta-sep: var(--revalta-sep-default); }
.revalta-section-pricing.revalta-section-inverse .revalta-section-pricing-card-featured .revalta-btn-primary:hover { color: var(--revalta-bg-inverse); }

/* ─── Filet d'ouverture de l'en-tête (principe Openstone, Home validée) ── */
.revalta-section-pricing-header{border-top:1px solid var(--revalta-sep);padding-top:28px}

/* ============================================================
   Variante « cartes produit illustrées » — étape 5 (27/09/2026)
   ------------------------------------------------------------
   Une image, trois faits, une mention de risque, un bouton par carte.
   Cartes détachées (--revalta-light, filet) au lieu de la grille hairline.
   Survol : data-revalta-lift (couche motion). Modèle : Swissquote, Openstone.

     .revalta-section-pricing.revalta-section-pricing-illustrated
       … .revalta-section-pricing-card[data-revalta-lift]
            .revalta-section-pricing-card-media > img        (16:10, pleine opacité — variante E, jamais de voile)
            .revalta-section-pricing-card-body
              -card-eyebrow · -card-title · -card-baseline
              dl.revalta-section-pricing-card-facts > div > dt + dd   (trois faits)
              p.revalta-section-pricing-card-risk                    (mention réglementaire, fg2, jamais en accent)
              a.revalta-btn.revalta-btn-secondary.revalta-section-pricing-card-cta
   ============================================================ */
.revalta-section-pricing-illustrated .revalta-section-pricing-grid{gap:24px;background:transparent}
.revalta-section-pricing-illustrated .revalta-section-pricing-card{display:flex;flex-direction:column;grid-row:auto;grid-template-rows:none;padding:0;background:var(--revalta-light);border:1px solid var(--revalta-sep);border-radius:var(--revalta-r-card);overflow:hidden;min-width:0}
.revalta-section-pricing-illustrated.revalta-section-inverse .revalta-section-pricing-card{background:var(--revalta-light);color:var(--revalta-fg1)}
.revalta-section-pricing-card-media{aspect-ratio:16/10;overflow:hidden;background:var(--revalta-bg-inverse)}
.revalta-section-pricing-card-media img{display:block;width:100%;height:100%;object-fit:cover}
.revalta-section-pricing-card-body{display:flex;flex-direction:column;flex:1;padding:clamp(24px,2.4vw,32px)}
.revalta-section-pricing-illustrated .revalta-section-pricing-card-eyebrow{color:var(--revalta-accent)}
.revalta-section-pricing-illustrated .revalta-section-pricing-card-title{margin-top:12px;font-size:clamp(22px,1.9vw,26px)}
.revalta-section-pricing-illustrated .revalta-section-pricing-card-baseline{margin-top:10px;max-width:none}
.revalta-section-pricing-card-facts{margin:24px 0 0;display:flex;flex-direction:column;border-top:1px solid var(--revalta-sep)}
.revalta-section-pricing-card-facts>div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--revalta-sep);font-size:14px;line-height:1.4}
.revalta-section-pricing-card-facts dt{margin:0;color:var(--revalta-fg2)}
.revalta-section-pricing-card-facts dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.revalta-section-pricing-card-risk{margin:16px 0 0;font-size:12px;line-height:1.55;color:var(--revalta-fg2);text-wrap:pretty}
.revalta-section-pricing-illustrated .revalta-btn.revalta-section-pricing-card-cta{margin-top:24px;width:100%;justify-content:space-between;white-space:normal;text-align:left;padding:14px 18px}
.revalta-section-pricing-illustrated .revalta-section-pricing-card-title{margin-top:12px}
.revalta-section-pricing-illustrated .revalta-section-pricing-card-baseline{margin-top:10px}
@media (max-width:1100px){.revalta-section-pricing-illustrated .revalta-section-pricing-grid:has(> :nth-child(3)){grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){.revalta-section-pricing-illustrated .revalta-section-pricing-grid:has(> :nth-child(3)){grid-template-columns:1fr}}

/* ============================================================
   Identité (28/09/2026) — carte produit de la home
   ------------------------------------------------------------
   Faits avec icône : dl.revalta-section-pricing-card-facts > div > svg + span > dt + dd
   (grille 16px | texte, icône trait 16 px accent, « dt · dd » sur une ligne).
   Les faits sans icône (variante illustrée) gardent leur ligne dt | dd.
   Bouton : .revalta-btn-gold, pleine largeur, centré (règle générale des cartes).
   ============================================================ */
.revalta-section-pricing-card-facts:has(> div > svg){margin:0;display:grid;gap:10px;border:0}
.revalta-section-pricing-card-facts > div:has(> svg){display:grid;grid-template-columns:16px minmax(0,1fr);gap:10px;align-items:start;justify-content:start;padding:0;border:0;font-size:15px;line-height:1.45}
.revalta-section-pricing-card-facts > div > svg{width:16px;height:16px;margin-top:3px;flex:none;color:var(--revalta-accent);stroke:currentColor;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.revalta-section-pricing-card-facts > div:has(> svg) dt{display:inline;margin:0;color:var(--revalta-fg2)}
.revalta-section-pricing-card-facts > div:has(> svg) dt::after{content:" \00B7 "}
.revalta-section-pricing-card-facts > div:has(> svg) dd{display:inline;margin:0;text-align:left}
.revalta-section-pricing-card-featured .revalta-section-pricing-card-facts > div > svg{color:var(--revalta-accent-inverse)}
.revalta-section-pricing-card-featured .revalta-section-pricing-card-facts dt,.revalta-section-pricing-card-featured .revalta-section-pricing-card-risk{color:var(--revalta-fg2-inverse)}
.revalta-section-pricing-card-risk{margin:0;font-size:12px;line-height:1.55;color:var(--revalta-fg2);text-wrap:pretty}