/* ───────────────────────────────────────────────────────────────
OptiDress — premium B2B SaaS landing page
White primary · #0055FE accent · editorial typography
─────────────────────────────────────────────────────────────── */
:root {
--bg: #FFFFFF;
--bg-soft: #F6F7FB;
--bg-mute: #EEF0F6;
--line: #E4E7EE;
--line-soft: #EFF1F6;
--ink: #0A0C12;
--ink-2: #1A1E27;
--ink-3: #4A5060;
--ink-4: #8A90A0;
--accent: #0055FE;
--accent-2: #003BB0;
--accent-soft: #E6EEFF;
--radius: 18px;
--radius-lg: 28px;
--ease: cubic-bezier(.22,.61,.36,1);
--ease-out: cubic-bezier(.16,1,.3,1);
--max: 1320px;
--pad: clamp(20px, 4vw, 72px);
--font-sans: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
--font-serif: 'Instrument Serif', 'Times New Roman', serif;
--font-mono: 'JetBrains Mono', ui-monospace, monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
*::selection { background: var(--accent); color: #fff; }
html, body {
background: var(--bg);
color: var(--ink);
font-family: var(--font-sans);
font-size: 16px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
.container { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); position: relative; }
/* ─── grain overlay ─── */
.grain {
position: fixed; inset: 0; pointer-events: none; z-index: 9000;
opacity: .035; mix-blend-mode: multiply;
background-image: url("data:image/svg+xml;utf8,");
}
/* ─── cursor (OD logo, subtle) ─── */
.cursor-dot, .cursor-ring {
position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999;
transform: translate3d(-50%,-50%,0);
}
.cursor-dot {
width: 4px; height: 4px; background: var(--accent); border-radius: 50%;
transition: opacity .25s var(--ease);
opacity: .85;
}
.cursor-ring {
width: 22px; height: 22px;
display: grid; place-items: center;
transition: width .35s var(--ease), height .35s var(--ease);
mix-blend-mode: difference;
}
.cursor-logo {
width: 100%; height: 100%;
object-fit: contain;
opacity: .55;
filter: invert(1); /* white logo so mix-blend-mode: difference works on any bg */
transition: opacity .25s var(--ease);
}
.cursor-ring.is-hover { width: 36px; height: 36px; }
.cursor-ring.is-hover .cursor-logo { opacity: .85; }
.cursor-dot.is-hover { opacity: 0; }
@media (hover: none) { .cursor-dot, .cursor-ring { display: none; } }
/* ─── page loader (logo grows) ─── */
.page-loader {
position: fixed; inset: 0; z-index: 10000; background: #fff;
display: grid; place-items: center;
}
.loader-logo {
width: 28px; height: auto;
opacity: 0;
transform: scale(.6);
animation: loaderGrow 1.05s var(--ease-out) forwards;
will-change: transform, opacity;
}
@keyframes loaderGrow {
0% { opacity: 0; transform: scale(.6); }
20% { opacity: 1; transform: scale(1); }
68% { opacity: 1; transform: scale(2.4); }
100% { opacity: 0; transform: scale(28); }
}
.page-loader.is-out { opacity: 0; pointer-events: none; transition: opacity .3s var(--ease-out); }
/* ─── navigation (liquid glass) ─── */
.nav {
position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
z-index: 100;
transition: top .4s var(--ease);
width: auto;
}
.nav-inner {
position: relative;
display: inline-flex; align-items: center; gap: 32px;
background: rgba(255,255,255,.55);
backdrop-filter: blur(24px) saturate(200%);
-webkit-backdrop-filter: blur(24px) saturate(200%);
border: 1px solid rgba(255,255,255,.55);
border-radius: 999px;
padding: 7px 7px 7px 20px;
box-shadow:
0 1px 0 rgba(255,255,255,.85) inset,
0 0 0 1px rgba(10,12,18,.04),
0 20px 50px -24px rgba(10,12,18,.25),
0 8px 24px -12px rgba(0,85,254,.12);
overflow: hidden;
}
/* liquid glass highlights */
.nav-inner::before {
content: ''; position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(ellipse 60% 30% at 20% 0%, rgba(255,255,255,.7), transparent 60%),
radial-gradient(ellipse 50% 30% at 80% 100%, rgba(0,85,254,.06), transparent 60%);
border-radius: 999px;
}
.nav-inner::after {
content: ''; position: absolute; inset: 1px; pointer-events: none;
border-radius: 999px;
background: linear-gradient(180deg, rgba(255,255,255,.4), transparent 30%);
mix-blend-mode: overlay;
}
.nav.is-scrolled .nav-inner {
background: rgba(255,255,255,.72);
box-shadow:
0 1px 0 rgba(255,255,255,.9) inset,
0 0 0 1px rgba(10,12,18,.05),
0 24px 60px -28px rgba(10,12,18,.3),
0 8px 24px -12px rgba(0,85,254,.15);
}
.nav-logo {
display: inline-flex; align-items: center;
position: relative; z-index: 1;
flex: 0 0 auto;
}
.nav-logo-img { height: 34px; width: auto; display: block; flex: 0 0 auto; }
.nav-links { display: flex; gap: 2px; position: relative; z-index: 1; }
.nav-links a { white-space: nowrap; }
/* burger mobile : caché sur desktop */
.nav-burger { display: none; border: 0; background: transparent; cursor: pointer; padding: 10px; z-index: 2; }
.nav-burger span { display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; margin: 5px 0; transition: transform .3s var(--ease), opacity .3s var(--ease); }
.nav.menu-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.menu-open .nav-burger span:nth-child(2) { opacity: 0; }
.nav.menu-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-links a {
position: relative; padding: 8px 14px; font-size: 13.5px; color: var(--ink-3);
border-radius: 999px; transition: color .25s var(--ease);
overflow: hidden; font-weight: 450;
}
.nav-links a::before {
content: attr(data-text);
position: absolute; inset: 0; display: grid; place-items: center;
color: var(--ink); transform: translateY(100%);
transition: transform .35s var(--ease-out);
}
.nav-links a:hover { color: transparent; }
.nav-links a:hover::before { transform: translateY(0); }
.nav-actions { display: flex; align-items: center; position: relative; z-index: 1; }
/* ─── buttons ─── */
.btn {
position: relative; display: inline-flex; align-items: center; gap: 10px;
padding: 10px 18px; font-size: 14px; font-weight: 500; letter-spacing: -.005em;
border-radius: 999px; transition: transform .35s var(--ease), background .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
white-space: nowrap; will-change: transform;
}
.btn-primary {
background: var(--accent); color: #fff;
box-shadow: 0 10px 30px -16px rgba(0,85,254,.55);
}
.btn-primary:hover { background: var(--accent-2); box-shadow: 0 16px 40px -16px rgba(0,85,254,.55); }
.btn-ghost {
background: rgba(10,12,18,.04); color: var(--ink); border: 1px solid var(--line);
}
.btn-ghost:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-lg { padding: 14px 22px; font-size: 15px; }
.btn-xl { padding: 18px 28px; font-size: 16px; }
.btn-block { width: 100%; justify-content: center; }
.btn-arrow svg { width: 14px; height: 14px; transition: transform .35s var(--ease-out); }
.btn:hover .btn-arrow svg { transform: translateX(4px); }
.btn-play svg { width: 10px; height: 10px; }
/* ─── reveal base ─── */
.reveal-up { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.reveal-up.is-in { opacity: 1; transform: translateY(0); }
/* ─── section titles (split into lines/words/chars) ─── */
.section-head { margin-bottom: clamp(40px, 6vw, 96px); }
.text-center { text-align: center; }
.text-center .section-title .line { justify-content: center; }
.kicker {
display: inline-flex; align-items: center; gap: 10px;
font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em;
text-transform: uppercase; color: var(--ink-4);
padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px;
margin-bottom: 28px;
}
.section-title, .hero-title, .cta-title {
font-family: var(--font-serif); font-weight: 400;
font-size: clamp(40px, 6.5vw, 108px);
line-height: 0.84; letter-spacing: -0.028em;
color: var(--ink);
}
.hero-title { line-height: 0.72; font-size: clamp(30px, 4.4vw, 66px); }
/* titre de la section intégration : volontairement plus petit que le hero → reste un titre de section, ne concurrence pas le principal */
.integrate .section-title { font-size: clamp(34px, 4.8vw, 72px); }
.io-title .line { flex-wrap: nowrap; white-space: nowrap; } /* une seule ligne */
/* titre "standard" : phrase plus longue → taille réduite pour que la 1re ligne tienne sur une ligne */
.standard .section-title { font-size: clamp(32px, 4.5vw, 64px); }
.section-title .line, .hero-title .line, .cta-title .line {
display: flex; flex-wrap: wrap; gap: .22em; overflow: hidden;
padding: 0.08em 0.04em 0.22em; /* generous bottom for descenders */
}
.hero-title { position: relative; z-index: 2; }
.hero-title { cursor: default; }
/* ─── FULL-VIEWPORT ASCENDING SALES CURVE — hover on title to play ───
triggered via .chart-active class on .hero-pin (set by JS so the
animation can be RESTARTED on every fresh hover). */
.hero-chart {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 1; /* DEVANT la vidéo (z1, plus haut dans le DOM), sous le texte/orbit */
opacity: 0;
pointer-events: none;
transition: opacity .5s var(--ease-out);
}
.hero-pin.chart-active .hero-chart { opacity: 0.42; }
/* hard lock once the user starts scrolling — chart can't show anymore */
.hero-pin.chart-locked .hero-chart,
.hero-pin.chart-locked .chart-counter { opacity: 0 !important; }
/* ─── Revenue counter that RIDES the curve as it draws ─── */
.chart-counter {
position: absolute;
top: 0;
left: 0;
z-index: 2;
/* JS sets translate(x, y) every frame so this label rides the drawing head */
transform: translate3d(0, 0, 0);
display: inline-flex;
align-items: baseline;
gap: 0.05em;
font-family: var(--font-sans);
font-weight: 600;
font-size: clamp(20px, 2.4vw, 38px);
letter-spacing: -0.02em;
color: var(--accent);
pointer-events: none;
opacity: 0;
transition: opacity .35s var(--ease-out);
white-space: nowrap;
font-variant-numeric: tabular-nums;
/* keep the label centred horizontally + lifted above the line */
will-change: transform;
}
.hero-pin.chart-active .chart-counter { opacity: 1; }
.chart-counter-sign,
.chart-counter-unit {
font-size: 0.65em;
color: rgba(0, 85, 254, 0.85);
}
.chart-counter-sign { margin-right: 0.05em; }
.chart-counter-unit { margin-left: 0.08em; }
.chart-counter-val { font-variant-numeric: tabular-nums; }
/* line draw — tiret unique plus long que la courbe sur n'importe quel écran :
avec vector-effect non-scaling-stroke, les tirets se calculent en pixels
ÉCRAN (pathLength ignoré) ; à 2400 le motif se répétait → trou au milieu. */
.chart-line {
stroke-dasharray: 12000;
stroke-dashoffset: 12000;
}
.hero-pin.chart-active .chart-line {
animation: chartDraw 2.4s var(--ease-out) forwards;
}
@keyframes chartDraw {
to { stroke-dashoffset: 0; }
}
/* gradient fill */
.chart-fill { opacity: 0; }
.hero-pin.chart-active .chart-fill {
animation: chartFillIn .8s var(--ease-out) .6s forwards;
}
@keyframes chartFillIn {
to { opacity: 1; }
}
/* dots stagger */
.chart-dots circle {
opacity: 0;
transform: scale(0);
transform-origin: center;
transform-box: fill-box;
}
.hero-pin.chart-active .chart-dots circle {
animation: chartDot .35s var(--ease-out) forwards;
}
@keyframes chartDot {
to { opacity: 1; transform: scale(1); }
}
.hero-pin.chart-active .chart-dots circle:nth-child(1) { animation-delay: .12s; }
.hero-pin.chart-active .chart-dots circle:nth-child(2) { animation-delay: .20s; }
.hero-pin.chart-active .chart-dots circle:nth-child(3) { animation-delay: .28s; }
.hero-pin.chart-active .chart-dots circle:nth-child(4) { animation-delay: .36s; }
.hero-pin.chart-active .chart-dots circle:nth-child(5) { animation-delay: .44s; }
.hero-pin.chart-active .chart-dots circle:nth-child(6) { animation-delay: .52s; }
.hero-pin.chart-active .chart-dots circle:nth-child(7) { animation-delay: .60s; }
.hero-pin.chart-active .chart-dots circle:nth-child(8) { animation-delay: .68s; }
.hero-pin.chart-active .chart-dots circle:nth-child(9) { animation-delay: .76s; }
.hero-pin.chart-active .chart-dots circle:nth-child(10) { animation-delay: .84s; }
.hero-pin.chart-active .chart-dots circle:nth-child(11) { animation-delay: .92s; }
.hero-pin.chart-active .chart-dots circle:nth-child(12) { animation-delay: 1.02s; }
.hero-pin.chart-active .chart-dots circle:nth-child(13) { animation-delay: 1.14s; }
.hero-pin.chart-active .chart-dots circle:nth-child(14) { animation-delay: 1.30s; }
.hero-pin.chart-active .chart-dots circle:nth-child(15) { animation-delay: 1.50s; }
/* keep the title words above the chart layer */
.hero-title .line { position: relative; z-index: 2; }
.cta-title .line { justify-content: center; }
.section-title .word, .hero-title .word, .cta-title .word {
display: inline-block; transform: translateY(110%);
will-change: transform;
}
.section-title.is-in .word, .hero-title.is-in .word, .cta-title.is-in .word { transform: translateY(0); }
.word.italic { font-style: italic; color: var(--accent); }
.section-sub {
max-width: 620px; margin-top: 24px;
font-size: clamp(16px, 1.2vw, 19px); color: var(--ink-3); line-height: 1.55;
}
.text-center .section-sub { margin-left: auto; margin-right: auto; }
/* ───────────────────────────────────────────────────────────────
HERO — scrollytelling pinned section
─────────────────────────────────────────────────────────────── */
.hero {
position: relative;
height: 640vh;
overflow: visible;
/* No background — keeps the hero transparent so benefits can emerge from behind
the video without the hero's own white bg hiding them. */
z-index: 5; /* hero (and its video) sits ABOVE the benefits stacking context */
}
.hero-pin {
position: relative; height: 100vh; width: 100%;
overflow: hidden;
padding: clamp(92px, 11vh, 124px) var(--pad) clamp(40px, 4vw, 72px);
display: flex; flex-direction: column;
align-items: center; justify-content: flex-start; /* centré horizontalement, contenu en haut */
isolation: isolate;
}
/* Vidéo démo plein écran, effet transparent façon veesual — 1er écran uniquement */
.hero-bg-video {
position: absolute; inset: 0; z-index: 1; /* au-dessus des dots/orb (0), sous le contenu (5) */
overflow: hidden; pointer-events: none;
will-change: opacity;
}
.hero-bg-video video {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: contain; /* image entière, moins zoomée (au lieu de cover) */
opacity: 1; /* 100% au tout début — le fade est piloté au scroll */
transform: translateY(-20px); /* remontée de quelques px */
}
/* Voile blanc léger : la vidéo est déjà discrète (opacity 0.35), on ajoute juste
un renfort de lisibilité derrière le titre/description (haut), puis quasi rien
ailleurs pour laisser respirer la vidéo. */
.hero-bg-veil {
position: absolute; inset: 0;
background: linear-gradient(
to bottom,
rgba(255,255,255,0.60) 0%,
rgba(255,255,255,0.40) 45%,
rgba(255,255,255,0.15) 70%,
rgba(255,255,255,0.30) 100%
);
}
.hero-dots {
position: absolute; inset: 0; pointer-events: none;
background-image: radial-gradient(rgba(10,12,18,.11) 1.1px, transparent 1.1px);
background-size: 24px 24px;
background-position: 0 0;
mask-image: radial-gradient(ellipse 75% 70% at 50% 40%, #000 30%, transparent 85%);
-webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 40%, #000 30%, transparent 85%);
z-index: 0;
}
.hero-grid-canvas {
position: absolute; inset: 0; width: 100%; height: 100%;
pointer-events: none; z-index: 0;
}
/* global dot bg helper for sections that want the SaaS pattern */
.dot-bg {
position: absolute; inset: 0; pointer-events: none; opacity: .6;
background-image: radial-gradient(rgba(10,12,18,.14) 1px, transparent 1px);
background-size: 22px 22px;
}
.hero-content {
position: relative; max-width: min(1360px, 96vw); text-align: center;
z-index: 6; width: 100%; margin: 0 auto; /* clairement DEVANT la vidéo de fond (z-index 1) */
display: flex; flex-direction: column; align-items: center; gap: 10px;
will-change: opacity, transform, filter;
}
.hero-content > * { margin: 0; }
.hero-eyebrow { margin-bottom: 0; }
.hero-title { margin: 0; max-width: 1000px; }
.hero-sub { margin: 0; max-width: 640px; } /* fits the longest of the 3
lines */
.hero-actions { margin: 0; }
.hero-eyebrow {
display: inline-flex; align-items: center; gap: 10px;
padding: 6px 14px; border-radius: 999px;
border: 1px solid var(--line); background: rgba(255,255,255,.6);
backdrop-filter: blur(8px);
font-size: 12px; color: var(--ink-3); margin-bottom: 14px;
}
.status-dot {
width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
box-shadow: 0 0 0 4px rgba(0,85,254,.15); animation: pulse 2s var(--ease) infinite;
}
@keyframes pulse {
0%, 100% { box-shadow: 0 0 0 4px rgba(0,85,254,.15); }
50% { box-shadow: 0 0 0 7px rgba(0,85,254,.05); }
}
.hero-title { margin: 0; max-width: min(1360px, 96vw); }
.hero-sub {
max-width: 640px; margin: 0 auto; text-align: center;
font-size: clamp(16px, 1.25vw, 19px); color: var(--ink-3); line-height: 1.55;
}
.hero-title .line { justify-content: center; }
/* Ligne 1 du titre (6 mots) reste sur UNE seule ligne visuelle sur desktop */
@media (min-width: 900px) {
.hero-title .line { flex-wrap: nowrap; white-space: nowrap; }
}
.hero-actions {
display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
margin-top: auto; /* CTA ancrés en bas, centrés horizontalement */
position: relative; z-index: 6; /* devant la vidéo de fond */
will-change: opacity, transform;
}
/* ── PARTICLE DISSOLVE CANVAS — above the hero text so it's actually visible ── */
.hero-particles {
position: absolute; inset: 0;
width: 100%; height: 100%;
pointer-events: none;
z-index: 8; /* TOP of the stack during dissolution */
}
/* ── ORBIT OF LOGOS (sits ABOVE the video so the video appears "behind" it) ── */
.hero-orbit {
position: absolute; inset: 0;
z-index: 7; pointer-events: none;
opacity: 0;
display: grid; place-items: center;
will-change: opacity;
}
.orbit-stage {
position: relative;
width: min(640px, 72vmin); aspect-ratio: 1;
will-change: transform;
transform-origin: center;
}
.orbit-logo {
position: absolute; top: 50%; left: 50%;
font-family: var(--font-serif);
font-size: clamp(18px, 1.8vw, 26px);
letter-spacing: -.01em;
color: var(--ink);
white-space: nowrap;
transform: translate(-50%, -50%);
will-change: transform, opacity;
}
.orbit-logo.orbit-italic { font-style: italic; color: var(--accent); }
.orbit-logo.orbit-img {
display: inline-flex; align-items: center; justify-content: center;
width: 180px; height: 70px;
}
.orbit-logo.orbit-img img {
max-width: 100%; max-height: 100%;
object-fit: contain;
mix-blend-mode: multiply;
filter: contrast(1.05);
}
/* Logos importés blancs → passés en NOIR pour s'intégrer sur le fond blanc */
.orbit-logo.orbit-img-white { width: 140px; height: 128px; }
.orbit-logo.orbit-img-white img {
mix-blend-mode: normal;
filter: brightness(0); /* toute la forme blanche devient noire (alpha conservé) */
}
/* center text inside the orbit */
.orbit-center {
position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%);
display: flex; flex-direction: column; align-items: center;
text-align: center;
z-index: 1;
will-change: opacity, transform;
}
.orbit-center-text {
font-family: var(--font-serif); font-style: italic;
font-size: clamp(40px, 4.6vw, 72px);
letter-spacing: -.02em; line-height: 1.05; color: var(--ink);
max-width: 8em;
}
/* ── CENTER VIDEO (sits BEHIND the orbit so it appears behind the center text) ── */
.hero-center-video {
position: absolute; top: 50%; left: 50%;
z-index: 5; pointer-events: none;
transform: translate(-50%, -50%) scale(0);
opacity: 0;
width: min(880px, 78vw);
aspect-ratio: 16 / 9;
will-change: transform, opacity;
}
.hero-center-video.is-on { pointer-events: auto; }
.hcv-frame {
position: relative; width: 100%; height: 100%;
border-radius: var(--radius-lg); overflow: hidden;
background: #0A0C12;
cursor: pointer;
box-shadow:
0 60px 90px -30px rgba(10, 12, 18, 0.55),
0 30px 60px -20px rgba(0, 85, 254, 0.18);
}
/* 3-spot diffuse "ground" shadow under the video — visualises the 3 spawn points
from which the benefits emerge. Scales with the video (it's inside .hero-center-video).
Fades in only once the video is fully open. */
.hcv-shadow {
position: absolute;
bottom: -22%; left: -4%; right: -4%;
height: 36%;
background:
radial-gradient(ellipse 16% 100% at 18% 0%, rgba(10,12,18,0.50), transparent 70%),
radial-gradient(ellipse 16% 100% at 50% 0%, rgba(10,12,18,0.58), transparent 70%),
radial-gradient(ellipse 16% 100% at 82% 0%, rgba(10,12,18,0.50), transparent 70%);
filter: blur(18px);
pointer-events: none;
opacity: 0;
transition: opacity .6s var(--ease);
z-index: -1;
}
.hero-center-video.is-on .hcv-shadow { opacity: 1; }
.hcv-video {
width: 100%; height: 100%; display: block; object-fit: cover;
}
/* bottom-right control pill (pause + mute) */
.hcv-controls {
position: absolute; bottom: 16px; right: 16px;
display: flex; gap: 6px;
background: rgba(10,12,18,.55);
border: 1px solid rgba(255,255,255,.15);
border-radius: 999px; padding: 5px;
backdrop-filter: blur(10px);
z-index: 3;
}
.hcv-ctrl {
width: 34px; height: 34px;
display: grid; place-items: center;
border-radius: 50%;
color: #fff;
transition: background .2s var(--ease), color .2s var(--ease);
}
.hcv-ctrl:hover { background: var(--accent); }
.hcv-ctrl svg { width: 16px; height: 16px; }
.hcv-ctrl .ic-unmute, .hcv-ctrl .ic-pause { display: none; }
.hcv-ctrl.is-on .ic-mute, .hcv-ctrl.is-on .ic-play { display: none; }
.hcv-ctrl.is-on .ic-unmute, .hcv-ctrl.is-on .ic-pause { display: block; }
/* hero visual */
.hero-visual {
position: relative; max-width: 1080px; margin: 100px auto 0;
perspective: 1600px;
}
.hv-frame {
position: relative;
background: #fff; border: 1px solid var(--line);
border-radius: var(--radius-lg); overflow: hidden;
box-shadow:
0 1px 0 rgba(255,255,255,.8) inset,
0 60px 120px -40px rgba(10,12,18,.25),
0 30px 60px -30px rgba(0,85,254,.1);
transform: rotateX(8deg) translateZ(0); transform-origin: center top;
transition: transform 1.2s var(--ease-out);
}
.hero-visual.is-in .hv-frame,
.hero-visual.is-in .hv-video-frame { transform: rotateX(0deg); }
/* hero video frame (replaces the mockup) */
.hv-video-frame {
position: relative;
border-radius: var(--radius-lg); overflow: hidden;
background: #000;
border: 1px solid var(--line);
box-shadow:
0 1px 0 rgba(255,255,255,.8) inset,
0 60px 140px -40px rgba(10,12,18,.35),
0 30px 60px -30px rgba(0,85,254,.18);
transform: rotateX(8deg) translateZ(0); transform-origin: center top;
transition: transform 1.2s var(--ease-out);
aspect-ratio: 16 / 9;
}
.hv-video {
width: 100%; height: 100%;
display: block; object-fit: cover;
}
.hv-video-glow {
position: absolute; inset: -40px; pointer-events: none; z-index: -1;
background: radial-gradient(ellipse at center, rgba(0,85,254,.28), transparent 60%);
filter: blur(40px);
animation: orbBreath 5s var(--ease) infinite;
}
.hv-video-mute {
position: absolute; bottom: 18px; right: 18px;
width: 42px; height: 42px;
display: grid; place-items: center;
background: rgba(10,12,18,.55); color: #fff;
border: 1px solid rgba(255,255,255,.15);
backdrop-filter: blur(8px);
border-radius: 50%;
transition: background .25s var(--ease), transform .35s var(--ease);
z-index: 2;
}
.hv-video-mute:hover { background: var(--accent); transform: scale(1.05); }
.hv-video-mute svg { width: 18px; height: 18px; }
.hv-video-mute .ic-unmute { display: none; }
.hv-video-mute.is-on .ic-mute { display: none; }
.hv-video-mute.is-on .ic-unmute { display: block; }
.hv-topbar {
display: flex; align-items: center; gap: 8px;
padding: 14px 18px; background: var(--bg-soft); border-bottom: 1px solid var(--line);
}
.hv-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.hv-dot:nth-child(1) { background: #FF5F57; }
.hv-dot:nth-child(2) { background: #FEBC2E; }
.hv-dot:nth-child(3) { background: #28C840; }
.hv-url {
margin-left: 20px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-4);
padding: 4px 14px; background: #fff; border: 1px solid var(--line); border-radius: 6px;
}
.hv-body { display: grid; grid-template-columns: 1fr 320px; min-height: 480px; }
.hv-stage {
position: relative; padding: 24px; overflow: hidden;
background: linear-gradient(180deg, #F8F9FC 0%, #F0F2F8 100%);
}
.hv-stage-bg {
position: absolute; inset: 0;
background: radial-gradient(circle at 30% 30%, rgba(0,85,254,.12), transparent 60%),
radial-gradient(circle at 70% 70%, rgba(0,85,254,.06), transparent 60%);
}
.hv-grid-lines {
position: absolute; inset: 0; opacity: .25;
background-image: linear-gradient(to bottom, var(--line) 1px, transparent 1px);
background-size: 100% 28px;
}
.hv-silhouette {
position: relative; margin: 0 auto; height: 100%; max-height: 420px; width: auto;
}
.hv-garment { animation: garmentBreath 4s var(--ease) infinite; transform-origin: center; }
@keyframes garmentBreath {
0%, 100% { transform: scaleY(1); }
50% { transform: scaleY(1.012); }
}
.hv-chip {
position: absolute; display: flex; align-items: center; gap: 10px;
background: rgba(255,255,255,.95); backdrop-filter: blur(12px);
border: 1px solid var(--line); border-radius: 14px;
padding: 10px 14px; box-shadow: 0 20px 40px -20px rgba(10,12,18,.2);
animation: chipFloat 5s var(--ease) infinite;
}
.hv-chip-1 { top: 12%; left: 6%; }
.hv-chip-2 { top: 50%; right: 5%; animation-delay: 1.5s; }
.hv-chip-3 { bottom: 14%; left: 10%; animation-delay: 3s; }
@keyframes chipFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
.hv-chip-dot {
width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
box-shadow: 0 0 0 3px rgba(0,85,254,.18);
}
.hv-chip-icon, .hv-chip-spark {
width: 28px; height: 28px; display: grid; place-items: center;
background: var(--accent-soft); border-radius: 8px; color: var(--accent);
}
.hv-chip-icon svg, .hv-chip-spark svg { width: 14px; height: 14px; }
.hv-chip-label { font-size: 10px; color: var(--ink-4); text-transform: uppercase; letter-spacing: .12em; }
.hv-chip-value { font-size: 13px; color: var(--ink); font-weight: 500; margin-top: 2px; }
.hv-sizes {
position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
display: flex; gap: 6px; background: #fff; border: 1px solid var(--line);
border-radius: 999px; padding: 4px;
}
.hv-sizes span {
width: 32px; height: 32px; border-radius: 999px; display: grid; place-items: center;
font-size: 12px; color: var(--ink-3); transition: all .25s var(--ease);
}
.hv-sizes span.active { background: var(--ink); color: #fff; }
.hv-panel {
padding: 28px 24px; border-left: 1px solid var(--line);
display: flex; flex-direction: column; gap: 18px;
background: #fff;
}
.hv-panel-title { font-family: var(--font-serif); font-size: 22px; line-height: 1.1; }
.hv-panel-price { font-size: 14px; color: var(--ink-3); }
.hv-panel-row { display: flex; flex-direction: column; gap: 12px; }
.hv-meter-label { font-size: 11px; color: var(--ink-4); text-transform: uppercase; letter-spacing: .12em; margin-bottom: 4px; }
.hv-meter-bar {
height: 4px; background: var(--bg-mute); border-radius: 99px; overflow: hidden;
}
.hv-meter-bar span {
display: block; height: 100%; width: var(--w); background: var(--accent);
border-radius: 99px;
animation: meterFill 1.6s var(--ease-out) .8s both;
transform-origin: left center;
}
@keyframes meterFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hv-panel-cta {
margin-top: auto; display: flex; align-items: center; justify-content: space-between;
padding: 12px 16px; background: var(--ink); color: #fff;
border-radius: 12px; font-size: 13px; font-weight: 500;
transition: background .25s var(--ease);
}
.hv-panel-cta:hover { background: var(--accent); }
.hv-panel-cta svg { width: 14px; height: 14px; }
.hv-float {
position: absolute; background: #fff; border: 1px solid var(--line);
border-radius: 14px; padding: 14px 18px;
box-shadow: 0 30px 60px -30px rgba(10,12,18,.3);
animation: chipFloat 6s var(--ease) infinite;
}
.hv-float-1 { top: -28px; right: 10%; animation-delay: .5s; }
.hv-float-2 { bottom: -28px; left: 8%; animation-delay: 2s; }
.hv-float-label { font-size: 11px; color: var(--ink-4); text-transform: uppercase; letter-spacing: .12em; }
.hv-float-value { font-family: var(--font-serif); font-size: 24px; color: var(--ink); margin-top: 4px; }
.hero-scroll {
position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
display: flex; flex-direction: column; align-items: center; gap: 10px;
font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
color: var(--ink-4);
white-space: nowrap; z-index: 9;
/* décoratif : ne doit JAMAIS intercepter les clics (il chevauche
les CTA du héros sur les fenêtres étroites) */
pointer-events: none;
}
/* fenêtres intermédiaires : les CTA s'élargissent et rejoignent l'indicateur —
on le glisse sous eux pour éviter tout chevauchement visuel */
@media (min-width: 900px) and (max-width: 1279px) {
.hero-scroll { bottom: -34px; }
}
.hero-scroll-line {
display: block; width: 1px; height: 56px; background: var(--ink-4);
position: relative; overflow: hidden;
}
.hero-scroll-line::after {
content: ''; position: absolute; inset: 0; background: var(--accent);
animation: scrollLine 2.4s var(--ease) infinite;
}
@keyframes scrollLine {
0% { transform: translateY(-100%); }
60%, 100% { transform: translateY(100%); }
}
/* ───────────────────────────────────────────────────────────────
BENEFITS (big numbers — Inter Tight, distinct from serif headlines)
─────────────────────────────────────────────────────────────── */
.benefits {
padding: clamp(50px, 6vw, 90px) 0 clamp(30px, 4vw, 60px);
/* No border, no gradient — flows continuously into the parcours below */
border: 0;
background: transparent;
overflow: visible;
position: relative;
z-index: 1;
}
.benefits-head { text-align: center; margin-bottom: 72px; }
.benefits-head .kicker { margin-bottom: 0; }
.benefits-quote {
display: block; max-width: 920px; margin: 0 auto;
font-family: var(--font-serif); font-style: italic; font-weight: 400;
font-size: clamp(22px, 2.4vw, 38px);
line-height: 1.35; letter-spacing: -0.015em;
color: var(--ink);
text-align: center;
}
.benefits-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 48px);
perspective: 1200px;
}
.benefit-block {
text-align: center; padding: 16px;
position: relative;
z-index: 10; /* foreground — sits ABOVE the section border line */
/* JS scrubbing controls transform / filter / opacity below — start hidden */
opacity: 0;
transform: translate3d(0, -300px, 0) scale(0.08);
filter: blur(30px);
will-change: transform, opacity, filter;
}
.benefit-num {
font-family: var(--font-sans);
font-weight: 600;
font-size: clamp(72px, 10vw, 148px);
letter-spacing: -0.045em;
line-height: 1;
color: var(--ink);
font-variant-numeric: tabular-nums;
display: inline-flex; align-items: flex-start;
}
.benefit-num em {
font-style: normal;
font-size: .4em;
font-weight: 500;
color: var(--accent);
margin-left: 4px;
margin-top: .25em;
}
.benefit-x { color: var(--accent); }
.benefit-label {
margin-top: 18px;
font-size: 14px; color: var(--ink-3);
text-transform: uppercase;
letter-spacing: .14em;
}
.benefit-line {
margin: 32px auto 0;
width: 40px; height: 2px;
background: var(--accent); border-radius: 99px;
transform: scaleX(0); transform-origin: center;
transition: transform 1s var(--ease-out) .4s;
}
.benefit-block.is-in .benefit-line { transform: scaleX(1); }
/* ───────────────────────────────────────────────────────────────
LOGO MARQUEE (kept for hero use)
─────────────────────────────────────────────────────────────── */
.logos {
padding: clamp(60px, 8vw, 100px) 0;
border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
overflow: hidden;
}
.logos-head { text-align: center; margin-bottom: 40px; }
.logos-head .kicker { margin-bottom: 0; }
.marquee {
position: relative;
mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track {
display: flex; gap: clamp(40px, 6vw, 80px); animation: marquee 40s linear infinite;
width: max-content; align-items: center;
}
@keyframes marquee { to { transform: translateX(-50%); } }
.logo-item {
font-family: var(--font-serif); font-size: clamp(28px, 3vw, 44px);
letter-spacing: -.01em; color: var(--ink-3); white-space: nowrap;
transition: color .25s var(--ease);
}
.logo-item:hover { color: var(--accent); }
.logo-italic { font-style: italic; }
/* ───────────────────────────────────────────────────────────────
PROBLEM
─────────────────────────────────────────────────────────────── */
.problem { padding: clamp(100px, 12vw, 180px) 0; }
.problem-grid {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
margin-top: 40px;
}
/* ─── ROAD BRIDGE — pont pointillé bleu qui traverse VISUELLEMENT
du milieu de l'icône (l'icône passe devant grâce au z-index)
jusqu'au bord haut de la 1re slide. ─── */
.road-bridge {
position: relative;
height: 80vh; /* hauteur du SVG (la courbe s'y déploie) */
overflow: visible;
color: var(--accent);
opacity: 0.7; /* pointillé à 70% comme demandé */
pointer-events: none;
/* margin-top : le JS le recalcule au runtime (fonction _alignBridge) pour
aligner PILE le haut du SVG sur le bas de l'icône, quel que soit le viewport.
Default à 0 = safe fallback (trait sous l'icône, sans chevauchement) si JS off.
margin-bottom -50vh : déborde dans la section suivante pour que le bas du path
coïncide avec le bord haut de la 1re slide. */
margin: 0 0 -50vh;
width: 100%;
max-width: none;
z-index: 0;
}
.parcours { position: relative; z-index: 1; }
.bridge-svg {
width: 100%;
height: 100%;
display: block;
overflow: visible; /* stroke arrondi ne se fait pas couper */
}
/* ─── PROBLEM ROAD — stack reveal : cards empilées qui glissent de derrière la 1re ─── */
.problem-road {
position: relative;
padding: 40px 0 60px;
overflow: hidden;
}
.road-scroll { position: relative; }
.road-track {
position: relative;
height: 100vh;
width: 100%;
}
.waypoint {
position: absolute;
top: 50%;
left: clamp(30px, 5vw, 80px);
transform: translateY(-50%);
width: clamp(320px, 28vw, 420px);
padding: 32px 28px 36px;
background: #fff;
border: 1px solid rgba(0, 85, 254, 0.10);
border-radius: 20px;
/* Élévation classique bleue : concentrée en bas, discrète, sans halo violet.
Une seule couche courte + un liseré, plus de superposition qui bave. */
box-shadow:
0 12px 24px -12px rgba(0, 85, 254, 0.35),
0 2px 4px -1px rgba(0, 85, 254, 0.08);
display: flex;
flex-direction: column;
gap: 18px;
will-change: transform;
}
/* Toutes les slides gardent la MÊME ombre bleue — pas de mélange avec du rouge/rose */
.waypoint-brand {
border-color: rgba(244, 63, 94, 0.14);
box-shadow:
0 12px 24px -12px rgba(0, 85, 254, 0.35),
0 2px 4px -1px rgba(0, 85, 254, 0.08);
}
/* Numéro : pill en haut du card (plus dans un cercle central) */
.waypoint-num {
position: static;
width: 46px;
height: 46px;
border-radius: 50%;
background: var(--accent);
color: #fff;
border: 0;
display: grid;
place-items: center;
font-family: var(--font-mono);
font-weight: 600;
font-size: 15px;
box-shadow: 0 6px 16px rgba(0, 85, 254, 0.30);
align-self: flex-start;
}
.waypoint-brand .waypoint-num {
background: #F43F5E;
color: #fff;
box-shadow: 0 6px 16px rgba(244, 63, 94, 0.32);
}
/* Contenu texte — reset des positions absolues, remis dans le flow */
.waypoint-content {
position: static;
top: auto; bottom: auto; left: auto; right: auto;
padding: 0;
background: transparent;
border: 0;
box-shadow: none;
text-align: left;
max-width: 100%;
}
.waypoint-under .waypoint-content,
.waypoint-over .waypoint-content { top: auto; bottom: auto; }
.waypoint-side {
display: block;
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-4);
margin-bottom: 12px;
}
.waypoint-brand .waypoint-side { color: rgba(244, 63, 94, 0.75); }
.waypoint-title {
font-family: var(--font-serif);
font-weight: 400;
font-size: clamp(20px, 1.9vw, 28px);
line-height: 1.12;
letter-spacing: -0.015em;
color: var(--ink);
margin-bottom: 10px;
}
.waypoint-title em { font-style: italic; color: var(--accent); }
.waypoint-brand .waypoint-title em { color: #F43F5E; }
.waypoint-body {
font-size: clamp(13.5px, 1vw, 15px);
color: var(--ink-3);
line-height: 1.55;
margin: 0;
}
/* ─── DERNIÈRE CASE : grandit + se centre, l'ancien texte part en fondu,
le nouveau (« Mais pour vous les marques… ») s'écrit en machine à écrire ─── */
.waypoint-final { will-change: transform; overflow: hidden; }
.waypoint-final .waypoint-old { will-change: opacity, filter, transform; }
.waypoint-final .waypoint-new {
position: absolute;
inset: 28px 18px 30px; /* un peu plus large pour le texte agrandi */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
opacity: 0;
pointer-events: none;
}
.tw-line {
margin: 0;
font-family: var(--font-serif);
font-weight: 400;
font-size: clamp(28px, 2.8vw, 38px);
line-height: 1.18;
letter-spacing: -0.015em;
color: var(--ink);
text-align: center;
}
.tw-b { color: #F43F5E; font-style: italic; } /* accent marque = rose (comme les slides marque) */
.tw-caret {
display: inline-block;
width: 2px;
height: 0.95em;
margin-left: 3px;
transform: translateY(0.12em);
background: #F43F5E;
opacity: 0;
}
.waypoint-final.is-typing .tw-caret {
opacity: 1;
animation: twBlink 0.9s steps(1) infinite;
}
@keyframes twBlink { 50% { opacity: 0; } }
@media (max-width: 900px) {
.waypoint { width: 82vw; }
}
/* ─── PROBLÈME MARQUES — bloc « paniers abandonnés » ─── */
.brand-problem {
position: relative;
padding: 0 0 clamp(60px, 8vw, 120px);
margin-top: calc(340px - 50vh); /* écart plus grand entre le titre finale et les blocs */
}
/* 2 blocs côte à côte (paniers abandonnés + taux de conversion) */
.brand-grid {
display: flex;
gap: 28px;
align-items: flex-start;
}
#convViz { height: 550px; } /* +2/3 de hauteur (330 → 550) */
/* colonne gauche : funnel + retours empilés */
.brand-col {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 28px;
}
.brand-col .brand-viz { flex: 0 0 auto; } /* hauteur propre, pas de grow */
#returnViz { height: 240px; } /* colonne gauche dépasse un peu le bloc conversion */
/* scène « retours » : personne + caddie qui traverse, puis coup de pied */
.rw-person circle,
.rw-person path,
.rw-arm { fill: var(--accent); }
.rw-cart path { stroke: var(--accent); }
.rw-cart circle { fill: var(--accent); }
.rw-box { transform-box: fill-box; transform-origin: center; }
.rw-keep { fill: #AEC2FF; } /* colis gardés */
.rw-ret { fill: #F43F5E; } /* colis retournés (~30%, jetés) */
.rw-person { transform-box: fill-box; transform-origin: 50% 0%; } /* pivot haut → le bas du corps balance (marche) */
/* MÊMES caractéristiques que les blocs .how-step
(fond blanc, padding 32, radius-lg, spotlight ::before + tilt au survol) */
.brand-viz {
position: relative;
overflow: hidden;
flex: 1;
min-width: 0;
height: 330px;
padding: 32px;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
background: #fff;
transition: transform .6s var(--ease-out), box-shadow .35s var(--ease), border-color .35s var(--ease);
--mx: 50%; --my: 50%;
display: flex;
}
/* spotlight qui suit la souris — identique à .how-step::before */
.brand-viz::before {
content: ''; position: absolute; inset: 0;
background: radial-gradient(500px circle at var(--mx) var(--my), rgba(0,85,254,.10), transparent 55%);
opacity: 0; transition: opacity .4s var(--ease);
pointer-events: none;
}
.brand-viz:hover { box-shadow: 0 40px 80px -40px rgba(10,12,18,.2); border-color: rgba(0,85,254,.25); }
.brand-viz:hover::before { opacity: 1; }
/* TUNNEL DE CONVERSION — barres décroissantes + pentes claires, avec le titre
« +80 % de paniers abandonnés » intégré. Les barres montent au scroll-in. */
.funnel-scene {
position: relative;
z-index: 1;
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.funnel-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.funnel-stat {
font-family: var(--font-serif);
color: #F43F5E; /* rose « problème marques » */
font-weight: 400;
font-size: clamp(30px, 3.2vw, 42px);
line-height: 1;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
}
.funnel-pct { font-size: 0.62em; }
.funnel-desc {
font-family: var(--font-sans);
color: var(--ink);
font-size: clamp(14px, 1.4vw, 18px);
}
.funnel-chart { flex: 1; width: 100%; min-height: 0; display: block; }
.funnel-bar { fill: var(--accent); }
.funnel-slope { fill: rgba(0, 85, 254, 0.20); }
.funnel-flow { fill: #5B7CFF; opacity: 0; } /* unités qui glissent le long des traits */
.funnel-stage {
fill: var(--ink-4);
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.03em;
}
/* TAUX DE CONVERSION — 100 personnes rouges (faibles) + 2 bleues (bien voyantes) */
.conv-stat { color: #F43F5E; } /* « 1-3 % » en rouge */
.conv-grid { }
.person-icon {
transform-box: fill-box;
transform-origin: center;
}
.person-red { fill: #F43F5E; opacity: 0.16; }
.person-blue {
fill: var(--accent);
opacity: 1;
filter: drop-shadow(0 0 3px rgba(0, 85, 254, 0.55));
}
@media (max-width: 900px) {
.brand-grid { flex-direction: column; }
}
/* ─── PARCOURS (intro) — grid centrée = icône + titre pile au milieu ─── */
.parcours { position: relative; }
.parcours-stage {
position: relative;
min-height: 62vh;
padding: 60px 0 20px;
display: grid;
grid-template-columns: 1fr; /* colonne unique PLEINE largeur (sinon la col
auto reste à gauche → icône + titre décalés) */
place-items: center; /* centre parfait vertical + horizontal */
overflow: visible;
}
/* icône et contenu occupent la MÊME cellule → superposition parfaite au centre */
.parcours-icon,
.parcours-content { grid-column: 1; grid-row: 1; }
.parcours-icon {
width: min(24vw, 340px); /* icône compacte + persos rapprochés */
aspect-ratio: 520 / 440; /* aligné sur le viewBox 0→440 pour que
les silhouettes latérales (rect y=200 h=240
→ bas à y=440) tiennent entièrement dedans */
color: var(--accent);
opacity: 0.55; /* discret pour que le texte reste lisible dessus */
z-index: 0;
pointer-events: none;
will-change: opacity;
}
.parcours-icon svg {
width: 100%; height: 100%;
fill: currentColor;
overflow: hidden; /* + de dépassement : le viewBox englobe tout */
}
.parcours-content {
z-index: 2;
padding: 0 var(--pad);
display: flex; justify-content: center;
}
.parcours-icon svg { width: 100%; height: 100%; fill: currentColor; }
/* chaque personne apparaît en opacité + scale (grandit depuis sa base) */
.parcours-person {
opacity: 0;
transform-box: fill-box; /* le transform-origin réfère au bounding box de la personne */
transform-origin: center bottom; /* grandit depuis les pieds vers le haut */
will-change: opacity, transform;
}
.parcours-title {
position: relative;
z-index: 2; /* passe DEVANT l'icône */
font-family: var(--font-serif);
font-weight: 400;
font-style: italic; /* reprend le style citation */
font-size: clamp(36px, 4.6vw, 68px); /* nettement + gros que la citation */
line-height: 1.15; letter-spacing: -0.015em;
color: var(--ink);
text-align: center;
max-width: 960px;
/* STATIQUE — pas d'animation, il est là dès qu'on scrolle jusqu'à la section */
/* petit texte-shadow blanc pour trancher net sur l'icône derrière */
text-shadow: 0 2px 32px rgba(255,255,255,.9), 0 0 12px rgba(255,255,255,.7);
}
.problem-subhead {
max-width: 780px; margin: clamp(48px, 6vw, 96px) 0 clamp(24px, 3vw, 40px);
display: flex; flex-direction: column; gap: 14px;
}
.problem-subhead-kicker {
display: inline-flex; align-items: center; gap: 10px;
align-self: flex-start;
font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em;
text-transform: uppercase; color: var(--ink-4);
padding: 6px 12px 6px 8px; border: 1px solid var(--line); border-radius: 99px;
background: rgba(255,255,255,.55); backdrop-filter: blur(6px);
}
.problem-subhead-title {
font-family: var(--font-serif); font-weight: 400;
font-size: clamp(28px, 3.4vw, 46px);
line-height: 1.02; letter-spacing: -.02em;
color: var(--ink);
max-width: 20em;
}
.problem-subhead-title em { font-style: italic; color: var(--accent); }
.problem-subhead-sub {
font-size: clamp(15px, 1.1vw, 18px); line-height: 1.55; color: var(--ink-3);
max-width: 620px;
}
/* ─── PROBLÈME — scroll horizontal pinné (client cards magazine) ─── */
.problem-scroll {
position: relative;
margin-top: clamp(40px, 5vw, 72px);
padding: 20px 0 40px;
overflow: hidden;
}
.problem-track {
display: flex;
align-items: stretch;
gap: clamp(18px, 2vw, 30px);
padding: 0 clamp(20px, 4vw, 72px);
will-change: transform;
}
.pcard {
flex: 0 0 clamp(400px, 42vw, 560px);
min-height: 62vh;
border-radius: var(--radius-lg);
padding: clamp(28px, 3vw, 44px);
display: flex; flex-direction: column;
gap: clamp(18px, 2vw, 26px);
position: relative; overflow: hidden;
--mx: 50%; --my: 50%;
transition: transform .5s var(--ease-out), box-shadow .35s var(--ease);
}
.pcard::after {
content: ''; position: absolute; inset: 0;
background: radial-gradient(500px circle at var(--mx) var(--my), rgba(0,85,254,.10), transparent 55%);
opacity: 0; transition: opacity .4s var(--ease);
pointer-events: none;
}
.pcard > * { position: relative; z-index: 1; }
.pcard:hover::after { opacity: 1; }
.pcard-client {
background: linear-gradient(180deg, #FBF9F4 0%, #F3EEE4 100%);
color: var(--ink);
border: 1px solid var(--line);
box-shadow: 0 30px 60px -34px rgba(120, 90, 40, .16);
}
.pcard-brand {
background: linear-gradient(180deg, #0F1218 0%, #0A0C12 100%);
color: #fff;
border: 1px solid rgba(255,255,255,.06);
box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .35);
}
.pcard-head {
display: flex; justify-content: space-between; align-items: center;
gap: 12px;
}
.pcard-side {
font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em;
text-transform: uppercase; color: var(--ink-4);
padding: 6px 12px 6px 8px; border: 1px solid var(--line); border-radius: 99px;
background: rgba(255,255,255,.55); backdrop-filter: blur(6px);
display: inline-flex; align-items: center; gap: 8px;
}
.pcard-brand .pcard-side {
color: rgba(255,255,255,.62); border-color: rgba(255,255,255,.12);
background: rgba(255,255,255,.04);
}
.pcard-idx {
font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em;
color: var(--ink-4);
}
.pcard-brand .pcard-idx { color: rgba(255,255,255,.35); }
.pcard-big {
font-family: var(--font-serif); font-style: italic; font-weight: 400;
font-size: clamp(120px, 15vw, 220px);
line-height: 0.85; letter-spacing: -.03em;
color: transparent;
-webkit-text-stroke: 1px rgba(10,12,18,.10);
position: absolute; top: 15%; right: -0.05em; z-index: 0;
pointer-events: none;
user-select: none;
}
.pcard-brand .pcard-big { -webkit-text-stroke: 1px rgba(255,255,255,.12); }
.pcard-title {
font-family: var(--font-serif); font-weight: 400;
font-size: clamp(30px, 3.2vw, 46px);
line-height: 1.02; letter-spacing: -.02em;
max-width: 12em;
margin-top: auto;
}
.pcard-title em { font-style: italic; color: var(--accent); }
.pcard-brand .pcard-title { color: #fff; }
.pcard-brand .pcard-title em { color: #F87171; }
.pcard-body {
font-size: clamp(14.5px, 1.05vw, 17px);
line-height: 1.55;
color: var(--ink-3);
max-width: 28em;
}
.pcard-brand .pcard-body { color: rgba(255,255,255,.68); }
/* keep the .tag-dot rule from before */
@media (max-width: 900px) {
.problem-scroll { overflow-x: auto; scroll-snap-type: x mandatory; }
.pcard { flex: 0 0 85vw; scroll-snap-align: center; min-height: 500px; }
}
/* ─── BRAND LEDGER — dashboard P&L financier ─── */
.brand-ledger {
margin-top: clamp(24px, 3vw, 40px);
background: linear-gradient(180deg, #0F1218 0%, #0A0C12 100%);
color: #fff;
border: 1px solid rgba(255,255,255,.08);
border-radius: var(--radius-lg);
padding: clamp(28px, 3vw, 44px);
overflow: hidden;
position: relative;
box-shadow: 0 40px 90px -50px rgba(0, 0, 0, .5);
}
.brand-ledger::before {
content: ''; position: absolute; inset: 0;
background:
radial-gradient(600px circle at 90% -10%, rgba(248, 113, 113, .10), transparent 55%),
radial-gradient(500px circle at 10% 110%, rgba(0, 85, 254, .06), transparent 55%);
pointer-events: none;
}
.brand-ledger > * { position: relative; z-index: 1; }
.ledger-headrow {
display: flex; justify-content: space-between; align-items: center;
padding-bottom: 20px;
border-bottom: 1px solid rgba(255,255,255,.08);
}
.ledger-header-label {
font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em;
text-transform: uppercase; color: rgba(255,255,255,.5);
}
.ledger-header-tag {
font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em;
text-transform: uppercase; color: rgba(255,255,255,.35);
padding: 4px 10px; border: 1px solid rgba(255,255,255,.12); border-radius: 99px;
}
.ledger-row {
display: grid; grid-template-columns: 44px 1fr 220px;
gap: clamp(20px, 2vw, 32px);
padding: clamp(20px, 2.4vw, 30px) 0;
border-bottom: 1px solid rgba(255,255,255,.06);
align-items: baseline;
opacity: 0; transform: translateY(20px);
transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.ledger-row.is-in { opacity: 1; transform: translateY(0); }
.ledger-idx {
font-family: var(--font-mono); font-size: 12px; font-weight: 500;
letter-spacing: .1em; color: #93C5FD;
}
.ledger-title {
font-family: var(--font-serif); font-weight: 400;
font-size: clamp(20px, 2vw, 28px);
line-height: 1.15; letter-spacing: -.01em;
color: #fff;
margin-bottom: 8px;
}
.ledger-title em { font-style: italic; color: #F87171; }
.ledger-desc {
font-size: clamp(13.5px, 1vw, 15px); line-height: 1.55;
color: rgba(255,255,255,.6);
max-width: 44em;
}
.ledger-cost {
text-align: right;
display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
}
.cost-amount {
font-family: var(--font-sans); font-weight: 600;
font-size: clamp(28px, 2.6vw, 40px);
letter-spacing: -.03em; line-height: 1;
color: #F87171;
font-variant-numeric: tabular-nums;
}
.cost-unit {
font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em;
text-transform: uppercase; color: rgba(255,255,255,.4);
}
.ledger-bar {
width: 100%; max-width: 180px; height: 3px;
background: rgba(255,255,255,.08); border-radius: 99px;
overflow: hidden; margin-top: 6px;
}
.ledger-bar span {
display: block; height: 100%;
background: linear-gradient(90deg, #F87171 0%, #F87171 70%, rgba(248,113,113,.4) 100%);
width: 0; border-radius: 99px;
transition: width 1.4s var(--ease-out);
}
.ledger-row.is-in .ledger-bar span { width: var(--w); }
.ledger-total {
display: flex; justify-content: space-between; align-items: flex-end;
gap: 24px;
padding: clamp(28px, 3vw, 44px) 0 8px;
margin-top: 12px;
border-top: 2px solid rgba(255,255,255,.15);
}
.ledger-total-label { display: flex; flex-direction: column; gap: 6px; }
.lt-eyebrow {
font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em;
text-transform: uppercase; color: rgba(255,255,255,.7);
}
.lt-sub {
font-family: var(--font-serif); font-style: italic;
font-size: clamp(15px, 1.1vw, 18px);
color: rgba(255,255,255,.4);
}
.ledger-total-amount {
font-family: var(--font-sans); font-weight: 700;
font-size: clamp(56px, 6.5vw, 96px);
letter-spacing: -.035em; line-height: 0.85;
color: #fff;
font-variant-numeric: tabular-nums;
display: inline-flex; align-items: baseline;
}
.ledger-total-amount em {
font-style: normal; font-weight: 500;
color: #F87171; margin-left: .18em;
font-size: 0.7em;
}
@media (max-width: 900px) {
.ledger-row { grid-template-columns: 32px 1fr; gap: 14px; }
.ledger-cost { grid-column: 2; text-align: left; align-items: flex-start; }
.ledger-headrow { flex-direction: column; align-items: flex-start; gap: 8px; }
.ledger-total { flex-direction: column; align-items: flex-start; }
}
/* ─── ancien .problem-duo (conservé pour ne rien casser) ─── */
.problem-duo {
display: grid;
grid-template-columns: 1fr clamp(90px, 10vw, 150px) 1fr;
align-items: stretch;
gap: 0;
margin-top: 64px;
}
.problem-block {
border-radius: var(--radius-lg);
padding: clamp(30px, 3.6vw, 52px);
display: flex; flex-direction: column;
gap: clamp(22px, 2.6vw, 34px);
position: relative; overflow: hidden;
transition: transform .5s var(--ease-out), box-shadow .35s var(--ease);
--mx: 50%; --my: 50%;
}
.problem-block::before {
content: ''; position: absolute; inset: 0;
background: radial-gradient(500px circle at var(--mx) var(--my), rgba(0,85,254,.10), transparent 55%);
opacity: 0; transition: opacity .4s var(--ease);
pointer-events: none; z-index: 0;
}
.problem-block > * { position: relative; z-index: 1; }
.problem-block:hover::before { opacity: 1; }
.problem-block-client {
background: linear-gradient(180deg, #FBF9F4 0%, #F3EEE4 100%);
color: var(--ink);
border: 1px solid var(--line);
box-shadow: 0 30px 60px -34px rgba(120, 90, 40, .18);
}
.problem-block-brand {
background: linear-gradient(180deg, #0F1218 0%, #0A0C12 100%);
color: #fff;
border: 1px solid rgba(255,255,255,.06);
box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .35);
}
/* header of each block */
.problem-block-head { display: flex; flex-direction: column; gap: 14px; }
.problem-block-tag {
font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em;
text-transform: uppercase; color: var(--ink-4);
padding: 6px 12px 6px 8px; border: 1px solid var(--line);
border-radius: 99px;
align-self: flex-start;
background: rgba(255,255,255,.6); backdrop-filter: blur(6px);
display: inline-flex; align-items: center; gap: 8px;
}
.tag-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.problem-block-brand .problem-block-tag {
color: rgba(255,255,255,.62);
border-color: rgba(255,255,255,.12);
background: rgba(255,255,255,.04);
}
.problem-block-brand .tag-dot {
background: #E11D48; /* accent rouge/rose côté marque */
box-shadow: 0 0 8px rgba(225, 29, 72, .5);
}
.problem-block-eyebrow {
font-family: var(--font-serif); font-style: italic;
font-size: 15px; color: var(--ink-4);
letter-spacing: -.005em;
}
.problem-block-brand .problem-block-eyebrow { color: rgba(255,255,255,.4); }
.problem-block-title {
font-family: var(--font-serif); font-weight: 400;
font-size: clamp(28px, 3.2vw, 48px);
line-height: 1.02; letter-spacing: -.02em;
max-width: 14em;
}
.problem-block-title em { font-style: italic; color: var(--accent); }
.problem-block-brand .problem-block-title em { color: #F87171; }
/* list */
.problem-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.problem-list li {
display: grid; grid-template-columns: 36px 1fr; gap: 14px;
align-items: baseline;
font-size: 15px; line-height: 1.55;
color: var(--ink-3);
padding: 14px 0;
border-top: 1px solid var(--line);
}
.problem-list li:last-child { border-bottom: 1px solid var(--line); }
.problem-block-brand .problem-list li {
color: rgba(255,255,255,.6);
border-top-color: rgba(255,255,255,.06);
}
.problem-block-brand .problem-list li:last-child { border-bottom-color: rgba(255,255,255,.06); }
.prob-i {
font-family: var(--font-mono); font-size: 11px; font-weight: 500;
letter-spacing: .1em; color: var(--accent);
}
.problem-block-brand .prob-i { color: #93C5FD; }
.prob-t { display: block; }
/* footer stat */
.problem-block-foot {
display: flex; align-items: flex-end; gap: 18px;
margin-top: auto;
padding-top: 10px;
}
.problem-block-foot .stat-num {
font-family: var(--font-sans); font-weight: 600;
font-size: clamp(58px, 7vw, 110px);
letter-spacing: -.035em; line-height: 0.85;
color: var(--ink);
font-variant-numeric: tabular-nums;
display: inline-flex; align-items: baseline;
}
.problem-block-brand .problem-block-foot .stat-num { color: #fff; }
.problem-block-foot .stat-num em {
font-style: normal; font-size: 0.36em; font-weight: 500;
color: var(--accent); margin-left: 4px;
}
.problem-block-brand .problem-block-foot .stat-num em { color: #F87171; }
.problem-block-foot .stat-label {
font-size: 13px; color: var(--ink-4);
max-width: 210px; line-height: 1.45;
padding-bottom: 8px;
}
.problem-block-foot .stat-label span {
display: block; margin-top: 4px; font-size: 10px;
color: var(--ink-4); opacity: .75; letter-spacing: .04em;
font-family: var(--font-mono);
}
.problem-block-brand .problem-block-foot .stat-label { color: rgba(255,255,255,.48); }
.problem-block-brand .problem-block-foot .stat-label span { color: rgba(255,255,255,.32); }
/* ── LE PONT AU MILIEU ── */
.problem-bridge {
position: relative;
display: flex; align-items: center; justify-content: center;
color: var(--ink-4);
}
.pb-lines {
position: absolute; inset: 0;
width: 100%; height: 100%;
pointer-events: none;
}
.pb-badge {
position: relative; z-index: 2;
display: flex; flex-direction: column; align-items: center;
gap: 8px;
padding: 18px 20px 16px;
background: #fff;
border: 1px solid var(--line);
border-radius: 22px;
box-shadow: 0 20px 50px -20px rgba(10,12,18,.18),
0 4px 12px -4px rgba(0, 85, 254, .10);
min-width: 130px;
text-align: center;
}
.pb-badge-eyebrow {
font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em;
text-transform: uppercase; color: var(--accent);
}
.pb-badge-title {
font-family: var(--font-serif); font-weight: 400; font-style: italic;
font-size: 15px; line-height: 1.15;
color: var(--ink); letter-spacing: -.005em;
}
.pb-badge-icon {
width: 26px; height: 26px;
display: grid; place-items: center;
border-radius: 50%;
background: rgba(0,85,254,.09);
color: var(--accent);
margin-top: 2px;
}
.pb-badge-icon svg { width: 14px; height: 14px; }
/* subtle pulse on the badge to hint the link is live */
.pb-badge::before {
content: ''; position: absolute; inset: -4px;
border-radius: 26px; border: 1px solid rgba(0,85,254,.25);
opacity: 0;
animation: bridgePulse 3s var(--ease) infinite;
}
@keyframes bridgePulse {
0% { opacity: 0; transform: scale(.9); }
40% { opacity: .6; }
100% { opacity: 0; transform: scale(1.15); }
}
@media (max-width: 900px) {
.problem-duo { grid-template-columns: 1fr; gap: 20px; }
.problem-bridge { height: 100px; }
.pb-lines { transform: rotate(90deg); }
}
.problem-card {
position: relative; overflow: hidden;
padding: 28px; border: 1px solid var(--line); border-radius: var(--radius);
background: var(--bg-soft);
transition: transform .5s var(--ease-out), background .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
--mx: 50%; --my: 50%;
}
.problem-card::before {
content: ''; position: absolute; inset: 0;
background: radial-gradient(420px circle at var(--mx) var(--my), rgba(0,85,254,.10), transparent 55%);
opacity: 0; transition: opacity .4s var(--ease);
pointer-events: none;
}
.problem-card:hover { background: #fff; transform: translateY(-4px); border-color: rgba(0,85,254,.25); box-shadow: 0 30px 60px -30px rgba(10,12,18,.15); }
.problem-card:hover::before { opacity: 1; }
.problem-card .problem-num { transition: transform .5s var(--ease-out), color .3s ease; }
.problem-card:hover .problem-num { transform: translateY(-2px); }
.problem-card.is-in .problem-bar span { animation: barShimmer 2.4s ease-in-out 1.4s infinite; }
@keyframes barShimmer {
0%, 100% { box-shadow: 0 0 0 rgba(0,85,254,0); }
50% { box-shadow: 0 0 14px rgba(0,85,254,.4); }
}
.problem-num {
font-family: var(--font-serif); font-size: clamp(32px, 3vw, 44px);
line-height: 1; letter-spacing: -.02em; color: var(--accent);
}
.problem-label { font-size: 14px; color: var(--ink-3); margin: 14px 0 24px; line-height: 1.45; }
.problem-bar { height: 3px; background: var(--bg-mute); border-radius: 99px; overflow: hidden; }
.problem-bar span {
display: block; height: 100%; background: var(--ink); border-radius: 99px;
width: 0; transition: width 1.4s var(--ease-out);
}
.problem-card.is-in .problem-bar span { width: var(--w); }
/* ───────────────────────────────────────────────────────────────
HOW
─────────────────────────────────────────────────────────────── */
.how {
padding: clamp(100px, 12vw, 180px) 0;
background: linear-gradient(180deg, #fff 0%, var(--bg-soft) 100%);
}
.how-inner {
display: grid; grid-template-columns: 360px 1fr; gap: clamp(40px, 6vw, 100px);
max-width: var(--max); margin: 0 auto; padding: 0 var(--pad);
align-items: start;
}
.how-left { position: sticky; top: 140px; }
.how-left .section-title { font-size: clamp(36px, 4vw, 64px); }
.how-steps { display: flex; flex-direction: column; gap: 24px; position: relative; }
/* Vertical timeline that draws in as you scroll through the steps */
.how-timeline {
position: absolute;
left: 60px; top: 32px; bottom: 32px;
width: 2px;
background: var(--line);
border-radius: 2px;
overflow: hidden;
pointer-events: none;
}
.how-timeline-fill {
position: absolute; top: 0; left: 0; right: 0; height: 0;
background: linear-gradient(180deg, var(--accent) 0%, var(--accent) 70%, rgba(0,85,254,.2) 100%);
border-radius: 2px;
}
.how-step {
position: relative; overflow: hidden;
display: grid; grid-template-columns: 80px 1fr; gap: 24px;
padding: 32px; border: 1px solid var(--line); border-radius: var(--radius-lg);
background: #fff;
transition: transform .6s var(--ease-out), box-shadow .35s var(--ease), border-color .35s var(--ease);
--mx: 50%; --my: 50%;
}
.how-step::before {
content: ''; position: absolute; inset: 0;
background: radial-gradient(500px circle at var(--mx) var(--my), rgba(0,85,254,.10), transparent 55%);
opacity: 0; transition: opacity .4s var(--ease);
pointer-events: none;
}
.how-step > * { position: relative; z-index: 1; }
.how-step:hover { box-shadow: 0 40px 80px -40px rgba(10,12,18,.2); border-color: rgba(0,85,254,.25); }
.how-step:hover::before { opacity: 1; }
/* step number pulses when its row enters the viewport */
.how-step .how-step-num { transition: transform .6s var(--ease-out), color .4s ease; }
.how-step.is-active .how-step-num { transform: scale(1.08); }
.how-step-num {
font-family: var(--font-serif); font-size: 56px; line-height: 1; letter-spacing: -.02em;
color: var(--accent); font-style: italic;
}
.how-step-body h3 {
font-family: var(--font-serif); font-size: clamp(24px, 2.4vw, 34px); font-weight: 400;
letter-spacing: -.01em; margin-bottom: 12px; line-height: 1.15;
}
.how-step-body p { color: var(--ink-3); font-size: 15px; line-height: 1.55; max-width: 520px; }
.how-code {
margin-top: 20px; padding: 20px; background: var(--ink); color: #DDE3EE;
border-radius: 12px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.7;
overflow: auto;
}
.c-com { color: #6B7280; }
.c-key { color: #C792EA; }
.c-var { color: #82AAFF; }
.c-str { color: #C3E88D; }
.c-fn { color: #FFCB6B; }
.how-scan {
position: relative; margin-top: 20px; height: 220px;
background: var(--bg-soft); border: 1px solid var(--line); border-radius: 12px;
overflow: hidden;
}
.how-scan-line {
position: absolute; left: 0; right: 0; height: 2px; top: 0;
background: linear-gradient(to right, transparent, var(--accent), transparent);
animation: scanLine 2.4s var(--ease) infinite;
}
@keyframes scanLine {
0% { top: 0; opacity: 1; }
100% { top: 100%; opacity: 0.4; }
}
.how-scan-points { position: absolute; inset: 0; }
.how-scan-points span {
position: absolute; left: var(--x); top: var(--y);
width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
box-shadow: 0 0 0 4px rgba(0,85,254,.18);
animation: pointPulse 2.4s var(--ease) infinite;
}
.how-scan-points span:nth-child(2) { animation-delay: .2s; }
.how-scan-points span:nth-child(3) { animation-delay: .4s; }
.how-scan-points span:nth-child(4) { animation-delay: .6s; }
.how-scan-points span:nth-child(5) { animation-delay: .8s; }
.how-scan-points span:nth-child(6) { animation-delay: 1s; }
.how-scan-points span:nth-child(7) { animation-delay: 1.2s; }
.how-scan-points span:nth-child(8) { animation-delay: 1.4s; }
@keyframes pointPulse {
0%, 100% { opacity: .4; transform: scale(.7); }
50% { opacity: 1; transform: scale(1.1); }
}
.how-scan-label {
position: absolute; bottom: 12px; right: 14px;
font-family: var(--font-mono); font-size: 11px; color: var(--ink-4);
letter-spacing: .12em; text-transform: uppercase;
}
.how-results { margin-top: 20px; }
.how-result-row {
display: flex; justify-content: space-between; align-items: center;
padding: 14px 0; border-bottom: 1px dashed var(--line);
font-size: 14px;
}
.how-result-row span { color: var(--ink-3); }
.how-result-row strong { color: var(--ink); font-weight: 500; }
.how-result-row strong.accent { color: var(--accent); }
/* ───────────────────────────────────────────────────────────────
FEATURES BENTO
─────────────────────────────────────────────────────────────── */
.features { padding: clamp(100px, 12vw, 180px) 0; }
.bento {
display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px;
grid-auto-rows: minmax(220px, auto);
}
.bento-card {
position: relative; padding: 28px; border: 1px solid var(--line);
border-radius: var(--radius-lg); background: #fff;
display: flex; flex-direction: column; gap: 14px; overflow: hidden;
transition: transform .6s var(--ease-out), box-shadow .35s var(--ease), border-color .35s var(--ease);
--mx: 50%; --my: 50%;
}
.bento-card::before {
content: ''; position: absolute; inset: 0;
background: radial-gradient(500px circle at var(--mx) var(--my), rgba(0,85,254,.12), transparent 55%);
opacity: 0; transition: opacity .4s var(--ease);
pointer-events: none; z-index: 0;
}
.bento-card > * { position: relative; z-index: 1; }
.bento-card:hover {
transform: translateY(-4px);
box-shadow: 0 40px 80px -40px rgba(0,85,254,.25);
border-color: rgba(0,85,254,.3);
}
.bento-card:hover::before { opacity: 1; }
/* gradient sweep on the title */
.bento-card h3 {
background-image: linear-gradient(100deg, var(--ink) 0%, var(--ink) 45%, var(--accent) 55%, var(--ink) 65%, var(--ink) 100%);
background-size: 250% 100%;
background-position: 100% 0;
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
transition: background-position 1.4s var(--ease-out);
}
.bento-card:hover h3 { background-position: 0% 0; }
.bento-card { grid-column: span 2; }
.bento-lg { grid-column: span 3; grid-row: span 2; }
.bento-wide { grid-column: span 4; }
.bento-tag {
display: inline-block; align-self: flex-start;
font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em;
text-transform: uppercase; color: var(--accent);
padding: 4px 10px; border: 1px solid var(--accent-soft); border-radius: 99px;
background: var(--accent-soft);
}
.bento-card h3 {
font-family: var(--font-serif); font-weight: 400; letter-spacing: -.01em;
font-size: clamp(20px, 1.8vw, 28px); line-height: 1.15;
}
.bento-lg h3 { font-size: clamp(28px, 2.4vw, 40px); }
.bento-card p { color: var(--ink-3); font-size: 14px; line-height: 1.55; }
.bento-visual { margin-top: auto; position: relative; min-height: 120px; }
/* engine */
.bento-visual-engine { min-height: 240px; display: grid; place-items: center; }
.engine-orb {
width: 100px; height: 100px; border-radius: 50%;
background: radial-gradient(circle at 30% 30%, #fff, var(--accent));
box-shadow: 0 0 80px rgba(0,85,254,.4);
animation: orbBreath 4s var(--ease) infinite;
}
@keyframes orbBreath { 0%,100%{ transform: scale(1);} 50%{ transform: scale(1.06);} }
.engine-ring {
position: absolute; border-radius: 50%; border: 1px solid var(--line-soft);
top: 50%; left: 50%; transform: translate(-50%,-50%);
}
.engine-ring.r1 { width: 150px; height: 150px; }
.engine-ring.r2 { width: 200px; height: 200px; }
.engine-ring.r3 { width: 260px; height: 260px; }
.engine-pulse {
position: absolute; top: 50%; left: 50%;
width: 100px; height: 100px; border-radius: 50%; border: 1px solid var(--accent);
transform: translate(-50%,-50%);
animation: enginePulse 2.4s var(--ease) infinite;
}
@keyframes enginePulse {
0% { width: 100px; height: 100px; opacity: .8; }
100% { width: 280px; height: 280px; opacity: 0; }
}
/* gauge */
.bento-visual-meter { display: flex; flex-direction: column; align-items: center; }
.gauge { width: 160px; }
.bento-card.is-in .gauge-fill { stroke-dashoffset: 4; transition: stroke-dashoffset 2s var(--ease-out); }
.gauge-value {
font-family: var(--font-serif); font-size: 36px; color: var(--ink);
margin-top: -28px; letter-spacing: -.02em;
}
.gauge-value small { font-family: var(--font-sans); font-size: 14px; color: var(--ink-3); margin-left: 2px; }
/* shield */
.bento-visual-shield { display: flex; align-items: center; gap: 20px; }
.shield-svg { width: 64px; color: var(--accent); }
.shield-list { list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--ink-3); }
.shield-list li::before { content: '·'; margin-right: 6px; color: var(--accent); }
/* chart */
.bento-visual-chart { display: flex; flex-direction: column; gap: 18px; min-height: 200px; }
.chart-bars {
display: flex; align-items: flex-end; gap: 4px; height: 120px;
padding: 8px; background: var(--bg-soft); border-radius: 8px;
}
.chart-bars span {
flex: 1; background: linear-gradient(to top, var(--accent), rgba(0,85,254,.4));
border-radius: 2px 2px 0 0; height: 0;
transition: height 1.4s var(--ease-out);
}
.bento-card.is-in .chart-bars span { height: var(--h); }
.chart-bars span:nth-child(1) { transition-delay: .05s; }
.chart-bars span:nth-child(2) { transition-delay: .1s; }
.chart-bars span:nth-child(3) { transition-delay: .15s; }
.chart-bars span:nth-child(4) { transition-delay: .2s; }
.chart-bars span:nth-child(5) { transition-delay: .25s; }
.chart-bars span:nth-child(6) { transition-delay: .3s; }
.chart-bars span:nth-child(7) { transition-delay: .35s; }
.chart-bars span:nth-child(8) { transition-delay: .4s; }
.chart-bars span:nth-child(9) { transition-delay: .45s; }
.chart-bars span:nth-child(10) { transition-delay: .5s; }
.chart-bars span:nth-child(11) { transition-delay: .55s; }
.chart-bars span:nth-child(12) { transition-delay: .6s; }
.chart-meta { display: flex; justify-content: space-between; gap: 12px; }
.chart-meta > div { display: flex; flex-direction: column; gap: 4px; }
.chart-meta span { font-size: 11px; color: var(--ink-4); text-transform: uppercase; letter-spacing: .12em; }
.chart-meta strong { font-family: var(--font-serif); font-size: 22px; color: var(--ink); font-weight: 400; letter-spacing: -.01em; }
/* stack */
.bento-visual-stack { display: flex; flex-wrap: wrap; gap: 8px; }
.bento-visual-stack span {
padding: 8px 14px; background: var(--bg-soft); border: 1px solid var(--line);
border-radius: 99px; font-size: 12px; color: var(--ink-3);
transition: all .25s var(--ease);
}
.bento-visual-stack span:hover { background: var(--accent); color: #fff; border-color: var(--accent); transform: translateY(-2px); }
/* ───────────────────────────────────────────────────────────────
SHOWCASE STRIP
─────────────────────────────────────────────────────────────── */
.showcase { padding: clamp(80px, 10vw, 140px) 0; overflow: hidden; }
.showcase-strip {
position: relative; margin-top: 60px;
mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.showcase-track {
display: flex; gap: 24px; animation: marquee 60s linear infinite;
width: max-content;
}
.show-card {
position: relative; width: 320px; height: 440px;
border-radius: var(--radius-lg); overflow: hidden;
flex-shrink: 0;
transition: transform .5s var(--ease-out);
}
.show-card:hover { transform: translateY(-8px) scale(1.02); }
.show-card-bg { position: absolute; inset: 0; }
.show-card-tag {
position: absolute; top: 18px; left: 18px;
font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
color: var(--ink); border: 1px solid rgba(10,12,18,.15);
padding: 4px 10px; border-radius: 99px; background: rgba(255,255,255,.6); backdrop-filter: blur(6px);
}
.show-card-title {
position: absolute; bottom: 18px; left: 18px; right: 18px;
font-family: var(--font-serif); font-size: 22px; color: var(--ink); letter-spacing: -.01em;
}
/* duplicate the strip via JS-less trick: we double-render in HTML if needed. For now, slow speed. */
/* ───────────────────────────────────────────────────────────────
LA SOLUTION — carrousels futuristes (bordure dégradée + visuels animés)
─────────────────────────────────────────────────────────────── */
.solution {
position: relative;
padding: clamp(90px, 11vw, 160px) 0 clamp(70px, 9vw, 130px);
/* overflow VISIBLE : rien ne coupe le halo bleu (haut/bas). Le scroll horizontal est déjà
empêché par html/body { overflow-x: hidden }, donc pas besoin de clipper ici. */
overflow: visible;
background: linear-gradient(180deg, #fff, #F6F9FF 55%, #fff);
}
.sol-bg {
position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(60% 45% at 50% 0%, rgba(0,85,254,.09), transparent 72%),
linear-gradient(rgba(0,85,254,.045) 1px, transparent 1px) 0 0 / 42px 42px,
linear-gradient(90deg, rgba(0,85,254,.045) 1px, transparent 1px) 0 0 / 42px 42px;
-webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
animation: solGrid 22s linear infinite;
}
@keyframes solGrid { to { background-position: 0 0, 42px 42px, 42px 42px; } }
/* une seule ligne : les cartes tournent au scroll (JS), immobiles sinon */
.sol-viewport {
position: relative; margin-top: clamp(48px, 6vw, 78px);
overflow: visible; perspective: 1500px;
/* fondu latéral plus avancé vers le centre (côtés plus cachés) ; masque haut + no-repeat
pour clipper l'horizontal SANS couper le halo bleu qui déborde verticalement */
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 16%, #000 70%, transparent 94%);
mask-image: linear-gradient(to right, transparent 0, #000 16%, #000 70%, transparent 94%);
/* repeat-y = fondu horizontal, mais infini verticalement → le halo n'est JAMAIS coupé en haut/bas */
-webkit-mask-repeat: repeat-y; mask-repeat: repeat-y;
-webkit-mask-size: 100% 100%; mask-size: 100% 100%;
}
.sol-rail {
display: flex; gap: clamp(22px, 2.6vw, 40px); width: max-content;
padding: 26px clamp(20px, 4vw, 72px);
transform-style: preserve-3d; will-change: transform;
}
a.sol-card { text-decoration: none; color: inherit; display: block; }
.sol-card { position: relative; flex-shrink: 0; width: clamp(300px, 32vw, 460px); height: clamp(420px, 46vw, 600px); border-radius: 26px; }
/* toutes les cartes de même taille → zones image identiques → titres alignés */
/* plus de bordure dégradée ni de contour : les cartes se fondent dans un halo bleu */
.sol-card::before { display: none; }
.sol-inner {
position: relative; height: 100%;
display: flex; flex-direction: column;
border-radius: 22px; overflow: hidden;
background: rgba(255,255,255,.86); backdrop-filter: blur(8px);
border: 0;
/* aucune ombre derrière les cartes */
box-shadow: none;
transition: box-shadow .4s var(--ease), transform .5s var(--ease-out);
}
.sol-card:hover .sol-inner { box-shadow: none; transform: translateY(-6px); }
/* badge "cliquable" (lien externe) — coin haut-droit, bleu ; se remplit au survol */
.sol-open {
position: absolute; top: 14px; right: 14px; z-index: 4;
width: 36px; height: 36px; border-radius: 12px;
display: grid; place-items: center;
color: #0055FE;
background: rgba(255,255,255,.92); backdrop-filter: blur(6px);
box-shadow: 0 8px 20px -8px rgba(0,85,254,.45), 0 1px 2px rgba(10,12,18,.08);
pointer-events: none;
transition: transform .3s var(--ease-out), background .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
}
.sol-open svg { width: 18px; height: 18px; display: block; }
.sol-card:hover .sol-open {
transform: translateY(-2px) scale(1.08);
background: #0055FE; color: #fff;
box-shadow: 0 12px 26px -8px rgba(0,85,254,.6);
}
/* zone image : ratio fixe = celui des images (463×368) → remplissage parfait, identique sur toutes les cartes */
.sol-viz { position: relative; flex: none; width: 100%; aspect-ratio: 463 / 368; margin: 0; border-radius: 0; overflow: hidden;
background: linear-gradient(160deg, #EEF3FF, #E1E9FF);
background-size: cover; background-position: center; background-repeat: no-repeat; }
.sol-viz::before, .sol-viz::after { content: ''; position: absolute; }
/* badge "Bientôt" posé sur l'image floutée (carte OptiMove) */
.sol-soon-badge { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; pointer-events: none; }
.sol-soon-badge i {
font-family: var(--font-serif); font-style: italic; font-weight: 400;
font-size: clamp(26px, 2.8vw, 36px); letter-spacing: -.01em; color: var(--accent);
background: rgba(255,255,255,.72); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
padding: 12px 30px 15px; border-radius: 99px;
box-shadow: 0 22px 46px -20px rgba(0,85,254,.5), inset 0 0 0 1px rgba(255,255,255,.85);
animation: soonBreathe 3.2s ease-in-out infinite;
}
@keyframes soonBreathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.sol-meta { flex: 1; padding: clamp(16px,1.6vw,22px) clamp(18px,2vw,26px) clamp(20px,2.2vw,28px); }
.sol-tag {
display: inline-block; font-family: var(--font-mono); font-size: 10px;
letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
border: 1px solid rgba(0,85,254,.2); background: rgba(0,85,254,.06);
padding: 3px 9px; border-radius: 99px; margin-bottom: 8px;
}
.sol-name { font-family: var(--font-serif); font-weight: 400; font-size: clamp(24px, 2.4vw, 33px);
line-height: 1.1; letter-spacing: -.01em; color: var(--ink); }
.sol-desc { margin-top: 10px; font-family: var(--font-sans); font-size: clamp(13px, 1vw, 15px);
line-height: 1.5; color: var(--ink-3); max-width: 34ch; }
/* ── visuels animés ── */
/* orbe pulsée */
.sv-orb::before { width: 56px; height: 56px; border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%,-50%);
background: radial-gradient(circle at 38% 32%, #9CBBFF, #0055FE 72%); box-shadow: 0 8px 22px rgba(0,85,254,.4);
animation: svPulse 2.6s var(--ease) infinite; }
.sv-orb::after { width: 116px; height: 116px; border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%,-50%);
border: 1px solid rgba(0,85,254,.35); animation: svHalo 2.6s var(--ease) infinite; }
@keyframes svPulse { 0%,100%{ transform: translate(-50%,-50%) scale(.9);} 50%{ transform: translate(-50%,-50%) scale(1.08);} }
@keyframes svHalo { 0%{ transform: translate(-50%,-50%) scale(.55); opacity:.8;} 100%{ transform: translate(-50%,-50%) scale(1.5); opacity:0;} }
/* anneau rotatif */
.sv-ring::before { inset: 30px; border-radius: 50%; padding: 4px;
background: conic-gradient(from 0deg, transparent, #0055FE, transparent 62%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude; animation: svSpin 2.4s linear infinite; }
.sv-ring::after { width: 36px; height: 36px; border-radius: 50%; left:50%; top:50%; transform: translate(-50%,-50%); background: rgba(0,85,254,.16); }
@keyframes svSpin { to { transform: rotate(360deg); } }
/* scan : trame + ligne */
.sv-scan { background: radial-gradient(circle, rgba(0,85,254,.32) 1.4px, transparent 1.7px) 0 0/15px 15px, linear-gradient(160deg, #EEF3FF, #E1E9FF); }
.sv-scan::before { left: 0; right: 0; height: 2px; top: 0; background: linear-gradient(90deg, transparent, #0055FE, transparent);
box-shadow: 0 0 12px 2px rgba(0,85,254,.5); animation: svScan 2.4s var(--ease) infinite; }
@keyframes svScan { 0%{ top:0; opacity:1;} 100%{ top:100%; opacity:.3;} }
/* node + orbite */
.sv-node::before { width: 16px; height: 16px; border-radius: 50%; left:50%; top:50%; transform: translate(-50%,-50%);
background: #0055FE; box-shadow: 0 0 0 6px rgba(0,85,254,.14); }
.sv-node::after { width: 88px; height: 88px; border-radius: 50%; left:50%; top:50%; margin: -44px 0 0 -44px;
border: 1px dashed rgba(0,85,254,.32); animation: svSpin 5s linear infinite; }
/* wave : radar */
.sv-wave::before, .sv-wave::after { left:50%; top:50%; width: 18px; height: 18px; border-radius: 50%;
border: 2px solid rgba(0,85,254,.55); animation: svWave 2.8s var(--ease) infinite; }
.sv-wave::after { animation-delay: 1.4s; }
@keyframes svWave { 0%{ transform: translate(-50%,-50%) scale(.4); opacity:.9;} 100%{ transform: translate(-50%,-50%) scale(3.3); opacity:0;} }
/* grille pulsée */
.sv-grid { background:
linear-gradient(rgba(0,85,254,.22) 1px, transparent 1px) 0 0/21px 21px,
linear-gradient(90deg, rgba(0,85,254,.22) 1px, transparent 1px) 0 0/21px 21px,
linear-gradient(160deg, #EEF3FF, #E1E9FF); animation: svGridP 3s var(--ease) infinite; }
.sv-grid::before { width: 46px; height: 46px; left:50%; top:50%; transform: translate(-50%,-50%);
background: radial-gradient(circle, rgba(0,85,254,.4), transparent 70%); animation: svPulse 2.6s var(--ease) infinite; }
@keyframes svGridP { 0%,100%{ background-position: 0 0, 0 0, 0 0;} 50%{ background-position: 3px 3px, 3px 3px, 0 0;} }
/* cartes « en cours » (désaturées) */
.sol-soon .sol-inner { background: rgba(246,249,255,.72); }
.sol-soon .sol-viz { filter: saturate(.45); opacity: .78; }
.sol-soon .sol-tag { color: var(--ink-4); border-color: var(--line); background: rgba(10,12,18,.03); }
.sol-soon::before { animation-duration: 6s; opacity: .22; }
.sol-soon:hover::before { opacity: .55; animation: none; }
/* carte +10 */
.sol-more .sol-inner { align-items: center; justify-content: center; text-align: center; gap: 6px;
background: linear-gradient(155deg, #0A5CFF, #0033C4); border-color: rgba(255,255,255,.15); }
.sol-more::before { opacity: .9; animation: none; }
.sol-more-num { font-family: var(--font-serif); font-weight: 400; font-size: clamp(74px, 7vw, 108px); line-height: 1; color: #fff;
text-shadow: 0 0 30px rgba(150,190,255,.6); }
.sol-more-label { font-family: var(--font-mono); font-size: clamp(11px, 1vw, 13px); letter-spacing: .12em; text-transform: uppercase;
color: rgba(255,255,255,.82); max-width: 190px; }
@media (max-width: 700px) { .sol-card, .sol-card-main { width: 80vw; height: 440px; } }
/* ───────────────────────────────────────────────────────────────
STATS
─────────────────────────────────────────────────────────────── */
.stats {
padding: clamp(100px, 12vw, 180px) 0;
background: var(--ink); color: #fff;
border-radius: clamp(20px, 3vw, 40px);
margin: 0 var(--pad);
overflow: hidden;
position: relative;
}
.stats::before {
content: ''; position: absolute; inset: 0;
background:
radial-gradient(circle at 80% 20%, rgba(0,85,254,.3), transparent 50%),
radial-gradient(circle at 20% 80%, rgba(0,85,254,.15), transparent 50%);
pointer-events: none;
}
.stats-inner {
display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(40px, 6vw, 100px);
align-items: start;
}
.stats .kicker { color: rgba(255,255,255,.6); border-color: rgba(255,255,255,.15); }
.stats .section-title { color: #fff; }
.stats .section-sub { color: rgba(255,255,255,.65); }
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(255,255,255,.1); border-radius: 18px; overflow: hidden; }
.stat-block {
background: var(--ink); padding: 36px;
display: flex; flex-direction: column; gap: 16px;
transition: background .35s var(--ease);
}
.stat-block:hover { background: #15181F; }
.stat-label { font-size: 12px; color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: .14em; }
.stat-value { font-family: var(--font-serif); font-size: clamp(48px, 6vw, 92px); line-height: 1; letter-spacing: -.02em; color: #fff; }
.stat-value small { font-family: var(--font-sans); font-size: .35em; color: rgba(255,255,255,.5); margin-left: 2px; vertical-align: top; }
.stat-bar { height: 2px; background: rgba(255,255,255,.1); border-radius: 99px; overflow: hidden; }
.stat-bar span {
display: block; height: 100%; background: var(--accent); border-radius: 99px;
width: 0; transition: width 1.6s var(--ease-out);
}
.stat-block.is-in .stat-bar span { width: var(--w); }
/* ───────────────────────────────────────────────────────────────
TESTIMONIALS
─────────────────────────────────────────────────────────────── */
.testimonials { padding: clamp(100px, 12vw, 180px) 0; }
.testimonial-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
margin-top: 40px;
}
.testimonial-card {
position: relative; padding: 36px 32px;
border: 1px solid var(--line); border-radius: var(--radius-lg);
background: #fff; display: flex; flex-direction: column; gap: 24px;
transition: transform .5s var(--ease-out), border-color .35s var(--ease);
}
.testimonial-card:hover { transform: translateY(-6px); border-color: var(--accent); box-shadow: 0 40px 80px -40px rgba(0,85,254,.3); }
.quote-mark {
font-family: var(--font-serif); font-size: 80px; color: var(--accent);
line-height: .5; height: 30px; opacity: .8;
}
.testimonial-card blockquote {
font-family: var(--font-serif); font-size: clamp(20px, 1.6vw, 26px);
line-height: 1.3; color: var(--ink); letter-spacing: -.01em;
}
.testimonial-card footer { display: flex; align-items: center; gap: 14px; margin-top: auto; }
.avatar {
width: 44px; height: 44px; border-radius: 50%;
background: linear-gradient(135deg, var(--accent), var(--accent-2));
flex-shrink: 0;
}
.avatar-1 { background: linear-gradient(135deg, #F4D5C2, #D9A88E); }
.avatar-2 { background: linear-gradient(135deg, #B8C5E8, #5E78B8); }
.avatar-3 { background: linear-gradient(135deg, #D4E2D4, #7AAB7A); }
.t-name { font-size: 14px; font-weight: 500; color: var(--ink); }
.t-role { font-size: 12px; color: var(--ink-4); margin-top: 2px; }
/* ───────────────────────────────────────────────────────────────
PRICING
─────────────────────────────────────────────────────────────── */
.pricing { padding: clamp(100px, 12vw, 180px) 0; background: var(--bg-soft); border-top: 1px solid var(--line); }
.price-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
margin-top: 40px;
}
.price-card {
position: relative; padding: 36px 32px; background: #fff;
border: 1px solid var(--line); border-radius: var(--radius-lg);
display: flex; flex-direction: column; gap: 18px;
transition: transform .5s var(--ease-out), box-shadow .35s var(--ease);
}
.price-card:hover { transform: translateY(-6px); box-shadow: 0 40px 80px -40px rgba(10,12,18,.2); }
.price-featured {
background: var(--ink); color: #fff; border-color: var(--ink);
transform: scale(1.02);
}
.price-featured:hover { transform: scale(1.02) translateY(-6px); }
.price-pop {
position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
background: var(--accent); color: #fff; font-size: 11px; padding: 5px 12px;
border-radius: 99px; letter-spacing: .08em; text-transform: uppercase;
}
.price-name { font-family: var(--font-serif); font-size: 32px; letter-spacing: -.01em; }
.price-desc { font-size: 14px; color: var(--ink-3); }
.price-featured .price-desc { color: rgba(255,255,255,.7); }
.price-amount {
font-family: var(--font-serif); font-size: 44px; line-height: 1; letter-spacing: -.02em;
padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.price-featured .price-amount { border-color: rgba(255,255,255,.12); }
.price-amount small { font-family: var(--font-sans); font-size: 13px; color: var(--ink-3); margin-left: 4px; }
.price-featured .price-amount small { color: rgba(255,255,255,.55); }
.price-features { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.price-features li {
font-size: 14px; color: var(--ink-3); display: flex; align-items: center; gap: 10px;
position: relative; padding-left: 24px;
}
.price-features li::before {
content: ''; position: absolute; left: 0; top: 8px;
width: 14px; height: 14px; border-radius: 50%;
background: var(--accent-soft) url("data:image/svg+xml;utf8,") center/10px no-repeat;
}
.price-featured .price-features li { color: rgba(255,255,255,.8); }
/* ───────────────────────────────────────────────────────────────
CTA
─────────────────────────────────────────────────────────────── */
.cta {
position: relative; padding: clamp(120px, 14vw, 220px) 0; overflow: hidden;
text-align: center; margin-top: 40px; background: #fff;
}
.cta-inner { position: relative; z-index: 2; }
.cta-title { max-width: 1100px; margin: 0 auto 32px; text-align: center; }
.cta-title .line { justify-content: center; }
.cta-sub { max-width: 580px; margin: 0 auto 40px; font-size: 18px; color: var(--ink-3); line-height: 1.55; }
.cta-actions { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-bottom: 24px; }
.cta-meta { font-size: 13px; color: var(--ink-4); }
/* ───────────────────────────────────────────────────────────────
SÉCURITÉ & INTÉGRATION
─────────────────────────────────────────────────────────────── */
.security { padding: clamp(100px, 12vw, 180px) 0; }
/* ───────────────────────────────────────────────────────────────
DARK SECTION UTILITY — used by .security and .cta to alternate
light/dark rhythm without a blob/gradient crutch.
─────────────────────────────────────────────────────────────── */
.section-dark { background: var(--ink); color: #fff; }
.section-dark .kicker { color: rgba(255,255,255,.55); border-color: rgba(255,255,255,.16); }
.section-dark .section-title,
.section-dark .cta-title { color: #fff; }
.section-dark .section-sub,
.section-dark .cta-sub { color: rgba(255,255,255,.62); }
.section-dark .cta-meta { color: rgba(255,255,255,.4); }
.section-dark .btn-ghost {
background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.22);
}
.section-dark .btn-ghost:hover { background: #fff; color: var(--ink); border-color: #fff; }
/* ─── inline CTA reminder — repeated after key sections ─── */
.inline-cta {
margin-top: clamp(48px, 6vw, 80px);
padding-top: clamp(28px, 4vw, 44px);
border-top: 1px solid var(--line);
display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.inline-cta p {
font-family: var(--font-serif); font-weight: 400;
font-size: clamp(19px, 2vw, 26px); color: var(--ink); max-width: 480px; margin: 0;
}
.section-dark .inline-cta,
.stats .inline-cta { border-top-color: rgba(255,255,255,.14); }
.section-dark .inline-cta p,
.stats .inline-cta p { color: #fff; }
@media (max-width: 720px) {
.inline-cta { flex-direction: column; align-items: flex-start; }
.inline-cta .btn { width: 100%; justify-content: center; }
}
/* ───────────────────────────────────────────────────────────────
FOOTER
─────────────────────────────────────────────────────────────── */
.footer {
background: #fff; color: var(--ink); padding: 80px 0 40px;
border-radius: clamp(20px, 3vw, 40px) clamp(20px, 3vw, 40px) 0 0;
position: relative; overflow: hidden;
border-top: 1px solid rgba(10,12,18,.08);
}
.footer-top {
display: grid; grid-template-columns: 1fr 2fr; gap: 60px;
padding-bottom: 60px; border-bottom: 1px solid rgba(10,12,18,.08);
}
.footer-brand p { font-size: 14px; color: var(--ink-3); max-width: 280px; margin-top: 20px; line-height: 1.55; }
.footer .nav-logo { color: var(--ink); }
.footer .nav-logo-img { height: 28px; }
.footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.footer-cols > div { display: flex; flex-direction: column; gap: 10px; }
.footer-h {
font-size: 12px; color: var(--ink-3);
text-transform: uppercase; letter-spacing: .14em; margin-bottom: 6px;
}
.footer-cols a {
font-size: 14px; color: var(--ink-2);
transition: color .25s var(--ease);
}
.footer-cols a:hover { color: var(--accent); }
.footer-mega { text-align: center; padding: 30px 0 22px; user-select: none; line-height: 0; }
.footer-mega img { width: min(820px, 86%); height: auto; opacity: .12; display: inline-block; }
.footer-bottom {
display: flex; justify-content: space-between; align-items: center;
font-size: 12px; color: var(--ink-3);
padding-top: 24px; border-top: 1px solid rgba(10,12,18,.08);
}
/* ─── pauses CTA entre les sections (demande Arthur 12/08) ─── */
.demo-pause {
display: flex; justify-content: center;
padding: clamp(8px, 1.5vw, 18px) 20px clamp(56px, 7vw, 110px);
}
/* ─── retouches mobile (demandes Arthur 12/08) ─── */
@media (max-width: 899px) {
/* la courbe bleue du héros n'apparaît pas sur téléphone */
.hero-chart { display: none; }
/* les blocs (paniers abandonnés…) remontent près du titre finale */
.brand-problem { margin-top: calc(-50vh - 10px); }
/* CTA « Je découvre la boutique test » : 25 % plus petit, toujours centré */
.hero-actions .btn.btn-ghost { width: max-content; margin-inline: auto; padding: 10px 18px; font-size: 12.5px; }
}
/* ───────────────────────────────────────────────────────────────
RESPONSIVE
─────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
.bento { grid-template-columns: repeat(4, 1fr); }
.bento-card { grid-column: span 2; }
.bento-lg { grid-column: span 4; grid-row: auto; }
.bento-wide { grid-column: span 4; }
.how-inner { grid-template-columns: 1fr; }
.how-left { position: static; }
.stats-inner { grid-template-columns: 1fr; }
.testimonial-grid, .price-grid { grid-template-columns: 1fr; }
.problem-grid { grid-template-columns: repeat(2, 1fr); }
.hv-body { grid-template-columns: 1fr; }
.hv-panel { border-left: 0; border-top: 1px solid var(--line); }
.footer-top { grid-template-columns: 1fr; }
.footer-cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 899px) {
/* MOBILE = même expérience que desktop (scrollytelling, vidéo, révélations) :
ici uniquement des ajustements de MISE EN PAGE, aucun masquage, aucun override. */
.benefits-grid { grid-template-columns: 1fr; gap: 60px; }
.hero-actions { flex-direction: column; align-items: stretch; width: min(92vw, 420px); margin-inline: auto; }
.hero-actions .btn { width: 100%; justify-content: center; }
/* l'indicateur SCROLL passe dans le flux SOUS les boutons (fini le chevauchement) */
.hero-scroll { position: relative; inset: auto; margin: 26px auto 0; width: max-content; order: 3; }
/* vidéo : dans le FLUX, entre le texte et les boutons → chevauchement impossible */
.hero-content { order: 0; }
.hero-bg-video {
position: relative; inset: auto; transform: none; order: 1;
width: min(84vw, 360px); height: min(66vw, 280px);
margin: 28px auto 0; border-radius: 16px;
}
/* zoom dans le clip, ancré en bas : la fiche produit remplit le cadre, rien ne déborde */
.hero-bg-video video {
position: absolute; left: 50%; bottom: 0; top: auto; transform: translateX(-50%);
width: auto; height: 190%; min-width: 100%; object-fit: cover;
}
.hero-bg-veil { opacity: .25; }
.hero-actions { order: 2; margin-top: 40px; } /* pile compacte sous la vidéo (au lieu d'ancré tout en bas) */
}
@media (max-width: 899px) {
.bento { grid-template-columns: 1fr; }
.bento-card, .bento-lg, .bento-wide { grid-column: span 1; }
.problem-grid { grid-template-columns: 1fr; }
.stats-grid { grid-template-columns: 1fr; }
.price-featured { transform: none; }
.footer-bottom { flex-direction: column; gap: 8px; }
.footer-cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1099px) {
/* menu déroulant sous la barre (ouvert via burger) */
.nav-links {
position: absolute; top: calc(100% + 10px); left: 0; right: 0;
display: flex; flex-direction: column; gap: 2px;
background: rgba(255,255,255,.96); backdrop-filter: blur(20px);
border: 1px solid rgba(10,12,18,.07); border-radius: 20px; padding: 10px;
box-shadow: 0 30px 60px -24px rgba(10,12,18,.28);
opacity: 0; pointer-events: none; transform: translateY(-8px);
transition: opacity .3s var(--ease), transform .3s var(--ease-out);
}
.nav.menu-open .nav-links { opacity: 1; pointer-events: auto; transform: none; }
.nav-links a { padding: 13px 16px; font-size: 16px; border-radius: 12px; }
/* tactile : pas d'effet de duplication du texte (il décalait les libellés) */
.nav-links a::before { display: none; }
.nav-links a, .nav-links a:hover { color: var(--ink); }
.nav-burger { display: block; }
/* nav pleine largeur : logo à gauche, CTA à droite */
.nav { left: 12px; right: 12px; transform: none; width: auto; }
.nav-inner { display: flex; justify-content: space-between; align-items: center; width: 100%; gap: 8px; padding: 6px 8px 6px 16px; overflow: visible; }
.nav-logo-img { height: 34px; } /* logo + gros */
.nav-actions { margin-left: auto; }
.nav-actions .btn { padding: 9px 16px; font-size: 14px; } /* CTA plus fin */
.nav-actions .btn .btn-arrow { display: none; }
}
/* ───────────────────────────────────────────────────────────────
ACCESSIBILITÉ — prefers-reduced-motion
Coupe les animations/transitions CSS décoratives (pulses, marquees,
breathing, shimmer, scan…) : le contenu final reste visible, seule
la mise en mouvement disparaît. Les animations pilotées en JS
(Lenis, parallax, curseur magnétique, compteurs) sont gérées à part
dans js/script.js via la même media query.
─────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ═══════════════════════════════════════════════════════════════
HUB — sections sous la solution (plateforme, manifeste, preuve,
intégration, roadmap). Réutilise les tokens & classes existants.
═══════════════════════════════════════════════════════════════ */
/* ── LA PLATEFORME ── */
.platform { position: relative; padding: clamp(90px, 11vw, 170px) 0; background: linear-gradient(180deg, #fff, #F6F9FF 58%, #fff); }
.scroll-mark { position: absolute; top: -90px; left: 0; width: 1px; height: 1px; }
.pipeline { position: relative; display: flex; gap: clamp(10px, 1.4vw, 22px); margin-top: clamp(30px, 4vw, 54px); }
.pipe-line { position: absolute; left: 8%; right: 8%; top: 35px; height: 2px; overflow: hidden;
background: linear-gradient(90deg, var(--line), rgba(0,85,254,.35), var(--line)); }
.pipe-pulse { position: absolute; top: 0; width: 72px; height: 100%; left: -12%;
background: linear-gradient(90deg, transparent, var(--accent), transparent); animation: pipePulse 3.4s linear infinite; }
@keyframes pipePulse { 0% { left: -12%; } 100% { left: 100%; } }
.pipe-node { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
.pipe-idx { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); line-height: 14px; }
.pipe-dot { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--line); margin: 14px 0 18px; position: relative; z-index: 2; }
.pipe-node h3 { font-family: var(--font-serif); font-size: clamp(18px, 1.6vw, 23px); color: var(--ink); line-height: 1.1; }
.pipe-node p { font-size: 13px; color: var(--ink-3); margin-top: 5px; line-height: 1.45; max-width: 19ch; }
.pipe-node-prod { text-decoration: none; border-radius: 16px; padding: 6px 8px 14px; transition: background .3s var(--ease), transform .4s var(--ease-out); }
.pipe-node-prod .pipe-dot { border-color: var(--accent); box-shadow: 0 0 0 5px rgba(0,85,254,.12); }
.pipe-node-prod:hover { background: rgba(0,85,254,.05); transform: translateY(-4px); }
.pipe-go { display: inline-block; margin-top: 11px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.pipe-node-soon .pipe-dot { border-style: dashed; box-shadow: 0 0 0 5px rgba(0,85,254,.06); }
.pipe-node-soon .pipe-go { color: var(--ink-4); }
@media (max-width: 860px) {
.pipeline { flex-direction: column; gap: 26px; }
.pipe-line { display: none; }
.pipe-node { flex-direction: row; text-align: left; gap: 14px; align-items: flex-start; }
.pipe-node .pipe-dot { margin: 4px 0 0; }
.pipe-node-inner { }
}
/* ── MANIFESTE ── */
.manifesto { position: relative; padding: clamp(120px, 16vw, 220px) 0; overflow: hidden; text-align: center; }
.manifesto .container { position: relative; z-index: 2; }
.manifesto-aura { position: absolute; inset: -20% 0; pointer-events: none;
background: radial-gradient(46% 42% at 50% 42%, rgba(0,85,254,.34), transparent 70%);
filter: blur(18px); animation: auraFloat 9s var(--ease) infinite alternate; }
@keyframes auraFloat { 0% { transform: translateY(-14px) scale(1); opacity: .75; } 100% { transform: translateY(14px) scale(1.12); opacity: 1; } }
.manifesto-title { max-width: 1020px; margin: 26px auto 30px; font-size: clamp(30px, 5vw, 62px); line-height: 1.02; }
.manifesto-title .line { justify-content: center; }
.manifesto-sub { max-width: 640px; margin: 0 auto; font-size: clamp(15px, 1.3vw, 18px); line-height: 1.6; color: rgba(255,255,255,.62); }
/* ── IMPACT (réutilise .stats) — la stat CO₂ mise en avant ── */
.stat-block-accent { background: linear-gradient(160deg, #0b1e4a, #0a0c12) !important; }
.stat-block-accent .stat-bar span { background: linear-gradient(90deg, #0055FE, #5CC6FF); }
/* ── PREUVE / CLIENTS ── */
.proof { padding: clamp(100px, 12vw, 180px) 0; }
.case-study { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(24px, 3vw, 48px); align-items: center;
padding: clamp(28px, 3.5vw, 52px); border-radius: var(--radius-lg); background: var(--bg-soft); border: 1px solid var(--line); }
.case-logo { font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; }
.case-body blockquote { font-family: var(--font-serif); font-size: clamp(22px, 2.4vw, 34px); line-height: 1.3; letter-spacing: -.01em; color: var(--ink); }
.case-person { margin-top: 18px; font-size: 14px; color: var(--ink-3); }
.case-person strong { color: var(--ink); }
.case-metrics { display: flex; flex-direction: column; gap: 18px; }
.case-metric { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px; }
.case-metric small { display: block; margin-top: 8px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-4); }
.case-delta { display: flex; align-items: baseline; gap: 12px; font-family: var(--font-serif); font-size: clamp(26px, 3vw, 40px); }
.case-before { color: var(--ink-4); text-decoration: line-through; }
.case-arrow { color: var(--accent); font-size: .7em; }
.case-after { color: var(--ink); }
.case-metric-big { background: var(--ink); border-color: var(--ink); }
.case-big { font-family: var(--font-serif); font-size: clamp(40px, 5vw, 66px); line-height: 1; color: #fff; }
.case-metric-big small { color: rgba(255,255,255,.55); }
.proof .testimonial-grid { grid-template-columns: 1fr 1fr; margin-top: 28px; }
.logo-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(20px, 3vw, 46px); margin-top: clamp(34px, 4vw, 54px); }
.logo-row span { font-family: var(--font-serif); font-size: clamp(18px, 1.8vw, 26px); color: var(--ink-4); transition: color .3s var(--ease); }
.logo-row span:hover { color: var(--ink); }
@media (max-width: 760px) {
.case-study { grid-template-columns: 1fr; }
.proof .testimonial-grid { grid-template-columns: 1fr; }
}
/* ── INTÉGRATION (réutilise .bento, .how-code) ── */
.integration { padding: clamp(100px, 12vw, 180px) 0; background: var(--bg-soft); border-top: 1px solid var(--line); }
.standard { padding: clamp(100px, 12vw, 180px) 0; }
/* social proof : halo bleu qui suit la souris + tilt 3D (identique aux bento, piloté par le §12c) */
.case-study, .testimonial-card { position: relative; overflow: hidden; --mx: 50%; --my: 50%; }
.case-study::before, .testimonial-card::before {
content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
background: radial-gradient(500px circle at var(--mx) var(--my), rgba(0,85,254,.12), transparent 55%);
opacity: 0; transition: opacity .4s var(--ease);
}
.case-study:hover::before, .testimonial-card:hover::before { opacity: 1; }
.case-study > *, .testimonial-card > * { position: relative; z-index: 1; }
.case-study { transition: transform .6s var(--ease-out), box-shadow .35s var(--ease), border-color .35s var(--ease); }
.case-study:hover { box-shadow: 0 40px 80px -40px rgba(0,85,254,.25); border-color: rgba(0,85,254,.3); }
/* ── ON SE BRANCHE PARTOUT : système en orbite ── */
.integrate { padding: clamp(100px, 12vw, 180px) 0; overflow: clip; }
.io-stage { position: relative; width: min(660px, 90vw); aspect-ratio: 1; margin: clamp(20px, 4vw, 46px) auto 0; }
.io-stage > * { position: absolute; inset: 0; }
/* fils "Spiderman" : jaillissent du cœur vers chaque logo, puis disparaissent (JS) */
.io-web { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
/* brins de soie : fins mais lisibles, légère lueur soyeuse (couleur exacte posée par brin en JS) */
.io-web-line { fill: none; stroke: rgba(0,85,254,.6); stroke-width: 1.1; stroke-linecap: round;
vector-effect: non-scaling-stroke; /* épaisseur en px, indépendante du viewBox */
filter: drop-shadow(0 0 1.4px rgba(0,85,254,.55)); }
.io-web-tip { fill: rgba(0,85,254,.85); } /* petit point de "colle" au bout du fil */
/* anneaux décoratifs */
.io-ring { top: 50%; left: 50%; inset: auto; transform: translate(-50%, -50%); border-radius: 50%; border: 1px solid rgba(0,85,254,.13); }
.io-ring-1 { width: 40%; height: 40%; }
.io-ring-2 { width: 68%; height: 68%; }
.io-ring-3 { width: 98%; height: 98%; }
/* balayage radar */
.io-sweep { border-radius: 50%; background: conic-gradient(from 0deg, rgba(0,85,254,.22), transparent 30%); opacity: .7; animation: ioSpin 7s linear infinite; }
/* cœur OptiDress */
.io-core { display: grid; place-items: center; }
.io-core b { position: relative; z-index: 3; font-family: var(--font-serif); font-weight: 400;
font-size: clamp(18px, 2.2vw, 30px); color: var(--accent); padding: 12px 24px; border-radius: 99px;
background: #fff; box-shadow: 0 24px 60px -18px rgba(0,85,254,.55); }
.io-core::before { content: ''; position: absolute; width: 30%; height: 30%; border-radius: 50%;
background: radial-gradient(circle, rgba(0,85,254,.35), transparent 70%); animation: ioPulse 2.8s var(--ease) infinite; }
/* orbites (le conteneur tourne) */
.io-orbit-in { animation: ioSpin 42s linear infinite; }
.io-orbit-out { animation: ioSpin 64s linear infinite reverse; }
/* nœuds placés sur le cercle via cos/sin (responsive) */
.io-node { position: absolute; width: 0; height: 0; inset: auto;
top: calc(50% - var(--r) * cos(var(--a)));
left: calc(50% + var(--r) * sin(var(--a))); }
/* la pastille reste centrée sur le point ET droite (contre-rotation via keyframe) */
.io-chip { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); white-space: nowrap;
font-family: var(--font-mono); font-size: clamp(10px, 1vw, 12.5px); letter-spacing: .03em; color: var(--ink-2);
background: rgba(255,255,255,.9); backdrop-filter: blur(6px); border: 1px solid var(--line);
padding: 8px 15px; border-radius: 99px; box-shadow: 0 12px 30px -14px rgba(0,85,254,.4);
transition: color .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); }
.io-orbit-in .io-chip { animation: ioUprightCW 42s linear infinite; }
.io-orbit-out .io-chip { animation: ioUprightCCW 64s linear infinite; }
.io-chip:hover { color: #fff; background: var(--accent); border-color: var(--accent); box-shadow: 0 16px 36px -10px rgba(0,85,254,.6); }
@keyframes ioSpin { to { transform: rotate(360deg); } }
@keyframes ioPulse { 0%,100% { transform: scale(.78); opacity: .65; } 50% { transform: scale(1.18); opacity: 1; } }
@keyframes ioUprightCW { from { transform: translate(-50%,-50%) rotate(0); } to { transform: translate(-50%,-50%) rotate(-360deg); } }
@keyframes ioUprightCCW { from { transform: translate(-50%,-50%) rotate(0); } to { transform: translate(-50%,-50%) rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .io-sweep, .io-orbit-in, .io-orbit-out, .io-chip, .io-core::before { animation: none !important; } }
@media (max-width: 560px) { .io-chip { font-size: 10px; padding: 6px 10px; } }
/* orbite v2 : logos réels + centre = logo OptiDress, sans balayage blob */
.io-core::before { display: none; }
.io-core img { width: clamp(72px, 9vw, 112px); height: auto; display: block; padding: 18px; border-radius: 50%;
background: #fff; box-shadow: 0 24px 60px -18px rgba(0,85,254,.4), 0 0 0 1px rgba(0,85,254,.05); position: relative; z-index: 3; }
.io-logo { height: 24px; width: auto; max-width: 96px; object-fit: contain; display: block; }
.io-name { display: none; }
.io-chip:not(:has(.io-logo)) .io-name { display: inline; }
/* orbite v3 : 4 anneaux centrés + alignés sur les plateformes, badges ronds avec logos */
.io-stage > .io-ring { inset: auto; top: 50%; left: 50%; transform: translate(-50%, -50%);
border: 1px solid rgba(0,85,254,.14); border-radius: 50%; }
.io-ring-1 { width: 24%; height: 24%; }
.io-ring-2 { width: 40%; height: 40%; }
.io-ring-3 { width: 66%; height: 66%; } /* orbite intérieure : les plateformes sont posées dessus */
.io-ring-4 { width: 94%; height: 94%; } /* orbite extérieure */
.io-chip { width: clamp(52px, 6vw, 66px); height: clamp(52px, 6vw, 66px); padding: 0; border-radius: 50%;
display: grid; place-items: center; }
.io-logo { width: 56%; height: 56%; max-width: none; object-fit: contain; }
.io-chip:not(:has(.io-logo)) { width: auto; height: auto; border-radius: 99px; padding: 8px 14px; }
/* parcours : 3 vraies personnes (photos détourées), serrées en trio comme la compo */
.parcours-icon {
width: auto; max-width: min(80vw, 820px); aspect-ratio: auto; opacity: 0.78;
display: flex; align-items: flex-end; justify-content: center; gap: 0;
}
.parcours-icon img.parcours-person {
height: clamp(330px, 60vh, 640px); width: auto; object-fit: contain;
transform-box: border-box; transform-origin: center bottom;
/* fondu en bas plus court : démarre bas, se termine vite → empiète peu sur les corps */
-webkit-mask-image: linear-gradient(to bottom, #000 0, #000 80%, transparent 97%);
mask-image: linear-gradient(to bottom, #000 0, #000 80%, transparent 97%);
}
.pp-center { z-index: 3; height: clamp(372px, 67vh, 710px); } /* homme : plus grand ET DEVANT les deux autres */
.pp-left { z-index: 2; margin-right: -25%; } /* encore plus rapprochés */
.pp-right { z-index: 2; margin-left: -25%; }
@media (max-width: 680px) { .parcours-icon img.parcours-person { height: 40vh; } }
/* problem-road : 2 cartes produit qui apparaissent au finale, de part et d'autre du titre */
.pb-card { position: absolute; top: 50%; z-index: 5; pointer-events: none; transform-origin: center center; }
.pb-left { left: clamp(14px, 6vw, 130px); top: 57%; transform: translateY(-50%) rotate(-22deg); } /* robe : penchée + un peu plus bas */
.pb-right { right: clamp(14px, 6vw, 130px); top: 47%; transform: translateY(-50%) rotate(12deg); } /* veste : moins inclinée + un peu plus haut que la robe */
.pb-inner { width: clamp(128px, 13vw, 188px); aspect-ratio: 3 / 4; border-radius: 20px;
background: #EBEBEB; display: grid; place-items: center; overflow: hidden;
box-shadow: 0 36px 60px -28px rgba(10,12,18,.35), 0 4px 10px -4px rgba(10,12,18,.12);
will-change: transform, opacity; }
.pb-inner img { width: 86%; height: 86%; object-fit: contain; filter: drop-shadow(0 16px 20px rgba(10,12,18,.25)); }
/* mobile : cartes plus petites, poussées dans les coins (haut-droite / bas-gauche)
pour laisser la bande centrale au titre du finale */
@media (max-width: 899px) {
.pb-inner { width: clamp(84px, 24vw, 110px); }
.pb-left { left: 10px; top: 70%; }
.pb-right { right: 10px; top: 28%; }
}
/* ──────────────────────────── CALCULATEUR DE ROI ──────────────────────────── */
.roi {
--roi-green: #10b981;
display: grid; grid-template-columns: 1.02fr 1fr;
max-width: 1120px; margin: clamp(40px, 5vw, 66px) auto 0;
background: #fff; border: 1px solid rgba(10,12,18,.07);
border-radius: 28px; overflow: hidden;
box-shadow: 0 40px 90px -50px rgba(10,12,18,.4), 0 8px 24px -14px rgba(10,12,18,.12);
font-family: var(--font-sans, 'Inter Tight', system-ui, sans-serif);
text-align: left;
}
.roi-panel { padding: clamp(26px, 3vw, 44px); min-width: 0; }
.roi-results { border-left: 1px solid rgba(10,12,18,.07); background: #FCFDFF; display: flex; flex-direction: column; }
/* ── colonne gauche : entrées ── */
.roi-badge {
display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .04em;
color: #fff; background: var(--accent, #0055FE); padding: 7px 13px; border-radius: 99px;
}
.roi-h { font-family: inherit; font-size: clamp(22px, 2.4vw, 28px); font-weight: 600; color: var(--ink, #0b0d12); margin: 16px 0 4px; letter-spacing: -.01em; }
.roi-sub { font-size: 14.5px; color: var(--ink-2, #5b6472); margin: 0 0 22px; }
.roi-view { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.roi-view-label { font-size: 14px; color: var(--ink-2, #5b6472); }
.roi-toggle { display: inline-flex; background: #eef1f6; border-radius: 12px; padding: 4px; gap: 2px; }
.roi-toggle-sm { padding: 3px; border-radius: 9px; }
.roi-seg {
font-family: inherit; border: 0; cursor: pointer; background: transparent;
color: var(--ink-2, #5b6472); font-size: 14px; font-weight: 500;
padding: 7px 16px; border-radius: 9px; transition: background .25s, color .25s, box-shadow .25s;
}
.roi-toggle-sm .roi-seg { padding: 4px 11px; font-size: 13px; border-radius: 7px; }
.roi-seg.is-on { background: #fff; color: var(--accent, #0055FE); box-shadow: 0 2px 6px -2px rgba(10,12,18,.18); }
.roi-field { margin-bottom: 20px; }
.roi-field-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.roi-field-top label { font-size: 14px; font-weight: 500; color: var(--ink, #0b0d12); }
.roi-field-top output { font-size: 18px; font-weight: 700; color: var(--accent, #0055FE); font-variant-numeric: tabular-nums; }
/* slider */
.roi-range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 99px;
background: linear-gradient(90deg, var(--accent, #0055FE) 0 var(--roi-fill, 30%), #e6eaf1 var(--roi-fill, 30%) 100%);
outline: none; cursor: pointer; }
.roi-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%;
background: #fff; border: 5px solid var(--accent, #0055FE); box-shadow: 0 3px 10px -2px rgba(0,85,254,.5); cursor: pointer; margin-top: 0; }
.roi-range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 5px solid var(--accent, #0055FE); box-shadow: 0 3px 10px -2px rgba(0,85,254,.5); cursor: pointer; }
.roi-scale { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; color: var(--ink-3, #9aa2b1); font-variant-numeric: tabular-nums; }
/* champs numériques avec chip d'unité */
.roi-input { display: flex; align-items: center; gap: 10px; background: #f4f6fa; border: 1px solid transparent; border-radius: 13px; padding: 5px 5px 5px 6px; transition: border-color .25s, background .25s; }
.roi-input:focus-within { border-color: rgba(0,85,254,.4); background: #fff; }
.roi-unit { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: #fff; color: var(--accent, #0055FE); font-size: 14px; font-weight: 600; box-shadow: 0 1px 3px rgba(10,12,18,.08); }
.roi-input input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font-family: inherit; font-size: 17px; font-weight: 600; color: var(--ink, #0b0d12); padding: 8px 8px 8px 2px; font-variant-numeric: tabular-nums; }
/* stepper ▲▼ */
.roi-step { display: flex; flex-direction: column; align-self: stretch; margin-left: 6px; border-radius: 9px; overflow: hidden; background: #fff; box-shadow: 0 1px 3px rgba(10,12,18,.1); }
.roi-step-b { flex: 1; width: 31px; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; color: var(--ink-3, #9aa2b1); padding: 0; transition: background .2s, color .2s; }
.roi-step-b:hover { background: #eef2f9; color: var(--accent, #0055FE); }
.roi-step-b:active { background: #e2e9f6; }
.roi-step-b:first-child { border-bottom: 1px solid rgba(10,12,18,.07); }
.roi-step-b svg { width: 12px; height: 12px; display: block; }
/* ── colonne droite : résultats ── */
.roi-results-label { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3, #9aa2b1); }
.roi-gauge { position: relative; width: min(300px, 78%); margin: 10px auto 6px; }
.roi-gauge-svg { width: 100%; height: auto; display: block; overflow: visible; }
.roi-gauge-track { stroke: #e9edf4; stroke-width: 12; stroke-linecap: round; }
.roi-gauge-fill { stroke: var(--accent, #0055FE); stroke-width: 12; stroke-linecap: round; transition: stroke-dashoffset .6s cubic-bezier(.22,1,.36,1); filter: drop-shadow(0 4px 10px rgba(0,85,254,.35)); }
.roi-gauge-dot0 { fill: var(--accent, #0055FE); }
.roi-gauge-dot { fill: var(--accent, #0055FE); stroke: #fff; stroke-width: 2.5; transition: cx .6s cubic-bezier(.22,1,.36,1), cy .6s cubic-bezier(.22,1,.36,1); }
.roi-gauge-center { position: absolute; left: 0; right: 0; bottom: 8%; display: flex; flex-direction: column; align-items: center; }
.roi-mult { font-size: clamp(38px, 4.4vw, 52px); font-weight: 800; line-height: 1; color: var(--accent, #0055FE); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.roi-mult-label { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3, #9aa2b1); margin-top: 4px; }
.roi-beforeafter { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin: 6px 0 22px; }
.roi-ba { display: flex; flex-direction: column; gap: 4px; }
.roi-ba-r { text-align: right; }
.roi-ba-k { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-3, #9aa2b1); }
.roi-ba-r .roi-ba-k { justify-content: flex-end; }
.roi-d { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.roi-d-a { background: #c3cad6; }
.roi-d-b { background: var(--accent, #0055FE); }
.roi-ba-v { font-size: 18px; font-weight: 700; color: var(--ink, #0b0d12); font-variant-numeric: tabular-nums; }
.roi-line { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border-radius: 14px; background: #f5f8fc; margin-bottom: 12px; }
.roi-line-txt { display: flex; flex-direction: column; gap: 3px; }
.roi-line-k { font-size: 14.5px; font-weight: 600; color: var(--ink, #0b0d12); }
.roi-line-s { font-size: 12px; color: var(--ink-3, #9aa2b1); }
.roi-line-v { font-size: 16.5px; font-weight: 700; color: var(--roi-green); font-variant-numeric: tabular-nums; white-space: nowrap; }
.roi-plan { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--accent, #0055FE); color: #fff; border-radius: 18px; padding: 20px 22px; }
.roi-plan-l { display: flex; flex-direction: column; gap: 2px; }
.roi-plan-r { display: flex; flex-direction: column; gap: 2px; text-align: right; }
.roi-plan-k { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.72); }
.roi-plan-price { display: flex; align-items: baseline; gap: 4px; }
.roi-plan-price b { font-size: 26px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.roi-plan-price em { font-style: normal; font-size: 13px; color: rgba(255,255,255,.8); }
.roi-plan-note { font-size: 11.5px; color: rgba(255,255,255,.7); margin-top: 2px; }
.roi-plan-r b { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
@media (max-width: 860px) {
.roi { grid-template-columns: 1fr; }
.roi-results { border-left: 0; border-top: 1px solid rgba(10,12,18,.07); }
}
@media (max-width: 400px) {
.roi-beforeafter { flex-wrap: wrap; row-gap: 10px; }
.roi-plan { flex-wrap: wrap; row-gap: 12px; }
.roi-plan-r { text-align: left; }
.footer-cols { gap: 18px; }
}
/* ──────────────────────────── BLOG & PRESSE ──────────────────────────── */
.press { padding: clamp(90px, 11vw, 160px) 0; }
.press-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2vw, 26px); margin-top: clamp(40px, 5vw, 64px); }
.post-card {
position: relative; overflow: hidden;
display: flex; flex-direction: column; gap: 16px; min-height: 218px;
padding: clamp(22px, 2.4vw, 30px);
background: #fff; border: 1px solid rgba(10,12,18,.08); border-radius: 20px;
text-decoration: none; color: inherit;
transition: transform .45s var(--ease-out), box-shadow .45s var(--ease), border-color .3s var(--ease);
}
/* image de fond floutée (remplace les url() par tes vraies visuels d'articles) */
.post-card::before {
content: ''; position: absolute; inset: -26px; z-index: 0; pointer-events: none;
background-size: cover; background-position: center;
filter: blur(24px) saturate(1.12); opacity: .34; transform: scale(1.04);
}
/* glow bleu PERMANENT (l'effet, sans survol) */
.post-card::after {
content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
background: radial-gradient(360px circle at 76% 14%, rgba(0,85,254,.20), transparent 62%);
}
.post-card > * { position: relative; z-index: 1; }
.post-card:hover::after { background: radial-gradient(420px circle at 76% 14%, rgba(0,85,254,.28), transparent 62%); }
.post-card:nth-child(1)::before { background-image: url('../assets/sol-optidress.png'); }
.post-card:nth-child(2)::before { background-image: url('../assets/sol-size.png'); }
.post-card:nth-child(3)::before { background-image: url('../assets/sol-optimove.png'); }
.post-card:nth-child(4)::before { background-image: url('../assets/sol-optidress.png'); }
.post-card:nth-child(5)::before { background-image: url('../assets/sol-size.png'); }
.post-card:nth-child(6)::before { background-image: url('../assets/sol-optimove.png'); }
/* ──────────────────────────── PAGES LÉGALES ──────────────────────────── */
.legal-page { background: #fff; }
.legal-nav { border-bottom: 1px solid rgba(10,12,18,.08); padding: 18px 0; }
.legal-nav-inner { display: flex; align-items: center; justify-content: space-between; }
.legal-nav .nav-logo-img { height: 26px; }
.legal-back { font-size: 14px; color: var(--ink-2); text-decoration: none; transition: color .25s; }
.legal-back:hover { color: var(--accent); }
.legal { max-width: 820px; padding: clamp(48px, 7vw, 88px) var(--pad) 100px; }
.legal-title { font-family: var(--font-serif); font-weight: 400; font-size: clamp(34px, 5vw, 56px); letter-spacing: -.02em; color: var(--ink); margin: 0 0 26px; }
.legal-toc { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 46px; }
.legal-toc a { font-size: 13px; color: var(--ink-2); text-decoration: none; padding: 7px 14px; border: 1px solid rgba(10,12,18,.12); border-radius: 99px; transition: color .25s, background .25s, border-color .25s; }
.legal-toc a:hover { color: #fff; background: var(--accent); border-color: var(--accent); }
.legal-sec { padding: 32px 0; border-top: 1px solid rgba(10,12,18,.08); scroll-margin-top: 90px; }
.legal-sec h2 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(24px, 3vw, 34px); letter-spacing: -.01em; color: var(--ink); margin: 0 0 18px; }
.legal-sec p { font-size: 15px; line-height: 1.7; color: var(--ink-2); margin: 0 0 14px; max-width: 720px; }
.legal-sec strong { color: var(--ink); font-weight: 600; }
.legal-note { font-size: 13px; font-style: italic; color: var(--ink-3); margin-top: 42px; }
/* ──────────────────────────── DÉCOR FLOTTANT (CTA + FOOTER) ──────────────────────────── */
@keyframes odFloat { 0%,100% { transform: translateY(0) rotate(var(--r,0deg)); } 50% { transform: translateY(-14px) rotate(var(--r,0deg)); } }
@keyframes odTwinkle { 0%,100% { opacity: .18; transform: scale(.8); } 50% { opacity: .6; transform: scale(1.1); } }
/* — CTA : blocs vêtements + étincelles — */
.cta-decor { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.cta-inner { position: relative; z-index: 2; }
.cta-clo {
position: absolute; aspect-ratio: 3/4; border-radius: 18px; overflow: hidden; display: grid; place-items: center;
background: linear-gradient(160deg, #F3F5FA, #E6ECF7);
box-shadow: 0 34px 60px -28px rgba(10,12,18,.30), inset 0 0 0 1px rgba(255,255,255,.6);
transform: rotate(var(--r,0deg)); animation: odFloat var(--d,7s) ease-in-out infinite var(--dl,0s);
}
.cta-clo img { width: 84%; height: 84%; object-fit: contain; filter: drop-shadow(0 14px 18px rgba(10,12,18,.22)); }
.cta-clo-1 { --r:-13deg; --d:7s; --dl:0s; width: clamp(84px, 8.5vw, 138px); left: 2%; top: 14%; }
.cta-clo-2 { --r: 12deg; --d:8s; --dl:.6s; width: clamp(80px, 8vw, 130px); right: 3%; top: 11%; }
.cta-clo-3 { --r:-9deg; --d:8.5s; --dl:1.1s; width: clamp(64px, 6.5vw, 104px); right: 6%; bottom: 15%; }
.cta-clo-4 { --r: 9deg; --d:7.5s; --dl:.35s; width: clamp(68px, 7vw, 110px); left: 5%; bottom: 13%; }
.cta-spark { position: absolute; fill: var(--accent,#0055FE); animation: odTwinkle 3.4s ease-in-out infinite; }
.cta-spark-1 { width: 20px; left: 15%; top: 27%; }
.cta-spark-2 { width: 14px; right: 19%; top: 32%; animation-delay: 1.1s; }
.cta-spark-3 { width: 16px; left: 22%; bottom: 26%; animation-delay: 2s; }
/* — Footer : objets 3D flottants — */
.footer .container { position: relative; z-index: 1; }
.footer-decor { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.fd-orb { position: absolute; border-radius: 50%; filter: blur(46px); }
.fd-orb-1 { width: 300px; height: 300px; top: -70px; right: 4%; background: radial-gradient(circle, rgba(0,85,254,.28), transparent 70%); }
.fd-orb-2 { width: 240px; height: 240px; bottom: 6%; left: -50px; background: radial-gradient(circle, rgba(0,85,254,.16), transparent 70%); }
.fd-glass {
position: absolute; border-radius: 22px; background: rgba(233,240,255,.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
border: 1px solid rgba(0,85,254,.14); box-shadow: 0 26px 50px -24px rgba(0,85,254,.34), inset 0 1px 0 rgba(255,255,255,.85);
transform: rotate(var(--r,0deg)); animation: odFloat var(--d,9s) ease-in-out infinite var(--dl,0s);
}
.fd-glass { display: grid; place-items: center; }
.fd-glass img { width: 64%; height: 64%; object-fit: contain;
filter: drop-shadow(0 12px 16px rgba(10,12,18,.30));
transform: rotate(calc(var(--r, 0deg) * -0.35)); } /* contre-rotation légère = posé en 3D */
.fd-glass-1 { --r:-12deg; --d:9s; --dl:0s; width: 112px; height: 112px; bottom: 30%; left: 6%; }
.fd-glass-2 { --r: 14deg; --d:8s; --dl:1s; width: 84px; height: 84px; bottom: 22%; right: 9%; }
.fd-clo {
position: absolute; width: 120px; aspect-ratio: 3/4; right: 4%; top: 30%; --r: 9deg; --d: 8s; --dl: .5s;
border-radius: 18px; overflow: hidden; display: grid; place-items: center;
background: linear-gradient(160deg, #F3F5FA, #E6ECF7);
box-shadow: 0 30px 54px -26px rgba(10,12,18,.30), inset 0 0 0 1px rgba(255,255,255,.6);
transform: rotate(var(--r)); animation: odFloat var(--d) ease-in-out infinite var(--dl);
}
.fd-clo img { width: 82%; height: 82%; object-fit: contain; filter: drop-shadow(0 12px 16px rgba(10,12,18,.22)); }
.fd-spark { position: absolute; fill: var(--accent,#0055FE); animation: odTwinkle 3.6s ease-in-out infinite; }
.fd-spark-1 { width: 20px; right: 24%; bottom: 46%; }
.fd-spark-2 { width: 15px; left: 32%; bottom: 34%; animation-delay: 1.4s; }
/* mobile : décor CTA réduit + coins extrêmes pour ne jamais toucher le texte */
@media (max-width: 899px) {
.cta-clo-1 { width: 70px; left: 2%; top: 3%; }
.cta-clo-2 { width: 64px; right: 2%; top: 4%; }
.cta-clo-3 { width: 58px; right: 3%; bottom: 1.5%; }
.cta-clo-4 { width: 62px; left: 3%; bottom: 2%; }
.cta-meta { padding: 0 88px; } /* le texte s'empile au centre, les coins restent aux cartes */
}
@media (prefers-reduced-motion: reduce) { .cta-clo, .cta-spark, .fd-glass, .fd-clo, .fd-spark { animation: none !important; } }
.post-card:hover { transform: translateY(-6px); box-shadow: 0 34px 70px -34px rgba(10,12,18,.32); border-color: rgba(0,85,254,.28); }
.post-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.post-tag { font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
color: var(--accent, #0055FE); background: rgba(0,85,254,.09); padding: 5px 11px; border-radius: 99px; white-space: nowrap; }
.post-tag-press { color: var(--ink, #0b0d12); background: rgba(10,12,18,.06); }
.post-date { font-size: 12.5px; color: var(--ink-3, #9aa2b1); white-space: nowrap; }
.post-title { flex: 1; margin: 0; font-family: var(--font-serif); font-weight: 400;
font-size: clamp(19px, 1.7vw, 23px); line-height: 1.18; letter-spacing: -.01em; color: var(--ink, #0b0d12); }
.post-link { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 500; color: var(--accent, #0055FE); }
.post-link svg { width: 15px; height: 15px; transition: transform .3s var(--ease-out); }
.post-card:hover .post-link svg { transform: translate(3px, -3px); }
@media (max-width: 900px) { .press-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .press-grid { grid-template-columns: 1fr; } }
/* ──────────────────────────── PAGES SOLUTION (sous-pages) ──────────────────────────── */
.subpage { background: #fff; }
.sub-hero { position: relative; padding: clamp(132px, 17vh, 190px) 0 clamp(48px, 6vw, 76px); text-align: center; overflow: hidden; }
.sub-hero::before {
content: ''; position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(60% 40% at 50% 0%, rgba(0,85,254,.09), transparent 70%),
linear-gradient(rgba(0,85,254,.04) 1px, transparent 1px) 0 0 / 42px 42px,
linear-gradient(90deg, rgba(0,85,254,.04) 1px, transparent 1px) 0 0 / 42px 42px;
-webkit-mask-image: linear-gradient(180deg, #000 0, #000 55%, transparent);
mask-image: linear-gradient(180deg, #000 0, #000 55%, transparent);
}
.sub-hero .container { position: relative; z-index: 1; }
.sub-title { font-family: var(--font-serif); font-weight: 400; letter-spacing: -.025em; line-height: .95;
font-size: clamp(34px, 5.6vw, 76px); color: var(--ink); margin: 18px auto 0; max-width: 14ch; }
.sub-title em { font-style: italic; color: var(--accent); }
.sub-lead { max-width: 620px; margin: clamp(18px,2.4vw,26px) auto 0; font-size: clamp(15px,1.5vw,18px); line-height: 1.6; color: var(--ink-2); }
.sub-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: clamp(28px,3.4vw,40px); }
/* visuel produit */
.sub-visual { position: relative; margin: clamp(40px, 6vw, 76px) auto 0; max-width: 940px; }
.sub-visual img { width: 100%; height: auto; display: block; border-radius: clamp(16px, 2vw, 26px);
box-shadow: 0 60px 120px -50px rgba(0,85,254,.45), 0 0 0 1px rgba(10,12,18,.05); }
.sub-visual-cap { margin-top: 14px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em;
text-transform: uppercase; color: var(--ink-3); }
/* sections internes */
.sub-sec { padding: clamp(64px, 9vw, 120px) 0; }
.sub-sec-alt { background: linear-gradient(180deg, #fff, #F6F9FF 50%, #fff); }
/* étapes */
.sub-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.2vw, 30px); margin-top: clamp(38px, 5vw, 60px); }
.sub-step { position: relative; padding: clamp(24px,2.6vw,32px); border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; }
.sub-step-num { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; color: var(--accent); }
.sub-step h3 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(19px,1.8vw,25px); line-height: 1.18; margin: 12px 0 10px; color: var(--ink); }
.sub-step p { font-size: 14.5px; line-height: 1.6; color: var(--ink-3); margin: 0; }
/* bénéfices chiffrés */
.sub-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px,2.2vw,30px); margin-top: clamp(38px,5vw,60px); }
.sub-stat { text-align: center; padding: clamp(22px,2.4vw,30px) 16px; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line); }
.sub-stat b { display: block; font-family: var(--font-serif); font-weight: 400; font-size: clamp(38px,4.6vw,60px); line-height: 1; color: var(--accent); letter-spacing: -.02em; }
.sub-stat span { display: block; margin-top: 10px; font-size: 14px; color: var(--ink-2); line-height: 1.5; }
/* bandeau "bientôt" (OptiMove) */
.sub-soon { display: inline-flex; align-items: center; gap: 10px; padding: 9px 18px; border-radius: 99px;
background: rgba(0,85,254,.08); color: var(--accent); font-family: var(--font-mono); font-size: 11.5px;
letter-spacing: .14em; text-transform: uppercase; }
/* autres solutions */
.sub-more { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px,2vw,24px); margin-top: clamp(34px,4vw,52px); }
.sub-more a { display: flex; flex-direction: column; gap: 10px; padding: clamp(22px,2.4vw,30px);
border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; text-decoration: none;
transition: transform .4s var(--ease-out), box-shadow .4s var(--ease), border-color .3s var(--ease); }
.sub-more a:hover { transform: translateY(-5px); box-shadow: 0 34px 70px -34px rgba(0,85,254,.35); border-color: rgba(0,85,254,.28); }
.sub-more-k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.sub-more-t { font-family: var(--font-serif); font-weight: 400; font-size: clamp(20px,2vw,27px); color: var(--ink); }
.sub-more-d { font-size: 14px; color: var(--ink-3); line-height: 1.55; }
@media (max-width: 900px) {
.sub-steps, .sub-stats { grid-template-columns: 1fr; }
.sub-more { grid-template-columns: 1fr; }
.sub-title { max-width: 18ch; }
}
/* ──────────────────────────── PAGE DÉMO (formulaire → Cal.com) ──────────────────────────── */
.demo-wrap { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(28px, 4vw, 64px); align-items: start;
padding: clamp(120px, 15vh, 170px) var(--pad) clamp(70px, 9vw, 120px); }
.demo-aside .kicker { margin-bottom: 16px; }
.demo-aside h1 { font-family: var(--font-serif); font-weight: 400; letter-spacing: -.025em; line-height: .98;
font-size: clamp(32px, 4.4vw, 58px); color: var(--ink); margin: 0 0 18px; }
.demo-aside h1 em { font-style: italic; color: var(--accent); }
.demo-aside p { font-size: clamp(15px,1.5vw,17px); line-height: 1.6; color: var(--ink-2); margin: 0 0 26px; max-width: 46ch; }
.demo-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.demo-points li { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; color: var(--ink-2); line-height: 1.5; }
.demo-points svg { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; color: var(--accent); }
.demo-card { background: #fff; border: 1px solid rgba(10,12,18,.08); border-radius: 26px;
padding: clamp(24px, 3vw, 40px);
box-shadow: 0 40px 90px -50px rgba(10,12,18,.4), 0 8px 24px -14px rgba(10,12,18,.12); }
.demo-card h2 { font-family: var(--font-sans); font-size: clamp(19px,2vw,23px); font-weight: 600; color: var(--ink); margin: 0 0 6px; letter-spacing: -.01em; }
.demo-card .demo-sub { font-size: 14.5px; color: var(--ink-3); margin: 0 0 26px; }
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.field label { font-size: 13.5px; font-weight: 500; color: var(--ink); }
.field label span { color: var(--ink-4); font-weight: 400; }
.field input, .field select, .field textarea {
font-family: inherit; font-size: 15.5px; color: var(--ink);
background: #f4f6fa; border: 1px solid transparent; border-radius: 13px;
padding: 13px 15px; outline: none; width: 100%;
transition: border-color .25s var(--ease), background .25s var(--ease);
}
.field textarea { resize: vertical; min-height: 92px; line-height: 1.5; }
.field select { appearance: none; cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' stroke='%235b6472' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 14px center; background-size: 14px; padding-right: 38px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: rgba(0,85,254,.45); background: #fff; }
.field.is-error input, .field.is-error select { border-color: #e5484d; background: #fff5f5; }
.field .err { font-size: 12.5px; color: #e5484d; display: none; }
.field.is-error .err { display: block; }
.demo-submit { width: 100%; justify-content: center; margin-top: 6px; }
.demo-note { margin-top: 16px; font-size: 12.5px; color: var(--ink-4); text-align: center; line-height: 1.5; }
@media (max-width: 900px) {
.demo-wrap { grid-template-columns: 1fr; padding-top: clamp(108px, 14vh, 150px); }
.f-row { grid-template-columns: 1fr; gap: 0; }
}
/* ──────────────────────────── BOUTIQUE TEST (démo OptiDress) ──────────────────────────── */
.shop-body { background: #fff; }
/* bandeau démo */
.shop-banner { background: var(--ink); color: #fff; text-align: center; padding: 10px 18px; font-size: 13.5px; line-height: 1.45; position: relative; z-index: 60; }
.shop-banner b { font-weight: 600; }
.shop-banner a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
/* en-tête de la fausse boutique */
.shop-head { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.9); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.shop-head-in { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 0; }
.shop-brand { font-family: var(--font-serif); font-size: clamp(19px,2vw,25px); letter-spacing: .01em; color: var(--ink); text-decoration: none; }
.shop-nav { display: flex; gap: 24px; }
.shop-nav a { font-size: 14px; color: var(--ink-2); text-decoration: none; }
.shop-nav a:hover { color: var(--accent); }
.shop-cart { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink); }
.shop-cart svg { width: 19px; height: 19px; }
@media (max-width: 720px) { .shop-nav { display: none; } }
/* hero boutique */
.shop-hero { padding: clamp(34px,5vw,64px) 0 clamp(24px,3vw,36px); text-align: center; }
.shop-hero h1 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(30px,4.4vw,56px); letter-spacing: -.02em; color: var(--ink); margin: 0 0 14px; }
.shop-hero p { max-width: 600px; margin: 0 auto; font-size: clamp(14.5px,1.4vw,16.5px); color: var(--ink-2); line-height: 1.6; }
/* grille produits */
.shop-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px,1.8vw,26px); padding-bottom: clamp(60px,8vw,110px); }
.pcard-s { border: 0; background: none; padding: 0; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.pcard-s .ph { position: relative; border-radius: 18px; overflow: hidden; background: #f6f8fc; aspect-ratio: 4/5; }
.pcard-s .ph img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease-out); }
.pcard-s:hover .ph img { transform: scale(1.04); }
.pcard-s .tag { position: absolute; top: 12px; left: 12px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
text-transform: uppercase; padding: 6px 11px; border-radius: 99px; background: var(--accent); color: #fff; }
.pcard-s .tag-soon { background: rgba(10,12,18,.55); }
.pcard-s h3 { font-size: 15px; font-weight: 500; color: var(--ink); margin: 14px 0 4px; }
.pcard-s .pr { font-size: 15px; color: var(--ink-2); }
@media (max-width: 900px) { .shop-grid { grid-template-columns: repeat(2, 1fr); } }
/* fiche produit (panneau) */
.pv { position: fixed; inset: 0; z-index: 200; display: none; }
.pv.is-open { display: block; }
.pv-scrim { position: absolute; inset: 0; background: rgba(10,12,18,.45); backdrop-filter: blur(4px); }
.pv-panel { position: absolute; inset: 0; margin: auto; width: min(1060px, 94vw); height: min(660px, 92vh);
background: #fff; border-radius: 26px; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr;
box-shadow: 0 60px 120px -40px rgba(10,12,18,.5); }
.pv-media { position: relative; background: #f6f8fc; overflow: hidden; }
.pv-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv-info { padding: clamp(24px,3vw,40px); overflow-y: auto; }
.pv-close { position: absolute; top: 14px; right: 14px; z-index: 3; width: 38px; height: 38px; border-radius: 50%;
border: 0; background: rgba(255,255,255,.92); cursor: pointer; display: grid; place-items: center; box-shadow: 0 4px 14px -4px rgba(10,12,18,.3); }
.pv-close svg { width: 16px; height: 16px; }
.pv-info h2 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(24px,2.6vw,34px); color: var(--ink); margin: 0 0 8px; }
.pv-price { font-size: 19px; color: var(--ink); margin-bottom: 20px; }
.pv-desc { font-size: 14.5px; line-height: 1.6; color: var(--ink-3); margin-bottom: 22px; }
.pv-lab { font-size: 12.5px; font-weight: 500; color: var(--ink); margin-bottom: 9px; display: block; }
.pv-sizes { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.pv-size { min-width: 48px; padding: 10px 12px; border-radius: 11px; border: 1px solid var(--line); background: #fff;
font: inherit; font-size: 14px; cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.pv-size:hover { border-color: rgba(0,85,254,.4); }
.pv-size.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.pv-size .rec { display: block; font-size: 9.5px; letter-spacing: .06em; margin-top: 2px; opacity: .8; }
.pv-actions { display: flex; flex-direction: column; gap: 10px; }
.pv-actions .btn { width: 100%; justify-content: center; }
.btn-tryon { background: var(--accent); color: #fff; }
.pv-note { font-size: 12px; color: var(--ink-4); margin-top: 14px; line-height: 1.5; }
/* widget OptiDress dans la fiche */
.od-widget { position: absolute; inset: 0; z-index: 4; background: rgba(255,255,255,.97); backdrop-filter: blur(8px);
display: none; flex-direction: column; padding: clamp(20px,2.6vw,30px); overflow-y: auto; }
.od-widget.is-open { display: flex; }
.od-top { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.od-top img { height: 20px; width: auto; }
.od-top span { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.od-q { margin-bottom: 18px; }
.od-q > label { display: block; font-size: 12.5px; font-weight: 500; color: var(--ink); margin-bottom: 8px; }
.od-opts { display: flex; gap: 8px; flex-wrap: wrap; }
.od-opt { padding: 9px 15px; border-radius: 10px; border: 1px solid var(--line); background: #fff; font: inherit; font-size: 13.5px; cursor: pointer; transition: .2s; }
.od-opt:hover { border-color: rgba(0,85,254,.4); }
.od-opt.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.od-num { display: flex; gap: 10px; }
.od-num input { flex: 1; min-width: 0; font: inherit; font-size: 15px; padding: 11px 13px; border-radius: 11px; border: 1px solid var(--line); background: #fff; outline: none; }
.od-num input:focus { border-color: rgba(0,85,254,.45); }
.od-run { margin-top: auto; }
.od-run .btn { width: 100%; justify-content: center; }
/* état génération + résultat */
.od-stage { position: absolute; inset: 0; z-index: 5; display: none; background: #f6f8fc; }
.od-stage.is-open { display: block; }
.od-stage img { width: 100%; height: 100%; object-fit: contain; background: #eef2f9; }
.od-loading { position: absolute; inset: 0; display: grid; place-items: center; background: #f6f8fc; text-align: center; padding: 24px; }
.od-loading p { font-size: 14px; color: var(--ink-2); margin-top: 16px; }
.od-spin { width: 42px; height: 42px; border-radius: 50%; border: 3px solid rgba(0,85,254,.18); border-top-color: var(--accent);
animation: odSpin .9s linear infinite; margin: 0 auto; }
@keyframes odSpin { to { transform: rotate(360deg); } }
.od-badge { position: absolute; left: 14px; bottom: 14px; z-index: 6; display: inline-flex; align-items: center; gap: 8px;
padding: 8px 14px; border-radius: 99px; background: rgba(255,255,255,.94); box-shadow: 0 8px 22px -8px rgba(10,12,18,.35); }
.od-badge img { height: 15px; width: auto; }
.od-badge b { font-size: 11.5px; font-weight: 600; color: var(--ink); }
.od-back { position: absolute; right: 14px; bottom: 14px; z-index: 6; padding: 9px 15px; border-radius: 99px; border: 0;
background: rgba(255,255,255,.94); font: inherit; font-size: 12.5px; cursor: pointer; box-shadow: 0 8px 22px -8px rgba(10,12,18,.35); }
@media (max-width: 860px) {
.pv-panel { grid-template-columns: 1fr; grid-template-rows: 44vh 1fr; width: 100vw; height: 100vh; border-radius: 0; }
}
/* ════════════════ BOUTIQUE MAISON AREV (démo) ════════════════ */
.ma-body { background: #fff; color: #14140f; }
.ma-wrap { max-width: 1360px; margin: 0 auto; padding: 0 clamp(18px,3vw,44px); }
/* barre d'annonce démo */
.ma-strip { background: #14140f; color: #fff; text-align: center; padding: 9px 16px; font-size: 12.5px; letter-spacing: .01em; }
.ma-strip a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
/* header boutique */
.ma-head { position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,.94); backdrop-filter: blur(14px); border-bottom: 1px solid #eceae4; }
.ma-head-in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; padding: 18px 0; }
.ma-nav { display: flex; gap: 26px; }
.ma-nav a { font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: #14140f; text-decoration: none; }
.ma-nav a:hover { opacity: .55; }
.ma-logo { justify-self: center; display: block; }
.ma-logo img { height: 44px; width: auto; display: block; }
.ma-tools { justify-self: end; display: flex; gap: 18px; align-items: center; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; }
.ma-tools button { border: 0; background: none; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; color: #14140f; }
@media (max-width: 900px) { .ma-nav { display: none; } .ma-head-in { grid-template-columns: 1fr auto 1fr; } .ma-logo img { height: 34px; } .ma-tools { gap: 12px; font-size: 11px; } }
/* ── BANDEAU OPTIDRESS (version claire) ── */
.od-banner { position: relative; background: #e7e7e9; overflow: hidden; }
.od-banner-in { display: grid; grid-template-columns: 1.05fr .95fr; gap: 20px; align-items: center; min-height: clamp(360px, 40vw, 470px); padding: clamp(30px,4vw,52px) 0; }
.od-b-kick { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.od-b-kick i { display: block; width: 46px; height: 2px; background: var(--accent); }
.od-b-kick span { font-size: 12.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--accent); }
.od-b-title { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: clamp(34px, 5vw, 68px);
line-height: 1.02; letter-spacing: -.01em; color: #14140f; margin: 0 0 16px; }
.od-b-sub { font-size: clamp(13.5px,1.35vw,15.5px); line-height: 1.5; color: #55565c; max-width: 42ch; margin: 0 0 clamp(22px,3vw,34px); }
.od-b-cta { display: inline-flex; align-items: center; gap: 10px; background: var(--accent); color: #fff; text-decoration: none;
padding: 14px 26px; border-radius: 8px; font-size: 14.5px; font-weight: 500;
box-shadow: 0 14px 30px -14px rgba(0,85,254,.65); transition: transform .3s var(--ease-out), box-shadow .3s var(--ease); }
.od-b-cta:hover { transform: translateY(-2px); box-shadow: 0 20px 38px -14px rgba(0,85,254,.75); }
/* visuel du bandeau : avatar + contrôles */
.od-b-visual { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: clamp(14px,2vw,30px); min-height: clamp(300px,34vw,420px); }
.od-b-avatar { position: relative; }
.od-b-avatar img { height: clamp(230px, 30vw, 400px); width: auto; display: block; filter: drop-shadow(0 26px 30px rgba(10,12,18,.18)); }
.od-b-avatar::after { content: ''; position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%);
width: 62%; height: 26px; border-radius: 50%; background: radial-gradient(ellipse, rgba(0,85,254,.30), transparent 70%); }
.od-b-chip { position: absolute; left: -22%; bottom: 30%; width: clamp(88px,10vw,118px); aspect-ratio: 1; border-radius: 14px;
background: rgba(255,255,255,.55); border: 1.5px solid rgba(0,85,254,.55); display: grid; place-items: center;
font-size: 12px; color: #55565c; }
.od-b-panel { display: flex; flex-direction: column; gap: 10px; align-self: center; }
.od-b-seg { display: inline-flex; background: rgba(255,255,255,.6); border-radius: 12px; padding: 5px; gap: 4px; }
.od-b-seg span { width: 44px; height: 34px; display: grid; place-items: center; border-radius: 9px; font-size: 15px; color: #9a9aa2; }
.od-b-seg span.on { background: #fff; border: 1.5px solid var(--accent); color: var(--accent); }
.od-b-pills { display: flex; background: rgba(255,255,255,.6); border-radius: 12px; overflow: hidden; }
.od-b-pill { padding: 11px 16px; font-size: 12.5px; color: #77787f; display: flex; gap: 7px; align-items: baseline; }
.od-b-pill b { color: #14140f; font-size: 14px; font-weight: 600; }
.od-b-pill + .od-b-pill { border-left: 1px solid rgba(20,20,15,.09); }
.od-b-skin { height: 44px; border-radius: 12px; border: 3px solid rgba(255,255,255,.6); position: relative; overflow: hidden;
background: linear-gradient(90deg,#f7e2cf,#f0cdae,#e0b48c,#c9905f,#a86c3f,#7d4a26,#552f16,#2e1a0d); }
.od-b-skin::after { content: ''; position: absolute; left: 46%; top: 50%; transform: translate(-50%,-50%);
width: 15px; height: 15px; border-radius: 50%; border: 2.5px solid #fff; }
.od-b-by { position: absolute; right: clamp(18px,3vw,44px); bottom: 16px; display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-style: italic; color: #55565c; }
.od-b-by img { height: 17px; width: auto; }
@media (max-width: 900px) {
.od-banner-in { grid-template-columns: 1fr; text-align: center; }
.od-b-kick { justify-content: center; }
.od-b-sub { margin-inline: auto; }
.od-b-chip { display: none; }
.od-b-visual { flex-direction: column; align-items: center; gap: 18px; }
.od-b-by { position: static; justify-content: center; margin-top: 14px; }
}
/* catalogue */
.ma-sec { padding-block: clamp(46px,6vw,84px); } /* padding-block : n'écrase pas le padding latéral de .ma-wrap */
.ma-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: clamp(24px,3vw,40px); }
.ma-sec-head h2 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(26px,3.2vw,42px); margin: 0; color: #14140f; }
.ma-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.ma-filter { padding: 8px 16px; border-radius: 99px; border: 1px solid #e2e0da; background: #fff; font: inherit; font-size: 12.5px;
letter-spacing: .04em; cursor: pointer; color: #55565c; transition: .2s; }
.ma-filter:hover { border-color: #14140f; color: #14140f; }
.ma-filter.on { background: #14140f; border-color: #14140f; color: #fff; }
.ma-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px,2.2vw,34px); }
@media (max-width: 900px) {
.ma-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
.ma-sec-head { flex-direction: column; align-items: flex-start; gap: 16px; }
.ma-filters { width: 100%; }
}
.ma-card { border: 0; background: none; padding: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.ma-card-ph { position: relative; overflow: hidden; background: #f4f4f0; aspect-ratio: 4/5; }
.ma-card-ph img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s var(--ease-out); }
.ma-card:hover .ma-card-ph img { transform: scale(1.05); }
.ma-flag { position: absolute; top: 12px; left: 12px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
padding: 6px 11px; background: var(--accent); color: #fff; }
.ma-flag-soon { background: rgba(20,20,15,.6); }
.ma-try { position: absolute; left: 12px; right: 12px; bottom: 12px; padding: 11px; background: rgba(255,255,255,.95);
border: 0; font: inherit; font-size: 12.5px; letter-spacing: .04em; cursor: pointer; opacity: 0; transform: translateY(8px);
transition: opacity .3s var(--ease), transform .3s var(--ease-out); }
.ma-card:hover .ma-try { opacity: 1; transform: none; }
.ma-card h3 { font-size: 14.5px; font-weight: 400; margin: 14px 0 5px; color: #14140f; }
.ma-card .ma-price { font-size: 14px; color: #6a6b70; }
/* ═══ Fiche produit (panneau latéral) ═══════════════════════ */
.ma-col { font-size: 12.5px; color: #9a9aa2; margin-bottom: 3px; }
.pf { position: fixed; inset: 0; z-index: 280; display: none; }
.pf.is-open { display: block; }
.pf-scrim { position: absolute; inset: 0; background: rgba(20,20,15,.42); backdrop-filter: blur(3px);
opacity: 0; animation: pfFade .3s var(--ease-out) forwards; }
@keyframes pfFade { to { opacity: 1; } }
.pf-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(920px, 96vw); background: #fff;
display: grid; grid-template-columns: 1.05fr 1fr; overflow: hidden;
box-shadow: -30px 0 80px rgba(20,20,15,.18); transform: translateX(30px); opacity: 0;
animation: pfIn .42s var(--ease-out) forwards; }
@keyframes pfIn { to { transform: none; opacity: 1; } }
.pf-close { position: absolute; top: 16px; right: 16px; z-index: 6; width: 38px; height: 38px; border-radius: 50%;
border: 1px solid #e2e0da; background: rgba(255,255,255,.9); color: #14140f; cursor: pointer;
display: grid; place-items: center; }
.pf-close:hover { background: #14140f; color: #fff; border-color: #14140f; }
.pf-close svg { width: 15px; height: 15px; }
.pf-media { position: relative; background: #f4f4f0; display: flex; align-items: center; justify-content: center; }
.pf-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-flag { position: absolute; top: 16px; left: 16px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
padding: 6px 11px; border-radius: 3px; background: var(--blue); color: #fff; }
.pf-flag.is-soon { background: rgba(20,20,15,.6); }
.pf-info { padding: clamp(28px,3.4vw,52px) clamp(22px,2.8vw,44px); overflow-y: auto; }
.pf-brand { font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: #9a9aa2; }
.pf-title { font-family: var(--font-serif); font-weight: 400; font-size: clamp(25px,2.6vw,34px);
color: #14140f; margin: 10px 0 8px; line-height: 1.12; }
.pf-price { font-size: 17px; color: #14140f; margin-bottom: 18px; }
.pf-desc { font-size: 14px; line-height: 1.65; color: #55565c; margin: 0 0 26px; }
.pf-block { margin-bottom: 24px; }
.pf-lab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #9a9aa2; margin-bottom: 11px; }
.pf-lab b { color: #14140f; font-weight: 500; letter-spacing: .04em; text-transform: none; font-size: 13px; }
.pf-guide { font-size: 10.5px; color: #9a9aa2; text-decoration: underline; text-underline-offset: 3px; letter-spacing: .06em; }
.pf-guide:hover { color: #14140f; }
.pf-swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.pf-sw { width: 34px; height: 34px; border-radius: 50%; border: 1px solid #e2e0da; cursor: pointer; padding: 3px;
background: #fff; transition: border-color .2s var(--ease-out); }
.pf-sw i { display: block; width: 100%; height: 100%; border-radius: 50%; }
.pf-sw:hover { border-color: #b5b3ac; }
.pf-sw.on { border-color: #14140f; border-width: 1.5px; }
.pf-sizes { display: flex; gap: 8px; flex-wrap: wrap; }
.pf-size { min-width: 48px; padding: 10px 12px; border-radius: 3px; border: 1px solid #e2e0da; background: #fff;
font: inherit; font-size: 13px; color: #55565c; cursor: pointer; transition: all .2s var(--ease-out); }
.pf-size:hover { border-color: #14140f; color: #14140f; }
.pf-size.on { background: #14140f; border-color: #14140f; color: #fff; }
.pf-btn { width: 100%; border: 0; border-radius: 4px; padding: 15px; font: inherit; font-size: 14px; font-weight: 500;
cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 9px; transition: all .22s var(--ease-out); }
.pf-btn-try { background: var(--blue); color: #fff; margin-bottom: 10px; }
.pf-btn-try:hover { background: #0044d1; }
.pf-btn-try img { height: 15px; width: auto; filter: brightness(0) invert(1); }
.pf-btn-try[disabled] { background: #e8e8e4; color: #a2a29c; cursor: not-allowed; }
.pf-btn-try[disabled] img { filter: none; opacity: .35; }
.pf-btn-cart { background: #14140f; color: #fff; border: 1px solid #14140f; }
.pf-btn-cart:hover { background: #fff; color: #14140f; }
.pf-btn-cart.done { background: #fff; color: #14140f; }
.pf-note { font-size: 11.5px; line-height: 1.55; color: #9a9aa2; margin: 14px 0 0; text-align: center; }
.pf-meta { list-style: none; padding: 20px 0 0; margin: 22px 0 0; border-top: 1px solid #eceae4; }
.pf-meta li { font-size: 12px; line-height: 1.6; color: #77787e; margin-bottom: 6px; }
@media (max-width: 900px) {
.pf-panel { width: 100vw; grid-template-columns: 1fr; grid-template-rows: auto 1fr; overflow-y: auto; }
.pf-media { aspect-ratio: 1/1; }
.pf-info { padding: 24px 20px 40px; overflow: visible; }
.pf-close { background: rgba(255,255,255,.92); }
}
/* mobile : pas de survol → le bouton d'essayage est toujours visible */
@media (max-width: 900px) {
.ma-try { opacity: 1; transform: none; left: 10px; right: 10px; bottom: 10px; padding: 9px; font-size: 11.5px; }
.ma-card h3 { font-size: 13.5px; }
.ma-card .ma-price { font-size: 13px; }
}
/* pied de boutique */
.ma-foot { border-top: 1px solid #eceae4; padding: clamp(40px,5vw,64px) 0 30px; }
.ma-foot-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 30px; }
.ma-foot h4 { font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase; color: #9a9aa2; margin: 0 0 14px; font-weight: 500; }
.ma-foot a, .ma-foot p { display: block; font-size: 13.5px; color: #55565c; text-decoration: none; margin-bottom: 9px; line-height: 1.5; }
.ma-foot a:hover { color: #14140f; }
.ma-foot-bottom { margin-top: clamp(30px,4vw,50px); padding-top: 22px; border-top: 1px solid #eceae4; display: flex;
justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: 12px; color: #9a9aa2; }
@media (max-width: 760px) { .ma-foot-cols { grid-template-columns: 1fr 1fr; } }
/* ════════════════ WIDGET OPTIDRESS (réplique du MVP) ════════════════ */
.odx { position: fixed; inset: 0; z-index: 300; display: none; }
.odx.is-open { display: block; }
.odx-scrim { position: absolute; inset: 0; background: rgba(8,9,14,.72); backdrop-filter: blur(6px); }
.odx-app { position: absolute; inset: 0; margin: auto; width: min(1180px,96vw); height: min(760px,94vh);
background: #14161f; border-radius: 24px; overflow: hidden; display: grid; grid-template-columns: 380px 1fr;
box-shadow: 0 70px 140px -50px rgba(0,0,0,.8); color: #e9eaf0; }
.odx-close { position: absolute; top: 16px; right: 16px; z-index: 8; width: 38px; height: 38px; border-radius: 50%;
border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.07); cursor: pointer; display: grid; place-items: center; }
.odx-close svg { width: 15px; height: 15px; stroke: #e9eaf0; }
/* colonne gauche : panneau */
.odx-side { background: #1b1e29; padding: clamp(20px,2.4vw,28px); overflow-y: auto; display: flex; flex-direction: column; }
.odx-h { font-size: 15.5px; font-weight: 600; margin: 0 0 4px; color: #fff; }
.odx-hint { font-size: 12.5px; color: #8a8fa3; margin: 0 0 20px; }
.odx-lab { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: #7c8198; margin: 0 0 10px; display: block; }
.odx-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
.odx-tile { background: #232736; border: 1.5px solid transparent; border-radius: 13px; padding: 14px 12px; cursor: pointer;
font: inherit; color: #c9cde0; text-align: center; position: relative; transition: .2s; }
.odx-tile:hover { border-color: rgba(90,120,255,.4); }
.odx-tile.on { background: #eef2ff; border-color: #3b6bff; color: #14161f; }
.odx-tile .ic { display: block; font-size: 17px; margin-bottom: 5px; }
.odx-tile b { display: block; font-size: 13px; font-weight: 600; }
.odx-tile small { display: block; font-size: 10.5px; line-height: 1.35; margin-top: 4px; opacity: .72; }
.odx-tile .dot { position: absolute; top: 10px; right: 10px; width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.28); }
.odx-tile.on .dot { background: #3b6bff; border-color: #3b6bff; }
.odx-step { display: flex; align-items: center; gap: 10px; background: #232736; border-radius: 13px; padding: 10px 12px; }
.odx-step .t { flex: 1; text-align: center; }
.odx-step .t span { display: block; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: #7c8198; }
.odx-step .t b { font-size: 17px; font-weight: 600; color: #fff; }
.odx-step .t b i { font-style: normal; font-size: 11px; color: #8a8fa3; margin-left: 2px; }
.odx-step button { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255,255,255,.16);
background: rgba(255,255,255,.05); color: #e9eaf0; font: inherit; font-size: 16px; line-height: 1; cursor: pointer; }
.odx-step button:hover { background: rgba(255,255,255,.12); }
.odx-go { margin-top: auto; padding-top: 18px; }
.odx-btn { width: 100%; border: 0; border-radius: 12px; padding: 14px; font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; }
.odx-btn-primary { background: #2b3350; color: #fff; }
.odx-btn-primary:hover { background: #354064; }
.odx-btn-ghost { background: transparent; border: 1px solid rgba(255,255,255,.18); color: #c9cde0; margin-bottom: 9px; font-weight: 500; }
.odx-btn-ghost:hover { background: rgba(255,255,255,.06); }
.odx-warn { display: flex; gap: 8px; align-items: center; margin-top: 12px; font-size: 11.5px; color: #d9a441; }
/* colonne droite : scène */
.odx-stage { position: relative; background: radial-gradient(circle at 50% 42%, #232838 0%, #14161f 62%); display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 26px 26px 84px; }
.odx-stage-img { max-height: 100%; max-width: 100%; min-height: 0; object-fit: contain; filter: drop-shadow(0 30px 40px rgba(0,0,0,.55)); }
.odx-glow { position: absolute; left: 50%; bottom: 11%; transform: translateX(-50%); width: 42%; height: 40px; border-radius: 50%;
background: radial-gradient(ellipse, rgba(90,130,255,.42), transparent 72%); filter: blur(9px); }
.odx-views { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); display: inline-flex;
background: rgba(255,255,255,.09); border-radius: 99px; padding: 4px; gap: 2px; backdrop-filter: blur(8px); }
.odx-views button { border: 0; background: none; font: inherit; font-size: 12.5px; color: #b9bed2; padding: 8px 18px; border-radius: 99px; cursor: pointer; }
.odx-views button.on { background: #fff; color: #14161f; font-weight: 500; }
.odx-by { position: absolute; right: 18px; bottom: 20px; z-index: 3; display: flex; align-items: center; gap: 7px; font-size: 11px; font-style: italic; color: #8a8fa3; }
.odx-by img { height: 14px; width: auto; filter: brightness(0) invert(1); opacity: .85; }
/* progression */
.odx-prog { position: absolute; inset: 0; display: none; place-items: center; background: #14161f; z-index: 4; }
.odx-prog.is-on { display: grid; }
.odx-prog-in { width: min(320px,70%); text-align: center; }
.odx-prog p { font-size: 13.5px; color: #c9cde0; margin: 0 0 14px; }
.odx-bar { height: 5px; border-radius: 99px; background: rgba(255,255,255,.1); overflow: hidden; }
.odx-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg,#3b6bff,#7aa0ff); border-radius: 99px; transition: width .3s linear; }
.odx-pct { margin-top: 9px; font-size: 12px; color: #7c8198; }
/* panier de vêtements (étape 2) */
.odx-cart { display: none; flex-direction: column; height: 100%; }
.odx-cart.is-on { display: flex; }
.odx-items { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 10px; overflow-y: auto; margin-bottom: 16px; }
.odx-item { flex: 0 0 calc(50% - 5px); border: 2px solid transparent; border-radius: 13px; overflow: hidden; background: #fff; cursor: pointer; padding: 0; position: relative; align-self: flex-start; }
.odx-item img { width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; display: block; }
.odx-item.on { border-color: #3b6bff; }
.odx-item .lock { position: absolute; inset: 0; background: rgba(20,22,31,.62); color: #fff; font-size: 10px; letter-spacing: .08em;
text-transform: uppercase; display: grid; place-items: center; text-align: center; padding: 8px; }
.odx-worn { background: #232736; border-radius: 12px; padding: 11px 13px; margin-bottom: 14px; }
.odx-worn span { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #7c8198; display: block; margin-bottom: 7px; }
.odx-worn b { font-size: 13px; color: #fff; font-weight: 500; }
.odx-worn em { font-style: normal; color: #8a8fa3; font-size: 12px; }
@media (max-width: 900px) {
.odx-app { grid-template-columns: 1fr; grid-template-rows: minmax(0,1fr) auto; width: 100vw; height: 100vh; border-radius: 0; }
.odx-stage { order: 1; min-height: 38vh; padding: 18px 18px 60px; }
.odx-side { order: 2; max-height: 56vh; }
.odx-views { bottom: 12px; padding: 4px; }
.odx-views button { padding: 7px 14px; font-size: 12px; }
/* « Powered by » remonte en haut à gauche : plus de collision avec le sélecteur de vue */
.odx-by { top: 12px; left: 14px; right: auto; bottom: auto; background: rgba(20,22,31,.72); padding: 4px 10px; border-radius: 99px; backdrop-filter: blur(4px); }
.odx-close { top: 12px; right: 12px; }
/* mobile : bande horizontale de vêtements (plus lisible qu'une grille écrasée) */
.odx-items { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; padding-bottom: 4px;
scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.odx-items::-webkit-scrollbar { height: 4px; }
.odx-items::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 99px; }
.odx-item { flex: 0 0 94px; scroll-snap-align: start; }
.odx-item .lock { font-size: 8.5px; letter-spacing: .05em; }
.odx-cart { min-height: 0; }
}
/* ═══ Démo interactive : cadre téléphone (page fonctionnalité OptiDress) ═══ */
.od-phone {
position: relative;
width: min(400px, 92vw);
height: clamp(680px, 82vh, 800px);
margin: 0 auto;
padding: 12px;
border-radius: 48px;
background: linear-gradient(160deg, #1a1d26, #0b0d12);
box-shadow: 0 60px 120px -50px rgba(0,85,254,.45),
0 30px 60px -30px rgba(10,12,18,.35),
inset 0 0 0 1.5px rgba(255,255,255,.08);
}
.od-phone iframe {
width: 100%; height: 100%; border: 0; display: block;
border-radius: 36px; background: #fff;
}
.sub-visual-live { text-align: center; }
@media (max-width: 899px) {
.od-phone { width: min(360px, 90vw); height: clamp(620px, 78vh, 740px); padding: 10px; border-radius: 40px; }
.od-phone iframe { border-radius: 31px; }
}
/* ═══ Résultats client : carte étude de cas (page fonctionnalité) ═══ */
.sub-case {
display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(28px, 4vw, 56px);
max-width: 1040px; margin: clamp(38px, 5vw, 60px) auto 0;
padding: clamp(28px, 3.5vw, 48px);
border: 1px solid var(--line); border-radius: var(--radius-lg);
background: #fff; text-align: left;
box-shadow: 0 40px 90px -55px rgba(0, 85, 254, .25);
position: relative; z-index: 2; /* les étapes glissent DERRIÈRE la carte */
}
/* étapes qui émergent sous le bloc précédent (glissent vers le bas, clippées en haut) */
.sub-steps-out { position: relative; z-index: 1; margin-top: clamp(22px, 3vw, 34px); overflow: hidden; }
/* ═══ Bande défilante des logos clients ═══ */
.od-logos {
margin-top: clamp(38px, 5vw, 58px);
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.od-logos-piste { display: flex; width: max-content; animation: odLogos 30s linear infinite; }
.od-logos-set {
display: flex; align-items: center;
gap: clamp(44px, 6vw, 84px); padding-right: clamp(44px, 6vw, 84px);
}
.od-logos-set img { height: 46px; width: auto; filter: brightness(0); opacity: .5; }
.od-logos-set span {
font-family: var(--font-serif); font-size: clamp(18px, 1.6vw, 23px);
letter-spacing: -.01em; color: var(--ink); opacity: .5; white-space: nowrap;
}
.od-logos-set .od-logo-italic { font-style: italic; }
@keyframes odLogos { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .od-logos-piste { animation: none; } }
.sub-case-left { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.sub-case-logo { height: 56px; width: auto; }
.sub-case-left blockquote { margin: 0; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.6; color: var(--ink-2); }
.sub-case-sign { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.sub-case-kpis { display: flex; flex-direction: column; justify-content: center; }
.sub-case-kpi { display: grid; grid-template-columns: minmax(118px, auto) 1fr; align-items: center; gap: clamp(16px, 2vw, 26px); padding: clamp(14px, 1.6vw, 20px) 0; }
.sub-case-kpi + .sub-case-kpi { border-top: 1px solid var(--line); }
.sub-case-kpi b { font-family: var(--font-serif); font-weight: 400; font-size: clamp(34px, 3.4vw, 48px); line-height: 1; color: var(--accent); letter-spacing: -.02em; }
.sub-case-kpi span { font-size: 14px; color: var(--ink-2); line-height: 1.5; }
@media (max-width: 899px) {
.sub-case { grid-template-columns: 1fr; gap: 24px; }
.sub-case-kpi { grid-template-columns: 96px 1fr; }
}
/* ═══ Bandeau CTA sombre (porté de la boutique test) ═══ */
.od-dark {
position: relative; overflow: hidden;
background: #0b0d12; color: #fff; text-align: center;
}
.od-dark::before {
content: ''; position: absolute; left: 50%; top: -40%; transform: translateX(-50%);
width: 900px; height: 500px; border-radius: 50%;
background: radial-gradient(circle, rgba(0,85,254,.32), transparent 65%);
pointer-events: none;
}
.od-dark-in { position: relative; z-index: 1; padding: clamp(52px, 6.5vw, 96px) 20px; max-width: 760px; margin-inline: auto; }
.od-dark-logo { height: 26px; width: auto; filter: brightness(0) invert(1); opacity: .92; }
.od-dark h2 {
font-family: var(--font-serif); font-weight: 400; font-size: clamp(30px, 4vw, 52px);
line-height: 1.06; letter-spacing: -.01em; margin: 22px 0 14px; color: #fff;
}
.od-dark h2 em { font-style: italic; }
.od-dark p { font-size: 15px; line-height: 1.65; color: #aab0bf; margin: 0 auto 32px; max-width: 52ch; }
.od-dark-ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.od-dark-ctas a {
display: inline-flex; align-items: center; gap: 10px;
border-radius: 999px; padding: 14px 26px; font-size: 15px; font-weight: 500;
letter-spacing: -.005em; transition: all .24s cubic-bezier(.22, 1, .36, 1);
}
.od-dark-demo { background: var(--accent); color: #fff; box-shadow: 0 14px 34px -10px rgba(0,85,254,.6); }
.od-dark-demo:hover { background: #0044d1; transform: translateY(-1px); }
.od-dark-site { border: 1px solid rgba(255,255,255,.28); color: #fff; }
.od-dark-site:hover { border-color: #fff; background: rgba(255,255,255,.06); }
/* ═══ Vidéo « démo vs réel » (hero /optidress/) ═══ */
.od-video-phrase {
margin: 0 0 18px; text-align: center;
font-size: clamp(16px, 1.8vw, 20px); color: var(--ink-2);
}
.od-video-phrase em {
font-family: var(--font-serif); font-style: italic;
font-size: 1.18em; color: var(--accent);
}
.sub-visual-video video {
width: 100%; height: auto; display: block;
border-radius: clamp(16px, 2vw, 26px);
box-shadow: 0 60px 120px -50px rgba(0, 85, 254, .45), 0 0 0 1px rgba(10, 12, 18, .05);
}
/* ═══ Simulateur de taille interactif (hero /optisize/) ═══ */
.sub-visual-sim { text-align: center; }
.od-sim {
width: min(520px, 92vw); margin: 0 auto; text-align: center;
background: #fff; border: 1px solid var(--line); border-radius: 22px;
padding: clamp(26px, 4vw, 40px);
box-shadow: 0 40px 90px -55px rgba(0, 85, 254, .3);
}
.od-sim-kicker {
font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em;
text-transform: uppercase; color: var(--ink-3);
}
.od-sim-sous { font-size: 14px; color: var(--ink-3); margin: 10px 0 26px; }
.od-sim-curseurs { display: flex; flex-direction: column; gap: 18px; text-align: left; }
.od-sim-curseurs label { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.od-sim-val { float: right; font-weight: 450; color: var(--accent); font-variant-numeric: tabular-nums; }
.od-sim-curseurs input[type=range] {
width: 100%; margin: 10px 0 0; accent-color: var(--accent); height: 22px; cursor: pointer;
}
.od-sim-sil { font-size: 12.5px; color: var(--ink-3); margin: 18px 0 10px; }
.od-sim-sil b { color: var(--ink); font-weight: 600; }
.od-sim-tailles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.od-sim-t {
border-radius: 12px; border: 1px solid; padding: 13px 6px; background: #fff;
transition: transform .18s cubic-bezier(.22, 1, .36, 1), background .25s, border-color .25s;
}
.od-sim-t b { display: block; font-size: 17px; font-weight: 600; }
.od-sim-t span { display: block; font-size: 10px; line-height: 1.25; margin-top: 4px; }
.od-sim-t.ok { border-color: #a9d6b4; background: #f0f9f2; transform: translateY(-3px); }
.od-sim-t.ok b, .od-sim-t.ok span { color: #2c7a48; }
.od-sim-t.warn { border-color: #f0cfa2; background: #fdf7ee; }
.od-sim-t.warn b, .od-sim-t.warn span { color: #a5711f; }
.od-sim-t.bad { border-color: #f0b8b8; background: #fdf1f1; }
.od-sim-t.bad b, .od-sim-t.bad span { color: #b8443f; }
/* ═══ Rangée de logos réels (section #clients, home) ═══ */
.logo-row-img { margin-top: clamp(22px, 3vw, 38px); }
.logo-row-img img { height: 46px; width: auto; filter: brightness(0); opacity: .55; transition: opacity .3s var(--ease); }
.logo-row-img img:hover { opacity: 1; }