/* Écran Offres, fenêtre de résiliation, accueil d'une nouvelle offre, badge de l'en-tête (retours du test du 06/10 et
   consignes de Martin du soir, dossier/24 D8, D9, D10, D13). L'écran est refait le 11/11/2026 sur la maquette validée par
   Martin pour la grille de novembre (dossier/39-GRILLE-NOVEMBRE.md § 4) : deux bascules, trois cartes, le compteur « une
   marque = un pays », la bande Gratuit, le tableau replié, les questions fréquentes. DA v3 « Noir » : le noir est la
   scène, les cartes se détachent par leur bord et leur arête haute ; le bleu marque la formule mise en avant (son bord,
   son étiquette, son bouton), la formule en cours porte une étiquette blanche, jamais une couleur seule ; rester est le
   bouton bleu, résilier un lien gris, sans rouge. Jetons : ../assets/tokens.css, aucune valeur de couleur écrite ici.
   Mouvement coupé sous prefers-reduced-motion. L'évolution des prix (une fois, inscrits d'avant) : offres-evolution.css. */

/* ---------- Badge d'offre de l'en-tête, à côté de « Espace » ---------- */
.badge-offre {
  display: inline-flex; align-items: center; gap: 6px; flex: none; height: 24px; padding: 0 9px; border-radius: var(--rayon-pilule);
  background: var(--bleu-voile); border: 1px solid var(--bleu-trait); color: var(--bleu-clair); text-decoration: none;
  font-family: var(--police-mono); font-size: 11px; font-weight: var(--graisse-forte); letter-spacing: 0.08em; line-height: 1; white-space: nowrap;
  transition: background var(--duree-rapide) var(--courbe), color var(--duree-rapide) var(--courbe), border-color var(--duree-rapide) var(--courbe);
}
.badge-offre:hover { background: var(--voile-3); border-color: var(--trait-fort); color: var(--encre); text-decoration: none; }
.badge-offre-mention { font-family: var(--police); font-size: 11px; font-weight: var(--graisse-moyenne); letter-spacing: 0; color: var(--encre-2); }

/* ---------- Titres et rythme de l'écran ---------- */
/* Le titre tient sur deux lignes équilibrées, comme sur la maquette : le faisceau garde sa place à sa droite. */
.ecran-offres .ecran-tete .titre { max-width: 17ch; text-wrap: balance; }
.ecran-offres .section { margin-top: clamp(56px, 7vw, 96px); }
.offres-h2 { max-width: 20ch; font-size: var(--taille-h2); line-height: var(--interligne-h2); letter-spacing: var(--approche-h2); color: var(--encre); text-wrap: balance; }
.offres-intro { margin-top: 16px; max-width: 58ch; font-size: 1rem; line-height: 1.55; color: var(--encre-2); text-wrap: pretty; }

/* ---------- La formule en cours, dite telle qu'elle est ---------- */
.offres-formule {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin: 0 0 30px; padding: 18px 20px;
  border-radius: var(--rayon-4); background: var(--voile-1); border: 1px solid var(--trait-fort); box-shadow: var(--trait-lumiere);
}
.offres-formule-texte { display: grid; gap: 6px; min-width: 0; }
.offres-formule-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.offres-formule-nom { font-size: 22px; line-height: 1.2; letter-spacing: -0.02em; color: var(--encre); }
/* Sur un téléphone, ce que compte la formule passe sur deux lignes : équilibrées, jamais « IA » seul sous son nombre. */
.offres-formule-contenu { font-size: var(--taille-corps); color: var(--encre); text-wrap: balance; }
.offres-formule-echeance, .offres-formule-note { max-width: 78ch; font-size: var(--taille-petit); line-height: 1.5; color: var(--encre-2); text-wrap: pretty; }
.offres-formule > .btn { flex: none; }

/* ---------- Les deux bascules : les IA suivies, le paiement ---------- */
.offres-choix { display: flex; flex-wrap: wrap; gap: 16px 28px; margin: 0 0 38px; }
.offres-choix-groupe { display: grid; gap: 8px; min-width: 0; }
.offres-choix-nom { font-size: var(--taille-etiquette); font-weight: var(--graisse-moyenne); color: var(--encre-2); }
.segments.offres-segments { gap: 4px; padding: 4px; border-radius: 14px; background: var(--voile-1); }
.offres-segments button {
  display: inline-flex; align-items: center; gap: 10px; height: auto; min-height: 44px; padding: 0 16px; border-radius: 10px;
  font-size: var(--taille-corps); text-align: left;
}
.offres-segments button[aria-pressed="true"] { background: var(--bouton-primaire-fond); color: var(--bouton-primaire-encre); box-shadow: none; }
/* Le segment choisi garde l'anneau de focus au clavier (contrôle visuel du 11/11 : `box-shadow: none` l'effaçait). */
.offres-segments button[aria-pressed="true"]:focus-visible { box-shadow: var(--anneau-focus); }
.offres-segments small { font-size: var(--taille-etiquette); font-weight: var(--graisse-corps); opacity: 0.8; }
.offres-pastilles { display: inline-flex; flex: none; gap: 4px; }
.offres-remise { padding: 2px 7px; border-radius: var(--rayon-pilule); background: var(--mieux-fond); color: var(--mieux); font-size: var(--taille-etiquette); white-space: nowrap; }
.offres-segments button[aria-pressed="true"] .offres-remise { background: color-mix(in srgb, var(--mieux) 26%, transparent); color: var(--bouton-primaire-encre); }

