/* ==========================================================================
   IMPRA — SYSTÈME TARIFAIRE
   Chargé sur les trois pages où un prix s'affiche : l'accueil, /tarifs et
   le tunnel d'essai. Les montants n'y sont jamais écrits : ils viennent de
   js/tarifs.data.mjs, source unique, et sont posés par js/tarifs.impra.js.

   §1  LA BASCULE MENSUEL / ANNUEL
   §2  LES TROIS CARTES
   §3  LE BANDEAU GROUPE
   §4  LE COMPARATEUR
   ========================================================================== */

/* ==========================================================================
   1. LA BASCULE
   Un contrôle segmenté bâti sur deux <input type="radio"> : l'état coché,
   le clavier et les lecteurs d'écran viennent du navigateur, pas d'un
   script. Le curseur glisse en CSS, à partir de :checked — il est donc
   juste avant même que le JavaScript ne s'exécute.

   Les deux moitiés sont strictement égales (1fr chacune) : le curseur fait
   exactement 50 % et n'a aucune position à calculer. C'est ce qui garantit
   le zéro décalage promis, y compris au premier rendu.
   ========================================================================== */
.bascule {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  padding: 4px;
  border: 1px solid var(--impra-border);
  border-radius: var(--radius-buttons);
  background: var(--impra-surface);
  /* Centrée dans un conteneur flex comme dans une grille : .section-flow
     est un flex column, où justify-self ne s'applique pas. */
  align-self: center;
  justify-self: center;
  max-width: 100%;
}
.bascule input {
  position: absolute;
  width: 1px; height: 1px; margin: 0; padding: 0;
  opacity: 0; pointer-events: none;
}
.bascule label {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  /* 44 px : la cible tactile minimale. À 40, la bascule se manquait au
     doigt — relevé au balayage responsive, pas à l'œil. */
  min-height: 44px;
  padding: 0 var(--space-20);
  border-radius: var(--radius-buttons);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-semibold);
  color: var(--impra-muted);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--motion-base) var(--ease-standard);
}
.bascule input:checked + label { color: var(--impra-navy); }
.bascule input:focus-visible + label {
  outline: 2px solid var(--impra-blue);
  outline-offset: 2px;
}
/* Le curseur : une seule surface, translatée. Aucune boîte ne change de
   taille, donc rien ne bouge autour. */
.bascule__curseur {
  position: absolute;
  z-index: 0;
  top: 4px; bottom: 4px; left: 4px;
  width: calc(50% - 4px);
  border-radius: var(--radius-buttons);
  background: var(--impra-blue-soft);
  transition: transform var(--motion-slow) var(--ease-standard);
}
.bascule input:last-of-type:checked ~ .bascule__curseur { transform: translateX(100%); }

/* Le badge n'est pas une décoration : il porte le seul argument de
   l'annuel. Il reste lisible même quand l'option n'est pas choisie. */
.bascule__badge {
  padding: 2px var(--space-8);
  border-radius: var(--radius-buttons);
  background: var(--impra-blue);
  color: var(--impra-surface);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.01em;
}
/* Sur l'option choisie, le fond du curseur est déjà bleu clair : le badge
   plein doublerait le signal (DA §5). Il s'allège. */
.bascule input:checked + label .bascule__badge {
  background: color-mix(in srgb, var(--impra-blue) 16%, var(--impra-surface));
  color: var(--impra-blue);
}

@media (max-width: 620px) {
  .bascule { width: 100%; }
  .bascule label { padding: 0 var(--space-12); font-size: 13px; }
  .bascule__badge { font-size: 10px; padding: 2px 6px; }
}

/* ==========================================================================
   2. LES TROIS CARTES
   Une promesse, un prix, une action, puis ce que la formule contient. Cet
   ordre est délibéré : le prix ne se lit pas avant qu'on sache à qui la
   formule s'adresse, et l'action se prend avant la liste — qui sert à
   confirmer, pas à décider.
   ========================================================================== */
