/* ============================================================================
   pf-landing-vision.css — feuille de base de la vitrine publique « / ».

   ORIGINE : ce fichier est le bloc <style> historique de
   pulsiforms_landing_vision.html (l. 59-156), sorti TEL QUEL, sans retouche.
   Motif : fermeture du finding pentest PF-0001 — « 'unsafe-inline' present
   dans style-src ». Une page sans <style> ni attribut style= permet de servir
   style-src 'self' https://fonts.googleapis.com, donc SANS 'unsafe-inline'.

   ORDRE DE CHARGEMENT — NE PAS INVERSER. Cette feuille doit rester declaree
   AVANT pf-landing-2026.css : l'elevation premium surcharge « par cascade sans
   !important ». Inverser les deux <link> annulerait toute l'elevation, en
   silence. Verrou : [LV-04] dans
   tests/regression/landing-vision-inline-style-parity.test.js.

   ROLLBACK : recoller ce contenu dans un <style> de la page et remettre
   'unsafe-inline' dans le style-src de « / » et
   « /pulsiforms_landing_vision.html » (netlify.toml).
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;1,300&family=DM+Serif+Display:ital@0;1&display=swap');
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --gold:#6D5DFC;--gold-l:#8275FF;--gold-p:#C7BCFF;--gold-faint:rgba(109,93,252,0.08);
  --aub:#3a1245;--aub-m:#5C2E70;--aub-l:#8B5CA0;
  --g1:#09090b;--g2:#15121c;--g3:#221b2c;
  --gray:#a1a1aa;--gray-l:#d4d4d8;
  --white:#F5F5F2;
}
body{font-family:'DM Sans',sans-serif;background:var(--g1);color:var(--white);line-height:1.7;position:relative}
body::before{content:'';position:fixed;inset:0;z-index:0;background:radial-gradient(ellipse 120% 55% at 50% 0%,#1d0a24 0%,#09090b 55%);pointer-events:none}

.page{position:relative;z-index:1;max-width:820px;margin:0 auto;padding:0 28px 80px}

/* Hero */
.hero{padding:72px 0 56px;text-align:center;position:relative}
.hero-badge{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:500;letter-spacing:0.12em;text-transform:uppercase;color:var(--gold);border:1px solid rgba(109,93,252,0.35);border-radius:20px;padding:5px 14px;margin-bottom:32px}
.hero-badge .dot{width:6px;height:6px;border-radius:50%;background:var(--gold);animation:blink 2s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0.3}}
.hero h1{font-family:'DM Serif Display',serif;font-size:clamp(36px,6vw,58px);font-weight:400;line-height:1.12;letter-spacing:-0.01em;margin-bottom:12px;color:var(--white)}
.hero h1 em{font-style:italic;color:var(--gold)}
.hero-sub{font-size:17px;font-weight:300;color:var(--gray-l);max-width:560px;margin:0 auto 14px;line-height:1.6}
.hero-tag{font-size:13px;font-weight:400;color:var(--gray);font-style:italic;margin-bottom:40px}
.hero-cta{display:inline-flex;gap:12px;flex-wrap:wrap;justify-content:center}
.btn-gold{font-family:'DM Sans',sans-serif;font-size:13px;font-weight:500;letter-spacing:0.04em;padding:11px 26px;border-radius:10px;border:none;background:var(--gold);color:var(--g1);cursor:pointer;transition:all .2s}
.btn-gold:hover{background:var(--gold-l);transform:translateY(-1px)}
.btn-ghost{font-family:'DM Sans',sans-serif;font-size:13px;font-weight:500;letter-spacing:0.04em;padding:11px 26px;border-radius:10px;border:1px solid rgba(109,93,252,0.4);background:transparent;color:var(--gold-p);cursor:pointer;transition:all .2s}
.btn-ghost:hover{border-color:var(--gold);background:rgba(109,93,252,0.07)}
.hero-divider{width:60px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin:52px auto 0}

/* Statement */
.statement{padding:52px 0;text-align:center}
.statement p{font-family:'DM Serif Display',serif;font-size:clamp(20px,3.5vw,26px);font-weight:400;font-style:italic;color:var(--gray-l);line-height:1.55;max-width:640px;margin:0 auto}
.statement strong{color:var(--gold-p);font-style:normal;font-weight:400}

/* Modules grid */
.section-label{font-size:10px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:var(--gold);margin-bottom:10px;text-align:center}
.section-title{font-family:'DM Serif Display',serif;font-size:clamp(24px,4vw,34px);font-weight:400;text-align:center;margin-bottom:8px;color:var(--white)}
.section-sub{font-size:14px;color:var(--gray);text-align:center;margin-bottom:40px;line-height:1.6}

.modules{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2px;border-radius:14px;overflow:hidden;margin-bottom:80px}
.mod{background:var(--g2);padding:28px 24px;position:relative;transition:background .2s;cursor:pointer}
.mod:hover{background:var(--g3)}
.mod-icon{font-size:22px;margin-bottom:14px;display:block}
.mod-name{font-size:13px;font-weight:600;color:var(--gold-l);letter-spacing:0.04em;margin-bottom:6px;text-transform:uppercase;font-size:11px}
.mod-desc{font-size:13px;color:var(--gray-l);line-height:1.55;font-weight:300}
.mod::after{content:'';position:absolute;top:0;left:0;width:2px;height:0;background:var(--gold);transition:height .3s}
.mod:hover::after{height:100%}

