/* ============================================================
   LES OFFRES — trois colonnes, et une seule qu'on regarde.

   POURQUOI UNE CARTE EST PLUS HAUTE QUE LES AUTRES.
   Une page de tarifs ne se lit pas, elle se balaie. Le lecteur
   cherche « laquelle je prends », et si les trois cartes se
   ressemblent, il repart sans choisir. Celle du milieu — le
   Complet — est donc légèrement surélevée, bordée d'ambre et
   coiffée d'un ruban : c'est la recommandation, dite par la forme
   plutôt que par une phrase.

   Les deux autres restent parfaitement lisibles. On oriente, on
   ne pousse pas : une carte grisée ou rapetissée donnerait le
   sentiment d'être poussé vers la caisse, ce qui est exactement
   ce que le reste du site refuse de faire.
   ============================================================ */

/* ---- L'ARRIVÉE DEPUIS UNE ANALYSE REFUSÉE ----

   Un encadré ambré posé tout en haut, avant même le titre : c'est la
   réponse à la question que la personne se pose en arrivant, et elle se
   la pose avant de lire quoi que ce soit d'autre.

   Il ne crie pas. Ce n'est pas une erreur — rien n'a échoué, une réserve
   s'est vidée — et le rouge des messages d'erreur mettrait le visiteur en
   faute là où il n'a fait que se servir de ce qu'on lui a offert. */
.of-arrivee {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  border: 1px solid color-mix(in srgb, var(--a) 30%, transparent);
  background: var(--a-soft);
  border-radius: var(--r-md);
  padding: var(--s4) var(--s5);
  margin-bottom: var(--s5);
  animation: ofMonte 0.45s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.of-arrivee-t {
  font-family: var(--display);
  font-stretch: var(--w-serre);
  font-size: var(--t-lg);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--a);
}

.of-arrivee-p {
  font-size: var(--t-md);
  line-height: 1.6;
  color: var(--ink);
  text-wrap: pretty;
}

.of-arrivee-p b { font-weight: 650; }

.of-arrivee-n {
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--ink-soft);
  text-wrap: pretty;
}

.of-grille {
  display: grid;
  /* Trois cartes tiennent côte à côte dès qu'il y a la place ; en dessous,
     la grille se replie toute seule — deux, puis une. Aucun point de rupture
     à maintenir. */
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--s4);
  align-items: start;
  margin-top: var(--s6);
}

/* ============================================================
   TROIS NIVEAUX DE LUMIÈRE.

   La direction visuelle du site s'appelle « Nocturne » : un stade le
   soir, une seule source de lumière ambrée. Les trois formules
   racontent donc la même chose en trois intensités, et la lumière
   remplace le vieux réflexe des pages de tarifs — grisailler les
   options qu'on ne veut pas voir choisies.

     Essentiel   ÉTEINT   contour simple, aucune lueur
     Complet     ALLUMÉ   le projecteur : halo ambré, bouton allumé
     À vie       ALLUMÉ   la même lumière, mais elle ne s'éteint plus
                 POUR     — un liseré ambré permanent sur l'arête haute
                 TOUJOURS

   Personne n'est rapetissé ni grisé : les trois cartes restent
   parfaitement lisibles, c'est la QUANTITÉ DE LUMIÈRE qui oriente.
   ============================================================ */

.of-carte {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s6) var(--s5) var(--s5);
  height: 100%;

  /* la lampe déposée sur l'arête haute — le même geste que .card */
  background-image: linear-gradient(to bottom, var(--lustre), transparent 28%);

  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.22s ease,
              box-shadow 0.22s ease;
}

.of-carte:hover { transform: translateY(-3px); border-color: var(--n); }

/* ---- LE PROJECTEUR : la formule recommandée ----

   Deux nappes superposées, exactement comme le bouton allumé du site
   (.cta-feu dans socle.css) : une courte qui décolle la carte du fond,
   une large qui va se perdre dans le noir. La bague d'un pixel n'est
   pas une bordure de plus, c'est l'arête qui reçoit sa propre lumière. */
