/* scripts/_partials/paywall.css — Mur d'accès (paywall) réutilisable, articles vitrine.
   Introduit ops-S24 (25/08/2026), extrait en partial ops-S24 (même session) pour
   réutilisation C2+. Réutilise uniquement les tokens définis dans le :root de chaque
   article (--navy/--forest/--forest-dark/--muted/--line/--paper2/--font-main) —
   aucune nouvelle valeur de couleur/police introduite. Servi en <link> externe
   (comme components.css) plutôt qu'inliné, pour rester compatible script-src/style-src
   si le CSP passe un jour de Report-Only à enforcing.

   Phase de validation (cf. CdC §11 D-25-08-2026-VITRINE-MUR-INSCRIPTION, boussole-doctrine) :
   mur côté client uniquement, ne protège pas le HTML lui-même (view-source/scraper/SEO).
   À durcir (Edge Middleware) avant tout lancement payant réel.

   Couverture dark mode : 6 règles (.hero-reserved-badge, .paywall-wall, .paywall-wall-head,
   .paywall-google-btn, .paywall-divider::before/::after, .paywall-form button/.paywall-cta)
   vivent dans scripts/_partials/paywall-darkmode.css, PAS ici — scripts/ est exclu du scan
   de scripts/audit_darkmode.py (HTML_EXCLUDE_DIRS), donc une annotation darkmode-auto
   placée dans ce fichier .css ne serait jamais détectée par sync_darkmode_autogen.py.
   inject_paywall.py injecte paywall-darkmode.css TEXTUELLEMENT (inline, <style>) dans
   chaque article sous mur pour que le scan la trouve (incident vit-S733, 21/08/2026 —
   corrigé ops-S24 25/08/2026, ne pas reproduire l'erreur inverse).

   Pour activer sur un nouvel article : voir scripts/inject_paywall.py +
   scripts/gated-articles.json. Le wrapper <div class="gated-content" id="gated-content">
   autour du contenu à protéger reste TOUJOURS placé à la main par l'auteur (décision
   éditoriale : où commence le contenu réservé) — l'injecteur ne le crée jamais. */

.hero-wrap { position:relative; margin:34px 0 42px; }
.hero-wrap .hero-img { margin:0; }
.paywall-wall-head p { margin:0; font-size:15px; font-weight:700; color:var(--navy); }
.paywall-columns { display:grid; grid-template-columns:1fr 1fr; }
@media (max-width:560px) { .paywall-columns { grid-template-columns:1fr; } }
.paywall-col { padding:24px; }
.paywall-col + .paywall-col { border-left:1px solid var(--line); }
@media (max-width:560px) { .paywall-col + .paywall-col { border-left:none; border-top:1px solid var(--line); } }
.paywall-col-label { font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:14px; }
.paywall-col-desc { font-size:13px; color:var(--muted); line-height:1.55; margin:0 0 14px; }
.paywall-google-btn:hover { background:rgba(6,23,45,0.03); }
.paywall-divider { display:flex; align-items:center; gap:10px; margin:0 0 14px; }
.paywall-divider span { font-size:12px; color:var(--muted); white-space:nowrap; }
.paywall-form { display:flex; flex-direction:column; gap:10px; }
.paywall-form input { padding:10px 12px; border:1px solid var(--line); border-radius:8px; font-size:14px; font-family:var(--font-main); }
.paywall-form button:hover, .paywall-cta:hover { background:var(--forest-dark); }
.paywall-error { font-size:13px; color:#c0392b; margin:6px 0 0; display:none; }
.gated-content.is-hidden { display:none; }

/* ── vit-S774 (29/08/2026) — inscription gratuite dans le mur ──────────────────
   Jusqu'ici le mur ne proposait que « se connecter » (mot de passe, sans
   récupération) et un CTA vers la liste d'attente Boussole+ : aucun parcours ne
   menait au contenu (1 seul profil sur 103 portait vitrine_subscriber). La
   colonne gauche porte désormais la création d'accès (Google ou lien magique),
   la droite le repli mot de passe pour les comptes issus de l'application.
   Toutes les valeurs ci-dessous sont des tokens surchargés par dark-mode.css
   (--muted, --navy, --forest) : aucune couleur en dur, donc aucune règle dark
   mode supplémentaire à promouvoir (§99 couvre déjà les 8 familles du mur).
   Note : la règle .paywall-cta subsiste ici et dans dark-mode.css §99 alors que
   le HTML ne l'utilise plus, le CTA waitlist ayant été retiré. Conservée
   volontairement : la retirer imposerait de toucher §99 et de rejouer la
   promotion dark mode pour un gain nul. */
.paywall-wall-sub { margin:6px 0 0; font-size:13px; font-weight:500; color:var(--muted); }
.paywall-hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.paywall-consent { display:flex; align-items:flex-start; gap:8px; font-size:12.5px; line-height:1.5; color:var(--muted); cursor:pointer; }
.paywall-consent input { margin:2px 0 0; flex:none; accent-color:var(--forest); }
.paywall-note { margin:12px 0 0; font-size:12.5px; line-height:1.5; color:var(--muted); }
.paywall-status { margin:10px 0 0; font-size:13px; line-height:1.5; color:var(--navy); display:none; }
.paywall-status.is-visible { display:block; }
.paywall-status.is-error { color:#c0392b; }
.paywall-linkbtn { display:inline-block; margin:10px 0 0; padding:0; background:none; border:none; font-family:var(--font-main); font-size:12.5px; color:var(--muted); text-decoration:underline; cursor:pointer; }
.paywall-linkbtn:hover { color:var(--navy); }

/* vit-S774 — étape 2 du parcours : saisie du code reçu par email. Le formulaire
   d'envoi et celui du code occupent la même place, l'un masqué par [hidden] :
   .paywall-form étant en display:flex, la règle explicite est nécessaire. */
.paywall-form[hidden], .paywall-linkbtn[hidden] { display:none; }
#paywall-code { letter-spacing:.3em; text-align:center; font-size:17px; font-weight:700; }

/* vit-S816 — a11y : les 3 champs saisis du mur ne portaient qu'un `placeholder`,
   qui n'est PAS un nom accessible (il disparait a la saisie et n'est pas lu comme
   etiquette par tous les lecteurs d'ecran). Le mur etant partage par les 11 episodes
   de la serie, le defaut y etait multiplie par 11. /connexion/ portait deja ses 4
   labels : c'est son modele qui est repris ici. Label VISUELLEMENT masque plutot que
   visible, pour ne rien changer au rendu d'une surface de conversion : le correctif
   est d'accessibilite, pas de design. Definition identique a `.visually-hidden` de
   index.html (l.959), qui sert deja au label du formulaire newsletter. */
.paywall-wall .visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}