/* ============================================================================
   SILCA POINT CLÉS — LANDING DÉFINITIVE (v3 « mix »)
   Deliverable 4.6 « PROGETTO FRANCIA » — code : Enzo Dovizio
   ----------------------------------------------------------------------------
   MIX demandé par Francesca :
     · style des DERNIÈRES landing Storyblok Silca (silca.fr/solutions-automobiles,
       silca.de/boerkey) : page claire/blanche, rouge Silca, GROS titres condensés,
       stepper numéroté « comment ça marche », barre de stats, cartes produit,
       cartes objection→réponse, calculateur de marge.
     · why-evo.com : beaucoup d'espace, mouvement (marquee, count-up, reveal),
       visuels produit qui « flottent ».
     · Solutec (concurrent FR) : modèles Essentiel/Intégral, témoignages, mur d'enseignes.
   Typo : DM Sans (corps/UI) + Oswald (display condensé MAJUSCULE).
   Accent : rouge Silca #E2001A. Aucun noir pur (acier #1C2027). Angles nets (ADN Silca).
   Composants Storyblok : data-sb-component + data-sb-id (officiel) + data-sb-blok (kit).
   Toutes les animations respectent prefers-reduced-motion.
   ============================================================================ */

:root{
  /* neutres */
  --white:#FFFFFF;
  --off:#F6F6F4;            /* fond clair alterné (warm) */
  --off2:#EFEFEC;
  --ink:#15171C;           /* texte sur clair (near-black chaud, jamais #000) */
  --body:#51535B;
  --muted:#8A8C95;
  --line:#E6E6E2;
  /* aciers sombres (jamais noir pur) */
  --steel:#1C2027;         /* grandes bandes sombres */
  --steel-2:#161A20;
  --steel-card:#20242C;    /* cartes flottantes sombres */
  --on-dark:#C4C7CE;       /* corps de texte sur sombre */
  /* accent rouge Silca */
  --red:#E2001A;
  --red-hot:#FF3B2E;
  --red-deep:#B30015;
  --grad:#E2001A; /* aplati : rouge plein, plus de dégradé */
  --blue:#2563EB;          /* accent « le fabricant » (preuve/confiance), usage parcimonieux */
  /* radius / ombres / spacing — angles nets Silca */
  --r-pill:6px; --r-card:10px; --r-sm:5px;
  --sh-card:0 24px 60px rgba(16,18,22,.18);
  --sh-soft:0 14px 36px rgba(16,18,22,.10);
  --sh-xs:0 2px 10px rgba(16,18,22,.06);
  --maxw:1200px;
  --section:104px;
  --ease:cubic-bezier(.16,1,.3,1);
  /* typo */
  --font:'DM Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --display:'Oswald','DM Sans',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);font-weight:400;color:var(--body);background:var(--white);font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
strong{font-weight:600;color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px}
.skip-link{position:absolute;left:-999px;top:0;background:var(--red);color:#fff;padding:10px 16px;z-index:200}
.skip-link:focus{left:8px;top:8px}
/* focus clavier visible partout (WCAG 2.4.7) */
a:focus-visible,button:focus-visible,.acc-q:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,input[type=range]:focus-visible,.play:focus-visible,[role=button]:focus-visible{outline:3px solid var(--red-deep);outline-offset:3px;border-radius:var(--r-sm)}

/* ===== TYPO SYSTEM ===== */
h1,h2,.display{font-family:var(--display);font-weight:600;color:var(--ink);text-transform:uppercase;line-height:.98;letter-spacing:.005em}
h3{font-family:var(--display);font-weight:600;color:var(--ink);text-transform:uppercase;line-height:1.05;letter-spacing:.01em}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font:700 13px/1 var(--font);letter-spacing:.16em;text-transform:uppercase;color:var(--red-deep);margin-bottom:16px}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--red);display:inline-block}
.eyebrow.center{justify-content:center}
.band--dark .eyebrow,.eyebrow.on-dark{color:#FF5A45}
.lead{font-size:clamp(16px,1.6vw,19px);max-width:60ch;color:var(--body)}
.center{text-align:center}
.sec-head{max-width:740px;margin:0 auto 56px}
.sec-head.center{text-align:center}
.sec-head .lead{margin-left:auto;margin-right:auto}

/* ===== BUTTONS ===== */
.btn{display:inline-flex;align-items:center;gap:9px;font:600 14px/1 var(--font);text-transform:uppercase;letter-spacing:.05em;padding:15px 26px;border-radius:var(--r-pill);border:0;cursor:pointer;transition:transform .25s var(--ease),background-position .4s var(--ease),background .25s,border-color .2s,box-shadow .25s;white-space:nowrap}
.btn .ico{display:inline-flex;transition:transform .2s var(--ease)}
.btn .ico svg{width:15px;height:15px}
.btn:hover .ico{transform:translateX(4px)}
.btn--grad{background:var(--grad);background-size:170% 100%;background-position:0 0;color:#fff;box-shadow:0 8px 24px rgba(226,0,26,.26)}
.btn--grad:hover{background-position:100% 0;transform:translateY(-2px);box-shadow:0 12px 30px rgba(226,0,26,.34)}
.btn--ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.btn--ghost:hover{border-color:var(--ink);transform:translateY(-2px)}
.btn--ghost-dark{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.42)}
.btn--ghost-dark:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn--white{background:#fff;color:var(--red)}
.btn--white:hover{transform:translateY(-2px);box-shadow:var(--sh-soft)}
.btn--lg{padding:17px 32px;font-size:15px}

/* ===== TOPBAR + HEADER (11.01) — basique (Francesca remplace) ===== */
.topbar{background:var(--steel-card);color:var(--on-dark)}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:38px;gap:16px;font:500 12px/1 var(--font);letter-spacing:.06em;text-transform:uppercase;overflow:hidden}
.topbar b{color:#fff;font-weight:700}
.topbar .r{display:flex;gap:22px}
.topbar .r span{display:inline-flex;align-items:center;gap:7px}
.topbar .r .dot{width:6px;height:6px;border-radius:50%;background:var(--red)}
header.site{position:sticky;top:0;z-index:90;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);transition:box-shadow .2s}
header.site.scrolled{box-shadow:var(--sh-soft)}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--display);font-weight:600;color:var(--ink);font-size:24px;text-transform:uppercase;letter-spacing:.02em}
.brand .logo svg{width:36px;height:auto;display:block}
.brand b{color:var(--red);font-weight:700}
.placeholder-note{display:inline-block;font:600 10px/1 var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border:1px dashed var(--line);border-radius:4px;padding:4px 7px;margin-left:10px}
.brand img.logo-img{height:40px;width:auto;display:block}
.nav-links{display:flex;align-items:center;gap:28px}
.nav-links a{font-weight:500;color:var(--ink);font-size:15px;position:relative;transition:color .15s}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-7px;height:2px;width:0;background:var(--red);transition:width .22s var(--ease)}
.nav-links a:hover{color:var(--red)}
.nav-links a:hover::after{width:100%}
.nav-cta{display:flex;align-items:center;gap:12px}
.burger{display:none;background:none;border:0;cursor:pointer;width:42px;height:42px}
.burger span{display:block;width:24px;height:2px;background:var(--ink);margin:5px auto;transition:.2s}

