/* =========================================================
   Polices auto-hébergées (variables, sous-ensemble latin)
   Supprime deux connexions externes au chargement.
   ========================================================= */
@font-face{
  font-family:"Sora";
  src:url("fonts/sora-var.woff2") format("woff2-variations"),
      url("fonts/sora-var.woff2") format("woff2");
  font-weight:100 800; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Manrope";
  src:url("fonts/manrope-var.woff2") format("woff2-variations"),
      url("fonts/manrope-var.woff2") format("woff2");
  font-weight:200 800; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* =========================================================
   Pixel57 — feuille de styles commune
   ========================================================= */
:root{
  color-scheme: light;
  --ink:#12142F;
  --ink-2:#3A4066;
  --muted:#666D91;
  --ground:#F5F6FC;
  --surface:#FFFFFF;
  --surface-2:#EEF0F9;
  --border:#E2E5F2;
  --border-2:#D3D8EC;
  --indigo:#3A41C4;
  --indigo-dark:#2A2F86;
  --indigo-light:#4A52E0;
  --night:#101228;
  --night-2:#181B3C;
  --cyan:#2FE0C4;
  --cyan-deep:#0C7F6C;
  --amber:#F0B429;
  --sh-1:0 1px 2px rgba(18,20,47,.05), 0 6px 16px rgba(18,20,47,.05);
  --sh-2:0 2px 6px rgba(18,20,47,.07), 0 20px 44px rgba(18,20,47,.10);
  --sh-3:0 12px 34px rgba(18,20,47,.14), 0 44px 90px rgba(18,20,47,.18);
  --r:14px;
  --r-l:22px;
  --r-xl:30px;
  --wrap:1180px;
  --display:"Sora",system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.68;
  -webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3,h4{font-family:var(--display);font-weight:800;line-height:1.08;margin:0;text-wrap:balance;letter-spacing:-.03em}
p{margin:0}
img,svg{max-width:100%}
a{color:inherit}
ul{margin:0}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}
.eyebrow{display:inline-block;font-family:var(--display);font-weight:700;font-size:.75rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--indigo)}
.eyebrow.on-dark{color:var(--cyan)}
.lead{color:var(--muted);font-size:1.08rem}
.center{text-align:center}
.sec{padding:92px 0;position:relative}
section[id]{scroll-margin-top:96px}
.sec.tight{padding:70px 0}
.sec.surface{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.sec.night{background:var(--night);color:#fff}
.sec.night h2,.sec.night h3{color:#fff}
.sec.night p{color:rgba(255,255,255,.72)}
.sec-head{max-width:660px;margin:0 auto 52px}
.sec-head h2{font-size:clamp(1.9rem,4vw,2.75rem);margin:15px 0 15px}
.sec-head p{color:var(--muted)}
.sec.night .sec-head p{color:rgba(255,255,255,.7)}
.mt-s{margin-top:26px}
.mt-m{margin-top:40px}

/* ---------- BOUTONS ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--body);font-weight:700;
  font-size:1rem;border-radius:999px;padding:15px 28px;text-decoration:none;border:1.5px solid transparent;cursor:pointer;
  white-space:nowrap;transition:transform .18s ease, box-shadow .24s ease, background .2s ease, color .2s ease, border-color .2s ease}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--indigo);color:#fff;box-shadow:0 6px 20px rgba(58,65,196,.30)}
.btn-primary:hover{background:var(--indigo-light);box-shadow:0 12px 30px rgba(58,65,196,.40)}
.btn-cyan{background:var(--cyan);color:#08302A;box-shadow:0 6px 20px rgba(47,224,196,.30)}
.btn-cyan:hover{background:#4FEDD4}
.btn-line{background:transparent;border-color:var(--border-2);color:var(--ink)}
.btn-line:hover{border-color:var(--indigo);color:var(--indigo)}
.btn-ghost{background:transparent;border-color:rgba(255,255,255,.3);color:#fff}
.btn-ghost:hover{border-color:rgba(255,255,255,.65);background:rgba(255,255,255,.07)}
.btn-sm{padding:11px 20px;font-size:.93rem}
.btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:3px solid var(--cyan);outline-offset:3px;border-radius:10px}

/* ---------- LOADER ---------- */
#loader{position:fixed;inset:0;z-index:999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
  background:linear-gradient(160deg,#232766 0%,#141634 58%,#0E1026 100%);
  animation:loaderOut .6s cubic-bezier(.7,0,.3,1) 1.75s forwards}
#loader .mark{width:120px;height:120px;opacity:0;transform:scale(.82);animation:markIn .7s cubic-bezier(.2,.9,.3,1.2) .05s forwards}
#loader .brand{font-family:var(--display);font-weight:800;font-size:1.4rem;letter-spacing:-.03em;color:#fff;opacity:0;
  animation:fadeUp .5s ease .48s forwards}
#loader .brand em{font-style:normal;color:var(--cyan)}
/* Compteur de chargement, en bas à gauche. Chiffres à chasse fixe : sans ça la largeur
   change à chaque unité et le nombre tremble. Masqué aux lecteurs d'écran (le voile porte
   déjà role="status") : un nombre qui change 60 fois par seconde serait insupportable à l'oreille. */
#loader .compte{position:absolute;left:clamp(20px,4vw,54px);bottom:clamp(16px,4vh,44px);
  display:flex;align-items:baseline;gap:.1em;color:#fff;font-family:var(--display);font-weight:800;
  letter-spacing:-.045em;line-height:.82;opacity:0;animation:markIn .6s ease .1s forwards}
#loader .compte .n{font-size:clamp(3.2rem,11vw,7.5rem);font-variant-numeric:tabular-nums}
#loader .compte i{font-style:normal;font-weight:700;color:var(--cyan);
  font-size:clamp(1rem,2.3vw,1.7rem);letter-spacing:0}
#loader .bar{width:140px;height:3px;border-radius:99px;background:rgba(255,255,255,.16);overflow:hidden}
#loader .bar i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--cyan),#8BF3E4);
  animation:barFill .95s cubic-bezier(.4,0,.2,1) .1s forwards}
