/* ═══════════════════════════════════════════════════════════════════════════
   ABONNEMENT — la page qui manquait au site.                  (refonte 31/07)
   Dépend de nuit.css. Tout ce qui suit n'existe QUE sur /abonnement.

   Les prix, les formules et les allocations affichés ici viennent du code :
   `db/migrations/017_plans_three_tiers.sql` (les 10 formules),
   `009_monetization.sql` (les packs), `domain/access.js` (les allocations),
   `lib/paywallContenu.ts` (la copie de chaque ligne). Rien n'est inventé ;
   les pourcentages d'économie sont calculés avec la formule du paywall
   (`lib/paywallOffres.ts` : coût ramené au mois, une semaine = 12/52 de mois).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Héros de page ─────────────────────────────────────────────────────────── */
.tete {
  --fond:var(--p-blanc);
  position:relative; overflow:clip; background:var(--fond);
  padding-block:clamp(88px,13vh,150px) clamp(56px,8vh,96px);
}
.tete-dedans { position:relative; z-index:1 }
.tete h1 { max-width:16ch; margin-bottom:1.4rem }
.tete .lede { max-width:52ch }

/* ── Le compte gratuit ─────────────────────────────────────────────────────
   Il passe AVANT les paliers, et il occupe la pleine largeur. Une page de
   tarifs qui commence par ce qu'elle vend fait croire que le reste est bridé ;
   celle-ci commence par ce qui est acquis sans payer. C'est la doctrine :
   le gratuit est « le socle qui fait vivre l'app », pas un produit d'appel.
   ────────────────────────────────────────────────────────────────────────── */
.socle {
  border:1px solid var(--hair); border-radius:var(--r-xl);
  background:linear-gradient(150deg,
    color-mix(in srgb, var(--accent) 13%, transparent),
    color-mix(in srgb, var(--texte) 2.5%, transparent) 46%);
  padding:clamp(26px,3.6vw,46px);
}
.socle-tete { display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem 1.1rem; margin-bottom:.9rem }
.socle-tete h2 { font-size:var(--t-h2) }
.socle-tete .prix-zero {
  font-family:var(--display); font-size:var(--t-h3); font-weight:600;
  color:var(--accent); font-variation-settings:'opsz' 40;
}
.socle > .lede { max-width:60ch }
.socle ul {
  margin-top:clamp(24px,3vw,34px);
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:.95rem clamp(20px,3vw,38px);
}
.socle li { display:flex; gap:.72rem; font-size:var(--t-petit); color:var(--texte-2); line-height:1.55 }
.socle li::before {
  content:''; flex:none; width:16px; height:16px; margin-top:.32em; border-radius:50%;
  background:color-mix(in srgb, var(--accent) 18%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent);
}
.socle li b { color:var(--texte); font-weight:600 }

/* ── Bascule de périodicité ────────────────────────────────────────────────── */
.rythme {
  display:inline-flex; gap:4px; padding:4px; margin-top:clamp(30px,4vw,44px);
  border:1px solid var(--hair); border-radius:999px;
  background:color-mix(in srgb, var(--texte) 4%, transparent);
}
.rythme button {
  padding:.6em 1.25em; border:0; border-radius:999px; cursor:pointer; background:transparent;
  font-size:var(--t-petit); font-weight:600; color:var(--texte-3);
  transition:background-color .22s var(--sortie), color .22s;
}
.rythme button:hover { color:var(--texte) }
.rythme button[aria-selected="true"] { background:var(--texte); color:var(--fond) }

/* ── Les trois paliers ─────────────────────────────────────────────────────── */
.paliers { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.8vw,22px); margin-top:clamp(22px,3vw,32px) }
@media (max-width: 900px) { .paliers { grid-template-columns:1fr } }

.palier { display:flex; flex-direction:column; padding:clamp(24px,2.8vw,34px) }
.palier .nom {
  font-family:var(--display); font-size:clamp(1.5rem,1.2rem + 1vw,2rem); font-weight:600;
  letter-spacing:-.022em; font-variation-settings:'opsz' 60;
}
.palier .accroche { margin-top:.35rem; font-size:var(--t-petit); color:var(--texte-2) }
.palier .montant {
  margin-top:1.6rem; display:flex; align-items:baseline; gap:.42rem; flex-wrap:wrap;
}
.palier .montant b {
  font-family:var(--display); font-size:clamp(2.1rem,1.5rem + 2vw,3rem); font-weight:600;
  letter-spacing:-.032em; line-height:1; font-variation-settings:'opsz' 96;
}
.palier .montant .par { font-size:var(--t-petit); color:var(--texte-3) }
.palier .detail { margin-top:.6rem; font-size:var(--t-micro); color:var(--texte-3); min-height:2.6em }
.palier .gains { margin-top:1.7rem; padding-top:1.4rem; border-top:1px solid var(--hair); flex:1 }
.palier .gains li { display:flex; gap:.65rem; font-size:var(--t-petit); color:var(--texte-2); line-height:1.5 }
.palier .gains li + li { margin-top:.72rem }
.palier .gains li::before { content:'—'; flex:none; color:var(--texte-4) }
.palier .gains li.herite { color:var(--texte-3) }
.palier .gains li.herite::before { content:'+' ; color:var(--accent) }
.palier .btn { margin-top:1.8rem }

/* Le palier héros. Doctrine des offres : l'Or est « le héros », et il est le
   seul à porter une bordure vivante. Un liseré doré sur les trois annulerait
   le repère. */