/* Pilliers */
.pillars{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:80px}
@media(max-width:520px){.pillars{grid-template-columns:1fr}}
.pillar{border:1px solid rgba(109,93,252,0.15);border-radius:12px;padding:24px;background:var(--gold-faint);transition:border-color .2s}
.pillar:hover{border-color:rgba(109,93,252,0.4)}
.pillar-title{font-size:14px;font-weight:500;color:var(--gold-p);margin-bottom:6px}
.pillar-text{font-size:13px;color:var(--gray-l);font-weight:300;line-height:1.6}

/* Mantra */
.mantra{padding:56px 0;text-align:center;border-top:1px solid rgba(109,93,252,0.12);border-bottom:1px solid rgba(109,93,252,0.12);margin-bottom:72px}
.mantra-lines{display:flex;flex-direction:column;gap:4px;margin-bottom:28px}
.mantra-line{font-size:clamp(14px,2.5vw,17px);color:var(--gray);font-weight:300}
.mantra-line span{color:var(--gold-p);font-weight:400}

/* Closing */
.closing{text-align:center;padding:20px 0}
.closing h2{font-family:'DM Serif Display',serif;font-size:clamp(28px,5vw,44px);font-weight:400;line-height:1.2;margin-bottom:16px}
.closing h2 em{color:var(--gold);font-style:italic}
.closing p{font-size:15px;color:var(--gray-l);font-weight:300;margin-bottom:36px;line-height:1.7;max-width:540px;margin-left:auto;margin-right:auto}
.closing-tag{font-family:'DM Serif Display',serif;font-size:13px;font-style:italic;color:var(--gold);letter-spacing:0.06em;margin-top:40px;opacity:0.8}

/* Chaîne de livraison (canevas → .ps1 → MSIX) */
.flow{display:flex;align-items:stretch;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:36px}
.flow-step{flex:1 1 150px;min-width:150px;border:1px solid rgba(109,93,252,0.15);border-radius:12px;padding:18px 16px;background:var(--gold-faint);text-align:center}
.flow-step .fs-k{font-size:10px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.flow-step .fs-t{font-size:14px;color:var(--white);font-weight:500;margin-bottom:4px}
.flow-step .fs-d{font-size:12px;color:var(--gray);font-weight:300;line-height:1.5}

/* Bandeau de mesures (run de stabilité) */
/* 4 colonnes fixes (et non auto-fit) : auto-fit dégradait en 3+1, laissant une
   tuile orpheline sur les largeurs intermédiaires. On dégrade 4 → 2+2 → 1. */
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;border-radius:14px;overflow:hidden;margin-bottom:24px}
@media(max-width:700px){.metrics{grid-template-columns:1fr 1fr}}
@media(max-width:340px){.metrics{grid-template-columns:1fr}}
.metric{background:var(--g2);padding:22px 16px;text-align:center}
.metric-val{font-family:'DM Serif Display',serif;font-size:clamp(22px,4vw,30px);color:var(--gold-p);line-height:1.1;display:block;margin-bottom:6px}
.metric-lbl{font-size:11px;color:var(--gray);font-weight:300;line-height:1.45;display:block}
.proof-note{font-size:12px;color:var(--gray);font-weight:300;text-align:center;line-height:1.65;max-width:620px;margin:0 auto 80px}

/* Separator */
.sep{width:100%;height:1px;background:linear-gradient(90deg,transparent,rgba(109,93,252,0.2),transparent);margin:64px 0}

/* Footer légal */
.pf-foot{position:relative;z-index:1;max-width:820px;margin:0 auto;padding:28px;border-top:1px solid rgba(109,93,252,0.12);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:12px;color:var(--gray)}
.pf-foot nav{display:flex;gap:16px;flex-wrap:wrap}
.pf-foot a{color:var(--gray-l);text-decoration:none;transition:color .15s}
.pf-foot a:hover{color:var(--gold)}

/* ── Classes utilitaires — conversion des 15 attributs style= d'origine ──────
   POURQUOI DES SELECTEURS COMPOSES. Un style inline bat tout selecteur simple.
   En redescendant dans la cascade, `margin-bottom:36px` se serait fait ecraser
   par la regle de base `.section-sub{margin-bottom:40px}` (l. 98). Chaque regle
   ci-dessous est donc composee (0-2-0 ou 0-2-1), strictement plus specifique
   que la regle de base qu'elle doit battre — c'est ce qui reproduit a
   l'identique la priorite qu'avait l'attribut style=.
   Verrou de parite declaration par declaration : [LV-06] (meme fichier de test).
   ─────────────────────────────────────────────────────────────────────────── */
.section-title em.pf-em-gold{font-style:italic;color:var(--gold)}
.section-sub.pf-mb-36{margin-bottom:36px}
.section-sub.pf-mb-32{margin-bottom:32px}
.pillars.pf-mb-44{margin-bottom:44px}
.pillars.pf-mb-48{margin-bottom:48px}
.statement.pf-pb-44{padding:0 0 44px}
.statement.pf-pb-40{padding:0 0 40px}
.statement.pf-pb-8{padding:0 0 8px}
.proof-note strong.pf-strong-gold{color:var(--gold-p);font-weight:400}
.statement em.pf-em-italic{font-style:italic}