/* ===========================================================================
   FIVERTU — DESIGN SYSTEM · COMPOSANTS (composants.css) · version 1 (novembre 2026)
   ---------------------------------------------------------------------------
   Les éléments réutilisables d'une page à l'autre. Se charge après socle.css,
   header.css et footer.css, avant le fichier propre à la page.
     · Titres de section ........ .panel, .panel-head, h2.sec-title (+ <em>), .sec-intro
     · Pied de section .......... .sec-foot (lien fléché centré)
     · Étiquette cobalt ......... .tag
     · Comparatif ............... .versus-cap, .panes / .pane (ordinateur), .vs (≤ 900 px)
     · Offres ................... .levitation / .offer (prix, paiement, reflet qui tourne)
     · Carte titre + étapes ..... .split, .title-card, .stack / .layer
     · FAQ en accordéon ......... .fq-a, .faq-list / .faq-item (faq.js)
     · Police des données ....... prix, n° d'étape, micro-capitales
     · Survol des cartes, Lumière des cartes (.lumiere), mouvement réduit
   Toutes les valeurs viennent des tokens de socle.css.
   =========================================================================== */


/* ===========================================================================
   TITRES DE SECTION
   =========================================================================== */
.panel { position: relative; }   /* enveloppe d'une section : en-tête + contenu (v122 : plus de bloc autour des sections) */
.pane, .offer, .title-card { -webkit-tap-highlight-color: transparent; }   /* cartes : pas de surbrillance au toucher */
h2.sec-title {
  font-size: var(--fs-h2);
  font-weight: 500;
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display);
  text-wrap: balance;
}
/* 2e partie des titres : romain, couleur --em-2 */
h1 em, h2 em {
  font-style: normal;
  font-weight: 400;
  color: var(--em-2);
  -webkit-text-fill-color: var(--em-2);
}
.sec-intro { color: var(--fg-3); font-size: var(--fs-lead); line-height: 1.72; }
.sec-intro strong { color: var(--fg); font-weight: 600; }

/* En-tête de section (.panel-head) : le titre en deux tons (2e partie dans <em>),
   puis un texte court, centrés l'un sous l'autre. Ni sur-titre ni bouton. */
.panel-head {
  /* v122.1 — sections sans bloc : titre, texte et phrase forte centrés, l'un sous l'autre */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: var(--container);
  margin: 0 auto clamp(40px, 5vw, 64px);
  text-align: center;
}
.panel-head .sec-title { margin: 0; color: var(--fg); text-align: center; }
.panel-head .sec-title em { display: inline; }         /* v122.2 — titre sur une ligne… */
@media (max-width: 640px) { .panel-head .sec-title em { display: block; } }   /* …sauf sur téléphone : une phrase par ligne */
.panel-head .sec-intro {
  max-width: 58ch;
  margin: 0;
  font-size: var(--fs-intro);
  line-height: 1.7;
  text-align: center;
  text-wrap: balance;
  text-wrap: pretty;
}
/* « Chute » (v113) : la dernière phrase du chapô en exergue, sous un filet cobalt */

/* Pied de section : un lien fléché centré sous le contenu (« Discover why Fivertu »,
   « See the full process »…). Classe générique pour les nouvelles pages : .sec-foot */
.sec-foot, .panes-foot, .stack-foot, .offers-foot { display: flex; justify-content: center; padding-top: var(--sp-block); }

/* Étiquette en cadre cobalt — la règle de référence pour les nouvelles pages : .tag
   (même dessin que les titres du méga menu, du pied de page et du Bento). Les étiquettes
   de la home gardent leurs classes (.versus-cap, .offer-tag, .pane-chip, .bento-lbl). */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  color: var(--mm-lbl);
  background: rgb(var(--acc-ch) / 0.06);
  border: 1px solid rgb(var(--acc-ch) / 0.45);
  border-radius: var(--radius-md);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.35;
  text-transform: uppercase;
}