/* ---------- Les trois cartes ---------- */
.offres-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; }
.formule {
  position: relative; display: grid; align-content: start; gap: 16px; min-width: 0; padding: 30px 24px 24px; border-radius: var(--rayon-5);
  background: linear-gradient(180deg, var(--voile-2), var(--voile-1)); border: 1px solid var(--trait); box-shadow: var(--trait-lumiere);
  transition: transform var(--duree-normale) var(--expo), border-color var(--duree-rapide) var(--courbe);
}
.formule:hover { transform: translateY(-3px); border-color: var(--trait-fort); }
.formule:focus { outline: none; }
.formule:focus-visible { box-shadow: var(--anneau-focus); }
/* La formule mise en avant (celle d'au-dessus, ou celle que le compteur conseille) : un bord bleu et sa lueur. */
.formule[data-avant="true"] { border-color: var(--bleu-trait); box-shadow: var(--trait-lumiere), var(--lueur); }
/* La formule en cours : un bord clair et son étiquette blanche ; le bleu reste à la formule mise en avant. */
.formule[data-actuelle="true"] { border-color: var(--trait-fort); box-shadow: var(--trait-lumiere); }
.formule-tag {
  position: absolute; top: -12px; left: 22px; max-width: calc(100% - 44px); padding: 4px 11px; border-radius: var(--rayon-pilule);
  border: 1px solid var(--trait-fort); background: var(--panneau); font-size: var(--taille-etiquette); font-weight: var(--graisse-moyenne); line-height: 1.3; color: var(--encre-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.formule[data-avant="true"] .formule-tag { background: var(--bleu-profond); border-color: transparent; color: var(--encre); }
.formule[data-actuelle="true"] .formule-tag { background: var(--bouton-primaire-fond); border-color: transparent; color: var(--bouton-primaire-encre); }
.formule-nom { font-size: 22px; line-height: 1.2; letter-spacing: -0.02em; color: var(--encre); }
.formule-pour { margin-top: -10px; min-height: 42px; font-size: 14px; line-height: 1.5; color: var(--encre-2); text-wrap: pretty; }
.formule-prix-bloc { min-width: 0; }
.formule-prix { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px 10px; white-space: nowrap; }
.formule-montant { font-size: clamp(2.9rem, 2.3rem + 1.7vw, 3.6rem); font-weight: var(--graisse-moyenne); line-height: 0.92; letter-spacing: -0.045em; color: var(--encre); }
.formule-devise { align-self: flex-start; font-size: 1.5rem; line-height: 1.1; color: var(--encre-2); }
.formule-cote { display: grid; padding-bottom: 5px; font-size: var(--taille-petit); line-height: 1.25; color: var(--encre-2); }
.formule-barre { padding-bottom: 5px; font-size: 17px; font-weight: var(--graisse-moyenne); color: var(--encre-2); }
.formule-barre s { text-decoration-thickness: 1px; }
.formule-facture { margin-top: -8px; min-height: 40px; font-size: var(--taille-petit); line-height: 1.5; color: var(--encre-2); text-wrap: pretty; }
.formule-facture b { color: var(--mieux); }
.formule-facture:empty { display: none; }
.formule-puces { display: flex; flex-wrap: wrap; gap: 6px; }
.formule-puces[hidden], .formule-reperes[hidden], .formule-ia[hidden] { display: none; }
/* Une pastille de remise peut être longue : elle passe à la ligne dans sa carte au lieu de déborder (retour du 23/10). */
.formule .badge { height: auto; min-height: 22px; max-width: 100%; padding-block: 4px; line-height: 1.35; white-space: normal; }
/* Les paliers de Business (13/11/2026) : sous chaque grand nombre, dans le bloc des chiffres, une petite rangée de
   pastilles (28 px) ; le nombre au-dessus suit le choix. Au doigt, 44 px (plus bas). */
.formule-paliers { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; margin-top: 8px; padding: 2px; border: 1px solid var(--trait); border-radius: var(--rayon-pilule); background: var(--voile-1); }
.formule-paliers button {
  min-height: 22px; padding: 0 2px; border: 0; border-radius: var(--rayon-pilule); background: transparent; color: var(--encre-2);
  font-size: var(--taille-etiquette); font-weight: var(--graisse-moyenne); line-height: 1; cursor: pointer; transition: background var(--duree-rapide) var(--courbe), color var(--duree-rapide) var(--courbe);
}
.formule-paliers button:hover { color: var(--encre); background: var(--voile-2); }
.formule-paliers button:focus-visible { box-shadow: var(--anneau-focus); border-radius: var(--rayon-pilule); }
.formule-paliers button[aria-pressed="true"] { background: var(--bouton-primaire-fond); color: var(--bouton-primaire-encre); }
/* Deux liens de texte dans la carte : « Compter mes marques », et le supplément des 5 IA. Des boutons : ils agissent ici. */
.formule-compter, .formule-ia {
  justify-self: start; margin-top: -6px; padding: 4px 0; border: 0; background: none; text-align: left; font-size: var(--taille-petit); line-height: 1.4; color: var(--bleu-texte);
  text-decoration: underline; text-decoration-color: var(--bleu-trait); text-underline-offset: 3px; cursor: pointer;
}
.formule-compter:hover, .formule-ia:hover { text-decoration-color: currentColor; }
/* Les deux chiffres qui comptent (12/11/2026) : les marques suivies et les questions par marque, en grand, côte à côte ;
   dessous, ce que cela fait lire chaque lundi. */
.formule-exemple { display: grid; gap: 10px; padding: 14px 16px; border: 1px solid var(--trait); border-radius: 14px; background: var(--voile-1); }
.formule-chiffres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.formule-chiffre { display: grid; grid-template-rows: 1fr auto; min-width: 0; } /* les pastilles des deux chiffres sur la même ligne */
.formule-chiffre-valeur { display: grid; gap: 2px; min-width: 0; }
/* Les chiffres et « Compter mes marques » (Business) : une seule zone ; le lien tient sur une ligne sous le bloc. */
.formule-mesure { display: grid; gap: 8px; min-width: 0; }
.formule-mesure .formule-compter { margin-top: 0; font-size: var(--taille-etiquette); }
.formule-chiffre + .formule-chiffre { padding-left: 12px; border-left: 1px solid var(--trait); }
.formule-chiffre b { font-size: clamp(1.7rem, 1.4rem + 0.9vw, 2.1rem); font-weight: var(--graisse-moyenne); line-height: 1; letter-spacing: -0.035em; color: var(--encre); }
.formule-chiffre-valeur span { font-size: var(--taille-etiquette); line-height: 1.35; color: var(--encre-2); }
.formule-reponses { font-size: var(--taille-etiquette); line-height: 1.45; color: var(--encre-2); }
.formule[data-avant="true"] .formule-exemple { border-color: var(--bleu-trait); background: var(--bleu-voile); }
/* La rangée des logos des IA mesurées : un jeton blanc par IA (les logos sont dessinés pour un fond clair), la phrase à côté. */
.formule-ia-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: -4px; }
.ia-jetons { display: inline-flex; align-items: center; }
.ia-jeton { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--panneau); }
.ia-jeton + .ia-jeton { margin-left: -6px; }
.ia-jeton img { width: 16px; height: 16px; }
.ia-jeton .pastille { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.ia-legende { min-width: 0; font-size: var(--taille-etiquette); line-height: 1.35; color: var(--encre-2); }
.formule-reperes { display: grid; gap: 8px; font-size: var(--taille-etiquette); color: var(--encre-2); }
/* Un libellé long (« Gratuit à partir du 6 novembre 2026 ») passe à la ligne dans le bouton, jamais hors de lui. */
.formule-action .btn, .offres-gratuit-action .btn { height: auto; min-height: 50px; padding: 8px 20px; border-radius: 13px; font-size: var(--taille-corps); line-height: 1.3; white-space: normal; text-align: center; }
.formule-action .btn { width: 100%; }
/* « Voir la démo {offre} » (12/11/2026) : sous le bouton, centré, discret ; il ne prend jamais la place du geste. */
.formule-action { display: grid; gap: 12px; }
.formule-demo { display: inline-flex; align-items: center; justify-content: center; gap: 6px; justify-self: center; font-size: var(--taille-petit); font-weight: 600; color: var(--bleu); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color 160ms ease; }
.formule-demo:hover { text-decoration-color: currentColor; }
.formule-demo:focus-visible { outline: 2px solid var(--bleu); outline-offset: 3px; border-radius: 4px; }
.formule-demo .ic { width: 14px; height: 14px; }
.formule-action .btn-secondaire, .offres-gratuit-action .btn-secondaire { background: transparent; box-shadow: inset 0 0 0 1px var(--trait-fort); }
.formule-action .btn-secondaire:focus-visible, .offres-gratuit-action .btn-secondaire:focus-visible { box-shadow: inset 0 0 0 1px var(--trait-fort), var(--anneau-focus); }
/* Un bouton inactif qui porte une information (« À partir du 11 décembre 2026 », « Votre formule ») reste lisible. */
.formule-action .btn:disabled, .offres-gratuit-action .btn:disabled { opacity: 0.55; }
.formule-action .btn-secondaire:hover:not(:disabled), .offres-gratuit-action .btn-secondaire:hover:not(:disabled) { background: var(--voile-2); }
.formule-action:empty { display: none; }
.formule > .note { margin: 0; }
.formule-inclus { display: grid; gap: 10px; margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--trait); font-size: 14px; line-height: 1.5; color: var(--encre-2); }
.formule-inclus li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; }
.formule-inclus .ic { width: 16px; height: 16px; margin-top: 3px; color: var(--bleu-texte); stroke-width: 2; }
.formule-inclus b { color: var(--encre); }

