/* Clash Display — AUTO-HÉBERGÉE (la CSP stricte bloque les CDN externes ;
on sert les .woff2 depuis 'self'). Licence ITF Free Font (usage commercial OK). */
@font-face{font-family:'Clash Display';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/clash-display-400.woff2') format('woff2');}
@font-face{font-family:'Clash Display';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/clash-display-500.woff2') format('woff2');}
@font-face{font-family:'Clash Display';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/clash-display-600.woff2') format('woff2');}
@font-face{font-family:'Clash Display';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/clash-display-700.woff2') format('woff2');}
/* Inter — AUTO-HÉBERGÉE (police variable, axe poids 100→900) au lieu de Google Fonts :
supprime la requête externe bloquante (cause de FOUT/reflow au chargement à froid) et
les exceptions CSP. Sous-ensembles latin + latin-ext (accents FR/NL + marques type Akrapovič). */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('/fonts/inter-latin-wght-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('/fonts/inter-latin-ext-wght-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
/* =====================================================================
POWERCONCEPT — Design system
Direction : clair premium froid · précision « instrument »
===================================================================== */
/* Corps de texte : Inter (chargé via le des pages HTML, 300→900).
Titres : Clash Display (police d'affichage distinctive, chargée ci-dessus). */
:root {
/* Base noir high-tech */
--bg: #060609;
--bg-2: #0c0c12;
--bg-3: #14141c;
--surface: #1c1e24;
--surface-2: #23252c;
--line: rgba(255,255,255,.09);
--line-2: rgba(255,255,255,.055);
--text: #efece6; /* blanc chaud */
--muted: #9c9ca4;
--muted-2: #6a6b74;
--accent: #ff2e3a; /* rouge néon */
--accent-soft: rgba(255,46,58,.14);
--metal: #c8bfb0; /* champagne / platine, pour hairlines & labels */
--radius: 14px;
--radius-sm: 10px;
--maxw: 1180px;
--shadow: 0 30px 70px -30px rgba(0,0,0,.8);
--font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
--display: "Clash Display", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
--ease: cubic-bezier(.22,.61,.36,1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
font-family: var(--font);
background: var(--bg);
color: var(--text);
line-height: 1.65;
overflow-x: clip;
-webkit-font-smoothing: antialiased;
letter-spacing: .005em;
}
/* Grain + vignette cinématographiques (overlays globaux) */
body::before {
content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .035;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body::after {
content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none;
background: radial-gradient(120% 90% at 50% 0%, transparent 55%, rgba(0,0,0,.5) 100%);
}
main, nav, footer { position: relative; z-index: 2; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(1.2rem, 5vw, 3rem); }
/* ---------- Typographie ---------- */
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.1; letter-spacing: -.025em; }
h4 { font-family: var(--font); font-weight: 600; letter-spacing: -.01em; }
.red { color: var(--accent); font-weight: 600; }
.grad-text {
font-weight: 500;
background: linear-gradient(100deg, #ff3b42, #ff8a4d 50%, #ff3b42);
background-size: 220% auto;
-webkit-background-clip: text; background-clip: text; color: transparent;
animation: shimmer 8s linear infinite;
}
@keyframes shimmer { to { background-position: 220% center; } }
em.serif { font-style: normal; }
.label {
display: inline-flex; align-items: center; gap: .6rem;
font-family: var(--font); font-size: .72rem; font-weight: 600;
letter-spacing: .28em; text-transform: uppercase; color: var(--metal);
margin-bottom: 1.3rem;
}
.label::before { content: ""; width: 26px; height: 1px; background: var(--metal); opacity: .6; }
/* ---------- Boutons (premium, sobres) ---------- */
.btn {
display: inline-flex; align-items: center; gap: .6rem;
padding: .9rem 1.6rem; border-radius: 999px;
font-family: var(--font); font-weight: 500; font-size: .92rem; letter-spacing: .01em;
cursor: pointer; border: 1px solid transparent; transition: all .35s var(--ease); white-space: nowrap;
}
.btn-lg { padding: 1.05rem 2.1rem; font-size: .98rem; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: #ff4651; transform: translateY(-1px); }
.btn-secondary { background: transparent; color: var(--text); border-color: var(--line); }
.btn-secondary:hover { border-color: var(--metal); transform: translateY(-2px); }
.btn-outline { background: transparent; border-color: var(--line); color: var(--text); }
.btn-outline:hover { border-color: var(--metal); color: var(--text); }
.btn-ice, .btn-ghost { background: transparent; color: var(--accent); border-color: transparent; padding-inline: .4rem; }
.btn-ice:hover, .btn-ghost:hover { gap: .9rem; }
.btn-ice::after, .btn-ghost::after, .card-link::after { content: "→"; transition: transform .3s var(--ease); }
.btn-ice:hover::after { transform: translateX(4px); }
/* ---------- Navigation ---------- */
.nav {
position: sticky; top: 0; z-index: 100;
background: rgba(21,22,26,.6); backdrop-filter: blur(18px) saturate(140%);
border-bottom: 1px solid var(--line-2);
}
.nav-inner { display: flex; align-items: center; gap: 1.5rem; height: 76px; }
.nav-logo { display: flex; align-items: center; font-family: var(--font); font-weight: 700; letter-spacing: -.02em; font-size: 1.3rem; }
.nav-logo .mark { color: var(--accent); }
.nav-logo-img { height: 32px; width: auto; }
.nav-links { display: flex; gap: .15rem; margin-left: auto; align-items: center; }
.nav-links > a, .nav-item > a {
padding: .55rem .85rem; border-radius: 8px; font-size: .88rem; font-weight: 500;
color: var(--muted); transition: color .25s;
}
.nav-links > a:hover, .nav-item:hover > a, .nav-links > a.active { color: var(--text); }
.nav-links > a.active { color: var(--text); }
.nav-item { position: relative; }
.nav-item > a::after { content: "·"; margin-left: .4rem; opacity: .4; }
.nav-dropdown {
position: absolute; top: calc(100% + 4px); left: 0; min-width: 230px;
background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px;
padding: .5rem; box-shadow: var(--shadow);
opacity: 0; visibility: hidden; transform: translateY(8px); transition: .28s var(--ease);
}
.nav-item:hover .nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dropdown a { display: block; padding: .65rem .85rem; border-radius: 8px; font-size: .88rem; color: var(--muted); }
.nav-dropdown a:hover { background: var(--surface); color: var(--text); }
.nav-cta { margin-left: .6rem; }
.hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: .4rem; margin-left: auto; }
.hamburger span { width: 24px; height: 1.5px; background: var(--text); transition: .3s; }
.hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.nav-mobile {
position: fixed; inset: 76px 0 auto 0; background: var(--bg-2);
border-bottom: 1px solid var(--line); padding: 1rem; z-index: 99;
display: none; flex-direction: column; gap: .15rem;
}
.nav-mobile.open { display: flex; }
.nav-mobile a { padding: .85rem 1rem; border-radius: 10px; font-weight: 500; color: var(--muted); }
.nav-mobile a:hover { background: var(--surface); color: var(--text); }
.nav-mobile .sub { padding-left: 2rem; font-size: .88rem; color: var(--muted-2); }
/* ---------- Hero cinématographique ---------- */
.hero { position: relative; padding: clamp(5rem, 13vw, 10rem) 0 clamp(4rem, 9vw, 7rem); overflow: hidden; }
.hero-bg {
position: absolute; inset: 0; z-index: 0;
background:
radial-gradient(80% 55% at 70% 18%, rgba(226,52,46,.10), transparent 60%),
radial-gradient(70% 60% at 12% 95%, rgba(200,191,176,.06), transparent 55%),
linear-gradient(180deg, var(--bg-2), var(--bg));
}
.hero-glow {
position: absolute; width: 66vw; height: 66vw; max-width: 840px; max-height: 840px;
top: -16%; right: -10%; z-index: 0; border-radius: 50%;
background: radial-gradient(circle, rgba(226,52,46,.15), transparent 64%);
filter: blur(44px); animation: drift 20s ease-in-out infinite alternate;
}
.hero-glow::after {
content: ""; position: absolute; inset: 0; border-radius: 50%;
background: radial-gradient(circle, rgba(255,138,77,.14), transparent 60%);
transform: translate(18%, 42%) scale(.78); animation: drift2 14s ease-in-out infinite alternate;
}
@keyframes drift { to { transform: translate(-40px, 52px) scale(1.1); } }
@keyframes drift2 { to { transform: translate(-12%, 8%) scale(1.06); } }
/* Entrée animée du hero (effet d'apparition net) */
.hero-badge, .hero h1, .hero-sub, .hero-actions, .hero-stats { animation: heroIn 1s var(--ease) both; }
.hero h1 { animation-delay: .08s; }
.hero-sub { animation-delay: .18s; }
.hero-actions{ animation-delay: .28s; }
.hero-stats { animation-delay: .38s; }
@keyframes heroIn { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
/* Filigrane phoenix du hero */
.hero-phoenix { position: absolute; right: -3%; top: 50%; transform: translateY(-50%); width: min(44vw, 540px); opacity: .13; z-index: 0; pointer-events: none; filter: drop-shadow(0 0 50px rgba(226,52,46,.35)); animation: floatY 9s ease-in-out infinite alternate; }
@keyframes floatY { to { transform: translateY(-55%); } }
@media (max-width: 760px) { .hero-phoenix { opacity: .07; width: 92vw; right: -28%; } }
/* ============ HIGH-TECH : noir, néon & verre dépoli ============ */
.nav { background: rgba(6,6,9,.7); }
/* Hero noir + lumière */
.hero { background: #060609; }
.hero .hero-bg {
background:
radial-gradient(55% 45% at 50% -5%, rgba(255,46,58,.24), transparent 60%),
radial-gradient(42% 40% at 88% 22%, rgba(255,110,70,.14), transparent 60%),
radial-gradient(45% 45% at 6% 88%, rgba(150,40,255,.10), transparent 60%),
#060609;
}
/* Grille perspective (signature tech) */
.hero-floor {
position: absolute; left: -10%; right: -10%; bottom: 0; height: 46%; z-index: 0; pointer-events: none;
background-image: linear-gradient(rgba(255,46,58,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(255,46,58,.10) 1px, transparent 1px);
background-size: 46px 46px;
transform: perspective(420px) rotateX(60deg); transform-origin: bottom center;
-webkit-mask-image: linear-gradient(to top, #000 5%, transparent 80%);
mask-image: linear-gradient(to top, #000 5%, transparent 80%);
animation: floor 16s linear infinite;
}
@keyframes floor { to { background-position: 0 46px, 46px 0; } }
.hero-badge { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); backdrop-filter: blur(10px); }
.hero h1 .grad-text { text-shadow: 0 0 30px rgba(255,46,58,.55); }
.hero .btn-secondary { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.14); backdrop-filter: blur(10px); }
.hero-phoenix { opacity: .15; filter: drop-shadow(0 0 26px rgba(255,46,58,.6)); }
/* Verre dépoli sur les surfaces */
.card, .stat-board .b, .cfg-card, .review, .info-card, .stage, .net, .gscore, .notice {
background: rgba(255,255,255,.025); border-color: rgba(255,255,255,.08);
}
.card:hover { background: rgba(255,255,255,.045); border-color: rgba(255,255,255,.22); box-shadow: none; }
.card:hover .card-ico { color: var(--accent); }
.stage.featured { border-color: rgba(255,46,58,.4); box-shadow: none; }
.cta-band { background: #060609; }
/* ============ HERO CINÉMATIQUE (style Tesla / SpaceX) ============ */
.hero--cine { position: relative; min-height: 100svh; display: grid; align-items: center; text-align: center; padding: 0; overflow: hidden; }
.hero-media {
position: absolute; inset: 0; z-index: 0;
background: #06070a url('/images/hero.jpg?v=2') center / cover no-repeat;
}
.hero-veil { position: absolute; inset: 0; z-index: 1;
background:
radial-gradient(75% 65% at 50% 48%, rgba(6,7,11,.55), transparent 72%),
linear-gradient(180deg, rgba(6,7,11,.5) 0%, rgba(6,7,11,.25) 40%, rgba(6,7,11,.92) 100%); }
.hero-cine-inner { position: relative; z-index: 2; padding-block: 8vh; }
.hero-eyebrow { display: inline-block; font-size: .76rem; letter-spacing: .34em; text-transform: uppercase; color: rgba(255,255,255,.62); margin-bottom: 1.7rem; font-weight: 500; animation: heroIn 1s var(--ease) both; }
.hero--cine h1 { font-family: var(--display); font-weight: 500; font-size: clamp(2.4rem, 6vw, 4.6rem); letter-spacing: -.015em; line-height: 1.06; color: #fff; animation: heroIn 1s var(--ease) .08s both; }
.hero-lead { margin: 1.5rem auto 0; max-width: 500px; color: rgba(255,255,255,.78); font-weight: 300; font-size: clamp(1rem, 1.5vw, 1.16rem); line-height: 1.7; animation: heroIn 1s var(--ease) .16s both; }
.hero-cine-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 2.8rem; animation: heroIn 1s var(--ease) .24s both; }
.btn-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 234px; padding: .95rem 2rem; border-radius: 999px; font-size: .8rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; transition: all .3s var(--ease); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.btn-pill--solid { background: rgba(255,255,255,.92); color: #0a0b0f; }
.btn-pill--solid:hover { background: #fff; transform: translateY(-1px); }
.btn-pill--ghost { background: rgba(18,20,26,.35); color: #fff; border: 1px solid rgba(255,255,255,.4); }
.btn-pill--ghost:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.7); }
.hero-scroll { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 2; display: inline-flex; flex-direction: column; align-items: center; gap: .55rem; color: rgba(255,255,255,.6); font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; }
.hero-scroll:hover { color: #fff; }
.hero-chev { width: 14px; height: 14px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); animation: chev 1.8s ease-in-out infinite; }
@keyframes chev { 0%,100% { transform: rotate(45deg) translate(0,0); opacity: .55; } 50% { transform: rotate(45deg) translate(3px,3px); opacity: 1; } }
/* Hero cine : titre pleinement centré + phoenix en filigrane */
.hero--cine h1 { max-width: none; }
.hero--cine .hero-phoenix { left: 50%; right: auto; top: 46%; transform: translate(-50%,-50%); width: min(70vw, 620px); opacity: .07; z-index: 1; animation: none; filter: drop-shadow(0 0 60px rgba(255,46,58,.25)); }
/* Liste éditoriale des univers (remplace le bloc de cartes) */
.universe-list { max-width: 900px; margin: 0 auto; border-top: 1px solid var(--line-2); }
.universe-row { display: grid; grid-template-columns: minmax(160px,1fr) 1.6fr auto; align-items: center; gap: 1.5rem; padding: 1.7rem .4rem; border-bottom: 1px solid var(--line-2); transition: padding .35s var(--ease), background .35s; }
.universe-row:hover { padding-inline: 1.3rem; background: rgba(255,255,255,.022); }
.u-name { font-family: var(--display); font-size: clamp(1.3rem, 2.4vw, 1.95rem); font-weight: 400; color: var(--text); transition: color .3s; }
.universe-row:hover .u-name { color: var(--accent); }
.u-desc { color: var(--muted); font-size: .94rem; font-weight: 300; }
.u-arrow { color: var(--muted-2); font-size: 1.2rem; justify-self: end; transition: transform .35s var(--ease), color .3s; }
.universe-row:hover .u-arrow { color: var(--accent); transform: translateX(7px); }
@media (max-width: 720px) { .universe-row { grid-template-columns: 1fr auto; } .u-desc { display: none; } }
/* Stages — version élégante (colonnes fines, sans gros cadres) */
.stages { grid-template-columns: 1fr 1fr; gap: 0; max-width: 880px; margin-inline: auto; }
.stages .stage { background: none; border: 0; border-top: 2px solid var(--line); border-radius: 0; padding: 2.2rem clamp(1.4rem,3.5vw,2.8rem); }
.stages .stage + .stage { border-left: 1px solid var(--line-2); }
.stages .stage.featured { border-top-color: var(--accent); }
.stage.featured::before { display: none; }
.stages .stage .tag { color: var(--metal); }
.stages .stage h3 { margin: .5rem 0 .2rem; }
.stages .stage .gain { font-family: var(--display); font-size: 1.4rem; color: var(--text); margin: .6rem 0 1.4rem; }
.stages .stage .gain b { color: var(--accent); font-weight: 500; }
.stages .stage ul li { padding: .7rem 0; border-top: 1px solid var(--line-2); }
.stages .stage ul li::before { display: none; }
@media (max-width: 700px) { .stages { grid-template-columns: 1fr; } .stages .stage + .stage { border-left: 0; } }
/* CTA principal du hero : halo chaud */
.hero-actions .btn-primary { box-shadow: 0 16px 44px -14px rgba(226,52,46,.55); }
.hero-actions .btn-primary:hover { box-shadow: 0 22px 56px -12px rgba(226,52,46,.75); transform: translateY(-3px); }
.hero .container { position: relative; z-index: 2; }
.hero-badge {
display: inline-flex; align-items: center; gap: .6rem;
font-size: .78rem; font-weight: 500; color: var(--muted); letter-spacing: .04em;
border: 1px solid var(--line); border-radius: 999px; padding: .5rem 1.1rem;
background: rgba(255,255,255,.02);
}
.hero-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.hero:not(.hero--cine) h1 { font-size: clamp(1.9rem, 4.6vw, 3.5rem); font-weight: 300; margin: 2rem 0 1.6rem; letter-spacing: -.015em; line-height: 1.22; max-width: 17ch; }
.hero h1 .grad-text { display: inline; }
.hero-sub { font-size: clamp(1rem, 1.5vw, 1.12rem); color: var(--muted); max-width: 500px; font-weight: 300; line-height: 1.75; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.6rem; }
.hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; margin-top: clamp(3rem,6vw,4.5rem); max-width: 820px; border-top: 1px solid var(--line-2); padding-top: 2.4rem; }
.hero-stat strong { display: block; font-family: var(--display); font-weight: 500; font-size: clamp(1.35rem, 2.8vw, 1.9rem); color: var(--text); letter-spacing: -.01em; }
.hero-stat span { font-size: .78rem; color: var(--muted-2); font-weight: 300; margin-top: .35rem; display: block; }
.hero-stats { border-top-color: var(--line-2); }
/* ---------- Marquee (discret) ---------- */
.marquee { border-block: 1px solid var(--line-2); background: var(--bg-2); padding: 1.4rem 0; overflow: hidden; }
.marquee-track { display: flex; gap: 3.5rem; width: max-content; animation: scroll 40s linear infinite; }
.marquee-item { font-size: .9rem; color: var(--muted-2); letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; font-weight: 500; }
@keyframes scroll { to { transform: translateX(-50%); } }
/* ---------- Sections ---------- */
.section { padding: clamp(4.5rem, 10vw, 8rem) 0; }
.section--alt { background: var(--bg-2); }
.section--dark { background: #101116; }
.section-head { max-width: 680px; margin: 0 auto clamp(3rem, 6vw, 4.5rem); text-align: center; }
.section-head.left { text-align: left; margin-inline: 0; }
.section-head .label { justify-content: center; }
.section-head.left .label { justify-content: flex-start; }
.section-title { font-size: clamp(2rem, 4.5vw, 3.2rem); font-weight: 600; }
.section-sub { color: var(--muted); margin-top: 1.2rem; font-size: 1.08rem; font-weight: 300; line-height: 1.7; }
/* ---------- Cartes ---------- */
.grid { display: grid; gap: 1.5rem; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.card {
background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius);
padding: 2.2rem 2rem; transition: transform .4s var(--ease), border-color .4s, background .4s;
position: relative; overflow: hidden;
}
.card:hover { transform: translateY(-6px); border-color: var(--line); background: var(--surface-2); }
.card::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--accent), transparent); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.card:hover::after { transform: scaleX(1); }
.card-ico { width: 38px; height: 38px; color: var(--metal); margin-bottom: 1.4rem; transition: color .4s; }
.card-ico svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.card:hover .card-ico { color: var(--accent); }
.card h3 { font-size: 1.45rem; margin-bottom: .7rem; font-weight: 500; }
.card p { color: var(--muted); font-size: .95rem; font-weight: 300; }
.card .feat { margin-top: 1.3rem; display: grid; gap: .55rem; }
.card .feat li { font-size: .88rem; color: var(--muted); padding-left: 1.4rem; position: relative; font-weight: 300; }
.card .feat li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-top: 1px solid var(--accent); border-right: 1px solid var(--accent); transform: rotate(45deg); }
.card .price { margin-top: 1.4rem; font-family: var(--display); font-size: 1.15rem; }
.card .price em { font-style: normal; font-size: .72rem; color: var(--muted-2); font-family: var(--font); }
.card-link { margin-top: 1.4rem; display: inline-flex; gap: .5rem; align-items: center; color: var(--text); font-size: .9rem; font-weight: 500; transition: gap .3s var(--ease); }
.card-link:hover { gap: .85rem; color: var(--accent); }
/* ---------- Stages ---------- */
.stages { display: grid; gap: 1.5rem; grid-template-columns: repeat(2,1fr); max-width: 760px; margin-inline: auto; }
.stage { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius); padding: 2.2rem 2rem; }
.stage.featured { border-color: var(--accent-soft); background: linear-gradient(180deg, rgba(226,52,46,.05), transparent); position: relative; }
.stage.featured::before { content: ""; position: absolute; inset: 0; border-radius: var(--radius); border: 1px solid var(--accent); opacity: .4; pointer-events: none; }
.stage .tag { font-size: .72rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--metal); }
.stage h3 { font-size: 1.7rem; margin: .5rem 0; font-weight: 500; }
.stage .gain { font-size: 1.02rem; color: var(--muted); margin: .6rem 0 1.2rem; font-weight: 300; }
.stage .gain b { color: var(--accent); font-weight: 500; }
.stage ul { display: grid; gap: .6rem; }
.stage ul li { font-size: .9rem; color: var(--muted); padding-left: 1.4rem; position: relative; font-weight: 300; }
.stage ul li::before { content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 1px; background: var(--metal); }
/* ---------- Split ---------- */
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2.5rem,6vw,5rem); align-items: center; }
.split.rev { grid-template-columns: .95fr 1.05fr; }
.split h2 { font-size: clamp(1.9rem, 4vw, 3rem); margin-bottom: 1.2rem; font-weight: 600; }
.split p { color: var(--muted); margin-bottom: 1rem; font-weight: 300; line-height: 1.75; }
.split .points { display: grid; gap: .9rem; margin: 1.5rem 0; }
.split .points li { padding-left: 1.8rem; position: relative; color: var(--muted); font-weight: 300; }
.split .points li::before { content: ""; position: absolute; left: 0; top: .55em; width: 10px; height: 10px; border: 1px solid var(--accent); border-radius: 50%; }
.stat-board { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line-2); border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; }
.stat-board .b { background: var(--surface); padding: 1.8rem 1.6rem; }
.stat-board .b strong { display: block; font-family: var(--display); font-size: 1.7rem; font-weight: 700; color: var(--text); }
.stat-board .b p { font-size: .82rem; color: var(--muted); margin: .5rem 0 0; font-weight: 300; }
/* ---------- Process ---------- */
.steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.5rem; }
.step { padding: 1.8rem 0; border-top: 1px solid var(--line); }
.step .n { font-family: var(--display); font-size: 1.6rem; color: var(--metal); }
.step h4 { margin: .9rem 0 .6rem; font-size: 1.12rem; }
.step p { font-size: .9rem; color: var(--muted); font-weight: 300; }
/* ---------- Reviews ---------- */
.reviews-head { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: 2.5rem; }
.gscore { display: inline-flex; align-items: center; gap: .8rem; border: 1px solid var(--line); border-radius: 999px; padding: .7rem 1.4rem; }
.gscore .num { font-family: var(--display); font-size: 1.5rem; }
.gscore .stars { color: var(--metal); letter-spacing: .08em; }
.gscore .cnt { font-size: .85rem; color: var(--muted); font-weight: 300; }
.reviews-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
.review { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius); padding: 1.9rem; }
.review .stars { color: var(--metal); margin-bottom: 1rem; letter-spacing: .1em; font-size: .9rem; }
.review p { color: var(--text); font-size: 1rem; font-weight: 400; line-height: 1.7; }
.review .who { display: flex; align-items: center; gap: .9rem; margin-top: 1.4rem; }
.review .ava { width: 42px; height: 42px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line); display: grid; place-items: center; font-weight: 600; color: var(--metal); font-size: .9rem; }
.review .who b { font-size: .92rem; font-weight: 600; }
.review .who span { font-size: .8rem; color: var(--muted-2); display: block; font-weight: 300; }
.reviews-empty { grid-column: 1/-1; text-align: center; color: var(--muted); padding: 2rem; font-weight: 300; }
/* ---------- Configurateur véhicule ---------- */
.config-wrap { display: grid; gap: 2rem; max-width: 1000px; margin: 0 auto; }
.cfg-cats { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.cfg-cat { appearance: none; -webkit-appearance: none; border: 1px solid var(--line-2); background: transparent; color: var(--muted); font: inherit; font-size: .82rem; font-weight: 500; letter-spacing: .03em; padding: .5rem 1.15rem; border-radius: 999px; cursor: pointer; transition: color .25s, background .25s, border-color .25s; }
.cfg-cat.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.cfg-cat:not(.active):hover { border-color: var(--metal); color: var(--text); }
.config-controls { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; }
.config-controls label { font-size: .74rem; text-transform: uppercase; letter-spacing: .12em; color: var(--metal); }
.config-controls .field { min-width: 0; }
@media (max-width: 980px) { .config-controls { grid-template-columns: repeat(2,1fr); } }
.config-result:empty { display: none; }
.cfg-card { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius); padding: clamp(1.5rem,4vw,2.4rem); display: grid; grid-template-columns: 1fr 1.15fr; grid-template-areas: "figures chart" "cta chart"; column-gap: clamp(1.5rem,4vw,3rem); row-gap: 1.3rem; align-items: center; position: relative; overflow: hidden; animation: heroIn .7s var(--ease) both; }
.cfg-card::before { content: ""; position: absolute; top: 0; right: 0; width: 55%; height: 100%; background: radial-gradient(circle at 80% 15%, var(--accent-soft), transparent 70%); pointer-events: none; }
.cfg-figures { position: relative; z-index: 1; grid-area: figures; }
.cfg-veh { display: flex; align-items: center; gap: .7rem; font-weight: 600; color: var(--muted); font-size: .92rem; margin-bottom: .6rem; }
.cfg-logo-chip { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 10px; background: #fff; display: grid; place-items: center; padding: 5px; box-shadow: 0 2px 10px rgba(0,0,0,.25); }
.cfg-logo { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.cfg-veh-name { min-width: 0; }
.cfg-meta { font-size: .8rem; color: var(--metal); letter-spacing: .02em; margin: -.1rem 0 1.1rem; }
.cfg-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .9rem 0; border-top: 1px solid var(--line-2); }
.cfg-row .lbl { font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted-2); }
.cfg-row .val { font-size: 1.05rem; color: var(--muted); }
.cfg-row .val b { font-family: var(--display); font-size: 1.65rem; font-weight: 700; color: var(--text); }
.cfg-row.tuned .val b.accent { color: var(--accent); }
.cfg-gain { font-family: var(--display); font-weight: 700; font-size: 1.3rem; color: var(--accent); margin: .9rem 0 .35rem; }
.cfg-gain-stage { font-family: var(--font); font-weight: 500; font-size: .8rem; color: var(--metal); letter-spacing: .04em; }
/* Onglets Stage 1 / Stage 2 */
.cfg-tabs { display: inline-flex; gap: .25rem; background: rgba(255,255,255,.05); border: 1px solid var(--line-2); border-radius: 999px; padding: .25rem; margin: .2rem 0 1rem; }
.cfg-tab { appearance: none; -webkit-appearance: none; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: .78rem; font-weight: 500; letter-spacing: .05em; padding: .42rem 1.15rem; border-radius: 999px; cursor: pointer; transition: color .25s, background .25s; }
.cfg-tab.active { background: var(--accent); color: #fff; }
.cfg-tab:not(.active):hover { color: var(--text); }
/* Fiche moteur (specs techniques) */
.cfg-specs { display: flex; flex-wrap: wrap; gap: .55rem 1.5rem; margin: 0 0 1.1rem; }
.cfg-spec { display: flex; flex-direction: column; gap: .12rem; }
.cfg-spec span { font-size: .66rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted-2); }
.cfg-spec b { font-size: .9rem; color: var(--muted); font-weight: 600; }
.cfg-veh-name, .cfg-meta { overflow-wrap: anywhere; }
.cfg-note { font-size: .78rem; color: var(--muted-2); margin-bottom: 1.3rem; }
.cfg-chart { position: relative; z-index: 1; grid-area: chart; }
.cfg-chart svg { width: 100%; height: auto; display: block; }
.cfg-chart .grid line { stroke: var(--line-2); stroke-width: 1; }
.cfg-chart .curve { fill: none; stroke-linecap: round; }
.cfg-chart .curve.power.tuned { stroke: var(--accent); stroke-width: 3; filter: drop-shadow(0 0 6px rgba(226,52,46,.5)); }
.cfg-chart .curve.power.orig { stroke: var(--accent); stroke-width: 2; opacity: .3; }
.cfg-chart .curve.torque.tuned { stroke: #ff9a4d; stroke-width: 3; filter: drop-shadow(0 0 6px rgba(255,138,77,.45)); }
.cfg-chart .curve.torque.orig { stroke: #ff9a4d; stroke-width: 2; opacity: .3; }
.cfg-legend { display: flex; gap: 1.2rem; justify-content: center; flex-wrap: wrap; margin-top: .7rem; font-size: .8rem; color: var(--muted); }
.cfg-legend span { display: inline-flex; align-items: center; gap: .45rem; }
.cfg-legend .lp::before, .cfg-legend .lt::before { content: ""; width: 14px; height: 3px; border-radius: 2px; }
.cfg-legend .lp::before { background: var(--accent); }
.cfg-legend .lt::before { background: #ff9a4d; }
.cfg-legend .lo { color: var(--muted-2); font-size: .74rem; }
.cfg-chart text.peak { font-family: var(--font); font-weight: 700; font-size: 11px; animation: fadeIn .5s ease 1.7s both; }
.cfg-chart text.pp { fill: var(--accent); }
.cfg-chart text.tp { fill: #ff9a4d; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 760px) { .config-controls { grid-template-columns: 1fr; } .cfg-card { grid-template-columns: 1fr; grid-template-areas: "figures" "chart" "cta"; } }
/* ---------- CTA ---------- */
.cta-band { padding: clamp(4rem,8vw,6.5rem) 0; text-align: center; position: relative; overflow: hidden; border-block: 1px solid var(--line-2); background: var(--bg-2); }
.cta-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 100% at 50% 0%, rgba(226,52,46,.08), transparent 70%); }
.cta-band .container { position: relative; z-index: 2; }
.cta-band h2 { font-size: clamp(2rem,4.5vw,3.2rem); font-weight: 600; }
.cta-band p { color: var(--muted); margin: 1.1rem auto 2rem; max-width: 540px; font-weight: 300; }
.cta-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
/* ---------- Forms ---------- */
.form-wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2.5rem,5vw,4rem); align-items: start; }
.form { display: grid; gap: 1.2rem; }
.field { display: grid; gap: .45rem; }
.field.row { grid-template-columns: 1fr 1fr; display: grid; gap: 1rem; }
label { font-size: .82rem; font-weight: 500; color: var(--muted); letter-spacing: .02em; }
input, select, textarea {
width: 100%; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm);
padding: .9rem 1.1rem; color: var(--text); font-family: inherit; font-size: .95rem; transition: .25s; font-weight: 300;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--metal); box-shadow: 0 0 0 3px rgba(200,191,176,.1); }
textarea { resize: vertical; min-height: 120px; }
.form .consent { display: flex; gap: .6rem; align-items: flex-start; font-size: .82rem; color: var(--muted); font-weight: 300; }
.form .consent input { width: auto; margin-top: .25rem; }
.contact-aside { display: grid; gap: 1.3rem; }
.info-card { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius); padding: 1.7rem; }
.info-card h4 { margin-bottom: .9rem; }
.info-card p { color: var(--muted); font-size: .94rem; margin-bottom: .45rem; font-weight: 300; }
.info-card a { color: var(--text); }
.info-card a:hover { color: var(--accent); }
.map-embed { width: 100%; aspect-ratio: 16/10; border: 1px solid var(--line); border-radius: var(--radius); filter: grayscale(1) invert(.9) hue-rotate(180deg) brightness(.95) contrast(.9); }
/* ---------- Page hero (intérieures) ---------- */
.page-hero { padding: clamp(4rem,9vw,7rem) 0 clamp(2.5rem,5vw,4rem); position: relative; border-bottom: 1px solid var(--line-2); overflow: hidden; }
.page-hero .hero-bg { z-index: 0; }
.page-hero .container { position: relative; z-index: 2; }
.page-hero h1 { font-size: clamp(2.4rem,6vw,4rem); font-weight: 600; margin: 1rem 0; letter-spacing: -.03em; }
.page-hero p { color: var(--muted); max-width: 640px; font-size: 1.15rem; font-weight: 300; }
.crumb { font-size: .82rem; color: var(--muted-2); letter-spacing: .05em; }
.crumb a:hover { color: var(--accent); }
/* ---------- Network ---------- */
.net-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 1px; background: var(--line-2); border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; }
.net { background: var(--surface); padding: 1.4rem 1.3rem; }
.net b { display: block; font-weight: 600; }
.net span { font-size: .85rem; color: var(--muted); font-weight: 300; }
/* ---------- Notice ---------- */
.notice { background: var(--accent-soft); border: 1px solid rgba(226,52,46,.25); border-radius: var(--radius); padding: 1.4rem 1.6rem; color: var(--muted); font-size: .92rem; font-weight: 300; }
.notice b { color: var(--text); font-weight: 600; }
/* ---------- Footer ---------- */
.footer { background: #101116; border-top: 1px solid var(--line-2); padding: clamp(3.5rem,7vw,5rem) 0 2rem; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 2.5rem; }
.footer-brand p { color: var(--muted); font-size: .9rem; margin: 1.2rem 0; max-width: 320px; font-weight: 300; line-height: 1.7; }
.footer h4 { font-size: .78rem; margin-bottom: 1.2rem; letter-spacing: .16em; text-transform: uppercase; color: var(--metal); font-weight: 600; }
.footer-col li { margin-bottom: .65rem; }
.footer-col a, .footer-contact a { color: var(--muted); font-size: .9rem; font-weight: 300; transition: color .2s; }
.footer-col a:hover, .footer-contact a:hover { color: var(--text); }
.footer-contact p { color: var(--muted); font-size: .9rem; margin-bottom: .6rem; font-weight: 300; }
.socials { display: flex; gap: .6rem; }
.socials a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; transition: .3s; color: var(--muted); }
.socials a:hover { border-color: var(--metal); color: var(--text); transform: translateY(-2px); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 3rem; padding-top: 1.8rem; border-top: 1px solid var(--line-2); }
.footer-bottom p { font-size: .82rem; color: var(--muted-2); font-weight: 300; }
.footer-legal { display: flex; gap: 1.4rem; }
.footer-legal a { font-size: .82rem; color: var(--muted-2); }
.footer-legal a:hover { color: var(--text); }
/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.d1 { transition-delay: .08s; } .d2 { transition-delay: .18s; } .d3 { transition-delay: .28s; } .d4 { transition-delay: .38s; }
/* ---------- WhatsApp flottant ---------- */
.fab { position: fixed; right: 20px; bottom: 20px; z-index: 90; width: 52px; height: 52px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line); display: grid; place-items: center; color: var(--text); transition: .3s; }
.fab:hover { transform: scale(1.08); border-color: var(--metal); }
.fab svg { width: 24px; height: 24px; }
/* =====================================================================
Responsive
===================================================================== */
@media (max-width: 980px) {
.grid-4 { grid-template-columns: repeat(2,1fr); }
.grid-3, .stages, .reviews-grid { grid-template-columns: 1fr 1fr; }
.steps { grid-template-columns: 1fr 1fr; }
.split, .split.rev, .form-wrap { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
.nav-links, .nav-cta { display: none; }
.hamburger { display: flex; }
.hero-stats { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.grid-3, .grid-4, .grid-2, .stages, .reviews-grid, .steps { grid-template-columns: 1fr; }
.field.row { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr; }
.footer-bottom { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
/* On calme uniquement les mouvements de fond ; on garde le marquee, le dégradé, le tracé du dyno et les survols */
.hero-glow, .hero-glow::after, .hero-floor { animation: none !important; }
.reveal { opacity: 1; transform: none; }
}
/* ============ PASSE PREMIUM — bas de page raffiné (cohérence avec le hero) ============ */
.section { padding: clamp(6rem, 12vw, 9.5rem) 0; }
.section-head { margin-bottom: clamp(3.4rem, 6vw, 5rem); }
.section-title { font-weight: 300; font-size: clamp(2rem, 4.4vw, 3.3rem); letter-spacing: -.025em; line-height: 1.12; }
.section-sub { max-width: 580px; margin-inline: auto; font-weight: 300; }
.split h2 { font-weight: 300; }
.split p { font-weight: 300; line-height: 1.8; }
.split .points li { font-weight: 300; }
.stages .stage h3, .card h3 { font-weight: 400; }
/* Stats sans boîtes — fines et élégantes */
.stat-board { background: none; border: 0; border-radius: 0; gap: 0 2.5rem; }
.stat-board .b { background: none; padding: 1.5rem 0; border-top: 1px solid var(--line); }
.stat-board .b strong { font-weight: 300; font-size: 2rem; letter-spacing: -.02em; }
.stat-board .b p { color: var(--muted-2); }
/* Étapes process — épurées */
.steps { gap: 2.2rem; }
.step { border-top: 1px solid var(--line); padding: 1.7rem 0 0; }
.step .n { color: var(--muted-2); font-weight: 300; }
.step h4 { font-weight: 500; }
.step p { font-weight: 300; }
/* Bande CTA cinématique (rappel du hero) */
.cta-band { background: #06070a; position: relative; overflow: hidden; padding: clamp(5rem,10vw,8rem) 0; }
.cta-band::before { background: linear-gradient(180deg, rgba(6,7,11,.6), rgba(6,7,11,.82)), url('/images/hero.jpg?v=2') center / cover no-repeat; }
.cta-band h2 { font-weight: 300; }
.cta-band p { font-weight: 300; }
/* Titres uniformément fins (l'accent est en couleur, pas en gras) */
.section-title .red, .split h2 .red, .cta-band h2 .red { font-weight: inherit; }
/* Puces des listes — fines */
.split .points li::before { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); border: 0; top: .62em; }
/* Banc — visuel dyno décoratif (courbes qui se tracent au scroll) */
.dyno-viz { display: grid; place-items: center; }
.dyno-viz svg { width: 100%; max-width: 480px; height: auto; }
.dyno-viz .grid line { stroke: var(--line-2); stroke-width: 1; }
.dyno-viz .c { fill: none; stroke-linecap: round; stroke-dasharray: 780; stroke-dashoffset: 780; transition: stroke-dashoffset 2.6s cubic-bezier(.45,.02,.2,1); }
.dyno-viz.in .c.torque.orig { stroke-dashoffset: 0; transition-delay: 0s; }
.dyno-viz.in .c.torque.tuned { stroke-dashoffset: 0; transition-delay: .3s; }
.dyno-viz.in .c.power.orig { stroke-dashoffset: 0; transition-delay: .6s; }
.dyno-viz.in .c.power.tuned { stroke-dashoffset: 0; transition-delay: .9s; }
.dyno-viz .c.power.tuned { stroke: var(--accent); stroke-width: 3.6; filter: drop-shadow(0 0 5px rgba(255,46,58,.7)); }
.dyno-viz .c.power.orig { stroke: var(--accent); stroke-width: 2; opacity: .4; }
.dyno-viz .c.torque.tuned { stroke: #ff9a4d; stroke-width: 2.4; filter: drop-shadow(0 0 4px rgba(255,154,77,.4)); }
.dyno-viz .c.torque.orig { stroke: #ff9a4d; stroke-width: 1.8; opacity: .32; }
.dyno-viz text.ax-title { font-size: 8.5px; font-family: var(--font); fill: var(--muted); font-weight: 600; }
.dyno-viz text.ax-title.pax { fill: var(--accent); }
.dyno-viz text.ax-title.tax { fill: #ff9a4d; }
.dyno-legend { display: flex; gap: 1.4rem; justify-content: center; flex-wrap: wrap; margin-top: 1rem; font-size: .8rem; color: var(--muted); }
.dyno-legend span { display: inline-flex; align-items: center; gap: .45rem; }
.dyno-legend span::before { content: ""; width: 14px; height: 3px; border-radius: 2px; }
.dyno-legend .p::before { background: var(--accent); }
.dyno-legend .t::before { background: #ff9a4d; }
.dyno-legend .o { color: var(--muted-2); }
.dyno-legend .o::before { display: none; }
/* (le tracé du dyno reste animé même en mode « réduire les animations » — motion douce et volontaire) */
/* ============ NAV — optimisation (anti retour-à-la-ligne + breakpoint) ============ */
.nav-inner { gap: 1rem; }
.nav-links { gap: .05rem; }
.nav-links > a, .nav-item > a { white-space: nowrap; font-size: .85rem; padding: .5rem .68rem; }
.nav-logo-img { height: 30px; }
.nav-cta { margin-left: .6rem; padding: .58rem 1.15rem; font-size: .82rem; white-space: nowrap; }
/* En dessous de 1024px : on bascule sur le menu hamburger (évite l'entassement) */
@media (max-width: 1024px) {
.nav-links, .nav-cta { display: none; }
.hamburger { display: flex; }
}
/* ============ Configurateur — graphe plus lisible + axes ============ */
/* Puissance plus épaisse et au-dessus du couple */
.cfg-chart .curve.power.tuned { stroke-width: 3.6; filter: drop-shadow(0 0 5px rgba(255,46,58,.7)); }
.cfg-chart .curve.power.orig { stroke-width: 2; opacity: .4; }
.cfg-chart .curve.torque.tuned { stroke-width: 2.4; }
.cfg-chart .curve.torque.orig { stroke-width: 1.8; opacity: .32; }
/* Étiquettes d'axes */
.cfg-chart text.ax { font-size: 8px; font-family: var(--font); fill: var(--muted-2); }
.cfg-chart text.ax.pax { fill: rgba(255,92,92,.75); }
.cfg-chart text.ax.tax { fill: rgba(255,170,95,.75); }
.cfg-chart text.ax-title { font-size: 8.5px; font-family: var(--font); fill: var(--muted); font-weight: 600; }
.cfg-chart text.ax-title.pax { fill: var(--accent); }
.cfg-chart text.ax-title.tax { fill: #ff9a4d; }
/* ============ Configurateur — responsive mobile & mode zoom ============ */
.cfg-legend { flex-wrap: wrap; }
/* CTA du configurateur — proportionné (pas surdimensionné) */
.cfg-card .cfg-cta { grid-area: cta; justify-self: start; font-size: .85rem; padding: .72rem 1.5rem; }
/* Nav plus opaque : le contenu coloré ne transparaît plus dessous */
.nav { background: rgba(7,8,12,.94); }
/* Configurateur sur mobile — contenu centré (plus esthétique) */
@media (max-width: 620px) {
.cfg-figures { text-align: center; }
.cfg-specs { justify-content: center; }
.cfg-cats { justify-content: center; }
.cfg-card .cfg-cta { justify-self: center; }
}
/* ============ Configurateur — finition haut de gamme ============ */
.cfg-card::before { display: none; } /* on retire la lueur rouge (déséquilibrante) */
.cfg-card { background: rgba(255,255,255,.028); } /* carte uniforme et nette */
.cfg-card .cfg-cta { display: inline-flex; justify-content: center; text-align: center; font-size: .8rem; padding: .68rem 1.5rem; min-width: 0; }
/* ============ SYSTÈME DE BOUTONS — raffiné & cohérent (finesse) ============ */
.btn { padding: .72rem 1.45rem; font-size: .82rem; font-weight: 500; letter-spacing: .01em; }
.btn-lg { padding: .82rem 1.75rem; font-size: .88rem; }
.btn-primary { box-shadow: none; }
.btn-primary:hover { box-shadow: 0 10px 26px -12px rgba(255,46,58,.55); transform: translateY(-1px); }
.btn-secondary, .btn-outline { border: 1px solid var(--line); background: transparent; }
.btn-secondary:hover, .btn-outline:hover { border-color: var(--metal); }
.btn-pill { min-width: 196px; padding: .82rem 1.7rem; font-size: .78rem; letter-spacing: .07em; }
/* ============ ALIGNEMENT COHÉRENT + boutons compacts sur mobile ============ */
@media (max-width: 900px) {
.split { text-align: center; }
.split .points { display: inline-block; text-align: left; margin-inline: auto; }
.split .stat-board { max-width: 460px; margin-inline: auto; }
.cta-actions { flex-direction: column; align-items: center; gap: .8rem; }
}
@media (max-width: 620px) {
.btn, .btn-lg { padding: .68rem 1.3rem; font-size: .82rem; }
.btn-pill { min-width: 0; width: auto; padding: .76rem 1.4rem; font-size: .76rem; }
.hero-cine-actions { gap: .7rem; }
}
/* ============ Finition boutons + eyebrow (élégance) ============ */
/* Boutons plus fins partout */
.btn { padding: .62rem 1.3rem; font-size: .8rem; }
.btn-lg { padding: .72rem 1.55rem; font-size: .84rem; }
.nav-cta { padding: .46rem 1.05rem; font-size: .78rem; }
/* Pills du hero : MÊME largeur (équilibre) + plus fines */
.btn-pill { min-width: 210px; padding: .78rem 1.5rem; font-size: .77rem; letter-spacing: .05em; }
@media (max-width: 620px) {
.btn, .btn-lg { padding: .6rem 1.2rem; font-size: .8rem; }
.btn-pill { min-width: 200px; width: auto; padding: .72rem 1.3rem; font-size: .75rem; }
}
/* Eyebrow (petits titres) : on retire le tiret asymétrique → majuscules espacées épurées */
.label::before { display: none; }
.label { gap: 0; letter-spacing: .34em; }
@media (max-width: 620px) {
.cfg-card { padding: 1.4rem 1.15rem; gap: 1.3rem; }
.cfg-row { flex-direction: column; align-items: center; gap: .25rem; padding: .75rem 0; }
.cfg-row .lbl { font-size: .72rem; }
.cfg-row .val { font-size: .92rem; line-height: 1.25; }
.cfg-row .val b { font-size: 1.5rem; }
.cfg-gain { font-size: 1.2rem; }
.cfg-veh { font-size: .88rem; }
.cfg-card .btn-primary { width: auto; }
/* CTA proportionné au graphe sur mobile (moins dominant) */
.cfg-card .cfg-cta { font-size: .76rem; padding: .6rem 1.3rem; letter-spacing: .02em; }
.config-controls { gap: .8rem; }
.cfg-legend { gap: .5rem 1rem; font-size: .74rem; }
.cfg-note { font-size: .8rem; }
}
/* ============ Pages SEO véhicule (listes + FAQ) ============ */
.veh-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .6rem; }
.veh-link { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; padding: .85rem 1.1rem; border: 1px solid var(--line-2); border-radius: var(--radius-sm); color: var(--text); font-weight: 500; font-size: .92rem; transition: border-color .25s, background .25s, transform .25s; }
.veh-link:hover { border-color: var(--metal); background: var(--surface); transform: translateY(-1px); }
.veh-note { color: var(--metal); font-size: .8rem; font-weight: 400; white-space: nowrap; }
.faq { max-width: 760px; margin: 0 auto; display: grid; gap: .6rem; }
.faq-item { border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: .1rem 1.15rem; background: var(--surface); }
.faq-item summary { cursor: pointer; padding: 1rem 0; font-weight: 600; color: var(--text); list-style: none; position: relative; padding-right: 1.5rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: var(--accent); font-size: 1.3rem; font-weight: 400; transition: transform .25s; }
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-item p { padding: 0 0 1.1rem; color: var(--muted); line-height: 1.7; }
/* ====================================================================
HERO « WOW » (accueil) — photo plein écran + configurateur clair
==================================================================== */
.hw{position:relative;min-height:calc(100vh - 76px);display:flex;align-items:center;overflow:hidden}
.hw-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
/* La photo est en 1re couche ; un dégradé chaud (ton coucher de soleil) en 2e couche
sert de placeholder LCP : avant le paint de l'image (refresh à froid / Shift+F5), le
hero affiche ce ton chaud au lieu d'un quasi-noir → plus de "frame sombre" au chargement. */
/* Hero statique : on a RETIRÉ les animations infinies hwzoom/hwdrift. Elles animaient
`transform` sur des éléments avec `filter`/`blur(90px)` => le navigateur re-rasterisait
le flou À CHAQUE FRAME (repaint pathologique de tout le hero => scintillement/freeze sur
l'accueil uniquement). En statique, le filtre/flou est peint une seule fois. */
.hw-bg .hw-img{position:absolute;inset:0;background:url('/images/hero.jpg?v=2') center 44%/cover no-repeat,linear-gradient(165deg,#b9763f,#7a4a35,#38251c,#1c130d)}
.hw-bg .hw-scrim{position:absolute;inset:0;background:linear-gradient(102deg,rgba(8,8,11,.86) 0%,rgba(8,8,11,.55) 34%,rgba(8,8,11,.12) 58%,rgba(8,8,11,.34) 100%)}
.hw-bg .hw-vig{position:absolute;inset:0;box-shadow:inset 0 0 200px 30px rgba(0,0,0,.34)}
.hw-bg .hw-glow{position:absolute;top:-14vw;right:-6vw;width:46vw;height:46vw;border-radius:50%;opacity:.45;background:radial-gradient(circle,rgba(255,106,43,.34),transparent 62%)}
@keyframes hwzoom{to{transform:scale(1.14)}}
@keyframes hwdrift{to{transform:translate(-7vw,4vw)}}
.hw-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(1.4rem,3vw,3rem);align-items:start;max-width:1280px;width:100%;margin:0 auto;padding:clamp(2rem,7vh,4.5rem) clamp(1.2rem,4vw,3.4rem) clamp(1.6rem,4vh,2.6rem)}
.hw-copy .hw-eyebrow{font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:#e9d8b6;font-weight:600}
.hw-copy h1{font-family:var(--display);font-weight:600;font-size:clamp(1.9rem,3.3vw,3.1rem);line-height:1.05;letter-spacing:-.02em;margin:.9rem 0 0;color:#fff;text-shadow:0 2px 40px rgba(0,0,0,.55)}
.hw-copy h1 .hw-hl{background:linear-gradient(110deg,#ff5a3c,#ffb24d);-webkit-background-clip:text;background-clip:text;color:transparent}
.hw-copy .hw-sub{margin:1.05rem 0 0;max-width:40ch;color:rgba(255,255,255,.84);font-weight:300;font-size:clamp(.98rem,1.2vw,1.1rem)}
.hw-copy .hw-trust{display:flex;gap:2rem;margin-top:1.8rem}
.hw-copy .hw-trust b{display:block;font-size:1.4rem;font-weight:700;color:#fff;letter-spacing:-.01em}
.hw-copy .hw-trust span{font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.6)}
/* panneau blanc premium + configurateur recoloré clair, à hauteur limitée (défile en interne) */
.hw-panel{align-self:start;background:#fff;color:#181a1f;border:1px solid rgba(255,255,255,.55);border-radius:20px;padding:1.15rem 1.25rem 1.25rem;box-shadow:0 44px 100px -42px rgba(0,0,0,.72),0 6px 18px -10px rgba(0,0,0,.4);max-height:calc(100vh - 76px - 2.5rem);overflow:auto}
.hw-phead{display:flex;align-items:center;gap:.5rem;font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:#9094a0;margin-bottom:.7rem}
.hw-phead::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px rgba(255,46,58,.7)}
.hw-panel .cfg-cats{margin-bottom:.7rem;justify-content:center;min-height:35px} /* réserve la hauteur des onglets (remplis par JS après l'API) -> pas de reflow du panneau */
.hw-panel .cfg-cat{background:#eef0f4;border-color:rgba(16,20,29,.10);color:#5d616b;font-size:.74rem;padding:.42rem .9rem}
.hw-panel .cfg-cat.active{background:var(--accent);border-color:var(--accent);color:#fff}
.hw-panel .config-controls{grid-template-columns:1fr 1fr;gap:.5rem;margin-bottom:.2rem}
.hw-panel .config-controls label{color:#9094a0;font-size:.6rem}
.hw-panel select{background:#f3f4f7;color:#181a1f;border:1px solid rgba(16,20,29,.10);padding:.5rem .7rem}
.hw-panel .cfg-card{display:block;background:transparent;border:0;box-shadow:none;padding:.7rem 0 0;animation:none;border-radius:0}
.hw-panel .cfg-card::before{display:none}
.hw-panel .cfg-veh{color:#5d616b}
.hw-panel .cfg-veh-name{color:#181a1f}
.hw-panel .cfg-logo-chip{box-shadow:0 2px 10px rgba(0,0,0,.14)}
.hw-panel .cfg-meta{color:#6c7480}
.hw-panel .cfg-row{border-color:rgba(20,18,15,.08);padding:.6rem 0}
.hw-panel .cfg-row .lbl{color:#9094a0}
.hw-panel .cfg-row .val{color:#5d616b}
.hw-panel .cfg-row .val b{color:#181a1f;font-size:1.5rem}
.hw-panel .cfg-row.tuned .val b.accent{color:var(--accent)}
.hw-panel .cfg-tabs{background:#eaecf1;border-color:rgba(16,20,29,.10)}
.hw-panel .cfg-tab{color:#5d616b}
.hw-panel .cfg-tab.active{background:var(--accent);color:#fff}
.hw-panel .cfg-gain{font-size:1.15rem;margin:.6rem 0 .2rem}
.hw-panel .cfg-note{color:#8a8d95}
.hw-panel .cfg-chart .grid line{stroke:rgba(20,18,15,.08)}
.hw-panel .cfg-chart text.ax{fill:#9094a0}
.hw-panel .cfg-chart text.ax.pax{fill:#d23b30}
.hw-panel .cfg-chart text.ax.tax{fill:#d98a3a}
.hw-panel .cfg-chart text.ax-title{fill:#5d616b}
.hw-panel .cfg-chart text.ax-title.pax{fill:var(--accent)}
.hw-panel .cfg-chart text.ax-title.tax{fill:#ff9a4d}
.hw-panel .cfg-legend{color:#5d616b}
.hw-panel .cfg-cta{display:block;width:100%;text-align:center;margin-top:.9rem}
.hw-panel .cfg-hint{display:flex;gap:.65rem;align-items:center;color:#5d616b;font-size:.92rem;line-height:1.45;padding:1.05rem .1rem .35rem}
.hw-panel .cfg-hint-ic{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:rgba(255,46,58,.1);color:var(--accent);font-weight:700;font-size:.95rem}
.hw-panel::-webkit-scrollbar{width:6px}
.hw-panel::-webkit-scrollbar-thumb{background:rgba(0,0,0,.16);border-radius:3px}
@media(max-width:980px){
.hw{min-height:0}
.hw-inner{grid-template-columns:1fr;padding-top:1.4rem;padding-bottom:2.4rem;gap:1.5rem}
.hw-copy{order:1;text-align:center}
.hw-copy .hw-sub{margin-left:auto;margin-right:auto}
.hw-copy .hw-trust{justify-content:center;gap:1.4rem}
.hw-copy .hw-trust b{white-space:nowrap}
.hw-panel{order:2;max-height:none;overflow:visible}
}
/* hero : résultat compact, pas de scroll interne du panneau */
.hw-panel{max-height:none;overflow:visible}
.hw-panel .cfg-note{display:none}
.hw-panel .cfg-card{padding-top:.45rem}
.hw-panel .cfg-row{padding:.42rem 0}
.hw-panel .cfg-row .val b{font-size:1.4rem}
.hw-panel .cfg-gain{font-size:1.05rem;margin:.4rem 0 .15rem}
.hw-panel .cfg-chart{margin-top:.5rem}
.hw-panel .cfg-chart svg{width:100%;height:auto}
.hw-panel .cfg-legend{margin-top:.2rem}
.hw-panel .cfg-cta{margin-top:.7rem}
/* ====================================================================
CHARTE CLAIRE PREMIUM — harmonisation de tout le site (Phase 2)
(placée en fin de fichier : surcharge le thème sombre d'origine)
==================================================================== */
:root{
--bg:#f3f4f7; --bg-2:#eaecf1; --bg-3:#e4e7ec; --surface:#ffffff; --surface-2:#f6f7f9;
--line:rgba(16,20,29,.11); --line-2:rgba(16,20,29,.055);
--text:#10131a; --muted:#535965; --muted-2:#959aa5; --metal:#6c7480;
}
body{ background:var(--bg); color:var(--text); }
body::before, body::after{ display:none !important; } /* grain + vignette sombres */
/* SITE 100% CLAIR : nav + footer + CTA clairs. Le logo foncé (logo-dark.png) est
désormais servi DIRECTEMENT par le ![]()
(plus de swap CSS content:url qui faisait
clignoter le logo au chargement : logo.png peint puis remplacé par logo-dark.png). */
.nav{ background:rgba(248,249,251,.95); backdrop-filter:none; -webkit-backdrop-filter:none; border-bottom:1px solid var(--line); } /* opaque : on neutralise le backdrop-filter saturate hérité (amplifiait un flash vert GPU au chargement de l'accueil) */
.nav-links > a, .nav-item > a{ color:var(--muted); }
.nav-links > a:hover, .nav-item:hover > a, .nav-links > a.active{ color:var(--text); }
.nav-item > a::after{ color:var(--muted-2); }
.nav-dropdown{ background:#fff; border-color:var(--line); box-shadow:0 22px 54px -26px rgba(15,20,30,.22); }
.nav-dropdown a{ color:var(--muted); }
.nav-dropdown a:hover{ background:rgba(24,20,14,.05); color:var(--text); }
.nav-mobile{ background:#fff; border-bottom-color:var(--line); }
.nav-mobile a{ color:var(--muted); }
.nav-mobile a.sub{ color:var(--muted-2); }
.hamburger span{ background:var(--text); }
.footer{ background:var(--bg-3); border-top:1px solid var(--line); }
.footer, .footer p, .footer li a, .footer-bottom p, .footer-legal a{ color:var(--muted); }
.footer h4{ color:var(--text); } .footer a:hover{ color:var(--text); }
.footer-bottom{ border-top-color:var(--line); }
.cta-band{ background:var(--bg-2) !important; }
.cta-band h2{ color:var(--text); }
.cta-band p, .cta-band .section-sub{ color:var(--muted); }
.cta-band .btn-secondary{ color:var(--text); border-color:var(--line); background:transparent; }
/* Surfaces blanches translucides -> cartes claires nettes */
.card, .stat-board .b, .cfg-card, .review, .info-card, .stage, .net, .gscore, .notice{
background:#fff; border-color:var(--line);
}
.card:hover{ background:#fff; border-color:var(--metal); box-shadow:0 22px 54px -32px rgba(15,20,30,.22); }
.cfg-tabs{ background:#eaecf1; }
.universe-row:hover{ background:rgba(24,20,14,.03); }
/* Sections */
.section--alt{ background:var(--bg-2); }
.section--dark{ background:#14151a; color:#fff; }
/* Champs de formulaire / configurateur */
input, select, textarea{ background:#fff; color:var(--text); border-color:var(--line); }
.config-controls label{ color:var(--metal); }
/* Hero des pages intérieures (clair) */
.page-hero{ background:linear-gradient(160deg,#f7f8fb,#e6e9ef); border-bottom:1px solid var(--line); }
.page-hero .hero-bg{ opacity:.05; }
/* Graphe dyno sur fond clair (pages SEO + sections) */
.cfg-chart .grid line, .dyno-viz .grid line{ stroke:var(--line-2); }
.cfg-chart text.ax, .dyno-viz text.ax{ fill:var(--muted-2); }
.cfg-chart text.ax-title, .dyno-viz text.ax-title{ fill:var(--muted); }
.cfg-chart .curve.power.orig, .dyno-viz .c.power.orig{ opacity:.32; }
.cfg-chart .curve.torque.orig, .dyno-viz .c.torque.orig{ opacity:.3; }
/* Marquee */
.marquee{ background:var(--bg-2); }
/* Bandeau « véhicule pré-rempli » sur la page contact (depuis le configurateur) */
.form-prefill{ display:flex; gap:.6rem; align-items:flex-start; background:rgba(255,46,58,.07); border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:10px; padding:.7rem .9rem; margin-bottom:1.3rem; color:var(--text); font-size:.92rem; line-height:1.45; }
.form-prefill .ic{ flex:none; color:var(--accent); font-weight:700; }
.form-prefill b{ color:var(--text); }
/* ====================================================================
PHASE AUDIT 08 — 404 brandée
==================================================================== */
.err404 .err-search{ display:flex; gap:.6rem; max-width:560px; margin:1.8rem 0 1.4rem; flex-wrap:wrap; }
.err404 .err-search input{ flex:1 1 260px; background:#fff; border:1px solid var(--line); border-radius:999px; padding:.85rem 1.3rem; font-size:.95rem; }
.err404 .err-search input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(255,46,58,.12); }
.err404 .err-search .btn{ flex:0 0 auto; }
.err404 .err-links{ display:flex; gap:1.4rem 2rem; flex-wrap:wrap; margin-top:.4rem; }
@media (max-width:560px){ .err404 .err-search .btn{ width:100%; justify-content:center; } }
/* Recherche/filtre de marques (page /reprogrammation/marques) */
.brand-search{ display:flex; align-items:center; gap:1rem; max-width:680px; margin:0 auto; }
.brand-search input{ flex:1; background:#fff; border:1px solid var(--line); border-radius:999px; padding:.85rem 1.4rem; font-size:.95rem; }
.brand-search input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(255,46,58,.12); }
.brand-search-count{ font-size:.85rem; color:var(--muted); white-space:nowrap; }
/* Formulaire devis — anti-spam, SLA, confirmation en page */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-sla{ font-size:.84rem; color:var(--muted); margin-top:.2rem; }
.form-sla b{ color:var(--text); font-weight:600; }
.form-success{ background:#fff; border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:var(--radius); padding:2rem; }
.form-success-ic{ width:46px; height:46px; border-radius:50%; background:rgba(255,46,58,.12); color:var(--accent); display:grid; place-items:center; font-size:1.4rem; font-weight:700; margin-bottom:1rem; }
.form-success h3{ font-size:1.4rem; font-weight:500; margin-bottom:.6rem; }
.form-success p{ color:var(--muted); font-weight:300; margin-bottom:1.3rem; }
/* ====================================================================
PHASE AUDIT 08 — Configurateur : combobox marques + recall + tooltip
==================================================================== */
.cfg-combo{ position:relative; }
.cfg-combo-wrap{ position:relative; }
.cfg-combo-list{ position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:40; background:#fff; border:1px solid var(--line); border-radius:10px; max-height:240px; overflow:auto; box-shadow:0 20px 44px -22px rgba(15,20,30,.32); display:none; }
.cfg-combo-list.open{ display:block; }
.cfg-opt{ display:flex; align-items:center; gap:.6rem; padding:.5rem .7rem; cursor:pointer; font-size:.86rem; color:#181a1f; }
.cfg-opt:hover, .cfg-opt.active{ background:rgba(255,46,58,.08); }
.cfg-opt-logo{ width:26px; height:26px; border-radius:6px; background:#fff; border:1px solid var(--line-2); display:grid; place-items:center; flex:none; overflow:hidden; padding:2px; }
.cfg-opt-logo img{ max-width:100%; max-height:100%; object-fit:contain; }
.cfg-opt-logo.noimg{ background:var(--bg-2); }
.cfg-opt-empty{ color:var(--muted); cursor:default; }
.cfg-opt-empty:hover{ background:none; }
.hw-panel .cfg-combo input{ width:100%; background:#f3f4f7; color:#181a1f; border:1px solid rgba(16,20,29,.10); border-radius:var(--radius-sm); padding:.5rem .7rem; font-family:inherit; font-size:.95rem; }
.hw-panel .cfg-combo input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(255,46,58,.12); }
/* Bandeau « reprendre votre dernier véhicule » */
.cfg-recall{ display:flex; align-items:center; gap:.55rem; background:rgba(255,46,58,.07); border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:10px; padding:.45rem .6rem; margin-bottom:.7rem; font-size:.82rem; }
.cfg-recall[hidden]{ display:none; } /* l'attribut [hidden] doit l'emporter sur display:flex */
/* Réservation anti-reflow : si un véhicule est mémorisé, un script pose `pc-has-recall`
AVANT le 1er paint -> on réserve ici la hauteur de la bannière « Reprendre » pour que son
remplissage tardif (configurateur.js, chargé après le 1er paint sur connexion lente) ne
fasse PAS grandir le panneau. Tant qu'elle est vide elle est transparente (aucune boîte
vide visible) ; dès que le JS la remplit, elle s'affiche dans l'espace déjà réservé. */
html.pc-has-recall .cfg-recall{ display:flex; min-height:47px; }
html.pc-has-recall .cfg-recall:empty{ background:transparent; border-color:transparent; }
.cfg-recall-ic{ color:var(--accent); font-weight:700; flex:none; }
.cfg-recall-txt{ flex:1; min-width:0; color:#181a1f; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cfg-recall-txt b{ color:#181a1f; font-weight:600; }
.cfg-recall-go{ border:0; background:var(--accent); color:#fff; font:inherit; font-size:.74rem; font-weight:600; padding:.34rem .7rem; border-radius:999px; cursor:pointer; white-space:nowrap; flex:none; }
.cfg-recall-go:hover{ background:#ff4651; }
.cfg-recall-x{ border:0; background:transparent; color:var(--muted); font-size:1.2rem; line-height:1; cursor:pointer; flex:none; padding:0 .2rem; }
/* Graphe dyno interactif : curseur + infobulle */
.cfg-cursor-l{ stroke:var(--muted-2); stroke-width:1; stroke-dasharray:3 3; }
.cfg-dot.p{ fill:var(--accent); }
.cfg-dot.t{ fill:#ff9a4d; }
.cfg-tip{ position:absolute; top:2px; transform:translate(-50%,-118%); background:#10131a; color:#fff; font-size:.72rem; line-height:1.25; padding:.3rem .55rem; border-radius:6px; white-space:nowrap; pointer-events:none; z-index:5; box-shadow:0 8px 22px -8px rgba(0,0,0,.5); }
.cfg-tip b{ font-weight:700; }
.cfg-tip span{ display:block; opacity:.66; font-size:.64rem; }
.cfg-chart svg{ touch-action:none; }
/* ====================================================================
PHASE AUDIT 08 — Stats animées + section sombre + visualisation banc
==================================================================== */
.stats-band{ padding:clamp(2.4rem,5vw,3.6rem) 0; border-block:1px solid var(--line); background:var(--surface); }
.stats-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; text-align:center; }
.stats-strip .stat strong{ display:block; font-family:var(--display); font-weight:300; font-size:clamp(1.9rem,4vw,2.9rem); letter-spacing:-.02em; color:var(--text); }
.stats-strip .stat span{ display:block; margin-top:.45rem; font-size:.82rem; color:var(--muted); font-weight:300; }
.stats-strip .stat + .stat{ border-left:1px solid var(--line-2); }
@media (max-width:680px){
.stats-strip{ grid-template-columns:1fr 1fr; gap:2rem 1rem; }
.stats-strip .stat{ border-left:0 !important; }
}
/* Section sombre (rythme visuel clair/sombre) — lisibilité du texte */
.section--dark .label{ color:#b9c0cc; }
.section--dark h2{ color:#fff; }
.section--dark .split p{ color:rgba(255,255,255,.74); }
.section--dark .btn-secondary{ color:#fff; border-color:rgba(255,255,255,.28); background:transparent; }
.section--dark .btn-secondary:hover{ border-color:#fff; }
/* Visualisation « passage au banc » (canvas) */
.banc-gauge{ position:relative; width:100%; border:1px solid rgba(255,255,255,.1); border-radius:var(--radius); background:linear-gradient(180deg,#0c0d12,#070709); overflow:hidden; box-shadow:0 30px 70px -34px rgba(0,0,0,.7); }
.banc-gauge canvas{ display:block; width:100%; height:auto; }
.banc-fallback{ display:block; padding:2rem; color:rgba(255,255,255,.7); font-weight:300; }
/* Réalisations — cartes d'exemples + mini-courbe */
.cases{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.case{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.4rem 1.5rem; position:relative; transition:transform .35s var(--ease), box-shadow .35s, border-color .35s; }
.case:hover{ transform:translateY(-4px); border-color:var(--metal); box-shadow:0 22px 54px -32px rgba(15,20,30,.25); }
.case-head{ display:flex; justify-content:space-between; align-items:baseline; gap:.6rem; margin-bottom:.6rem; }
.case-veh{ font-weight:600; font-size:1rem; }
.case-fuel{ font-size:.72rem; color:var(--metal); letter-spacing:.04em; white-space:nowrap; }
.case-svg{ width:100%; height:auto; display:block; margin:.2rem 0 .6rem; }
.case-svg .grid line{ stroke:var(--line-2); stroke-width:1; }
.case-svg .curve{ fill:none; stroke-linecap:round; }
.case-svg .curve.power.tuned{ stroke:var(--accent); stroke-width:3; }
.case-svg .curve.power.orig{ stroke:var(--accent); stroke-width:1.8; opacity:.3; }
.case-svg .curve.torque.tuned{ stroke:#ff9a4d; stroke-width:2.4; }
.case-svg .curve.torque.orig{ stroke:#ff9a4d; stroke-width:1.6; opacity:.3; }
.case-svg text.ax{ font-size:7px; font-family:var(--font); fill:var(--muted-2); }
.case-svg text.ax.pax{ fill:rgba(255,92,92,.8); }
.case-svg text.ax.tax{ fill:rgba(255,154,77,.92); }
.case-svg text.ax-title{ font-size:7.5px; font-family:var(--font); font-weight:600; fill:var(--muted); }
.case-svg text.ax-title.pax{ fill:var(--accent); }
.case-svg text.ax-title.tax{ fill:#ff9a4d; }
.case-figs{ display:flex; justify-content:space-between; gap:.8rem; border-top:1px solid var(--line-2); padding-top:.7rem; }
.case-fig{ display:flex; flex-direction:column; gap:.1rem; }
.case-fig i{ font-style:normal; font-size:.68rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted-2); }
.case-fig b{ font-size:.82rem; color:var(--muted); font-weight:600; }
.case-fig.tuned b{ color:var(--text); }
.case-gain{ font-family:var(--display); font-weight:700; color:var(--accent); font-size:1.05rem; margin-top:.7rem; }
.case-tag{ display:inline-block; margin-top:.7rem; font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2); background:var(--bg-2); border:1px solid var(--line-2); border-radius:999px; padding:.18rem .6rem; }
.cases-note{ text-align:center; color:var(--muted); margin-top:2.2rem; font-weight:300; }
.cases-note b{ color:var(--text); font-weight:600; }
@media (max-width:900px){ .cases{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .cases{ grid-template-columns:1fr; } }
/* Accessoires — cartes avec visuel premium (SVG) */
.acc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.acc-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; transition:transform .4s var(--ease), border-color .4s, box-shadow .4s; }
.acc-card:hover{ transform:translateY(-6px); border-color:var(--metal); box-shadow:0 26px 60px -34px rgba(15,20,30,.3); }
.acc-visual{ aspect-ratio:16/10; background:radial-gradient(120% 100% at 50% 0%, #16181f, #0a0b0f); display:grid; place-items:center; position:relative; overflow:hidden; border-bottom:1px solid var(--line); }
.acc-visual::after{ content:""; position:absolute; inset:0; background:radial-gradient(60% 50% at 50% 15%, rgba(255,46,58,.12), transparent 70%); }
.acc-visual svg{ width:66%; height:auto; position:relative; z-index:1; }
.acc-card:hover .acc-visual svg{ transform:scale(1.04); transition:transform .5s var(--ease); }
.acc-visual img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; transition:transform .6s var(--ease); }
.acc-card:hover .acc-visual img{ transform:scale(1.05); }
/* visuels « produit » sur fond clair (cutouts marque) : afficher entier, sans halo */
.acc-visual.is-product{ background:linear-gradient(180deg,#fff,#f4f5f8); }
.acc-visual.is-product::after{ display:none; }
.acc-visual.is-product img{ object-fit:contain; padding:8% 9%; }
.acc-card:hover .acc-visual.is-product img{ transform:scale(1.03); }
.acc-hero-img{ margin:0; border-radius:18px; overflow:hidden; border:1px solid var(--line); box-shadow:0 1px 2px rgba(16,20,29,.04), 0 18px 48px -30px rgba(16,20,29,.28); }
.acc-hero-img img{ width:100%; height:auto; max-height:440px; object-fit:cover; display:block; }
.acc-hero-img.is-product{ background:linear-gradient(180deg,#fff,#f4f5f8); }
.acc-hero-img.is-product img{ object-fit:contain; max-height:360px; padding:1.6rem 1.2rem; }
.acc-body{ padding:1.5rem 1.6rem 1.7rem; flex:1; display:flex; flex-direction:column; }
.acc-body h3{ font-size:1.3rem; font-weight:500; margin-bottom:.5rem; }
.acc-body p{ color:var(--muted); font-size:.92rem; font-weight:300; }
.acc-brands{ display:flex; flex-wrap:wrap; gap:.4rem; margin:1rem 0 .4rem; }
.acc-brands span{ font-size:.7rem; font-weight:600; letter-spacing:.02em; color:var(--metal); background:var(--bg-2); border:1px solid var(--line-2); border-radius:999px; padding:.22rem .65rem; }
.acc-body .feat{ margin-top:.9rem; display:grid; gap:.5rem; }
.acc-body .feat li{ font-size:.86rem; color:var(--muted); padding-left:1.4rem; position:relative; font-weight:300; }
.acc-body .feat li::before{ content:""; position:absolute; left:0; top:.5em; width:6px; height:6px; border-top:1px solid var(--accent); border-right:1px solid var(--accent); transform:rotate(45deg); }
.acc-pack{ border-color:rgba(255,46,58,.4); }
.acc-wave .w{ transform-origin:88px 50px; animation:accpulse 2.4s ease-in-out infinite; }
.acc-wave .w2{ animation-delay:.25s; } .acc-wave .w3{ animation-delay:.5s; }
@keyframes accpulse{ 0%,100%{ opacity:.3; } 50%{ opacity:1; } }
@media (max-width:900px){ .acc-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .acc-grid{ grid-template-columns:1fr; } }
@media (prefers-reduced-motion: reduce){ .acc-wave .w{ animation:none; } }
/* ====================================================================
PHASE AUDIT 08 — Barre CTA sticky mobile + icônes sociales SVG
==================================================================== */
.socials a svg{ width:18px; height:18px; }
.mcta{ display:none; }
@media (max-width:760px){
.mcta{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:1px; position:fixed; left:0; right:0; bottom:0; z-index:96;
background:var(--line); border-top:1px solid var(--line); box-shadow:0 -10px 30px -16px rgba(15,20,30,.3); }
.mcta-b{ display:flex; align-items:center; justify-content:center; gap:.4rem; background:#fff; color:var(--text);
padding:.85rem .4rem; font-size:.82rem; font-weight:600; }
.mcta-b svg{ width:18px; height:18px; }
.mcta-b span{ font-weight:500; }
.mcta-primary{ background:var(--accent); color:#fff; }
body.has-mcta{ padding-bottom:58px; }
.fab{ display:none; } /* WhatsApp déjà présent dans la barre sticky */
}
/* ====================================================================
PHASE AUDIT 08 — Blog (index + article)
==================================================================== */
.posts{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1.5rem; }
.post-card{ display:block; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.7rem; transition:transform .35s var(--ease), border-color .35s, box-shadow .35s; }
.post-card:hover{ transform:translateY(-4px); border-color:var(--metal); box-shadow:0 22px 54px -32px rgba(15,20,30,.22); }
.post-date{ font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--metal); }
.post-card h3{ font-size:1.25rem; font-weight:500; margin:.5rem 0 .6rem; }
.post-card p{ color:var(--muted); font-size:.92rem; font-weight:300; margin-bottom:1rem; }
.article{ max-width:720px; margin:0 auto; }
.article p{ color:var(--muted); font-weight:300; line-height:1.85; margin-bottom:1.2rem; }
.article h2{ font-size:1.5rem; font-weight:500; margin:2rem 0 .8rem; }
.article strong{ color:var(--text); font-weight:600; }
.article em{ color:var(--muted-2); font-size:.92rem; }
/* ====================================================================
PASSE 09 — POLISH « instrument de précision » (frontend-design)
Surcharge finale : police d'affichage, atmosphère, détails éditoriaux.
==================================================================== */
/* --- Atmosphère claire : dégradé froid + grille technique (fin du blanc plat) --- */
body::before{
display:block !important; content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:1;
background:
radial-gradient(120% 85% at 88% -12%, rgba(255,46,58,.055), transparent 52%),
radial-gradient(90% 70% at -5% 0%, rgba(16,20,29,.05), transparent 48%),
linear-gradient(180deg, #f7f8fb 0%, #eceef4 100%);
}
body::after{
display:block !important; content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.55;
background-image:
linear-gradient(rgba(16,20,29,.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(16,20,29,.04) 1px, transparent 1px);
background-size:66px 66px;
-webkit-mask-image:radial-gradient(125% 95% at 50% -5%, #000 26%, transparent 78%);
mask-image:radial-gradient(125% 95% at 50% -5%, #000 26%, transparent 78%);
}
/* le contenu passe au-dessus des couches d'ambiance */
main, .footer{ position:relative; z-index:2; }
/* La nav DOIT rester collante et au-dessus de tout (sinon le menu déroulant passe
derrière le hero). On ne la met PAS au même z-index que main. */
.nav{ position:sticky; top:0; z-index:100; }
/* --- Police d'affichage Clash Display : présence et précision --- */
h1, h2, h3, h4, .section-title, .stat strong, .stages .stage .gain, .case-veh{ font-family:var(--display); }
.section-title, .split h2, .cta-band h2, .page-hero h1{ font-weight:500; letter-spacing:-.025em; }
.hw-copy h1{ font-family:var(--display); font-weight:600; letter-spacing:-.03em; }
.stages .stage h3, .card h3, .acc-body h3{ font-weight:500; }
/* Clash Display rend un peu plus large : on resserre l'interligne des gros titres */
.section-title{ line-height:1.06; }
/* --- Eyebrows / labels : tic rouge technique --- */
.label{ color:var(--metal); gap:.7rem; align-items:flex-start; }
/* tiret aligné sur la 1re ligne (et non centré entre 2 lignes quand le libellé passe à la ligne sur mobile) */
.label::before{ display:inline-block !important; content:""; width:20px; height:2px; background:var(--accent); border-radius:2px; opacity:.9; transform:translateY(.72em); }
.section-head .label{ justify-content:center; }
/* --- Boutons : matière (dégradé + lisière) au lieu d'un aplat --- */
.btn-primary{ background:linear-gradient(180deg,#ff3b46,#e81d29); box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 10px 24px -14px rgba(255,46,58,.65); }
.btn-primary:hover{ background:linear-gradient(180deg,#ff4954,#ef212d); box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 16px 32px -14px rgba(255,46,58,.7); transform:translateY(-1px); }
/* --- Profondeur des surfaces blanches (ne flottent plus à plat) --- */
.card, .acc-card, .case, .post-card, .info-card, .stat-board, .hw-panel{ box-shadow:0 1px 2px rgba(16,20,29,.04), 0 18px 48px -30px rgba(16,20,29,.28); }
/* --- Hero : eyebrow signé + filet de specs technique --- */
.hw-copy .hw-eyebrow{ display:inline-flex; align-items:center; gap:.6rem; color:#e7d4ad; }
.hw-copy .hw-eyebrow::before{ content:""; width:24px; height:2px; background:var(--accent); box-shadow:0 0 12px rgba(255,46,58,.7); }
.hw-specs{ display:flex; flex-wrap:wrap; gap:.5rem 1.4rem; margin-top:1.5rem; padding-top:1.2rem; border-top:1px solid rgba(255,255,255,.16); }
.hw-specs span{ font-family:var(--font); font-size:.72rem; letter-spacing:.06em; color:rgba(255,255,255,.66); text-transform:uppercase; display:inline-flex; align-items:center; gap:.5rem; }
.hw-specs b{ color:#fff; font-weight:600; font-variant-numeric:tabular-nums; }
.hw-specs span + span::before{ content:""; }
@media (max-width:980px){ .hw-specs{ justify-content:center; } }
/* --- « Nos univers » : numérotation éditoriale + accent au survol --- */
.universe-list{ counter-reset:uni; }
.universe-row{ position:relative; }
.universe-row::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--accent); transform:scaleY(0); transform-origin:top; transition:transform .4s var(--ease); }
.universe-row:hover::before{ transform:scaleY(1); }
.u-name{ display:inline-flex; align-items:baseline; }
.u-name::before{ content:none; }
/* --- Bande de stats : lecture « instrument » (chiffres tabulaires + filet rouge) --- */
.stats-band{ background:linear-gradient(180deg,#ffffff,#f5f6fa); }
.stats-strip .stat strong{ font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:-.03em; display:inline-block; position:relative; padding-bottom:.6rem; }
.stats-strip .stat strong::after{ content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:24px; height:2px; background:var(--accent); border-radius:2px; }
.stats-strip .stat span{ text-transform:uppercase; letter-spacing:.13em; font-size:.66rem; color:var(--muted-2); }
/* --- Marquee : matière douce --- */
.marquee{ background:linear-gradient(180deg,#ffffff,#f3f4f8); border-color:var(--line); }
/* --- Process : numéros d'étape en police d'affichage --- */
.step .n{ font-family:var(--display); font-weight:500; }
/* --- Section sombre (banc) : la grille d'ambiance ne traverse pas --- */
.section--dark{ position:relative; z-index:2; }
/* ====================================================================
PASSE 09b — RYTHME VERTICAL (resserrage des respirations)
Le clamp d'origine (9,5rem ≈ 152px) rendait les sections flottantes.
On resserre pour une cadence plus dense et intentionnelle.
==================================================================== */
.section { padding: clamp(4rem, 7vw, 6.5rem) 0; }
.section-head { margin-bottom: clamp(2.6rem, 4.5vw, 3.6rem); }
.section-sub { margin-top: 1rem; }
.cta-band { padding: clamp(3.75rem, 7vw, 5.75rem) 0; }
.stats-band { padding: clamp(2.4rem, 4vw, 3.2rem) 0; }
/* « Nos univers » : colonne titre plus large (évite le retour à la ligne)
et alignement vertical net quand un titre passe sur deux lignes. */
.universe-row { grid-template-columns: minmax(220px, 1fr) 1.5fr auto; align-items: center; }
.universe-row { padding-top: 1.55rem; padding-bottom: 1.55rem; }
/* Hero : un peu moins d'air sous le bloc copie sur grand écran */
@media (min-width: 981px){
.hw-inner { padding-bottom: clamp(1.6rem, 3.5vh, 2.4rem); }
}
/* Bande CTA finale : titre en police d'affichage, sous-texte resserré */
.cta-band p { margin: .9rem auto 1.8rem; }
/* ====================================================================
PASSE 09c — CORRECTIFS (contraste CTA, ombre fantôme, filet de specs)
==================================================================== */
/* 1) Bande CTA finale : fond = PHOTO sombre (via ::before) → texte BLANC.
La charte claire l'avait passé en noir → invisible sur le visuel. */
.cta-band h2{ color:#fff !important; }
.cta-band p, .cta-band .section-sub{ color:rgba(255,255,255,.82) !important; }
.cta-band .btn-secondary{ color:#fff !important; border-color:rgba(255,255,255,.4) !important; background:rgba(255,255,255,.06) !important; }
.cta-band .btn-secondary:hover{ border-color:#fff !important; background:rgba(255,255,255,.12) !important; }
/* 2) Stat-board : c'est une grille de mise en page, pas une carte.
On retire l'ombre fantôme et les cellules blanches → chiffres épurés. */
.stat-board{ box-shadow:none !important; }
.stat-board .b{ background:transparent !important; }
.stat-board .b strong{ font-weight:500; }
/* 3) Filet de specs du hero : séparateurs nets + lisibilité sur la photo */
.hw-specs{ gap:.45rem 0; }
.hw-specs span{ text-shadow:0 1px 14px rgba(0,0,0,.55); }
.hw-specs span + span{ margin-left:1rem; padding-left:1rem; border-left:1px solid rgba(255,255,255,.24); }
@media (max-width:980px){
.hw-specs{ justify-content:center; }
.hw-specs span + span{ margin-left:.8rem; padding-left:.8rem; }
}
/* ====================================================================
PASSE 09d — Hero : lisibilité avec la nouvelle photo (plus lumineuse)
On protège le haut (nav + eyebrow) sans assombrir les véhicules (centre/bas).
==================================================================== */
.hw-bg .hw-scrim{
background:
linear-gradient(100deg, rgba(8,8,11,.82) 0%, rgba(8,8,11,.46) 34%, rgba(8,8,11,.06) 58%, rgba(8,8,11,.26) 100%),
linear-gradient(180deg, rgba(8,8,11,.38) 0%, transparent 24%);
}
.hw-copy .hw-eyebrow{ text-shadow:0 1px 16px rgba(0,0,0,.6); }
.hw-copy .hw-sub{ text-shadow:0 1px 18px rgba(0,0,0,.45); }
/* ====================================================================
PASSE 10 — Pages intérieures : page-hero avec ambiance + motif dyno
(remplace le dégradé clair plat par une surface « technique » signée)
==================================================================== */
.page-hero{
position:relative; overflow:hidden;
background:
radial-gradient(75% 120% at 96% 8%, rgba(255,46,58,.07), transparent 56%),
linear-gradient(158deg, #f7f8fb 0%, #e7eaf1 100%);
}
.page-hero::before{ /* grille technique masquée */
content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.6;
background-image:
linear-gradient(rgba(16,20,29,.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(16,20,29,.05) 1px, transparent 1px);
background-size:62px 62px;
-webkit-mask-image:radial-gradient(120% 120% at 50% 0%, #000 35%, transparent 82%);
mask-image:radial-gradient(120% 120% at 50% 0%, #000 35%, transparent 82%);
}
.page-hero::after{ /* motif dyno discret, comble le vide à droite */
content:""; position:absolute; right:-1%; top:50%; transform:translateY(-50%);
width:min(44%, 600px); aspect-ratio:540/340; z-index:0; pointer-events:none; opacity:.5;
background:url('/images/dyno-motif.svg?v=2') right center / contain no-repeat;
}
.page-hero .container{ position:relative; z-index:2; }
.page-hero .hero-bg{ display:none; } /* ancien fond redondant */
@media (max-width:900px){ .page-hero::after{ display:none; } }
/* ====================================================================
PASSE 11 — Optimisation MOBILE (fluidité de scroll + finitions)
==================================================================== */
@media (max-width: 900px){
/* Couches d'ambiance FIXES retirées sur mobile : elles provoquent le jank de
scroll (et le « décrochage » du fond sous la barre d'URL iOS/Android).
On revient à un fond clair uni — le rythme vient des sections alt/sombres. */
body::before, body::after{ display:none !important; }
body{ background:var(--bg); }
}
@media (max-width: 760px){
/* Filet de specs du hero : séparateur central qui se casse proprement à la ligne */
.hw-specs{ gap:.3rem .9rem; }
.hw-specs span + span{ margin-left:0; padding-left:0; border-left:0; }
.hw-specs span:not(:last-child)::after{ content:"·"; margin-left:.9rem; color:rgba(255,255,255,.45); }
/* Barre CTA sticky : respect de la zone sûre (encoche / home indicator) */
.mcta{ padding-bottom:env(safe-area-inset-bottom, 0px); }
body.has-mcta{ padding-bottom:calc(58px + env(safe-area-inset-bottom, 0px)); }
}
/* ====================================================================
PASSE 12 — MOBILE : retour à l'icône flottante + fix débordement hero
==================================================================== */
/* 1) On retire la barre CTA sticky (3 boutons) et on RÉAFFICHE l'icône WhatsApp
flottante discrète à droite, comme avant. */
.mcta{ display:none !important; }
@media (max-width: 760px){
.fab{ display:grid !important; }
body.has-mcta{ padding-bottom:0 !important; }
}
/* 2) Débordement horizontal du hero sur mobile : les