/* ===========================================================================
   COMPARATIF — Fivertu face aux alternatives (« What we do » sur la home)
   Ordinateur : trois colonnes (.panes), FIVERTU au centre et en avant.
   ≤ 900 px : tableau compact (.vs), un critère par ligne.
   =========================================================================== */
.versus-cap {
  /* v115 — même cadre cobalt que les titres du méga menu et du menu mobile (.mm-group-lbl) */
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: calc(100% - 32px);
  margin: 0 auto clamp(32px, 3.7vw, 48px);
  padding: 4px 8px;
  color: var(--mm-lbl);
  background: rgb(var(--acc-ch) / 0.06);
  border: 1px solid rgb(var(--acc-ch) / 0.45);
  border-radius: var(--radius-md);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-caps-tight);
  text-align: center;
  text-transform: uppercase;
}

/* v120 — style « Focus » : FIVERTU plus large et en avant, concurrents plus discrets ;
   les lignes sont séparées par l'espace seul ; une icône devant chaque valeur
   (✓ cobalt chez FIVERTU, ✕ gris pour une valeur négative, – gris pour une valeur mitigée) */
.panes {
  display: grid;
  grid-template-columns: 0.9fr 1.25fr 0.9fr;
  gap: clamp(14px, 2vw, 24px);
  align-items: center;
}
.pane {
  position: relative;
  overflow: hidden;
  padding: clamp(18px, 1.9vw, 26px) clamp(16px, 1.7vw, 22px);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  transition: transform var(--t-base), border-color var(--t-fast), background-color var(--t-fast), color var(--t-fast);
}
.pane-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 6px;
  padding-bottom: 14px;
  color: var(--fg);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-body);
  font-weight: 600;
}
.pane-row { position: relative; isolation: isolate; padding: 11px 0; }
/* Ligne survolée : la même ligne s'éclaire dans les trois colonnes (interactions.js) */
.pane-row::before {
  content: "";
  position: absolute;
  inset: 0 -12px;
  z-index: -1;
  border-radius: var(--radius-sm);
  background: rgb(var(--tint-ch) / 0.05);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-fast);
}
.pane-row:last-child::before { bottom: -12px; }
.pane.center .pane-row::before { background: rgb(var(--acc-ch) / 0.07); }
.pane-row.is-row::before { opacity: 1; }
.pane-row:last-child { padding-bottom: 0; }
.pane-row .lbl {
  display: block;
  margin-bottom: 4px;
  color: var(--fg-3);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pane-row .val { display: flex; align-items: flex-start; gap: 7px; color: var(--fg-3); font-size: var(--fs-sm); line-height: 1.5; transition: color var(--t-fast); }
.pane-ic { width: 15px; height: 15px; flex: none; margin-top: 3px; color: var(--fg-2); }
.pane-ic.ok { color: var(--cobalt-lt); }
.pane:not(.center) .pane-row.is-row .val { color: var(--fg); }

/* --- Colonne FIVERTU : niveau Feature, surélevée --- */
.pane.center {
  /* v122.2 — même couleur que les autres cartes (Process + Lumière, section 14b) ; un cadre
     cobalt fixe et un léger halo la gardent en avant */
  z-index: 1;
  padding: clamp(24px, 2.4vw, 32px) clamp(20px, 2.1vw, 28px);
  color: var(--fg);
  background-color: var(--process);
  border-color: rgb(var(--acc-ch) / 0.6);
  box-shadow: 0 0 0 4px rgb(var(--cobalt-ch) / 0.12), 0 24px 50px -24px rgb(var(--shadow-ch) / 0.7);
}
.pane.center .pane-title { color: var(--fg); border-bottom-color: var(--line); font-size: var(--fs-lead); }
.pane.center .pane-row .lbl { color: var(--mm-lbl); }
.pane.center .pane-row .val { color: var(--fg); font-size: var(--fs-body); font-weight: 600; }
.pane-chip {
  padding: 3px 7px;
  color: var(--mm-lbl);
  background: rgb(var(--acc-ch) / 0.06);
  border: 1px solid rgb(var(--acc-ch) / 0.45);
  border-radius: var(--radius-md);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pane.center .pane-title,
.pane.center .pane-row .lbl,
.pane.center .pane-row .val,
.pane.center .pane-chip {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* v122.2 — tablette et téléphone : tableau compact (C3). Un critère par ligne, les trois
   acteurs côte à côte ; FIVERTU au centre sur une carte Lumière continue, le nom du
   critère écrit dans la carte. Les trois colonnes restent au-dessus de 900 px. */
.vs { display: none; }
@media (max-width: 900px) {
  .panes { display: none; }
  .vs { position: relative; display: block; max-width: 560px; margin: 0 auto; padding-top: 10px; }
  .vs-card {
    position: absolute;
    top: 0;
    bottom: -8px;
    left: calc(31.25% + 4px);
    width: calc(37.5% - 8px);
    border-radius: 12px;
    background-color: var(--process);
    background-image: radial-gradient(90% 60% at 30% 0%, rgb(var(--lum-acc-ch) / 0.165), transparent 70%), radial-gradient(70% 50% at 100% 100%, rgb(var(--lum-halo-ch) / 0.15), transparent 70%);
    border: 1px solid rgb(var(--acc-ch) / 0.6);
    box-shadow: 0 24px 50px -20px rgb(var(--shadow-ch) / 0.8), 0 0 0 4px rgb(var(--cobalt-ch) / 0.12);
  }
  .vs-table { position: relative; width: 100%; table-layout: fixed; border-collapse: collapse; }
  .vs-caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .vs-c1, .vs-c3 { width: 31.25%; }
  .vs-c2 { width: 37.5%; }
  .vs-table thead th { padding: 10px 4px 12px; color: var(--fg-3); font-size: 13px; font-weight: 500; text-align: center; }
  .vs-table thead th.vs-fv { color: var(--fg); font-size: 14px; font-weight: 600; letter-spacing: 0.03em; }
  .vs-crit th { padding: 12px 0 6px; font-weight: 500; text-align: center; }
  .vs-crit th span {
    display: inline-block;
    max-width: calc(37.5% - 24px);
    color: var(--mm-lbl);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1.35;
    text-transform: uppercase;
  }
  .vs-row td { padding: 0 4px 16px; color: var(--fg-3); font-size: 13.5px; line-height: 1.32; text-align: center; vertical-align: top; overflow-wrap: anywhere; hyphens: auto; }   /* v123 — césure propre (Standard-ized) plutôt qu'une coupure brute sur les petits écrans */
  .vs-row td.vs-fv { padding-inline: 12px; color: var(--fg); font-size: 15px; font-weight: 600; }
  .vs-row td > span { display: block; }
  .vs-ic { display: block; width: 18px; height: 18px; margin: 0 auto 6px; color: var(--fg-3); }
  .vs-ic.ok, .vs-fv .vs-ic { color: var(--cobalt-lt); }
  .panes-foot { padding-top: calc(var(--sp-block) + 8px); }
}
/* Téléphone : le nom du critère passe sur toute la largeur, en étiquette (fond opaque, cadre cobalt)
   posée sur la carte FIVERTU : une ligne au lieu de quatre, tableau plus court. Les cinq étiquettes
   ont la même largeur (celle de la plus longue, « Capital transferred to the provider ») : leurs bords
   gauche et droit sont alignés. */
@media (max-width: 640px) {
  .vs-crit th { padding: 14px 0 10px; }
  .vs-crit th span { display: block; width: min(100%, 25.5em); max-width: none; margin: 0 auto; padding: 4px 8px; background: var(--bg); border: 1px solid rgb(var(--acc-ch) / 0.45); border-radius: var(--radius-md); }
}
html[data-theme="light"] .vs-card { background-image: none; border-color: rgb(var(--cobalt-ch) / 0.6); box-shadow: 0 0 0 4px rgb(var(--cobalt-ch) / 0.08); }   /* clair : ni lueur ni ombre portée, le halo cobalt suffit */
html[data-theme="light"] .pane.center { box-shadow: 0 0 0 4px rgb(var(--cobalt-ch) / 0.12); }   /* clair : colonne FIVERTU sans ombre portée (une tache grise sur fond blanc), halo cobalt gardé */

/* ===========================================================================
   OFFRES — cartes SAA / TAA (strictement identiques ; reflet cobalt qui tourne, plus bas)
   Conteneur .levitation (deux colonnes, une seule ≤ 860 px) ; carte .offer.
   =========================================================================== */
.levitation {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 2.5vw, 32px);
  align-items: stretch;
}
.offer {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding: var(--sp-card-lg);
  color: var(--process-fg);
  /* v122.1 — même couleur que les autres cartes (Process + lueur Lumière, section 14b) ;
     la bordure cobalt qui tourne les distingue (section 14c) */
  background-color: var(--process);
  border: 1px solid var(--line-pill);
  border-radius: var(--radius-md);
  transition: transform var(--t-base), border-color var(--t-fast), background-color var(--t-fast), color var(--t-fast);
}
.offer-tag {
  /* même cadre cobalt que les titres du méga menu et l'étiquette du comparatif */
  padding: 4px 10px;
  color: var(--mm-lbl);
  background: rgb(var(--acc-ch) / 0.06);
  border: 1px solid rgb(var(--acc-ch) / 0.45);
  border-radius: var(--radius-md);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}
.offer h3 {
  color: var(--fg);
  font-size: var(--fs-h3);
  font-weight: 500;
  letter-spacing: var(--ls-heading);
  line-height: 1.1;
}
.offer-price { display: flex; align-items: baseline; gap: 10px; }
.offer-price .amount {
  color: var(--fg);
  -webkit-text-fill-color: var(--fg);
  font-size: var(--fs-display);
  font-weight: 500;
  letter-spacing: var(--ls-display);
  line-height: 1;
  font-feature-settings: "tnum";
}
.offer-price .period { color: var(--fg-3); font-size: var(--fs-sm); }
.offer-payment { margin-top: -14px; color: var(--fg-2); font-size: var(--fs-xs); }
.offer-payment .offer-refund { display: block; margin-top: 2px; }   /* v123 — remboursement sous le paiement (étape 3) */
@media (max-width: 480px) { .sec-foot .link-arrow, .offers-foot .link-arrow { white-space: normal; text-align: center; } }   /* téléphone : un lien long passe sur deux lignes plutôt que de déborder */
.offer p.desc { flex: 1; color: var(--fg-3); font-size: var(--fs-body); line-height: 1.7; }
/* « Learn more » : le bouton fléché standard du site (comme « Discover why Fivertu ») */
@media (max-width: 860px) { .levitation { grid-template-columns: 1fr; } }


/* ===========================================================================
   CARTE TITRE + ÉTAPES EMPILÉES — niveau Process (« How it works » sur la home)
   Une carte titre qui reste fixe à gauche, des cartes qui s'empilent à droite
   au défilement.
   =========================================================================== */
.split {
  display: grid;
  grid-template-columns: minmax(250px, 30fr) minmax(0, 70fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
}
.split-side { position: sticky; top: 92px; min-width: 0; }   /* même accroche que la 1re carte empilée */
.split-main { min-width: 0; }
/* Carte titre : même hauteur que les cartes profils, titre en haut, texte en bas
   (comme les cartes profils) ; les deux cartes titres ont la même forme. */
.title-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--card-h);
  overflow: hidden;
  isolation: isolate;
  padding: var(--sp-card);
  color: var(--process-fg);
  background: var(--process);
  border: 1px solid var(--line-pill);
  border-radius: var(--radius-md);
  cursor: default;
  transition: transform var(--t-base), border-color var(--t-fast), background-color var(--t-fast), color var(--t-fast);
}
.title-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--title-card-rim, rgb(var(--tint-ch) / 0.035));
}
.title-card > * { position: relative; z-index: 1; }
.title-card-h {
  margin: 0;
  color: var(--process-fg);
  font-size: var(--fs-h2);
  font-weight: 500;
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display);
  text-wrap: balance;
}
.title-card-deck {
  color: var(--fg);
  font-size: var(--fs-lead);
  font-weight: 400;
  letter-spacing: var(--ls-heading);
  line-height: 1.28;
  text-wrap: balance;
}
.title-card-deck em { display: block; color: var(--fg-3); font-style: normal; }