/* ===== HERO (01.01) ===== */
.hero{position:relative;background:var(--white);overflow:hidden}
.hero::before{content:"";position:absolute;top:-30%;right:-12%;width:680px;height:680px;border-radius:50%;background:radial-gradient(circle,rgba(226,0,26,.08),rgba(226,0,26,0) 66%);z-index:0}
.hero::after{content:"";position:absolute;left:-10%;bottom:-40%;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(37,99,235,.05),transparent 70%);z-index:0}
.hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.06fr .94fr;gap:56px;align-items:center;padding:70px 26px 84px}
.hero .crumb{font-size:13px;color:var(--muted);margin-bottom:14px}
.hero .crumb a{color:var(--red);font-weight:600}
.shiny{display:inline-flex;align-items:center;gap:8px;font:700 12px/1 var(--font);letter-spacing:.16em;text-transform:uppercase;color:var(--red-deep);background:rgba(226,0,26,.07);border:1px solid rgba(226,0,26,.16);padding:8px 13px;border-radius:var(--r-pill);margin-bottom:20px}
.shiny .pulse{width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 0 0 rgba(226,0,26,.5);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(226,0,26,0)}100%{box-shadow:0 0 0 0 rgba(226,0,26,0)}}
.hero h1{font-size:clamp(46px,7vw,92px);color:var(--ink);max-width:14ch;font-weight:600;line-height:.94}
.hero h1 .hl{color:var(--red)}
.hero .lead{margin-top:24px;max-width:46ch}
.hero .cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:32px}
.hero .mini-trust{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:30px;font-size:13.5px;color:var(--body);font-weight:500}
.hero .mini-trust span{display:inline-flex;align-items:center;gap:8px}
.hero .mini-trust b{color:var(--ink);font-weight:700}
.hero .mini-trust .tick{color:var(--red);font-weight:800}
.hero-media{position:relative}
.hero-media .card{position:relative;border-radius:var(--r-card);overflow:hidden;box-shadow:var(--sh-card);aspect-ratio:4/3.2;background:var(--steel-card)}
.hero-media .card img{width:100%;height:100%;object-fit:cover}
.hero-media .card.product{display:grid;place-items:center;background:radial-gradient(120% 120% at 70% 10%,#2a2f38,#15181d);padding:6%}
.hero-media .card.product img{width:auto;height:auto;max-height:100%;object-fit:contain;filter:drop-shadow(0 30px 40px rgba(0,0,0,.45));animation:floaty 6s ease-in-out infinite}
@keyframes floaty{50%{transform:translateY(-12px)}}
.hero-media .tag{position:absolute;top:16px;left:16px;background:var(--grad);color:#fff;font:700 11.5px/1 var(--font);letter-spacing:.1em;text-transform:uppercase;padding:8px 12px;border-radius:var(--r-pill);z-index:2}
.hero-media .spec{position:absolute;bottom:-22px;right:-12px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-card);padding:15px 18px;border-radius:var(--r-card);display:flex;align-items:center;gap:13px}
.hero-media .spec .n{font:600 32px/1 var(--display);color:var(--ink)}
.hero-media .spec .t{font-size:12px;color:var(--muted);max-width:15ch;line-height:1.3}

/* ===== MARQUEE (déco cinétique) ===== */
.marquee{background:var(--grad);color:#fff;overflow:hidden;position:relative;z-index:1}
.marquee .track{display:flex;width:max-content;animation:marq 32s linear infinite;will-change:transform}
.marquee:hover .track{animation-play-state:paused}
.marquee .it{font:600 21px/1 var(--display);text-transform:uppercase;letter-spacing:.03em;padding:16px 0;white-space:nowrap}
.marquee .sep{padding:16px 26px;opacity:.55}
@keyframes marq{to{transform:translateX(-50%)}}

/* ===== STATS BAND (04.07) — carte sombre flottante, count-up ===== */
.stats{background:var(--white);position:relative;z-index:2}
.stats .wrap{padding-bottom:var(--section)}
.stats .card{background:var(--steel-card);border-radius:var(--r-card);box-shadow:var(--sh-card);padding:50px 40px;margin-top:-52px;position:relative;overflow:hidden}
.stats .card::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 300px at 84% 0%,rgba(226,0,26,.20),transparent 70%)}
.stats .ttl{position:relative;text-align:center;margin-bottom:40px}
.stats .ttl .eyebrow{color:#FF5A45}
.stats .ttl h2{color:#fff;font-size:clamp(26px,3.2vw,40px)}
.stats .grid{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.stats .c{text-align:center;padding:6px 8px;position:relative}
.stats .c+.c::before{content:"";position:absolute;left:0;top:12%;height:76%;width:1px;background:rgba(255,255,255,.12)}
.stats .c .n{font:600 clamp(40px,5.2vw,66px)/1 var(--display);color:#fff}
.stats .c .n .u{color:var(--red-hot);font-size:.5em;vertical-align:super;margin-left:2px}
.stats .c .l{margin-top:10px;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--on-dark);font-weight:500}

/* ===== STEPPER « COMMENT ÇA MARCHE » (04.03 / feature_grid) — signature Silca ===== */
.steps{padding:var(--section) 0;background:var(--white)}
.steps .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;counter-reset:step;position:relative}
.steps .step{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:34px 28px 30px;box-shadow:var(--sh-xs);transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s}
.steps .step:hover{transform:translateY(-5px);box-shadow:var(--sh-card);border-color:transparent}
.steps .step .num{font:600 56px/1 var(--display);color:var(--red);opacity:.18;position:absolute;top:18px;right:22px}
.steps .step .ic{width:54px;height:54px;border-radius:var(--r-card);background:var(--grad);color:#fff;display:grid;place-items:center;margin-bottom:18px;box-shadow:0 8px 20px rgba(226,0,26,.22)}
.steps .step .ic svg{width:26px;height:26px}
.steps .step h3{font-size:23px;margin-bottom:9px}
.steps .step p{font-size:15.5px}
.steps .step .badge{display:inline-flex;align-items:center;gap:7px;margin-top:16px;font:600 12.5px/1 var(--font);letter-spacing:.04em;text-transform:uppercase;color:var(--red-deep);background:rgba(226,0,26,.07);border-radius:var(--r-pill);padding:8px 12px}
.steps .step .badge svg{width:14px;height:14px}
.steps .arrow{position:absolute;top:46px;right:-22px;z-index:2;color:var(--line)}
@media(min-width:861px){.steps .step:last-child .arrow{display:none}}

/* ===== BANDES / SECTIONS ===== */
.band{padding:var(--section) 0}
.band--soft{background:var(--off)}
.band--dark{background:var(--steel);color:var(--on-dark)}
.band--dark h2,.band--dark h3{color:#fff}
.band--dark .lead,.band--dark p{color:var(--on-dark)}
.band h2{font-size:clamp(32px,4.4vw,56px)}

/* ===== SHOWCASE ROWS (04.02) ===== */
.show{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.show+.show{margin-top:80px}
.show--rev .show-media{order:-1}
.show-copy h3{font-size:clamp(28px,3.4vw,44px);margin-bottom:16px;line-height:1.02}
.show-copy p{font-size:17px;margin-bottom:20px}
.show-copy .checks{list-style:none;margin-bottom:24px}
.show-copy .checks li{display:flex;gap:12px;align-items:flex-start;margin-bottom:12px;font-weight:500;color:var(--ink)}
.band--dark .show-copy .checks li{color:#fff}
.show-copy .checks .ck{flex:0 0 auto;width:24px;height:24px;border-radius:var(--r-sm);background:var(--grad);color:#fff;display:grid;place-items:center}
.show-copy .checks .ck svg{width:14px;height:14px}
.show-media{position:relative;border-radius:var(--r-card);overflow:hidden;box-shadow:var(--sh-card);aspect-ratio:4/3}
.show-media img{width:100%;height:100%;object-fit:cover}
.show-media.product{display:grid;place-items:center;background:radial-gradient(120% 120% at 70% 10%,#fff,#eee);padding:5%;box-shadow:var(--sh-soft);border:1px solid var(--line)}
.show-media.product img{width:auto;height:auto;max-height:100%;object-fit:contain}
.show-media .tag{position:absolute;top:16px;left:16px;background:var(--grad);color:#fff;font:700 11.5px/1 var(--font);letter-spacing:.1em;text-transform:uppercase;padding:8px 12px;border-radius:var(--r-pill);z-index:2}
.pricewall{display:flex;gap:14px;margin:0 0 24px;flex-wrap:wrap}
.pricewall div{flex:1 1 120px;background:var(--off);border:1px solid var(--line);border-radius:var(--r-card);padding:18px;text-align:center}
.band--dark .pricewall div{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}
.pricewall b{display:block;font:600 30px/1 var(--display);color:var(--red)}
.pricewall span{display:block;font-size:12.5px;color:var(--muted);margin-top:6px}
.band--dark .pricewall span{color:var(--on-dark)}

/* ===== CALCULATEUR DE MARGE (marge_calc) — interactif, « le nouveau » ===== */
.calc{padding:var(--section) 0;background:var(--steel);color:var(--on-dark);position:relative;overflow:hidden}
.calc::before{content:"";position:absolute;top:-30%;right:-6%;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(226,0,26,.16),transparent 68%)}
.calc .wrap{position:relative;display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center}
.calc .intro h2{color:#fff;font-size:clamp(30px,4vw,50px);margin-bottom:16px}
.calc .intro p{color:var(--on-dark);font-size:17px;max-width:42ch}
.calc-panel{background:var(--steel-card);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-card);padding:34px;box-shadow:var(--sh-card)}
.calc-panel .row{margin-bottom:26px}
.calc-panel label{display:flex;justify-content:space-between;align-items:baseline;font-weight:600;color:#fff;font-size:15px;margin-bottom:14px}
.calc-panel label .val{font:600 26px/1 var(--display);color:var(--red-hot)}
.calc-panel input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:6px;background:linear-gradient(90deg,var(--red) 0%,var(--red) var(--p,40%),rgba(255,255,255,.14) var(--p,40%));outline:none}
.calc-panel input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:#fff;border:5px solid var(--red);cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.4)}
.calc-panel input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#fff;border:5px solid var(--red);cursor:pointer}
.calc-panel .scale{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted);margin-top:8px}
.calc-out{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:30px;padding-top:26px;border-top:1px solid rgba(255,255,255,.1)}
.calc-out .o{text-align:center}
.calc-out .o .n{font:600 clamp(30px,4vw,48px)/1 var(--display);color:#fff}
.calc-out .o.hl .n{color:var(--red-hot)}
.calc-out .o .l{font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--on-dark);margin-top:6px}
.calc .disclaimer{grid-column:1/-1;font-size:12.5px;color:var(--muted);margin-top:8px;text-align:center}
.calc-cta{margin-top:26px;display:flex;justify-content:center}

/* ===== CARTES MACHINES (04.02 variant produit / feature_grid) ===== */
.machines{padding:var(--section) 0;background:var(--off)}
.mgrid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.mcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--sh-xs);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.mcard:hover{transform:translateY(-5px);box-shadow:var(--sh-card)}
.mcard .pic{aspect-ratio:16/10;background:radial-gradient(120% 120% at 70% 12%,#fff,#ececea);display:grid;place-items:center;padding:26px;position:relative;border-bottom:1px solid var(--line)}
.mcard .pic img{width:auto;height:100%;max-height:200px;object-fit:contain;filter:drop-shadow(0 20px 30px rgba(0,0,0,.18))}
.mcard .pic .tag{position:absolute;top:14px;left:14px;background:var(--grad);color:#fff;font:700 11px/1 var(--font);letter-spacing:.08em;text-transform:uppercase;padding:7px 11px;border-radius:var(--r-pill)}
.mcard .pad{padding:26px 26px 28px;flex:1;display:flex;flex-direction:column}
.mcard h3{font-size:26px;margin-bottom:6px}
.mcard .sub{font-size:14px;color:var(--muted);margin-bottom:16px}
.mcard ul{list-style:none;margin-bottom:20px}
.mcard ul li{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--ink);margin-bottom:9px}
.mcard ul li svg{flex:0 0 auto;width:18px;height:18px;color:var(--red);margin-top:2px}
.mcard .foot{margin-top:auto}

/* ===== CARTES OBJECTION → RÉPONSE (04.03) ===== */
.obj-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.obj{background:#fff;border:1px solid var(--line);border-left:3px solid var(--red);border-radius:var(--r-card);padding:26px 26px 24px;box-shadow:var(--sh-xs);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.obj:hover{transform:translateY(-4px);box-shadow:var(--sh-soft)}
.obj .q{display:flex;gap:10px;align-items:center;font:600 13px/1.3 var(--font);letter-spacing:.02em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.obj .q svg{flex:0 0 auto;width:18px;height:18px;color:var(--red)}
.obj h3{font-size:21px;margin-bottom:8px;text-transform:none;font-family:var(--font);font-weight:700}
.obj p{font-size:15.5px}

/* ===== MODÈLES / PACKS (pack_card) — façon Solutec ===== */
.packs{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:920px;margin:0 auto}
.pack{position:relative;background:#fff;border:1.5px solid var(--line);border-radius:var(--r-card);padding:34px 30px 32px;box-shadow:var(--sh-xs);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.pack.feat{border-color:var(--red);box-shadow:0 20px 48px rgba(226,0,26,.12)}
.pack:hover{transform:translateY(-5px);box-shadow:var(--sh-card)}
.pack .flag{position:absolute;top:-13px;left:30px;background:var(--grad);color:#fff;font:700 11px/1 var(--font);letter-spacing:.08em;text-transform:uppercase;padding:7px 13px;border-radius:var(--r-pill)}
.pack .pname{font:600 30px/1 var(--display);text-transform:uppercase;color:var(--ink);margin-bottom:6px}
.pack .ptag{font-size:14px;color:var(--muted);margin-bottom:20px}
.pack ul{list-style:none;margin-bottom:24px}
.pack ul li{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--ink);margin-bottom:11px}
.pack ul li svg{flex:0 0 auto;width:18px;height:18px;color:var(--red);margin-top:2px}
.pack ul li.off{color:var(--muted)}
.pack ul li.off svg{color:var(--muted)}
.pack .btn{width:100%;justify-content:center}

/* ===== 4-GRID BÉNÉFICES (04.03) ===== */
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.gcard{position:relative;border-radius:var(--r-card);overflow:hidden;aspect-ratio:3/3.6;display:flex;align-items:flex-end;color:#fff;isolation:isolate;box-shadow:var(--sh-soft);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.gcard:hover{transform:translateY(-5px);box-shadow:var(--sh-card)}
.gcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.gcard::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(20,18,24,0) 30%,rgba(18,20,26,.92) 100%)}
.gcard .pad{padding:22px;position:relative;z-index:1}
.gcard .chip{display:inline-block;background:var(--grad);color:#fff;font:700 11px/1 var(--font);letter-spacing:.1em;text-transform:uppercase;padding:6px 10px;border-radius:var(--r-pill);margin-bottom:11px}
.gcard h3{color:#fff;font-size:20px;font-weight:600}

/* ===== CHIPS (compatibilité clés) ===== */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:4px 0 24px}
.chips .chip{border:1px solid var(--line);background:#fff;color:var(--ink);font:600 13.5px/1 var(--font);padding:11px 15px;border-radius:var(--r-pill)}
.band--dark .chips .chip{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);color:#fff}
.chips .chip.red{background:var(--grad);border-color:transparent;color:#fff}

/* ===== GALERIE COMPATIBILITÉ (produits e-Rebus) ===== */
.compat-gallery{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.compat-tile{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:18px 14px 14px;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:var(--sh-xs);aspect-ratio:1/1;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.compat-tile:hover{transform:translateY(-4px);box-shadow:var(--sh-soft)}
.compat-tile img{width:auto;height:auto;max-height:118px;max-width:78%;object-fit:contain;filter:drop-shadow(0 12px 18px rgba(0,0,0,.14))}
.compat-tile figcaption{margin-top:14px;font:600 12.5px/1 var(--font);text-transform:uppercase;letter-spacing:.04em;color:var(--ink);text-align:center}

/* ===== COMMERCIAL BANNER (05.01) ===== */
.cl-image{position:relative;color:#fff;text-align:center;padding:116px 0;overflow:hidden;display:flex;align-items:center;min-height:360px}
.cl-image .bg{position:absolute;inset:0;z-index:-2}
.cl-image .bg img{width:100%;height:100%;object-fit:cover}
.cl-image .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(18,20,26,.92),rgba(18,20,26,.6))}
.cl-image h2{color:#fff;max-width:22ch;margin:0 auto 16px;font-size:clamp(32px,4.4vw,54px)}
.cl-image p{color:#EDEDF0;max-width:54ch;margin:0 auto 28px;font-size:18px}

/* ===== TÉMOIGNAGES (NEW — façon Solutec) ===== */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.testi{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:28px 26px 24px;box-shadow:var(--sh-xs);display:flex;flex-direction:column}
.testi .quote{font-size:42px;line-height:1;color:var(--red);opacity:.25;font-family:var(--display);margin-bottom:6px}
.testi p{font-size:16px;color:var(--ink);margin-bottom:20px;flex:1}
.testi .who{display:flex;align-items:center;gap:12px;border-top:1px solid var(--line);padding-top:16px}
.testi .who .av{width:42px;height:42px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font:700 16px/1 var(--font);flex:0 0 auto}
.testi .who .nm{font-weight:700;color:var(--ink);font-size:15px}
.testi .who .en{font-size:13px;color:var(--muted)}
.testi-note{text-align:center;font-size:12.5px;color:var(--muted);margin-top:22px}
.testi{transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.testi:hover{transform:translateY(-4px);box-shadow:var(--sh-soft)}

/* ===== MUR D'ENSEIGNES (logo_wall) ===== */
.enseignes{padding:64px 0;background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.enseignes .lab{text-align:center;font:600 13px/1 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:32px}
.logo-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:30px 52px}
.logo-row img{height:34px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.55;transition:filter .25s,opacity .25s}
.logo-row img:hover{filter:grayscale(0);opacity:1}

/* ===== VIDEO (04.10) ===== */
.standalone{max-width:960px;margin:0 auto;text-align:center}
.video-frame{position:relative;border-radius:var(--r-card);overflow:hidden;aspect-ratio:16/9;box-shadow:var(--sh-card);background:var(--steel-card)}
.video-frame img{width:100%;height:100%;object-fit:cover;opacity:.72}
.video-frame video{width:100%;height:100%;object-fit:cover}
.video-frame .play{position:absolute;inset:0;display:grid;place-items:center;cursor:pointer}
.video-frame .play .disc{width:88px;height:88px;border-radius:50%;background:var(--grad);display:grid;place-items:center;box-shadow:0 10px 34px rgba(226,0,26,.5);transition:.2s var(--ease)}
.video-frame .play:hover .disc{transform:scale(1.08)}
.video-frame .play .disc::after{content:"";border-style:solid;border-width:14px 0 14px 22px;border-color:transparent transparent transparent #fff;margin-left:5px}
.standalone p.cap{margin-top:18px;font-size:15px;color:var(--muted)}

/* ===== ACCORDION FAQ (04.05) ===== */
.faq{max-width:860px;margin:0 auto}
.acc{border:1px solid var(--line);border-radius:var(--r-card);background:#fff;margin-bottom:12px;overflow:hidden}
.acc-q{width:100%;text-align:left;background:none;border:0;cursor:pointer;padding:22px 24px;font:600 17px/1.4 var(--font);color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:16px}
.acc-q .ic{flex:0 0 auto;width:26px;height:26px;border-radius:var(--r-sm);background:var(--off);position:relative;transition:.2s}
.acc-q .ic::before,.acc-q .ic::after{content:"";position:absolute;background:var(--red);left:50%;top:50%;transform:translate(-50%,-50%)}
.acc-q .ic::before{width:12px;height:2px}
.acc-q .ic::after{width:2px;height:12px;transition:.2s}
.acc.open .acc-q .ic{background:var(--red)}
.acc.open .acc-q .ic::before,.acc.open .acc-q .ic::after{background:#fff}
.acc.open .acc-q .ic::after{transform:translate(-50%,-50%) scaleY(0)}
.acc-a{max-height:0;overflow:hidden;transition:max-height .3s var(--ease)}
.acc-a p{padding:0 24px 22px;color:var(--body)}

/* ===== CTA ROUGE (05.02) ===== */
.cl-red{background:var(--grad);color:#fff;text-align:center;padding:100px 0;position:relative;overflow:hidden}
.cl-red::before{content:"";position:absolute;top:-44%;left:-8%;width:540px;height:540px;border-radius:50%;background:rgba(255,255,255,.09)}
.cl-red .wrap{position:relative}
.cl-red .eyebrow{color:#fff}
.cl-red .eyebrow::before{background:#fff}
.cl-red h2{color:#fff;max-width:24ch;margin:0 auto 14px;font-size:clamp(32px,4.4vw,54px)}
.cl-red p{color:#FFE7E3;font-size:19px;margin-bottom:30px}

/* ===== CONTACT FORM (09 / lead_form) ===== */
.contact{background:var(--off)}
.contact .grid{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:start}
.contact .intro h2{margin-bottom:16px;font-size:clamp(30px,4vw,48px)}
.contact .intro p{font-size:17px;margin-bottom:24px;color:var(--body)}
.reassure{list-style:none}
.reassure li{display:flex;gap:14px;align-items:flex-start;margin-bottom:16px}
.reassure .ic{flex:0 0 auto;width:46px;height:46px;border-radius:var(--r-card);background:#fff;border:1px solid var(--line);display:grid;place-items:center;color:var(--red)}
.reassure .ic svg{width:22px;height:22px}
.reassure strong{display:block;color:var(--ink);font-size:15.5px;font-weight:600}
.reassure span span{display:block;color:var(--muted);font-size:13.5px}
form.lead{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:30px;box-shadow:var(--sh-soft)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{margin-bottom:14px}
.field label{display:block;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:6px}
.field .req{color:var(--red)}
.field input,.field select,.field textarea{width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:var(--r-sm);font:400 15px var(--font);color:var(--ink);background:#fff;transition:.15s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(226,0,26,.12)}
.field textarea{min-height:92px;resize:vertical}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--muted);margin:6px 0 18px}
.consent input{width:20px;height:20px;flex:0 0 auto;margin-top:2px;accent-color:var(--red)}
.consent a{color:var(--red);font-weight:600}
form.lead .btn{width:100%;justify-content:center}
.form-ok{display:none;background:#E9F7EE;border:1px solid #BCE6CB;color:#1B7A3D;padding:14px;border-radius:var(--r-sm);font-weight:500;margin-bottom:14px}

/* ===== PRE-FOOTER (11.03) ===== */
.prefooter{background:#fff;border-top:1px solid var(--line)}
.prefooter .inner{display:flex;align-items:center;gap:24px;padding:30px 0}
.prefooter .pf-ic{flex:0 0 auto;width:56px;height:56px;border-radius:var(--r-card);background:var(--off);display:grid;place-items:center;color:var(--red)}
.prefooter .pf-tx{flex:1}
.prefooter h3{font-size:23px;margin-bottom:4px}
.prefooter p{font-size:15px;color:var(--muted)}

/* ===== FOOTER (11.04) — basique (Francesca remplace) ===== */
footer.site{background:var(--steel-card);color:#9A9AA4;padding:64px 0 26px}
footer.site .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px}
footer.site h4{color:#fff;font-size:15px;font-weight:600;margin-bottom:16px;letter-spacing:.04em;text-transform:uppercase;font-family:var(--display)}
footer.site a{display:block;color:#9A9AA4;font-size:14px;margin-bottom:10px;transition:.15s}
footer.site a:hover{color:#fff}
footer.site .fbrand{display:flex;align-items:center;gap:10px;color:#fff;font-family:var(--display);font-weight:600;font-size:22px;margin-bottom:14px;text-transform:uppercase}
footer.site .fbrand b{color:var(--red)}
footer.site .fbrand svg{width:32px}
footer.site .desc{font-size:14px;max-width:36ch;line-height:1.6}
footer.site .bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:44px;padding-top:22px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;font-size:13px;color:#76767E}
footer.site .bottom a{display:inline;margin:0 0 0 16px}

/* ===== STICKY CTA (mobile) ===== */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:95;display:none;gap:10px;padding:10px 14px;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-top:1px solid var(--line)}
.sticky-cta .btn{flex:1;justify-content:center}

/* ===== ANIMATIONS ===== */
/* Animations : UNIQUEMENT fade simple (titres inclus, pas de split/cut) */
.reveal,.split,.cut{opacity:0;transition:opacity .6s var(--ease)}
.reveal.in,.split.in,.cut.in{opacity:1}
.reveal[data-stagger].in{transition-delay:calc(var(--i,0)*70ms)}

/* ===== RESPONSIVE ===== */
@media(max-width:980px){
  :root{--section:76px}
  .hero .wrap{grid-template-columns:1fr;gap:44px;padding-top:50px}
  .hero-media{max-width:560px}
  .stats .grid{grid-template-columns:repeat(2,1fr);gap:30px 18px}
  .stats .c:nth-child(3)::before{display:none}
  .steps .grid{grid-template-columns:1fr;gap:18px}
  .steps .arrow{display:none}
  .calc .wrap{grid-template-columns:1fr;gap:34px}
  .mgrid{grid-template-columns:1fr}
  .obj-grid{grid-template-columns:1fr}
  .packs{grid-template-columns:1fr;max-width:480px}
  .grid4{grid-template-columns:repeat(2,1fr)}
  .testi-grid{grid-template-columns:1fr}
  .show{grid-template-columns:1fr;gap:30px}
  .show--rev .show-media{order:0}
  .contact .grid{grid-template-columns:1fr;gap:34px}
  footer.site .cols{grid-template-columns:1fr 1fr}
  .nav-links{position:fixed;inset:74px 0 auto 0;background:#fff;flex-direction:column;align-items:flex-start;gap:0;padding:8px 26px 20px;border-bottom:1px solid var(--line);box-shadow:var(--sh-soft);transform:translateY(-145%);transition:transform .25s var(--ease);z-index:80}
  .nav-links.open{transform:none}
  .nav-links a{padding:14px 0;width:100%;border-bottom:1px solid var(--line)}
  .nav-links a::after{display:none}
  .burger{display:block}
  .nav-cta .btn{display:none}
  .topbar .r{display:none}
  .sticky-cta{display:flex}
}
@media(max-width:560px){
  .grid4{grid-template-columns:1fr}
  .stats .grid{grid-template-columns:1fr}
  .stats .c::before{display:none!important}
  .calc-out{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr}
  footer.site .cols{grid-template-columns:1fr}
  .hero-media .spec{position:static;margin-top:16px}
  .logo-row{gap:22px 32px}
  .logo-row img{height:26px}
  .field{margin-bottom:18px}
  .field input,.field select,.field textarea{padding:15px 14px}
}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
  .reveal,.split,.cut{opacity:1!important;transition:none!important}
}

/* ============================================================================
   v4 — AJUSTEMENTS : rouge plein · pas de dégradés/halos · HERO vidéo+form · formats images
   ============================================================================ */
/* boutons rouge plein */
.btn--grad{background:var(--red);background-position:0 0}
.btn--grad:hover{background:var(--red-deep);background-position:0 0}
/* suppression des dégradés/halos décoratifs */
.hero::before,.hero::after,.stats .card::before,.calc::before,.cl-red::before{display:none}
.shiny .pulse{animation:none}
/* scrims PLATS (au lieu de dégradés) sur images sombres */
.gcard::after{background:rgba(16,18,22,.58)}
.cl-image .bg::after{background:rgba(16,18,22,.78)}
/* ---- HERO : fond vidéo + formulaire ---- */
.hero{background:var(--steel)}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--steel)}
/* iframe YouTube en fond : on sur-dimensionne pour couvrir (cover) tout le hero */
.hero-video{position:absolute;top:50%;left:50%;width:max(100%,177.78vh);height:max(100%,56.25vw);transform:translate(-50%,-50%);border:0;display:block;pointer-events:none}
.hero-scrim{position:absolute;inset:0;background:rgba(16,18,22,.66)}
.hero .wrap{padding-top:84px;padding-bottom:92px;align-items:center}
.hero .hero-copy h1{color:#fff}
.hero .hero-copy .lead{color:#EAEAEE}
.hero .hero-copy .mini-trust{color:#D7D8DC}
.hero .hero-copy .mini-trust b{color:#fff}
.hero .shiny{color:#fff;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.25)}
.hero-form-wrap{position:relative}
.lead--hero{padding:24px 22px 22px}
.hero-form-head{margin-bottom:16px}
.hero-form-head strong{display:block;font:600 20px/1.15 var(--display);text-transform:uppercase;color:var(--ink);letter-spacing:.01em}
.hero-form-head span{display:block;font-size:13.5px;color:var(--muted);margin-top:5px}
.lead--hero .field{margin-bottom:11px}
.lead--hero .consent{margin:4px 0 14px;font-size:12px}
/* ---- MACHINES : conteneurs produit corrigés (fond plat, ratio adapté) ---- */
.mcard .pic{aspect-ratio:4/3;background:#F4F4F1}
.mcard .pic img{max-height:86%;height:auto}
/* ancien visuel produit hero neutralisé */
.hero-media{display:none}
@media(max-width:980px){ .hero .wrap{padding-top:50px} .hero-form-wrap{margin-top:6px} }

/* ============================================================================
   v4.1 — LES IMAGES REMPLISSENT BIEN LES BLOCS (cover, plein cadre)
   ============================================================================ */
/* cartes machines : image plein cadre */
.mcard .pic{padding:0}
.mcard .pic img{width:100%;height:100%;max-height:none;object-fit:cover;object-position:center;filter:none}
/* lignes showcase « produit » : image plein cadre */
.show-media.product{padding:0;background:#F1F1EE}
.show-media.product img{width:100%;height:100%;object-fit:cover;object-position:center}
/* galerie compatibilité : clé ENTIÈRE, centrée, grande (contain, pas de crop) */
.compat-tile{padding:18px 14px 12px;overflow:hidden;background:#fff;justify-content:space-between}
.compat-tile img{width:auto;height:auto;max-width:84%;max-height:none;flex:1;min-height:0;object-fit:contain;object-position:center;filter:drop-shadow(0 8px 14px rgba(0,0,0,.10))}
.compat-tile figcaption{margin:8px 0 0;position:static}
/* lignes « clés » du mini-site : clé entière centrée (pas de crop) */
.show-media.keyshot{background:#F1F1EE;padding:0;display:grid;place-items:center}
.show-media.keyshot img{width:auto;height:auto;max-width:78%;max-height:84%;object-fit:contain;object-position:center;filter:drop-shadow(0 14px 22px rgba(0,0,0,.12))}

/* ============================================================================
   v4.2 — TEXTES LÉGÈREMENT RÉDUITS (demande client)
   ============================================================================ */
body{font-size:16px}
.hero h1{font-size:clamp(38px,5.6vw,72px)}
.hero .lead,.lead{font-size:clamp(15px,1.35vw,17px)}
.band h2{font-size:clamp(27px,3.5vw,45px)}
.show-copy h3{font-size:clamp(23px,2.8vw,36px)}
.show-copy p{font-size:16px}
.sec-head{margin-bottom:48px}
.stats .c .n{font-size:clamp(34px,4.2vw,54px)}
.stats .ttl h2{font-size:clamp(22px,2.7vw,33px)}
.steps .step h3{font-size:20px}
.steps .step p,.obj p,.mcard ul li,.pack ul li,.svc p,.mcard .sub{font-size:14.5px}
.mcard h3{font-size:22px}
.obj h3{font-size:19px}
.pack .pname{font-size:26px}
.gcard h3{font-size:18px}
.testi p{font-size:15px}
.calc .intro h2{font-size:clamp(26px,3.2vw,40px)}
.calc .intro p,.contact .intro p{font-size:16px}
.cl-red h2,.cl-image h2{font-size:clamp(27px,3.5vw,44px)}
.cl-red p,.cl-image p{font-size:17px}
.contact .intro h2{font-size:clamp(26px,3.2vw,40px)}
.acc-q{font-size:16px}
.prefooter h3{font-size:20px}
.hero-form-head strong{font-size:18px}