/* =========================================================
   /tarifs.html — l'atelier, en vitrine
   ---------------------------------------------------------
   Trois prix, un panier (mois ou an), les règles. Les montants sont en
   Outfit (--sans) : un nombre se lit, il ne se décore pas.
   ========================================================= */
.tarifs__choix { margin: 0; padding: 0; border: 0; min-width: 0; }

.tarifs__carte {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
}
.tarifs__carte input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tarifs__carte:has(input:checked) {
  border-color: var(--or);
  box-shadow: 0 0 0 1px rgba(212, 177, 90, 0.35), 0 18px 40px -20px rgba(212, 177, 90, 0.35);
}
.tarifs__carte:has(input:focus-visible) { outline: 2px solid var(--or); outline-offset: 3px; }

.tarifs__prix {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(2.1rem, 4.2vw, 2.9rem);
  font-weight: 500;
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1;
  color: var(--or-clair, #e8cc84);
}
.tarifs__prix small { font-size: 0.95rem; font-weight: 300; color: var(--texte-doux); }

.tarifs__badge {
  align-self: flex-start;
  padding: 3px 10px;
  border: 1px solid rgba(212, 177, 90, 0.4);
  border-radius: 999px;
  color: var(--or);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.tarifs__panier {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  margin-top: clamp(22px, 2.8vw, 34px);
  padding: 18px 22px;
  border: 1px solid rgba(212, 177, 90, 0.35);
  border-radius: 10px;
}
.tarifs__ligne { margin: 0; color: var(--texte); }
.tarifs__ligne b {
  font-family: var(--sans);
  font-weight: 500;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--ivoire, #f0ddaa);
}
.tarifs__note { margin-top: 14px; color: var(--texte-doux); font-size: 0.86rem; }

/* ---------- La fiche aperçu par produit ---------- */
.tarifs__fiche { display: flex; flex-direction: column; gap: 10px; }
.tarifs__rubrique {
  margin: 6px 0 0;
  color: var(--or);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.tarifs__liste { margin: 0; padding-left: 1.1em; display: grid; gap: 6px; line-height: 1.55; }
.tarifs__liste--hors { color: var(--texte-doux); }
.tarifs__hors {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  color: var(--texte-doux);
  font-size: 0.86rem;
  font-style: italic;
}

/* ---------- Page de vente (v3) ---------- */
/* La carte des 5 € n'est pas un choix du panier : elle passe par
   l'équipe. Même carte, pas de pastille de sélection. */
.tarifs__carte--fidele { cursor: default; }
.tarifs__action { margin: auto 0 0; padding-top: 6px; }

.tarifs__rampe { margin-top: 8px; color: var(--texte-doux); font-size: 0.8rem; }

.tarifs__etapes { list-style: none; margin: 0; padding: 0; }
.tarifs__etapes .carte { display: flex; flex-direction: column; gap: 8px; }
.tarifs__etape {
  font-family: var(--sans);
  font-size: 1.6rem;
  font-weight: 300;
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1;
  color: var(--or);
}
.tarifs__chiffre {
  font-family: var(--sans);
  font-weight: 500;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--ivoire, #f0ddaa);
  white-space: nowrap;
}

/* ---------- Le Journal Pro : le second cahier, hors du panier ---------- */
.tarifs__pro { margin-top: clamp(28px, 3.4vw, 42px); }
.tarifs__pro h3 { margin: 0; }

/* ---------- COMMENT ON PAIE — affichage seulement -----------------
   Deux moyens au MÊME niveau visuel : la carte (Stripe, pas branchée)
   et la crypto (sur demande, par l'équipe). Ces blocs ne font que
   DIRE : aucune clé Stripe, aucune adresse on-chain, aucun QR, aucun
   portefeuille. Le jour où un vrai paiement existe, c'est ici qu'on
   remplace le bouton fantôme — pas ailleurs.
   Les mêmes règles vivent dans assets/css/tarifs.css (site public) et
   app/css/offre.css (Cercle) : si l'une bouge, l'autre suit. */
.paiement { display: grid; gap: 16px; margin-top: clamp(22px, 2.8vw, 34px); }
.paiement__grille {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 760px) {
  .paiement__grille { grid-template-columns: 1fr; }
}

.paiement__carte {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 22px;
  border: 1px solid rgba(212, 177, 90, 0.35);
  border-radius: var(--radius-lg, 10px);
  background: var(--nuit-carte);
}
.paiement__carte h3,
.paiement__carte h4 {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.2rem;
  color: var(--ivoire, #f0ddaa);
}
.paiement__carte p { margin: 0; line-height: 1.6; color: var(--texte); }

.paiement__etat {
  align-self: flex-start;
  padding: 3px 10px;
  border: 1px solid rgba(212, 177, 90, 0.4);
  border-radius: 999px;
  color: var(--or);
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.paiement__moyens {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
}
.paiement__moyens li {
  padding: 4px 11px;
  border: 1px solid var(--filet);
  border-radius: 999px;
  background: var(--voile-or);
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--texte);
}

.paiement__petit { margin: 0; font-size: 0.82rem; color: var(--texte-doux); }
.paiement__action { margin: auto 0 0; padding-top: 4px; }
.paiement__mention { margin: 0; color: var(--texte-doux); font-size: 0.86rem; }
.paiement .btn[disabled] { opacity: 0.55; cursor: not-allowed; }

/* ---------- L'en-tête qui vend : serrée, et les prix dedans ----------
   Le premier écran doit porter les trois montants. L'en-tête respire
   ailleurs sur le site ; ici elle se resserre pour que 14,90 · 5 · 29
   soient lus sans un seul coup de molette, à 1440 comme à 390. */
.entete-page--vente {
  padding-block: clamp(26px, 3.6vw, 56px) clamp(18px, 2.4vw, 30px);
}
.entete-page--vente .fil { margin-bottom: 1rem; }
.entete-page--vente .surtitre { margin-bottom: 0.5rem; }

.vente__h1 {
  max-width: 22ch;
  margin: 0;
  font-size: clamp(1.9rem, 4.6vw, 3rem);
  line-height: 1.08;
}
.vente__chapo {
  max-width: 62ch;
  margin: 14px 0 0;
  font-size: clamp(0.98rem, 1.5vw, 1.1rem);
  line-height: 1.5;
  color: var(--texte);
}

.prixstrip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px clamp(18px, 2.6vw, 34px);
  margin: clamp(20px, 2.6vw, 28px) 0 0;
  padding: clamp(14px, 1.8vw, 20px) 0 0;
  border-top: 1px solid var(--filet);
}
.prixstrip__item { display: grid; gap: 3px; margin: 0; }
.prixstrip__cap {
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--or);
}
.prixstrip__montant {
  font-family: var(--sans);
  font-size: clamp(1.9rem, 4.4vw, 2.7rem);
  font-weight: 500;
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1;
  color: var(--or-clair, #e8cc84);
}
.prixstrip__montant small { font-size: 0.34em; font-weight: 300; color: var(--texte-doux); }
.prixstrip__note { color: var(--texte-doux); font-size: 0.82rem; }
@media (max-width: 700px) {
  .prixstrip { grid-template-columns: 1fr 1fr; }
  .prixstrip__item:last-child { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
  .prixstrip { grid-template-columns: 1fr; gap: 10px; }
  .prixstrip__item:last-child { grid-column: auto; }
  .prixstrip__montant { font-size: 1.9rem; }
}

/* Ce que le cours offre, chiffré aux prix affichés — pas une « valeur »
   sortie de nulle part : 12 × 14,90 € + 3 × 29 € = 265,80 €. */
.tarifs__or {
  margin: 10px 0 0;
  color: var(--or-clair, #e8cc84);
  font-size: 0.9rem;
  line-height: 1.5;
}
.tarifs__or b { font-family: var(--sans); font-weight: 500; font-variant-numeric: lining-nums tabular-nums; }
.tarifs__calcul { color: var(--texte-doux); font-size: 0.86em; white-space: nowrap; }

/* Le prix à l'année de la fidélité, juste sous le prix au mois. */
.tarifs__an {
  margin: 4px 0 0;
  color: var(--texte-doux);
  font-size: 0.9rem;
}

/* La remise crypto, dans la carte crypto. */
.paiement__remise {
  margin: 0;
  color: var(--or-clair, #e8cc84);
  font-size: 0.9rem;
  line-height: 1.5;
}


/* =========================================================
   Cadres d'écran — figure.cadre  (/assets/img/offre/)
   ---------------------------------------------------------
   Un cadre qui se tient tout seul : si le fichier manque, il passe
   en pointillé or et affiche SON NOM au centre, jamais l'icône
   d'image cassée du navigateur, et jamais moins de 280 px de haut —
   un écran de produit n'est pas un timbre. La légende est un vrai
   <figcaption> d'une ligne, sous le cadre.
   Ces mêmes règles vivent dans assets/css/tarifs.css,
   assets/css/univers.css et app/css/offre.css : si l'une bouge,
   les autres suivent.
   ========================================================= */
.cadre { margin: 0; display: grid; gap: 10px; align-content: start; }
.cadre__boite {
  position: relative;
  display: grid;
  min-height: 280px;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--filet);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(12, 23, 40, 0.5);
}
.cadre__boite img {
  grid-area: 1 / 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cadre__nom { display: none; }

.cadre__boite[data-vide="true"] {
  place-items: center;
  padding: 18px;
  border: 1px dashed rgba(232, 197, 106, 0.55);
  background: rgba(232, 197, 106, 0.03);
}
.cadre__boite[data-vide="true"] img { display: none; }
.cadre__boite[data-vide="true"] .cadre__nom {
  display: block;
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  line-height: 1.6;
  text-align: center;
  color: var(--acc-or, #e8c56a);
  overflow-wrap: anywhere;
}
.cadre__legende { margin: 0; color: var(--texte-doux); font-size: 0.88rem; line-height: 1.45; }

.cadre--large .cadre__boite { aspect-ratio: 21 / 9; min-height: 320px; }
@media (max-width: 760px) {
  .cadre--large .cadre__boite { aspect-ratio: 16 / 10; min-height: 280px; }
}


/* ---------- La loupe des cadres (assets/js/cadre-loupe.js) ----------
   Le cadre recadre (object-fit: cover, centré) ; le clic rend l'image
   entière. Un cadre vide ne s'ouvre pas : son curseur ne le promet pas.
   Ces règles vivent dans assets/css/tarifs.css, assets/css/univers.css
   et app/css/offre.css : si l'une bouge, les autres suivent. */
/* Le haut de la capture porte le titre et les onglets : on ancre en
   haut plutôt qu'au milieu, et on laisse le centre horizontal — c'est
   là qu'est le sujet (la liste, la modale), pas dans le rail gauche. */
.cadre__boite img { object-position: center top; }
.cadre__boite:not([data-vide="true"]) img { cursor: zoom-in; }
.cadre__boite:not([data-vide="true"]) img:focus-visible {
  outline: 2px solid var(--or);
  outline-offset: -4px;
}

.cadreloupe {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: grid;
  place-items: center;
  gap: 14px;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(3, 8, 20, 0.92);
  backdrop-filter: blur(3px);
}
.cadreloupe[hidden] { display: none; }
.cadreloupe__cadre {
  margin: 0;
  display: grid;
  gap: 12px;
  justify-items: center;
  max-width: min(1400px, 100%);
}
.cadreloupe__cadre img {
  display: block;
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  height: auto;
  border: 1px solid var(--filet);
  border-radius: 12px;
  background: var(--nuit-carte);
  cursor: default;
}
.cadreloupe__legende {
  max-width: 70ch;
  text-align: center;
  color: var(--texte-doux);
  font-size: 0.9rem;
  line-height: 1.5;
}
.cadreloupe__fermer {
  position: absolute;
  top: clamp(10px, 2vw, 22px);
  right: clamp(10px, 2vw, 22px);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--filet);
  border-radius: 999px;
  background: rgba(12, 23, 40, 0.8);
  color: var(--or-clair, #e8cc84);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}
.cadreloupe__fermer:hover { border-color: var(--or); }

/* La page derrière ne défile plus tant que l'image est ouverte. */
.cadreloupe-ouverte, .cadreloupe-ouverte body { overflow: hidden; }