/* Sous les cartes : ce que toutes les formules comprennent, le devis, la TVA. */
.offres-commun { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 22px; font-size: var(--taille-petit); color: var(--encre-2); }
.offres-commun span { padding: 6px 11px; border: 1px solid var(--trait); border-radius: var(--rayon-pilule); background: var(--voile-1); }
.offres-commun strong { margin-right: 4px; color: var(--encre); }
.offres-devis { margin-top: 16px; font-size: 14px; color: var(--encre-2); }
/* Ce qui se paie à l'usage, hors formule : une ligne discrète (dossier/41-CREDITS.md). */
.offres-credit { margin-top: 14px; font-size: var(--taille-petit); line-height: 1.5; color: var(--encre-2); }
/* L'adresse de contact, en clair et sélectionnable (12/11/2026 : un lien mailto seul ne montrait rien). */
.contact-adresse, .contact-adresse-lien { font-weight: var(--graisse-moyenne); color: var(--encre); user-select: all; overflow-wrap: anywhere; }
.contact-adresse-lien { text-decoration: underline; text-decoration-color: var(--bleu-trait); text-underline-offset: 3px; }
.compteur-contact { display: grid; gap: 10px; }
.compteur-contact[hidden] { display: none; }
.contact-aide { font-size: var(--taille-petit); color: var(--encre-2); }
.contact-ligne-adresse { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 14px; border: 1px solid var(--trait-fort); border-radius: var(--rayon-3); background: var(--panneau); font-size: 17px; }
.contact-ecrire { justify-self: start; font-size: var(--taille-petit); }
.offres-tva { margin: 12px 0 0; font-size: var(--taille-etiquette); line-height: 1.5; color: var(--encre-2); }
.offres-illisible { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }

/* ---------- Code promo, sous les cartes (07/10, dossier/25 §5) : un lien discret, le champ, puis le bandeau du code ---------- */
.offres-code { margin: 16px 0 0; }
.offres-code-form { display: grid; gap: 8px; max-width: 460px; margin-top: 6px; }
.offres-code-saisie { display: flex; gap: 8px; }
.offres-code-saisie input { flex: 1; min-width: 0; font-family: var(--police-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.offres-code-saisie .btn { flex: none; height: var(--bouton-hauteur); }
.offres-code-form .note { margin: 0; }
.offres-code-applique {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; padding: 14px 16px;
  border-radius: var(--rayon-3); background: var(--bleu-voile); border: 1px solid var(--bleu-trait);
}
.offres-code-texte { display: grid; gap: 4px; font-size: var(--taille-petit); line-height: 1.45; color: var(--encre-2); }
.offres-code-titre { font-size: 15px; font-weight: var(--graisse-moyenne); color: var(--encre); }
/* Le titre reçoit le focus quand le code est accepté (le bandeau, `role="status"`, se lit) : pas d'anneau sur un texte. */
.offres-code-titre:focus, .offres-code-titre:focus-visible { outline: none; box-shadow: none; }

/* ---------- Notes d'état au-dessus des cartes ---------- */
.ecran-offres > .note { margin-bottom: 14px; }
.offres-programmee {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-bottom: 18px; padding: 16px 18px;
  border-radius: var(--rayon-3); background: var(--voile-2); border: 1px solid var(--bleu-trait); box-shadow: var(--trait-lumiere);
}
.offres-programmee-titre { font-size: 15px; font-weight: var(--graisse-moyenne); color: var(--encre); }
.offres-programmee p + p { margin-top: 4px; font-size: var(--taille-petit); color: var(--encre-2); }
.note.offres-reconquete { background: var(--bleu-voile); border-color: var(--bleu-trait); color: var(--bleu-clair); }

/* ---------- « Une marque = un pays » : le compteur ---------- */
.offres-compter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.offres-compter:focus { outline: none; }
.compteur-reglages { display: grid; gap: 18px; margin-top: 28px; }
.compteur-reglage { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border: 1px solid var(--trait); border-radius: var(--rayon-4); background: var(--voile-1); }
.compteur-nom { min-width: 0; font-weight: var(--graisse-moyenne); color: var(--encre); }
.compteur-aide { display: block; font-size: var(--taille-petit); font-weight: var(--graisse-corps); color: var(--encre-2); }
.compteur-pas { display: inline-flex; flex: none; align-items: center; border: 1px solid var(--trait-fort); border-radius: var(--rayon-3); background: var(--panneau); }
.compteur-pas button { width: 46px; height: 46px; border: 0; border-radius: 11px; background: transparent; font-size: 22px; line-height: 1; color: var(--encre); cursor: pointer; }
.compteur-pas button:hover:not(:disabled) { background: var(--voile-2); }
.compteur-pas button:disabled { opacity: 0.3; cursor: default; }
.compteur-pas output { min-width: 54px; text-align: center; font-size: 20px; font-weight: var(--graisse-moyenne); }
.compteur-resultat {
  padding: 26px 24px; border: 1px solid var(--bleu-trait); border-radius: var(--rayon-5);
  background: linear-gradient(180deg, var(--bleu-voile), var(--voile-1)); box-shadow: var(--trait-lumiere);
}
.compteur-dessin { display: grid; gap: 10px; min-height: 126px; align-content: start; }
.compteur-marque { display: flex; align-items: center; gap: 12px; }
.compteur-avatar { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--bleu-profond); font-size: var(--taille-petit); font-weight: var(--graisse-forte); color: var(--encre); }
.compteur-drapeaux { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.compteur-plus { font-size: var(--taille-petit); color: var(--encre-2); }
.compteur-equation { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--trait); font-size: clamp(1.25rem, 1rem + 1vw, 1.7rem); font-weight: var(--graisse-moyenne); line-height: 1.15; letter-spacing: -0.025em; color: var(--encre); }
.compteur-conseil { margin: 10px 0 18px; font-size: var(--taille-corps); color: var(--encre-2); }
.compteur-conseil b { color: var(--encre); }
.compteur-resultat .btn { height: auto; min-height: 50px; padding: 8px 20px; border-radius: 13px; font-size: var(--taille-corps); }
.compteur-resultat .btn[hidden] { display: none; }

/* ---------- La bande Gratuit : ce qu'un compte gratuit garde, ou le retour à Gratuit d'un abonné ---------- */
/* Sous les trois cartes, dans les offres (12/11/2026, Martin : « faut remettre ça dans les offres »). */
.offres-gratuit {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; margin-top: 18px; padding: 20px 24px;
  border: 1px dashed var(--trait-fort); border-radius: var(--rayon-5); background: var(--fond-2);
}
.offres-gratuit h2 { font-size: 19px; line-height: 1.3; letter-spacing: -0.015em; color: var(--encre); }
.offres-gratuit p { margin-top: 4px; max-width: 60ch; font-size: 14px; line-height: 1.5; color: var(--encre-2); }

/* ---------- Tout ce que comprend chaque formule : le tableau, replié ---------- */
.offres-repli { margin-top: 28px; border: 1px solid var(--trait); border-radius: var(--rayon-5); background: var(--fond-2); }
.offres-repli > summary, .offres-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-weight: var(--graisse-moyenne); color: var(--encre); cursor: pointer; list-style: none; }
.offres-repli > summary { padding: 20px 22px; border-radius: var(--rayon-5); font-size: 17px; }
.offres-repli > summary::-webkit-details-marker, .offres-faq summary::-webkit-details-marker { display: none; }
.offres-repli > summary::after, .offres-faq summary::after { content: "+"; flex: none; font-size: 22px; font-weight: var(--graisse-corps); line-height: 1; color: var(--encre-2); }
.offres-repli[open] > summary::after, .offres-faq details[open] summary::after { content: "−"; }
/* Le tableau défile dans sa boîte quand il ne tient pas (un téléphone) : une région nommée, atteignable au clavier
   (js/ecrans/offres-comparaison.js). `position: relative` : les textes masqués des cellules (.sr-only, en position
   absolue) restent dans le cadre qui défile. Bordures séparées : celles d'une colonne collante la suivent. */