.offres {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-24);
  align-items: stretch;
}

.offre {
  display: flex;
  flex-direction: column;
  padding: var(--space-32);
  border: 1px solid var(--impra-border);
  border-radius: var(--radius-cards);
  background: var(--impra-surface);
}

/* Propulsion : bordure d'accent, ombre portée, badge. Trois marques, pas
   un changement d'échelle — une carte agrandie déforme la comparaison des
   prix, qui est précisément ce qu'on demande au lecteur de faire. */
.offre--lead {
  border: var(--border-accent);
  box-shadow: var(--shadow-card);
}

.offre__tete { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-12); }
.offre__nom {
  margin: 0;
  font-family: var(--font-geometric);
  font-size: var(--text-subheading);
  font-weight: var(--weight-semibold);
  color: var(--impra-navy);
}
.offre__badge {
  padding: 3px var(--space-12);
  border-radius: var(--radius-buttons);
  background: var(--impra-blue-soft);
  color: var(--impra-blue);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.offre__promesse {
  margin: var(--space-8) 0 0;
  font-size: var(--text-body-sm);
  line-height: 1.5;
  color: var(--impra-muted);
  /* Deux lignes réservées : les trois promesses n'ont pas la même longueur
     et les trois prix doivent rester sur la même ligne d'horizon. */
  min-height: 2.9em;
}

.offre__prix {
  margin-top: var(--space-24);
  padding-top: var(--space-24);
  border-top: var(--border-hairline);
}
.offre__montant {
  display: flex;
  align-items: baseline;
  gap: var(--space-8);
  margin: 0;
  font-variant-numeric: var(--font-numeric);
}
.offre__chiffre {
  font-family: var(--font-geometric);
  font-size: clamp(38px, 3.1vw, 46px);
  font-weight: var(--weight-semibold);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--impra-navy);
}
/* Le « ≈ » d'Intégrale en annuel : 1 090 ne se divise pas en douze. Il est
   dit, discrètement, plutôt que laissé sous-entendre. */
.offre__environ {
  font-family: var(--font-geometric);
  font-size: clamp(22px, 1.8vw, 26px);
  font-weight: var(--weight-regular);
  line-height: 1;
  color: var(--impra-muted-soft);
}
.offre__unite {
  font-size: var(--text-body-sm);
  font-weight: var(--weight-medium);
  line-height: 1.25;
  color: var(--impra-muted);
}

/* Les deux lignes de vérité du prix. Elles existent dans les DEUX cycles :
   c'est ce qui rend la bascule strictement sans décalage, et c'est aussi
   ce qui fait que le mensuel annonce lui-même l'économie de l'annuel. */
.offre__notes {
  margin-top: var(--space-12);
  /* Deux lignes dans les deux cycles ; la troisième est réservée pour les
     largeurs où « 390 € HT facturés une fois par an. » passe à la ligne.
     Mesuré carte par carte : la hauteur ne bouge pas d'un pixel entre
     mensuel et annuel. */
  min-height: 3.4em;
}
.offre__note {
  margin: 0;
  font-size: var(--text-caption);
  line-height: 1.55;
  color: var(--impra-muted);
}
.offre__note--gain { color: var(--impra-blue); font-weight: var(--weight-semibold); }
.offre__note + .offre__note { margin-top: 2px; }

.offre__cta { margin-top: var(--space-24); width: 100%; justify-content: center; }

.offre__socle {
  margin: var(--space-24) 0 var(--space-12);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  color: var(--impra-navy);
}
.offre__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-8);
  font-size: var(--text-body-sm);
  color: var(--impra-muted);
}
.offre__liste li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
  line-height: 1.5;
}
.offre__liste svg { width: 18px; height: 18px; margin-top: 2px; color: var(--impra-blue); }
.offre__liste b { color: var(--impra-navy); font-weight: var(--weight-semibold); font-variant-numeric: var(--font-numeric); }