@keyframes markIn{to{opacity:1;transform:scale(1)}}
@keyframes pxPop{0%{opacity:0;transform:scale(.2) rotate(-25deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes barFill{to{width:100%}}
@keyframes loaderOut{to{opacity:0;visibility:hidden;pointer-events:none}}
/* animation:none — sinon le filet de sécurité « loaderSecours » reste accroché à l'élément
   et empêche la disparition normale pilotée par le JavaScript. */
body.loaded #loader{opacity:0;visibility:hidden;pointer-events:none;animation:none;
  transition:opacity .45s ease,visibility .45s ease}
body.no-loader #loader{display:none}
/* Filet de sécurité : si le JavaScript ne s'exécute pas du tout, le voile se retire seul
   au bout de 6 s au lieu de laisser le visiteur devant un écran bleu. */
#loader{animation:loaderSecours 0s linear 6s forwards}
@keyframes loaderSecours{to{opacity:0;visibility:hidden;pointer-events:none}}
@media (prefers-reduced-motion:reduce){
  #loader{animation:loaderOut .3s linear .15s forwards}
  #loader .mark,#loader .brand{opacity:1;transform:none;animation:none}
  #loader .bar i{width:100%;animation:none}
  #loader .compte{opacity:1;animation:none}
}

/* ---------- EN-TÊTE ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:80;border-bottom:1px solid transparent;
  transition:background .3s ease, box-shadow .3s ease, border-color .3s ease}
header .bar{display:flex;align-items:center;gap:22px;height:84px}
.brandmark{display:flex;align-items:center;gap:13px;font-family:var(--display);font-weight:800;font-size:1.42rem;
  letter-spacing:-.04em;color:#fff;text-decoration:none;flex:none}
.brandmark svg{width:50px;height:50px;flex:none}
.brandmark em{font-style:normal;color:var(--cyan)}
header nav{display:flex;gap:30px;margin-left:auto}
header nav a{font-size:.97rem;font-weight:600;color:rgba(255,255,255,.76);text-decoration:none;position:relative;padding:4px 0;
  transition:color .2s}
header nav a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--cyan);
  transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
header nav a:hover{color:#fff}
header nav a:hover::after,header nav a.is-active::after{transform:scaleX(1)}
header nav a.is-active{color:#fff}
header .hcta{display:flex;gap:10px;align-items:center;flex:none}
header.scrolled,header.solid{background:rgba(255,255,255,.94);backdrop-filter:blur(16px);border-bottom-color:var(--border);
  box-shadow:0 1px 22px rgba(18,20,47,.07)}
header.scrolled .brandmark,header.solid .brandmark{color:var(--ink)}
header.scrolled .brandmark em,header.solid .brandmark em{color:var(--indigo)}
header.scrolled nav a,header.solid nav a{color:var(--ink-2)}
header.scrolled nav a:hover,header.scrolled nav a.is-active,
header.solid nav a:hover,header.solid nav a.is-active{color:var(--indigo)}
header.scrolled nav a::after,header.solid nav a::after{background:var(--indigo)}
header.scrolled .btn-ghost,header.solid .btn-ghost{border-color:var(--border-2);color:var(--ink)}
header.scrolled .burger span,header.solid .burger span{background:var(--ink)}

/* burger + menu mobile */
.burger{display:none;width:44px;height:44px;border:none;background:transparent;cursor:pointer;padding:0;
  flex-direction:column;gap:5px;align-items:center;justify-content:center;flex:none}
.burger span{display:block;width:22px;height:2px;border-radius:2px;background:#fff;transition:transform .3s ease,opacity .2s ease,background .3s}
body.menu-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobmenu{position:fixed;inset:0 0 0 0;top:0;z-index:79;background:var(--night);padding:100px 24px 40px;
  display:flex;flex-direction:column;gap:6px;opacity:0;visibility:hidden;transform:translateY(-12px);
  transition:opacity .28s ease, transform .28s ease, visibility .28s ease}
body.menu-open .mobmenu{opacity:1;visibility:visible;transform:translateY(0)}
.mobmenu a{color:#fff;text-decoration:none;font-family:var(--display);font-weight:700;font-size:1.5rem;
  padding:15px 0;border-bottom:1px solid rgba(255,255,255,.09)}
.mobmenu a.is-active{color:var(--cyan)}
.mobmenu .mm-cta{display:grid;gap:11px;margin-top:26px;border:none}
.mobmenu .mm-cta a{border:none;padding:0}

/* ---------- HERO ---------- */
.hero{position:relative;background:linear-gradient(168deg,#262A6E 0%,#191C42 52%,#121430 100%);color:#fff;overflow:hidden}
.hero::before{content:"";position:absolute;top:-200px;right:-160px;width:680px;height:680px;border-radius:50%;
  background:radial-gradient(circle,rgba(47,224,196,.17),transparent 62%);pointer-events:none}

.hero .wrap{position:relative;z-index:2}
.hero-home{padding:158px 0 104px}
.hero-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:60px;align-items:center}
.hero h1{font-size:clamp(2.3rem,5.2vw,3.75rem);margin:18px 0 22px;color:#fff}
.hero h1 span{color:var(--cyan)}
.hero .sub{color:rgba(255,255,255,.78);font-size:1.14rem;max-width:40ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:13px;margin-top:34px}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:30px}
.chip{display:inline-flex;align-items:center;gap:7px;font-size:.87rem;font-weight:600;color:rgba(255,255,255,.88);
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);border-radius:999px;padding:8px 15px}
.chip svg{color:var(--cyan);flex:none}

/* hero pages internes */
.hero-page{padding:150px 0 74px}
.hero-page h1{font-size:clamp(2rem,4.4vw,3rem);margin:16px 0 16px;max-width:20ch}
.hero-page p{color:rgba(255,255,255,.76);font-size:1.1rem;max-width:56ch}

/* fil d'ariane */
.crumb{font-size:.86rem;color:rgba(255,255,255,.5);margin-bottom:10px}
.crumb a{color:rgba(255,255,255,.72);text-decoration:none}
.crumb a:hover{color:#fff}

/* ---------- MAQUETTES ---------- */
.mockset{position:relative;padding-bottom:30px}
.mockset .win{background:#fff;border-radius:16px;overflow:hidden;box-shadow:var(--sh-3);border:1px solid rgba(255,255,255,.2)}
.mockset .top{display:flex;align-items:center;gap:6px;padding:12px 15px;background:#EEF0F8;border-bottom:1px solid #E1E4F0}
.mockset .top i{width:9px;height:9px;border-radius:50%;background:#CBD0E4;display:block}
.mockset .top .url{margin-left:10px;flex:1;height:18px;border-radius:99px;background:#fff;border:1px solid #E1E4F0;
  font-size:9.5px;color:#6C7394;display:flex;align-items:center;padding:0 10px}
.mockset .body-m{padding:17px}
.m-hero{background:linear-gradient(135deg,#0E7C9B,#0B6076);border-radius:10px;padding:16px;color:#fff}
.m-hero b{display:block;font-family:var(--display);font-size:14.5px;line-height:1.18}
.m-hero span{display:block;height:5px;width:70%;background:rgba(255,255,255,.4);border-radius:9px;margin-top:9px}
.m-hero .pill{display:inline-block;margin-top:12px;background:#E15A2B;color:#fff;font-size:9.5px;font-weight:700;
  border-radius:99px;padding:5px 11px}
.m-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:13px}
.m-card{background:#F4F6FB;border:1px solid #E6E9F4;border-radius:9px;padding:10px;height:54px}
.m-card i{display:block;width:16px;height:16px;border-radius:5px;background:#0E7C9B;opacity:.85}
.m-card span{display:block;height:4px;border-radius:9px;background:#D5DAEA;margin-top:8px}
.m-card span+span{width:62%;margin-top:4px}
/* téléphone superposé */
.mockset .phone{position:absolute;right:-6px;bottom:-6px;width:132px;background:#12142F;border-radius:20px;padding:7px;
  box-shadow:var(--sh-3);border:1px solid rgba(255,255,255,.14)}
.mockset .phone .scr{background:#fff;border-radius:14px;overflow:hidden}
.mockset .phone .ph-hero{background:linear-gradient(135deg,#0E7C9B,#0B6076);padding:11px;color:#fff}
.mockset .phone .ph-hero b{display:block;font-family:var(--display);font-size:9.5px;line-height:1.2}
.mockset .phone .ph-hero .pill{display:block;text-align:center;margin-top:9px;background:#E15A2B;color:#fff;
  font-size:8px;font-weight:700;border-radius:99px;padding:5px 6px}
.mockset .phone .ph-b{padding:9px;display:grid;gap:6px}
.mockset .phone .ph-b i{display:block;height:20px;border-radius:5px;background:#F1F3FA;border:1px solid #E6E9F4}
.floatbadge{position:absolute;bottom:4px;left:-22px;background:#fff;border-radius:14px;box-shadow:var(--sh-2);
  padding:11px 15px;display:flex;align-items:center;gap:9px;font-size:.83rem;font-weight:700;color:var(--ink)}
.floatbadge i{width:9px;height:9px;border-radius:50%;background:#22C55E;display:block;flex:none}

/* ---------- CARTE D'IDENTITÉ (local) ---------- */
.idcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:32px;box-shadow:var(--sh-2);
  overflow:hidden}
/* Portrait en tête de carte : il file jusqu'aux bords (marges négatives = la valeur du padding),
   le fondu vers le bas est cuit dans l'image, et les coins hauts sont rognés par l'overflow
   de la carte. Affiché autour de 570 px pour une source de 1200 : net même en haute densité. */
.idcard .portrait{display:block;width:calc(100% + 64px);max-width:none;height:auto;margin:-32px -32px 22px;
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  /* L'image touche les deux bords de la carte ; ce sont ses PIXELS qui s'effacent en douceur,
     pas sa largeur qui rétrécit — sinon on voit une bande de carte à droite et ça semble décalé.
     Deux masques croisés (bas + côtés) ; si un navigateur ne sait pas les croiser, il n'applique
     que le premier : le fondu du bas, ce qui reste correct. */
  -webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent 100%),
    linear-gradient(to right,transparent 0,#000 12%,#000 88%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 55%,transparent 100%),
    linear-gradient(to right,transparent 0,#000 12%,#000 88%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
.idcard .who{display:flex;align-items:center;gap:17px}
.idcard .who svg{width:64px;height:64px;flex:none}
.idcard .who b{display:block;font-family:var(--display);font-weight:800;font-size:1.3rem;letter-spacing:-.03em}
.idcard .who small{color:var(--muted);font-size:.93rem}
.idcard .quote{margin-top:22px;padding-left:17px;border-left:3px solid var(--cyan);color:var(--ink-2);font-size:1.02rem}
.idcard .sep{height:1px;background:var(--border);margin:26px 0}
.idcard h4{font-family:var(--display);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 15px}
.idcard .proofs{list-style:none;padding:0;display:grid;gap:12px}
.idcard .proofs li{display:block;position:relative;padding-left:29px;font-size:.95rem;color:var(--ink-2)}
.idcard .proofs svg{color:var(--indigo);position:absolute;left:0;top:5px}

/* ---------- BANDE DE CONFIANCE ---------- */
.trust{background:var(--night-2);color:#fff;padding:26px 0}
.trust .wrap{display:flex;flex-wrap:wrap;gap:14px 40px;align-items:center;justify-content:center}
.trust div{display:flex;align-items:center;gap:10px;font-size:.94rem;font-weight:600;color:rgba(255,255,255,.85)}
.trust svg{color:var(--cyan);flex:none}

/* ---------- CARTES ---------- */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-l);padding:30px;box-shadow:var(--sh-1);
  display:flex;flex-direction:column;gap:13px;transition:transform .22s ease, box-shadow .26s ease, border-color .22s ease}
.card:hover{transform:translateY(-5px);box-shadow:var(--sh-2);border-color:var(--border-2)}
.card h3{font-size:1.2rem}
.card p{color:var(--muted);font-size:.97rem}
.card.on-night{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.12)}
.card.on-night h3{color:#fff}
.card.on-night p{color:rgba(255,255,255,.7)}
.card.on-night:hover{background:rgba(255,255,255,.075);border-color:rgba(255,255,255,.22)}
.ic{width:50px;height:50px;border-radius:15px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,#EDEEFB,#DFE1F8);color:var(--indigo);flex:none}
.ic.cy{background:linear-gradient(140deg,#DFFAF4,#CBF5EC);color:var(--cyan-deep)}
.card.on-night .ic{background:rgba(74,82,224,.24);color:#B9BEFF}
.card.on-night .ic.cy{background:rgba(47,224,196,.16);color:var(--cyan)}
.tagd{display:inline-block;background:rgba(47,224,196,.14);border:1px solid rgba(47,224,196,.32);color:var(--cyan);
  font-size:.74rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;border-radius:99px;padding:5px 13px}
.tagl{display:inline-block;background:#EDEEFB;color:var(--indigo);font-size:.74rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;border-radius:99px;padding:5px 13px}

/* listes à coches */
.ticks{list-style:none;padding:0;display:grid;gap:12px}
.ticks li{display:block;position:relative;padding-left:29px;font-size:.98rem;color:var(--ink-2)}
.ticks li svg{color:var(--indigo);position:absolute;left:0;top:5px}
.sec.night .ticks li{color:rgba(255,255,255,.85)}
.sec.night .ticks li svg{color:var(--cyan)}

/* comparatif sur-mesure */
.ticks li.no svg{color:#C0485A}
.cmp-bad{border-color:#F2DADE;background:#FEFAFB}
.cmp-good{border-color:#C8E9E1;background:#FAFFFE;box-shadow:0 4px 14px rgba(12,127,108,.10),0 26px 54px rgba(12,127,108,.10)}
.cmp-bad h3,.cmp-good h3{font-size:1.15rem;margin-top:4px}

/* ---------- SPLIT (texte + visuel) ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split.rev .s-media{order:-1}
.split h3{font-size:1.75rem;margin-bottom:14px}
.split p{color:var(--muted)}
.sec.night .split p{color:rgba(255,255,255,.72)}

/* ---------- TARIFS ---------- */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.plan{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:34px 28px;display:flex;
  flex-direction:column;box-shadow:var(--sh-1);position:relative}
.plan.feat{border-color:var(--indigo);box-shadow:0 4px 16px rgba(58,65,196,.14),0 30px 60px rgba(58,65,196,.16)}
.plan.feat::before{content:"";position:absolute;top:0;left:26px;right:26px;height:4px;border-radius:0 0 6px 6px;
  background:linear-gradient(90deg,var(--indigo),var(--cyan))}
.plan .tag{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--indigo);color:#fff;
  font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;border-radius:99px;padding:7px 16px;white-space:nowrap}
.plan h3{font-size:1.28rem}
.plan .desc{color:var(--muted);font-size:.93rem;margin-top:6px;min-height:46px}
.plan .amount{font-family:var(--display);font-weight:800;font-size:2.7rem;letter-spacing:-.045em;margin:18px 0 3px;line-height:1}
.plan .then{color:var(--muted);font-size:.96rem;font-weight:600}
.plan .then b{color:var(--ink);font-weight:800}
.plan ul{margin:24px 0 28px;flex:1}
.plan .btn{width:100%}
.pricenote{text-align:center;color:var(--muted);font-size:.94rem;margin-top:32px;max-width:64ch;margin-left:auto;margin-right:auto}
.pricenote b{color:var(--ink)}

/* grille 4 offres */
.price-grid.four{grid-template-columns:repeat(4,1fr);gap:16px}
.price-grid.four .plan{padding:28px 21px}
.price-grid.four .plan h3{font-size:1.14rem}
.price-grid.four .plan .desc{font-size:.88rem;min-height:56px}
.price-grid.four .plan .amount{font-size:2.05rem;margin:14px 0 2px}
.price-grid.four .plan .then{font-size:.88rem}
.price-grid.four .plan .ticks li{font-size:.88rem;padding-left:26px}
.price-grid.four .plan .ticks{gap:10px;margin:19px 0 22px}
.price-grid.four .plan .btn{padding:12px 16px;font-size:.92rem}
.plan.lite{background:linear-gradient(170deg,#F8F9FE,#F1F3FC);border-style:dashed;border-color:var(--border-2)}
.plan.lite .amount{color:var(--indigo-dark)}
.plan .tag.lite{background:var(--ink-2)}
.plan .then em{font-style:normal;display:block;color:var(--muted);font-size:.84rem;font-weight:600;margin-top:3px}

/* ---------- bascule avec apport / sans apport ---------- */
.paymode{margin:0 auto 30px;max-width:720px;text-align:center}
.pm-seg{display:inline-flex;background:var(--surface);border:1px solid var(--border-2);border-radius:99px;
  padding:5px;gap:4px;box-shadow:var(--sh-1)}
.pm-seg .pm{position:relative;isolation:isolate;overflow:hidden;border:0;background:transparent;text-decoration:none;
  color:var(--muted);font-family:inherit;font-weight:700;font-size:.95rem;line-height:1.2;padding:11px 22px;border-radius:99px;
  cursor:pointer;white-space:nowrap;display:inline-block;text-align:center;transition:color .2s;
  -webkit-backface-visibility:hidden;backface-visibility:hidden}
/* Le fond actif est un calque sous le texte, pas le fond du bouton lui-même :
   Chrome sur Windows dessine sinon une couture d'un pixel à la fin du texte. */
.pm-seg .pm::before{content:"";position:absolute;inset:0;border-radius:99px;background:var(--indigo);
  box-shadow:0 3px 10px rgba(58,65,196,.3);opacity:0;transform:scale(.94);z-index:-1;
  transition:opacity .2s,transform .22s cubic-bezier(.2,.7,.3,1.2)}
.pm-seg .pm:hover{color:var(--ink)}
.pm-seg .pm.on{color:#fff}
.pm-seg .pm.on::before{opacity:1;transform:scale(1)}
.pm-seg .pm:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
.pm-note{color:var(--muted);font-size:.93rem;margin:15px auto 0;max-width:60ch;min-height:3.4em}
.pm-note b{color:var(--ink)}

/* les deux variantes de prix : une seule visible à la fois */
.v-sans{display:none}
body.sansapport .v-apport{display:none}
body.sansapport .v-sans{display:inline}
body.sansapport p.v-sans,body.sansapport .plan .tag.v-sans{display:block}
body.sansapport .plan .tag.start{display:inline-block}
.plan .ramp{color:var(--muted);font-size:.82rem;line-height:1.45;margin-top:9px;
  background:var(--surface-2);border-radius:var(--r);padding:9px 11px}
.plan .tag.start{background:var(--cyan-deep)}
.plan.lite .ramp{background:rgba(255,255,255,.7)}
/* le prix « Sur devis » du Business ne doit pas dépasser de sa carte */
.plan .amount .devis{font-size:1.5rem;letter-spacing:-.02em}
.price-grid.four .plan .amount .devis{font-size:1.25rem}
@media (max-width:520px){
  .pm-seg{display:flex;width:100%}
  .pm-seg .pm{flex:1;padding:11px 10px;font-size:.88rem}
}

/* bandeau socle qualité */
.socle{background:var(--night);color:#fff;border-radius:var(--r-xl);padding:34px 38px;margin-bottom:46px}
.socle h3{color:#fff;font-size:1.22rem;margin-bottom:6px}
.socle p{color:rgba(255,255,255,.66);font-size:.95rem}
.socle ul{list-style:none;padding:0;margin:22px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:13px 26px}
.socle li{display:block;position:relative;padding-left:28px;font-size:.94rem;font-weight:600;color:rgba(255,255,255,.9)}
.socle li svg{color:var(--cyan);position:absolute;left:0;top:5px}

/* ---------- ÉTAPES ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.step .n{font-family:var(--display);font-weight:800;font-size:.9rem;color:#fff;background:var(--indigo);width:38px;height:38px;
  border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.step h3{font-size:1.1rem;margin-bottom:8px}
.step p{color:var(--muted);font-size:.95rem}
.step{position:relative}
.step::before{content:"";position:absolute;top:18px;left:50px;right:-16px;height:2px;
  background:linear-gradient(90deg,var(--border-2),transparent)}
.step:last-child::before{display:none}

/* ---------- FAQ ---------- */
.faq{max-width:820px;margin:0 auto;display:grid;gap:13px}
details{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--sh-1);overflow:hidden}
summary{cursor:pointer;padding:20px 56px 20px 24px;font-weight:700;font-family:var(--display);font-size:1.03rem;
  list-style:none;position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"";position:absolute;right:24px;top:50%;width:10px;height:10px;border-right:2.5px solid var(--indigo);
  border-bottom:2.5px solid var(--indigo);transform:translateY(-70%) rotate(45deg);transition:transform .25s ease}
details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
details p{padding:0 24px 22px;color:var(--muted);font-size:.98rem}

/* ---------- CTA BANDEAU ---------- */
.ctaband{background:linear-gradient(140deg,var(--indigo-dark),var(--indigo-light));color:#fff;border-radius:var(--r-xl);
  padding:52px 44px;display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;
  box-shadow:0 24px 60px rgba(58,65,196,.28)}
.ctaband h2{font-size:clamp(1.5rem,3vw,2.1rem);color:#fff;max-width:22ch}
.ctaband p{color:rgba(255,255,255,.82);margin-top:10px;max-width:44ch}
.ctaband .acts{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- CONTACT ---------- */
.ct-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.ct-item{display:flex;align-items:center;gap:15px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r);padding:16px 19px;text-decoration:none;transition:background .2s,border-color .2s}
.ct-item:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.28)}
.ct-item .ci{width:44px;height:44px;border-radius:13px;background:rgba(47,224,196,.16);color:var(--cyan);display:flex;
  align-items:center;justify-content:center;flex:none}
.ct-item small{display:block;color:rgba(255,255,255,.6);font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.ct-item b{font-family:var(--display);font-size:1.08rem;color:#fff;word-break:break-word}
.ct-direct{display:grid;gap:13px;margin-top:30px}
form{background:var(--surface);border-radius:var(--r-xl);padding:34px;box-shadow:var(--sh-3);display:grid;gap:16px;color:var(--ink)}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:grid;gap:7px}
/* formule pré-choisie depuis la page Tarifs */
.field p.prechoix{background:rgba(47,224,196,.14);border:1px solid rgba(47,224,196,.4);border-radius:var(--r);
  padding:10px 14px;font-size:.92rem;color:var(--ink);margin-bottom:2px;line-height:1.5}
.field p.prechoix b{color:var(--cyan-deep)}
.field.prechoisi select{border-color:var(--cyan-deep);box-shadow:0 0 0 3px rgba(47,224,196,.18)}
label{font-size:.87rem;font-weight:700;color:var(--ink-2)}
label .lbl-note{font-weight:500;color:var(--muted)}
input,select,textarea{font-family:var(--body);font-size:1rem;color:var(--ink);background:var(--ground);
  border:1.5px solid var(--border);border-radius:12px;padding:14px 16px;width:100%;transition:border-color .2s,background .2s}
input:focus,select:focus,textarea:focus{border-color:var(--indigo);background:#fff}
textarea{resize:vertical;min-height:112px}
.form-note{font-size:.83rem;color:var(--muted);text-align:center}
.form-note a{color:var(--indigo);font-weight:700}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.msg{border-radius:12px;padding:14px 17px;font-size:.94rem;font-weight:600;display:none}
.msg.ok{display:block;background:#E4FAF3;color:var(--cyan-deep);border:1px solid #B6EFE0}
.msg.err{display:block;background:#FDECEC;color:#B4232C;border:1px solid #F6C9C9}

/* ---------- PIED DE PAGE ---------- */
footer{background:#0C0E22;color:rgba(255,255,255,.66);padding:64px 0 32px;font-size:.95rem}
.f-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}
footer h4{font-family:var(--display);color:#fff;font-size:1rem;margin:0 0 14px}
footer a{color:rgba(255,255,255,.66);text-decoration:none;transition:color .2s}
footer a:hover{color:#fff}
.f-list{list-style:none;padding:0;display:grid;gap:10px}
.f-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:44px;padding-top:22px;display:flex;justify-content:space-between;
  flex-wrap:wrap;gap:10px;font-size:.86rem;color:rgba(255,255,255,.45)}
footer .brandmark{color:#fff;margin-bottom:14px;font-size:1.3rem}
footer .brandmark svg{width:42px;height:42px}
footer .brandmark em{color:var(--cyan)}

/* ---------- BARRE D'APPEL MOBILE ---------- */
.callbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;background:rgba(255,255,255,.97);
  backdrop-filter:blur(12px);border-top:1px solid var(--border);
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));gap:10px;box-shadow:0 -6px 26px rgba(18,20,47,.12)}
.callbar .btn{flex:1;padding:14px 12px;font-size:.95rem}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1040px){
  .price-grid.four{grid-template-columns:repeat(2,1fr);gap:22px}
  .socle ul{grid-template-columns:repeat(2,1fr)}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr);gap:30px}
  .step::before{display:none}
  header nav{gap:22px}
  header nav a{font-size:.92rem}
  .brandmark{font-size:1.3rem}
  .brandmark svg{width:44px;height:44px}
}
@media (max-width:920px){
  body{font-size:16px}
  header nav{display:none}
  header .hcta .btn-line,header .hcta .btn-ghost{display:none}
  .burger{display:flex;margin-left:auto;order:3}
  header .hcta{margin-left:auto}
  header .bar{height:72px;gap:12px}
  .sec{padding:64px 0}
  .sec.tight{padding:52px 0}
  .sec-head{margin-bottom:38px}
  .hero-home{padding:118px 0 76px}
  .hero-page{padding:112px 0 58px}
  .hero-grid,.split,.ct-grid{grid-template-columns:1fr;gap:42px}
  .split.rev .s-media{order:0}
  .hero .sub{max-width:none}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .price-grid,.price-grid.four{grid-template-columns:1fr;gap:26px}
  .socle{padding:26px 22px}
  .socle ul{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr 1fr;gap:32px}
  .callbar{display:flex}
  body{padding-bottom:76px}
  .ctaband{padding:38px 28px}
  .mockset .phone{width:112px;right:0}
  .floatbadge{bottom:0;left:0}
}
@media (max-width:560px){
  .wrap{padding:0 18px}
  .grid-4,.steps,.f2{grid-template-columns:1fr}
  .hero-cta .btn{width:100%}
  form{padding:24px}
  .f-grid{grid-template-columns:1fr}
  .f-bottom{flex-direction:column}
  .brandmark{font-size:1.2rem}
  .brandmark svg{width:40px;height:40px}
  .mockset .phone{display:none}
  .ctaband{padding:32px 22px;flex-direction:column;align-items:flex-start}
  .trust .wrap{gap:12px 22px}
  .trust div{font-size:.88rem}
}

/* =========================================================
   FINITIONS — texture, profondeur, apparitions au défilement
   ========================================================= */
::selection{background:var(--cyan);color:#08302A}

/* grain discret sur les fonds sombres : donne de la matière au lieu d'un aplat */
.hero::before,.sec.night::before,footer::before,.trust::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
.sec.night,footer,.trust{position:relative;overflow:hidden}
.sec.night .wrap,footer .wrap,.trust .wrap{position:relative;z-index:2}

/* trame de points dans le héros */


/* filet lumineux en haut des cartes */
.card{position:relative}
.card::after{content:"";position:absolute;top:0;left:22px;right:22px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(58,65,196,.28),transparent);opacity:0;transition:opacity .3s}
.card:hover::after{opacity:1}
.card.on-night::after{background:linear-gradient(90deg,transparent,rgba(47,224,196,.5),transparent)}

/* reflet qui balaie le bouton principal */
.btn-primary,.btn-cyan{position:relative;overflow:hidden}
.btn-primary::after,.btn-cyan::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.32),transparent);transform:skewX(-18deg);transition:left .55s ease}
.btn-primary:hover::after,.btn-cyan:hover::after{left:130%}

/* surtitre avec filet */
.eyebrow{position:relative;padding-left:30px}
.eyebrow::before{content:"";position:absolute;left:0;top:50%;width:20px;height:2px;background:currentColor;opacity:.55}
.sec-head.center .eyebrow{padding-left:0}
.sec-head.center .eyebrow::before{display:none}

/* apparitions au défilement — activées seulement si le JS tourne */
body.js .rv{opacity:0;transform:translateY(20px)}
body.js .rv.in{opacity:1;transform:none;transition:opacity .65s cubic-bezier(.2,.7,.3,1),transform .65s cubic-bezier(.2,.7,.3,1)}
@media (prefers-reduced-motion:reduce){body.js .rv,body.js .rv.in{opacity:1;transform:none;transition:none}}

/* pied de page : rappel d'action */
.f-cta{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding-bottom:34px;margin-bottom:34px;border-bottom:1px solid rgba(255,255,255,.1)}
.f-cta h3{font-family:var(--display);color:#fff;font-size:1.5rem;letter-spacing:-.03em}
.f-cta p{color:rgba(255,255,255,.6);margin-top:6px;font-size:.95rem}
@media (max-width:560px){.f-cta h3{font-size:1.25rem}}

/* =========================================================
   FOND ANIMÉ DES EN-TÊTES — sans vidéo, sans image, sans poids
   ========================================================= */
.herofx{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}

/* trame de points qui dérive lentement */
.herofx .fx-grid{position:absolute;inset:-60px;
  background-image:radial-gradient(rgba(255,255,255,.17) 1px, transparent 1px);
  background-size:30px 30px;
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 10%, #000 25%, transparent 75%);
  mask-image:radial-gradient(ellipse 90% 70% at 50% 10%, #000 25%, transparent 75%);
  animation:fxDrift 90s linear infinite}
@keyframes fxDrift{to{background-position:300px 180px}}

/* halos qui respirent */
.herofx .fx-orb{position:absolute;border-radius:50%;filter:blur(70px);will-change:transform}
.herofx .fx-orb.a{width:460px;height:460px;top:-170px;right:-90px;
  background:radial-gradient(circle,rgba(47,224,196,.40),transparent 68%);
  animation:fxOrbA 24s ease-in-out infinite alternate}
.herofx .fx-orb.b{width:560px;height:560px;bottom:-260px;left:-150px;
  background:radial-gradient(circle,rgba(74,82,224,.55),transparent 70%);
  animation:fxOrbB 31s ease-in-out infinite alternate}
.herofx .fx-orb.c{width:320px;height:320px;top:35%;left:48%;
  background:radial-gradient(circle,rgba(58,65,196,.42),transparent 70%);
  animation:fxOrbC 27s ease-in-out infinite alternate}
@keyframes fxOrbA{to{transform:translate3d(-70px,60px,0) scale(1.14)}}
@keyframes fxOrbB{to{transform:translate3d(90px,-50px,0) scale(1.1)}}
@keyframes fxOrbC{to{transform:translate3d(-60px,-70px,0) scale(.86)}}

/* pixels cyan qui s'allument — clin d'œil au logo */
.herofx .fx-px{position:absolute;border-radius:3px;background:var(--cyan);
  box-shadow:0 0 10px rgba(47,224,196,.55);
  top:var(--t);left:var(--l);width:var(--sz,10px);height:var(--sz,10px);
  opacity:0;animation:pxblink 9s ease-in-out infinite;animation-delay:var(--dl,0s)}
@keyframes pxblink{
  0%,100%{opacity:0;transform:translateY(0) scale(.55)}
  9%{opacity:1;transform:translateY(-2px) scale(1)}
  46%{opacity:.62;transform:translateY(-9px) scale(.92)}
  78%{opacity:0;transform:translateY(-17px) scale(.55)}
}
.herofx.paused *{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){
  .herofx .fx-grid,.herofx .fx-orb{animation:none}
  .herofx .fx-px{animation:none;opacity:.55}
}

/* =========================================================
   ASSISTANT GUIDÉ — oriente le visiteur et capte le contact
   ========================================================= */
.p57bot-btn{position:fixed;right:20px;bottom:20px;z-index:95;width:60px;height:60px;border-radius:50%;border:none;
  cursor:pointer;background:linear-gradient(140deg,var(--indigo-dark),var(--indigo-light));
  box-shadow:0 8px 26px rgba(58,65,196,.42);display:flex;align-items:center;justify-content:center;
  transition:transform .2s ease, box-shadow .25s ease}
.p57bot-btn:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 14px 34px rgba(58,65,196,.5)}
.p57bot-btn svg{width:27px;height:27px;color:#fff}
.p57bot-btn .pip{position:absolute;top:4px;right:4px;width:13px;height:13px;border-radius:50%;background:var(--cyan);
  border:2.5px solid #fff}
.p57bot-btn .halo{position:absolute;inset:0;border-radius:50%;border:2px solid var(--cyan);opacity:0;
  animation:botHalo 3.4s ease-out infinite}
@keyframes botHalo{0%{opacity:.7;transform:scale(1)}60%,100%{opacity:0;transform:scale(1.45)}}
body.bot-open .p57bot-btn .halo{display:none}

.p57bot{position:fixed;right:20px;bottom:92px;z-index:96;width:370px;max-width:calc(100vw - 32px);
  max-height:calc(100vh - 116px);
  background:var(--surface);border:1px solid var(--border);border-radius:22px;box-shadow:var(--sh-3);
  display:flex;flex-direction:column;overflow:hidden;opacity:0;visibility:hidden;transform:translateY(14px) scale(.97);
  transition:opacity .26s ease, transform .26s cubic-bezier(.2,.8,.3,1), visibility .26s}
body.bot-open .p57bot{opacity:1;visibility:visible;transform:none}
.p57bot .bh{background:linear-gradient(140deg,var(--indigo-dark),var(--indigo-light));color:#fff;padding:16px 18px;
  display:flex;align-items:center;gap:12px;flex:none}
.p57bot .bh svg.mk{width:38px;height:38px;flex:none;border-radius:11px;overflow:hidden}
.p57bot .bh b{font-family:var(--display);font-size:1rem;display:block;letter-spacing:-.02em}
.p57bot .bh small{font-size:.79rem;color:rgba(255,255,255,.72);display:flex;align-items:center;gap:6px}
.p57bot .bh small i{width:7px;height:7px;border-radius:50%;background:var(--cyan);display:block}
.p57bot .bh button{margin-left:auto;background:rgba(255,255,255,.14);border:none;color:#fff;width:30px;height:30px;
  border-radius:9px;cursor:pointer;font-size:1rem;line-height:1}
.p57bot .bh button:hover{background:rgba(255,255,255,.26)}
.p57bot .bmsg{padding:18px;display:flex;flex-direction:column;gap:11px;flex:1 1 auto;min-height:80px;overflow-y:auto;
  background:var(--ground)}
.p57bot .m{max-width:88%;padding:11px 15px;border-radius:16px;font-size:.94rem;line-height:1.5;animation:botIn .3s ease}
@keyframes botIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.p57bot .m.bot{background:var(--surface);border:1px solid var(--border);border-bottom-left-radius:5px;align-self:flex-start}
.p57bot .m.me{background:var(--indigo);color:#fff;border-bottom-right-radius:5px;align-self:flex-end}
.p57bot .m.ok{background:#E4FAF3;border:1px solid #B6EFE0;color:var(--cyan-deep);align-self:stretch;max-width:100%;font-weight:600}
.p57bot .typing{display:flex;gap:4px;align-self:flex-start;background:var(--surface);border:1px solid var(--border);
  padding:13px 15px;border-radius:16px;border-bottom-left-radius:5px}
.p57bot .typing i{width:7px;height:7px;border-radius:50%;background:#B9BFD8;animation:botDot 1.2s infinite}
.p57bot .typing i:nth-child(2){animation-delay:.18s}
.p57bot .typing i:nth-child(3){animation-delay:.36s}
@keyframes botDot{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}
.p57bot .bopt{padding:14px 18px 18px;display:grid;gap:8px;border-top:1px solid var(--border);background:var(--surface);
  flex:none;max-height:46vh;overflow-y:auto}
.p57bot .bopt button{text-align:left;background:var(--ground);border:1.5px solid var(--border);border-radius:12px;
  padding:11px 14px;font-family:var(--body);font-size:.92rem;font-weight:600;color:var(--ink);cursor:pointer;
  transition:border-color .18s, background .18s, transform .12s}
.p57bot .bopt button:hover{border-color:var(--indigo);background:#F4F5FE;transform:translateX(2px)}
.p57bot .bform{display:grid;gap:9px}
.p57bot .bform input,.p57bot .bform textarea{font-size:.94rem;padding:11px 13px;border-radius:11px}
.p57bot .bform button{background:var(--indigo);color:#fff;border:none;border-radius:999px;padding:13px;
  font-weight:700;cursor:pointer;font-family:var(--body);font-size:.95rem;text-align:center}
.p57bot .bform button:disabled{opacity:.6;cursor:not-allowed}
.p57bot .bnote{font-size:.76rem;color:var(--muted);text-align:center;padding:0 18px 14px;background:var(--surface);flex:none}
@media (max-width:920px){
  .p57bot-btn{bottom:88px;right:16px;width:54px;height:54px}
  .p57bot{bottom:154px;right:16px;max-height:calc(100vh - 176px)}
}
@media (prefers-reduced-motion:reduce){
  .p57bot-btn .halo{animation:none}
  .p57bot .m{animation:none}
  .p57bot{transition:opacity .01s}
}

/* ---------- Page mentions légales ---------- */
.legal{max-width:76ch}
.legal h2{font-size:1.32rem;margin:38px 0 12px;padding-bottom:9px;border-bottom:1px solid var(--border)}
.legal h2:first-child{margin-top:0}
.legal p{margin:0 0 14px;color:var(--ink-2);line-height:1.72}
.legal a{color:var(--indigo);text-decoration:none;border-bottom:1px solid rgba(58,65,196,.28)}
.legal a:hover{border-bottom-color:var(--indigo)}
.legal ul{margin:0 0 16px;padding-left:22px;color:var(--ink-2);line-height:1.72}
.legal li{margin-bottom:8px}
.legal li>b{color:var(--ink)}
.legal .note{background:var(--surface-2);border-left:3px solid var(--indigo);
  padding:14px 18px;border-radius:0 var(--r) var(--r) 0;margin:0 0 18px;
  color:var(--ink-2);line-height:1.7;font-size:.95rem}
.legal .note b{color:var(--ink)}
.legal .upd{font-size:.9rem;color:var(--muted)}
.legal dl{display:grid;grid-template-columns:minmax(140px,220px) 1fr;gap:0;margin:0 0 18px;
  border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--surface)}
.legal dt{padding:12px 16px;font-weight:700;font-size:.9rem;color:var(--ink);
  background:var(--surface-2);border-bottom:1px solid var(--border)}
.legal dd{margin:0;padding:12px 16px;font-size:.95rem;color:var(--ink-2);
  border-bottom:1px solid var(--border);overflow-wrap:anywhere}
.legal dl>dt:nth-last-of-type(1),.legal dl>dd:nth-last-of-type(1){border-bottom:0}
.legal .upd{margin-top:34px;font-size:.86rem;color:var(--muted);font-style:italic}
@media (max-width:560px){
  .legal dl{grid-template-columns:1fr}
  .legal dt{border-bottom:0;padding-bottom:2px;background:var(--surface)}
  .legal dd{padding-top:2px}
  .legal dt+dd{border-bottom:1px solid var(--border)}
}

/* ---------- Prix HT ---------- */
.amount .ht{font-size:.9rem;font-weight:800;letter-spacing:.06em;color:var(--muted);
  margin-left:6px;vertical-align:.35em;text-transform:uppercase}
.pricenote.tva{border-left:3px solid var(--cyan);padding-left:16px;text-align:left;
  max-width:74ch;margin-left:auto;margin-right:auto}

/* ---------- Bloc accompagnement ---------- */
.acc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin:0 0 34px}
.acc-step{position:relative;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-l);padding:26px 24px 24px;box-shadow:var(--sh-1);
  transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s}
.acc-step:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.acc-step .n{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:11px;background:var(--indigo);color:#fff;font-family:var(--display);
  font-weight:800;font-size:1.02rem;margin-bottom:14px;box-shadow:0 6px 16px rgba(58,65,196,.28)}
.acc-step h3{font-size:1.08rem;margin:0 0 8px}
.acc-step p{color:var(--ink-2);font-size:.96rem;line-height:1.62}

.acc-warn{background:var(--night);color:#E8EAF6;border-radius:var(--r-xl);padding:36px 34px;
  position:relative;overflow:hidden}
.acc-warn::after{content:"";position:absolute;inset:auto -60px -90px auto;width:280px;height:280px;
  border-radius:50%;background:radial-gradient(circle,rgba(58,65,196,.5),transparent 68%);pointer-events:none}
.acc-warn h3{font-size:1.34rem;color:#fff;margin:0 0 10px;position:relative}
.acc-warn>p{color:#AEB4D8;max-width:66ch;margin:0 0 20px;position:relative}
.acc-warn .ticks.warn{position:relative;margin:0 0 22px;display:grid;
  grid-template-columns:1fr 1fr;column-gap:38px;row-gap:13px}
.acc-warn .ticks.warn li{display:block;position:relative;padding-left:31px;margin:0;
  color:#DDE0F0;font-size:.97rem;line-height:1.55;break-inside:avoid}
.acc-warn .ticks.warn li svg{position:absolute;left:0;top:3px;width:17px;height:17px;color:#FF8A7A}
.acc-warn .acc-end{position:relative;color:#fff;font-weight:600;border-top:1px solid rgba(255,255,255,.14);
  padding-top:18px;margin:0;max-width:72ch}
@media (max-width:760px){
  .acc-warn{padding:28px 22px}
  .acc-warn .ticks.warn{grid-template-columns:1fr}
}

/* ---------- Encart accompagnement (accueil) ---------- */
.accnote{display:grid;grid-template-columns:1.55fr 1fr;gap:32px;align-items:center;
  max-width:960px;margin:34px auto 0;padding:30px 32px;border-radius:var(--r-xl);
  background:linear-gradient(135deg,#F2F4FE 0%,#E9ECFB 100%);border:1px solid var(--border-2)}
.accnote-txt .eyebrow{margin-bottom:9px}
.accnote-txt h3{font-size:1.28rem;margin:0 0 10px;line-height:1.2}
.accnote-txt p{color:var(--ink-2);font-size:.97rem;line-height:1.66;margin:0 0 14px}
.arrowlink{display:inline-flex;align-items:center;gap:7px;font-weight:800;font-size:.94rem;
  color:var(--indigo);text-decoration:none}
.arrowlink span{transition:transform .25s cubic-bezier(.2,.7,.3,1)}
.arrowlink:hover span{transform:translateX(4px)}
.accnote-txt p.accnote-fine{font-size:.88rem;line-height:1.6;opacity:.78;margin:0;
  padding-left:13px;border-left:2px solid var(--border-2)}
.accnote-list{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.accnote-list li{display:block;position:relative;padding-left:27px;font-weight:700;
  font-size:.95rem;color:var(--ink)}
.accnote-list li svg{position:absolute;left:0;top:3px;color:var(--cyan-deep)}
@media (max-width:820px){
  .accnote{grid-template-columns:1fr;gap:20px;padding:24px 22px}
}

/* ---------- Maquette réservation (page réalisations) ---------- */
.split.reverse .s-media{order:-1}
@media (max-width:920px){.split.reverse .s-media{order:0}}
.bookmock{background:#fff;border:1px solid #E7DED6;border-radius:22px;padding:22px;
  box-shadow:0 3px 8px rgba(36,31,46,.08),0 26px 58px rgba(36,31,46,.14);max-width:400px;
  font-family:var(--body);color:#241F2E}
.bm-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  padding-bottom:13px;border-bottom:1px solid #E7DED6;margin-bottom:14px}
.bm-head b{font-size:1rem;font-family:var(--display);letter-spacing:-.02em}
.bm-head span{font-size:.76rem;color:#6B6377;letter-spacing:.1em;text-transform:uppercase;font-weight:700}
.bm-day{font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:#6B6377;
  font-weight:800;margin:0 0 8px}
.bm-slots{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 15px}
.bm-slots i{font-style:normal;border:1px solid #E7DED6;background:#F3EDE8;border-radius:10px;
  padding:8px 12px;font-size:.85rem;font-weight:700}
.bm-slots i.on{background:#5B4A72;border-color:#5B4A72;color:#fff}
.bm-slots i.off{opacity:.4;text-decoration:line-through}
.bm-sms{background:#F6E7E1;border-radius:12px;padding:11px 13px;font-size:.83rem;line-height:1.5;color:#5B4A72}
.bm-sms b{display:block;color:#241F2E}

/* =========================================================
   FOND ANIMÉ DES ZONES SOMBRES (section outils, rappel du pied)
   ========================================================= */
.nightfx{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.nightfx .nf-grid{position:absolute;inset:-40px;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(90% 70% at 50% 0%,#000 10%,transparent 72%);
  -webkit-mask-image:radial-gradient(90% 70% at 50% 0%,#000 10%,transparent 72%);
  animation:nfdrift 30s linear infinite}
@keyframes nfdrift{from{transform:translate3d(0,0,0)}to{transform:translate3d(52px,52px,0)}}
.nightfx .nf-orb{position:absolute;border-radius:50%;filter:blur(80px);will-change:transform;
  animation:nfglow 24s ease-in-out infinite alternate}
.nightfx .nf-orb.a{width:420px;height:420px;top:-160px;left:-90px;
  background:radial-gradient(circle,rgba(58,65,196,.55),transparent 68%)}
.nightfx .nf-orb.b{width:360px;height:360px;bottom:-170px;right:-70px;animation-duration:31s;animation-delay:-9s;
  background:radial-gradient(circle,rgba(47,224,196,.28),transparent 68%)}
@keyframes nfglow{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(34px,-26px,0) scale(1.12)}
}
.nightfx .nf-px{position:absolute;border-radius:3px;background:var(--cyan);
  box-shadow:0 0 12px rgba(47,224,196,.6);
  top:var(--t);left:var(--l);width:var(--sz,9px);height:var(--sz,9px);
  opacity:0;animation:pxblink 9s ease-in-out infinite;animation-delay:var(--dl,0s)}
.nightfx.paused *{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){
  .nightfx .nf-grid,.nightfx .nf-orb{animation:none}
  .nightfx .nf-px{animation:none;opacity:.5}
}
/* pied de page : halos répartis sur toute la hauteur */
.footfx .nf-orb.a{width:520px;height:520px;top:-230px;left:-120px;
  background:radial-gradient(circle,rgba(58,65,196,.6),transparent 68%)}
.footfx .nf-orb.b{width:420px;height:420px;top:-160px;right:4%;filter:blur(70px);
  background:radial-gradient(circle,rgba(47,224,196,.3),transparent 68%);animation-delay:-11s}
.footfx .nf-orb.c{width:460px;height:460px;bottom:-240px;right:-90px;animation-duration:29s;
  animation-delay:-5s;background:radial-gradient(circle,rgba(74,82,224,.42),transparent 70%)}
.footfx .nf-grid{mask-image:radial-gradient(100% 90% at 50% 10%,#000 15%,transparent 78%);
  -webkit-mask-image:radial-gradient(100% 90% at 50% 10%,#000 15%,transparent 78%)}

/* Lien d'évitement (accessibilité clavier) */
.skip{position:absolute;left:-9999px;top:10px;z-index:1000;padding:10px 16px;border-radius:10px;background:var(--indigo);color:#fff;font-weight:700;text-decoration:none;box-shadow:var(--sh-2)}
.skip:focus{left:10px;outline:3px solid var(--cyan);outline-offset:2px}

/* Cartes cliquables (page 404) */
a.card{display:block;color:inherit;text-decoration:none}
a.card p{text-decoration:none}
a.card h3::after{content:" \2192";color:var(--indigo)}
a.card:hover h3,a.card:focus-visible h3{color:var(--indigo)}

/* ---------- Scène 3D de l'accueil : la maquette bascule et s'éloigne au défilement ----------
   --p : 0 = maquette au repos, 1 = sortie par le haut (posé par app.js, jamais sans JS)
   --rx / --ry : inclinaison sous la souris, en degrés (écrans avec pointeur précis) */
.hero-home .hero-grid{perspective:1500px}
.hero-home .mockset.scene3d{--p:0;--rx:0;--ry:0;transform-style:preserve-3d;will-change:transform;
  transform:rotateX(calc(5deg + var(--ry)*1deg + var(--p)*18deg)) rotateY(calc(-11deg + var(--rx)*1deg - var(--p)*12deg))
            translate3d(0,calc(var(--p)*56px),calc(var(--p)*-320px));
  opacity:calc(1 - var(--p)*.8);
  transition:transform .45s cubic-bezier(.22,.61,.36,1),opacity .45s linear}
.hero-home .mockset.scene3d .win{transform:translateZ(0)}
.hero-home .mockset.scene3d .phone{transform:translateZ(80px)}
.hero-home .mockset.scene3d .floatbadge{transform:translateZ(56px)}
@media (max-width:900px){
  .hero-home .mockset.scene3d{transform:rotateX(calc(var(--p)*14deg)) rotateY(-6deg) translate3d(0,calc(var(--p)*30px),calc(var(--p)*-220px))}
}

/* ---------- Logo 3D des pages internes : une tuile épaisse qui tourne avec le défilement ----------
   Extrusion en pur CSS : des calques empilés sur l'axe Z (aucune bibliothèque, aucun modèle 3D).
   --s : tours de rotation liés au défilement ; --px/--py : inclinaison sous la souris (app.js). */
.hero-page .wrap{position:relative}
.logo3d{position:absolute;right:4%;top:50%;width:210px;height:210px;margin-top:-118px;perspective:1000px;pointer-events:none;z-index:1;
  animation:l3float 7s ease-in-out infinite}
.logo3d .spin{--s:0;--px:0;--py:0;position:absolute;inset:0;transform-style:preserve-3d;
  transform:rotateX(calc(14deg + var(--py)*1deg)) rotateY(calc(-26deg + var(--px)*1deg + var(--s)*1turn));
  transition:transform .55s cubic-bezier(.22,.61,.36,1)}
/* Clic sur le logo = un tour complet (app.js ajoute « cliquable » seulement si l'animation est permise).
   Pendant le tour c'est app.js qui interpole image par image : la transition CSS est coupée
   pour ne pas amortir chaque pas et ralentir le mouvement. */
.logo3d .spin.cliquable{pointer-events:auto;cursor:pointer}
.logo3d .spin.tour{transition:none}
.logo3d .l{position:absolute;inset:0;border-radius:23%;background:linear-gradient(135deg,#1A1E5E,#262C8C);
  transform:translateZ(calc(var(--i)*-2.8px));backface-visibility:visible}
.logo3d .l.face{background:none;transform:translateZ(0)}
.logo3d .l.face svg,.logo3d .l.face img{display:block;width:100%;height:100%;filter:drop-shadow(0 22px 44px rgba(0,0,0,.45))}
.logo3d .l.back{background:linear-gradient(135deg,#14174A,#1B2068)}
@keyframes l3float{50%{translate:0 -12px}}
@media (max-width:1120px){.logo3d{display:none}}
@media (prefers-reduced-motion:reduce){.logo3d{animation:none}.logo3d .spin{transition:none;pointer-events:none;cursor:auto}}

/* =========================================================
   ATELIER — habillage sombre commun à toutes les pages
   ---------------------------------------------------------
   Ajouté en fin de feuille : les règles au-dessus ne sont pas
   modifiées, on redéfinit seulement les variables et les rares
   composants qui supposaient un fond clair. Pour revenir en
   arrière, il suffit de supprimer ce bloc.
   Les maquettes (fenêtre de navigateur, résultat Google, carnet
   de réservation) restent volontairement claires : ce sont des
   images d'autres écrans, pas des éléments de ce site.
   ========================================================= */
:root{
  color-scheme:dark;
  --ink:#F2F4FF;
  --ink-2:#C6CBE7;
  --muted:#8F96BE;
  --ground:#0C0F1E;
  --surface:rgba(255,255,255,.042);
  --surface-2:rgba(255,255,255,.075);
  --border:rgba(255,255,255,.11);
  --border-2:rgba(255,255,255,.20);
  --accent:#8A92FF;          /* l'indigo, version lisible sur fond sombre */
  --panel:rgba(14,17,34,.55); /* verre posé sur le fond animé */
  --sh-1:none;
  --sh-2:0 16px 44px rgba(0,0,0,.42);
  --sh-3:0 26px 70px rgba(0,0,0,.55);
}

/* ---------- le fond vivant, derrière toutes les pages ---------- */
#p57bg{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block;
  background:radial-gradient(125% 95% at 72% 12%,#22285F 0%,#141838 46%,#0C0F1E 100%)}
.p57grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.42;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.38'/%3E%3C/svg%3E")}
/* le contenu passe au-dessus du fond ; on ne touche pas aux éléments
   déjà positionnés en fixed (en-tête, menu mobile, barre d'appel) */
body > main,body > footer{position:relative;z-index:2}

/* ---------- en-tête : verre sombre au défilement, plus de bascule claire ---------- */
header.scrolled,header.solid{background:rgba(12,15,30,.72);backdrop-filter:blur(18px);
  border-bottom-color:var(--border);box-shadow:none}
header.scrolled .brandmark,header.solid .brandmark{color:var(--ink)}
header.scrolled .brandmark em,header.solid .brandmark em{color:var(--cyan)}
header.scrolled nav a,header.solid nav a{color:rgba(255,255,255,.76)}
header.scrolled nav a:hover,header.scrolled nav a.is-active,
header.solid nav a:hover,header.solid nav a.is-active{color:#fff}
header.scrolled nav a::after,header.solid nav a::after{background:var(--cyan)}
header.scrolled .btn-ghost,header.solid .btn-ghost{border-color:rgba(255,255,255,.3);color:#fff}
header.scrolled .burger span,header.solid .burger span{background:#fff}
.mobmenu{background:rgba(12,15,30,.96);backdrop-filter:blur(20px)}
.callbar{background:rgba(12,15,30,.92);backdrop-filter:blur(14px);border-top:1px solid var(--border);
  box-shadow:0 -6px 30px rgba(0,0,0,.5)}

/* ---------- le hero laisse voir le fond ---------- */
.hero{background:transparent}
.hero::before{display:none}
.herofx{opacity:.5;-webkit-mask-image:linear-gradient(to bottom,#000 40%,transparent 100%);mask-image:linear-gradient(to bottom,#000 40%,transparent 100%)}
.hero h1{font-size:clamp(2.5rem,5.6vw,4.4rem);line-height:.96;letter-spacing:-.045em;max-width:13ch}
.hero-page h1{font-size:clamp(2.3rem,6.4vw,4.6rem);line-height:.98;letter-spacing:-.04em}
.hero .sub{color:rgba(255,255,255,.76)}

/* ---------- rythme des sections : des panneaux de verre, pas des blocs opaques ---------- */
.sec.surface{background:rgba(255,255,255,.035);backdrop-filter:blur(10px);
  border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.sec.night{background:var(--panel);backdrop-filter:blur(10px)}
.trust{background:var(--panel);backdrop-filter:blur(10px);border-top:1px solid var(--border);
  border-bottom:1px solid var(--border)}
footer{background:rgba(10,13,26,.66);backdrop-filter:blur(12px);border-top:1px solid var(--border)}
.footfx{opacity:.45}

/* ---------- surfaces : cartes, offres, FAQ, formulaire ---------- */
.card,.idcard,details,.acc-step,.plan{backdrop-filter:blur(8px)}
.card:hover{border-color:var(--border-2);background:rgba(255,255,255,.07)}
.ic{background:rgba(122,130,255,.18);color:#B9BEFF}
.ic.cy{background:rgba(47,224,196,.16);color:var(--cyan)}
.tagl{background:rgba(122,130,255,.16);color:#B9BEFF}
.plan.lite{background:rgba(255,255,255,.03);border-style:dashed;border-color:var(--border-2)}
.plan.lite .amount{color:#B9BEFF}
.plan.lite .ramp{background:rgba(255,255,255,.06)}
/* Cerclage de TOUTES les formules (le trait par défaut était presque invisible sur fond sombre) ;
   la formule la plus choisie se distingue par un cerclage cyan, la couleur de la marque. */
.plan{border-color:rgba(122,130,255,.38)}
.plan.lite{border-color:rgba(122,130,255,.32)}
.plan.feat{border-color:rgba(47,224,196,.62);
  box-shadow:0 0 0 1px rgba(47,224,196,.20),0 0 34px rgba(47,224,196,.10),0 30px 70px rgba(0,0,0,.5)}
/* le liseré passe par l'indigo au centre, là où se pose la pastille « le plus choisi » */
.plan.feat::before{background:linear-gradient(90deg,var(--cyan),var(--indigo-light) 50%,var(--cyan))}
.plan .tag.lite{background:rgba(255,255,255,.16);color:#fff}
.plan .tag.start{background:var(--cyan);color:#06210C}
.pm-seg{background:rgba(255,255,255,.05);border-color:var(--border-2);box-shadow:none}
.pm-seg .pm::before{background:var(--indigo-light)}
.pm-seg .pm:hover{color:var(--ink)}
form{background:var(--panel);backdrop-filter:blur(12px);border:1px solid var(--border)}
input,select,textarea{background:rgba(255,255,255,.05);border-color:var(--border-2);color:var(--ink)}
input::placeholder,textarea::placeholder{color:rgba(255,255,255,.35)}
input:focus,select:focus,textarea:focus{border-color:var(--cyan);background:rgba(255,255,255,.09)}
select option{background:#181C38;color:#F2F4FF}
.msg.ok{background:rgba(47,224,196,.12);color:var(--cyan);border-color:rgba(47,224,196,.34)}
.msg.err{background:rgba(255,120,130,.12);color:#FF8A96;border-color:rgba(255,120,130,.34)}
.field p.prechoix{background:rgba(47,224,196,.10);border-color:rgba(47,224,196,.30)}
.field p.prechoix b{color:var(--cyan)}
.field.prechoisi select{border-color:var(--cyan)}

/* ---------- textes d'accent : l'indigo foncé devient lisible ---------- */
.eyebrow{color:var(--cyan)}
.ticks li svg,.idcard .proofs svg,.accnote-list li svg{color:var(--cyan)}

/* Oublis du passage en thème sombre : ce panneau gardait un dégradé clair codé en dur, et le texte
   devenu clair s'y affichait blanc sur blanc. Le lien fléché, lui, restait en indigo foncé (2,3:1). */
.accnote{background:linear-gradient(135deg,rgba(255,255,255,.075),rgba(255,255,255,.035));
  border-color:var(--border-2)}
.arrowlink{color:var(--accent)}
.arrowlink:hover{color:#AEB4FF}
.btn-line{border-color:var(--border-2);color:var(--ink)}
.btn-line:hover{border-color:var(--cyan);color:var(--cyan)}
.form-note a,.legal a,a.card h3::after{color:var(--cyan)}
.legal a{border-bottom-color:rgba(47,224,196,.3)}
.legal a:hover{border-bottom-color:var(--cyan)}
a.card:hover h3,a.card:focus-visible h3{color:var(--cyan)}

/* ---------- assistant guidé ---------- */
.p57bot{background:rgba(16,19,38,.94);backdrop-filter:blur(18px);border-color:var(--border)}
.p57bot .bmsg{background:transparent}
.p57bot .m.bot,.p57bot .typing{background:rgba(255,255,255,.06);border-color:var(--border);color:var(--ink)}
.p57bot .m.ok{background:rgba(47,224,196,.12);border-color:rgba(47,224,196,.32);color:var(--cyan)}
.p57bot .bopt{background:rgba(12,15,30,.6);border-top-color:var(--border)}
.p57bot .bopt button{background:rgba(255,255,255,.05);border-color:var(--border-2);color:var(--ink)}
.p57bot .bopt button:hover{border-color:var(--cyan);background:rgba(47,224,196,.10)}
.p57bot .bnote{background:transparent}

/* ---------- mentions légales ---------- */
.legal dl{background:var(--surface);border-color:var(--border)}
.legal dt{background:rgba(255,255,255,.05)}
@media (max-width:700px){.legal dt{background:transparent}}

/* ---------- ce qui doit rester clair : ce sont des images d'autres écrans ---------- */
.mockset .win,.mockset .phone .scr,.floatbadge,.bookmock,.gmock{color:#12142F}
.mockset .win h1,.mockset .win h2,.mockset .win h3,.bookmock h3,.gmock h3{color:#12142F}

/* ---------- retouches de contraste sur fond sombre ---------- */
.btn-primary{background:#5A63F0;box-shadow:0 6px 24px rgba(90,99,240,.32)}
.btn-primary:hover{background:#6D76FF;box-shadow:0 12px 34px rgba(90,99,240,.42)}
header.scrolled,header.solid{background:rgba(12,15,30,.86)}
.cmp-bad{border-color:rgba(255,120,130,.26);background:rgba(255,120,130,.05)}
.cmp-good{border-color:rgba(47,224,196,.28);background:rgba(47,224,196,.05);
  box-shadow:0 0 0 1px rgba(47,224,196,.10),0 26px 60px rgba(0,0,0,.45)}
.ticks li.no svg{color:#FF8A96}

/* ---------- téléphone : panneaux un peu plus clairs, le fond y paraît plus sombre qu'au bureau ---------- */
@media (max-width:760px){
  :root{--panel:rgba(18,22,44,.42);--ground:#10142A}
  footer{background:rgba(14,17,34,.55)}
  .p57grain{opacity:.3}
}

/* ---------- bouton son (bas gauche) ---------- */
.p57son{position:fixed;left:20px;bottom:20px;z-index:95;width:46px;height:46px;border-radius:50%;cursor:pointer;
  border:1px solid var(--border-2);background:rgba(12,15,30,.72);backdrop-filter:blur(12px);
  display:flex;align-items:flex-end;justify-content:center;gap:3px;padding:0 0 15px;
  transition:transform .2s ease,border-color .25s ease,background .25s ease}
.p57son:hover{transform:translateY(-2px);border-color:var(--cyan)}
.p57son:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
.p57son .b{display:block;width:3px;height:6px;border-radius:2px;background:rgba(255,255,255,.45);transform-origin:bottom;
  transition:background .25s}
.p57son.on .b{background:var(--cyan);animation:sonBarre 1.1s ease-in-out infinite}
.p57son.on .b:nth-child(2){animation-delay:.18s}
.p57son.on .b:nth-child(3){animation-delay:.36s}
.p57son.on .b:nth-child(4){animation-delay:.54s}
.p57son.attente .b{background:rgba(47,224,196,.6)}
.p57son:not(.on):not(.attente)::after{content:"";position:absolute;left:12px;right:12px;top:50%;height:2px;
  background:rgba(255,255,255,.55);transform:rotate(-35deg);border-radius:2px}
@keyframes sonBarre{0%,100%{transform:scaleY(.5)}50%{transform:scaleY(2.2)}}
@media (max-width:1040px){.p57son{left:16px;bottom:calc(88px + env(safe-area-inset-bottom));width:44px;height:44px}}
@media (prefers-reduced-motion:reduce){.p57son.on .b{animation:none;transform:scaleY(1.4)}}

/* ---------- OBJET 3D (accueil) ----------
   Image fixe (poster) affichée tout de suite ; le canvas WebGL se fond par-dessus
   quand le modèle est prêt. Même boîte, même ratio : rien ne bouge (CLS 0).
   Au premier écran, la boîte file jusqu'au bord droit de la fenêtre : la branche sort du cadre. */
.p57-3d{position:relative;width:100%;max-width:560px;margin:0 auto;aspect-ratio:1;pointer-events:none;
  --halo:rgba(47,224,196,.16)}
.p57-3d::before{content:"";position:absolute;left:44%;bottom:6%;width:60%;height:16%;transform:translateX(-50%);
  border-radius:50%;background:radial-gradient(ellipse at center,var(--halo),transparent 68%);opacity:.9}
.p57-3d .poster,.p57-3d canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.p57-3d .poster{object-fit:contain;transition:opacity .9s ease .2s}
.p57-3d canvas{opacity:0;transition:opacity 1.1s ease}
.p57-3d.pret .poster{opacity:0}
.p57-3d.pret canvas{opacity:1}
/* premier écran : boîte large, collée au bord droit de la fenêtre, modèle légèrement fondu dans le fond */
.hero-home .p57-3d{--deb:calc((100vw - min(100vw, var(--wrap))) / 2 + 24px);
  max-width:none;width:calc(100% + var(--deb));margin:0 calc(-1 * var(--deb)) 0 0;aspect-ratio:auto;
  height:clamp(400px,42vw,620px)}
.hero-home .p57-3d .poster{object-fit:cover;object-position:right center}
.hero-home .p57-3d.pret canvas,.hero-home .p57-3d .poster{opacity:.93}
.hero-home .p57-3d.pret .poster{opacity:0}
.hero-home .p57-3d canvas,.hero-home .p57-3d .poster{-webkit-mask-image:linear-gradient(to top,transparent 0,#000 16%);mask-image:linear-gradient(to top,transparent 0,#000 16%)}
#local .p57-3d{max-width:420px;margin-bottom:22px}
/* Services, section « En option » : même cadrage que le premier écran (la branche sort par la droite,
   réglages data-dxr identiques), boîte qui file jusqu'au bord droit de la fenêtre. */
#objet3d{overflow:hidden}
#objet3d .p57-3d{--deb:calc((100vw - min(100vw, var(--wrap))) / 2 + 24px);
  max-width:none;width:calc(100% + var(--deb));margin:0 calc(-1 * var(--deb)) 0 0;aspect-ratio:auto;
  height:clamp(400px,42vw,620px);--halo:rgba(47,224,196,.18)}
#objet3d .p57-3d .poster{object-fit:cover;object-position:right center}
#objet3d .p57-3d.pret canvas,#objet3d .p57-3d .poster{opacity:.96}
#objet3d .p57-3d.pret .poster{opacity:0}
#objet3d .p57-3d canvas,#objet3d .p57-3d .poster{
  -webkit-mask-image:linear-gradient(to top,transparent 0,#000 13%);
  mask-image:linear-gradient(to top,transparent 0,#000 13%)}
@media (max-width:920px){
  /* Sur téléphone l'objet est un décor de fond : il remonte derrière les pastilles (« Livré en 7 jours »…),
     déborde sur les blocs voisins, se fond en haut comme en bas et s'assoit dans un halo, pour ne pas
     avoir l'air posé au milieu de rien. Le texte reste au-dessus, les pastilles s'allègent pour le laisser voir. */
  .hero-home .hero-grid > div:first-child{position:relative;z-index:2}
  .hero-home .p57-3d{--deb:24px;width:calc(100% + 48px);margin:-116px -24px -30px;height:clamp(330px,86vw,470px);
    position:relative;z-index:1;--halo:rgba(47,224,196,.2)}
  .hero-home .chips{margin-top:26px}
  .hero-home .chip{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.13);
    text-shadow:0 1px 7px rgba(8,10,26,.85)}
  .hero-home .p57-3d::before{left:52%;bottom:7%;width:108%;height:42%;opacity:.95}
  .hero-home .p57-3d canvas,.hero-home .p57-3d .poster{
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 9%,#000 86%,transparent 100%);
    mask-image:linear-gradient(to bottom,transparent 0,#000 9%,#000 86%,transparent 100%)}
  .hero-home .p57-3d.pret canvas,.hero-home .p57-3d .poster{opacity:.86}
  .hero-home .p57-3d.pret .poster{opacity:0}
  /* Services : pas de chevauchement avec le texte, simple bandeau pleine largeur fondu haut et bas. */
  /* Téléphone : la boîte déborde des deux côtés de la colonne et l'excédent est rogné par la section
     (la branche sort donc encore plus tôt). Tablette : la largeur est plafonnée, on recentre. */
  #objet3d .p57-3d{--deb:24px;width:calc(100% + 48px);max-width:520px;margin:8px 0 0;
    height:clamp(330px,86vw,430px);--halo:rgba(47,224,196,.2)}
  #objet3d .p57-3d::before{left:52%;bottom:8%;width:104%;height:38%;opacity:.95}
  #objet3d .p57-3d canvas,#objet3d .p57-3d .poster{
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 10%,#000 87%,transparent 100%);
    mask-image:linear-gradient(to bottom,transparent 0,#000 10%,#000 87%,transparent 100%)}
}
@media (min-width:520px) and (max-width:920px){#objet3d .p57-3d{margin-inline:auto}}
@media (max-width:760px){#local .p57-3d{max-width:320px}}
@media (prefers-reduced-motion:reduce){.p57-3d .poster,.p57-3d canvas{transition:none}}

/* =========================================================
   PAGE BRIEF CLIENT (/brief) — formulaire par étapes
   Page volontairement isolée : ni menu, ni assistant, ni fond animé en JavaScript.
   Elle ne charge que le lecteur 3D et son propre script, pour rester légère et sans
   distraction : le client n'a qu'une chose à faire ici.
   ========================================================= */
body.page-brief{background:radial-gradient(125% 95% at 72% 12%,#22285F 0%,#141838 46%,#0C0F1E 100%);
  background-attachment:fixed;min-height:100vh;position:relative}

/* Pastilles cyan sur toute la hauteur de la page, pas seulement dans le bandeau.
   Positionnées en absolu par rapport au <body> : elles défilent avec le contenu,
   exactement comme celles du premier écran de l'accueil. */
.pxfield{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.pxfield .fx-px{position:absolute;border-radius:3px;background:var(--cyan);
  box-shadow:0 0 10px rgba(47,224,196,.55);
  top:var(--t);left:var(--l);width:var(--sz,10px);height:var(--sz,10px);
  opacity:0;animation:pxblink 9s ease-in-out infinite;animation-delay:var(--dl,0s)}
/* onglet en arrière-plan : on arrête tout (brief.js pose la classe) */
.pxfield.paused .fx-px{animation-play-state:paused}
/* Sur téléphone on n'en garde qu'une sur deux : même ambiance, moitié moins de travail
   pour le navigateur, sur les appareils qui en ont le moins sous le capot. */
@media (max-width:720px){.pxfield .fx-px:nth-child(2n){display:none}}
@media (prefers-reduced-motion:reduce){.pxfield .fx-px{animation:none;opacity:.5}}

/* En-tête figé en verre sombre : sans app.js, la classe « scrolled » n'arrive jamais. */
.hdr-nu{background:rgba(12,15,30,.72);backdrop-filter:blur(18px);border-bottom:1px solid var(--border)}
.hdr-nu .bar{justify-content:space-between}
.hdr-nu .brandmark{color:var(--ink)}
.hdr-nu .brandmark em{color:var(--cyan)}
.hdr-nu .btn-ghost{border-color:rgba(255,255,255,.3);color:#fff}

.hero-brief{padding-top:clamp(104px,13vh,150px);padding-bottom:0;overflow:hidden}
.bf-tete{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:40px;align-items:center}
.hero-brief h1{margin-bottom:14px}
.hero-brief p{color:var(--ink-2);max-width:56ch}
.bf-rassure{display:flex;gap:9px;align-items:flex-start;margin-top:18px;font-size:.93rem;color:var(--muted)}
.bf-rassure svg{color:var(--cyan);flex:none;margin-top:3px}
.hero-brief .p57-3d{--deb:calc((100vw - min(100vw, var(--wrap))) / 2 + 24px);
  max-width:none;width:calc(100% + var(--deb));margin:0 calc(-1 * var(--deb)) 0 0;aspect-ratio:auto;
  height:clamp(330px,34vw,470px);--halo:rgba(47,224,196,.18)}
.hero-brief .p57-3d .poster{object-fit:cover;object-position:right center}
.hero-brief .p57-3d.pret canvas,.hero-brief .p57-3d .poster{opacity:.96}
.hero-brief .p57-3d.pret .poster{opacity:0}
.hero-brief .p57-3d canvas,.hero-brief .p57-3d .poster{
  -webkit-mask-image:linear-gradient(to top,transparent 0,#000 14%);
  mask-image:linear-gradient(to top,transparent 0,#000 14%)}

.bf-sec{padding-top:clamp(28px,4vw,48px)}
.bf-sec .wrap{max-width:780px}
.bf{background:var(--panel);backdrop-filter:blur(16px);border:1px solid var(--border);
  border-radius:20px;padding:clamp(22px,3.4vw,40px);box-shadow:var(--sh-3)}

/* L'attribut « hidden » du HTML pose display:none, mais toute règle de classe qui donne un
   display le bat (même spécificité, et notre feuille passe après celle du navigateur) : sans ça,
   le bouton « Envoyer » (.btn, display:inline-flex) resterait affiché à toutes les étapes. */
.bf [hidden],.bf-merci[hidden]{display:none !important}

/* Progression */
.bf-prog{margin-bottom:26px}
.bf-jauge{height:5px;border-radius:99px;background:rgba(255,255,255,.09);overflow:hidden}
.bf-jauge i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--indigo-light),var(--cyan));transition:width .45s cubic-bezier(.22,.61,.36,1)}
.bf-etat{margin-top:9px;font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}

/* Étapes */
.bf-etape{border:0;margin:0;padding:0;min-width:0}
.bf-etape legend{display:flex;align-items:center;gap:13px;font-family:var(--display);font-weight:700;
  font-size:clamp(1.25rem,2.4vw,1.6rem);color:var(--ink);padding:0;margin-bottom:8px;outline:0}
.bf-num{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  font-size:.92rem;color:var(--cyan);background:rgba(47,224,196,.12);border:1px solid rgba(47,224,196,.34)}
.bf-chapeau{color:var(--muted);margin-bottom:26px;max-width:62ch}

/* Une question */
.bf-q{margin-bottom:24px}
.bf-q:last-child{margin-bottom:0}
.bf-lib{display:block;font-weight:600;color:var(--ink);margin-bottom:5px}
.bf-lib em{font-style:normal;color:var(--cyan)}
.bf-aide{font-size:.9rem;color:var(--muted);margin-bottom:10px;max-width:62ch}
.bf-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bf-champ{width:100%;background:rgba(255,255,255,.05);border:1px solid var(--border-2);border-radius:12px;
  padding:12px 14px;color:var(--ink);font:inherit;font-size:1rem;resize:vertical;
  transition:border-color .2s,box-shadow .2s,background .2s}
.bf-champ::placeholder{color:#767DA4}
.bf-champ:hover{background:rgba(255,255,255,.07)}
.bf-champ:focus{outline:0;border-color:var(--cyan);background:rgba(255,255,255,.08);
  box-shadow:0 0 0 3px rgba(47,224,196,.2)}

/* Choix en pastilles : la vraie case reste là pour le clavier et les lecteurs d'écran. */
.bf-chips{display:flex;flex-wrap:wrap;gap:9px}
.bf-chip{position:relative;display:inline-flex}
.bf-chip input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.bf-chip span{display:block;padding:9px 15px;border-radius:99px;border:1px solid var(--border-2);
  background:rgba(255,255,255,.04);color:var(--ink-2);font-size:.93rem;transition:all .18s}
.bf-chip:hover span{border-color:rgba(255,255,255,.34);color:var(--ink)}
.bf-chip input:checked + span{background:rgba(47,224,196,.15);border-color:var(--cyan);color:#EAFFFA;font-weight:600}
.bf-chip input:focus-visible + span{outline:2px solid var(--cyan);outline-offset:2px}
.bf-libre{margin-top:10px}

/* Relecture avant envoi */
.bf-recap{display:grid;gap:2px}
.bf-rl{display:block;width:100%;text-align:left;background:transparent;border:0;border-radius:11px;
  padding:11px 13px;cursor:pointer;font:inherit;transition:background .18s}
.bf-rl:hover,.bf-rl:focus-visible{background:rgba(255,255,255,.06);outline:0}
.bf-rq{display:block;font-size:.83rem;letter-spacing:.02em;color:var(--muted);margin-bottom:3px}
.bf-rr{display:block;color:var(--ink);white-space:pre-wrap}
.bf-vide{margin-top:16px;font-size:.9rem;color:var(--muted)}

/* Barre de boutons */
.bf-nav{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px;padding-top:24px;border-top:1px solid var(--border)}
.bf-nav .bf-suiv,.bf-nav .bf-envoi{margin-left:auto}
.bf-erreur{margin-top:20px;padding:12px 15px;border-radius:12px;font-size:.93rem;
  background:rgba(255,126,126,.10);border:1px solid rgba(255,126,126,.42);color:#FFC9C9}
.bf-erreur a{color:#fff;text-decoration:underline}
.bf-piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Écran de fin */
.bf-merci{text-align:center;background:var(--panel);backdrop-filter:blur(16px);border:1px solid var(--border);
  border-radius:20px;padding:clamp(34px,5vw,58px);box-shadow:var(--sh-3)}
.bf-coche{width:74px;height:74px;margin:0 auto 20px;border-radius:50%;display:grid;place-items:center;
  color:var(--cyan);background:rgba(47,224,196,.13);border:1px solid rgba(47,224,196,.4)}
.bf-merci p{color:var(--ink-2);max-width:46ch;margin:0 auto 18px}
.bf-merci a{color:var(--cyan)}

.foot-nu{padding:30px 0 40px;border-top:1px solid var(--border);margin-top:40px;position:relative;z-index:2}
.foot-nu .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:.88rem;color:var(--muted)}
.foot-nu a{color:var(--muted)}
.foot-nu a:hover{color:var(--ink)}

@media (max-width:920px){
  .bf-tete{grid-template-columns:1fr;gap:6px}
  .hero-brief .p57-3d{--deb:24px;width:calc(100% + 48px);max-width:520px;margin:10px 0 0;
    height:clamp(300px,74vw,400px);--halo:rgba(47,224,196,.2)}
  .hero-brief .p57-3d::before{left:52%;bottom:8%;width:104%;height:38%;opacity:.95}
  .hero-brief .p57-3d canvas,.hero-brief .p57-3d .poster{
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 8%,#000 88%,transparent 100%);
    mask-image:linear-gradient(to bottom,transparent 0,#000 8%,#000 88%,transparent 100%)}
  .bf-nav .btn{flex:1 1 auto;justify-content:center}
  .bf-nav .bf-suiv,.bf-nav .bf-envoi{margin-left:0}
}
@media (min-width:520px) and (max-width:920px){.hero-brief .p57-3d{margin-inline:auto}}