.offres-repli .tableau-wrap { position: relative; margin: 0; padding: 0 8px 8px; overflow-x: auto; overscroll-behavior-x: contain; }
.comparaison-tableau { width: 100%; min-width: 560px; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 14px; }
.comparaison-tableau th, .comparaison-tableau td { padding: 13px 14px; border-top: 1px solid var(--trait); text-align: left; vertical-align: top; white-space: normal; }
.comparaison-tableau th:first-child { width: 40%; }
.comparaison-tableau thead th { border-top: 0; vertical-align: bottom; }
.comparaison-tableau tbody th { font-weight: var(--graisse-corps); color: var(--encre-2); }
.comparaison-tableau td { color: var(--encre); }
.comparaison-nom { display: block; font-size: 14px; font-weight: var(--graisse-moyenne); color: var(--encre); }
.comparaison-prix { display: block; margin-top: 2px; font-size: var(--taille-etiquette); font-weight: var(--graisse-corps); color: var(--encre-2); }
/* Le prix reste sous le nom de sa formule : ses chiffres sont tabulaires (`.num`), sans l'alignement à droite que
   `.tableau .num` donne aux colonnes de nombres (tableaux.css). */
.comparaison-tableau th .comparaison-prix { text-align: left; }
.comparaison-oui { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--bleu-voile); color: var(--bleu-clair); }
.comparaison-oui .ic { width: 14px; height: 14px; stroke-width: 2; }
.comparaison-non { display: inline-grid; place-items: center; width: 22px; height: 22px; color: var(--encre-3); }
.comparaison-non .ic { width: 13px; height: 13px; }
.comparaison-sous { display: block; margin-top: 4px; font-size: var(--taille-etiquette); line-height: 1.4; color: var(--encre-2); }

/* ---------- Les questions fréquentes ---------- */
.offres-faq { max-width: 820px; margin-top: 26px; }
.offres-faq details { border-top: 1px solid var(--trait); }
.offres-faq details:last-child { border-bottom: 1px solid var(--trait); }
.offres-faq summary { padding: 18px 0; font-size: 16.5px; }
.offres-faq p { max-width: 66ch; margin: 0 0 18px; line-height: 1.55; color: var(--encre-2); text-wrap: pretty; }