/* Tablette : deux colonnes désaccordent la comparaison à trois. La pile
   reste préférable — Propulsion garde sa place au milieu. */
@media (max-width: 1023px) {
  .offres { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin-inline: auto; }
  .offre__promesse { min-height: 0; }
}
@media (max-width: 620px) {
  .offre { padding: var(--space-24); }
  .offre__chiffre { font-size: 40px; }
}

/* Le socle, en une ligne. Il tient la promesse « tout compris » sans
   reprendre les 200 px de carte qu'il occupait : le détail vit sur
   /tarifs, où il a une section à lui. */
.socle-ligne {
  margin: 0;
  max-width: 92ch;
  margin-inline: auto;
  text-align: center;
  font-size: var(--text-body-sm);
  line-height: 1.7;
  color: var(--impra-muted);
}
.socle-ligne b { color: var(--impra-navy); font-weight: var(--weight-semibold); }

/* ==========================================================================
   3. LE BANDEAU GROUPE
   Une quatrième carte identique aurait menti : Groupe ne se choisit pas
   d'un clic, il se discute. Une bande, donc, sous les trois formules —
   même famille, autre nature.
   ========================================================================== */
.groupe-bande {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-32);
  padding: var(--space-32) var(--space-40);
  border-radius: var(--radius-cards);
  background: var(--surface-2);
  color: var(--color-paper-white);
}
.groupe-bande__k {
  margin: 0 0 var(--space-8);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-lavender-mist);
}
.groupe-bande__t {
  margin: 0;
  font-family: var(--font-geometric);
  font-size: var(--text-heading-sm);
  font-weight: var(--weight-regular);
  color: var(--color-paper-white);
}
.groupe-bande__p {
  margin: var(--space-8) 0 0;
  max-width: 56ch;
  font-size: var(--text-body-sm);
  line-height: 1.6;
  color: var(--color-lavender-mist);
}
@media (max-width: 900px) {
  .groupe-bande { grid-template-columns: minmax(0, 1fr); padding: var(--space-24); }
  .groupe-bande .btn { justify-self: start; }
}

/* ==========================================================================
   4. LE COMPARATEUR
   Sept catégories, un en-tête qui suit le défilement, et sur mobile des
   panneaux dépliables — jamais un tableau à faire glisser latéralement.
   ========================================================================== */
.cmp2 { display: grid; gap: var(--space-12); }

.cmp2__cat { border: 1px solid var(--impra-border); border-radius: var(--radius-cards); background: var(--impra-surface); overflow: hidden; }
.cmp2__titre { margin: 0; }
.cmp2__bouton {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-20) var(--space-24);
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  color: var(--impra-navy);
  text-align: left;
  cursor: pointer;
}
.cmp2__bouton svg { transition: transform var(--motion-base) var(--ease-standard); }
.cmp2__cat[data-ouvert="true"] .cmp2__bouton svg { transform: rotate(180deg); }
.cmp2__corps { display: none; padding: 0 var(--space-24) var(--space-8); }
.cmp2__cat[data-ouvert="true"] .cmp2__corps { display: block; }

.cmp2__table { width: 100%; border-collapse: collapse; font-size: var(--text-body-sm); }
.cmp2__table th, .cmp2__table td { padding: var(--space-12) var(--space-12); text-align: left; vertical-align: top; }
.cmp2__table thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--impra-surface);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--impra-muted);
  border-bottom: 1px solid var(--impra-border);
}
.cmp2__table tbody th { font-weight: var(--weight-regular); color: var(--impra-muted); width: 34%; }
.cmp2__table tbody td { color: var(--impra-navy); font-variant-numeric: var(--font-numeric); }
.cmp2__table tbody tr + tr th,
.cmp2__table tbody tr + tr td { border-top: 1px solid color-mix(in srgb, var(--impra-border) 60%, var(--impra-surface)); }
/* La colonne Propulsion garde dans le tableau la place qu'elle a dans les
   cartes : troisième enfant de chaque rangée, en-tête compris. Sans ce
   repère, l'œil qui descend sept catégories perd la colonne recommandée. */
