/* ============================================================
   NEREVA DESIGN SYSTEM v2 — ds.css
   Grammaire des mockups premium (.pw), profondeur (.elev),
   splits texte+visuel (.dsx), cartes bénéfices (.ncard),
   grille équipe (.team2). Synthèse du panel de design 2026-07-15
   (base « élévation pure » + greffes jury).
   RÈGLE : ce fichier est ADDITIF — aucun sélecteur ne doit
   écraser les styles v1 des pages. Préfixes réservés :
   pw- dsx elev ncard team2 hstats hx.
   ============================================================ */

:root{
  --pw-ink:#0C0E12; --pw-mute:#565E6E; --pw-faint:#667085;
  --pw-line:#E8EAF0; --pw-pale:#F1F4FA; --pw-soft:#F6F7FB;
  --pw-blue:#356BFD; --pw-blue-ink:#2E52D6; --pw-blue-hi:#4C7BFF; --pw-blue-deep:#2851C2;
  --pw-good:#1FA971; --pw-good-ink:#177A52; --pw-good-bg:#E9F7F0;
  --pw-rust:#E2654B; --pw-rust-ink:#C24E36; --pw-rust-bg:#F6E9E4;
  --pw-cons:#FFC400; --pw-cons-ink:#806000; --pw-cons-bg:#FFF4D6;
  --pw-slate:#14171E; --pw-slate-line:rgba(255,255,255,.09);
  --pw-r:18px; --pw-r-sm:12px;
  --pw-sh-rest:0 1px 2px rgba(12,14,18,.06),0 24px 48px -24px rgba(12,14,18,.45),0 64px 120px -48px rgba(40,81,194,.28);
  --pw-sh-sat:0 4px 10px -4px rgba(12,14,18,.18),0 18px 40px -16px rgba(12,14,18,.5);
  --pw-mono:ui-monospace,'Cascadia Mono','Segoe UI Mono',Menlo,monospace;
}

/* ---------- PROFONDEUR : cartes qui flottent ---------- */
.elev{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;will-change:transform}
/* contexte sombre (carte ardoise sur bande noire) */
.elev-d{background:var(--pw-slate);border:1px solid var(--pw-slate-line);border-radius:var(--pw-r);
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 20px 40px -24px rgba(0,0,0,.8)}
.elev-d:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.16);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 30px 60px -26px rgba(0,0,0,.9)}
/* contexte clair (carte blanche sur bande blanche/douce) */
.elev-l{background:#fff;border:1px solid var(--pw-line);border-radius:var(--pw-r);
  box-shadow:0 1px 2px rgba(12,14,18,.05),0 18px 38px -26px rgba(12,14,18,.35)}
.elev-l:hover{transform:translateY(-3px);
  box-shadow:0 1px 2px rgba(12,14,18,.05),0 28px 54px -28px rgba(12,14,18,.42)}
@media(prefers-reduced-motion:reduce){.elev,.elev:hover{transition:none;transform:none}}

/* ---------- SPLIT texte + visuel ---------- */
.dsx{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(34px,5vw,72px);align-items:center}
.dsx-txt{min-width:0}
.dsx-fig{min-width:0}
.dsx-fig .pw-scene{max-width:600px;margin:0 auto}
.dsx.rev .dsx-txt{grid-column:2;grid-row:1}
.dsx.rev .dsx-fig{grid-column:1;grid-row:1}
@media(max-width:920px){
  .dsx{grid-template-columns:1fr;gap:34px}
  .dsx.rev .dsx-txt{grid-column:auto;grid-row:auto}
  .dsx.rev .dsx-fig{grid-column:auto;grid-row:auto}
}

