/* ============================================================================
ds.css — extension design system labo-rnp (rebuild site-v2)
Additif à shell.css : atomes canoniques que les pages NE redéfinissent JAMAIS.
Chargé après shell.css. Verrouillé atome par atome avec Vincent.
============================================================================ */
/* ====================== PILLS · SWITCH · FILTRES =======================
VERROUILLÉ 2026-06-12. Promu de particuliers V1 (.p1-tab).
Un seul composant pour : switch profils, filtres témoignages/blog, bascule offre.
API : .pills (conteneur) > .pill (+ .on actif) · modifs : .sm .on-dark · .pill.accent
Compteur : N dans la pill. */
.pills{display:inline-flex;gap:6px;border:1px solid var(--rule);border-radius:999px;padding:5px;background:var(--paper-2);max-width:100%;overflow-x:auto;scrollbar-width:none}
.pills::-webkit-scrollbar{display:none}
.pill{flex:none;display:inline-flex;align-items:center;gap:8px;border:0;background:none;cursor:pointer;font-family:'Inter',sans-serif;font-weight:600;font-size:14.5px;line-height:1;color:var(--ink-2);border-radius:999px;padding:11px 20px;white-space:nowrap;transition:background .22s var(--ease-out),color .22s var(--ease-out)}
.pill:hover{color:var(--ink)}
.pill.on{background:var(--navy);color:#fff;box-shadow:0 6px 16px -10px rgba(21,25,44,.6)}
.pill .n{font-weight:600;font-size:12px;opacity:.6}
.pill.on .n{opacity:.8}
.pills.sm{padding:4px}
.pills.sm .pill{font-size:13px;padding:8px 15px}
.pills.on-dark{border-color:var(--rule-navy);background:rgba(255,255,255,.05)}
.pills.on-dark .pill{color:var(--on-navy-2)}
.pills.on-dark .pill:hover{color:#fff}
.pills.on-dark .pill.on{background:#fff;color:var(--navy);box-shadow:0 6px 18px -8px rgba(0,0,0,.5)}
.pills .pill.on.accent{background:var(--blue)}
/* ====================== RADIUS (échelle normalisée) ===================
VERROUILLÉ 2026-06-12. Collapse des 14 radius du canon → 3 tokens + pill.
card 22 (absorbe 18/20/24) · feature 26 · média/chip 14 · pill 999. */
:root{--r-card:22px;--r-feature:26px;--r-media:14px}
/* ====================== CARD (surface unique) ========================
VERROUILLÉ 2026-06-12. Matché canon : témoignages V1 (r22) + offres V2 (r26 feature).
API : .card (déf r22) · modifs : .dark .feature .raised .link .pad-lg .pad-sm
Chip métier : .tag (+ .on-dark). Médias internes : border-radius:var(--r-media). */
.card{position:relative;display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-card);padding:clamp(24px,2.6vw,32px);transition:border-color .25s var(--ease-out),transform .25s var(--ease-out),box-shadow .25s var(--ease-out)}
.card.pad-lg{padding:clamp(30px,4vw,48px)}
.card.pad-sm{padding:clamp(16px,1.8vw,22px)}
.card.dark{background:linear-gradient(165deg,rgba(34,43,94,.55),rgba(15,20,48,.35));border-color:var(--rule-navy);color:var(--on-navy)}
.card.feature{border:0;border-radius:var(--r-feature);background:radial-gradient(120% 90% at 80% -10%,rgba(59,109,247,.3),transparent 55%),linear-gradient(165deg,var(--navy),var(--navy-4));color:#fff;box-shadow:0 60px 130px -70px rgba(15,20,48,.75)}
.card.raised{border-color:transparent;box-shadow:var(--shadow-img)}
.card.link{cursor:pointer}
.card.link:hover{transform:translateY(-3px);border-color:var(--blue);box-shadow:0 18px 38px -22px rgba(21,25,44,.5)}
.card.dark.link:hover{border-color:var(--blue-lite)}
.tag{align-self:flex-start;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;border-radius:999px;padding:5px 11px;color:var(--blue-ink);background:var(--blue-tint)}
.tag.on-dark{color:var(--blue-lite);background:none;border:1px solid var(--rule-navy)}
/* ====================== SECTION HEADER ===============================
VERROUILLÉ 2026-06-12. Eyebrow SANS tiret/tick (banni). Titre Anton 400.
API : .sec-head > .sec-eye (label uppercase, pas de ligne) + .sec-h (Anton) + .sec-lead
modifs : .center · .on-dark · eyebrow accent optionnel .sec-eye.accent (bleu) */
.sec-head{max-width:62ch}
.sec-eye{display:inline-block;text-transform:uppercase;letter-spacing:.18em;font-size:11px;font-weight:600;color:var(--ink-3);margin-bottom:16px}
.sec-eye.accent{color:var(--blue)}
.sec-h{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:-.018em;line-height:1.03;font-size:clamp(30px,3.6vw,52px);color:var(--ink);text-wrap:balance;max-width:20ch}
.sec-lead{margin-top:16px;font-size:var(--fs-lead);line-height:var(--lh-lead);color:var(--ink-body);max-width:var(--measure)}
.sec-head.center{text-align:center;margin-inline:auto}
.sec-head.center .sec-h,.sec-head.center .sec-lead{margin-inline:auto}
.sec-head.on-dark .sec-eye{color:var(--on-navy-3)}
.sec-head.on-dark .sec-h{color:#fff}
.sec-head.on-dark .sec-lead{color:var(--on-navy-2)}
/* ====================== STAT / COUNT-UP ==============================
VERROUILLÉ 2026-06-12. Promu nv01 V2 / particuliers preuve. Count-up via data-count (motion.js).
API : .stat > .stat-n (Anton + .u unité) + .stat-l (label) · tailles .lg .xl · .on-dark
Count-up : + */
.stat{display:flex;flex-direction:column;gap:6px;max-width:24ch}
.stat-n{font-family:'Anton',sans-serif;font-weight:400;font-size:clamp(30px,3.6vw,46px);line-height:.96;color:var(--ink);display:inline-flex;align-items:baseline;gap:2px;white-space:nowrap;font-variant-numeric:tabular-nums}
.stat-n .u{font-size:.55em;color:var(--blue-ink);font-weight:400}
.stat-l{font-size:13px;line-height:1.4;color:var(--ink-3)}
.stat.lg .stat-n{font-size:clamp(44px,5.6vw,72px)}
.stat.xl .stat-n{font-size:clamp(64px,8vw,118px);letter-spacing:-.01em;line-height:.92}
.stat.on-dark .stat-n{color:#fff}
.stat.on-dark .stat-n .u{color:var(--blue-lite)}
.stat.on-dark .stat-l{color:var(--on-navy-3)}
/* ====================== TAILLES BOUTONS ==============================
VERROUILLÉ 2026-06-12. Système cta-* de shell.css inchangé (couleurs). Ajout tailles seules.
.cta (déf md, 52px) · .cta.sm (44px) · .cta.lg (58px) */
.cta.sm{min-height:44px;padding-inline:var(--s5);font-size:14px;gap:8px}
.cta.lg{min-height:58px;padding-inline:var(--s7);font-size:16.5px}
/* press au clic (interaction canonique bouton : flèche glisse au survol via shell.css .host, bouton s'enfonce au clic) */
.cta{transition:background .25s var(--ease-soft),box-shadow .25s var(--ease-soft),transform .12s var(--ease-soft)}
.cta:active{transform:translateY(1px) scale(.985)}
/* ====================== FONDS & SÉQUENCEMENT =========================
VERROUILLÉ 2026-06-12 (révisé après panel Tekton/Clio/DA).
Principe : MONO-CLAIR editorial + 1 plongée sombre cinématique (le parcours).
Le dark suit l'ARC narratif (entrée / cœur / sortie), pas un compteur. */
:root{
--bg:var(--paper); /* base claire = fond par défaut de presque toutes les sections */
--bg-dark:var(--navy-4); /* le sombre : hero (entrée), parcours (cœur immersif), CTA (sortie) */
--bg-tint:var(--blue-tint); /* surbrillance douce, rare */
/* NB : paper-2 N'EST PLUS un rythme de fond (2% de luminance = bruit invisible).
Il reste réservé aux SURFACES ENCADRÉES (cards/pills/inputs). */
}
.sec-light{background:var(--bg)}
.sec-dark{background:var(--bg-dark);color:var(--on-navy)}
/* séparation entre 2 sections claires = espace + filet + largeur, PAS un changement de fond */
.sec-rule{border-top:1px solid var(--rule)}
.sec-pad{padding-block:var(--section)} /* clamp 96-200px */
/* RÈGLES (appliquées par le run) :
1. Base = sec-light partout. On NE zèbre PAS clair/clair par des fonds.
Deux sections claires se séparent par l'espace (.sec-pad), un filet (.sec-rule),
ou un changement de largeur/layout (full-bleed vs --measure).
2. Le dark suit l'arc, 2-3 moments NARRATIFS max :
- entrée = hero dark
- cœur = LE parcours (1 seul grand massif sombre immersif, scroll-piné) — le climax
- sortie = CTA final (dark assumé OU card.feature claire selon page)
La PREUVE reste CLAIRE (stats noir sur blanc = crédibilité/rigueur).
3. Jamais 2 sections dark adjacentes (sauf hero+stats = bloc d'ouverture).
4. nonmed = dark, fusionné dans le footer.
5. duo (image duotone) compte comme un moment dark dans le budget.
3 PROFILS DE PAGE (le séquencement n'est PAS universel) :
- NARRATIF (pros, particuliers, equipe, temoignages) : arc ci-dessus.
- LANDING-PRIX (nv01, nv02) : l'ancrage dark se pose sur PRIX/PROGRAMME (le moment d'achat),
pas sur la preuve ; la preuve s'intègre en clair, près du prix.
- MONO (espace-membre login, intro-rnp hero-only, blog-article long-read) :
UN seul fond, aucune alternance (anti-bruit de lecture). */