.stack { display: flex; flex-direction: column; gap: clamp(16px, 2vw, 24px); }
.layer {
  position: sticky;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: clamp(24px, 3.5vw, 56px);
  padding: var(--sp-card) var(--sp-card-lg);
  color: var(--process-fg);
  background: var(--process);
  border: 1px solid var(--line-pill);
  border-radius: var(--radius-md);
  /* recouvrement de l'empilement : --cover (0 → 1) est posé en JS */
  transform: scale(calc(1 - var(--cover, 0) * 0.035));
  transform-origin: 50% 0%;
  will-change: transform;
  transition: transform var(--t-base), border-color var(--t-fast), background-color var(--t-fast), color var(--t-fast);
}
.layer:nth-child(1) { top: calc(92px + 0 * 14px); }
.layer:nth-child(2) { top: calc(92px + 1 * 14px); }
.layer:nth-child(3) { top: calc(92px + 2 * 14px); }
.layer:nth-child(4) { top: calc(92px + 3 * 14px); }
.layer:nth-child(5) { top: calc(92px + 4 * 14px); }
.layer:nth-child(6) { top: calc(92px + 5 * 14px); }
.layer > * { opacity: calc(1 - var(--cover, 0) * 0.55); transition: opacity 220ms var(--ease); }
.layer .lno {
  min-width: 1.6em;
  color: var(--step-idle);
  -webkit-text-fill-color: var(--step-idle);
  transition: opacity 220ms var(--ease), color var(--t-base), -webkit-text-fill-color var(--t-base);
  font-size: var(--fs-display);
  font-weight: 500;
  letter-spacing: var(--ls-display);
  line-height: 1;
  font-feature-settings: "tnum";
}
/* Étape en cours (arrivée en haut de la pile, interactions.js) : numéro en cobalt */
.layer.is-current .lno { color: var(--step-on); -webkit-text-fill-color: var(--step-on); }
.layer h3 { margin-bottom: 8px; color: var(--process-fg); font-size: var(--fs-h3); font-weight: 500; letter-spacing: var(--ls-heading); }
.layer p { max-width: 560px; color: var(--fg-3); font-size: var(--fs-body); line-height: 1.66; }