/* ---------- HERO : rangée de stats sous les CTA ---------- */
.hstats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px clamp(18px,3vw,40px);margin-top:34px}
.hstats b{display:block;font-family:'Space Grotesk','SG',sans-serif;font-size:1.55rem;font-weight:700;color:#fff;line-height:1}
.hstats span{display:block;margin-top:6px;font-size:.84rem;color:var(--pw-faint)}
.bandw .hstats b,.hstats.on-l b{color:var(--pw-ink)}
/* mot d'accent dans le H1 (un seul par page) */
.hx{color:var(--pw-blue-hi)}

/* ---------- SCÈNE MOCKUP (composition) ---------- */
.pw-scene{position:relative;padding:26px 30px 34px}
.pw-scene .halo{position:absolute;inset:-8% -12%;background:radial-gradient(closest-side,rgba(53,107,253,.16),transparent 72%);pointer-events:none;z-index:0}
.pw-scene>*{position:relative;z-index:1}

/* ---------- FENÊTRE PRODUIT .pw ---------- */
.pw{background:#fff;border:1px solid var(--pw-line);border-radius:var(--pw-r);box-shadow:var(--pw-sh-rest);overflow:hidden;color:var(--pw-ink)}
.pw-bar{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--pw-pale)}
.pw-bar i{width:9px;height:9px;border-radius:50%;background:#E3E7F0;flex:none}
.pw-url{flex:1;text-align:center;font-family:var(--pw-mono);font-size:.66rem;letter-spacing:.08em;color:var(--pw-faint);background:var(--pw-pale);border-radius:8px;padding:5px 12px;margin:0 22px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pw-body{padding:16px;display:grid;gap:12px}
.pw-cols{grid-template-columns:196px 1fr}
.pw-cols3{grid-template-columns:repeat(3,1fr)}
@media(max-width:560px){.pw-cols{grid-template-columns:1fr}.pw-cols3{grid-template-columns:1fr 1fr}}

/* variante perspective (OPT-IN, réservée au hero d'une page phare) */
.pw-tilt{transform:perspective(1400px) rotateY(-4deg) rotateX(1.5deg);transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.pw-scene:hover .pw-tilt{transform:none}
@media(prefers-reduced-motion:reduce),(max-width:920px){.pw-tilt,.pw-scene:hover .pw-tilt{transform:none;transition:none}}

/* ---------- ATOMES D'INTERFACE ---------- */
.pw-lab{font-family:var(--pw-mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--pw-faint)}
.pw-card{background:#fff;border:1px solid var(--pw-line);border-radius:var(--pw-r-sm);padding:12px 14px;display:grid;gap:8px}
.pw-card.on{border-color:rgba(53,107,253,.45);box-shadow:0 0 0 3px rgba(53,107,253,.08)}
.pw-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:.78rem;color:var(--pw-mute)}
.pw-row b{color:var(--pw-ink);font-weight:700;white-space:nowrap}
.pw-pill{display:inline-flex;align-items:center;gap:6px;font-size:.66rem;font-weight:700;letter-spacing:.04em;border-radius:999px;padding:4px 10px;white-space:nowrap;width:max-content}
.pw-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.pw-pill.b{background:#EDF1FA;color:var(--pw-blue-ink)}
.pw-pill.g{background:var(--pw-good-bg);color:var(--pw-good-ink)}
.pw-pill.r{background:var(--pw-rust-bg);color:var(--pw-rust-ink)}
.pw-pill.y{background:var(--pw-cons-bg);color:var(--pw-cons-ink)}
.pw-kpi{background:var(--pw-soft);border:1px solid var(--pw-pale);border-radius:var(--pw-r-sm);padding:12px 14px}
.pw-kpi b{display:block;margin-top:6px;font-family:'Space Grotesk','SG',sans-serif;font-size:1.32rem;line-height:1;color:var(--pw-ink)}
.pw-kpi .d{display:inline-block;margin-top:7px;font-family:var(--pw-mono);font-size:.62rem;font-weight:700;padding:2px 7px;border-radius:6px}
.pw-kpi .d.up{background:var(--pw-good-bg);color:var(--pw-good-ink)}
.pw-kpi .d.dn{background:var(--pw-rust-bg);color:var(--pw-rust-ink)}
.pw-btn{display:inline-block;background:var(--pw-blue);color:#fff;font-weight:700;font-size:.78rem;border-radius:10px;padding:9px 16px;text-align:center}
.pw-sk{height:7px;border-radius:4px;background:#E9EDF5}
.pw-sk.w45{width:45%}.pw-sk.w60{width:60%}.pw-sk.w80{width:80%}
.pw-chk{display:flex;align-items:center;gap:8px;font-size:.78rem;color:var(--pw-ink);font-weight:600}
.pw-chk .c{flex:none;width:17px;height:17px;border-radius:50%;background:var(--pw-blue);display:inline-flex;align-items:center;justify-content:center}
.pw-chk .c svg{width:9px;height:9px;stroke:#fff;stroke-width:3.4;fill:none}

/* ---------- SATELLITES flottants (débordent du cadre) ---------- */
.pw-sat{position:absolute;background:#fff;border:1px solid var(--pw-line);border-radius:14px;box-shadow:var(--pw-sh-sat);padding:12px 15px;display:grid;gap:6px;z-index:3;min-width:150px}
.pw-sat .pw-row{font-size:.72rem}
.pw-sat.tr{top:-14px;right:-10px}
.pw-sat.br{bottom:-16px;right:-10px}
.pw-sat.bl{bottom:-16px;left:-12px}
.pw-sat.tl{top:-14px;left:-10px}
.pw-sat.dark{background:var(--pw-slate);border-color:var(--pw-slate-line);color:#fff}
.pw-sat.dark .pw-lab{color:#98A2B3}
.pw-sat.dark b{color:#fff}
@media(max-width:560px){
  .pw-scene{padding:14px 8px 20px}
  .pw-sat.tr{right:0}.pw-sat.br{right:0}.pw-sat.bl{left:0}.pw-sat.tl{left:0}
  .pw-sat{min-width:128px;padding:10px 12px}
}

/* ---------- TÉLÉPHONE (app terrain) ---------- */
.pw-phone{background:#0C0E12;border:1px solid rgba(255,255,255,.14);border-radius:34px;padding:9px;box-shadow:0 6px 14px -6px rgba(12,14,18,.4),0 34px 70px -26px rgba(12,14,18,.75);width:228px}
.pw-phone .scr{background:#fff;border-radius:26px;overflow:hidden;position:relative}
.pw-phone .notch{position:absolute;top:7px;left:50%;transform:translateX(-50%);width:64px;height:16px;border-radius:999px;background:#0C0E12;z-index:2}
.pw-phone .scr-head{background:var(--pw-soft);padding:28px 13px 9px;display:flex;justify-content:space-between;align-items:baseline}
.pw-phone .scr-body{padding:11px 12px 14px;display:grid;gap:9px}
.pw-phone.as-sat{position:absolute;bottom:-22px;right:-12px;z-index:4}
@media(max-width:560px){.pw-phone{width:196px}.pw-phone.as-sat{bottom:-14px;right:0}}

/* ---------- CARTE SVG (plan de ville) ---------- */
.pw-map{background:var(--pw-pale);border-radius:var(--pw-r-sm);position:relative;overflow:hidden;min-height:170px}
.pw-map svg{display:block;width:100%;height:100%;position:absolute;inset:0}
.pw-map .tag{position:absolute;font-family:var(--pw-mono);font-size:.6rem;letter-spacing:.1em;background:#0C0E12;color:#fff;border-radius:7px;padding:4px 8px;white-space:nowrap}
.pw-map .tag.lite{background:#fff;color:var(--pw-ink);border:1px solid var(--pw-line)}

/* ---------- GANTT / PLANNING ---------- */
.pw-gantt{display:grid;gap:9px}
.pw-gantt .g-row{display:grid;grid-template-columns:118px 1fr;align-items:center;gap:10px}
.pw-gantt .g-veh{font-size:.72rem;font-weight:700;color:var(--pw-ink);line-height:1.2}
.pw-gantt .g-veh span{display:block;font-family:var(--pw-mono);font-weight:400;font-size:.58rem;letter-spacing:.08em;color:var(--pw-faint);margin-top:2px}
.pw-gantt .g-track{position:relative;height:24px;background:var(--pw-soft);border-radius:7px}
.pw-gantt .g-seg{position:absolute;top:3px;bottom:3px;border-radius:5px;font-family:var(--pw-mono);font-size:.56rem;letter-spacing:.06em;font-weight:700;display:flex;align-items:center;justify-content:center;overflow:hidden;white-space:nowrap;padding:0 7px}
.pw-gantt .g-seg.b{background:#DCE6FF;color:var(--pw-blue-deep)}
.pw-gantt .g-seg.g{background:#CFF0E1;color:var(--pw-good-ink)}
.pw-gantt .g-seg.r{background:#F8DCD3;color:var(--pw-rust-ink)}
.pw-gantt .g-seg.y{background:#FFE9A8;color:var(--pw-cons-ink)}
@media(max-width:560px){.pw-gantt .g-row{grid-template-columns:86px 1fr}}

/* ---------- BARRES horizontales (volumes par dépôt/chantier) ---------- */
.pw-bars{display:grid;gap:8px}
.pw-bars .b-row{display:grid;grid-template-columns:64px 1fr 34px;align-items:center;gap:9px;font-size:.7rem;color:var(--pw-mute)}
.pw-bars .b-val{font-family:var(--pw-mono);font-size:.62rem;color:var(--pw-ink);text-align:right}
.pw-bars .b-bg{display:block;height:8px;background:var(--pw-soft);border-radius:5px;overflow:hidden}
.pw-bars .b-fill{display:block;height:100%;border-radius:5px;background:var(--pw-blue)}
.pw-bars .b-fill.g{background:var(--pw-good)}
.pw-bars .b-fill.y{background:var(--pw-cons)}

/* ---------- PASTILLE TEMPS RÉEL ---------- */
.pw-live{display:inline-flex;align-items:center;gap:7px;font-family:var(--pw-mono);font-size:.6rem;letter-spacing:.14em;color:var(--pw-good-ink);background:var(--pw-good-bg);border-radius:999px;padding:5px 11px;font-weight:700}
.pw-live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--pw-good);animation:pwpulse 2.2s infinite}
@keyframes pwpulse{0%,100%{opacity:1}50%{opacity:.35}}
@media(prefers-reduced-motion:reduce){.pw-live::before{animation:none}}

/* ---------- CARTES BÉNÉFICES NUMÉROTÉES ---------- */
.ncards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ncard{padding:26px 24px 20px;display:flex;flex-direction:column;gap:12px}
.ncard .n{font-family:var(--pw-mono);font-size:.7rem;letter-spacing:.16em;color:var(--pw-faint)}
.ncard .ic{width:44px;height:44px;border-radius:12px;background:rgba(53,107,253,.14);color:var(--pw-blue-hi);display:flex;align-items:center;justify-content:center}
.ncard .ic svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.7}
.ncard h3{margin:0;font-size:1.06rem}
.ncard p{margin:0;font-size:.9rem;line-height:1.55}
.ncard .proof{margin-top:auto;padding-top:14px;border-top:1px solid var(--pw-slate-line);font-family:var(--pw-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--pw-faint);display:flex;align-items:center;gap:8px}
.ncard .proof::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--pw-blue);flex:none}
.ncard.elev-l .proof{border-top-color:var(--pw-pale)}
.ncard.elev-d h3{color:#fff}
.ncard.elev-d p{color:#98A2B3}
@media(max-width:920px){.ncards{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ncards{grid-template-columns:1fr}}

/* ---------- MOCKUPS MINIMAL (SVG Figma officiels, charte MINIMAL/_style) ----------
   Les fichiers vivent dans assets/minimal/. L'ombre est portée par la PAGE
   (drop-shadow CSS), jamais dans le SVG (charte : aucune ombre interne). */
.mnl{display:block;width:100%;height:auto;filter:drop-shadow(0 22px 44px rgba(12,14,18,.38))}
.mnl-fig{position:relative;max-width:640px;margin:0 auto}
.mnl-fig.phone{max-width:290px}
.mnl-fig.land{max-width:560px}
.mnl-fig.notif{max-width:400px;filter:none}
.mnl-fig.notif .mnl{filter:drop-shadow(0 14px 30px rgba(12,14,18,.3))}
.mnl-row{display:grid;gap:clamp(18px,3vw,34px);align-items:end;justify-items:center}
.mnl-row.p2{grid-template-columns:repeat(2,1fr)}
.mnl-row.p3{grid-template-columns:repeat(3,1fr)}
.mnl-row.p4{grid-template-columns:repeat(4,1fr)}
.mnl-row .mnl-fig{margin:0;width:100%}
@media(max-width:920px){.mnl-row.p3,.mnl-row.p4{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.mnl-row.p2,.mnl-row.p3,.mnl-row.p4{grid-template-columns:1fr 1fr;gap:14px}.mnl-fig.phone{max-width:170px}}
.mnl-cap{display:block;text-align:center;margin-top:14px;font-size:.86rem;color:var(--pw-faint)}

/* ---------- CARTE STATEMENT BLEUE : gradient token + variantes ---------- */
/* V1 = statement pur (défaut existant). V2 = .b-fig chiffre géant + texte.
   V3 = .band-go rangée CTA. Le gradient est VERROUILLÉ ici : */
:root{--pw-band-grad:linear-gradient(140deg,#3E71FF,#2851C2)}
.bandbox .band{background:var(--pw-band-grad);margin:0;border-radius:26px;box-shadow:0 34px 70px -34px rgba(40,81,194,.55)}
.band.b-fig{display:grid;grid-template-columns:auto 1fr;gap:clamp(30px,5vw,70px);align-items:center;text-align:left}
.band.b-fig h2{margin:0;max-width:none}
.band.b-fig .bl h2{margin:0}
.band.b-fig .bl p{margin:14px 0 0;max-width:none}
.band .bfig{font-family:'Space Grotesk','SG',sans-serif;font-weight:700;font-size:clamp(3.2rem,7vw,5.4rem);line-height:.95;color:#fff;letter-spacing:-.03em;white-space:nowrap;position:relative}
.band .bfig small{display:block;font-family:var(--pw-mono);font-weight:400;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.78);margin-top:12px;white-space:normal;max-width:24ch;line-height:1.6}
@media(max-width:760px){.band.b-fig{grid-template-columns:1fr;text-align:center}.band .bfig{white-space:normal}.band .bfig small{margin-inline:auto}}
.band .band-go{position:relative;margin-top:28px}
/* halos décoratifs v1 : sales sur les cartes arrondies -> retirés */
.bandbox .band::before,.bandbox .band::after{display:none}
/* accent .u : un seul soulignement propre, qui suit les retours à la ligne */
.bandbox .band .u,.band.b-fig .u{background:none;text-decoration:underline;text-underline-offset:7px;text-decoration-thickness:2px;text-decoration-color:rgba(255,255,255,.85)}
/* bouton fantôme lisible sur carte bleue */
.band .btn-ghost-d{color:#fff;border-color:rgba(255,255,255,.42)}
/* le téléphone-satellite libère la zone qu'il recouvre : les pistes de
   gantt se resserrent à gauche, le bas de fenêtre respire */
.pw-scene:has(.pw-phone.as-sat) .pw-gantt .g-track{margin-right:92px}
.pw-phone.as-sat{bottom:-30px}
/* les satellites hauts ne mordent plus la première rangée de la fenêtre */
.pw-scene:has(.pw-sat.tr,.pw-sat.tl) .pw>.pw-body{padding-top:30px}

/* ---------- CORRECTIFS SYSTÉMIQUES (Design QA 2026-07-16) ---------- */
/* les listes de mini-FAQ se centrent sous leur titre centré (14 pages) */
.minifaq-list{margin-inline:auto}
/* zone de sécurité : les fenêtres dont un satellite chevauche le bas
   gardent une respiration pour ne jamais masquer une donnée */
.pw-scene:has(.pw-sat.bl,.pw-sat.br) .pw>.pw-body{padding-bottom:40px}
.pw-scene:has(.pw-phone.as-sat) .pw>.pw-body{padding-bottom:48px}
/* bouton fantôme lisible sur bande blanche */
.bandw .btn-ghost-d{color:var(--pw-ink);border-color:rgba(12,14,18,.28);background:transparent}
/* ACCENTS HÉRITÉS VALIDÉS (ne pas « corriger ») : lime #C8FF4D (badges
   FAIT / DISPARU des cartes métiers), légende 4 couleurs du panneau de
   synchronisation de l'accueil (day-engine v16), violet .une-pill
   « À la une », points live #4ADE80, chip lime « FACTURATION ANNUELLE -10% »
   et ratio ×N du calculateur (tarifs, couche conversion 0ad7c22), onglet
   actif lime du sélecteur de modules (accueil). Décisions produit antérieures. */

/* ---------- GRILLE ÉQUIPE UNIFORME ---------- */
.team2{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.team2 .tc{padding:12px 12px 16px;text-align:left}
.team2 .tc .ph{width:100%;aspect-ratio:3/4;border-radius:12px;overflow:hidden;background:#EDF1FA}
.team2 .tc img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;display:block}
.team2 .tc b{display:block;margin-top:12px;color:var(--pw-ink);font-size:.99rem}
.team2 .tc span{display:block;margin-top:2px;color:rgba(12,14,18,.6);font-size:.85rem}
@media(max-width:920px){.team2{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.team2{grid-template-columns:repeat(2,1fr);gap:12px}.team2 .tc{padding:8px 8px 12px}}