/* ==========================================================================
   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{
  --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%);
}
.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{
  --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,.hdr-cta{display:none}
  .burger{display:flex}
  .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)}

/* ---------- 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:14px clamp(28px,4vw,64px);margin-top:26px;text-align:center}
@media (max-width:560px){.hero-stats{grid-template-columns:repeat(2,auto);gap:20px 36px}}
.hero-stats b{display:block;font-family:var(--ff-display);font-size:clamp(1.5rem,2.2vw,1.9rem);letter-spacing:-.03em;line-height:1}
.hero-stats span{font-size:.8rem;color:var(--tx-on-dark-2);white-space:nowrap}

/* 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:26px auto 0;padding-block:14px 6px;overflow:hidden;
  /* aucun fond : les logos défilent directement sur la photo */
  -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
   <img> 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}}


/* ---------- Copilot 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 <details> : 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 Copilot » ----------------------------
   Fond sombre comme les autres, maquette animee : barres qui poussent,
   montants qui se comptent, ligne de versement mise en avant.
   ----------------------------------------------------------------------- */
.sec-app{position:relative;background:var(--ink);overflow:hidden}
.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}

.appmock{
  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)
}
.am-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.am-lab{display:block;font-size:.72rem;color:var(--tx-on-dark-3)}
.am-total{display:block;margin-top:4px;font-family:var(--ff-display);font-size:1.9rem;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.am-badge{
  display:inline-flex;align-items:center;gap:6px;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;color:var(--tx-on-dark-2);white-space:nowrap
}
.am-badge b{color:var(--acc);font-variant-numeric:tabular-nums}

/* barres : la hauteur pousse depuis le bas, en cascade */
.am-bars{display:flex;align-items:flex-end;gap:8px;height:96px;margin-top:20px}
.am-bars i{
  flex:1;height:0;border-radius:6px 6px 3px 3px;background:rgba(118,38,245,0.100);
  transition:height .9s cubic-bezier(.2,.8,.3,1)
}
.am-bars i.on{background:linear-gradient(180deg,var(--acc),var(--acc-d))}
.appmock.anime .am-bars i{height:var(--h)}
.am-bars i:nth-child(1){transition-delay:.05s}
.am-bars i:nth-child(2){transition-delay:.13s}
.am-bars i:nth-child(3){transition-delay:.21s}
.am-bars i:nth-child(4){transition-delay:.29s}
.am-bars i:nth-child(5){transition-delay:.37s}
.am-bars i:nth-child(6){transition-delay:.45s}
.am-bars i:nth-child(7){transition-delay:.53s}
.am-jours{display:flex;gap:8px;margin-top:8px}
.am-jours span{flex:1;text-align:center;font-size:.66rem;color:var(--tx-on-dark-3)}

.am-list{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:8px}
.am-list li{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--r-m);
  background:rgba(118,38,245,.055);border:1px solid var(--bd-dark)}
.am-list div{flex:1;min-width:0}
.am-list b{display:block;font-size:.86rem}
.am-list span{display:block;font-size:.72rem;color:var(--tx-on-dark-3)}
.am-list em{font-style:normal;font-family:var(--ff-display);font-size:.98rem;font-weight:700;font-variant-numeric:tabular-nums}
.am-ico{flex:none;width:30px;height:30px;border-radius:50%;overflow:hidden;display:grid;place-items:center}
.am-ico img{width:100%;height:100%;object-fit:cover}
.am-ico--clair{background:none}
.am-ico--clair img{object-fit:contain;padding:2px}
.am-ico--txt{background:rgba(118,38,245,.14);color:var(--acc);font-size:.66rem;font-weight:700}

.am-retrait{
  display:flex;align-items:center;gap:12px;margin-top:12px;padding:12px 12px 12px 14px;
  border-radius:var(--r-m);background:rgba(118,38,245,.12);border:1px solid rgba(118,38,245,.3)
}
.am-retrait div{flex:1;min-width:0}
.am-retrait b{display:block;font-size:.86rem;color:var(--acc)}
.am-retrait span{display:block;font-size:.72rem;color:var(--tx-on-dark-2)}
.am-retrait em{font-style:normal;font-family:var(--ff-display);font-size:1.05rem;font-weight:700;color:var(--acc);font-variant-numeric:tabular-nums}
.am-btn{
  flex:none;padding:7px 14px;border-radius:var(--r-pill);background:var(--acc);color:#10052E;
  font-size:.75rem;font-weight:700;animation:ok-pulse 2.4s ease-in-out infinite
}
@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 Copilot 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 Copilot, 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}
.cd-tete span{font-size:.64rem;color:var(--tx-on-dark-3);padding-bottom:4px}
.cd-grille span{
  aspect-ratio:1;display:grid;place-items:center;border-radius:7px;font-size:.7rem;
  background:rgba(118,38,245,0.048);color:rgba(255,255,255,.55)
}
.cd-grille .cd-off{background:none;color:rgba(118,38,245,0.100)}
.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 Copilot » 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.6fr repeat(4,1fr);gap:40px 28px}
@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 « Copilot » — 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, Copilot
   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 Copilot : fond doré 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}
}