.of-vedette {
  border-color: var(--a);
  background-color: var(--surface-alt);
  box-shadow:
    0 0 0 1px var(--feu),
    0 10px 30px -10px var(--feu),
    0 28px 70px -24px var(--feu-fort);
}

.of-vedette:hover {
  border-color: var(--a);
  transform: translateY(-5px);
  box-shadow:
    0 0 0 1px var(--feu-fort),
    0 14px 36px -10px var(--feu-fort),
    0 34px 84px -26px var(--feu-fort);
}

/* ---- LA LUMIÈRE QUI NE S'ÉTEINT PLUS : l'accès à vie ----

   Pas de halo — il y a déjà un projecteur sur cette page, et deux
   projecteurs n'en font plus aucun. Cette carte porte un liseré ambré
   posé sur son arête haute : la lumière est là, franche, mais elle ne
   rayonne pas. C'est un objet qu'on possède, pas une offre qui appelle. */
.of-vie { border-color: color-mix(in srgb, var(--a) 34%, var(--line)); }
.of-vie::after {
  content: "";
  position: absolute;
  left: var(--s5);
  right: var(--s5);
  top: -1px;
  height: 2px;
  border-radius: var(--r-pill);
  background: linear-gradient(to right, transparent, var(--a), transparent);
}
.of-vie:hover { border-color: var(--a); }

/* Le ruban chevauche le bord haut de la carte : posé à l'intérieur, il
   mangeait la place du nom de la formule ; posé au-dessus, il rattache
   visuellement l'étiquette à sa carte. */
.of-ruban {
  position: absolute;
  top: 0;
  left: var(--s5);
  transform: translateY(-50%);
  background: var(--a);
  color: var(--on-accent);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.25rem var(--s3);
  border-radius: var(--r-pill);
  white-space: nowrap;
}

/* L'offre à vie n'est pas la recommandation : son ruban annonce une
   limite, pas une préférence. Il prend donc le contour, pas le fond. */
.of-ruban-vie {
  background: var(--surface);
  color: var(--a);
  border: 1px solid var(--a);
}

/* Le ruban de la formule recommandée est le seul de la page à porter la
   lumière du bouton : c'est la même source, sur la même carte. */
.of-vedette .of-ruban {
  box-shadow: 0 4px 14px -4px var(--feu-fort);
}

.of-nom {
  font-family: var(--display);
  font-size: var(--t-lg);
  font-weight: 700;
  font-stretch: var(--w-serre);
  letter-spacing: -0.015em;
}

/* ---- LE PRIX ----

   POURQUOI IL CHANGE DE POLICE. Il était composé dans la police de titre,
   étroitisée à 84 %. À cette largeur, la virgule de « 8,99 » se détachait
   du chiffre et le montant se lisait « 8 , 99 » — trois blocs au lieu d'un
   prix. Ce n'était pas une valeur d'espacement mal choisie : la police de
   titre du site ne compose pas les décimales.

   Il passe donc à Chivo Mono, la police à chiffres du site, avec ses
   chiffres tabulaires — tous de la même largeur. Les trois montants
   s'alignent alors verticalement d'une carte à l'autre, ce qu'aucune
   police proportionnelle ne sait faire.

   ET POURQUOI LES CENTIMES SONT PLUS PETITS. Ce qu'on compare, c'est onze,
   vingt-et-un, cent-quarante-neuf. Les centimes sont une mention légale,
   pas un argument : ils gardent leur place et leur lisibilité, mais ils
   cessent de peser autant que l'euro. */
.of-prix {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s2);
  color: var(--ink);
  line-height: 1.05;
}