/* ---------- Mon compte : le résumé de l'offre ---------- */
.offre-resume-reperes { display: grid; gap: 8px; margin: 0 0 16px; }
.offre-resume-programmee { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.offre-resume-programmee p { color: var(--encre); }
.offre-resume-programmee > .btn { margin-left: 0; } /* la règle des boutons en ligne d'une note (espace.css) décalerait celui-ci */
/* 12/11/2026 au soir (dossier/39 § 10) : l'essai gratuit d'une offre offerte, à côté des limites de Mon compte, puis ce que
   payer la formule donne, et « Payer Business maintenant ». */
.quota-essai { margin-left: 6px; font-size: var(--taille-etiquette); font-weight: var(--graisse-moyenne); color: var(--bleu); white-space: nowrap; }
.offre-resume-essai { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 14px; }
.offre-resume-essai p { flex: 1 1 260px; margin: 0; color: var(--encre); }
.offre-resume-essai > .btn { margin-left: 0; }
/* Réglages › IA : la limite de l'essai et son bouton, sur une ligne quand elle tient, le bouton à gauche sinon. */
.reglages-essai { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.reglages-essai > .btn { margin-left: 0; }
.offre-resume-suivi { margin: 0 0 16px; }
#offre .actions.offres-autres { margin-top: 20px; }

/* ---------- Fenêtre de résiliation ---------- */
dialog.dialogue-resiliation { width: min(540px, calc(100vw - 32px)); padding: 0; }
.resiliation-tete { display: grid; gap: 8px; padding: 20px 24px 0; }
dialog.dialogue p.resiliation-compteur { margin: 0; font-size: var(--taille-etiquette); color: var(--encre-2); }
.resiliation-progression { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; }
.resiliation-progression i { height: 3px; border-radius: var(--rayon-pilule); background: var(--voile-3); }
.resiliation-progression i.atteinte { background: var(--bleu); } /* jamais `.fait` : classe des cartes de faits (ecrans.css) */
.resiliation-progression[hidden], .resiliation-compteur[hidden] { display: none; }
.resiliation-corps { display: grid; gap: 14px; max-height: min(66vh, 580px); padding: 16px 24px 6px; overflow-y: auto; }
dialog.dialogue .resiliation-corps h2 { font-size: 23px; line-height: 1.2; letter-spacing: -0.02em; outline: none; }
dialog.dialogue .resiliation-corps p { margin: 0; }
dialog.dialogue p.resiliation-chapeau { font-size: 15px; line-height: 1.55; color: var(--encre-2); }
.resiliation-pertes { display: grid; gap: 9px; }
.resiliation-pertes li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.45; color: var(--encre); }
.resiliation-croix { display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; background: var(--voile-3); color: var(--encre-2); }
.resiliation-croix .ic { width: 11px; height: 11px; }
dialog.dialogue p.resiliation-conserve { padding: 10px 12px; border-radius: var(--rayon-2); background: var(--mieux-fond); font-size: var(--taille-petit); color: var(--mieux); }
.resiliation-raisons { display: grid; gap: 6px; }
.resiliation-raison { min-height: 44px; }
.resiliation-raison input { border-radius: 50%; }
.resiliation-raison input:checked::after { width: 8px; height: 8px; border: 0; border-radius: 50%; background: var(--encre); transform: none; }
dialog.dialogue p.resiliation-chiffre { font-size: 60px; font-weight: var(--graisse-moyenne); line-height: 1; letter-spacing: var(--approche-heros); color: var(--bleu-clair); }
.resiliation-chiffre span { font-size: 28px; color: var(--encre-2); }
dialog.dialogue p.resiliation-prix { font-size: 15px; color: var(--encre); }
.resiliation-code { display: flex; gap: 8px; }
.resiliation-code input { flex: 1; min-width: 0; font-family: var(--police-mono); letter-spacing: 0.18em; }
.resiliation-code .btn { flex: none; height: var(--bouton-hauteur); }
.resiliation-corps .note { margin: 0; }
.resiliation-pied { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 18px 24px 24px; }
/* Continuer la résiliation : un lien texte gris, lisible, jamais rouge. */
.lien-discret {
  padding: 8px 2px; border: 0; background: none; font-size: var(--taille-petit); font-weight: var(--graisse-corps); color: var(--encre-2);
  text-decoration: underline; text-decoration-color: var(--trait-fort); text-underline-offset: 3px; cursor: pointer;
  transition: color var(--duree-rapide) var(--courbe);
}
.lien-discret:hover:not(:disabled) { color: var(--encre); }
.lien-discret:disabled { opacity: 0.45; cursor: not-allowed; }
.lien-discret:focus-visible { box-shadow: var(--anneau-focus); border-radius: var(--rayon-1); }
/* Rester (21/10) : « Merci pour votre confiance », un cercle qui tourne pendant l'enregistrement (transform seul). */
.resiliation-merci { display: grid; justify-items: center; gap: 12px; padding-block: 22px 14px; text-align: center; }
.resiliation-chargement {
  width: 30px; height: 30px; border: 3px solid var(--bleu-voile); border-top-color: var(--bleu); border-radius: 50%;
  animation: resiliation-tourne 0.9s linear infinite;
}
@keyframes resiliation-tourne { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) { .resiliation-chargement { animation: none; border-color: var(--bleu); } }
/* Descendre (21/10) : ce qui se perd, puis « Garder Pro » en bleu à droite, « Passer quand même » en lien gris. */
dialog.dialogue-descente { display: grid; gap: 14px; max-width: min(520px, calc(100vw - 32px)); }
dialog.dialogue-descente:not([open]) { display: none; }
dialog.dialogue-descente h2, dialog.dialogue-descente p { margin: 0; }
/* Le titre reçoit le focus à l'ouverture (la fenêtre s'ouvre en haut, le titre se lit d'abord) : pas d'anneau sur un texte. */
dialog.dialogue-descente h2:focus, dialog.dialogue-descente h2:focus-visible { outline: none; box-shadow: none; }
dialog.dialogue-descente .actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px 20px; }
/* Payer une montée avec la carte enregistrée (27/10) : le montant d'aujourd'hui en premier, le prix d'après dessous. */
dialog.dialogue-paiement { display: grid; gap: 12px; max-width: min(520px, calc(100vw - 32px)); }
dialog.dialogue-paiement:not([open]) { display: none; }
dialog.dialogue-paiement h2, dialog.dialogue-paiement p { margin: 0; }
dialog.dialogue-paiement .paiement-aujourdhui { font-size: 1.0625rem; font-weight: var(--graisse-moyenne); color: var(--encre); }
dialog.dialogue-paiement .paiement-ensuite { color: var(--encre-2); }
dialog.dialogue-paiement .paiement-cgv { font-size: var(--taille-etiquette); }
dialog.dialogue-paiement .actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 6px; }
dialog.dialogue-paiement[aria-busy="true"] .btn-primaire { cursor: progress; }

/* L'accueil d'une nouvelle offre est devenu le moment de la montée (montee.css, js/montee.js : dossier/26 R6). */

/* ---------- Sur ordinateur : des cartes à la même hauteur (13/11/2026, Martin : « toutes les offres à la même hauteur
   tu vois ? sur pc en tout cas ») ----------
   Les trois cartes partagent leurs rangées (`subgrid`) : le nom, la phrase « pour qui », les IA, le prix, la ligne de
   facture, les remises, les deux chiffres, les paliers de Business, les repères, le bouton, ce que la formule comprend ;
   chaque zone se cale sur la plus haute des trois, quelle que soit la langue ou l'état (offre en cours, offerte, prix
   barré, au mois ou à l'année). Le bouton tombe sur la même ligne dans chaque carte, et les cartes finissent ensemble.
   Une zone vide partout (aucune remise, aucun repère) ne prend aucune place : l'écart est porté par la marge de la zone,
   pas par la gouttière. Sous 1201 px, les cartes s'empilent (plus bas) ; sans `subgrid`, la grille d'avant reste. */