@media (max-width: 980px) {
  .split { grid-template-columns: 1fr; }
  .split-side { position: static; }
  .title-card { min-height: 0; gap: clamp(16px, 2vw, 24px); }   /* une colonne : pas de carte voisine à aligner */
}
/* Une colonne (tablette, téléphone) : la carte titre reste fixée sous l'en-tête pendant que les
   étapes s'empilent juste en dessous, puis la carte et la pile repartent ensemble.
   interactions.js mesure la carte (--split-side-h) et la distance qui sépare le départ de la pile
   du bas du bloc (--pin-cut) : le bloc se termine à cet instant, sans rien changer à la mise en page
   (la marge négative est rendue sous le bloc). Sans JavaScript, ou sur un écran trop bas,
   la carte défile normalement. */
@media (max-width: 980px) and (min-height: 600px) {
  .split.is-pinned { --pin-top: calc(var(--header-block) + 8px); margin-bottom: var(--pin-cut, 0px); }
  .split.is-pinned .split-side { position: sticky; top: var(--pin-top); z-index: 2; }
  .split.is-pinned .split-main { margin-bottom: calc(-1 * var(--pin-cut, 0px)); }
  .split.is-pinned .layer { --pin-layer: calc(var(--pin-top) + var(--split-side-h, 0px) + 12px); }
  .split.is-pinned .layer:nth-child(1) { top: var(--pin-layer); }
  .split.is-pinned .layer:nth-child(2) { top: calc(var(--pin-layer) + 1 * 14px); }
  .split.is-pinned .layer:nth-child(3) { top: calc(var(--pin-layer) + 2 * 14px); }
  .split.is-pinned .layer:nth-child(4) { top: calc(var(--pin-layer) + 3 * 14px); }
  .split.is-pinned .layer:nth-child(5) { top: calc(var(--pin-layer) + 4 * 14px); }
  .split.is-pinned .layer:nth-child(6) { top: calc(var(--pin-layer) + 5 * 14px); }
}
@media (max-width: 720px) {
  .layer { grid-template-columns: 1fr; gap: 12px; transform: none; }
  .layer > * { opacity: 1; }
}
/* v122 — téléphone : numéro à gauche du titre, cartes plus serrées (≈ 1,4 écran au lieu de 2,1) */
@media (max-width: 640px) {
  .title-card { padding: 24px 20px; }
  .layer { grid-template-columns: auto 1fr; align-items: start; gap: 16px; padding: 20px 20px 22px; }
  .layer .lno { min-width: 1.3em; font-size: 30px; line-height: 1.05; }
  .layer h3 { margin-bottom: 6px; font-size: 20px; }
  .layer p { font-size: var(--fs-sm); line-height: 1.6; }
}