.of-montant {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.of-ent {
  font-size: clamp(2.1rem, 5.2vw, 2.7rem);
  letter-spacing: -0.045em;
}

.of-dec {
  font-size: clamp(1.05rem, 2.4vw, 1.25rem);
  letter-spacing: -0.02em;
  color: var(--ink-soft);
}

.of-eur {
  font-size: clamp(1.15rem, 2.6vw, 1.4rem);
  font-weight: 600;
  margin-left: 0.16em;
  color: var(--ink-soft);
}

/* Le montant de la formule recommandée porte la couleur de la page :
   c'est le seul prix qu'on veut voir en premier en balayant la grille. */
.of-vedette .of-ent,
.of-vie .of-ent { color: var(--a); }

.of-par {
  font-family: var(--body);
  font-size: var(--t-sm);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-faint);
}

.of-pour {
  color: var(--ink-soft);
  font-size: var(--t-sm);
  line-height: 1.55;
}

/* ---- ce que contient la formule ----
   Une puce ronde ambrée plutôt qu'une coche verte : la coche promet que
   tout va bien, la puce se contente d'énumérer. */
.of-liste {
  list-style: none;
  display: grid;
  gap: var(--s2);
  margin: var(--s2) 0 0;
  padding: 0;
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--ink-soft);
}

/* La puce est posée SUR la ligne, pas à côté d'elle.
   En boîte flexible, chaque morceau de la ligne devenait un élément séparé :
   « Tout l'Essentiel », en gras, se retrouvait dans une colonne, et
   « sans limite d'analyses » dans une autre, à un centimètre de là. La ligne
   reste donc du texte ordinaire, et la puce est posée par-dessus, à gauche. */
.of-liste li {
  position: relative;
  padding-left: var(--s4);
}

.of-liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background: var(--a);
}

.of-liste strong { color: var(--ink); font-weight: 600; }

/* ---- LA LIGNE HÉRITÉE ----

   « Tout l'Essentiel » et « Tout le Complet » ne sont pas des
   fonctionnalités de plus : ce sont les paliers du dessous, repris en
   bloc. Une puce identique aux autres les faisait lire comme une ligne
   parmi onze, et l'escalier des trois formules disparaissait.

   Elle prend donc un coche plutôt qu'un point, et un filet sous elle :
   au-dessus, ce qui est déjà acquis ; en dessous, ce que cette formule
   ajoute. */
.of-herite {
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--s1);
  color: var(--ink);
}

/* SÉLECTEUR DOUBLÉ, ET IL LE FAUT.

   La puce ronde est posée par « .of-liste li::before », qui vaut une
   classe, un élément et un pseudo-élément. « .of-herite::before » ne
   valait qu'une classe et un pseudo-élément : il perdait, en silence, et
   la coche ne s'affichait pas — la ligne gardait le point des autres.
   C'est le même piège que les marges intérieures des cartes dans
   analyse.css : deux règles qui se contredisent, la plus spécifique
   gagne, et rien ne le signale. */
.of-liste .of-herite::before {
  content: "✓";
  background: none;
  width: auto;
  height: auto;
  top: 0;
  font-size: 0.85em;
  font-weight: 700;
  color: var(--a);
  line-height: 1.6;
}

/* ---- LE POINT DE BASCULE ----

   L'argument entier de l'accès à vie tient dans une multiplication.
   Il est donc encadré, avec les deux montants en chiffres du site :
   le lecteur doit pouvoir le refaire de tête, pas le croire. */
.of-bascule {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  border: 1px solid color-mix(in srgb, var(--a) 26%, transparent);
  background: var(--a-soft);
  border-radius: var(--r-sm);
  padding: var(--s3);
  margin-top: var(--s2);
}

.of-bascule-hd {
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--a);
}

.of-bascule-txt {
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--ink-soft);
  text-wrap: pretty;
}

.of-bascule-txt b {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}

/* ============================================================
   L'ARRIVÉE DES TROIS FORMULES.

   Un seul mouvement, au chargement : les cartes montent l'une après
   l'autre, de la moins chère à la plus chère. L'ordre du mouvement est
   celui du prix — c'est l'escalier des formules qui se construit sous
   les yeux, pas un effet.

   Les listes de fonctionnalités, elles, ne bougent pas : onze lignes qui
   apparaissent une par une, ce serait une page qu'on attend au lieu
   d'une page qu'on lit.
   ============================================================ */