.palier.vedette {
  border-color:color-mix(in srgb, var(--or) 40%, transparent);
  background:linear-gradient(to bottom,
    color-mix(in srgb, var(--or) 11%, transparent),
    color-mix(in srgb, var(--texte) 2%, transparent));
}
.palier.vedette .nom { color:var(--or) }
.ruban {
  position:absolute; top:0; left:50%; transform:translate(-50%,-50%);
  padding:.34em .95em; border-radius:999px; white-space:nowrap;
  background:var(--or); color:#231803;
  font-size:var(--t-micro); font-weight:700; letter-spacing:.06em; text-transform:uppercase;
}
.economie {
  display:inline-block; margin-left:.3rem; padding:.2em .6em; border-radius:999px;
  background:color-mix(in srgb, var(--accent) 18%, transparent); color:var(--accent);
  font-size:var(--t-micro); font-weight:700; letter-spacing:.02em;
}

/* ── Comparatif ────────────────────────────────────────────────────────────
   Un vrai <table> : c'est un tableau de données, et c'est ce qu'un lecteur
   d'écran doit annoncer (« colonne Or, ligne Filtres avancés, inclus »). Une
   grille de <div> perdrait cette lecture-là.
   ────────────────────────────────────────────────────────────────────────── */
.cadre-tableau { overflow-x:auto; margin-top:clamp(34px,4.4vw,52px); border:1px solid var(--hair); border-radius:var(--r-l) }
table.comparatif { width:100%; min-width:660px; border-collapse:collapse; font-size:var(--t-petit) }
table.comparatif th, table.comparatif td { padding:.92rem 1rem; text-align:left; vertical-align:top }
table.comparatif thead th {
  position:sticky; top:0; z-index:2;
  /* Doit rester OPAQUE (l'en-tête est collant, les lignes passent dessous) et
     suivre la couleur du chapitre — d'où un mélange sur `--fond` plutôt qu'une
     surface sombre écrite en dur. */
  background:color-mix(in srgb, var(--texte) 7%, var(--fond));
  font-family:var(--police); font-size:var(--t-micro); font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--texte-3);
  border-bottom:1px solid var(--hair-2);
}
table.comparatif thead th.est-or { color:var(--or) }
table.comparatif tbody th {
  font-weight:400; color:var(--texte-2); width:44%;
}
table.comparatif tbody th b { display:block; color:var(--texte); font-weight:600; margin-bottom:.16rem }
table.comparatif td { text-align:center; width:14% }
table.comparatif tr + tr th, table.comparatif tr + tr td { border-top:1px solid var(--hair) }
table.comparatif tr.groupe th {
  padding-top:1.7rem;
  font-family:var(--police); font-size:var(--t-micro); font-weight:700;
  /* --texte-3 et non --texte-4 : ce sont des EN-TÊTES de groupe de lignes, donc
     du contenu. --texte-4 les mettait à 2,82 de contraste. */
  letter-spacing:.14em; text-transform:uppercase; color:var(--texte-3);
}
table.comparatif tr.groupe td { border-top-color:transparent }
.oui { color:var(--accent); font-weight:700 }
.non { color:var(--texte-4) }
.partiel { color:var(--texte-3); font-size:var(--t-micro) }

/* ── Munitions ─────────────────────────────────────────────────────────────── */
.munitions { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.8vw,22px); margin-top:clamp(34px,4.4vw,52px) }
@media (max-width: 900px) { .munitions { grid-template-columns:1fr } }
.munition .nom {
  font-family:var(--display); font-size:var(--t-h3); font-weight:600; letter-spacing:-.018em;
  font-variation-settings:'opsz' 40;
}
.munition .promesse { margin-top:.5rem; font-size:var(--t-petit); color:var(--texte-2) }
.munition .lots { margin-top:1.5rem; padding-top:1.3rem; border-top:1px solid var(--hair) }
.munition .lots li {
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  font-size:var(--t-petit); padding:.5rem 0;
}
.munition .lots li + li { border-top:1px solid var(--hair) }
.munition .lots .q { color:var(--texte-2) }
.munition .lots .p { font-weight:600; white-space:nowrap }
.munition .offert {
  margin-top:1.3rem; padding:.85rem 1rem; border-radius:var(--r-m);
  background:color-mix(in srgb, var(--or) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--or) 26%, transparent);
  font-size:var(--t-micro); color:var(--champagne); line-height:1.55;
}

/* ── Serment ───────────────────────────────────────────────────────────────── */
.jamais { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,40px); margin-top:clamp(38px,5vw,58px) }
@media (max-width: 880px) { .jamais { grid-template-columns:1fr } }
.jamais li { padding-top:1.15rem; border-top:1px solid var(--hair-2) }
.jamais li b {
  display:block; font-family:var(--display); font-size:var(--t-h3); font-weight:600;
  letter-spacing:-.015em; margin-bottom:.55rem; color:var(--lune);
  font-variation-settings:'opsz' 40;
}
.jamais li span { font-size:var(--t-petit); color:var(--texte-2); line-height:1.6 }

/* ── Mentions de reconduction ──────────────────────────────────────────────
   Apple et Google EXIGENT ce bloc partout où un abonnement est présenté :
   durée, prix, reconduction automatique, et le moyen de résilier. Il est donc
   traité comme du contenu, pas comme une note de bas de page qu'on cache.
   ────────────────────────────────────────────────────────────────────────── */
.mentions {
  margin-top:clamp(38px,5vw,58px); padding:clamp(22px,3vw,32px);
  border:1px solid var(--hair); border-radius:var(--r-l);
  background:color-mix(in srgb, var(--texte) 3%, transparent);
}
.mentions h3 { margin-bottom:.9rem }
.mentions p + p { margin-top:.8rem }