/* ===========================================================================
   FAQ — forme A « Deux colonnes » (v121)
   Titre, lien vers la page FAQ et ligne de contact à gauche (collants) ;
   accordéon à droite, une seule réponse ouverte à la fois (faq.js).
   =========================================================================== */
.fq-a { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(48px, 7vw, 120px); align-items: start; }
.fq-side { position: sticky; top: calc(var(--header-block) + 24px); }
.fq-side .sec-title { margin: 0; color: var(--fg); }
.fq-side .sec-title em { display: block; }
@media (max-width: 640px) { .fq-side .sec-title em { display: inline; } }   /* téléphone : « Questions, answered. » sur une ligne */
.faq-all { margin-top: 32px; }
.faq-note { margin: 18px 0 0; color: var(--fg-2); font-size: var(--fs-sm); line-height: 1.6; }
.faq-note a { color: var(--fg-3); text-decoration: underline; text-decoration-color: var(--line-pill); text-underline-offset: 3px; transition: color var(--t-fast); }
.faq-note a:hover { color: var(--fg); }
.faq-list { border-top: 1px solid var(--line-soft); }
.faq-item { border-bottom: 1px solid var(--line-soft); }
.faq-q { margin: 0; font: inherit; }
.faq-q button {
  display: flex;
  align-items: baseline;
  gap: 18px;
  width: 100%;
  padding: 24px 0;
  color: var(--fg);
  background: none;
  border: 0;
  font-family: inherit;
  font-size: clamp(17px, 1.35vw, 19px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.005em;
  text-align: left;
  cursor: pointer;
}
.faq-q button:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 4px; border-radius: var(--radius-sm); }
.faq-qt { flex: 1; transition: color var(--t-fast); }
.faq-q button:hover .faq-qt { color: var(--accent); }
.faq-ic { position: relative; flex: none; align-self: center; width: 14px; height: 14px; }
.faq-ic::before, .faq-ic::after { content: ""; position: absolute; left: 0; top: 50%; width: 14px; height: 1.5px; margin-top: -0.75px; background: var(--fg-3); transition: transform var(--t-fast), background var(--t-fast); }
.faq-ic::after { transform: rotate(90deg); }
.faq-item.is-open .faq-ic::after { transform: rotate(0deg); }
.faq-item.is-open .faq-ic::before, .faq-item.is-open .faq-ic::after { background: var(--cobalt-lt); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 320ms var(--ease); }
.faq-a > div { overflow: hidden; }
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-a p { max-width: 64ch; margin: 0; padding: 0 40px 26px 0; color: var(--fg-3); font-size: var(--fs-body); line-height: 1.7; }
@media (max-width: 900px) {
  .fq-a { grid-template-columns: 1fr; row-gap: 36px; }
  .fq-side { position: static; }
  .faq-all { margin-top: 24px; }
}
@media (max-width: 640px) {
  .fq-side { text-align: center; }   /* v122.2 — comme les autres titres sur téléphone */
}
@media (max-width: 640px) {
  .faq-a p { padding-right: 8px; }
}


