/* ==========================================================================
KOVY — Design system
Fond clair #FCFBFF, texte bleu nuit #10052E, accent violet #7626F5.
Quelques sections sont posées en aplat violet plein pour rythmer la page.
========================================================================== */
:root{
/* ---------- Palette Kovy -------------------------------------------------
Le site était sombre : le fond de page et les fonds de section passaient
par --ink, le texte par --tx-on-dark. Kovy est clair — ces variables
gardent leur nom (elles servent à des centaines d'endroits) mais portent
désormais l'inverse : --ink est le blanc cassé du fond, --tx-on-dark le
bleu nuit du texte. Les sections en aplat violet (.sec-violet, .sec-nuit)
les redéfinissent localement, ce qui rebascule tout leur contenu en clair.
------------------------------------------------------------------- */
/* Fonds de page et de section, du plus clair au plus soutenu */
--ink:#FCFBFF; /* fond de page */
--ink-2:#FFFFFF; /* surface détachée : cartes, barres */
--ink-3:#F5F0FF; /* surface teintée violet */
--ink-4:#EBE1FF; /* surface appuyée, pastilles */
--paper:#FFFFFF;
--paper-2:#F5F0FF;
--paper-3:#EBE1FF;
/* Bleu nuit — le texte, et les aplats foncés des sections .sec-nuit */
--night:#10052E;
--night-2:#1B0B47;
/* Violet de marque */
--violet:#7626F5;
--violet-l:#A23AF3;
--violet-d:#4D12C8;
--violet-soft:rgba(118,38,245,.10);
/* Accent : le violet joue ce rôle partout */
--acc:#7626F5;
--acc-d:#4D12C8;
--acc-soft:rgba(118,38,245,.12);
--blue:#A23AF3;
--green:#12A150;--green-d:#0C7A3C;
--red:#D93A2B;
/* Texte posé sur le fond courant (clair par défaut) */
--tx-on-dark:#10052E;
--tx-on-dark-2:rgba(16,5,46,.68);
--tx-on-dark-3:rgba(16,5,46,.46);
/* Texte des sections restées claires du thème d'origine */
--tx-on-light:#10052E;
--tx-on-light-2:rgba(16,5,46,.68);
--tx-on-light-3:rgba(16,5,46,.46);
/* Bordures posées sur le fond courant */
--bd-dark:rgba(16,5,46,.11);
--bd-dark-2:rgba(16,5,46,.20);
--bd-light:rgba(16,5,46,.11);
/* Rayons / ombres — plus rondes, dans l'esprit du logo */
--r-s:12px; --r-m:18px; --r-l:26px; --r-xl:34px; --r-pill:999px;
--sh-1:0 1px 2px rgba(16,5,46,.05), 0 10px 30px rgba(77,18,200,.08);
--sh-2:0 26px 64px -22px rgba(77,18,200,.30);
/* Rythme */
--maxw:1180px;
--gut:24px;
--sec:clamp(64px, 8vw, 120px);
/* Typo */
--ff-display:"Nunito Sans","Segoe UI",system-ui,-apple-system,sans-serif;
--ff-logo:"Fredoka","Nunito Sans","Segoe UI",system-ui,sans-serif;
--ff-body:"Nunito Sans","Segoe UI",system-ui,-apple-system,sans-serif;
}
/* ---------- Sections en aplat -------------------------------------------
Une section qui repasse en foncé redéfinit les mêmes variables : tout ce
qu'elle contient (titres, textes secondaires, bordures, cartes) suit sans
qu'aucune règle enfant n'ait à être dupliquée.
--------------------------------------------------------------------- */
.sec-violet,.sec-nuit,.hero-nuit{
--tx-on-dark:#FFFFFF;
--tx-on-dark-2:rgba(255,255,255,.76);
--tx-on-dark-3:rgba(255,255,255,.54);
--tx-on-light:#FFFFFF;
--tx-on-light-2:rgba(255,255,255,.76);
--tx-on-light-3:rgba(255,255,255,.54);
--bd-dark:rgba(255,255,255,.20);
--bd-dark-2:rgba(255,255,255,.32);
--bd-light:rgba(255,255,255,.20);
--ink-2:rgba(255,255,255,.10);
--ink-3:rgba(255,255,255,.15);
--ink-4:rgba(255,255,255,.22);
--paper:rgba(255,255,255,.10);
--paper-2:rgba(255,255,255,.15);
--paper-3:rgba(255,255,255,.22);
color:#FFFFFF;
}
.sec-violet{
--ink:#7626F5;
--acc:#FFFFFF;--acc-d:#EBE1FF;--acc-soft:rgba(255,255,255,.18);
--violet-d:#FFFFFF;--violet-l:#EBE1FF;--violet-soft:rgba(255,255,255,.18);
background:linear-gradient(150deg,#7626F5 0%,#8B2BF4 46%,#A23AF3 100%);
}
.sec-nuit{
--ink:#10052E;
--acc:#A23AF3;--acc-d:#7626F5;--acc-soft:rgba(162,58,243,.20);
--violet-d:#A23AF3;--violet-l:#C77BF7;
background:linear-gradient(160deg,#10052E 0%,#1B0B47 100%);
}
/* Dans .sec-violet, --acc devient blanc : un .btn plein héritait donc d'un
fond blanc ET d'un texte blanc, soit un bouton vide à l'écran. On lui rend
le violet de la marque comme couleur de texte. Les variantes ghost et dark
posent leur propre --fg et sont exclues, sinon cette règle plus spécifique
écraserait la leur. */
.sec-violet .btn:not(.btn-ghost):not(.btn-dark){--fg:#7626F5}
.sec-violet .card,.sec-nuit .card{background:var(--ink-2);border-color:var(--bd-dark)}
.sec-violet .simcard.glass,.sec-nuit .simcard.glass{background:rgba(255,255,255,.10);border-color:var(--bd-dark)}
/* Cartes claires posées n'importe où ---------------------------------------
Ces surfaces gardent un fond blanc même dans une section en aplat : elles
redéfinissent donc leurs couleurs de texte, sinon elles hériteraient du
blanc de la section et leur contenu disparaîtrait.
----------------------------------------------------------------------- */
.mcard,.mock,.acard,.dcard,.drivebox,.appmock,.fiche,.pieces li,.lgl-secu li{
--tx-on-dark:#10052E;--tx-on-dark-2:rgba(16,5,46,.68);--tx-on-dark-3:rgba(16,5,46,.46);
--tx-on-light:#10052E;--tx-on-light-2:rgba(16,5,46,.68);--tx-on-light-3:rgba(16,5,46,.46);
--bd-dark:rgba(16,5,46,.11);--bd-dark-2:rgba(16,5,46,.20);--bd-light:rgba(16,5,46,.11);
--acc:#7626F5;--acc-d:#4D12C8;--violet-d:#4D12C8;--violet-l:#A23AF3;
color:var(--night);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{
margin:0;background:var(--ink);color:var(--tx-on-dark);
font-family:var(--ff-body);font-size:17px;line-height:1.6;
-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
/* ---------- Typo ---------- */
h1,h2,h3,h4{font-family:var(--ff-display);font-weight:800;line-height:1.08;letter-spacing:-.02em;margin:0 0 .4em}
h1{font-size:clamp(2.5rem,6.2vw,4.6rem)}
h2{font-size:clamp(2rem,4.4vw,3.25rem)}
h3{font-size:clamp(1.25rem,2.2vw,1.6rem);letter-spacing:-.015em}
h4{font-size:1.05rem;letter-spacing:-.01em}
p{margin:0 0 1em}
.lead{font-size:clamp(1.05rem,1.6vw,1.28rem);color:var(--tx-on-dark-2);max-width:62ch}
.sec-light .lead,.sec-soft .lead{color:var(--tx-on-light-2)}
.mono{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-variant-numeric:tabular-nums}
.acc{color:var(--acc)}
.strike{text-decoration:line-through;opacity:.45}
/* ---------- Layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.sec{padding-block:var(--sec);position:relative}
.sec-light{background:var(--paper);color:var(--tx-on-light)}
.sec-soft{background:var(--paper-2);color:var(--tx-on-light)}
.sec-ink2{background:var(--ink-2)}
.grid{display:grid;gap:24px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media (max-width:960px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:680px){.g2,.g3,.g4{grid-template-columns:1fr}}
.center{text-align:center}
.center .lead{margin-inline:auto}
.stack-sm>*+*{margin-top:12px}
.mt-l{margin-top:44px}
/* ---------- Eyebrow ---------- */
.eyebrow{
display:inline-flex;align-items:center;flex-wrap:wrap;gap:8px;max-width:100%;
font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
color:var(--acc);margin-bottom:18px;
}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--acc)}
.sec-light .eyebrow,.sec-soft .eyebrow{color:var(--violet-d);opacity:1}
.sec-light .eyebrow::before,.sec-soft .eyebrow::before{background:currentColor}
.center .eyebrow{justify-content:center}
/* ---------- Boutons ---------- */
.btn{
--bg:var(--acc);--fg:#fff;--bd:transparent;
display:inline-flex;align-items:center;justify-content:center;gap:10px;
padding:15px 26px;border-radius:var(--r-pill);border:1px solid var(--bd);
background:var(--bg);color:var(--fg);font-weight:600;font-size:.98rem;
cursor:pointer;transition:transform .18s cubic-bezier(.2,.7,.3,1),filter .18s,background .18s,border-color .18s;
white-space:nowrap;text-align:center;
}
.btn:hover{transform:translateY(-2px);filter:brightness(1.05)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.btn-ghost{--bg:transparent;--fg:var(--tx-on-dark);--bd:var(--bd-dark-2)}
.btn-ghost:hover{--bg:rgba(118,38,245,0.096)}
.sec-light .btn-ghost,.sec-soft .btn-ghost{--fg:var(--tx-on-light);--bd:var(--bd-light)}
.sec-light .btn-ghost:hover,.sec-soft .btn-ghost:hover{--bg:rgba(16,5,46,.05)}
.btn-dark{--bg:var(--night);--fg:#fff}
.btn-sm{padding:11px 18px;font-size:.9rem}
.hdr .btn-sm{padding:9px 16px;font-size:.85rem}
.btn-lg{padding:18px 34px;font-size:1.05rem}
.hero .btn{padding:11px 19px;font-size:.88rem}
.hero .btn-sm{padding:9px 16px;font-size:.84rem}
.hero .btn-sm .btn-arrow{width:14px;height:14px}
/* Bouton du simulateur : halo pulsé, repris du CTA d'INCOM (ctaGlow, 1,6 s)
et transposé en doré — un anneau se diffuse pendant qu'un halo flou grossit. */
.btn-pulse{position:relative;animation:cta-or 1.6s ease-in-out infinite;transition:transform .18s}
.btn-pulse:hover{transform:scale(1.02)}
@keyframes cta-or{
0%,100%{box-shadow:0 0 0 0 rgba(118,38,245,.60), 0 0 18px 0 rgba(118,38,245,.35)}
50% {box-shadow:0 0 0 8px rgba(118,38,245,0), 0 0 32px 6px rgba(118,38,245,.55)}
}
@media (prefers-reduced-motion:reduce){.btn-pulse{animation:none;box-shadow:0 0 16px 0 rgba(118,38,245,.35)}}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.center .btn-row{justify-content:center}
.link-arrow{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--acc);border-bottom:1px solid transparent;transition:gap .2s,border-color .2s}
.link-arrow:hover{gap:12px;border-color:currentColor}
.sec-light .link-arrow,.sec-soft .link-arrow{color:var(--violet-d)}
/* ---------- Header ---------- */
.hdr{position:sticky;top:0;z-index:80;background:rgba(252,251,255,.82);backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3);border-bottom:1px solid var(--bd-dark)}
.hdr-in{display:flex;align-items:center;gap:24px;height:60px}
.logo{display:flex;align-items:center;gap:9px;font-family:var(--ff-logo);font-weight:600;font-size:1.14rem;letter-spacing:-.03em;flex:none}
.logo-mark{width:30px;height:30px;flex:none;object-fit:contain}
.logo-txt{display:inline-flex;align-items:baseline;gap:7px;line-height:1}
.nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav a{padding:8px 12px;border-radius:var(--r-pill);font-size:.89rem;font-weight:500;color:var(--tx-on-dark-2);transition:color .2s,background .2s}
.nav a:hover,.nav a[aria-current]{color:var(--violet-d);background:var(--violet-soft)}
.hdr-cta{display:flex;gap:10px;align-items:center;flex:none}
.nav .nav-cta{display:none} /* doublon du CTA d'en-tête : visible uniquement en menu mobile */
.burger{display:none;width:42px;height:42px;border-radius:11px;border:1px solid var(--bd-dark-2);background:transparent;cursor:pointer;align-items:center;justify-content:center;margin-left:auto}
.burger span{display:block;width:18px;height:2px;background:var(--night);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--night);transition:transform .25s}
.burger span::before{top:-6px}.burger span::after{top:6px}
body.menu-open .burger span{background:transparent}
body.menu-open .burger span::before{transform:translateY(6px) rotate(45deg)}
body.menu-open .burger span::after{transform:translateY(-6px) rotate(-45deg)}
@media (max-width:1040px){
.nav{display:none}
/* Le bouton d'action reste atteignable sans ouvrir le menu : INCOM et
Stairling le gardent tous deux visibles a cote du burger. */
.hdr-cta{display:flex;margin-left:auto}
.hdr-in{gap:12px}
.hdr-cta .btn{padding:9px 16px;font-size:.86rem}
.burger{display:flex;margin-left:0}
.nav.open{inset:60px 0 auto 0}
.nav.open{
display:flex;flex-direction:column;align-items:stretch;gap:2px;
position:fixed;inset:60px 0 auto 0;background:var(--ink);
/* opaque : la moindre transparence laisserait passer un fantôme
du contenu de la page derrière les entrées du menu */
padding:18px var(--gut) 28px;border-bottom:1px solid var(--bd-dark);
max-height:calc(100vh - 60px);overflow:auto;
}
.nav.open a{padding:14px 12px;font-size:1.05rem}
.nav.open .nav-cta{margin-top:12px;background:var(--acc);color:#fff;justify-content:center;display:flex;font-weight:700}
}
/* ---------- Hero ----------------------------------------------------------
Texte à gauche sur le fond clair, visuel du chauffeur à droite. Le halo
violet part de derrière l'image : c'est lui qui relie le visuel à la page,
la photo n'ayant pas de fond détouré.
-------------------------------------------------------------------------- */
.hero{
position:relative;isolation:isolate;background:var(--ink);
padding-block:clamp(28px,3vw,52px) clamp(72px,8vw,104px);
overflow:hidden
}
.hero::before{
content:"";position:absolute;inset:-18% -6% auto 30%;height:760px;z-index:0;pointer-events:none;
background:radial-gradient(48% 52% at 62% 34%,rgba(118,38,245,.20),transparent 70%)
}
.hero-in{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,3vw,48px);align-items:center;width:100%}
.hero-copy{max-width:580px}
.hero .lead{max-width:46ch}
/* Le visuel : posé au bas de la colonne, il déborde volontairement sous la
ligne de la preuve sociale pour donner de la hauteur au bloc. */
.hero-visuel{position:relative;justify-self:end;width:100%;max-width:520px}
.hero-visuel picture{display:block;width:100%}
.hero-visuel img{
width:100%;height:auto;display:block;border-radius:var(--r-xl);
/* le fichier a un fond blanc-violet : on l'estompe sur ses bords pour
qu'il se fonde dans la page au lieu d'être un rectangle collé */
-webkit-mask-image:radial-gradient(82% 92% at 50% 44%,#000 55%,transparent 100%);
mask-image:radial-gradient(82% 92% at 50% 44%,#000 55%,transparent 100%)
}
/* Badge : pilule fine, comme sur les sites de mobilité premium */
.badge{
display:inline-block;max-width:100%;padding:8px 16px;
border:1px solid var(--bd-dark);border-radius:var(--r-pill);
font-size:.85rem;color:var(--tx-on-dark-2);margin-bottom:26px;
background:rgba(255,255,255,.78);backdrop-filter:blur(8px);box-shadow:var(--sh-1)
}
/* sur deux lignes, l'arrondi complet rogne le texte : on l'adoucit */
@media (max-width:620px){.badge{border-radius:18px;padding:9px 14px}}
.badge b{display:inline-block;background:var(--acc);color:#fff;padding:3px 10px;border-radius:var(--r-pill);font-size:.76rem;font-weight:700;letter-spacing:.02em;margin-right:8px}
.hero h1{font-size:clamp(1.85rem,2.65vw,2.5rem);margin-bottom:18px}
.hero h1 em{font-style:normal;color:var(--acc)}
/* ---------- Hero photo pleine largeur -------------------------------------
La photo occupe toute la largeur de l'écran et sert de fond ; le texte se
pose dessus. Elle reste un ![]()
dans le DOM (et non un background CSS) :
c'est le plus gros élément affiché au chargement, et seul un ![]()
accepte
fetchpriority="high".
Deux traitements possibles, au choix par la classe posée sur la section :
.hero-nuit — voile sombre, texte en blanc (l'image est nocturne)
.hero-clair — voile clair à gauche, texte bleu nuit comme le reste du site
-------------------------------------------------------------------------- */
.hero-photo{
padding-block:clamp(56px,7vw,96px) clamp(72px,8vw,104px);
/* Sans hauteur plancher, un écran large et court (2545x790 par exemple)
donne au hero un format très panoramique : `cover` agrandit alors la
photo au point qu'on ne reconnaît plus le sujet. */
min-height:min(1040px,92vh);
display:flex;align-items:center
}
.hero-photo::before{content:none} /* le halo violet ne sert plus */
.hero-fond{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-fond picture,.hero-fond img{display:block;width:100%;height:100%}
/* 68 % : le chauffeur est dans la partie droite de la photo, on garde son
visage dans le cadre quand l'écran se rétrécit. */
/* 68 % horizontal : le chauffeur occupe la droite de la photo. 42 % vertical :
quand la boîte est plus large que haute, l'image déborde en hauteur et un
cadrage centré coupe les visages — on remonte donc le cadre. */
.hero-fond img{object-fit:cover;object-position:68% 42%}
.hero-photo .hero-in{z-index:2;grid-template-columns:minmax(0,1fr)}
/* Le texte ne doit pas courir sur toute la largeur : il reste dans la moitié
protégée par le dégradé, face au chauffeur qui occupe la droite. */
.hero-photo .hero-copy{max-width:min(52%,620px)}
@media (max-width:1080px){.hero-photo .hero-copy{max-width:min(64%,560px)}}
@media (max-width:820px){.hero-photo .hero-copy{max-width:none}}
/* Le voile : dégradé horizontal pour protéger le texte, puis fondu vers le
bas pour raccorder la photo au fond de page sans ligne de coupe. */
.hero-photo::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none}
/* Dosage réglé à l'écran : au-delà de ces valeurs, sur un écran large, le
voile ne protège plus le texte — il efface la photo. Le fondu du bas
raccorde la photo à la bande blanche qui suit, sans ligne de coupe. */
.hero-nuit::after{
background:
linear-gradient(100deg,
rgba(16,5,46,.92) 0%, rgba(16,5,46,.80) 26%, rgba(16,5,46,.42) 46%,
rgba(16,5,46,.10) 66%, rgba(16,5,46,0) 84%),
linear-gradient(to bottom, rgba(16,5,46,.22) 0%, rgba(16,5,46,0) 26%,
rgba(16,5,46,0) 80%, var(--ink) 100%)
}
/* Fond bleu nuit sous la photo : .hero hérite sinon du blanc cassé de la page,
et si l'image ne se charge pas (réseau coupé, format refusé) tout le texte
blanc du hero devient invisible. */
.hero-nuit{background:#10052E;--acc:#A23AF3;--acc-d:#7626F5;--violet-d:#A23AF3;--violet-l:#C77BF7}
.hero-nuit .badge{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.26)}
/* Les chiffres passent avant la preuve sociale (25/08) : le filet de
séparation suit, il se pose donc au-dessus des chiffres et non plus
au-dessus des avis. */
/* Contraste du hero photo — mesure faite sur les pixels rendus le 26/08.
.hero-nuit redefinit --acc en #A23AF3 : sur le ciel de la photo, le titre
tombait a 2,26:1 (minimum WCAG AA pour ce corps : 3:1) et le bouton plein,
de la meme famille que le ciel, s'y fondait. */
.hero-photo h1 em{color:#E4D3FF}
.hero-photo .btn:not(.btn-ghost){--bg:#fff;--fg:#7626F5;--bd:#fff}
.hero-photo .btn-ghost{--bd:rgba(255,255,255,.62)}
.hero-photo .hero-stats{margin-top:88px;padding-top:26px;border-top:1px solid var(--bd-dark)}
.hero-photo .proof{margin-top:48px;padding-top:0;border-top:0}
.hero-clair::after{
background:
linear-gradient(97deg,
var(--ink) 0%, var(--ink) 26%, rgba(252,251,255,.94) 42%,
rgba(252,251,255,.62) 58%, rgba(252,251,255,.10) 78%, transparent 92%),
linear-gradient(to bottom, transparent 62%, var(--ink) 100%)
}
/* Sous 820 px la photo passe derrière tout le texte : le voile devient
vertical et beaucoup plus couvrant, sinon plus rien n'est lisible. */
@media (max-width:820px){
.hero-fond img{object-position:60% 42%}
.hero-nuit::after{
background:
linear-gradient(to bottom, rgba(16,5,46,.40) 0%, rgba(16,5,46,.72) 34%,
rgba(16,5,46,.88) 62%, var(--ink) 100%)
}
.hero-clair::after{
background:
linear-gradient(to bottom, rgba(252,251,255,.55) 0%, rgba(252,251,255,.92) 34%,
rgba(252,251,255,.97) 60%, var(--ink) 100%)
}
}
/* ---------- Preuve sociale du hero ---------- */
.proof{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 22px;margin-top:38px;padding-top:26px;border-top:1px solid var(--bd-dark)}
.proof-note{
display:inline-flex;align-items:center;gap:8px;padding:6px 13px;border-radius:var(--r-pill);
background:rgba(118,38,245,.08);border:1px solid rgba(118,38,245,.28);
backdrop-filter:blur(10px) saturate(1.2);-webkit-backdrop-filter:blur(10px) saturate(1.2);
box-shadow:inset 0 1px 0 rgba(255,255,255,.60),0 12px 26px -16px rgba(118,38,245,.45)
}
.proof-note b{font-family:var(--ff-display);font-weight:800;font-size:1rem;line-height:1;color:var(--violet-d)}
.proof-stars{color:var(--violet);font-size:.82rem;letter-spacing:.05em;line-height:1}
.proof-sep{width:1px;height:12px;background:rgba(118,38,245,.30)}
.proof-note i{font-style:normal;font-size:.76rem;color:var(--tx-on-dark-2);white-space:nowrap}
.proof-who{display:flex;align-items:center;gap:9px}
.proof-avs{display:flex}
.proof-avs img{
width:27px;height:27px;border-radius:50%;object-fit:cover;display:block;
border:2px solid #fff;box-shadow:0 2px 8px rgba(16,5,46,.18);margin-left:-9px
}
.proof-avs img:first-child{margin-left:0}
.proof-who p{margin:0;font-size:.79rem;color:var(--tx-on-dark-2)}
@media (max-width:560px){.proof{gap:12px}.proof-who p{font-size:.84rem}}
/* Chiffres clés */
.hero-stats{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,auto);justify-content:center;gap:18px clamp(34px,5vw,78px);margin-top:26px;text-align:center}
@media (max-width:560px){.hero-stats{grid-template-columns:repeat(2,auto);gap:24px 30px}}
.hero-stats b{display:block;font-family:var(--ff-display);font-weight:800;font-size:clamp(2.4rem,4vw,3.5rem);letter-spacing:-.03em;line-height:1}
.hero-stats span{font-size:.95rem;font-weight:600;color:var(--tx-on-dark-2);white-space:nowrap;margin-top:8px;display:block}
/* Icônes dans les boutons du hero */
.btn-arrow{width:17px;height:17px;margin-left:2px;transition:transform .25s}
.btn:hover .btn-arrow{transform:translateX(3px)}
@media (max-width:980px){
.hero{padding-block:32px 120px}
.hero-in{grid-template-columns:1fr;gap:26px}
/* l'ordre du HTML (texte, visuel, preuve, chiffres) est déjà le bon :
y toucher ferait remonter la preuve sociale au-dessus du titre */
.hero-copy{max-width:none}
.hero-visuel{justify-self:center;max-width:420px}
.hero::before{inset:-10% -10% auto 0}
}
@media (max-width:560px){
.hero-visuel{max-width:320px}
}
/* ---------- Carte simulateur ---------- */
.simcard{
background:linear-gradient(180deg,var(--ink-3),var(--ink-2));
border:1px solid var(--bd-dark-2);border-radius:var(--r-xl);
padding:28px;box-shadow:var(--sh-2)
}
.sec-light .simcard,.sec-soft .simcard{color:var(--night)}
.simcard h3{margin-bottom:4px}
.simcard .hint{font-size:.86rem;color:var(--tx-on-dark-3);margin-bottom:22px}
.field{margin-bottom:20px}
.field label{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;font-size:.9rem;color:var(--tx-on-dark-2);margin-bottom:10px;gap:4px 12px}
.field label span{min-width:0;flex:1 1 auto}
.field label b{font-family:var(--ff-display);font-weight:800;font-size:1.18rem;color:var(--night);flex:none}
input[type=range]{
-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:99px;
background:rgba(118,38,245,0.100);outline:none;cursor:pointer
}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--acc);border:3px solid var(--ink-2);box-shadow:0 0 0 1px var(--acc)}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border:3px solid var(--ink-2);border-radius:50%;background:var(--acc)}
input[type=range]:focus-visible{outline:2px solid var(--acc);outline-offset:4px}
.sim-out{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--bd-dark);border-radius:var(--r-m);overflow:hidden;margin-top:26px}
.sim-out div{background:var(--ink-3);padding:18px}
.sim-out span{display:block;font-size:.78rem;color:var(--tx-on-dark-3);margin-bottom:6px;text-transform:uppercase;letter-spacing:.08em}
.sim-out b{font-family:var(--ff-display);font-size:1.7rem;letter-spacing:-.03em}
.sim-out .win{background:rgba(118,38,245,.16)}
.sim-out .win b{color:var(--acc)}
.sim-delta{margin-top:16px;font-size:.9rem;color:var(--tx-on-dark-2);text-align:center}
.sim-delta b{color:var(--acc)}
.sim-detail{margin-top:18px;font-size:.86rem;color:var(--tx-on-dark-3)}
.sim-detail summary{cursor:pointer;color:var(--tx-on-dark-2)}
.sim-detail ul{margin:12px 0 0;padding-left:18px;display:grid;gap:6px}
/* Variante « verre » : la carte est posée sur la photo du hero. */
.simcard.glass{
background:linear-gradient(180deg,#FFFFFF,#F7F2FF);
border:1px solid rgba(118,38,245,0.100);
backdrop-filter:blur(20px) saturate(1.15);
-webkit-backdrop-filter:blur(20px) saturate(1.15);
box-shadow:0 30px 70px -24px rgba(77,18,200,.16);
padding:26px
}
.simcard.glass .field{margin-bottom:16px}
.simcard.glass .sim-out{margin-top:20px}
.simcard.glass .sim-out div{padding:15px}
.simcard.glass .sim-out div{background:rgba(118,38,245,0.088)}
.simcard.glass .sim-out .win{background:rgba(118,38,245,.18)}
.simcard.glass .hint,.simcard.glass .sim-detail{color:var(--tx-on-dark-2)}
@supports not (backdrop-filter:blur(4px)){
.simcard.glass{background:linear-gradient(180deg,#FFFFFF,#F7F2FF)}
}
/* ---------- Section simulateur ---------- */
.sec-sim{background:var(--ink-2);border-bottom:1px solid var(--bd-dark)}
.sim-split{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(32px,4vw,64px);align-items:center}
@media (max-width:900px){.sim-split{grid-template-columns:1fr;gap:34px}}
.sec-sim .simcard.glass{background:linear-gradient(180deg,var(--ink-3),var(--ink-2));backdrop-filter:none}
/* ---------- Bandeau presse posé en bas du hero ---------- */
.hero-marquee{
width:min(780px,90vw);margin:0 auto;padding-block:14px 6px;overflow:hidden;
/* Le bandeau a quitté le hero le 25/08 : la photo pleine largeur est
nocturne, et ces logos sont dessinés pour un fond clair. Il est
maintenant posé dans .marquee, la bande blanche sous le hero. */
-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)
}
.hero-marquee .mq-label{margin-bottom:12px}
/* le bandeau ne compte plus que 2 copies des logos au lieu de 6 (48 balises
![]()
pour 8 logos) : la durée est ramenée au prorata pour conserver
exactement la même vitesse de défilement — 100 s pour 3040 px, soit 33 s
pour les 1013 px d'une copie. */
.hero-marquee .marquee-in{animation-duration:33s}
.hero-marquee:hover .marquee-in{animation-play-state:paused}
@media (max-width:700px){.hero-marquee{padding-block:10px 16px}}
/* ---------- Kovy Drive ---------------------------------------------------
Offre presentee comme une fiche : le loyer se compte, les inclusions se
cochent l'une apres l'autre, la TVA recuperee ferme le bloc.
------------------------------------------------------------------------ */
.sec-drive{position:relative;background:var(--ink);overflow:hidden}
.sec-drive::before{
content:"";position:absolute;right:-8%;top:-10%;width:560px;height:560px;border-radius:50%;
background:rgba(118,38,245,.09);filter:blur(150px);pointer-events:none
}
.sec-drive .wrap{position:relative}
.drivebox{
padding:22px;border-radius:var(--r-xl);border:1px solid var(--bd-dark);
background:linear-gradient(180deg,#FFFFFF,#F7F2FF);
box-shadow:0 30px 70px -30px rgba(77,18,200,.16)
}
.dv-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:20px}
.dv-lab{display:block;font-size:.72rem;color:var(--tx-on-dark-3)}
.dv-prix{display:block;margin-top:5px;font-family:var(--ff-display);font-size:2rem;font-weight:700;letter-spacing:-.03em;color:var(--acc)}
.dv-prix em{font-style:normal;font-variant-numeric:tabular-nums}
.dv-prix i{font-style:normal;font-family:var(--ff-body);font-size:.8rem;font-weight:500;color:var(--tx-on-dark-3);margin-left:4px}
.dv-badge{
flex:none;padding:6px 12px;border-radius:var(--r-pill);background:rgba(118,38,245,.14);
border:1px solid rgba(118,38,245,.28);font-size:.72rem;font-weight:700;color:var(--acc)
}
.dv-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.dv-list li{position:relative;display:flex;align-items:center;gap:11px;padding:5px 0 5px 34px}
/* exactement la coche de .checklist : pastille dorée pleine, même dessin */
.dv-list li::before{
content:"";position:absolute;left:0;top:50%;margin-top:-11px;width:22px;height:22px;border-radius:50%;
background:var(--acc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1310' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/13px no-repeat
}
.dv-list div{flex:1;min-width:0}
.dv-list b{display:block;font-size:.86rem}
.dv-list span{display:block;font-size:.73rem;color:var(--tx-on-dark-3)}
.dv-list em{font-style:normal;font-size:.76rem;font-weight:700;color:var(--acc)}
.dv-tva{
display:flex;align-items:center;gap:12px;margin-top:12px;padding:12px 14px;border-radius:var(--r-m);
background:rgba(118,38,245,.12);border:1px solid rgba(118,38,245,.3)
}
.dv-tva div{flex:1;min-width:0}
.dv-tva b{display:block;font-size:.86rem;color:var(--acc)}
.dv-tva span{display:block;font-size:.73rem;color:var(--tx-on-dark-2)}
.dv-tva em{font-style:normal;font-family:var(--ff-display);font-size:1.15rem;font-weight:700;color:var(--acc)}
/* ---------- Témoignages -------------------------------------------------- */
.sec-avis{position:relative;background:var(--ink-2);overflow:hidden;border-block:1px solid var(--bd-dark)}
.sec-avis::before{
content:"";position:absolute;left:50%;top:-15%;width:760px;height:520px;transform:translateX(-50%);
background:radial-gradient(50% 50% at 50% 50%,rgba(118,38,245,.09),transparent 70%);pointer-events:none
}
.sec-avis .wrap{position:relative}
.avis{gap:16px}
.acard{
position:relative;overflow:hidden;display:flex;flex-direction:column;padding:26px 24px;
border:1px solid var(--bd-dark);border-radius:var(--r-xl);
background:linear-gradient(180deg,#FFFFFF,#F7F2FF);
transition:border-color .25s,transform .25s
}
.acard:hover{border-color:rgba(118,38,245,.3);transform:translateY(-3px)}
.ac-quote{
position:absolute;right:16px;top:-14px;font-family:var(--ff-display);font-size:6rem;line-height:1;
color:rgba(118,38,245,.10);pointer-events:none
}
.ac-stars{display:flex;gap:3px;margin-bottom:14px}
.ac-stars i{font-style:normal;color:var(--acc);font-size:1rem;line-height:1;display:inline-block}
.acard p{position:relative;z-index:1;font-size:.95rem;line-height:1.6;color:var(--tx-on-dark-2);margin:0 0 20px;font-style:italic}
.ac-who{display:flex;align-items:center;gap:11px;margin-top:auto;padding-top:16px;border-top:1px solid var(--bd-dark)}
.ac-av{
flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
background:linear-gradient(148deg,#EBE1FF,var(--acc-d));color:#10052E;font-weight:700;font-size:.9rem
}
.ac-who b{display:block;font-size:.9rem}
.ac-who div span{display:block;font-size:.76rem;color:var(--tx-on-dark-3)}
/* ---------- FAQ ---------------------------------------------------------- */
.sec-faq{position:relative;background:var(--ink);overflow:hidden}
.sec-faq::before{
content:"";position:absolute;left:-8%;bottom:-12%;width:540px;height:540px;border-radius:50%;
background:rgba(118,38,245,.08);filter:blur(150px);pointer-events:none
}
.sec-faq .wrap{position:relative}
.faq-split{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,4vw,64px);align-items:start}
@media (max-width:900px){.faq-split{grid-template-columns:1fr;gap:32px}}
.faq-aside{position:sticky;top:88px}
.faq-aside .lead{margin-top:18px}
@media (max-width:900px){.faq-aside{position:static}}
.faq-dark{display:grid;gap:8px}
.fq-item{
position:relative;border:1px solid var(--bd-dark);border-radius:var(--r-m);overflow:hidden;
background:rgba(118,38,245,.055);transition:border-color .25s,background .25s
}
.fq-item:hover{background:rgba(118,38,245,0.048)}
/* liseré doré sur la question ouverte */
.fq-item::before{
content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--acc);
transform:scaleY(0);transform-origin:top;transition:transform .35s cubic-bezier(.2,.7,.3,1)
}
.fq-item[open]{border-color:rgba(118,38,245,.28);background:rgba(118,38,245,.05)}
.fq-item[open]::before{transform:scaleY(1)}
.fq-item summary{
display:flex;align-items:center;gap:16px;padding:15px 18px;cursor:pointer;
font-size:.95rem;font-weight:700;color:var(--tx-on-dark);transition:color .2s;
list-style:none;-webkit-tap-highlight-color:transparent
}
/* le marqueur natif de : masqué sous toutes ses formes */
.fq-item summary::-webkit-details-marker{display:none}
.fq-item summary::marker{content:none}
.fq-item summary::-moz-list-bullet{list-style-type:none}
.fq-item summary:hover{color:var(--acc)}
.fq-item summary:focus-visible{outline:2px solid var(--acc);outline-offset:-3px;border-radius:var(--r-m)}
.fq-item summary span{flex:1;line-height:1.4}
/* le bouton + qui devient − */
.fq-plus{
flex:none;position:relative;width:26px;height:26px;border-radius:50%;
background:rgba(118,38,245,.12);border:1px solid rgba(118,38,245,.26);
transition:transform .35s cubic-bezier(.2,.7,.3,1),background .25s,border-color .25s
}
.fq-item summary:hover .fq-plus{background:rgba(118,38,245,.2)}
.fq-plus::before,.fq-plus::after{
content:"";position:absolute;left:50%;top:50%;background:var(--acc);border-radius:2px;
transform:translate(-50%,-50%);transition:opacity .3s
}
.fq-plus::before{width:10px;height:1.8px}
.fq-plus::after{width:1.8px;height:10px}
.fq-item[open] .fq-plus{transform:rotate(180deg);background:var(--acc);border-color:var(--acc)}
.fq-item[open] .fq-plus::before{background:#10052E}
.fq-item[open] .fq-plus::after{opacity:0}
/* la réponse : glisse et se fond en même temps que la hauteur s'ouvre */
.fq-rep{overflow:hidden}
.fq-rep p{
margin:0;padding:0 18px 17px 18px;font-size:.9rem;line-height:1.65;color:var(--tx-on-dark-2);
opacity:0;transform:translateY(-6px);transition:opacity .3s ease .1s,transform .3s ease .1s
}
.fq-item[open] .fq-rep p{opacity:1;transform:none}
/* ---------- Section « Vos droits » --------------------------------------
Six cartes numerotees : pastille doree, numero en filigrane, et une puce
d'etat dont la coche rebondit en cascade.
------------------------------------------------------------------------ */
.sec-droits{position:relative;background:var(--ink-2);overflow:hidden;border-block:1px solid var(--bd-dark)}
.sec-droits::before{
content:"";position:absolute;right:-10%;bottom:-15%;width:620px;height:620px;border-radius:50%;
background:rgba(118,38,245,.08);filter:blur(150px);pointer-events:none
}
.sec-droits .wrap{position:relative}
.droits{gap:16px}
.dcard{
position:relative;overflow:hidden;display:flex;flex-direction:column;padding:24px;
border:1px solid var(--bd-dark);border-radius:var(--r-xl);
background:linear-gradient(180deg,#FFFFFF,#F7F2FF);
transition:border-color .25s,transform .25s
}
.dcard:hover{border-color:rgba(118,38,245,.3);transform:translateY(-3px)}
/* le numéro, en très gros, en fond de carte */
.dc-num{
position:absolute;right:14px;top:2px;font-family:var(--ff-display);font-size:4.2rem;font-weight:800;
line-height:1;letter-spacing:-.05em;color:rgba(118,38,245,0.072);pointer-events:none;transition:color .25s
}
.dcard:hover .dc-num{color:rgba(118,38,245,.13)}
.dc-ico{
position:relative;z-index:1;width:44px;height:44px;border-radius:13px;display:grid;place-items:center;
color:#10052E;margin-bottom:18px;
background:linear-gradient(148deg,#EBE1FF 0%,var(--acc) 46%,var(--acc-d) 100%);
box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 10px 22px -12px rgba(118,38,245,.85)
}
.dc-ico svg{width:22px;height:22px}
.dcard h3{position:relative;z-index:1;font-size:1.05rem;margin-bottom:8px}
.dcard p{position:relative;z-index:1;font-size:.9rem;line-height:1.55;color:var(--tx-on-dark-2);margin:0 0 18px}
.dc-tag{
margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:7px;
padding:6px 12px;border-radius:var(--r-pill);
background:rgba(118,38,245,.12);border:1px solid rgba(118,38,245,.26);
font-size:.74rem;font-weight:700;color:var(--acc)
}
.dc-tag svg{width:12px;height:12px;flex:none}
/* ---------- Section « Votre espace Kovy » -------------------------------
Fond sombre comme les autres, maquette animee : barres qui poussent,
montants qui se comptent, ligne de versement mise en avant.
----------------------------------------------------------------------- */
/* Le blanc est posé ICI et non par `.sec-light` : cette règle est plus
spécifique et gagnait, ce qui laissait la section au blanc cassé du
fond de page au lieu du blanc franc voulu. */
.sec-app{position:relative;background:var(--paper);overflow:clip} /* `clip` et non `hidden` : les deux coupent pareil, mais `hidden` ferait de
la section un conteneur de défilement, et le dézoom au scroll plus bas se
mesurerait alors par rapport à ELLE au lieu de la fenêtre. */
.sec-app::before{
content:"";position:absolute;left:-6%;bottom:-10%;width:560px;height:560px;border-radius:50%;
background:rgba(118,38,245,.09);filter:blur(150px);pointer-events:none
}
.sec-app .wrap{position:relative}
.mtitle-l{font-size:clamp(1.8rem,3.2vw,2.8rem);margin-top:18px}
.sec-app .checklist{margin-top:24px}
/* ==========================================================================
La scène « application » : le téléphone au centre, des cartes autour.
Trois partis pris :
- la capture est une VRAIE photographie de l'application, pas un dessin.
La précédente maquette était redessinée en HTML : elle promettait un
bouton « Retirer » et des frais « remboursés en 2 secondes » qui
n'existent pas. Une capture ne peut pas mentir aussi facilement ;
- les cartes flottantes sont en HTML et non dans l'image : elles restent
nettes sur tous les écrans, se traduisent, et se réorganisent sur mobile
au lieu d'être un décor illisible ;
- tout le décor est masqué aux lecteurs d'écran (aria-hidden) et s'arrête
net si le visiteur a demandé moins d'animations.
========================================================================== */
.app-tete{max-width:60ch;margin-inline:auto;text-align:center}
.app-tete .lead{margin-inline:auto}
.app-tete .btn-row{justify-content:center;margin-top:28px}
/* --- Les boutons de téléchargement ---------------------------------------
Deux blocs de même gabarit, alignés sous l'appel à l'action. Le second
n'est pas un lien mais un `span` : rien à cliquer tant que l'application
iPhone n'existe pas, et aucun état de survol qui laisserait croire le
contraire.
-------------------------------------------------------------------------- */
.app-stores{
display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:22px
}
.store-btn{
display:inline-flex;align-items:center;gap:10px;
padding:9px 18px 9px 15px;border-radius:14px;
/* Le bleu nuit de la charte : sur ce site les noms de variables sont
inversés (--ink-2 est du BLANC), le foncé s'appelle --night. */
background:var(--night);color:#fff;text-decoration:none;
border:1px solid rgba(255,255,255,.10);
transition:transform .25s ease,box-shadow .25s ease
}
.store-btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px -14px rgba(16,5,46,.55)}
.store-btn span{display:grid;line-height:1.15;text-align:left}
.store-btn small{font-size:.66rem;letter-spacing:.04em;opacity:.72;text-transform:uppercase}
.store-btn b{font-size:.98rem;font-weight:700}
/* Le bouton en attente : même gabarit, mais éteint et sans réaction. */
.store-btn--attente{
background:transparent;color:var(--tx-on-light-2);
border:1px dashed var(--bd-light);cursor:default
}
.store-btn--attente:hover{transform:none;box-shadow:none}
@media (prefers-reduced-motion:reduce){.store-btn{transition:none}}
@media (max-width:420px){.app-stores{flex-direction:column;align-items:center}}
.app-dispo{margin-top:14px;font-size:.86rem;color:var(--tx-on-light-3)}
.app-scene{
position:relative;margin-top:48px;display:grid;place-items:center;
min-height:560px
}
/* --- Les cercles ---------------------------------------------------------
Ils donnent la profondeur sans image : quatre traits, et une respiration
très lente pour que la zone ne soit pas figée. */
.app-halo{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
/* Les anneaux s'éclaircissent en s'éloignant du téléphone : c'est ce
dégradé d'intensité qui donne la profondeur. Tous au même violet ferait
une cible de tir plutôt qu'un halo. */
.app-halo i{
position:absolute;width:var(--d);height:var(--d);border-radius:50%;
border:1.5px solid rgba(118,38,245,.42);
animation:haloRespire 9s ease-in-out infinite
}
.app-halo i:nth-child(2){animation-delay:.6s;border-color:rgba(118,38,245,.32)}
.app-halo i:nth-child(3){animation-delay:1.2s;border-color:rgba(118,38,245,.22)}
.app-halo i:nth-child(4){animation-delay:1.8s;border-color:rgba(118,38,245,.14)}
@keyframes haloRespire{
0%,100%{transform:scale(1);opacity:.85}
50%{transform:scale(1.045);opacity:.55}
}
/* --- Le K qui tourne -----------------------------------------------------
Il occupe l'arrière-plan sans jamais disputer la lecture : blanc, très
transparent, et derrière le téléphone (z-index 1 contre 2).
Le logo du fichier est VIOLET — invisible sur un aplat violet. Plutôt que
de fabriquer une seconde image blanche à maintenir, on le décolore :
`brightness(0)` l'écrase en noir, `invert(1)` le retourne en blanc. La
silhouette est conservée, la transparence aussi.
Un tour dure 22 secondes : assez lent pour qu'on ne le regarde pas, assez
présent pour que la zone ne soit pas figée.
-------------------------------------------------------------------------- */
.app-logo{
position:absolute;inset:0;display:grid;place-items:center;z-index:1;
perspective:1200px;pointer-events:none
}
.logo-3d{
position:relative;width:clamp(360px,58vw,780px);aspect-ratio:1;
transform-style:preserve-3d;animation:logoTourne 22s linear infinite
}
/* Une lueur derrière le K, sinon le blanc translucide se fond dans le violet
et le logo ne se lit plus qu'aux deux extrémités, là où il dépasse du
téléphone. Elle ne tourne pas : c'est l'éclairage, pas l'objet. */
.app-logo::before{
content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
width:clamp(380px,62vw,840px);aspect-ratio:1;border-radius:50%;
background:radial-gradient(circle,rgba(118,38,245,.16) 0%,rgba(118,38,245,0) 64%)
}
/* Sur fond blanc, le logo garde SA couleur : il est déjà au violet de la
marque dans le fichier. Plus de décoloration — c'est la transparence seule
qui le fait passer à l'arrière-plan, ce qui donne un violet très pâle,
dans la teinte de la charte plutôt qu'un gris rapporté. */
.logo-face{
position:absolute;inset:0;width:100%;height:100%;
backface-visibility:hidden;-webkit-backface-visibility:hidden;
opacity:.28
}
.logo-dos{transform:rotateY(180deg)}
@keyframes logoTourne{from{transform:rotateY(0)}to{transform:rotateY(360deg)}}
/* --- L'orbite des plateformes --------------------------------------------
Six pastilles gravitent autour du téléphone : les cinq applications de
course et l'URSSAF, qui dit d'un coup d'œil ce que la carte met trois
lignes à expliquer.
Le rayon est calé pour passer À L'EXTÉRIEUR du châssis : le téléphone
mesure au plus 294 × 557 px, soit une demi-diagonale de 314 px. En deçà,
les pastilles disparaîtraient derrière lui à chaque quart de tour.
Deux rotations de même durée en sens opposés : la piste emmène les
pastilles, chaque pastille se dévisse d'autant et reste droite. Sans
cette contre-rotation, les logos arriveraient la tête en bas.
-------------------------------------------------------------------------- */
.app-orbe{
position:absolute;inset:0;display:grid;place-items:center;
z-index:1; /* derrière le téléphone (2) et les cartes */
pointer-events:none
}
.ao-piste{
position:relative;width:0;height:0;
animation:tour 34s linear infinite /* un tour très lent : on ne le regarde pas */
}
.ao-item{
/* Calé sur le DEUXIÈME anneau du halo (`--d:470px`), donc rayon 235 px.
Fixe et non en vw : les anneaux le sont, une orbite élastique s'en
décrocherait dès que la fenêtre change de largeur.
Ce rayon est plus court que la demi-hauteur du téléphone (300 px) :
en haut et en bas du tour, les pastilles passent DERRIÈRE le châssis
et réapparaissent de l'autre côté. C'est voulu, le `z-index:1` est là
pour ça. */
--r:235px;
position:absolute;left:0;top:0;width:46px;height:46px;margin:-23px 0 0 -23px;
transform:rotate(var(--a)) translateY(calc(-1 * var(--r))) rotate(calc(-1 * var(--a)))
}
.ao-pas{
display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
background:#fff;border:1px solid rgba(118,38,245,.28);
box-shadow:0 10px 24px -8px rgba(77,18,200,.28);
animation:tour-inv 34s linear infinite
}
.ao-pas img{width:26px;height:26px;object-fit:contain;display:block}
/* Sous 1080 px la scène devient une pile : une orbite n'a plus de centre
autour duquel tourner, et six pastilles de plus encombreraient l'écran.
Elle disparaît, comme le halo. */
@media (max-width:1080px){.app-orbe{display:none}}
@media (prefers-reduced-motion:reduce){.ao-piste,.ao-pas{animation:none}}
/* --- Le téléphone --------------------------------------------------------
Un vrai châssis, dessiné : le contour métallique, l'îlot de la caméra, les
trois boutons et le reflet du verre. Tout est en CSS et non en image, pour
trois raisons : c'est net sur n'importe quelle densité d'écran, cela ne
pèse pas un octet de plus, et la capture d'écran peut être remplacée le
jour où l'application change sans avoir à refaire l'habillage.
-------------------------------------------------------------------------- */
.app-tel{position:relative;z-index:2;animation:telFlotte 7s ease-in-out infinite}
.tel{
--l:clamp(212px,26vw,272px); /* largeur de l'écran visible */
position:relative;padding:11px;border-radius:46px;
/* Le dégradé imite la tranche : plus clair là où la lumière frappe. */
background:linear-gradient(150deg,#3B2A57 0%,#170A33 34%,#0C0320 68%,#2A1A46 100%);
box-shadow:
0 0 0 1px rgba(255,255,255,.10), /* liseré du châssis */
0 2px 3px rgba(255,255,255,.14) inset, /* arête supérieure éclairée */
0 46px 90px -34px rgba(8,1,26,.80), /* ombre portée, très douce */
0 18px 40px -22px rgba(8,1,26,.60)
}
.tel-ecran{
position:relative;width:var(--l);border-radius:36px;overflow:hidden;
background:#FCFBFF; /* le fond de l'application */
/* Les deux bandes reproduisent ce que le système réserve : en haut la
barre d'état où se pose l'îlot — sans elle il mordrait sur « Bonjour » —
et en bas la zone de l'indicateur d'accueil. */
padding-top:30px;padding-bottom:14px
}
/* L'indicateur d'accueil : le trait qu'on glisse pour fermer une app. */
.tel-ecran::after{
content:"";position:absolute;left:50%;bottom:6px;transform:translateX(-50%);
width:34%;height:4px;border-radius:999px;background:rgba(16,5,46,.28);z-index:2
}
.tel-ecran img{display:block;width:100%;height:auto}
/* Les trois vues se relaient toutes les cinq secondes. Le fondu dure une
demi-seconde : assez pour ne pas claquer, assez court pour qu'on ne
surprenne pas les deux écrans superposés à mi-chemin.
La première vue reste dans le flux — c'est elle qui donne sa hauteur au
téléphone. Les deux autres se posent par-dessus en absolu, calées sur les
mêmes bandes que la barre d'état et l'indicateur d'accueil. */
.tel-vue:not(:first-of-type){
position:absolute;left:0;right:0;top:30px;bottom:14px
}
/* PAS de `fill-mode: both` ici : il appliquerait la première image-clé
(opacité 1) pendant le DÉLAI d'attente, si bien que les trois vues
seraient visibles en même temps au chargement. Sans lui, chacune garde son
`opacity:0` jusqu'à ce que son tour vienne. */
.tel-vue{opacity:0;animation:telVues 15s ease-in-out infinite}
.tel-vue:nth-of-type(2){animation-delay:5s}
.tel-vue:nth-of-type(3){animation-delay:10s}
@keyframes telVues{
0%,28%{opacity:1}
33%,95%{opacity:0}
100%{opacity:1}
}
/* L'îlot de la caméra. */
.tel-ilot{
position:absolute;top:9px;left:50%;transform:translateX(-50%);
width:32%;height:19px;border-radius:999px;background:#0A0218;z-index:2
}
/* Le reflet du verre : une diagonale à peine visible, qui suffit à faire
lire la surface comme vitrée. */
.tel-reflet{
position:absolute;inset:0;pointer-events:none;z-index:3;
background:linear-gradient(118deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 34%,
rgba(255,255,255,0) 68%,rgba(255,255,255,.07) 100%)
}
/* Les boutons de tranche. Ils dépassent de deux pixels : c'est ce léger
débord qui donne l'épaisseur, un bouton affleurant ne se voit pas. */
.tel-b{position:absolute;background:linear-gradient(180deg,#3E2C5C,#1B0B3A);border-radius:2px}
.tel-b-vol1{left:-2px;top:118px;width:3px;height:30px}
.tel-b-vol2{left:-2px;top:158px;width:3px;height:30px}
.tel-b-lock{right:-2px;top:136px;width:3px;height:52px}
@keyframes telFlotte{
0%,100%{transform:translateY(0)}
50%{transform:translateY(-14px)}
}
/* --- Les cartes ---------------------------------------------------------- */
.app-cartes{position:absolute;inset:0;pointer-events:none}
/* Le filet violet remplace le gris habituel des cartes du site : ici les
quatre cartes flottent sur du blanc, sans section colorée pour les tenir.
Un contour de la couleur de marque les rattache à l'ensemble et les
détache du fond, ce qu'un gris pâle ne faisait pas. */
.app-carte{
position:absolute;width:230px;padding:16px 18px;border-radius:20px;
background:#fff;border:1.5px solid rgba(118,38,245,.38);
box-shadow:0 24px 50px -26px rgba(77,18,200,.30);
animation:carteFlotte 8s ease-in-out infinite
}
.app-carte-a{left:0;top:8%}
.app-carte-b{right:0;top:4%;animation-delay:.9s}
.app-carte-c{left:2%;bottom:8%;animation-delay:1.8s}
.app-carte-d{right:2%;bottom:12%;animation-delay:2.7s}
@keyframes carteFlotte{
0%,100%{transform:translateY(0)}
50%{transform:translateY(-12px)}
}
.ac-tete{display:flex;align-items:center;gap:10px}
/* Le violet est écrit en dur, et c'est volontaire : dans `.sec-violet`, les
variables de la famille violette sont réassignées en BLANC pour inverser le
contraste sur l'aplat. Un `var(--violet-d)` ici donnerait une lettre blanche
sur une pastille blanche — invisible, comme le bouton vide décrit plus
haut dans ce fichier. */
.ac-rond{
display:grid;place-items:center;width:32px;height:32px;border-radius:50%;
background:#7626F5;color:#fff;font-family:var(--ff-display);font-weight:700;font-size:.9rem;
flex:none
}
.ac-tete > div b{display:block;font-size:.82rem}
/* `> div` est indispensable : sans lui, ce sélecteur attrape aussi la
pastille ronde, qui est un span de .ac-tete — et son K se retrouvait
peint en gris translucide sur le violet, donc illisible. */
.ac-tete > div span{display:block;font-size:.72rem;color:var(--tx-on-light-3)}
.ac-titre{margin-top:12px;font-weight:700;font-size:.94rem}
.ac-note{margin-top:4px;font-size:.78rem;color:var(--tx-on-light-2);line-height:1.45}
.ac-etiq{display:block;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-on-light-3)}
.ac-gros{
display:block;margin-top:6px;font-family:var(--ff-display);font-size:1.6rem;font-weight:700;
letter-spacing:-.02em;font-variant-numeric:tabular-nums
}
.ac-pastille{
display:inline-block;margin-top:8px;padding:3px 10px;border-radius:999px;
background:rgba(118,38,245,.12);color:#4D12C8;font-size:.72rem;font-weight:600
}
.ac-barres{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;align-items:end;height:34px;margin-top:12px}
.ac-barres i{display:block;height:var(--h);border-radius:3px 3px 0 0;
background:linear-gradient(180deg,rgba(118,38,245,.35),#7626F5)}
/* --- Les pastilles des plateformes ---------------------------------------
Elles se retournent sur leur axe vertical, l'une après l'autre. Le tour
ne dure qu'un tiers du cycle : les deux autres tiers sont une pause, sans
quoi trois disques qui pivotent sans arrêt happent l'œil et détournent du
chiffre juste au-dessus.
`perspective` est sur le rang et non sur chaque pastille : posée sur
l'enfant, chacune aurait son propre point de fuite et les trois ne
tourneraient pas dans le même espace.
-------------------------------------------------------------------------- */
.ac-plats{display:flex;gap:8px;margin-top:10px;perspective:460px}
.ac-plat{
position:relative;width:34px;height:34px;flex:0 0 auto;
transform-style:preserve-3d;
animation:platRetourne 6.5s ease-in-out infinite
}
/* La cascade : chaque pastille part un peu après sa voisine de gauche. */
.ac-plat:nth-child(2){animation-delay:.42s}
.ac-plat:nth-child(3){animation-delay:.84s}
.ac-plats img{
width:34px;height:34px;padding:4px;border-radius:50%;
background:#fff;border:1px solid var(--bd-light);object-fit:contain;
/* la face cachée ne se peint pas : on ne voit jamais deux logos à la fois */
backface-visibility:hidden;-webkit-backface-visibility:hidden
}
/* L'absolu est réservé aux images d'une pastille : une page restée sur
l'ancien balisage (trois `img` à plat dans `.ac-plats`) garde son rang. */
.ac-plat img{position:absolute;inset:0}
.ac-plat-dos{transform:rotateY(180deg)}
@keyframes platRetourne{
0%,66%{transform:rotateY(0)}
100% {transform:rotateY(360deg)}
}
@media (prefers-reduced-motion:reduce){
.ac-plat{animation:none}
}
.app-mention{
margin-top:34px;text-align:center;font-size:.78rem;color:var(--tx-on-light-3)
}
/* --- Écrans étroits ------------------------------------------------------
Sous 1080 px, quatre cartes en absolu autour d'un téléphone se
chevauchent : elles passent donc SOUS lui, en grille. Rien n'est masqué,
parce que ces cartes portent l'argument autant que la capture. */
@media (max-width:1080px){
.app-scene{min-height:0;gap:34px}
/* Le logo suit le téléphone en haut de la pile plutôt que la section
entière : sinon il se retrouverait derrière les cartes empilées. */
.app-logo{inset:0 0 auto;height:auto;aspect-ratio:1}
.logo-3d{width:min(300px,68vw)}
.app-cartes{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;width:100%}
.app-carte{position:static;width:auto;animation:none}
.app-halo{display:none}
}
@media (max-width:560px){
.app-cartes{grid-template-columns:1fr}
.tel{--l:min(236px,74vw);padding:9px;border-radius:40px}
.tel-ecran{border-radius:31px}
}
/* --- Le dézoom d'arrivée -------------------------------------------------
En arrivant sur la section, on est TROP PRÈS du téléphone : la scène est
agrandie, floue et pâle. Le scroll fait reculer la caméra jusqu'à la
netteté. L'effet se joue sur `.app-scene` et non sur `.app-tel`, qui porte
déjà son propre flottement — deux animations sur `transform` et la seconde
écraserait la première.
Deux écritures pour un seul effet :
1. `animation-timeline: view()` lie l'animation à la POSITION de la section
dans la fenêtre. Le dézoom suit le doigt, s'arrête si on s'arrête, repart
en arrière si on remonte. Tout se passe sur le compositeur, sans JS et
sans un seul écouteur de scroll. Chrome, Edge et Safari 26 le lisent.
2. Firefox et les Safari plus anciens n'ont pas cette ligne de temps. Ils
reçoivent le même mouvement, mais déclenché une fois à l'entrée par
l'observateur qui pose déjà `.in` sur les autres blocs. Moins lié au
geste, tout aussi net à l'arrivée.
-------------------------------------------------------------------------- */
/* 2. La version de repli, qui sert aussi d'état de départ partout. */
.app-scene.reveal{
opacity:1; /* l'opacité est pilotée par le dézoom */
transform:scale(1.34);
filter:blur(5px);
transition:transform 1.1s cubic-bezier(.16,.84,.28,1),
filter .9s cubic-bezier(.16,.84,.28,1),
opacity .9s ease;
}
.app-scene.reveal.in{transform:none;filter:none}
/* 1. La version pilotée par le scroll, quand le navigateur sait la lire.
Elle reprend la main sur le repli ci-dessus : une animation l'emporte
sur une transition. */
@supports (animation-timeline:view()){
@media (prefers-reduced-motion:no-preference){
.app-scene.reveal{
transition:none;
animation:appDezoom linear both;
animation-timeline:view();
/* Départ dès que le haut de la scène entre dans la fenêtre, arrivée
quand elle en couvre 46 % : le téléphone est net bien avant d'être
centré, donc on ne lit jamais un écran flou. */
animation-range:entry 5% cover 46%;
}
}
}
@keyframes appDezoom{
from{transform:scale(1.34);filter:blur(5px);opacity:.45}
to {transform:none; filter:none; opacity:1}
}
/* --- Le second plan : les cartes arrivent en retard ----------------------
Le téléphone se pose d'abord, les quatre cartes le rejoignent ensuite.
Ce décalage est ce qui donne la profondeur : sans lui, tout le bloc bouge
d'une seule pièce et l'œil ne lit qu'un agrandissement.
L'animation porte sur le CONTENEUR et non sur les cartes, qui ont déjà
leur propre flottement sur `transform`. Le conteneur les emmène, chacune
garde son balancement.
-------------------------------------------------------------------------- */
.app-scene.reveal .app-cartes{
opacity:0;transform:scale(1.16);
transition:opacity .8s ease .18s,transform 1s cubic-bezier(.16,.84,.28,1) .18s;
}
.app-scene.reveal.in .app-cartes{opacity:1;transform:none}
@supports (animation-timeline:view()){
@media (prefers-reduced-motion:no-preference){
.app-scene.reveal .app-cartes{
transition:none;
animation:cartesArrivent linear both;
animation-timeline:view();
/* Démarre où le téléphone en est à la moitié, finit après lui. */
animation-range:entry 24% cover 62%;
}
}
}
@keyframes cartesArrivent{
from{opacity:0;transform:scale(1.16)}
to {opacity:1;transform:none}
}
/* Sous 1080 px les cartes ne sont plus autour du téléphone mais empilées
dessous : les écarter n'aurait plus de sens, il ne reste que le fondu. */
@media (max-width:1080px){
.app-scene.reveal .app-cartes,
.app-scene.reveal.in .app-cartes{transform:none}
@keyframes cartesArrivent{from{opacity:0}to{opacity:1}}
}
@media (prefers-reduced-motion:reduce){
.app-scene.reveal .app-cartes{opacity:1;transform:none;transition:none;animation:none}
}
/* Sur mobile la scène devient une pile et occupe presque toute la largeur :
au-delà de 1,15 le contenu se coupe sur les bords et l'effet devient une
gêne plutôt qu'une entrée. */
@media (max-width:1080px){
.app-scene.reveal{transform:scale(1.15);filter:blur(3px)}
@keyframes appDezoom{
from{transform:scale(1.15);filter:blur(3px);opacity:.55}
to {transform:none; filter:none; opacity:1}
}
}
/* Mouvement réduit : la scène est simplement là, nette, sans approche. */
@media (prefers-reduced-motion:reduce){
.app-scene.reveal{transform:none;filter:none;opacity:1;transition:none;animation:none}
}
@media (prefers-reduced-motion:reduce){
.app-tel,.app-carte,.app-halo i,.logo-3d{animation:none}
/* Le défilement s'arrête aussi : on garde le premier écran, visible. */
.tel-vue{animation:none;opacity:0}
.tel-vue:first-of-type{opacity:1}
}
@media (prefers-reduced-motion:reduce){
.am-btn{animation:none}
.am-bars i{transition:none;height:var(--h)}
}
/* ---------- Comparateur des statuts -------------------------------------
Même architecture sombre que les autres sections. La colonne Kovy est
mise en avant sur toute sa hauteur, les lignes arrivent en cascade.
------------------------------------------------------------------------ */
.sec-compare{position:relative;background:var(--ink-2);overflow:hidden;border-block:1px solid var(--bd-dark)}
.sec-compare::before{
content:"";position:absolute;left:50%;top:-10%;width:720px;height:520px;transform:translateX(-50%);
background:radial-gradient(50% 50% at 50% 50%,rgba(118,38,245,.10),transparent 70%);pointer-events:none
}
.sec-compare .wrap{position:relative}
.cmp-wrap{border:1px solid var(--bd-dark);border-radius:var(--r-l);background:rgba(118,38,245,.055);overflow-x:auto}
.cmp-dark{width:100%;border-collapse:separate;border-spacing:0;min-width:680px;color:var(--tx-on-dark)}
.cmp-dark th,.cmp-dark td{padding:15px 16px;text-align:left;vertical-align:middle;border-bottom:1px solid var(--bd-dark)}
.cmp-dark thead th{
font-family:var(--ff-display);font-size:.9rem;font-weight:700;letter-spacing:-.01em;
color:var(--tx-on-dark-2);background:rgba(118,38,245,0.032);white-space:nowrap
}
.cmp-th-lab{font-family:var(--ff-body);font-size:.74rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--tx-on-dark-3)}
.cmp-dark tbody th{font-size:.88rem;font-weight:600;color:var(--tx-on-dark);width:30%}
.cmp-dark td{font-size:.86rem;color:var(--tx-on-dark-2)}
.cmp-dark td span{vertical-align:middle}
.cmp-dark tbody tr:last-child th,.cmp-dark tbody tr:last-child td{border-bottom:0}
.cmp-dark tbody tr:hover th,.cmp-dark tbody tr:hover td{background:rgba(118,38,245,0.048)}
/* la colonne Kovy, mise en avant de haut en bas */
.cmp-col-us{background:rgba(118,38,245,.08);position:relative}
thead .cmp-col-us{background:rgba(118,38,245,.16);color:var(--acc)}
.cmp-dark tbody tr:hover .cmp-col-us{background:rgba(118,38,245,.13)}
.cmp-tag{
display:inline-block;margin-left:8px;padding:3px 9px;border-radius:var(--r-pill);
background:var(--acc);color:#10052E;font-family:var(--ff-body);font-size:.62rem;font-weight:700;
letter-spacing:.08em;text-transform:uppercase;vertical-align:middle
}
.est-ok{color:var(--tx-on-dark);font-weight:600}
/* marqueurs */
.cmp-ok,.cmp-ko,.cmp-mid{
/* flottant : sur deux lignes, le texte s'aligne à droite du marqueur */
float:left;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;
margin:1px 9px 0 0;font-size:.68rem;font-weight:700
}
.cmp-dark td{overflow:hidden}
.cmp-dark td>span{display:block;overflow:hidden}
/* le « validé » est la pastille dorée pleine du reste du site */
.cmp-ok{
font-size:0;color:transparent;width:22px;height:22px;
background:var(--acc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1310' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/13px no-repeat
}
/* les autres marqueurs : plus de bulle, seulement le signe */
.cmp-ko{background:none;color:var(--red);font-size:.85rem}
.cmp-mid{background:none;color:var(--tx-on-dark-3);font-size:.9rem}
.est-ko span:last-child{color:var(--tx-on-dark-3)}
/* les lignes se révèlent l'une après l'autre */
.reveal-row{opacity:0;transition:opacity .6s ease;transition-delay:calc(var(--i,0) * 70ms)}
.reveal-row.in{opacity:1}
@media (prefers-reduced-motion:reduce){.reveal-row{opacity:1;transition:none}}
@media (max-width:760px){
.cmp-dark th,.cmp-dark td{padding:12px 12px}
.cmp-dark tbody th{width:auto}
}
/* ---------- Section « Le métier aujourd'hui » ---------------------------
Même architecture que la section modèle, mais en cuivré : c'est le volet
qui décrit le problème, pas la solution.
----------------------------------------------------------------------- */
.sec-probleme{position:relative;background:var(--ink);overflow:hidden}
.sec-probleme::before{
content:"";position:absolute;right:-8%;top:6%;width:560px;height:560px;border-radius:50%;
background:rgba(217,58,43,.10);filter:blur(150px);pointer-events:none
}
.sec-probleme .wrap{position:relative}
.lead-center{margin:18px auto 0;max-width:64ch}
/* déclarée avant .pill-live, elle était écrasée par elle à spécificité égale :
on double la classe pour que la variante rouge l'emporte réellement */
.pill-live.pill-red{border-color:rgba(217,58,43,.34);background:rgba(217,58,43,.10);color:var(--red)}
.pill-live.pill-red i{background:var(--red)}
.mcard-red .mc-head{color:var(--red)}
.mcard-red:hover{border-color:rgba(217,58,43,.30)}
/* 1. chrono + liste des démarches */
.chrono{display:flex;align-items:baseline;gap:7px;margin-bottom:14px}
.ch-lab{font-size:.72rem;color:var(--tx-on-dark-3);margin-right:auto}
.ch-val{font-family:var(--ff-display);font-size:1.6rem;font-weight:700;letter-spacing:-.03em;color:var(--red)}
.ch-unit{font-size:.75rem;color:var(--tx-on-dark-3)}
.todo{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.todo li{
display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r-m);
background:rgba(118,38,245,.055);border:1px solid var(--bd-dark);font-size:.85rem;font-weight:600
}
.todo i{margin-left:auto;font-style:normal;font-size:.74rem;font-weight:400;color:var(--tx-on-dark-3)}
.td-x{
flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
background:rgba(217,58,43,.16);color:var(--red);font-size:.7rem;font-weight:700
}
/* 2. courbe en baisse */
.netbox-red .nb-val{color:var(--red)}
.nb-delta-red{background:rgba(217,58,43,.18);color:var(--red)}
.netbox-red .nb-point{background:var(--red);box-shadow:0 0 14px rgba(217,58,43,.75)}
/* 3. dossier écarté */
.dossier{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.dossier li{
display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r-m);
background:rgba(118,38,245,.055);border:1px solid var(--bd-dark);font-size:.85rem
}
.dossier b{font-weight:600}
.dossier i{margin-left:auto;font-style:normal;font-size:.74rem;color:var(--tx-on-dark-3)}
.ds-ok,.ds-x{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;font-size:.7rem;font-weight:700}
.ds-ok{background:rgba(118,38,245,0.100);color:rgba(255,255,255,.6)}
.ds-x{background:rgba(217,58,43,.18);color:var(--red)}
.ds-ko{border-color:rgba(217,58,43,.34)}
.ds-ko b{color:var(--red)}
/* la croix frétille en fin de cycle, comme le crossWiggle d'INCOM */
.wiggle{animation:wiggle 4s ease-in-out infinite}
@keyframes wiggle{
0%,70%,100%{transform:rotate(0) scale(1)}
78%{transform:rotate(-12deg) scale(1.12)}
86%{transform:rotate(12deg) scale(1.12)}
94%{transform:rotate(-6deg) scale(1.05)}
}
.tampon{
margin-top:14px;padding:9px 14px;border-radius:var(--r-s);text-align:center;
border:1px dashed rgba(217,58,43,.5);color:var(--red);
font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase
}
@media (prefers-reduced-motion:reduce){.wiggle{animation:none}}
/* ---------- Trois cartes de service (orbites, calendrier, bulletins) -----
Transposition du bas de la section « nouveau modèle » d'INCOM.
------------------------------------------------------------------------ */
.mgrid.mgrid-3{grid-template-columns:repeat(3,1fr);margin-top:18px}
@media (max-width:1040px){.mgrid.mgrid-3{grid-template-columns:1fr}}
/* A. plateformes en orbite */
.orbite{position:relative;height:250px;display:grid;place-items:center;margin-top:8px}
.orb-anneau{position:absolute;border-radius:50%;border:1px solid rgba(118,38,245,0.100)}
.orb-anneau.o1{width:120px;height:120px}
.orb-anneau.o2{width:184px;height:184px;border-color:rgba(118,38,245,0.096)}
.orb-anneau.o3{width:246px;height:246px;border-color:rgba(118,38,245,0.064)}
.orb-centre{
position:relative;z-index:2;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
background:var(--ink-3);border:1px solid rgba(118,38,245,.35)
}
.orb-centre::before{
content:"";position:absolute;inset:-6px;border-radius:50%;z-index:-1;
background:rgba(118,38,245,.5);filter:blur(22px);animation:halo-c 2s ease-in-out infinite
}
@keyframes halo-c{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:.95;transform:scale(1.6)}}
.orb-tour{position:absolute;width:184px;height:184px;animation:tour 24s linear infinite}
.orb-item{position:absolute;left:50%;top:50%;width:32px;height:32px;margin:-16px 0 0 -16px;
transform:rotate(var(--a)) translateY(-92px) rotate(calc(-1 * var(--a)))}
.orb-pas{
display:grid;place-items:center;width:32px;height:32px;border-radius:50%;overflow:hidden;
box-shadow:0 6px 16px rgba(77,18,200,.14);animation:tour-inv 24s linear infinite
}
/* logos à fond plein : ils remplissent la pastille */
.orb-pas--plein img{width:100%;height:100%;object-fit:cover}
/* logos détourés : posés à nu, sans pastille */
.orb-pas--clair{background:none;box-shadow:none;padding:2px}
.orb-pas--clair img{width:100%;height:100%;object-fit:contain}
@keyframes tour{to{transform:rotate(360deg)}}
@keyframes tour-inv{to{transform:rotate(-360deg)}}
@media (prefers-reduced-motion:reduce){
.orb-tour,.orb-pas,.orb-centre::before{animation:none}
}
/* B. calendrier */
.calend{margin-top:14px;padding:12px;border-radius:var(--r-m);background:rgba(118,38,245,.055);border:1px solid var(--bd-dark)}
.cd-tete,.cd-grille{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}
/* En-tête des jours : à .64rem en gris pâle, les lettres ne se lisaient pas.
On monte la taille, on assombrit, et on espace les lettres — un L et un M
isolés ont besoin d'air pour se distinguer. */
.cd-tete span{
font-size:.74rem;font-weight:800;letter-spacing:.06em;
color:var(--tx-on-dark-2);padding-bottom:6px
}
.cd-grille span{
aspect-ratio:1;display:grid;place-items:center;border-radius:7px;font-size:.72rem;
font-weight:600;
/* La couleur était un blanc translucide hérité du thème sombre : sur la
carte claire, les numéros disparaissaient. */
background:rgba(118,38,245,.07);color:var(--tx-on-dark-2)
}
/* Jours du mois voisin : présents mais en retrait, sans être invisibles. */
.cd-grille .cd-off{background:none;color:var(--tx-on-dark-3);font-weight:400}
.cd-grille .cd-lun{
background:rgba(118,38,245,.18);color:var(--acc);font-weight:700;
/* même pulsation que les coches « Disponible » de la carte Chaque mois */
animation:ok-pulse 2s ease-in-out infinite
}
/* léger décalage d'un lundi à l'autre, pour que la semaine respire */
.cd-grille .cd-lun:nth-of-type(8){animation-delay:0s}
.cd-grille .cd-lun:nth-of-type(15){animation-delay:.12s}
.cd-grille .cd-lun:nth-of-type(22){animation-delay:.24s}
.cd-grille .cd-lun:nth-of-type(29){animation-delay:.36s}
.cd-grille .cd-lun:nth-of-type(36){animation-delay:.48s}
@media (prefers-reduced-motion:reduce){.cd-grille .cd-lun{animation:none}}
/* C. bulletins qui défilent */
.paylist{
position:relative;height:210px;margin-top:14px;overflow:hidden;
-webkit-mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 86%,transparent);
mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 86%,transparent)
}
.pay-piste{position:absolute;inset:0 0 auto 0;display:flex;flex-direction:column;gap:10px;
animation:paie 16s linear infinite;will-change:transform}
@keyframes paie{to{transform:translateY(-50%)}}
.paylist:hover .pay-piste{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.pay-piste{animation:none}}
.pay{display:flex;align-items:center;gap:10px;padding:9px 10px 9px 16px;border-radius:var(--r-pill);
background:rgba(118,38,245,.055);border:1px solid var(--bd-dark)}
.pay-nom{flex:1;min-width:0;font-size:.8rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pay-etat{flex:none;font-size:.72rem;color:var(--acc);font-weight:600}
.pay-ok{
flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;color:var(--acc);
border:1px solid rgba(118,38,245,.32);background:rgba(118,38,245,.10);
animation:ok-pulse 2s ease-in-out infinite
}
.pay-ok svg{width:12px;height:12px}
@keyframes ok-pulse{0%,100%{box-shadow:0 0 0 0 rgba(118,38,245,.55)}50%{box-shadow:0 0 0 6px rgba(118,38,245,0)}}
@media (prefers-reduced-motion:reduce){.pay-ok{animation:none}}
/* ---------- Cartes vivantes : boucle avec temps mort ---------------------
Repris du procédé d'INCOM (chip-rise / check-pop) : l'élément arrive sur
les 12 premiers % du cycle, reste posé jusqu'à 88 %, puis s'efface et la
séquence recommence. --d porte le rang dans la cascade.
------------------------------------------------------------------------ */
.rise{animation:rise-loop 4s ease-in-out infinite both;animation-delay:var(--d,0s)}
@keyframes rise-loop{
0% {opacity:0;transform:translateY(9px)}
12% {opacity:1;transform:none}
88% {opacity:1;transform:none}
100%{opacity:0;transform:translateY(9px)}
}
.pop{animation:pop-loop 4s ease-in-out infinite both;animation-delay:var(--d,0s);transform-origin:center}
@keyframes pop-loop{
0% {opacity:0;transform:scale(0) rotate(-45deg)}
10% {opacity:1;transform:scale(1.25) rotate(0)}
18% {opacity:1;transform:scale(1) rotate(0)}
88% {opacity:1;transform:scale(1) rotate(0)}
100%{opacity:0;transform:scale(0) rotate(-45deg)}
}
/* la carte survolée se fige : on peut lire tranquillement */
.mcard:hover .rise,.mcard:hover .pop{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){
.rise,.pop{animation:none;opacity:1;transform:none}
}
/* ---------- Section « Le nouveau modèle » : grandes cartes de démonstration ---------- */
.sec-modele{position:relative;background:var(--ink);overflow:hidden}
.sec-modele::before{
content:"";position:absolute;left:-10%;top:12%;width:620px;height:620px;border-radius:50%;
background:rgba(118,38,245,.10);filter:blur(140px);pointer-events:none
}
.sec-modele .wrap{position:relative}
/* pastille « Découvrir Kovy » avec son point qui respire */
.pill-live{
display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:var(--r-pill);
border:1px solid rgba(118,38,245,.34);background:rgba(118,38,245,.10);
font-size:.78rem;font-weight:600;color:var(--acc)
}
.pill-live i{width:6px;height:6px;border-radius:50%;background:var(--acc);animation:live 1.8s ease-in-out infinite}
@keyframes live{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.pill-live i{animation:none}}
.mtitle{margin:20px 0 0;font-size:clamp(2rem,4vw,3.4rem);line-height:1.05}
.mtitle span{color:var(--tx-on-dark-3)}
/* sans cela le chapeau se colle au titre, la marge du h2 étant à zéro en bas */
.mtitle+.lead,.mtitle+p{margin-top:18px}
.mgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:860px){.mgrid{grid-template-columns:1fr}}
.mcard{
display:flex;flex-direction:column;padding:26px;
border:1px solid var(--bd-dark);border-radius:var(--r-xl);
background:linear-gradient(180deg,#FFFFFF,#F7F2FF);
transition:border-color .25s
}
.mcard:hover{border-color:var(--bd-dark-2)}
.mc-head{display:flex;align-items:center;gap:8px;font-size:.8rem;font-weight:600;color:var(--acc)}
.mc-head svg{width:16px;height:16px;flex:none}
.mc-demo{margin-top:20px}
.mc-foot{margin-top:auto;padding-top:22px}
.mc-foot h3{font-size:1.02rem;margin-bottom:6px}
.mc-foot p{font-size:.9rem;line-height:1.55;color:var(--tx-on-dark-2);margin:0}
/* 1. statut */
.chips{display:flex;align-items:center;justify-content:center;gap:12px}
.chip{
padding:6px 14px;border-radius:var(--r-pill);font-size:.78rem;font-weight:600;color:var(--acc);
border:1px solid rgba(118,38,245,.30);background:rgba(118,38,245,.10)
}
.chip-plus{color:var(--acc);font-size:1.1rem;font-weight:600}
.statut-box{margin-top:16px;padding:18px;border-radius:var(--r-m);background:rgba(118,38,245,.055);text-align:center}
.sb-lab{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--tx-on-dark-3)}
.sb-val{margin-top:6px;font-family:var(--ff-display);font-size:1.5rem;font-weight:700;letter-spacing:-.02em;color:var(--acc)}
.sb-tag{
display:inline-flex;align-items:center;gap:6px;margin-top:12px;padding:5px 12px;border-radius:var(--r-pill);
background:rgba(118,38,245,.16);font-size:.72rem;font-weight:600;color:var(--acc)
}
.sb-tag svg{width:11px;height:11px}
/* 2. protection */
.tag-acc{
display:inline-block;padding:5px 12px;border-radius:var(--r-pill);
background:var(--acc);color:#10052E;font-size:.72rem;font-weight:700
}
.checkgrid{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.checkgrid li{
display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:var(--r-s);
background:rgba(118,38,245,.055);border:1px solid var(--bd-dark);font-size:.86rem;font-weight:600
}
.checkgrid li::before{
content:"";width:13px;height:13px;flex:none;background:var(--acc);
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat
}
@media (max-width:420px){.checkgrid{grid-template-columns:1fr}}
/* ---------- Courbe du revenu (carte « Votre revenu optimisé ») ----------
Le tracé se dessine via stroke-dashoffset, un point le parcourt et reste
pulsant au sommet. Procédé repris du bloc « Revenus optimisés » d'INCOM.
----------------------------------------------------------------------- */
.netbox{padding:18px;border-radius:var(--r-m);background:rgba(118,38,245,.055);border:1px solid var(--bd-dark)}
.nb-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.nb-lab{display:block;font-size:.72rem;color:var(--tx-on-dark-3)}
.nb-val{display:block;margin-top:3px;font-family:var(--ff-display);font-size:1.75rem;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.nb-delta{
display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:var(--r-pill);
background:rgba(118,38,245,.16);color:var(--acc);font-size:.72rem;font-weight:700;white-space:nowrap
}
.nb-delta svg{width:12px;height:12px}
.nb-graph{position:relative;height:86px;margin-top:14px}
.nb-graph svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.nb-ligne{stroke-dasharray:1;stroke-dashoffset:1}
.nb-aire{opacity:0}
.netbox.tracee .nb-ligne{transition:stroke-dashoffset 1.8s cubic-bezier(.35,.75,.4,1);stroke-dashoffset:0}
.netbox.tracee .nb-aire{transition:opacity 1s ease .7s;opacity:.9}
.nb-point{
position:absolute;left:0;top:0;width:11px;height:11px;border-radius:50%;background:var(--acc);
box-shadow:0 0 14px rgba(118,38,245,.75);opacity:0;pointer-events:none;
transform:translate(-50%,-50%)
}
.netbox.tracee .nb-point{opacity:1;animation:pointPulse 1.6s ease-in-out infinite}
@keyframes pointPulse{0%,100%{opacity:1}50%{opacity:.7}}
/* fondu de sortie avant que la séquence ne reparte */
.netbox.efface .nb-ligne,.netbox.efface .nb-aire,.netbox.efface .nb-point{transition:opacity .45s ease;opacity:0}
.netbox.efface .nb-ligne{transition:opacity .45s ease,stroke-dashoffset 0s}
@media (prefers-reduced-motion:reduce){
.nb-ligne{stroke-dashoffset:0}.nb-aire{opacity:.9}
.netbox.tracee .nb-point{animation:none}
}
/* 4. paperasse */
.taches{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.taches li{
display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--r-m);
background:rgba(118,38,245,.055);border:1px solid var(--bd-dark)
}
.t-logo{
/* pas de pastille : les logos sont posés à nu sur la carte */
flex:none;width:34px;height:34px;display:grid;place-items:center
}
.t-logo img,.t-logo svg{max-width:100%;max-height:100%;width:auto;height:auto;display:block}
.taches div{flex:1;min-width:0}
.taches b{display:block;font-size:.88rem}
.taches span{display:block;font-size:.76rem;color:var(--tx-on-dark-3)}
.t-ok{width:15px;height:15px;flex:none;color:var(--acc)}
/* ---------- Bandeau plateformes ---------- */
.marquee{border-block:1px solid var(--bd-dark);padding-block:22px;overflow:hidden;background:#fff}
.mq-label{margin:0 0 18px;text-align:center;font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-on-dark-3)}
.marquee-in{display:flex;gap:56px;align-items:center;width:max-content;justify-content:center;
animation:slide 100s linear infinite;will-change:transform}
@media (prefers-reduced-motion:reduce){
.marquee-in{animation:none;justify-content:center;width:auto;flex-wrap:wrap;gap:32px}
/* le ruban est doublé pour boucler sans saut : sans défilement la seconde
copie n'a plus de raison d'être, et dans le hero elle débordait sur les
chiffres posés au-dessus */
.marquee-in [aria-hidden="true"]{display:none}
}
.marquee:hover .marquee-in{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.plat{font-family:var(--ff-display);font-size:1.35rem;font-weight:700;color:rgba(255,255,255,.42);letter-spacing:-.02em;white-space:nowrap}
/* ---------- Cartes ---------- */
.card{
background:var(--ink-2);border:1px solid var(--bd-dark);border-radius:var(--r-l);
padding:30px;transition:border-color .25s,transform .25s,background .25s;height:100%
}
.card:hover{border-color:var(--bd-dark-2);transform:translateY(-3px)}
.sec-light .card,.sec-soft .card{background:#fff;border-color:var(--bd-light);box-shadow:var(--sh-1)}
.card p{color:var(--tx-on-dark-2);margin-bottom:0}
.sec-light .card p,.sec-soft .card p{color:var(--tx-on-light-2)}
.card-ico{
width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
background:rgba(118,38,245,.13);color:var(--acc);margin-bottom:20px
}
.card-ico svg{width:22px;height:22px}
.sec-light .card-ico,.sec-soft .card-ico{background:var(--paper-3);color:var(--violet-d)}
/* Cartes horizontales : icône à gauche, texte à droite (bande « pourquoi nous »). */
.card-h{display:flex;gap:16px;align-items:flex-start;padding:26px 24px}
.card-h .card-ico{margin-bottom:0;flex:none;width:44px;height:44px;border-radius:12px}
.card-h .card-ico svg{width:21px;height:21px}
.card-h .card-body{min-width:0}
.card-h h3{font-size:1.06rem;margin-bottom:8px}
.card-h p{font-size:.92rem;line-height:1.5}
@media (max-width:620px){.card-h{padding:22px 20px}}
.card-acc,.sec-light .card-acc,.sec-soft .card-acc{background:var(--acc);color:#10052E;border-color:var(--acc);box-shadow:none}
.sec-light .card-acc p,.sec-soft .card-acc p{color:rgba(16,5,46,.72)}
.sec-light .card-acc .card-ico,.sec-soft .card-acc .card-ico{background:var(--violet-soft);color:var(--violet-d)}
.card-acc p{color:rgba(16,5,46,.72)}
.card-acc .card-ico{background:var(--violet-soft);color:var(--violet-d)}
.card-pb .card-ico{background:rgba(255,107,94,.12);color:var(--red)}
.sec-light .card-pb .card-ico,.sec-soft .card-pb .card-ico{background:rgba(217,58,43,.16);color:#D93A2B}
.num{font-family:var(--ff-display);font-size:2.6rem;letter-spacing:-.04em;line-height:1;color:var(--acc);display:block;margin-bottom:10px}
.sec-light .num,.sec-soft .num{color:var(--violet-d)}
/* ---------- Split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.split.rev>*:first-child{order:2}
@media (max-width:900px){.split{grid-template-columns:1fr}.split.rev>*:first-child{order:0}}
.checklist{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:14px}
.checklist li{position:relative;padding-left:34px;color:var(--tx-on-dark-2)}
.sec-light .checklist li,.sec-soft .checklist li{color:var(--tx-on-light-2)}
.checklist li::before{
content:"";position:absolute;left:0;top:3px;width:22px;height:22px;border-radius:50%;
background:var(--acc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1310' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/13px no-repeat
}
.checklist li b{color:var(--tx-on-dark)}
.sec-light .checklist li b,.sec-soft .checklist li b{color:var(--tx-on-light)}
/* ---------- Mock app ---------- */
.mock{
background:linear-gradient(160deg,#FFFFFF,#F7F2FF);border:1px solid var(--bd-light);
border-radius:var(--r-xl);padding:24px;box-shadow:var(--sh-2);
/* posée sur un aplat violet elle reste claire : son contenu reprend donc
les couleurs de texte du fond clair */
--tx-on-dark:#10052E;--tx-on-dark-2:rgba(16,5,46,.68);--tx-on-dark-3:rgba(16,5,46,.46);
--bd-dark:rgba(16,5,46,.11);--bd-dark-2:rgba(16,5,46,.20);
color:var(--night)
}
.mock-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 18px;border-radius:var(--r-m);background:#F5F0FF;border:1px solid var(--bd-dark);margin-bottom:10px;color:var(--night)}
.mock-row:last-child{margin-bottom:0}
.mock-row small{display:block;color:var(--tx-on-dark-3);font-size:.78rem}
.mock-row .amt{font-family:var(--ff-display);font-size:1.15rem}
.mock-row.hl{background:var(--violet);color:#fff;border-color:var(--violet)}
.mock-row.hl small{color:rgba(255,255,255,.72)}
.mock-hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;color:var(--tx-on-dark-3);font-size:.82rem;text-transform:uppercase;letter-spacing:.1em}
.bars{display:flex;align-items:flex-end;gap:8px;height:120px;margin:6px 0 18px}
.bars i{flex:1;background:rgba(118,38,245,.16);border-radius:6px 6px 2px 2px;display:block}
.bars i.on{background:var(--acc)}
/* ---------- Tableau comparatif ---------- */
.tablewrap{overflow-x:auto;border-radius:var(--r-l);border:1px solid var(--bd-light);background:#fff;-webkit-overflow-scrolling:touch}
.sec:not(.sec-light):not(.sec-soft) .tablewrap{border-color:var(--bd-dark);background:var(--ink-2)}
table.cmp{width:100%;border-collapse:collapse;min-width:700px;font-size:.96rem}
table.cmp th,table.cmp td{padding:16px 20px;text-align:left;border-bottom:1px solid var(--bd-light);vertical-align:top}
.sec:not(.sec-light):not(.sec-soft) table.cmp th,
.sec:not(.sec-light):not(.sec-soft) table.cmp td{border-color:var(--bd-dark)}
table.cmp thead th{font-family:var(--ff-display);font-size:1rem;background:var(--paper-2);white-space:nowrap}
.sec:not(.sec-light):not(.sec-soft) table.cmp thead th{background:var(--ink-3)}
table.cmp tbody th{font-weight:600;color:var(--tx-on-light-2);width:32%}
.sec:not(.sec-light):not(.sec-soft) table.cmp tbody th{color:var(--tx-on-dark-2)}
table.cmp .col-us{background:rgba(118,38,245,.13)}
table.cmp thead .col-us{background:var(--acc);color:#10052E}
table.cmp tbody tr:last-child td,table.cmp tbody tr:last-child th{border-bottom:0}
.yes{color:#4D12C8;font-weight:600}.no{color:#D93A2B;font-weight:600}
.sec:not(.sec-light):not(.sec-soft) .yes{color:var(--acc)}
.sec:not(.sec-light):not(.sec-soft) .no{color:var(--red)}
/* ---------- Étapes ---------- */
.steps{counter-reset:s}
.step{
counter-increment:s;display:grid;grid-template-columns:64px 1fr;gap:24px;
padding:26px 0;border-top:1px solid var(--bd-light);align-items:start
}
.sec:not(.sec-light):not(.sec-soft) .step{border-color:var(--bd-dark)}
.step:last-child{border-bottom:1px solid var(--bd-light)}
.sec:not(.sec-light):not(.sec-soft) .step:last-child{border-color:var(--bd-dark)}
.step::before{
content:"0" counter(s);font-family:var(--ff-display);font-size:1.5rem;letter-spacing:-.03em;
color:var(--tx-on-light-3)
}
.sec:not(.sec-light):not(.sec-soft) .step::before{color:var(--tx-on-dark-3)}
.step h4{margin-bottom:6px}
.step p{margin:0;color:var(--tx-on-light-2)}
.sec:not(.sec-light):not(.sec-soft) .step p{color:var(--tx-on-dark-2)}
@media (max-width:560px){.step{grid-template-columns:44px 1fr;gap:14px}}
/* ---------- Témoignages ---------- */
.quote{background:#fff;border:1px solid var(--bd-light);border-radius:var(--r-l);padding:28px;height:100%;display:flex;flex-direction:column;box-shadow:var(--sh-1)}
.sec:not(.sec-light):not(.sec-soft) .quote{background:var(--ink-2);border-color:var(--bd-dark);box-shadow:none}
.stars{color:var(--acc-d);letter-spacing:2px;font-size:.9rem;margin-bottom:14px}
.quote p{font-size:1.02rem;flex:1}
.who{display:flex;align-items:center;gap:12px;margin-top:18px}
.av{width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--violet);color:#fff;font-weight:800;font-family:var(--ff-display)}
.who b{display:block;font-size:.95rem}
.who span{font-size:.82rem;color:var(--tx-on-light-3)}
.sec:not(.sec-light):not(.sec-soft) .who span{color:var(--tx-on-dark-3)}
/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--bd-light)}
.sec:not(.sec-light):not(.sec-soft) .faq{border-color:var(--bd-dark)}
.faq details{border-bottom:1px solid var(--bd-light)}
.sec:not(.sec-light):not(.sec-soft) .faq details{border-color:var(--bd-dark)}
.faq summary{
list-style:none;cursor:pointer;padding:24px 44px 24px 0;position:relative;
font-family:var(--ff-display);font-size:1.1rem;letter-spacing:-.01em
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
content:"";position:absolute;right:6px;top:50%;width:14px;height:14px;margin-top:-7px;
background:currentColor;transition:transform .25s;
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat
}
.faq details[open] summary::after{transform:rotate(135deg)}
.faq details p{padding-right:44px;color:var(--tx-on-light-2);margin-bottom:24px}
.sec:not(.sec-light):not(.sec-soft) .faq details p{color:var(--tx-on-dark-2)}
/* ---------- Prix ---------- */
.price{
background:#fff;color:var(--night);border-radius:var(--r-xl);padding:clamp(32px,5vw,56px);box-shadow:var(--sh-1);
display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:center;border:1px solid var(--bd-dark)
}
@media (max-width:820px){.price{grid-template-columns:1fr}}
.price-big{font-family:var(--ff-display);font-size:clamp(4rem,11vw,7rem);line-height:.9;letter-spacing:-.05em;color:var(--acc)}
.price-big small{font-size:.22em;letter-spacing:-.01em;color:var(--tx-on-dark-2);display:block;margin-top:14px;font-family:var(--ff-body);line-height:1.5;font-weight:400}
.price .checklist li{color:var(--tx-on-dark-2)}
.price .checklist li b{color:inherit}
/* ---------- Bannière CTA ---------- */
/* l'ancre du bouton Candidater : on s'arrête sous l'en-tête collé */
#rejoindre,#comparateur{scroll-margin-top:84px}
.cta-band{
background:linear-gradient(150deg,#7626F5 0%,#8B2BF4 46%,#A23AF3 100%);color:#fff;
border-radius:var(--r-xl);padding:clamp(36px,5vw,64px);text-align:center;
box-shadow:var(--sh-2)
}
.cta-band h2{color:#fff}
.cta-band p{color:rgba(255,255,255,.82);max-width:56ch;margin-inline:auto;font-size:1.1rem}
/* les boutons posés dessus : plein blanc pour le principal, contour pour l'autre */
.cta-band .btn,.sec-violet .btn{--bg:#fff;--fg:var(--violet-d);--bd:#fff}
.cta-band .btn-ghost,.sec-violet .btn-ghost{--bg:transparent;--fg:#fff;--bd:rgba(255,255,255,.55)}
.cta-band .btn-ghost:hover,.sec-violet .btn-ghost:hover{--bg:rgba(255,255,255,.14)}
.cta-band .btn-dark,.sec-violet .btn-dark{--bg:var(--night);--fg:#fff;--bd:var(--night)}
/* ---------- Formulaire ---------- */
.form{display:grid;gap:16px;grid-template-columns:1fr 1fr}
.form .full{grid-column:1/-1}
@media (max-width:640px){.form{grid-template-columns:1fr}}
.form label{display:block;font-size:.85rem;font-weight:600;margin-bottom:8px;color:var(--tx-on-dark-2)}
.sec-light .form label,.sec-soft .form label{color:var(--tx-on-light-2)}
.form input,.form select,.form textarea{
width:100%;padding:14px 16px;border-radius:var(--r-s);
background:#fff;border:1px solid var(--bd-dark-2);color:var(--night);transition:border-color .2s
}
.sec-light .form input,.sec-light .form select,.sec-light .form textarea,
.sec-soft .form input,.sec-soft .form select,.sec-soft .form textarea{background:#fff;border-color:var(--bd-light);color:var(--tx-on-light)}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--acc)}
.form textarea{min-height:110px;resize:vertical}
.form .consent{display:flex;gap:10px;align-items:flex-start;font-size:.84rem;color:var(--tx-on-dark-3)}
.sec-light .form .consent,.sec-soft .form .consent{color:var(--tx-on-light-3)}
.form .consent input{width:auto;margin-top:3px}
.form-note{font-size:.85rem;color:var(--tx-on-dark-3);margin:0}
.sec-light .form-note,.sec-soft .form-note{color:var(--tx-on-light-3)}
.form-ok{background:rgba(118,38,245,.16);border:1px solid var(--acc);border-radius:var(--r-m);padding:16px;color:var(--acc);font-weight:600;display:none}
.sec-light .form-ok,.sec-soft .form-ok{color:#4D12C8}
.form-ok.show{display:block}
.form-err{background:rgba(217,58,43,.14);border:1px solid var(--red);border-radius:var(--r-m);padding:16px;color:var(--red);font-weight:600;display:none}
.sec-light .form-err,.sec-soft .form-err{color:#D93A2B}
.form-err.show{display:block}
/* ---------- Footer ---------- */
.ftr{background:var(--ink-2);border-top:1px solid var(--bd-dark);padding-block:64px 32px}
.ftr-grid{display:grid;grid-template-columns:1.5fr repeat(5,1fr);gap:40px 26px}
/* 6 colonnes depuis l'ajout des Guides VTC. Sans le palier a 1180px, la
derniere colonne (Legal) passait seule a la ligne sous le logo. */
@media (max-width:1180px){.ftr-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:900px){.ftr-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ftr-grid{grid-template-columns:1fr}}
.ftr h5{font-family:var(--ff-display);font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tx-on-dark-3);margin:0 0 16px}
.ftr ul{list-style:none;padding:0;margin:0;display:grid;gap:11px}
.ftr a{color:var(--tx-on-dark-2);font-size:.94rem;transition:color .2s}
.ftr a:hover{color:var(--acc)}
.ftr-bot{margin-top:52px;padding-top:24px;border-top:1px solid var(--bd-dark);display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;font-size:.85rem;color:var(--tx-on-dark-3)}
.socials{display:flex;gap:10px}
.socials a{width:38px;height:38px;border-radius:50%;border:1px solid var(--bd-dark-2);display:grid;place-items:center;font-size:.78rem;font-weight:600}
.socials a:hover{background:var(--acc);color:#10052E;border-color:var(--acc)}
/* ---------- Divers ---------- */
.pill{display:inline-block;max-width:100%;padding:6px 13px;border-radius:var(--r-pill);border:1px solid var(--bd-dark-2);font-size:.8rem;color:var(--tx-on-dark-2)}
.sec-light .pill,.sec-soft .pill{border-color:var(--bd-light);color:var(--tx-on-light-2)}
.pill-acc{background:var(--acc);color:#10052E;border-color:var(--acc);font-weight:600}
.pills{display:flex;flex-wrap:wrap;gap:10px}
/* ---------- Apparition au défilement ----------------------------------
Un seul mécanisme : l'élément monte en fondu quand il entre à l'écran.
Les enfants d'une grille partent en cascade grâce à --i, posé en JS.
---------------------------------------------------------------------- */
.reveal{
opacity:0;transform:translateY(26px);
transition:opacity .75s cubic-bezier(.2,.7,.3,1),transform .75s cubic-bezier(.2,.7,.3,1);
transition-delay:calc(var(--i,0) * 90ms)
}
.reveal.in{opacity:1;transform:none}
/* variantes, posées à la main sur les blocs qui gagnent à venir de côté */
.reveal-l{transform:translateX(-32px)}
.reveal-r{transform:translateX(32px)}
.reveal-zoom{transform:scale(.965)}
.reveal-l.in,.reveal-r.in,.reveal-zoom.in{transform:none}
/* sur une colonne, une entrée latérale élargirait la page : on la remet en montée */
@media (max-width:900px){.reveal-l,.reveal-r{transform:translateY(26px)}}
/* le visuel du hero et les titres se posent dès le chargement */
.hero-visuel img{animation:hero-in 1.5s cubic-bezier(.2,.7,.3,1) both}
@keyframes hero-in{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:none}}
.hero-copy>*{animation:up-in .8s cubic-bezier(.2,.7,.3,1) both}
.hero-copy>*:nth-child(1){animation-delay:.05s}
.hero-copy>*:nth-child(2){animation-delay:.15s}
.hero-copy>*:nth-child(3){animation-delay:.25s}
.hero-copy>*:nth-child(4){animation-delay:.35s}
@keyframes up-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
.reveal,.reveal-l,.reveal-r,.reveal-zoom{opacity:1;transform:none;transition:none}
.hero-visuel img,.hero-copy>*{animation:none}
}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:200;background:var(--acc);color:#fff;padding:12px 18px;border-radius:8px}
/* Page interne */
.pagehead{padding-block:clamp(56px,7vw,90px) clamp(36px,4vw,56px);position:relative;overflow:hidden}
.pagehead::before{content:"";position:absolute;inset:-40% -10% auto -10%;height:520px;background:radial-gradient(50% 60% at 30% 0%,rgba(118,38,245,.15),transparent 70%);pointer-events:none}
.pagehead .wrap{position:relative}
.crumb{font-size:.85rem;color:var(--tx-on-dark-3);margin-bottom:18px}
.crumb a:hover{color:var(--acc)}
/* Bandeau webinaire */
/* ---------- Revue de presse ---------- */
.media-row{
display:grid;grid-template-columns:repeat(6,1fr);gap:18px;align-items:stretch;
}
@media (max-width:900px){.media-row{grid-template-columns:repeat(3,1fr)}}
@media (max-width:520px){.media-row{grid-template-columns:repeat(2,1fr)}}
.media-logo{
display:grid;place-items:center;text-align:center;min-height:92px;padding:18px 12px;
background:var(--ink-3);border:1px solid var(--bd-dark);border-radius:var(--r-m);
transition:border-color .2s,transform .2s cubic-bezier(.2,.7,.3,1);
}
.media-logo:hover{border-color:var(--acc);transform:translateY(-3px)}
.media-logo span{
font-family:var(--ff-display);font-weight:700;font-size:1.05rem;letter-spacing:-.02em;
color:var(--tx-on-dark-2);line-height:1.2;
}
.media-logo:hover span{color:var(--acc)}
a.media-logo{cursor:pointer}
/* ---------- Certifications sous la bande presse ---------- */
/* ---------- Logos de presse dans la bande ---------- */
.press-logo{
height:24px;width:auto;flex:none;
/* logos affichés dans leurs couleurs d'origine : plusieurs ont un aplat
de couleur, un filtre de mise en blanc les transformerait en pavés */
opacity:.92;transition:opacity .2s;
}
.marquee:hover .press-logo{opacity:1}
/* les logos carrés paraissent deux fois plus petits à hauteur égale */
.press-logo--sq{height:32px}
/* Auto Plus est un logo en portrait : il lui faut plus de hauteur */
.press-logo--tall{height:50px}
/* Le Monde et Le Figaro sont des logos noirs : le fond est clair, ils restent tels quels */
.press-logo--ink{height:26px;opacity:.78}
/* DNA : bandeau très allongé, il tient une hauteur plus basse */
.press-logo--wide{height:28px}
/* 20 Minutes : son bleu suffit sur fond clair, aucun rattrapage nécessaire */
.press-logo--lift{opacity:.9}
.marquee:hover .press-logo--ink,.hero-marquee:hover .press-logo--ink{opacity:1}
@media (max-width:680px){.press-logo{height:19px}.press-logo--sq{height:25px}.press-logo--tall{height:42px}.press-logo--ink{height:20px}.press-logo--wide{height:22px}}
/* Auto Plus est en typo faute de logo libre : on l'aligne sur le poids
visuel des logos voisins, sinon il écrase la bande */
.marquee-in .plat{font-size:1.05rem;color:rgba(255,255,255,.55)}
/* ---------- Invite d'installation (PWA) ---------- */
.install-bar{
position:fixed;left:16px;right:16px;bottom:16px;z-index:120;
margin-left:auto;/* desktop : collée à droite, elle ne masque plus le CTA */
display:none;align-items:center;gap:14px;
background:var(--ink-3);border:1px solid var(--bd-dark-2);border-radius:var(--r-l);
padding:14px 16px;box-shadow:var(--sh-2);max-width:520px;margin-inline:auto;
}
.install-bar.show{display:flex;animation:install-in .35s cubic-bezier(.2,.7,.3,1)}
@media (min-width:761px){.install-bar{left:auto;right:24px;bottom:24px;margin-inline:0;width:min(430px,calc(100% - 48px))}}
@keyframes install-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.install-bar img{border-radius:10px;flex:none}
.install-txt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.install-txt b{font-size:.95rem}
.install-txt span{font-size:.82rem;color:var(--tx-on-dark-2);line-height:1.35}
.install-no{
background:none;border:0;color:var(--tx-on-dark-3);cursor:pointer;
font-size:1rem;line-height:1;padding:6px;flex:none;
}
.install-no:hover{color:var(--tx-on-dark)}
@media (max-width:520px){
.install-txt span{display:none}
.install-bar{gap:10px;padding:12px}
}
/* ---------- Halos de section réutilisables (pages internes) ---------------
Chaque section de l'accueil a son halo nommé par thème (.sec-modele,
.sec-droits…). Les pages internes réutilisent ces trois variantes,
posables sur n'importe quelle section sombre. -------------------------- */
.sec-h{position:relative;overflow:hidden}
.sec-h>.wrap{position:relative;z-index:1}
.sec-h::before{
content:"";position:absolute;width:600px;height:600px;border-radius:50%;
background:rgba(118,38,245,.09);filter:blur(150px);pointer-events:none
}
.sec-h-l::before{left:-10%;top:6%}
.sec-h-r::before{right:-10%;bottom:-14%}
.sec-h-t::before{
left:50%;top:-12%;width:720px;height:520px;transform:translateX(-50%);
border-radius:0;filter:none;
background:radial-gradient(50% 50% at 50% 50%,rgba(118,38,245,.10),transparent 70%)
}
.sec-h-red::before{background:rgba(217,58,43,.10)}
/* ---------- Comparateur : cartes empilées en mobile ----------------------
Le tableau à 4 colonnes fait 760 px : dans un écran de 390 px il ne
défilait qu'horizontalement, et la colonne « Kovy » — la seule qui
vend — restait hors champ. Sous 760 px chaque ligne devient une carte :
le critère en titre, puis les trois statuts l'un sous l'autre, Kovy
en dernier et mis en avant. Les rôles ARIA posés dans le HTML gardent la
sémantique du tableau malgré le changement de `display`.
Placé en fin de fichier : les règles .cmp / .cmp-dark plus haut ont la
même spécificité, seule la dernière déclarée l'emporte.
----------------------------------------------------------------------- */
@media (max-width:760px){
/* le conteneur ne sert plus de fenêtre de défilement : ce sont les cartes
qui portent désormais le cadre */
.cmp-wrap{overflow-x:visible;border:0;background:none;border-radius:0}
table.cmp,.cmp-dark{display:block;width:100%;min-width:0}
.cmp-dark thead{display:none}
.cmp-dark tbody{display:block}
.cmp-dark tbody tr{
display:block;margin-bottom:12px;overflow:hidden;
border:1px solid var(--bd-dark);border-radius:var(--r-m);background:rgba(118,38,245,.055)
}
.cmp-dark tbody tr:last-child{margin-bottom:0}
.cmp-dark tbody tr:hover th,.cmp-dark tbody tr:hover td{background:none}
/* le critère devient l'en-tête de la carte */
table.cmp tbody th,.cmp-dark tbody th{
display:block;width:auto;padding:12px 15px;font-size:.95rem;
background:rgba(118,38,245,0.064);border-bottom:1px solid var(--bd-dark)
}
/* chaque statut : libellé à gauche, réponse à droite */
table.cmp tbody td,.cmp-dark tbody td{
display:flex;align-items:center;gap:10px;padding:10px 15px;
border-bottom:1px solid var(--bd-dark);overflow:visible;vertical-align:middle
}
.cmp-dark tbody tr td:last-child{border-bottom:0}
.cmp-dark tbody td::before{
content:attr(data-col);flex:0 0 auto;max-width:44%;margin-right:auto;
font-size:.8rem;line-height:1.3;color:var(--tx-on-dark-3)
}
.cmp-dark tbody td>span{display:inline;overflow:visible}
.cmp-dark tbody td>span:last-child{
flex:0 1 auto;min-width:0;text-align:right;font-size:.86rem;line-height:1.35
}
.cmp-dark tbody td>span:first-child{flex:none}
/* la ligne Kovy : fond violet conservé + filet d'accent à gauche */
.cmp-dark tbody td.cmp-col-us{
background:rgba(118,38,245,.10);box-shadow:inset 3px 0 0 var(--acc)
}
.cmp-dark tbody td.cmp-col-us::before{color:var(--acc)}
.cmp-dark tbody td.cmp-col-us>span:last-child{color:var(--tx-on-dark);font-weight:600}
}
/* ---------- Pages légales : sommaire latéral + blocs ------------------
Utilisé par mentions-legales.html. Le sommaire reste collé pendant le
défilement et souligne la section lue (lien .est-la, posé par app.js).
-------------------------------------------------------------------- */
/* .sec-h porte overflow:hidden, qui annule position:sticky sur ses
descendants — le sommaire ne collait plus. overflow:clip découpe le halo
de la même façon SANS créer de conteneur de défilement ; la ligne hidden
reste devant pour les navigateurs qui ignorent clip (le sommaire y défile
simplement avec la page). */
.sec-lgl{overflow:hidden;overflow:clip}
.lgl-split{display:grid;grid-template-columns:236px minmax(0,1fr);gap:clamp(30px,5vw,72px);align-items:start}
.lgl-aside{position:sticky;top:84px}
.lgl-nav{display:grid;gap:2px;border-left:1px solid var(--bd-dark);padding-left:2px}
.lgl-nav-t{
margin:0 0 12px 16px;font-size:.7rem;font-weight:700;letter-spacing:.16em;
text-transform:uppercase;color:var(--tx-on-dark-3)
}
.lgl-nav a{
display:block;padding:9px 16px;margin-left:-1px;font-size:.92rem;line-height:1.35;
color:var(--tx-on-dark-2);border-left:2px solid transparent;transition:color .2s,border-color .2s
}
.lgl-nav a:hover{color:var(--acc)}
.lgl-nav a.est-la{color:var(--acc);font-weight:600;border-left-color:var(--acc)}
.lgl-maj{margin:26px 0 0 16px;font-size:.8rem;line-height:1.5;color:var(--tx-on-dark-3)}
.lgl-maj b{color:var(--tx-on-dark-2)}
.lgl-body{max-width:74ch}
.lgl-bloc{scroll-margin-top:84px}
.lgl-bloc + .lgl-bloc{margin-top:64px;padding-top:56px;border-top:1px solid var(--bd-dark)}
.lgl-bloc h2{font-size:clamp(1.6rem,2.6vw,2.1rem)}
.lgl-bloc h3{margin:44px 0 16px;font-size:1.18rem}
.lgl-bloc h4{margin:0 0 8px;font-size:1rem;font-family:var(--ff-body);font-weight:700;letter-spacing:0}
.lgl-bloc p{margin-bottom:16px}
.lgl-chapo{font-size:1.06rem;color:var(--tx-on-dark-2);border-left:3px solid var(--acc);padding-left:18px}
.lgl-note{font-size:.88rem;color:var(--tx-on-dark-3)}
/* Fiche identité : libellé à gauche, valeur à droite. */
.fiche{display:grid;grid-template-columns:minmax(120px,auto) 1fr;gap:1px;margin:0;
border:1px solid var(--bd-dark);border-radius:var(--r-m);overflow:hidden;background:var(--bd-dark)}
.fiche dt{padding:12px 18px;background:var(--paper-2);font-size:.86rem;font-weight:600;color:var(--tx-on-dark-2)}
.fiche dd{padding:12px 18px;margin:0;background:#fff}
/* Les trois moments de la collecte, numérotés. */
.lgl-etape{display:grid;grid-template-columns:38px 1fr;gap:18px;margin-bottom:26px}
.lgl-num{
width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
background:var(--violet-soft);color:var(--violet-d);
font-family:var(--ff-display);font-weight:700;font-size:1.05rem
}
.lgl-etape-c p:last-child{margin-bottom:0}
/* Liste des pièces demandées. */
.pieces{list-style:none;margin:0 0 18px;padding:0;display:grid;
grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:8px}
.pieces li{
display:flex;flex-direction:column;gap:2px;padding:12px 15px;font-size:.92rem;
border:1px solid var(--bd-dark);border-radius:var(--r-s);background:#fff;color:var(--tx-on-dark)
}
.pieces li::before{content:none}
.pieces-fort{border-color:var(--acc);background:rgba(118,38,245,.06);font-weight:600}
.pieces-fort span{font-size:.78rem;font-weight:400;color:var(--tx-on-dark-3)}
/* Tableaux de la page (bases légales, durées). */
.lgl-tbl{width:100%;border-collapse:collapse;font-size:.93rem}
.lgl-tbl th,.lgl-tbl td{padding:14px 18px;text-align:left;vertical-align:top;border-bottom:1px solid var(--bd-dark)}
.lgl-tbl thead th{font-family:var(--ff-display);font-size:.86rem;letter-spacing:0;background:var(--paper-2)}
.lgl-tbl tbody th{font-weight:600;width:42%;color:var(--tx-on-dark)}
.lgl-tbl tbody td{color:var(--tx-on-dark-2)}
.lgl-tbl tbody tr:last-child th,.lgl-tbl tbody tr:last-child td{border-bottom:0}
.lgl-art{display:block;margin-top:4px;font-size:.78rem;color:var(--tx-on-dark-3)}
/* Encadré (cookie technique). */
.lgl-box{padding:22px 24px;border:1px solid var(--bd-dark);border-radius:var(--r-m);
background:rgba(118,38,245,.05);margin-bottom:16px}
.lgl-box-t{margin:0 0 8px;font-weight:700;color:var(--tx-on-dark)}
.lgl-box p:last-child{margin-bottom:0}
/* Mesures de sécurité, en liste cochée. */
.lgl-secu{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.lgl-secu li{
position:relative;padding:14px 18px 14px 46px;font-size:.94rem;line-height:1.55;
color:var(--tx-on-dark-2);border:1px solid var(--bd-dark);border-radius:var(--r-s);background:#fff
}
.lgl-secu li::before{
content:"";position:absolute;left:18px;top:19px;width:14px;height:14px;border-radius:50%;
background:var(--violet-soft);
box-shadow:inset 0 0 0 4px var(--acc)
}
.lgl-secu b{color:var(--tx-on-dark)}
/* Bloc « exercer vos droits ». */
.lgl-cta{
padding:26px 28px;border-radius:var(--r-l);background:var(--paper-2);
border:1px solid var(--bd-dark);margin-bottom:16px
}
.lgl-cta-t{margin:0 0 6px;font-family:var(--ff-display);font-weight:800;font-size:1.14rem;color:var(--tx-on-dark)}
.lgl-cta-p{margin:0;font-size:.9rem;color:var(--tx-on-dark-2)}
.lgl-cta-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
@media (max-width:900px){
.lgl-split{grid-template-columns:1fr;gap:28px}
.lgl-aside{position:static}
.lgl-nav{display:flex;flex-wrap:wrap;gap:8px;border-left:0;padding-left:0}
.lgl-nav-t{width:100%;margin:0 0 4px}
.lgl-nav a{
padding:7px 14px;border:1px solid var(--bd-dark-2);border-radius:var(--r-pill);
font-size:.84rem;margin-left:0
}
.lgl-nav a.est-la{border-color:var(--acc)}
.lgl-maj{margin-left:0}
}
@media (max-width:620px){
.fiche{grid-template-columns:1fr;gap:0}
.fiche dt{padding-bottom:2px;background:#fff;border-top:1px solid var(--bd-dark)}
.fiche dd{padding-top:2px}
.fiche dt:first-child{border-top:0}
.lgl-etape{grid-template-columns:1fr;gap:12px}
.lgl-tbl tbody th{width:auto}
.lgl-tbl th,.lgl-tbl td{padding:12px 14px}
}
@media (max-width:380px){
.hdr-cta .btn{padding:9px 13px;font-size:.82rem}
.logo-txt{font-size:1.04rem}
}
/* ==========================================================================
Guides VTC — pages de contenu (guides.html et guide-*.html)
Une seule colonne de lecture, tableaux qui defilent seuls, encarts.
========================================================================== */
.gwrap{max-width:74ch}
.gwrap h2{font-size:clamp(1.32rem,2.1vw,1.68rem);margin-bottom:14px}
/* Rythme d'article : les sections d'un guide se suivent, elles ne sont pas
des blocs de page d'accueil. */
.gwrap{padding-block:0}
main .sec:has(> .gwrap){padding-block:clamp(26px,3.4vw,40px)}
main .sec:has(> .gwrap) + .sec:has(> .gwrap){padding-top:0}
.gwrap h3{font-size:1.06rem;margin:26px 0 8px}
.gwrap p{margin-bottom:14px}
.gwrap p:last-child{margin-bottom:0}
.gtitre{font-size:clamp(1.95rem,4.2vw,2.9rem);line-height:1.06;margin:18px 0 16px}
/* fil d'Ariane */
.fil{font-size:.84rem;color:var(--tx-on-dark-3);margin-bottom:18px}
.fil a{color:var(--tx-on-dark-2)}
.fil a:hover{color:var(--violet-d)}
.fil span{color:var(--tx-on-dark-2)}
/* tableaux : ils debordent sur mobile, ils defilent dans leur propre boite */
.gtab{overflow-x:auto;border:1px solid var(--bd-dark);border-radius:14px;background:#fff;margin:18px 0}
.gtab table{border-collapse:collapse;width:100%;min-width:520px;font-size:.92rem}
.gtab th,.gtab td{text-align:left;padding:12px 15px;border-bottom:1px solid var(--bd-dark);vertical-align:top;color:var(--tx-on-light)}
.gtab thead th{font-size:.76rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--tx-on-light-2);background:var(--violet-soft);white-space:nowrap}
.gtab tbody tr:last-child td{border-bottom:0}
.gnote{font-size:.85rem;color:var(--tx-on-dark-3);margin-top:-4px}
/* encart : le point qu'on ne veut pas voir manque */
.gencart{
border-left:3px solid var(--violet);background:var(--violet-soft);
padding:16px 20px;border-radius:0 12px 12px 0;margin:20px 0;font-size:.95rem
}
.gencart strong{color:var(--tx-on-dark)}
.gliste{margin:0 0 14px;padding-left:20px;display:flex;flex-direction:column;gap:9px}
.gliste li{color:var(--tx-on-dark-2)}
.gliste li strong{color:var(--tx-on-dark)}
/* questions frequentes */
.gfaq{display:flex;flex-direction:column;gap:10px}
.gfaq details{border:1px solid var(--bd-dark);border-radius:14px;background:#fff;padding:0}
.gfaq summary{cursor:pointer;padding:16px 20px;font-weight:700;font-size:.98rem;list-style:none;color:var(--tx-on-light)}
.gfaq summary::-webkit-details-marker{display:none}
.gfaq summary::after{content:"+";float:right;color:var(--violet-d);font-weight:800}
.gfaq details[open] summary::after{content:"2"}
.gfaq details p{padding:0 20px 18px;margin:0;font-size:.94rem;color:var(--tx-on-light-2)}
/* a lire ensuite */
.gsuite{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.gsuite li{padding-left:0;color:var(--tx-on-dark-2);font-size:.95rem}
.gsuite a{font-weight:700;color:var(--violet-d)}
.gsrc{margin:14px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:8px}
.gsrc a{color:var(--violet-d);font-size:.93rem}
/* index des guides */
.gcards{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:700px){.gcards{grid-template-columns:1fr 1fr}}
@media (min-width:1040px){.gcards{grid-template-columns:repeat(3,1fr)}}
.gcard{
display:flex;flex-direction:column;gap:9px;background:#fff;
border:1px solid var(--bd-dark);border-radius:18px;padding:22px 22px 24px;
transition:transform .2s,box-shadow .2s,border-color .2s
}
.gcard:hover{transform:translateY(-3px);border-color:var(--violet);box-shadow:0 18px 40px -28px rgba(118,38,245,.55)}
.gcard-tag{
align-self:flex-start;font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
color:var(--violet-d);background:var(--violet-soft);padding:4px 10px;border-radius:var(--r-pill)
}
.gcard h3{font-size:1.08rem;margin:2px 0 0;color:var(--tx-on-light)}
.gcard p{font-size:.92rem;color:var(--tx-on-light-2);margin:0;flex:1}
.gcard-go{font-size:.88rem;font-weight:700;color:var(--violet-d)}
/* ==========================================================================
Cartes « à chiffre d'affaires égal » (.sec-statuts)
--------------------------------------------------------------------------
Trois statuts côte à côte sur fond blanc, celui de Kovy au centre en aplat
violet — le même dégradé que les sections .sec-violet, c'est la façon dont
la page marque déjà ce qui compte. La carte mise en avant redéfinit les
variables de texte comme le fait une section en aplat : son contenu repasse
en clair sans qu'aucune règle enfant n'ait à être dupliquée.
Les montants ne sont pas écrits dans la page : simulateur.js les pose à
partir du même moteur que le simulateur, donc les deux ne peuvent pas
raconter deux choses différentes.
========================================================================== */
.sec-statuts .mtitle{color:var(--violet)}
.sec-statuts .mtitle b{font-weight:inherit}
.sec-statuts .mtitle span{color:var(--tx-on-light-3)}
.sec-statuts .lead-center{margin-left:auto;margin-right:auto}
.stgrid{display:grid;grid-template-columns:1fr;gap:16px;align-items:start}
@media (min-width:960px){
.stgrid{grid-template-columns:1fr 1.06fr 1fr;gap:18px;align-items:center}
}
.stc{
position:relative;display:flex;flex-direction:column;
/* Blanc franc plutôt que l'ancien violet pâle : deux aplats violets, l'un
très clair et l'autre saturé, se tiraient la couleur. Le blanc rend la
carte Kovy à sa couleur et donne du relief aux deux autres. */
background:var(--paper);border:1px solid var(--bd-dark);
border-radius:var(--r-l);padding:28px 26px 30px;color:var(--tx-on-light);
/* Ombre VIOLETTE, jamais grise : une ombre neutre sur une charte colorée
donne toujours l'impression d'un rendu sale. */
box-shadow:0 18px 40px -26px rgba(77,18,200,.30),
0 2px 6px -2px rgba(77,18,200,.10);
transition:transform .35s cubic-bezier(.16,.84,.28,1),
box-shadow .35s cubic-bezier(.16,.84,.28,1)
}
/* Un liseré clair en haut : la lumière tombe du haut, la carte cesse d'être
un rectangle posé à plat. */
.stc::after{
content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
box-shadow:inset 0 1px 0 rgba(255,255,255,.9)
}
.stc:hover{
transform:translateY(-6px);
box-shadow:0 30px 60px -28px rgba(77,18,200,.42),
0 3px 10px -3px rgba(77,18,200,.14)
}
.stc-lab{
font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
color:var(--tx-on-light-2)
}
.stc-nom{font-size:1.45rem;margin:10px 0 0;color:var(--violet-d)}
.stc-nom-pro{color:#fff}
/* la marque reprend la lockup du header : marque + mot, police du logo */
.stc-marque{
display:inline-flex;align-items:center;gap:9px;margin-top:9px;
font-family:var(--ff-logo);font-size:1.35rem;font-weight:700;
letter-spacing:-.01em;color:#fff
}
.stc-marque img{width:34px;height:34px;border-radius:9px;background:#fff;padding:3px}
.stc-slab{
margin-top:22px;font-size:.68rem;font-weight:800;letter-spacing:.12em;
text-transform:uppercase;color:var(--tx-on-light-2)
}
.stc-prix{margin:6px 0 0;line-height:1}
.stc-prix b{
font-family:var(--ff-display);font-weight:800;letter-spacing:-.03em;
font-size:clamp(2.4rem,4.6vw,3.1rem);color:var(--violet);
/* Le chiffre est ce qu'on vient lire : un dégradé lui donne la matière
qu'un aplat n'a pas. Le `color` au-dessus reste le repli si le navigateur
ne sait pas peindre un texte dégradé. */
background:linear-gradient(160deg,var(--violet-d) 0%,var(--violet) 55%,var(--violet-l) 100%);
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent
}
/* Sur la carte violette le dégradé n'a pas lieu d'être : le blanc doit rester
franc pour tenir le contraste. */
.stc-pro .stc-prix b{
background:none;-webkit-text-fill-color:#fff;color:#fff
}
.stc-sous{margin:12px 0 0;font-size:.86rem;color:var(--tx-on-light-2)}
.stc-sous b{color:var(--violet-d);font-weight:800}
.stc-txt{margin:16px 0 0;font-size:.92rem;color:var(--tx-on-light-2)}
/* la liste de critères : une pastille par ligne, posée en blanc sur la carte */
.stl{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.stl li{
display:flex;align-items:center;gap:11px;
/* La carte est passée au blanc : les lignes prennent le violet pâle
qu'elle portait, sinon elles disparaîtraient dans le fond. */
background:var(--paper-2);
border-radius:var(--r-pill);padding:11px 16px;
font-size:.93rem;font-weight:700;color:var(--tx-on-light-2)
}
.stl li>span{
flex:none;width:20px;height:20px;border-radius:50%;
display:grid;place-items:center;font-size:.68rem;font-weight:800
}
.st-ok>span{background:rgba(18,161,80,.14);color:var(--green-d)}
.st-ko>span{background:rgba(16,5,46,.07);color:var(--tx-on-light-3)}
.st-ok{color:var(--violet-d)}
/* ---------- la carte mise en avant ---------- */
.stc-pro{
--tx-on-light:#FFFFFF;
--tx-on-light-2:rgba(255,255,255,.80);
--tx-on-light-3:rgba(255,255,255,.64);
--violet-d:#FFFFFF;
--violet:#FFFFFF;
background:linear-gradient(150deg,#7626F5 0%,#8B2BF4 46%,#A23AF3 100%);
border-color:transparent;color:#fff;padding-top:36px;
box-shadow:
0 34px 74px -30px rgba(77,18,200,.62),
0 0 60px -6px rgba(118,38,245,.45),
0 0 130px -10px rgba(118,38,245,.34)
}
@media (min-width:960px){
.stc-pro{padding:44px 30px 32px}
/* Elle domine par la TAILLE autant que par la couleur. 1.06fr de colonne
ne suffisait pas : à côté de deux cartes blanches désormais relevées,
elle redevenait une carte parmi trois.
Le sélecteur porte les TROIS classes à dessein. `.reveal.in` pose
`transform:none` pour clore l'animation d'entrée, et l'emportait sur un
simple `.stc-pro`. En visant l'état `.in`, le grossissement s'applique
une fois la carte entrée, et l'entrée elle-même reste intacte. */
.stc.stc-pro.in{transform:scale(1.035)}
.stc.stc-pro.in:hover{transform:scale(1.035) translateY(-6px)}
}
/* Le reflet du haut : une bande de lumière très douce, comme sur une surface
laquée. Sans elle, le dégradé violet reste une teinture à plat. */
.stc-pro::before{
content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
background:linear-gradient(178deg,rgba(255,255,255,.20) 0%,
rgba(255,255,255,.06) 26%,rgba(255,255,255,0) 52%)
}
/* Le liseré blanc des cartes claires n'a rien à faire ici. */
.stc-pro::after{box-shadow:inset 0 1px 0 rgba(255,255,255,.34)}
/* la lueur, en deux couches. Le halo large est porté par la GRILLE et non par
la carte : un pseudo-élément en z-index négatif remonterait derrière le fond
blanc de la section et ne se verrait pas. Posé sur .stgrid, il se peint
au-dessus de ce fond et sous les cartes, qui viennent après lui dans le DOM. */
.stgrid{position:relative}
@media (min-width:960px){
.stgrid::before{
content:"";position:absolute;left:50%;top:50%;
transform:translate(-50%,-50%);pointer-events:none;
width:min(620px,54%);height:124%;
background:radial-gradient(50% 50% at 50% 50%,
rgba(118,38,245,.34), rgba(118,38,245,.12) 55%, rgba(118,38,245,0) 78%);
filter:blur(28px)
}
}
@media (prefers-reduced-motion:reduce){
.stc,.stc-pro{transition:none}
.stc:hover{transform:none}
}
.stc-pro .stl li{background:rgba(255,255,255,.16);color:#fff}
.stc-pro .st-ok>span{background:rgba(255,255,255,.26);color:#fff}
.stc-pro .stc-sous b{font-weight:800}
.stc-reco{
position:absolute;top:0;left:50%;transform:translate(-50%,-50%);
display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
padding:8px 16px;border-radius:var(--r-pill);
background:#fff;color:var(--violet-d);
font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
/* Deux ombres : une portée pour le décoller de la carte, une lueur violette
pour qu'il appartienne à la carte plutôt que d'y être collé. */
box-shadow:0 12px 26px -12px rgba(16,5,46,.45),
0 0 0 5px rgba(118,38,245,.14)
}
.stc-pro .stc-reco{color:#7626F5}
.stc-reco svg{width:13px;height:13px}
/* sur l'aplat violet, le bouton plein s'inverse — même parti pris que
.sec-violet .btn, qui serait sinon blanc sur blanc */
.stc-cta{margin-top:22px;width:100%}
.stc-pro .stc-cta{--bg:#fff;--fg:#7626F5}
/* la nuance qui suit les trois cartes : elle explique le montant, elle ne le
contredit pas — d'où le fond appuyé plutôt qu'une note en petits caractères */
.stnote{
max-width:74ch;margin:30px auto 0;text-align:center;font-size:.95rem;
color:var(--tx-on-light-2);background:var(--paper-2);
border:1px solid var(--bd-dark);border-radius:var(--r-m);padding:18px 22px
}
.stnote b{color:var(--violet-d);font-weight:800}
/* En pile, la carte Kovy passe en tête : c'est elle qu'on vient comparer. */
@media (max-width:959px){
.stc-pro{order:-1}
.stgrid{display:flex;flex-direction:column}
}
/* ==========================================================================
COMPACTAGE MOBILE — 27/08/2026
--------------------------------------------------------------------------
L'accueil faisait 30,9 écrans de téléphone (390×844) contre 16 chez INCOM :
la preuve sociale tombait au 24ᵉ écran, donc personne ne la voyait jamais.
Ce bloc ne retire AUCUN contenu : il ne reprend que de l'air. Le rythme
vertical de l'ordinateur, lui, ne bouge pas — la règle s'arrête à 760px.
========================================================================== */
@media (max-width:760px){
/* Respiration des sections : 64px en haut ET en bas × 16 sections, c'était
à soi seul deux écrans et demi de vide. */
:root{--sec:clamp(38px, 9vw, 120px)}
/* Écart entre le titre d'une section et son contenu. */
.mt-l{margin-top:26px}
/* Grilles empilées : sur une colonne, 24px entre deux cartes suffisent. */
.grid{gap:16px}
.mgrid{gap:14px}
.stgrid{gap:14px}
}
/* Comparateur détaillé, replié sous les trois cartes de statuts.
Il ne s'ouvre que si on le demande : c'est ce qui a permis de rendre
trois écrans de téléphone sans retirer une seule ligne du tableau. */
.cmp-det{margin-top:26px;border:1px solid var(--bd);border-radius:16px;background:var(--blanc);overflow:hidden}
.cmp-det>summary{
list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
gap:14px;padding:16px 20px;font-weight:700;color:var(--tx);font-size:.95rem;
}
.cmp-det>summary::-webkit-details-marker{display:none}
.cmp-det>summary:hover{background:var(--gris-clair,rgba(118,38,245,.04))}
.cmp-det>summary svg{width:20px;height:20px;flex:none;color:var(--violet);transition:transform .25s}
.cmp-det[open]>summary svg{transform:rotate(180deg)}
.cmp-det>summary:focus-visible{outline:2px solid var(--violet);outline-offset:-2px}
.cmp-det-in{padding:0 16px 20px}
@media (max-width:760px){
.cmp-det>summary{padding:14px 16px;font-size:.9rem}
.cmp-det-in{padding:0 10px 16px}
}
/* Les six droits sociaux : sur téléphone ils s'empilaient en six cartes pleine
largeur, soit près de deux écrans pour six libellés courts. Deux colonnes
suffisent — le filigrane du numéro, purement décoratif, disparaît à cette
taille pour laisser la place au texte. */
@media (max-width:760px){
.droits{grid-template-columns:1fr 1fr;gap:12px}
.droits .dcard{padding:18px 16px}
.droits .dc-num{display:none}
.droits .dcard h3{font-size:.98rem}
.droits .dcard p{font-size:.84rem;margin-bottom:14px}
}
/* ---------- Le calendrier d'après candidature ---------------------------
Il prend la place exacte du formulaire : même colonne, même largeur. Le
cadre Calendly gère son propre défilement, on lui donne juste une hauteur
qui évite au candidat de scroller dans un scroll.
------------------------------------------------------------------------ */
.rdv{animation:rdvEntre .5s cubic-bezier(.16,.84,.28,1) both}
.rdv-titre{font-size:clamp(1.5rem,3vw,2rem);margin:0}
.rdv-sous{margin:10px 0 18px;color:var(--tx-on-light-2)}
.rdv-widget{
min-height:660px;border-radius:var(--r-m);overflow:hidden;
border:1px solid var(--bd-light);background:var(--paper)
}
/* Le cadre n'est pas encore monté : un fond uni vaut mieux qu'un trou blanc. */
.rdv-widget:empty{background:var(--paper-2)}
@keyframes rdvEntre{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (max-width:600px){.rdv-widget{min-height:820px}}
@media (prefers-reduced-motion:reduce){.rdv{animation:none}}