@media (min-width: 1201px) {
  @supports (grid-template-rows: subgrid) {
    .offres-grille { row-gap: 0; align-items: stretch; }
    .formule { grid-row: span 12; grid-template-rows: subgrid; row-gap: 0; align-content: normal; }
    .formule > :not(.formule-tag) { margin-top: 16px; align-self: start; }
    .formule > .formule-nom { grid-row: 1; margin-top: 0; }
    .formule > .formule-pour { grid-row: 2; margin-top: 6px; min-height: 0; }
    .formule > .formule-ia-logos { grid-row: 3; margin-top: 14px; }
    .formule > .formule-prix-bloc { grid-row: 4; }
    .formule > .formule-facture { grid-row: 5; margin-top: 8px; min-height: 0; }
    .formule > .formule-puces { grid-row: 6; }
    /* Le bloc des chiffres prend toute la hauteur de sa rangée : chez Starter et Pro, le surplus de Business (ses
       pastilles, son lien) se répartit DANS le bloc, autour des chiffres centrés ; jamais un vide entre deux blocs. */
    .formule { padding-inline: 20px; }
    .formule > .formule-mesure { grid-row: 7; align-self: stretch; grid-template-rows: minmax(0, 1fr); grid-auto-rows: auto; }
    /* « Une marque = un pays. Compter mes marques » sur une ligne (265 px en français, 246 en anglais, mesurés). */
    .formule-mesure .formule-compter { white-space: nowrap; }
    .formule-mesure > .formule-exemple { align-content: center; }
    .formule > .formule-reperes { grid-row: 8; }
    .formule > .formule-action { grid-row: 9; margin-top: 20px; }
    .formule > .note { grid-row: 10; margin-top: 12px; }
    .formule > .formule-ia { grid-row: 11; margin-top: 10px; }
    .formule > .formule-inclus { grid-row: 12; margin-top: 20px; }
  }
}
@media (min-width: 1201px) and (max-width: 1279px) {
  .formule-mesure .formule-compter { font-size: 11px; }
}

/* ---------- Écrans intermédiaires et téléphone ---------- */
/* Sous 1200 px, le rail pris, il reste moins de 900 px : les cartes s'empilent (une formule par ligne), le compteur aussi. */
@media (max-width: 1200px) {
  .offres-grille { grid-template-columns: minmax(0, 1fr); gap: 26px; max-width: 720px; }
  .formule-pour, .formule-facture { min-height: 0; }
  .offres-compter { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .offres-choix { gap: 14px; margin-bottom: 32px; }
  .offres-choix-groupe { width: 100%; }
  .segments.offres-segments { display: flex; }
  .offres-segments button { flex: 1 1 auto; justify-content: center; padding: 6px 12px; }
  .formule { padding: 28px 18px 20px; }
  .offres-formule, .offres-gratuit { padding: 16px; }
  .offres-formule > .btn, .offres-gratuit-action, .offres-gratuit-action .btn { width: 100%; }
  .compteur-reglage { flex-direction: column; align-items: stretch; }
  .compteur-pas { justify-content: space-between; }
  .compteur-resultat { padding: 20px 16px; }
  .compteur-resultat .btn { width: 100%; }
  .offres-repli > summary { padding: 16px; font-size: 16px; }
  .comparaison-tableau th, .comparaison-tableau td { padding: 10px 8px; }
  .resiliation-tete, .resiliation-corps, .resiliation-pied { padding-left: 18px; padding-right: 18px; }
  .resiliation-pied .btn { width: 100%; }
  .resiliation-code { flex-wrap: wrap; }
  .resiliation-code .btn { width: 100%; }
  .offres-code-saisie { flex-wrap: wrap; }
  .offres-code-saisie .btn { width: 100%; }
  /* Le tableau défile (560 px dans moins de 350) : la colonne des libellés, plus étroite, reste en place, et son bord dit
     où elle finit ; une ombre au bord droit dit qu'il y a plus à voir (elle suit le défilement : au bout, elle
     disparaît). Comme le tableau de la page publique (../assets/sections.css). La boîte n'a plus de marge intérieure sur
     ses côtés (les cellules des bords la portent) : une colonne collante s'arrête au bord du contenu de la boîte, et les
     cellules qui défilent se verraient dans la marge, à sa gauche. Ses coins du bas suivent ceux du cadre replié. */
  .comparaison-tableau th:first-child { position: sticky; left: 0; z-index: 1; width: 144px; padding-left: 16px; background: var(--fond-2); box-shadow: inset -1px 0 0 var(--trait); }
  .comparaison-tableau tr > :last-child { padding-right: 16px; }
  .offres-repli .tableau-wrap {
    padding-inline: 0; border-radius: 0 0 calc(var(--rayon-5) - 1px) calc(var(--rayon-5) - 1px);
    background:
      linear-gradient(to left, var(--fond-2) 40%, transparent) right center / 28px 100% no-repeat local,
      radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--encre) 16%, transparent), transparent) right center / 14px 100% no-repeat scroll,
      var(--fond-2);
  }
  /* Les bascules ne font plus sauter la page (contrôle du 11/11) : la ligne sous le prix garde la hauteur de deux lignes
     (au mois, à l'année, en français comme en anglais), le nombre de réponses de l'exemple aussi sur un petit téléphone. */
  .formule-facture { min-height: 3em; }
}
@media (max-width: 360px) {
  .formule-chiffre b { font-size: 1.6rem; }
}
/* Sous 375 px, le supplément des 5 IA (« Ajouter Perplexity et AI Mode : + 110 € par mois ») tient sur une ligne ou sur
   deux selon son montant : deux lignes réservées, le texte en haut (mesuré à 340 et 360 px, en français et en anglais). */