/* ===========================================================================
   CHIFFRES ET ÉTIQUETTES — une seule police (Instrument Sans)
   Placés après les composants pour l'emporter à spécificité égale.
   - Grands chiffres (prix, n° d'étape) : chiffres de même largeur (tabular-nums).
   - Étiquettes en cadre cobalt : UN SEUL RÉGLAGE pour toutes (.tag et les étiquettes
     de la home, du méga menu, du menu mobile et du pied de page).
   =========================================================================== */
.offer-price .amount,
.layer .lno {
  font-size: calc(var(--fs-display) * .94);
  font-weight: 400;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.tag, .versus-cap, .offer-tag, .pane-chip, .bento-lbl, .sf-h,
.mm-group-lbl, .nav-dropdown-menu .rr-lbl, .nav-dropdown-menu .di-tag {
  padding: 4px 8px;
  font-family: var(--ff);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.35;
  text-transform: uppercase;
}


/* ===========================================================================
   SURVOL DES CARTES — un seul comportement (pointeur fin uniquement)
   Cartes posées seules : elles se soulèvent de 4 px et leur filet se teinte
   de cobalt. Cartes empilées (étapes) : filet seulement, elles ne bougent pas.
   =========================================================================== */
@media (hover: hover) and (pointer: fine) {
  .pane.left:hover, .pane.right:hover, .offer:hover, .title-card:hover {
    transform: translateY(var(--lift-card));
  }
  .pane.center:hover { transform: translateY(var(--lift-card)); }
  .pane:hover, .offer:hover, .title-card:hover, .layer:hover {
    border-color: var(--card-hover-edge);
  }
}


/* ===========================================================================
   LUMIÈRE DES CARTES (v115, v122.1)
   Lueur cobalt en haut à gauche, navy en bas à droite, posée en background-image :
   la couleur de la carte ne change pas. Token --lum-glow (le thème clair le
   redéfinit). Pour une nouvelle carte : classe .lumiere (après sa couleur de fond).
   Placée après les cartes : un « background » raccourci plus haut l'effacerait.
   =========================================================================== */
.lumiere, .title-card, .layer, .offer, .pane.center {
  background-image: var(--lum-glow);
  background-size: 100% 100%, 100% 100%;
  background-position: 0 0;
  background-repeat: no-repeat;
}


/* ===========================================================================
   OFFRES SAA / TAA — bordure cobalt qui tourne (v122.1, fx.js)
   Un reflet cobalt fait lentement le tour de la bordure (un tour en 18 s), les
   deux offres décalées d'un demi-tour. Il ne tourne que lorsque les offres sont
   à l'écran ; mouvement réduit : bordure simple, sans reflet.
   =========================================================================== */
@property --ring-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.offer::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: -1px;
  padding: 1.5px;
  pointer-events: none;
  border-radius: inherit;
  background: conic-gradient(from var(--ring-a), transparent 0 52%, var(--ring-1) 68%, var(--ring-2) 84%, var(--ring-3) 92%, transparent 99%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: ring-turn 18s linear infinite;
  animation-play-state: paused;
}
.offer + .offer::before { animation-delay: -9s; }
.levitation.is-on .offer::before { animation-play-state: running; }
@keyframes ring-turn { to { --ring-a: 360deg; } }
@media (prefers-reduced-motion: reduce) { .offer::before { display: none; } }


/* ===========================================================================
   MOUVEMENT RÉDUIT — composants (en fin de fichier : passe devant leurs transitions)
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .pane, .pane.center, .layer { transform: none; }
  .pane, .offer, .layer, .title-card { transition: none; }
  .layer > * { opacity: 1; }
  /* pas de soulèvement */
  .pane:hover, .pane.center:hover, .offer:hover, .title-card:hover { transform: none; }
  /* FAQ : ouverture immédiate */
  .faq-a, .faq-ic::before, .faq-ic::after { transition: none; }
}