/* « backwards » ET NON « both », ET C'EST INDISPENSABLE.

   Avec « both », l'état final de l'animation reste accroché à la carte
   après la fin — et une animation l'emporte sur une règle ordinaire. Le
   « transform » du survol n'aurait plus jamais eu d'effet : les cartes
   seraient devenues insensibles à la souris, sans la moindre erreur pour
   le dire. « backwards » ne tient l'état de départ que pendant le délai,
   puis rend la main aux styles normaux. */
.of-carte {
  animation: ofMonte 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  animation-delay: calc(var(--rang, 0) * 90ms);
}

@keyframes ofMonte {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .of-carte {
    animation: none;
    opacity: 1;
    transform: none;
    transition: border-color 0.22s ease;
  }
  .of-carte:hover,
  .of-vedette:hover { transform: none; }
}

/* Le bouton est poussé en bas de sa carte : les trois s'alignent alors sur
   une même ligne, quelle que soit la longueur des listes au-dessus. */
.of-btn {
  margin-top: auto;
  width: 100%;
}

.of-fine {
  font-size: var(--t-xs);
  color: var(--ink-faint);
  line-height: 1.5;
  border-top: 1px solid var(--line-soft);
  padding-top: var(--s3);
}

/* ---- ce qui reste gratuit ---- */

/* Encart et non filet latéral : voir la même correction dans
   listes.css, coupes.css et bilan.css. */
.of-gratuit {
  margin-top: var(--s7);
  border: 1px solid var(--a-soft);
  border-radius: var(--r-sm);
  background: var(--a-soft);
  padding: var(--s4);
  max-width: 62ch;
}

.of-gratuit h2 {
  font-family: var(--display);
  font-size: var(--t-md);
  font-weight: 700;
  font-stretch: var(--w-serre);
  margin-bottom: var(--s2);
}

.of-gratuit p {
  color: var(--ink-soft);
  font-size: var(--t-sm);
  line-height: 1.6;
}

/* ============================================================
   CE QU'ON FAIT, CE QU'ON NE FAIT PAS.

   Les deux colonnes ont exactement le même poids visuel : ni coche
   verte à gauche, ni croix rouge à droite. Ce n'est pas un tableau
   « bien / mal », c'est un périmètre. Habiller la colonne de droite
   en rouge la ferait lire comme un aveu, alors qu'elle est le
   meilleur argument de la page.
   ============================================================ */

.of-verite {
  margin-top: var(--s7);
  padding-top: var(--s6);
  border-top: 1px solid var(--line);
}

.of-verite h2 {
  font-family: var(--display);
  font-size: var(--t-lg);
  font-weight: 700;
  font-stretch: var(--w-serre);
  letter-spacing: -0.015em;
  margin-bottom: var(--s3);
}

.of-verite-lede {
  color: var(--ink-soft);
  font-size: var(--t-sm);
  line-height: 1.6;
  max-width: 66ch;
  margin-bottom: var(--s5);
}

.of-t {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-sm);
}

.of-t th {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-align: left;
  padding: var(--s2) var(--s4) var(--s3) 0;
  border-bottom: 1px solid var(--line);
  width: 50%;
}

.of-t td {
  padding: var(--s4) var(--s4) var(--s4) 0;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink-soft);
  line-height: 1.5;
  vertical-align: top;
}

/* La colonne de gauche est ce qu'on livre : elle prend l'encre pleine.
   Celle de droite reste en encre douce — pas parce qu'elle compte moins,
   mais parce qu'on lit d'abord ce qu'on achète. */
.of-t td:first-child { color: var(--ink); }

/* Un filet vertical sépare les deux colonnes : sans lui, sur un écran
   large, les lignes se lisent comme une seule phrase qui traverse. */
.of-t td + td,
.of-t th + th { border-left: 1px solid var(--line-soft); padding-left: var(--s4); }