@media (max-width: 374px) {
  .formule-ia { display: flex; align-items: flex-start; min-height: calc(2.8em + 26px); }
}
/* Téléphone et écran tactile (contrôle du 11/11) : 44 px au doigt pour les réglages nouveaux de la grille, sans rien
   changer à l'ordinateur. Le texte des deux liens garde sa place : la zone gagnée déborde dans les blancs voisins. */
@media (max-width: 640px), (pointer: coarse) {
  .formule-paliers button { min-height: 44px; }
  .formule-compter, .formule-ia { padding-block: 13px; margin-top: -15px; margin-bottom: -9px; }
  .offres-code > .lien-discret { padding-block: 12px; margin-block: -4px; }
}
@media (prefers-reduced-motion: reduce) {
  .formule, .formule:hover { transform: none; transition: none; }
}

/* ---------- Relief et mouvement (13/11/2026 ; Martin : « faut que ça donne plus envie ! mets les logos des ia ») ----------
   Rien ne change dans ce que disent les cartes : la lumière tombe d'en haut sur chacune, le faisceau passe sur l'arête
   de la formule mise en avant, les logos des IA prennent la place des pastilles de couleur. Une bascule se voit : le
   prix compte de l'ancien au nouveau (offres-cartes.js), les logos qu'elle ajoute éclosent. `transform` et `opacity`
   seulement ; coupé sous prefers-reduced-motion (app.css), l'état de repos est l'état final. */
.formule { isolation: isolate; }
.formule::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(115% 58% at 50% -12%, var(--voile-3), transparent 66%); opacity: 0.6; transition: opacity var(--duree-normale) var(--courbe);
}
.formule:hover::before, .formule:focus-within::before { opacity: 1; }
.formule[data-avant="true"]::before { background: radial-gradient(115% 62% at 50% -12%, var(--bleu-voile), transparent 68%); opacity: 1; }
.formule[data-avant="true"]::after {
  content: ""; position: absolute; top: -1px; left: 16%; right: 16%; height: 2px; border-radius: var(--rayon-pilule); pointer-events: none;
  background: var(--faisceau-traversant); box-shadow: var(--lueur); transform-origin: 0 50%; animation: formule-faisceau 700ms var(--expo) 380ms both;
}
.formule-tag { z-index: 1; }
@keyframes formule-faisceau { from { opacity: 0; transform: scaleX(0); } }
/* Les logos des IA d'une carte : plus grands ; au survol de la carte, ils s'écartent d'un rien. */
.formule-ia-logos .ia-jeton { width: 34px; height: 34px; transition: transform var(--duree-normale) var(--expo); }
.formule-ia-logos .ia-jeton + .ia-jeton { margin-left: -9px; }
.formule-ia-logos .ia-jeton img { width: 19px; height: 19px; }
@media (hover: hover) {
  .formule:hover .ia-jeton:nth-child(2) { transform: translateX(3px); }
  .formule:hover .ia-jeton:nth-child(3) { transform: translateX(6px); }
  .formule:hover .ia-jeton:nth-child(4) { transform: translateX(9px); }
  .formule:hover .ia-jeton:nth-child(5) { transform: translateX(12px); }
}
/* Un logo que la bascule vient d'ajouter (les deux IA de plus) : il éclot, l'un après l'autre. */
.ia-jeton.nouveau { animation: ia-eclot 340ms var(--expo) calc(var(--k, 0) * 80ms) both; }
@keyframes ia-eclot { from { opacity: 0; transform: scale(0.4); } }
/* La bascule « 3 IA / 5 IA » : les logos ; sur le segment choisi (blanc), un filet les détache du fond. */
.offres-jetons .ia-jeton { width: 24px; height: 24px; box-shadow: 0 0 0 2px var(--panneau-2); }
.offres-jetons .ia-jeton + .ia-jeton { margin-left: -7px; }
.offres-jetons .ia-jeton img { width: 14px; height: 14px; }
.offres-segments button[aria-pressed="true"] .offres-jetons .ia-jeton { box-shadow: 0 0 0 1px color-mix(in srgb, var(--encre-inverse) 22%, transparent); }
/* La bande de la formule : les logos de ses IA devant ce qu'elle compte. */
.offres-formule-contenu { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.offres-formule-ia .ia-jeton { width: 26px; height: 26px; }
.offres-formule-ia .ia-jeton + .ia-jeton { margin-left: -7px; }
.offres-formule-ia .ia-jeton img { width: 15px; height: 15px; }
/* L'essai gratuit : la bande s'éclaire en bleu, le faisceau court sur son arête ; ce que payer donne se lit en clair. */
.offres-formule[data-etat="essai"] { position: relative; overflow: hidden; border-color: var(--bleu-trait); background: linear-gradient(115deg, var(--bleu-voile), var(--voile-1) 58%); }
.offres-formule[data-etat="essai"]::before {
  content: ""; position: absolute; top: 0; left: 0; width: min(420px, 60%); height: 2px; background: var(--faisceau); box-shadow: var(--lueur);
  transform-origin: 0 50%; animation: formule-faisceau 700ms var(--expo) 300ms both;
}
.offres-formule-essai { display: grid; gap: 4px; }
.offres-formule-apres { font-weight: var(--graisse-moyenne); color: var(--encre); }