.cmp2__table thead th:nth-child(3),
.cmp2__table tbody td:nth-child(3) {
  background: color-mix(in srgb, var(--impra-blue-soft) 40%, transparent);
}
/* « Inclus » ne prend pas le vert de réussite : chez IMPRA les couleurs
   d'état portent un fait métier, jamais une case cochée (DA §4). Le navy
   affirme, le gris retire — c'est assez pour lire une colonne. */
.cmp2__oui { color: var(--impra-navy); font-weight: var(--weight-semibold); }
.cmp2__non { color: var(--impra-muted-soft); }

/* Mobile : la même information, en fiches par formule. Aucun tableau ne
   survit à 390 px de large avec quatre colonnes. */
@media (max-width: 767px) {
  .cmp2__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .cmp2__table tbody th { display: block; width: auto; padding-bottom: var(--space-4); color: var(--impra-navy); font-weight: var(--weight-semibold); }
  .cmp2__table tbody td { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: var(--space-12); padding: 4px var(--space-12); }
  .cmp2__table tbody td::before { content: attr(data-l); color: var(--impra-muted); font-weight: var(--weight-medium); }
  .cmp2__table tbody tr { display: block; padding-block: var(--space-12); }
  .cmp2__table tbody tr + tr { border-top: 1px solid var(--impra-border); }
  .cmp2__table tbody tr + tr th, .cmp2__table tbody tr + tr td { border-top: 0; }
  .cmp2__table tbody td:nth-child(3) { background: none; }
}

/* ==========================================================================
   5. L'AIGUILLAGE
   Un tableau se lit ; une contrainte se reconnaît. Quatre seuils, repris
   à la ligne près des formules ci-dessus : on choisit sans comparer.
   ========================================================================== */
.aiguillage {
  padding: var(--space-24) var(--space-32);
  border: 1px solid var(--impra-border);
  border-radius: var(--radius-cards);
  background: var(--impra-surface);
}
.aiguillage__k {
  margin: 0 0 var(--space-16);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--impra-muted);
}
.aiguillage__l {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-24);
}
.aiguillage__l li {
  display: grid; gap: var(--space-4);
  padding-left: var(--space-16);
  border-left: 2px solid var(--impra-blue-soft);
  font-size: var(--text-body-sm);
  line-height: 1.45;
  color: var(--impra-muted);
}
.aiguillage__l b { color: var(--impra-navy); font-weight: var(--weight-medium); }
.aiguillage__l span { color: var(--impra-blue); font-weight: var(--weight-semibold); }
@media (max-width: 900px) {
  .aiguillage { padding: var(--space-20); }
  .aiguillage__l { grid-template-columns: minmax(0, 1fr); gap: var(--space-16); }
}

/* ==========================================================================
   6. CE QUE L'ESSAI ENGAGE
   Trois règles, celles que le tunnel applique réellement. Écrites avant
   d'y entrer, elles ne sont pas une découverte à l'étape 3.
   ========================================================================== */
.reassurance {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-32);
}
.reassurance li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: var(--space-16);
  align-items: start;
}
.reassurance__ic {
  grid-row: 1 / span 2;
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: var(--radius-cards);
  background: var(--impra-blue-soft);
  color: var(--impra-blue);
}
.reassurance__ic svg { width: 21px; height: 21px; }
.reassurance b {
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  color: var(--impra-navy);
}
.reassurance span:last-child {
  margin-top: 2px;
  font-size: var(--text-body-sm);
  line-height: 1.55;
  color: var(--impra-muted);
}
@media (max-width: 900px) { .reassurance { grid-template-columns: minmax(0, 1fr); gap: var(--space-20); } }