/* Bilybyn : socle visuel commun (Produit, Calculateur, Ressources).
   Reprend les valeurs de la page d'accueil pour garder une seule identité. */
:root {
  --paper:#ffffff; --mist:#fafafa; --fog:#f2f2f2; --line:#e5e5e5;
  --ink:#1c2431; --slate:#63656a;
  --navy:#16233f; --navy-2:#20345a; --navy-deep:#0b111e;
  --coral:#e9482c; --coral-soft:#fdece8;
  --on-navy:#eef1f5; --on-navy-dim:#9aa4b4;
  --ok:#3cae49; --warn:#f2954a; --bad:#e5503b;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --display:'Newsreader',Georgia,'Times New Roman',serif;
  --ease:cubic-bezier(.16,1,.3,1);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:70px; }
body { margin:0; font-family:var(--sans); background:var(--paper); color:var(--ink); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
h1,h2,h3 { font-family:var(--display); font-weight:400; }
a { color:inherit; }
img, video { max-width:100%; display:block; }
em.accent, h1 em, h2 em, h3 em { font-style:italic; color:var(--coral); }

.kicker { display:block; font-family:var(--sans); font-weight:600; letter-spacing:2px; text-transform:uppercase; font-size:11px; color:var(--coral); margin-bottom:14px; }
.wrap { max-width:1120px; margin:0 auto; padding:0 30px; }
.center { text-align:center; }
.muted { color:var(--slate); }

/* ---------- HEADER (transparent sur le hero, opaque au scroll) ---------- */
.site-header { position:fixed; top:0; left:0; right:0; z-index:62; display:flex; align-items:center; justify-content:space-between; padding:20px 30px; transition:background .3s, border-color .3s, padding .3s; border-bottom:1px solid transparent; }
.site-header.scrolled, .site-header.solid { background:rgba(255,255,255,0.92); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom-color:var(--line); padding:14px 30px; }
.brand { display:inline-flex; align-items:center; text-decoration:none; }
.brand img { height:28px; width:auto; }
.brand .logo-navy { display:none; }
.site-header.scrolled .logo-white, .site-header.solid .logo-white { display:none; }
.site-header.scrolled .logo-navy, .site-header.solid .logo-navy { display:block; }
.header-actions { display:flex; align-items:center; gap:8px; }
.header-login { text-decoration:none; font-weight:600; font-size:13px; padding:9px 16px; border-radius:100px; color:rgba(255,255,255,0.92); transition:background .2s, color .2s; }
.header-login:hover { background:rgba(255,255,255,0.14); }
.site-header.scrolled .header-login, .site-header.solid .header-login { color:var(--slate); }
.site-header.scrolled .header-login:hover, .site-header.solid .header-login:hover { background:var(--fog); color:var(--ink); }
.header-cta { text-decoration:none; font-weight:600; font-size:13px; padding:9px 16px; border-radius:100px; background:#fff; color:var(--navy); transition:opacity .2s, background .2s, color .2s; }
.site-header.scrolled .header-cta, .site-header.solid .header-cta { background:var(--navy); color:#fff; }
.header-cta:hover { opacity:.9; }
.menu-toggle { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; width:38px; height:38px; background:none; border:none; cursor:pointer; padding:0; position:relative; z-index:61; }
.menu-toggle span { display:block; width:22px; height:2px; background:#fff; border-radius:2px; transition:background .2s, transform .25s, opacity .2s; }
.site-header.scrolled .menu-toggle span, .site-header.solid .menu-toggle span { background:var(--ink); }
.menu-toggle.open span { background:#fff; }
.menu-toggle.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.menu-toggle.open span:nth-child(2) { opacity:0; }
.menu-toggle.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
.menu-overlay { position:fixed; inset:0; background:rgba(11,17,30,0.5); z-index:59; opacity:0; pointer-events:none; transition:opacity .3s; }
.menu-overlay.open { opacity:1; pointer-events:auto; }
.site-menu { position:fixed; top:0; right:0; height:100%; width:min(320px,86vw); z-index:60; background:var(--navy); display:flex; flex-direction:column; gap:2px; padding:96px 30px 30px; overflow-y:auto; visibility:hidden; transform:translateX(100%); transition:transform .35s var(--ease), visibility 0s linear .35s; }
.site-menu.open { visibility:visible; transform:none; transition:transform .35s var(--ease), visibility 0s; }
.site-menu a { color:#fff; text-decoration:none; font-weight:600; font-size:16px; padding:14px 0; border-bottom:1px solid rgba(255,255,255,0.12); }
.site-menu a[aria-current="page"] { color:var(--coral); }
.site-menu .menu-divider { height:14px; }
.lang-switch { display:inline-flex; gap:2px; margin-top:20px; }
.lang-switch a { font-size:12px; padding:6px 8px; border-radius:6px; border:none; color:rgba(255,255,255,0.6); }
.lang-switch a.on { color:#fff; background:rgba(255,255,255,0.14); }

/* ---------- BOUTONS ---------- */
.btn { display:inline-flex; align-items:center; gap:8px; padding:15px 26px; border-radius:100px; font-weight:600; font-size:14px; text-decoration:none; transition:transform .15s, opacity .15s, background .2s, color .2s; white-space:nowrap; }
.btn:hover { transform:translateY(-1px); }
.btn-primary { background:#fff; color:var(--navy); }
.btn-ghost { background:transparent; color:#fff; border:1px solid rgba(255,255,255,0.42); }
.btn-ghost:hover { background:rgba(255,255,255,0.12); }
.btn-navy { background:var(--navy); color:#fff; }
.btn-navy:hover { background:var(--navy-2); }
.btn-line { color:var(--navy); border:1px solid var(--line); background:#fff; }
.btn-line:hover { border-color:var(--navy); }

/* ---------- HERO (photo ou vidéo plein cadre) ---------- */
.hero { position:relative; min-height:92svh; display:flex; align-items:flex-end; overflow:hidden; background:var(--navy-deep); color:#fff; }
.hero-media { position:absolute; inset:0; }
.hero-media img, .hero-media video { width:100%; height:100%; object-fit:cover; object-position:50% 40%; }
.hero-media::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(11,17,30,0.94) 0%, rgba(11,17,30,0.66) 30%, rgba(11,17,30,0.2) 60%, rgba(11,17,30,0.1) 100%); }
.hero-inner { position:relative; z-index:2; max-width:1180px; margin:0 auto; width:100%; padding:0 30px 76px; }
.hero .kicker { color:#fff; display:inline-flex; align-items:center; gap:9px; background:rgba(255,255,255,0.10); border:1px solid rgba(255,255,255,0.28); padding:7px 15px; border-radius:100px; margin-bottom:24px; backdrop-filter:blur(6px); }
.hero .kicker .dot { width:6px; height:6px; border-radius:50%; background:var(--coral); }
.hero h1 { font-size:clamp(40px,6.6vw,88px); line-height:1.04; letter-spacing:-1px; margin:0 0 20px; max-width:15ch; }
.hero h1 em { font-weight:300; }
.hero p { font-size:clamp(15px,1.6vw,18px); color:rgba(255,255,255,0.86); max-width:48ch; margin:0 0 32px; line-height:1.65; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; }
.hero-scroll { position:absolute; z-index:2; left:50%; bottom:22px; transform:translateX(-50%); width:22px; height:36px; border:1.5px solid rgba(255,255,255,0.5); border-radius:12px; }
.hero-scroll::after { content:""; position:absolute; left:50%; top:7px; width:3px; height:7px; margin-left:-1.5px; border-radius:2px; background:#fff; animation:scrollhint 1.8s var(--ease) infinite; }
@keyframes scrollhint { 0% { opacity:0; transform:translateY(0); } 30% { opacity:1; } 100% { opacity:0; transform:translateY(12px); } }

/* Hero compact sur fond clair (pages outils) */
.hero-light { padding:150px 0 70px; background:linear-gradient(180deg, var(--mist) 0%, var(--paper) 100%); }

/* ---------- STATEMENT ---------- */
.statement { text-align:center; padding:130px 30px 110px; max-width:900px; margin:0 auto; }
.statement h2 { font-size:clamp(30px,5vw,54px); line-height:1.14; letter-spacing:-.4px; margin:0 0 24px; }
.statement p { color:var(--slate); font-size:17px; line-height:1.8; max-width:60ch; margin:0 auto; }

/* ---------- CHIFFRES (compteurs) ---------- */
.stats { display:grid; grid-template-columns:repeat(4,1fr); max-width:1120px; margin:0 auto; padding:0 30px 110px; gap:0; }
.stat { padding:8px 26px; border-left:1px solid var(--line); }
.stat:first-child { border-left:none; padding-left:0; }
.stat .n { font-family:var(--display); font-size:clamp(40px,5vw,62px); line-height:1; color:var(--navy); letter-spacing:-1px; }
.stat .n small { font-size:.45em; letter-spacing:0; color:var(--coral); margin-left:4px; }
.stat .l { font-size:13.5px; color:var(--slate); margin-top:10px; line-height:1.5; }

/* ---------- SOUS-NAVIGATION COLLANTE ---------- */
.subnav { position:sticky; top:68px; z-index:40; display:flex; justify-content:center; padding:10px 16px; pointer-events:none; }
.subnav-inner { pointer-events:auto; display:inline-flex; gap:4px; padding:5px; border-radius:100px; background:rgba(255,255,255,0.86); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid var(--line); box-shadow:0 10px 30px -18px rgba(22,35,63,0.35); max-width:100%; overflow-x:auto; scrollbar-width:none; }
.subnav-inner::-webkit-scrollbar { display:none; }
.subnav a { text-decoration:none; font-size:13px; font-weight:600; color:var(--slate); padding:9px 18px; border-radius:100px; white-space:nowrap; transition:background .25s, color .25s; }
.subnav a.on { background:var(--navy); color:#fff; }
.subnav .progress { position:absolute; left:0; bottom:0; height:2px; background:var(--coral); width:0; }

/* ---------- SECTIONS ---------- */
.section { padding:120px 0; }
.section.tight { padding:80px 0; }
.section.mist { background:var(--mist); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.section.navy { background:var(--navy); color:var(--on-navy); }
.section.navy .muted, .section.navy p { color:var(--on-navy-dim); }
.section-head { max-width:720px; margin:0 0 56px; }
.section-head.center { margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2 { font-size:clamp(30px,4.2vw,50px); line-height:1.1; letter-spacing:-.5px; margin:0 0 18px; }
.section-head p { font-size:17px; line-height:1.75; color:var(--slate); margin:0; }
.section.navy .section-head p { color:var(--on-navy-dim); }

/* ---------- ÉTAPES 01 / 02 / 03 ---------- */
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; counter-reset:step; }
.step { position:relative; background:#fff; border:1px solid var(--line); border-radius:22px; padding:34px 28px 30px; overflow:hidden; }
.step .num { font-family:var(--display); font-size:64px; line-height:1; color:var(--coral); letter-spacing:-2px; margin-bottom:22px; }
.step h3 { font-size:22px; margin:0 0 10px; line-height:1.25; }
.step p { font-size:14.5px; color:var(--slate); margin:0; line-height:1.7; }
.step::after { content:""; position:absolute; left:28px; right:28px; top:0; height:3px; background:var(--coral); transform:scaleX(0); transform-origin:left; transition:transform 1s var(--ease) .2s; }
.step.visible::after { transform:scaleX(1); }

/* ---------- PILIERS (alternance texte / visuel) ---------- */
.pillar { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; max-width:1120px; margin:0 auto; padding:90px 30px; }
.pillar.reverse .pillar-visual { order:2; }
.pillar-text h2, .pillar-text h3 { font-size:clamp(28px,3.6vw,42px); line-height:1.14; letter-spacing:-.4px; margin:0 0 18px; }
.pillar-text p { color:var(--slate); font-size:16px; line-height:1.8; margin:0 0 14px; max-width:46ch; }
.pillar-visual.photo { border-radius:24px; overflow:hidden; aspect-ratio:4/5; }
.pillar-visual.photo.wide { aspect-ratio:4/3; }
.pillar-visual.photo img { width:100%; height:100%; object-fit:cover; }
.pillar-visual.device-stage { display:flex; justify-content:center; position:relative; }
.device-stage::before { content:""; position:absolute; width:78%; aspect-ratio:1; border-radius:50%; top:50%; left:50%; transform:translate(-50%,-50%); background:radial-gradient(circle, rgba(233,72,44,0.16) 0%, rgba(233,72,44,0) 68%); z-index:0; }
.device-stage > * { position:relative; z-index:1; }

/* ---------- TÉLÉPHONE ---------- */
.device { position:relative; width:clamp(230px,26vw,300px); aspect-ratio:9/19.5; background:#0d1526; border-radius:46px; padding:11px; box-shadow:0 50px 90px -24px rgba(22,35,63,0.45), 0 0 0 2px rgba(255,255,255,0.06) inset; }
.device::after { content:""; position:absolute; top:20px; left:50%; transform:translateX(-50%); width:32%; height:22px; background:#0d1526; border-radius:14px; z-index:3; }
.device-screen { position:relative; width:100%; height:100%; border-radius:36px; overflow:hidden; background:#eef1f7; }
.device-screen img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; transition:opacity .6s var(--ease), transform .8s var(--ease); }
.device-screen img.off { opacity:0; transform:scale(1.04); }
.device.tilt { transform:rotate(-4deg); }

/* ---------- BENTO ---------- */
.bento { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.tile { position:relative; background:#fff; border:1px solid var(--line); border-radius:22px; padding:28px 26px; transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s; overflow:hidden; }
.tile:hover { transform:translateY(-4px); box-shadow:0 24px 50px -28px rgba(22,35,63,0.35); border-color:#d9dce2; }
.tile.span2 { grid-column:span 2; }
.tile.span4 { grid-column:span 4; }
.tile.wide { display:flex; align-items:center; gap:22px; }
.tile.wide .ico { margin:0; flex-shrink:0; }
.tile.navy { background:var(--navy); border-color:var(--navy); color:#fff; }
.tile.navy p { color:var(--on-navy-dim); }
.tile.coral { background:var(--coral-soft); border-color:#f7d3ca; }
.tile .ico { width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:var(--coral-soft); color:var(--coral); margin-bottom:20px; }
.tile.navy .ico { background:rgba(255,255,255,0.1); color:#fff; }
.tile.coral .ico { background:#fff; }
.tile .ico svg { width:22px; height:22px; }
.tile h3 { font-family:var(--sans); font-weight:700; font-size:16px; margin:0 0 8px; }
.tile p { font-size:14px; color:var(--slate); margin:0; line-height:1.65; }

/* ---------- ENCADRÉ ---------- */
.callout { background:var(--navy); color:#fff; border-radius:22px; padding:30px 32px; margin-top:28px; position:relative; overflow:hidden; }
.callout::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--coral); }
.callout p { color:var(--on-navy) !important; margin:0 !important; font-size:15.5px !important; line-height:1.75 !important; max-width:none !important; }
.callout strong { color:#fff !important; }

/* ---------- RÉCIT COLLANT (le téléphone reste, l'écran change) ---------- */
.story { display:grid; grid-template-columns:1fr 1fr; gap:80px; max-width:1120px; margin:0 auto; padding:0 30px; }
.story-sticky { position:sticky; top:0; height:100vh; display:flex; align-items:center; justify-content:center; }
.story-steps { padding:12vh 0 2vh; }
.story-step { min-height:70vh; display:flex; flex-direction:column; justify-content:center; opacity:.28; transition:opacity .5s var(--ease); }
.story-step.on { opacity:1; }
.story-step .idx { font-family:var(--display); font-size:15px; color:var(--coral); letter-spacing:1px; margin-bottom:14px; }
.story-step h3 { font-size:clamp(28px,3.2vw,40px); line-height:1.15; letter-spacing:-.4px; margin:0 0 16px; color:#fff; }
.story-step p { font-size:16.5px; line-height:1.8; max-width:42ch; margin:0; }
.story-step .device { display:none; }

/* ---------- CARTES (installation, sources) ---------- */
.cards-2 { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.cards-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.card { background:#fff; border:1px solid var(--line); border-radius:22px; padding:32px 30px; }
.card h3 { font-family:var(--sans); font-weight:700; font-size:17px; margin:0 0 14px; display:flex; align-items:center; gap:10px; }
.card ol, .card ul { margin:0; padding-left:20px; }
.card li { font-size:14.5px; color:#2b2d31; line-height:1.7; margin-bottom:6px; }
.card p { font-size:14.5px; color:var(--slate); line-height:1.7; margin:0; }
.card .badge { font-family:var(--sans); font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--coral); }

/* ---------- RÉASSURANCE ---------- */
.trust { display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid var(--line); border-radius:22px; background:#fff; overflow:hidden; }
.trust div { padding:26px 24px; border-left:1px solid var(--line); display:flex; gap:14px; align-items:flex-start; }
.trust div:first-child { border-left:none; }
.trust svg { flex-shrink:0; width:22px; height:22px; color:var(--coral); margin-top:2px; }
.trust strong { display:block; font-size:14.5px; margin-bottom:2px; }
.trust span { font-size:13px; color:var(--slate); line-height:1.5; }

/* ---------- CTA FINAL (photo sombre) ---------- */
.cta-final { position:relative; overflow:hidden; padding:160px 30px; text-align:center; color:#fff; background:var(--navy); }
.cta-final .bg { position:absolute; inset:0; }
.cta-final .bg img { width:100%; height:100%; object-fit:cover; object-position:50% 42%; }
.cta-final .bg::after { content:""; position:absolute; inset:0; background:radial-gradient(76% 66% at 50% 50%, rgba(11,17,30,0.62) 0%, rgba(11,17,30,0.4) 62%, rgba(11,17,30,0.3) 100%), linear-gradient(180deg, rgba(11,17,30,0.3) 0%, rgba(11,17,30,0.5) 100%); }
.cta-final .inner { position:relative; z-index:2; }
.cta-final h2 { font-size:clamp(32px,5.2vw,58px); line-height:1.1; letter-spacing:-.4px; margin:0 0 16px; text-shadow:0 2px 24px rgba(11,17,30,0.5); }
.cta-final h2 em { font-weight:300; }
.cta-final p { color:rgba(255,255,255,0.84); font-size:16px; margin:0 auto 32px; max-width:46ch; }
.cta-final .actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* ---------- FOOTER ---------- */
footer { border-top:1px solid var(--line); background:var(--paper); }
.footer-inner { max-width:1120px; margin:0 auto; padding:34px 30px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
.footer-brand img { height:20px; width:auto; }
.footer-links { display:flex; flex-wrap:wrap; gap:14px 22px; font-size:13px; color:var(--slate); }
.footer-links a { text-decoration:none; }
.footer-links a:hover { color:var(--ink); }

/* ---------- OUTILS : hero sombre + carte de calcul ---------- */
.tool-hero { position:relative; overflow:hidden; background:var(--navy-deep); color:#fff; padding:150px 0 100px; }
.tool-hero .bg { position:absolute; inset:0; }
.tool-hero .bg img { width:100%; height:100%; object-fit:cover; object-position:50% 35%; }
.tool-hero .bg::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(11,17,30,0.94) 0%, rgba(11,17,30,0.82) 45%, rgba(11,17,30,0.55) 100%); }
.tool-grid { position:relative; z-index:2; display:grid; grid-template-columns:1fr 1.05fr; gap:64px; align-items:start; }
.tool-intro { padding-top:30px; }
.tool-intro .kicker { color:var(--coral); }
.tool-intro h1 { font-size:clamp(36px,4.8vw,62px); line-height:1.06; letter-spacing:-.8px; margin:0 0 22px; }
.tool-intro p { font-size:17px; line-height:1.75; color:rgba(255,255,255,0.82); margin:0 0 28px; max-width:44ch; }
.checks { list-style:none; padding:0; margin:0; display:grid; gap:12px; }
.checks li { display:flex; gap:12px; align-items:center; font-size:14.5px; color:rgba(255,255,255,0.9); }
.checks svg { width:20px; height:20px; flex-shrink:0; color:var(--coral); }

.calc { background:#fff; color:var(--ink); border-radius:26px; padding:32px 30px; box-shadow:0 50px 100px -40px rgba(0,0,0,0.65); }
.calc h2 { font-family:var(--sans); font-weight:700; font-size:15px; margin:0 0 20px; display:flex; align-items:center; gap:10px; }
.calc h2 .dot { width:8px; height:8px; border-radius:50%; background:var(--coral); }
.field { margin-bottom:16px; }
.field label { display:block; font-size:12.5px; font-weight:700; color:var(--ink); margin-bottom:7px; }
.field .hint { font-weight:500; color:var(--slate); }
.field input, .field select { width:100%; padding:13px 14px; border:1px solid var(--line); border-radius:12px; font-size:16px; font-family:inherit; background:var(--mist); color:var(--ink); transition:border-color .2s, box-shadow .2s, background .2s; -webkit-appearance:none; appearance:none; }
.field select { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2363656a' stroke-width='1.6' fill='none'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; }
.field input:focus, .field select:focus { outline:none; border-color:var(--coral); background:#fff; box-shadow:0 0 0 4px rgba(233,72,44,0.12); }
.field-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 14px; }
.btn-calc { display:flex; justify-content:center; align-items:center; gap:10px; width:100%; background:var(--navy); color:#fff; font-weight:700; font-size:15px; padding:16px; border-radius:100px; border:none; cursor:pointer; margin-top:6px; transition:background .2s, transform .15s; font-family:inherit; }
.btn-calc:hover { background:var(--navy-2); transform:translateY(-1px); }

.result { margin-top:26px; padding-top:26px; border-top:1px solid var(--line); animation:resultIn .7s var(--ease); }
@keyframes resultIn { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
.gauge { position:relative; width:240px; margin:0 auto 6px; }
.gauge svg { width:100%; height:auto; overflow:visible; }
.gauge .needle { transform-origin:100px 100px; transition:transform 1.4s var(--ease); }
.gauge-label { text-align:center; margin:-8px 0 20px; }
.gauge-label .verdict { font-family:var(--display); font-size:30px; line-height:1.1; }
.gauge-label .sub { font-size:12.5px; color:var(--slate); margin-top:4px; }
.v-ok { color:var(--ok); } .v-watch { color:#d98a1f; } .v-over { color:var(--bad); }
.meters { display:grid; gap:14px; }
.meter .top { display:flex; justify-content:space-between; gap:12px; font-size:13.5px; margin-bottom:7px; }
.meter .top b { font-weight:600; }
.meter .nw { font-style:normal; white-space:nowrap; }
.meter .top span { color:var(--slate); font-size:12.5px; white-space:nowrap; }
.meter .track { position:relative; height:8px; border-radius:8px; background:var(--fog); overflow:visible; }
.meter .fill { position:absolute; left:0; top:0; bottom:0; width:0; border-radius:8px; transition:width 1.2s var(--ease); }
.meter .fill.ok { background:var(--ok); } .meter .fill.watch { background:var(--warn); } .meter .fill.over { background:var(--bad); }
.meter .tick { position:absolute; top:-4px; bottom:-4px; width:2px; background:var(--ink); border-radius:2px; opacity:.55; }
.ua-chip { display:flex; justify-content:space-between; align-items:center; background:var(--navy); color:#fff; border-radius:16px; padding:16px 18px; margin-top:18px; }
.ua-chip span { font-size:13px; color:var(--on-navy-dim); }
.ua-chip b { font-family:var(--display); font-weight:400; font-size:28px; white-space:nowrap; }
.ua-chip { gap:14px; }
.result-note { font-size:12.5px; color:var(--slate); margin:16px 0 0; line-height:1.6; }
.source-note { font-size:13px; color:var(--slate); line-height:1.7; margin:28px 0 0; }
.card .src { display:inline-block; margin-top:14px; font-size:13px; font-weight:600; color:var(--navy); text-decoration:none; border-bottom:1px solid currentColor; }
.card .big { font-family:var(--display); font-size:44px; line-height:1; color:var(--coral); margin:6px 0 14px; letter-spacing:-1px; }
.link-cards a.card { display:block; text-decoration:none; color:inherit; transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.link-cards a.card:hover { transform:translateY(-4px); box-shadow:0 24px 50px -28px rgba(22,35,63,0.35); }
.link-cards .arrow { display:inline-block; margin-top:14px; color:var(--coral); font-weight:600; font-size:14px; }

@media (max-width:900px) {
  .tool-grid { grid-template-columns:1fr; gap:36px; }
  .tool-intro { padding-top:0; }
  .tool-hero { padding:120px 0 70px; }
}
@media (max-width:480px) {
  .calc { padding:26px 20px; border-radius:22px; }
  .field-grid { grid-template-columns:1fr; }
}

/* ---------- RESSOURCES : chapitres ---------- */
.subnav-inner { position:relative; }
.subnav .progress { border-radius:2px; transition:width .1s linear; }
.chapter-open { position:relative; overflow:hidden; color:#fff; background:var(--navy-deep); min-height:72svh; display:flex; align-items:flex-end; }
.chapter-open .bg { position:absolute; inset:0; }
.chapter-open .bg img { width:100%; height:100%; object-fit:cover; }
.chapter-open .bg::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(11,17,30,0.86) 0%, rgba(11,17,30,0.6) 42%, rgba(11,17,30,0.1) 78%), linear-gradient(0deg, rgba(11,17,30,0.75) 0%, rgba(11,17,30,0) 55%); }
.chapter-open .inner { position:relative; z-index:2; width:100%; max-width:1120px; margin:0 auto; padding:0 30px 70px; }
.chapter-open.ch-deep .bg::after { background:linear-gradient(90deg, rgba(8,12,22,0.9) 0%, rgba(8,12,22,0.78) 36%, rgba(8,12,22,0.25) 64%, rgba(8,12,22,0) 100%), linear-gradient(0deg, rgba(8,12,22,0.65) 0%, rgba(8,12,22,0) 45%); }
.chapter-open.ch-deep h2, .chapter-open.ch-deep p { text-shadow:0 2px 24px rgba(0,0,0,0.6); }
.chapter-num { font-family:var(--display); font-weight:300; font-size:clamp(90px,14vw,180px); line-height:.8; color:var(--coral); letter-spacing:-4px; margin-bottom:18px; }
.chapter-open h2 { font-size:clamp(34px,5vw,64px); line-height:1.05; letter-spacing:-.8px; margin:0 0 16px; max-width:18ch; }
.chapter-open p { font-size:17px; color:rgba(255,255,255,0.84); max-width:52ch; margin:0; line-height:1.7; }
.prose-col { max-width:720px; }
.prose-col h3, .pillar-text h3.sub { font-family:var(--display); font-size:clamp(24px,2.6vw,30px); line-height:1.2; letter-spacing:-.3px; margin:0 0 14px; }
.prose-col p { font-size:16.5px; line-height:1.85; color:#2b2d31; margin:0 0 20px; }
.prose-col strong, .pillar-text strong { color:var(--ink); }
.split { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:start; }
.split + .split { margin-top:72px; }

/* Échelle RPE interactive */
.rpe-picker { background:#fff; border:1px solid var(--line); border-radius:24px; padding:30px; box-shadow:0 30px 60px -40px rgba(22,35,63,0.35); }
.rpe-picker .ttl { font-size:12px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--slate); margin-bottom:18px; }
.rpe-row { display:grid; grid-template-columns:repeat(10,1fr); gap:6px; }
.rpe-row button { font:inherit; font-family:var(--display); font-size:19px; color:#fff; border:none; border-radius:10px; padding:14px 0; cursor:pointer; transition:transform .25s var(--ease), box-shadow .25s; }
.rpe-row button:hover { transform:translateY(-3px); }
.rpe-row button.on { transform:translateY(-6px) scale(1.06); box-shadow:0 12px 24px -10px rgba(0,0,0,0.45); }
.rpe-row button:nth-child(1), .rpe-row button:nth-child(2) { background:#3cae49; }
.rpe-row button:nth-child(3), .rpe-row button:nth-child(4) { background:#8bc34a; }
.rpe-row button:nth-child(5), .rpe-row button:nth-child(6) { background:#f0c528; color:#5a4200; }
.rpe-row button:nth-child(7), .rpe-row button:nth-child(8) { background:#f2954a; }
.rpe-row button:nth-child(9), .rpe-row button:nth-child(10) { background:#e5503b; }
.rpe-out { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-top:24px; padding-top:22px; border-top:1px solid var(--line); }
.rpe-out .lbl { font-family:var(--display); font-size:30px; line-height:1.1; }
.rpe-out .lbl small { display:block; font-family:var(--sans); font-size:12.5px; color:var(--slate); margin-top:6px; }
.rpe-out .load { text-align:right; font-size:13px; color:var(--slate); }
.rpe-out .load b { display:block; font-family:var(--display); font-weight:400; font-size:30px; color:var(--navy); }

/* Formule animée */
.formula { display:flex; justify-content:center; align-items:center; gap:clamp(14px,3vw,36px); flex-wrap:wrap; text-align:center; margin:10px 0 0; }
.formula .term .n { font-family:var(--display); font-size:clamp(54px,8vw,104px); line-height:1; letter-spacing:-2px; color:#fff; }
.formula .term .u { font-size:13px; letter-spacing:1.5px; text-transform:uppercase; color:var(--on-navy-dim); margin-top:10px; }
.formula .op { font-family:var(--display); font-size:clamp(34px,5vw,60px); color:var(--coral); line-height:1; }
.formula .term.res .n { color:var(--coral); }

/* Tableau de repères */
.data-table { width:100%; border-collapse:separate; border-spacing:0; background:#fff; border:1px solid var(--line); border-radius:20px; overflow:hidden; font-size:14.5px; }
.data-table th { text-align:left; font-size:11.5px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--slate); background:var(--mist); padding:16px 20px; border-bottom:1px solid var(--line); }
.data-table td { padding:16px 20px; border-bottom:1px solid var(--line); }
.data-table tr:last-child td { border-bottom:none; color:var(--slate); }
.data-table td:first-child { font-weight:600; }
.data-table tbody tr { transition:background .2s; }
.data-table tbody tr:hover { background:var(--coral-soft); }
.table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:20px; }

/* Graphique ACWR */
.acwr-chart { position:sticky; top:130px; background:#fff; border:1px solid var(--line); border-radius:24px; padding:26px 24px 18px; }
.acwr-chart svg { width:100%; height:auto; display:block; }
.acwr-chart .cap { font-size:12px; color:var(--slate); margin-top:10px; }
.acwr-chart .line { stroke-dasharray:1000; stroke-dashoffset:1000; transition:stroke-dashoffset 2.2s var(--ease) .2s; }
.acwr-chart.visible .line { stroke-dashoffset:0; }
.acwr-legend { display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:14px; font-size:12.5px; color:var(--slate); }
.acwr-legend i { display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:6px; vertical-align:-1px; }

.sports-mini { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:26px; }
.sports-mini figure { margin:0; border-radius:16px; overflow:hidden; aspect-ratio:4/3; position:relative; }
.sports-mini img { width:100%; height:100%; object-fit:cover; }
.sports-mini figcaption { position:absolute; left:12px; bottom:10px; color:#fff; font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; text-shadow:0 1px 10px rgba(0,0,0,0.5); }
.link-inline { color:var(--navy); font-weight:600; }

@media (max-width:820px) {
  .split { grid-template-columns:1fr; gap:40px; }
  .chapter-open { min-height:60svh; }
  .chapter-open .inner { padding:0 22px 52px; }
  .rpe-picker { padding:22px 18px; }
  .rpe-row { grid-template-columns:repeat(5,1fr); }
  .data-table { min-width:560px; }
  .acwr-chart { position:static; }
  .chapter-open .bg::after, .chapter-open.ch-deep .bg::after { background:linear-gradient(0deg, rgba(11,17,30,0.94) 0%, rgba(11,17,30,0.7) 55%, rgba(11,17,30,0.35) 100%); }
}

/* ---------- VARIANTES DE SECTIONS (une par page) ---------- */
/* Produit : deux rôles */
.roles { display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:1120px; margin:0 auto; padding:0 30px 110px; }
.role { position:relative; overflow:hidden; border-radius:26px; padding:120px 36px 36px; min-height:300px; display:flex; flex-direction:column; justify-content:flex-end; }
.role.club { background:#fff; color:var(--ink); border:1px solid var(--line); box-shadow:0 30px 60px -44px rgba(22,35,63,0.35); }
.role.club .big { color:var(--coral); opacity:1; }
.role.club .tag { color:var(--coral); opacity:1; }
.role.club p { color:var(--slate); opacity:1; }
.role.club a { color:var(--navy); border-bottom-color:rgba(22,35,63,0.35); }
.role.coach { background:var(--coral); color:#fff; }
.role .big { position:absolute; top:26px; left:36px; font-family:var(--display); font-weight:300; font-size:72px; line-height:1; letter-spacing:-2px; color:#fff; opacity:.6; }
.role .tag { font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; opacity:.8; margin-bottom:12px; }
.role h3 { font-size:clamp(26px,3vw,36px); line-height:1.15; margin:0 0 12px; }
.role p { margin:0; font-size:15px; line-height:1.7; opacity:.9; max-width:40ch; }
.role a { color:#fff; font-weight:600; font-size:14px; margin-top:20px; text-decoration:none; border-bottom:1px solid rgba(255,255,255,0.5); align-self:flex-start; }

/* Produit : CTA en deux colonnes avec téléphone */
.cta-split { background:var(--navy); color:#fff; overflow:hidden; }
.cta-split .wrap { display:grid; grid-template-columns:1.2fr 1fr; gap:60px; align-items:center; padding-top:90px; padding-bottom:90px; }
.cta-split h2 { font-size:clamp(32px,4.6vw,56px); line-height:1.08; letter-spacing:-.5px; margin:0 0 18px; }
.cta-split p { color:var(--on-navy-dim); font-size:16.5px; line-height:1.75; margin:0 0 30px; max-width:44ch; }
.cta-split .actions { display:flex; gap:12px; flex-wrap:wrap; }
.cta-split .phone-peek { position:relative; display:flex; justify-content:center; }
.cta-split .phone-peek::before { content:""; position:absolute; width:120%; aspect-ratio:1; top:50%; left:50%; transform:translate(-50%,-50%); background:radial-gradient(circle, rgba(233,72,44,0.22) 0%, rgba(233,72,44,0) 62%); }
.cta-split .phone-peek { perspective:1400px; }
.cta-split .phone-peek .device { width:270px; flex-shrink:0; padding:10px; border-radius:52px;
  background:linear-gradient(145deg,#3a4152 0%,#11182a 30%,#0b1120 62%,#2a3142 100%);
  box-shadow:0 60px 100px -30px rgba(0,0,0,0.7), 0 30px 50px -30px rgba(233,72,44,0.35),
    inset 0 0 0 1.5px rgba(255,255,255,0.14), inset 0 0 0 4px #0b1120, inset 0 0 0 5px rgba(255,255,255,0.06);
  transform:rotateY(-16deg) rotateX(6deg) rotateZ(3deg); transform-style:preserve-3d; animation:phoneFloat 7s ease-in-out infinite; }
.cta-split .phone-peek .device::after { top:19px; width:30%; height:24px; background:#05080f; border-radius:20px; }
.cta-split .phone-peek .device::before { content:""; position:absolute; left:-3px; top:120px; width:3px; height:34px; border-radius:2px 0 0 2px; background:#2a3142;
  box-shadow:0 52px 0 #2a3142, 0 -44px 0 0 #2a3142; }
.cta-split .phone-peek .device-screen { border-radius:42px; }
@keyframes phoneFloat { 0%,100% { transform:rotateY(-16deg) rotateX(6deg) rotateZ(3deg) translateY(0); } 50% { transform:rotateY(-12deg) rotateX(4deg) rotateZ(2deg) translateY(-10px); } }
.login-mock::after { content:""; position:absolute; inset:0; z-index:3; pointer-events:none; background:linear-gradient(118deg, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.05) 28%, rgba(255,255,255,0) 42%); }
.login-mock { font-family:'Inter',var(--sans); -webkit-font-smoothing:antialiased; }
.login-mock .bar { padding:4px 12px 0 16px; font-size:12px; font-weight:600; letter-spacing:-.01em; align-items:center; }
.login-mock .bar .ic { display:flex; gap:5px; align-items:center; }
.login-mock .bar svg { height:10px; width:auto; }
.login-mock .sil svg { opacity:.26; filter:drop-shadow(0 0 30px rgba(255,255,255,0.35)); }
.login-mock .t { font-family:'Inter',var(--sans) !important; font-weight:800; font-size:23px !important; letter-spacing:-.035em !important; }
.login-mock .s { font-weight:400; }
.login-mock .b1, .login-mock .b2 { font-weight:700; letter-spacing:-.01em; border-radius:14px; padding:12px; }
.login-mock .b1 { box-shadow:0 8px 20px -8px rgba(0,0,0,0.45); }
.login-mock .b2 { backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
@media (prefers-reduced-motion:reduce) { .cta-split .phone-peek .device { animation:none; } }

/* Calculateur : frise des étapes */
.flow { position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:36px; }
.flow::before { content:""; position:absolute; top:31px; left:16%; right:16%; height:2px; background:repeating-linear-gradient(90deg, var(--coral) 0 8px, transparent 8px 16px); opacity:.5; }
.flow-item { position:relative; text-align:center; }
.flow-item .dot { width:64px; height:64px; border-radius:50%; margin:0 auto 22px; display:grid; place-items:center; background:#fff; border:2px solid var(--coral); color:var(--coral); position:relative; z-index:1; transition:background .4s, color .4s; }
.flow-item.visible .dot { background:var(--coral); color:#fff; }
.flow-item .dot svg { width:26px; height:26px; }
.flow-item h3 { font-family:var(--sans); font-weight:700; font-size:16px; margin:0 0 8px; }
.flow-item p { font-size:14.5px; color:var(--slate); line-height:1.7; margin:0 auto; max-width:30ch; }

/* Calculateur : graphique de charge hebdomadaire */
.load-chart { background:#fff; border:1px solid var(--line); border-radius:24px; padding:28px 26px 22px; box-shadow:0 30px 60px -40px rgba(22,35,63,0.35); }
.load-chart .head { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:40px; }
.load-chart .head b { font-size:14px; }
.load-chart .head span { font-size:12px; color:var(--slate); }
.bars { display:grid; grid-template-columns:repeat(8,1fr); gap:10px; align-items:end; height:210px; position:relative; }
.bars .avg { position:absolute; left:0; right:0; border-top:2px dashed rgba(22,35,63,0.3); z-index:1; }
.bars .avg span { position:absolute; right:0; top:-20px; font-size:11px; color:var(--slate); background:#fff; padding:0 4px; }
.bars .bar { position:relative; border-radius:8px 8px 4px 4px; background:#dfe3ea; height:0; transition:height 1.1s var(--ease); }
.bars .bar.spike { background:var(--coral); }
.load-chart.visible .bars .bar { height:var(--h); }
.bars .bar i { position:absolute; bottom:-22px; left:0; right:0; text-align:center; font-style:normal; font-size:11px; color:var(--slate); }
.bars .bar .tip { position:absolute; top:-30px; left:50%; transform:translateX(-50%); white-space:nowrap; font-size:11px; font-weight:700; color:#fff; background:var(--coral); padding:3px 8px; border-radius:100px; opacity:0; transition:opacity .4s 1.1s; }
.load-chart.visible .bars .bar .tip { opacity:1; }
.load-chart .legend { display:flex; gap:16px; flex-wrap:wrap; margin-top:36px; font-size:12px; color:var(--slate); }
.load-chart .legend i { display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:6px; vertical-align:-1px; }

/* Calculateur : bande corail */
.cta-band { background:linear-gradient(120deg, var(--coral) 0%, #f2754a 100%); color:#fff; }
.cta-band .wrap { display:flex; justify-content:space-between; align-items:center; gap:40px; padding-top:80px; padding-bottom:80px; flex-wrap:wrap; }
.cta-band h2 { font-size:clamp(30px,4vw,48px); line-height:1.1; margin:0 0 10px; max-width:18ch; }
.cta-band h2 em { color:#fff; }
.cta-band p { margin:0; font-size:16px; max-width:52ch; opacity:.92; line-height:1.7; }
.cta-band .actions { display:flex; gap:12px; flex-wrap:wrap; }
.cta-band .btn-primary { color:var(--coral); }

/* Calculateur : liens en lignes */
.row-links { border-top:1px solid var(--line); }
.row-links a { display:grid; grid-template-columns:70px 1fr auto; gap:20px; align-items:center; padding:26px 4px; border-bottom:1px solid var(--line); text-decoration:none; color:inherit; transition:padding .35s var(--ease), background .35s; }
.row-links a:hover { padding-left:16px; background:var(--mist); }
.row-links .n { font-family:var(--display); font-size:34px; color:var(--coral); line-height:1; }
.row-links h3 { font-family:var(--display); font-weight:400; font-size:clamp(22px,2.4vw,28px); margin:0 0 4px; }
.row-links p { margin:0; font-size:14px; color:var(--slate); }
.row-links .go { width:46px; height:46px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; color:var(--navy); transition:background .3s, color .3s, transform .35s var(--ease); }
.row-links a:hover .go { background:var(--navy); color:#fff; transform:rotate(-45deg); }

/* Ressources : fiche joueur animée */
.player-card { background:#fff; border:1px solid var(--line); border-radius:26px; padding:28px; box-shadow:0 40px 80px -50px rgba(22,35,63,0.45); max-width:440px; margin:0 auto; }
.player-card .top { display:flex; align-items:center; gap:14px; margin-bottom:22px; }
.player-card .av { width:52px; height:52px; border-radius:50%; background:var(--navy); color:#fff; display:grid; place-items:center; font-weight:700; font-size:17px; }
.player-card .who b { display:block; font-size:16px; }
.player-card .who span { font-size:12.5px; color:var(--slate); }
.player-card .flag { margin-left:auto; font-size:11px; font-weight:700; padding:5px 10px; border-radius:100px; background:var(--coral-soft); color:var(--coral); white-space:nowrap; }
.kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:20px; }
.kpis div { background:var(--mist); border-radius:14px; padding:14px 10px; text-align:center; }
.kpis b { display:block; font-family:var(--display); font-weight:400; font-size:28px; color:var(--navy); line-height:1.1; }
.kpis span { font-size:11px; color:var(--slate); letter-spacing:.5px; text-transform:uppercase; }
.spark { width:100%; height:auto; display:block; }
.spark .ln { stroke-dasharray:700; stroke-dashoffset:700; transition:stroke-dashoffset 2s var(--ease) .2s; }
.player-card.visible .spark .ln { stroke-dashoffset:0; }
.player-card .cap { font-size:12px; color:var(--slate); margin-top:8px; }

/* Ressources : bandeau défilant des sports */
.ticker { overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:26px 0; margin-top:46px; -webkit-mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.ticker-track { display:flex; gap:56px; width:max-content; animation:tick 32s linear infinite; }
.ticker-track span { font-family:var(--display); font-size:clamp(28px,4vw,46px); color:var(--navy); white-space:nowrap; }
.ticker-track span:nth-child(odd) { font-style:italic; color:var(--coral); }
@keyframes tick { to { transform:translateX(-50%); } }

/* Ressources : CTA en deux cartes */
.cta-duo { display:grid; grid-template-columns:1.3fr 1fr; gap:20px; }
.cta-duo .card-cta { border-radius:26px; padding:44px 40px; display:flex; flex-direction:column; justify-content:space-between; min-height:300px; text-decoration:none; transition:transform .35s var(--ease); }
.cta-duo .card-cta:hover { transform:translateY(-4px); }
.cta-duo .card-cta.navy { background:var(--navy); color:#fff; }
.cta-duo .card-cta.navy h2 em { color:var(--coral); }
.cta-duo .card-cta.light { background:var(--coral-soft); color:var(--ink); }
.cta-duo h2 { font-size:clamp(28px,3.6vw,44px); line-height:1.1; margin:0 0 12px; }
.cta-duo p { margin:0; font-size:15.5px; line-height:1.7; opacity:.85; max-width:40ch; }
.cta-duo .more { margin-top:28px; font-weight:600; font-size:14px; }

/* Écran de connexion rouge (maquette dans le téléphone) */
.device-screen:has(.login-mock) { background:#B81818; }
.login-mock { position:absolute; inset:-2px; overflow:hidden; color:#fff; font-family:'Inter',var(--sans); display:flex; flex-direction:column; padding:14px 16px 12px; background:radial-gradient(122% 92% at 50% 6%, #FF4520 0%, #EA2319 26%, #C61B1B 52%, #931112 78%, #6B0C0D 100%); }
.login-mock .bar { display:flex; justify-content:space-between; font-size:11px; font-weight:700; padding:2px 10px 0; position:relative; z-index:2; }
.login-mock .sil { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:1; }
.login-mock .sil svg { width:92%; height:auto; opacity:.2; transform:translateY(-6%); }
.login-mock .body { position:relative; z-index:2; margin-top:auto; }
.login-mock .t { font-weight:800; font-size:22px; line-height:1.05; letter-spacing:-.02em; margin:0 0 8px !important; color:#fff !important; max-width:none !important; }
.login-mock .s { font-size:11px !important; line-height:1.45 !important; color:rgba(255,255,255,0.86) !important; margin:0 0 14px !important; max-width:none !important; }
.login-mock .b1, .login-mock .b2 { display:block; text-align:center; border-radius:12px; padding:11px; font-size:12.5px; font-weight:800; margin-bottom:8px; }
.login-mock .b1 { background:#fff; color:#2A0406; }
.login-mock .b2 { background:rgba(255,255,255,0.10); border:1.5px solid rgba(255,255,255,0.4); }
.login-mock .home { width:34%; height:4px; border-radius:4px; background:rgba(255,255,255,0.55); margin:10px auto 0; }

/* ---------- ANIMATIONS AU SCROLL ---------- */
.js .reveal { opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.visible { opacity:1; transform:none; }
.js .reveal-up { opacity:0; transform:translateY(34px); transition:opacity .9s ease, transform 1s var(--ease); }
.reveal-up.visible { opacity:1; transform:none; }
.reveal-img { overflow:hidden; position:relative; }
.js .reveal-img img { transform:scale(1.08); transition:transform 1.3s var(--ease); }
.reveal-img.visible img { transform:scale(1); }
.js .reveal-img::after { content:""; position:absolute; inset:0; background:var(--paper); transform-origin:bottom; transition:transform 1s var(--ease); }
.reveal-img.visible::after { transform:scaleY(0); }
.js .reveal-device { opacity:0; transform:translateY(60px) rotate(-3deg); transition:opacity 1s var(--ease), transform 1.2s var(--ease); }
.reveal-device.visible { opacity:1; transform:none; }
[data-stagger] { transition-delay:calc(var(--i,0) * 90ms) !important; }
[data-parallax] { will-change:transform; transform:translate3d(0,0,0) scale(1.14); }
.js .hero-in { opacity:0; transform:translateY(22px); transition:opacity .9s var(--ease), transform .9s var(--ease); transition-delay:calc(.15s + var(--i,0) * .12s); }
.hero.ready .hero-in, .tool-hero.ready .hero-in { opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce) {
  .reveal, .reveal-up, .reveal-img img, .reveal-device, .hero-in { opacity:1 !important; transform:none !important; transition:none !important; }
  .reveal-img::after { display:none; }
  [data-parallax] { transform:none !important; }
  .step::after { transform:scaleX(1); transition:none; }
  .acwr-chart .line { stroke-dashoffset:0; transition:none; }
  .ticker-track { animation:none; }
  .bars .bar { transition:none; }
  .spark .ln { stroke-dashoffset:0; transition:none; }
  .story-step { opacity:1; }
  .hero-scroll::after { animation:none; }
  html { scroll-behavior:auto; }
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:980px) {
  .bento { grid-template-columns:1fr 1fr; }
  .tile.span4 { grid-column:span 2; }
  .stats { grid-template-columns:1fr 1fr; row-gap:36px; }
  .stat:nth-child(3) { border-left:none; padding-left:0; }
  .trust { grid-template-columns:1fr 1fr; }
  .trust div:nth-child(3) { border-left:none; }
  .trust div:nth-child(n+3) { border-top:1px solid var(--line); }
}
@media (max-width:820px) {
  .site-header, .site-header.scrolled, .site-header.solid { padding-left:18px; padding-right:18px; }
  .wrap { padding:0 22px; }
  .hero-inner { padding:0 22px 64px; }
  .hero-light { padding:120px 0 50px; }
  .section { padding:84px 0; }
  .statement { padding:90px 22px 70px; }
  .stats { padding:0 22px 80px; }
  .steps, .cards-2, .cards-3 { grid-template-columns:1fr; }
  .pillar { grid-template-columns:1fr; gap:36px; padding:64px 22px; }
  .pillar.reverse .pillar-visual { order:0; }
  .pillar-visual.photo { aspect-ratio:4/3; }
  .story { grid-template-columns:1fr; gap:0; padding:0 22px; }
  .story-sticky { display:none; }
  .story-steps { padding:0; }
  .story-step { min-height:0; opacity:1; padding:44px 0; border-top:1px solid rgba(255,255,255,0.1); }
  .story-step:first-child { border-top:none; }
  .story-step .device { display:block; width:220px; margin:30px auto 0; }
  .cta-final { padding:110px 22px; }
  .subnav { top:60px; }
}
@media (max-width:820px) {
  .roles, .cta-duo { grid-template-columns:1fr; }
  .roles { padding:0 22px 80px; }
  .cta-split .wrap { grid-template-columns:1fr; gap:50px; padding-top:70px; padding-bottom:80px; }
  .cta-split .phone-peek .device { width:230px; }
  .flow { grid-template-columns:1fr; gap:30px; }
  .flow::before { display:none; }
  .row-links a { grid-template-columns:48px 1fr; }
  .row-links .go { display:none; }
  .cta-duo .card-cta { padding:34px 26px; min-height:0; }
}
@media (max-width:560px) {
  .header-login { display:none; }
  .bento { grid-template-columns:1fr; }
  .tile.span2, .tile.span4 { grid-column:auto; }
  .tile.wide { display:block; }
  .tile.wide .ico { margin-bottom:20px; }
  .trust { grid-template-columns:1fr; }
  .trust div { border-left:none !important; border-top:1px solid var(--line); }
  .trust div:first-child { border-top:none; }
  .stat { padding:0 0 0 16px; }
  .subnav a { padding:8px 12px; font-size:12px; }
}

/* ---------- PRODUIT : les quatre échelles ---------- */
.scales { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.scale-card { background:#fff; border:1px solid var(--line); border-radius:18px; padding:24px 22px; display:flex; flex-direction:column; }
.scale-top { display:flex; flex-direction:column; align-items:flex-start; gap:8px; margin-bottom:12px; }
.scale-card h3 { font-family:var(--display); font-weight:400; font-size:24px; margin:0; }
.scale-tag { font-size:11px; font-weight:600; letter-spacing:.4px; padding:4px 10px; border-radius:100px; background:var(--fog); color:var(--slate); white-space:nowrap; }
.scale-tag.on { background:var(--navy); color:#fff; }
.scale-card p { color:var(--slate); font-size:14.5px; line-height:1.65; margin:0 0 18px; }
.scale-dots { margin-top:auto; display:grid; grid-template-columns:repeat(10,1fr); gap:4px; }
.scale-dots i { height:6px; border-radius:3px; background:linear-gradient(90deg,#3cae49,#f0c528,#e5503b); background-size:1000% 100%; }
.scale-dots i:nth-child(1){background-position:0 0}.scale-dots i:nth-child(2){background-position:11% 0}.scale-dots i:nth-child(3){background-position:22% 0}.scale-dots i:nth-child(4){background-position:33% 0}.scale-dots i:nth-child(5){background-position:44% 0}.scale-dots i:nth-child(6){background-position:55% 0}.scale-dots i:nth-child(7){background-position:66% 0}.scale-dots i:nth-child(8){background-position:77% 0}.scale-dots i:nth-child(9){background-position:88% 0}.scale-dots i:nth-child(10){background-position:100% 0}
@media (max-width:980px) { .scales { grid-template-columns:1fr 1fr; } }
@media (max-width:560px) { .scales { grid-template-columns:1fr; } }

/* ---------- ARTICLES (ressources) ---------- */
.art-hero { background:var(--navy); color:#fff; padding:150px 30px 70px; }
.art-inner { max-width:760px; margin:0 auto; }
.art-back { display:inline-block; margin-bottom:22px; font-size:14px; font-weight:600; color:rgba(255,255,255,0.75); text-decoration:none; }
.art-back:hover { color:#fff; }
.art-hero .kicker { color:var(--coral); }
.art-hero h1 { font-family:var(--display); font-weight:400; font-size:clamp(34px,4.6vw,56px); line-height:1.08; letter-spacing:-.6px; margin:10px 0 18px; }
.art-lead { font-size:18px; line-height:1.65; color:rgba(255,255,255,0.82); margin:0 0 14px; }
.art-date { font-size:13px; color:rgba(255,255,255,0.6); margin:0; }
.art-section { padding-top:60px; }
.art { max-width:760px; margin:0 auto; padding:0 30px; }
.art h2 { font-family:var(--display); font-weight:400; font-size:clamp(25px,2.8vw,32px); line-height:1.2; margin:44px 0 14px; }
.art p, .art li { font-size:17px; line-height:1.8; color:#2b2d31; }
.art p { margin:0 0 18px; }
.art ul { margin:0 0 18px; padding-left:22px; }
.art a { color:var(--navy); }
.art .table-scroll { margin:8px 0 22px; }
.art-short { background:var(--mist); border:1px solid var(--line); border-left:4px solid var(--coral); border-radius:14px; padding:22px 24px; }
.art-short span { display:block; font-size:11px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:var(--coral); margin-bottom:8px; }
.art-short p { margin:0; font-size:17px; }
.art-note { font-size:14px !important; color:var(--slate) !important; font-style:italic; margin-top:30px !important; }
.art-sources h2, .art-more h2 { font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:var(--slate); margin:40px 0 12px; }
.art-sources ul { padding-left:18px; }
.art-sources li { font-size:14px; line-height:1.7; }
.art-link { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:16px 0; border-top:1px solid var(--line); text-decoration:none; font-weight:600; color:var(--ink) !important; }
.art-link:last-child { border-bottom:1px solid var(--line); }
.art-cta { margin-top:46px; background:var(--navy); color:#fff; border-radius:20px; padding:34px 30px; text-align:center; }
.art-cta h2 { color:#fff; margin:0 0 10px; }
.art-cta p { color:rgba(255,255,255,0.78) !important; margin:0 0 22px !important; }
.art-list { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.art-card { display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:18px; padding:26px 24px; text-decoration:none; color:inherit; transition:transform .2s, box-shadow .2s; }
.art-card:hover { transform:translateY(-3px); box-shadow:0 20px 40px -24px rgba(22,35,63,.35); }
.art-card h3 { font-family:var(--display); font-weight:400; font-size:23px; line-height:1.25; margin:0 0 10px; }
.art-card p { color:var(--slate); font-size:15px; line-height:1.65; margin:0 0 16px; }
.art-card span { margin-top:auto; font-weight:600; font-size:14px; color:var(--navy); }
@media (max-width:900px) { .art-list { grid-template-columns:1fr; } .art-hero { padding:120px 22px 54px; } .art { padding:0 22px; } }