/* ══════════════════════════════════════════════════════════════
   GROOMLY — vitrine
   Feuille autonome : ne depend d'aucune autre.
   ══════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box}
:root{
  --rose:#f43f5e; --rose-vif:#fb7185; --rose-fonce:#e11d48;
  --violet:#8b5cf6; --ambre:#fbbf24;
  --nuit:#0a0a12; --nuit-2:#12121d; --encre:#18181b;
  --gris:#71717a; --gris-clair:#a1a1aa; --trait:#e7e7ec;
  --fond:#fbfbfd; --blanc:#fff;
  --rayon:20px;
  --ombre:0 24px 60px -20px rgba(15,15,30,.22);
  --max:1180px;
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--fond);color:var(--encre);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{line-height:1.1;letter-spacing:-.035em;margin:0;font-weight:800}
p{margin:0}
.enveloppe{width:100%;max-width:var(--max);margin:0 auto;padding:0 24px}
.saut-contenu{position:absolute;left:-9999px;top:0;background:var(--blanc);padding:12px 20px;z-index:200;border-radius:0 0 12px 0}
.saut-contenu:focus{left:0}

/* ── En-tete vitre ───────────────────────────────────────────── */
.entete{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:16px 0;transition:padding .35s cubic-bezier(.4,0,.2,1),background .35s,box-shadow .35s,border-color .35s;
  border-bottom:1px solid transparent;
}
.entete.reduite{
  padding:9px 0;background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px);
  border-bottom-color:rgba(20,20,40,.07);box-shadow:0 4px 30px -12px rgba(15,15,30,.14);
}
.entete-inner{display:flex;align-items:center;justify-content:space-between;gap:20px}
.marque{display:inline-flex;align-items:center;gap:10px;font-weight:900;font-size:1.3rem;letter-spacing:-.05em;color:var(--blanc);transition:color .35s}
.entete.reduite .marque{color:var(--encre)}
.marque-pastille{
  width:34px;height:34px;border-radius:11px;flex:none;object-fit:cover;
  box-shadow:0 6px 18px -6px rgba(244,63,94,.7);
}
.nav{display:none;align-items:center;gap:4px}
.nav a{
  padding:9px 14px;border-radius:11px;font-size:.9rem;font-weight:600;
  color:rgba(255,255,255,.72);transition:color .25s,background .25s;
}
.nav a:hover{color:#fff;background:rgba(255,255,255,.1)}
.entete.reduite .nav a{color:var(--gris)}
.entete.reduite .nav a:hover{color:var(--encre);background:rgba(20,20,40,.05)}
.bouton{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:12px 22px;border-radius:13px;font-weight:700;font-size:.9375rem;
  border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .25s,background .25s,color .25s;
}
.bouton-primaire{
  background:linear-gradient(135deg,var(--rose-vif),var(--rose-fonce));color:#fff;
  box-shadow:0 10px 26px -10px rgba(244,63,94,.85);
}
.bouton-primaire:hover{transform:translateY(-2px);box-shadow:0 16px 34px -10px rgba(244,63,94,.95)}
.bouton-clair{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.bouton-clair:hover{background:rgba(255,255,255,.18);transform:translateY(-2px)}
.entete.reduite .bouton-clair{background:rgba(20,20,40,.05);color:var(--encre);border-color:rgba(20,20,40,.1)}
.burger{
  display:grid;place-items:center;width:42px;height:42px;border-radius:12px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;cursor:pointer;
}
.entete.reduite .burger{background:rgba(20,20,40,.05);border-color:rgba(20,20,40,.1);color:var(--encre)}
.panneau{
  position:fixed;inset:0;z-index:99;background:rgba(10,10,18,.97);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  display:flex;flex-direction:column;justify-content:center;gap:6px;padding:0 32px;
  opacity:0;pointer-events:none;transition:opacity .3s;
}
.panneau.ouvert{opacity:1;pointer-events:auto}
.panneau a{color:#fff;font-size:1.6rem;font-weight:800;padding:14px 0;letter-spacing:-.03em;
  border-bottom:1px solid rgba(255,255,255,.09)}
.panneau .bouton{margin-top:26px;font-size:1rem;padding:16px 24px;border-bottom:0}

/* ── Heros ───────────────────────────────────────────────────── */
.heros{position:relative;background:var(--nuit);color:#fff;padding:150px 0 110px;overflow:hidden;isolation:isolate}
.aurore{position:absolute;inset:0;z-index:-2;filter:blur(72px);opacity:1}
.tache{position:absolute;border-radius:50%;mix-blend-mode:screen;will-change:transform}
.t1{width:720px;height:720px;background:radial-gradient(circle,rgba(244,63,94,.85),transparent 60%);top:-24%;left:-14%;animation:derive1 22s ease-in-out infinite}
.t2{width:660px;height:660px;background:radial-gradient(circle,rgba(139,92,246,.8),transparent 60%);top:-16%;right:-16%;animation:derive2 26s ease-in-out infinite}
.t3{width:640px;height:640px;background:radial-gradient(circle,rgba(251,113,133,.65),transparent 62%);bottom:-34%;left:24%;animation:derive3 30s ease-in-out infinite}
@keyframes derive1{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(90px,60px) scale(1.14)}66%{transform:translate(-50px,90px) scale(.9)}}
@keyframes derive2{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(-80px,70px) scale(.88)}66%{transform:translate(60px,-50px) scale(1.16)}}
@keyframes derive3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-70px,-60px) scale(1.2)}}
.grille-fond{
  position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 82% 62% at 50% 42%,#000 34%,transparent 100%);
  mask-image:radial-gradient(ellipse 82% 62% at 50% 42%,#000 34%,transparent 100%);
}
.heros-grille{display:grid;grid-template-columns:1fr;gap:64px;align-items:center}
.pilule{
  display:inline-flex;align-items:center;gap:9px;padding:7px 8px 7px 7px;border-radius:999px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);
  font-size:.8125rem;font-weight:600;color:rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.pilule b{background:linear-gradient(135deg,var(--rose-vif),var(--rose-fonce));color:#fff;
  padding:3px 10px;border-radius:999px;font-size:.6875rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.titre-heros{font-size:clamp(2.6rem,6.4vw,4.6rem);font-weight:900;letter-spacing:-.045em;margin:26px 0 0}
.degrade{
  background:linear-gradient(115deg,var(--rose-vif) 10%,var(--ambre) 50%,var(--rose-vif) 90%);
  background-size:220% auto;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;animation:brille 7s linear infinite;
}
@keyframes brille{to{background-position:220% center}}
.sous-titre{font-size:1.125rem;color:rgba(255,255,255,.66);max-width:52ch;margin:24px 0 0;line-height:1.7}
.actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px}
.magasin{
  display:inline-flex;align-items:center;gap:12px;padding:13px 24px 13px 20px;border-radius:15px;
  background:#fff;color:var(--nuit);font-weight:700;
  box-shadow:0 14px 34px -14px rgba(0,0,0,.6);
  transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .25s;
}
.magasin:hover{transform:translateY(-3px);box-shadow:0 20px 42px -14px rgba(0,0,0,.7)}
.magasin-txt{display:flex;flex-direction:column;line-height:1.12;text-align:left}
.magasin-txt small{font-size:.6875rem;font-weight:600;opacity:.62}
.magasin-txt strong{font-size:1.0625rem;font-weight:800;letter-spacing:-.02em}
.magasin-bientot{background:rgba(255,255,255,.07);color:rgba(255,255,255,.62);
  border:1px dashed rgba(255,255,255,.26);box-shadow:none;cursor:default}
.magasin-bientot:hover{transform:none;box-shadow:none}
.preuves{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:32px;font-size:.875rem;color:rgba(255,255,255,.55)}
.preuves span{display:inline-flex;align-items:center;gap:8px}
.preuves svg{color:var(--rose-vif);flex:none}
/* ── Carte de l'application ──────────────────────────────────── */
.scene{position:relative;display:flex;justify-content:center;align-items:center;min-height:440px}
.halo-app{position:absolute;width:400px;height:400px;border-radius:50%;
  background:radial-gradient(circle,rgba(244,63,94,.55),transparent 66%);
  filter:blur(64px);animation:pulse 6s ease-in-out infinite;pointer-events:none}
@keyframes pulse{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.14)}}

.carte-app{
  position:relative;z-index:2;width:min(300px,100%);padding:32px 26px 28px;text-align:center;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:30px;
  -webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.85),0 1px 0 rgba(255,255,255,.14) inset;
  animation:leve 8s ease-in-out infinite;
}
@keyframes leve{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
.app-icone{
  width:112px;height:112px;border-radius:26px;margin:0 auto 22px;display:block;
  box-shadow:0 22px 44px -14px rgba(244,63,94,.9),0 0 0 1px rgba(255,255,255,.16);
}
.app-nom{font-size:1.5rem;font-weight:900;letter-spacing:-.035em;color:#fff}
.app-sous{font-size:.875rem;color:rgba(255,255,255,.58);margin-top:5px}
.app-meta{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:16px;
  font-size:.75rem;font-weight:700;color:rgba(255,255,255,.5)}
.app-meta i{font-style:normal;width:1px;height:12px;background:rgba(255,255,255,.2)}
.etoiles{display:inline-flex;gap:2px;color:var(--ambre)}
.app-obtenir{
  display:block;margin-top:22px;padding:14px 24px;border-radius:14px;
  background:linear-gradient(135deg,var(--rose-vif),var(--rose-fonce));color:#fff;
  font-weight:800;font-size:1rem;letter-spacing:-.01em;
  box-shadow:0 14px 30px -12px rgba(244,63,94,.95);
  transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .25s;
}
.app-obtenir:hover{transform:translateY(-2px);box-shadow:0 20px 40px -12px rgba(244,63,94,1)}
.app-note{font-size:.6875rem;color:rgba(255,255,255,.4);margin-top:14px}

/* Pastilles qui gravitent autour de la carte */
.puce{
  position:absolute;z-index:3;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  padding:10px 14px;border-radius:13px;font-size:.78rem;font-weight:700;color:#fff;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.17);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  box-shadow:0 16px 34px -16px rgba(0,0,0,.8);
}
.puce svg{color:var(--rose-vif);flex:none}
.puce-1{top:3%;left:-9%;animation:vole1 9s ease-in-out infinite}
.puce-2{top:47%;right:-11%;animation:vole2 11s ease-in-out infinite}
.puce-3{bottom:3%;left:-6%;animation:vole3 10s ease-in-out infinite}
@keyframes vole1{0%,100%{transform:translate(0,0)}50%{transform:translate(6px,-16px)}}
@keyframes vole2{0%,100%{transform:translate(0,0)}50%{transform:translate(-10px,14px)}}
@keyframes vole3{0%,100%{transform:translate(0,0)}50%{transform:translate(10px,-12px)}}

/* ── Bandeau defilant ────────────────────────────────────────── */
.bandeau{background:var(--nuit-2);border-top:1px solid rgba(255,255,255,.07);
  border-bottom:1px solid rgba(255,255,255,.07);padding:20px 0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.piste{display:flex;gap:56px;width:max-content;animation:defile 34s linear infinite}
.piste span{display:inline-flex;align-items:center;gap:11px;color:rgba(255,255,255,.42);
  font-size:.875rem;font-weight:600;white-space:nowrap}
.piste svg{color:var(--rose-vif);flex:none}
@keyframes defile{to{transform:translateX(-50%)}}

/* ── Sections ────────────────────────────────────────────────── */
.section{padding:110px 0;position:relative}
.section-claire{background:var(--blanc)}
.section-douce{background:linear-gradient(180deg,var(--fond),#f3f3f7)}
.chapeau{display:inline-flex;align-items:center;gap:8px;font-size:.75rem;font-weight:800;
  letter-spacing:.13em;text-transform:uppercase;color:var(--rose-fonce);margin-bottom:16px}
.chapeau::before{content:"";width:26px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--rose-vif),var(--rose-fonce))}
.titre-section{font-size:clamp(1.9rem,4.2vw,3rem);font-weight:900;letter-spacing:-.04em}
.intro-section{color:var(--gris);font-size:1.0625rem;max-width:56ch;margin-top:16px;line-height:1.7}
.centre{text-align:center}
.centre .chapeau{justify-content:center}
.centre .intro-section{margin-left:auto;margin-right:auto}

/* ── Etapes ──────────────────────────────────────────────────── */
.etapes{display:grid;grid-template-columns:1fr;gap:26px;margin-top:56px}
.etape{position:relative;background:var(--blanc);border:1px solid var(--trait);border-radius:var(--rayon);
  padding:32px 26px 28px;transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s,border-color .35s}
.etape:hover{transform:translateY(-6px);box-shadow:var(--ombre);border-color:#dcdce4}
.etape-num{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;
  font-weight:900;font-size:1.0625rem;color:#fff;margin-bottom:20px;
  background:linear-gradient(140deg,var(--rose-vif),var(--rose-fonce));
  box-shadow:0 10px 22px -8px rgba(244,63,94,.75)}
.etape h3{font-size:1.1875rem;margin-bottom:10px}
.etape p{color:var(--gris);font-size:.9375rem;line-height:1.68}
.trait-etapes{position:absolute;top:23px;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--trait) 15%,var(--trait) 85%,transparent);z-index:-1;display:none}

/* ── Cartes atouts ───────────────────────────────────────────── */
.atouts{display:grid;grid-template-columns:1fr;gap:22px;margin-top:56px}
.atout{position:relative;background:var(--blanc);border:1px solid var(--trait);border-radius:var(--rayon);
  padding:30px 26px;overflow:hidden;transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s}
.atout::before{content:"";position:absolute;inset:0;border-radius:var(--rayon);padding:1px;
  background:linear-gradient(140deg,var(--rose-vif),transparent 45%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .35s;pointer-events:none}
.atout:hover{transform:translateY(-5px);box-shadow:var(--ombre)}
.atout:hover::before{opacity:1}
.atout-icone{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;margin-bottom:18px;
  background:linear-gradient(140deg,#fff1f2,#ffe4e6);color:var(--rose-fonce);border:1px solid #fecdd3}
.atout h3{font-size:1.0625rem;margin-bottom:9px}
.atout p{color:var(--gris);font-size:.9375rem;line-height:1.66}

/* ── Chiffres ────────────────────────────────────────────────── */
.chiffres{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:56px}
.chiffre{background:var(--blanc);border:1px solid var(--trait);border-radius:18px;padding:26px 20px;text-align:center}
.chiffre b{display:block;font-size:clamp(1.8rem,4vw,2.6rem);font-weight:900;letter-spacing:-.045em;
  background:linear-gradient(135deg,var(--rose-vif),var(--rose-fonce));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.chiffre span{display:block;font-size:.8125rem;color:var(--gris);font-weight:600;margin-top:6px}

/* ── Tarifs ──────────────────────────────────────────────────── */
.tarifs{margin-top:52px;background:var(--blanc);border:1px solid var(--trait);
  border-radius:24px;overflow:hidden;box-shadow:var(--ombre)}
.tarif{display:flex;justify-content:space-between;align-items:center;gap:18px;
  padding:19px 26px;border-bottom:1px solid var(--trait);transition:background .25s}
.tarif:last-child{border-bottom:0}
.tarif:hover{background:#fff7f8}
.tarif-nom{font-weight:700;font-size:.9375rem}
.tarif-nom small{display:block;color:var(--gris);font-weight:500;font-size:.8125rem;margin-top:2px}
.tarif-prix{font-weight:900;font-size:1.375rem;letter-spacing:-.03em;color:var(--rose-fonce);white-space:nowrap}
.tarif-prix small{font-size:.8125rem;font-weight:600;color:var(--gris)}
.note{color:var(--gris);font-size:.8125rem;margin-top:18px;line-height:1.6}

/* ── Bloc Grooms ─────────────────────────────────────────────── */
.bloc-sombre{position:relative;background:var(--nuit);border-radius:30px;padding:64px 44px;
  overflow:hidden;color:#fff;isolation:isolate}
.bloc-sombre::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(139,92,246,.4),transparent 66%);
  top:-42%;right:-14%;filter:blur(58px);z-index:-1}
.bloc-sombre::after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(244,63,94,.42),transparent 66%);
  bottom:-42%;left:-10%;filter:blur(58px);z-index:-1}
.bloc-sombre h2{color:#fff}
.bloc-sombre p{color:rgba(255,255,255,.68);font-size:1.0625rem;line-height:1.72;max-width:60ch;margin-top:18px}
.liste-atouts{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:26px;padding:0;list-style:none}
.liste-atouts li{display:inline-flex;align-items:center;gap:9px;color:rgba(255,255,255,.8);font-size:.9375rem;font-weight:600}
.liste-atouts svg{color:var(--rose-vif);flex:none}

/* ── FAQ ─────────────────────────────────────────────────────── */
.faq{margin-top:48px;display:grid;gap:12px}
.question{background:var(--blanc);border:1px solid var(--trait);border-radius:16px;overflow:hidden;transition:border-color .25s,box-shadow .25s}
.question[open]{border-color:#fecdd3;box-shadow:0 10px 30px -14px rgba(244,63,94,.35)}
.question summary{padding:20px 24px;font-weight:700;font-size:1rem;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;gap:16px;list-style:none}
.question summary::-webkit-details-marker{display:none}
.question summary::after{content:"";width:10px;height:10px;flex:none;border-right:2px solid var(--gris);
  border-bottom:2px solid var(--gris);transform:rotate(45deg) translateY(-3px);transition:transform .3s}
.question[open] summary::after{transform:rotate(-135deg) translateY(-3px);border-color:var(--rose-fonce)}
.question-corps{padding:0 24px 22px;color:var(--gris);line-height:1.72;font-size:.9375rem}
.question-corps a{color:var(--rose-fonce);font-weight:600;text-decoration:underline}

/* ── Appel final ─────────────────────────────────────────────── */
.final{position:relative;background:var(--nuit);color:#fff;padding:110px 0;overflow:hidden;text-align:center;isolation:isolate}
.final .aurore{opacity:.7}
.final h2{font-size:clamp(2rem,4.6vw,3.2rem);font-weight:900;letter-spacing:-.04em}
.final p{color:rgba(255,255,255,.65);font-size:1.0625rem;margin-top:18px;max-width:46ch;margin-left:auto;margin-right:auto}
.final .actions{justify-content:center}

/* ── Pied ────────────────────────────────────────────────────── */
.pied{background:var(--nuit-2);color:rgba(255,255,255,.55);padding:64px 0 30px;font-size:.9375rem}
.pied-grille{display:grid;grid-template-columns:1fr;gap:38px}
.pied .marque{color:#fff;margin-bottom:14px}
.pied-a-propos{max-width:34ch;line-height:1.7}
.pied h3{color:#fff;font-size:.75rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin-bottom:16px}
.pied ul{list-style:none;margin:0;padding:0}
.pied li+li{margin-top:11px}
.pied a{transition:color .2s}
.pied a:hover{color:#fff}
.pied-bas{margin-top:48px;padding-top:26px;border-top:1px solid rgba(255,255,255,.09);
  display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:space-between;font-size:.8125rem;color:rgba(255,255,255,.4)}
.pied-legal{display:flex;flex-wrap:wrap;gap:6px 20px}

/* ── Apparitions au defilement ───────────────────────────────── */
.apparait{opacity:0;transform:translateY(26px);transition:opacity .75s cubic-bezier(.2,.7,.3,1),transform .75s cubic-bezier(.2,.7,.3,1)}
.apparait.vu{opacity:1;transform:none}
.apparait[data-delai="1"]{transition-delay:.1s}
.apparait[data-delai="2"]{transition-delay:.2s}
.apparait[data-delai="3"]{transition-delay:.3s}

/* ── Points de rupture ───────────────────────────────────────── */
@media (max-width:559px){
  .puce{display:none}
  .scene{min-height:auto}
}
@media (min-width:640px){
  .chiffres{grid-template-columns:repeat(4,1fr)}
  .atouts{grid-template-columns:1fr 1fr}
}
@media (min-width:900px){
  .nav{display:flex}
  .burger{display:none}
  .heros{padding:180px 0 130px}
  .heros-grille{grid-template-columns:1.06fr .94fr;gap:70px}
  .etapes{grid-template-columns:repeat(3,1fr);gap:30px}
  .trait-etapes{display:block}
  .atouts{grid-template-columns:repeat(4,1fr)}
  .pied-grille{grid-template-columns:1.6fr 1fr 1fr 1fr;gap:48px}
  .bloc-sombre{padding:76px 64px}
}

/* ── Mouvement reduit : on respecte le reglage systeme ───────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .apparait{opacity:1;transform:none}
  .mission{opacity:1;transform:none}
}

/* ── En-tete des pages interieures ───────────────────────────── */
.section-tete{
  position:relative;background:var(--nuit);color:#fff;
  padding:150px 0 84px;overflow:hidden;isolation:isolate;text-align:center;
}
.section-tete .aurore{opacity:.9}
.fil{display:inline-flex;align-items:center;gap:10px;font-size:.8125rem;font-weight:600;
  color:rgba(255,255,255,.5);margin-bottom:20px}
.fil a{color:rgba(255,255,255,.72);transition:color .2s}
.fil a:hover{color:#fff}
.titre-page{font-size:clamp(2.2rem,5.4vw,3.6rem);font-weight:900;letter-spacing:-.045em;color:#fff}
.intro-page{color:rgba(255,255,255,.66);font-size:1.0625rem;line-height:1.72;
  max-width:60ch;margin:20px auto 0}

/* ── Categories de la FAQ ────────────────────────────────────── */
.titre-categorie{
  font-size:1.375rem;font-weight:900;letter-spacing:-.03em;
  margin:56px 0 18px;padding-bottom:12px;border-bottom:1px solid var(--trait);
}
.titre-categorie:first-of-type{margin-top:0}

/* ── Liste de pieces a fournir ───────────────────────────────── */
.liste-pieces{list-style:none;margin:34px 0 0;padding:0;display:grid;gap:14px}
.liste-pieces li{display:flex;align-items:flex-start;gap:12px;font-size:.9375rem;
  line-height:1.6;color:var(--encre)}
.liste-pieces svg{color:var(--rose-fonce);flex:none;margin-top:3px}

@media (min-width:900px){
  .section-tete{padding:186px 0 100px}
}

/* ══════════════════════════════════════════════════════════════
   HERO PLEIN CADRE — grille cinétique + titre qui monte mot à mot
   Ajouté sans toucher aux règles existantes : tous les sélecteurs
   sont préfixés « hv- ». L'ancien .heros reste en place, il sert
   encore aux autres pages via .section-tete.
   ══════════════════════════════════════════════════════════════ */
.hv{position:relative;background:var(--nuit)}

.hv-cadre{
  position:relative;
  /* 100svh, pas 100vh : sur iOS la barre d'adresse rétractable fait
     mentir vh, et le bas du contenu passait sous le navigateur. */
  height:100svh;min-height:600px;max-height:1100px;
  /* Bord a bord. Un cadre arrondi pose sur une gouttiere laissait
     apparaitre --fond, qui est presque blanc : un lisere clair courait
     en haut et sur les cotes. Le rendre sombre aurait rendu l'arrondi
     invisible, autant supprimer les deux. La section suivante est du
     meme noir, la jonction ne se voit pas. */
  width:100%;overflow:hidden;
  background:var(--nuit);color:#fff;isolation:isolate;
}

/* Aurores de marque, sous la grille : la grille est peinte en
   transparence, elles transparaissent donc au travers. */
.hv-cadre .aurore{opacity:.55}

.hv-toile{position:absolute;inset:0;z-index:0;display:block;pointer-events:none}

.hv-bruit{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  opacity:.45;mix-blend-mode:overlay;
  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)' opacity='.55'/%3E%3C/svg%3E");
}
.hv-voile{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(to bottom,rgba(10,10,18,.5) 0%,transparent 32%,rgba(10,10,18,.78) 100%);
}

/* ── Contenu, centré dans le cadre ──
   pointer-events:none sur le conteneur pour que la grille reste sensible
   au curseur partout, sauf sur les liens. */
.hv-contenu{
  position:absolute;inset:0;z-index:10;
  display:flex;align-items:center;justify-content:center;
  padding:96px 20px 40px;pointer-events:none;
}
@media(min-width:768px){ .hv-contenu{padding:110px 34px 48px} }
.hv-contenu a,.hv-contenu button{pointer-events:auto}

.hv-centre{
  width:100%;max-width:980px;margin:0 auto;text-align:center;
  display:flex;flex-direction:column;align-items:center;
}

.hv-sur-titre{
  font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(242,241,232,.5);margin:0 0 20px;
  animation:hvMonte .7s cubic-bezier(.16,1,.3,1) backwards;
}
@media(min-width:768px){ .hv-sur-titre{font-size:.875rem} }

/* ── Machine à écrire ──
   Le composant d'origine anime la largeur d'un conteneur qui masque la
   phrase : le texte est écrit en entier dans le DOM, il est seulement
   dévoilé. C'est reproduit ici à l'identique, en CSS, ce qui garde deux
   propriétés qui comptent sur une page vitrine : la phrase reste lisible
   par un moteur de recherche, et rien ne dépend d'un script.

   Deux lignes plutôt qu'une : « white-space:nowrap » est indispensable
   pour que le masque révèle mot à mot, mais une phrase de 45 caractères
   sur une seule ligne déborderait sous 900 px. La seconde ligne démarre
   quand la première a fini. */
.hv-machine{
  margin:0;color:#F2F1E8;font-weight:800;
  letter-spacing:-.045em;line-height:1.08;
  font-size:clamp(1.75rem,5.2vw,4.1rem);
}
.hv-frappe{
  display:block;white-space:nowrap;overflow:hidden;
  width:0;max-width:100%;
  margin-left:auto;margin-right:auto;
  animation:hvEcrit 1.15s cubic-bezier(.22,.61,.36,1) forwards;
}
.hv-frappe-1{animation-delay:.35s}
.hv-frappe-2{animation-delay:1.45s}
@keyframes hvEcrit{from{width:0}to{width:100%}}

.hv-machine em{font-style:normal;color:var(--rose-vif)}

/* Le curseur suit le bord du masque : il est dans le flux, en fin de
   ligne, donc il avance avec le texte révélé. */
.hv-curseur{
  display:inline-block;vertical-align:-.08em;
  width:.055em;min-width:3px;height:.86em;margin-left:.1em;
  background:var(--rose);border-radius:2px;
  animation:hvClignote .8s steps(1) infinite;
}
.hv-frappe-1 .hv-curseur{animation:hvClignote .8s steps(1) infinite,hvEteint .01s 1.5s forwards}
@keyframes hvClignote{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes hvEteint{to{opacity:0;width:0;min-width:0;margin-left:0}}

.hv-accroche{
  font-size:.95rem;line-height:1.55;color:rgba(242,241,232,.66);
  max-width:52ch;margin:22px auto 0;
  animation:hvMonte .8s cubic-bezier(.16,1,.3,1) 2.5s backwards;
}
@media(min-width:768px){ .hv-accroche{font-size:1.0625rem} }

.hv-boutons{
  display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:30px;
  animation:hvMonte .8s cubic-bezier(.16,1,.3,1) 2.7s backwards;
}
.hv-bt{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:52px;padding:0 26px;border-radius:14px;
  font-size:.9375rem;font-weight:700;letter-spacing:-.01em;white-space:nowrap;
  border:1px solid transparent;
  transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .25s,background .25s;
}
.hv-bt:hover{transform:translateY(-2px)}
.hv-bt-rose{
  background:linear-gradient(135deg,var(--rose-vif),var(--rose-fonce));color:#fff;
  box-shadow:0 16px 34px -14px rgba(244,63,94,.95);
}
.hv-bt-rose:hover{box-shadow:0 22px 44px -14px rgba(244,63,94,1)}
.hv-bt-clair{
  background:rgba(242,241,232,.07);color:#F2F1E8;
  border-color:rgba(242,241,232,.22);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.hv-bt-clair:hover{background:rgba(242,241,232,.14)}

.hv-preuves{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:26px;
  animation:hvMonte .8s cubic-bezier(.16,1,.3,1) 2.9s backwards;
}
.hv-preuves span{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.72rem;font-weight:600;color:rgba(242,241,232,.78);
  border:1px solid rgba(242,241,232,.18);border-radius:999px;padding:5px 12px;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.hv-preuves svg{color:var(--rose-vif);flex:none}

/* Rien ne se dévoile progressivement quand le mouvement est refusé :
   la phrase est là, entière, dès le premier rendu. */
@media(prefers-reduced-motion:reduce){
  .hv-sur-titre,.hv-accroche,.hv-boutons,.hv-preuves{animation:none}
  .hv-frappe{animation:none;width:100%}
  .hv-curseur{display:none}
}

/* ── Section carte App Store, sous le hero ──
   L'ancienne mise en page posait cette carte à droite du titre. Le
   nouveau hero occupe toute la hauteur : la carte descend d'un cran
   plutôt que d'être supprimée, elle reste le point de conversion. */
.hv-app{position:relative;background:var(--nuit);color:#fff;overflow:hidden;isolation:isolate;padding:90px 0 100px}
.hv-app .aurore{opacity:.5}
.hv-app-grille{display:grid;grid-template-columns:1fr;gap:56px;align-items:center}
@media(min-width:900px){ .hv-app-grille{grid-template-columns:1fr 1fr;gap:64px} }
.hv-app h2{font-size:clamp(1.9rem,4vw,2.9rem);font-weight:900;letter-spacing:-.04em;margin:18px 0 0}
.hv-app p{font-size:1.0625rem;color:rgba(255,255,255,.64);line-height:1.7;margin-top:18px;max-width:46ch}

/* ══════════════════════════════════════════════════════════════
   BARRE FLOTTANTE
   Portage du composant « FloatingNav » : une pastille posée en haut
   au centre, qui disparaît vers le haut quand on descend et revient
   dès qu'on remonte.

   Rien n'est touché dans le HTML : les cinq gabarits partagent le même
   en-tête (.entete > .enveloppe.entete-inner), et vitrine.js est chargé
   partout. La barre change donc d'allure sur tout le site d'un coup.

   Le composant d'origine bascule du sombre au clair selon le thème. Ici
   la pastille reste sombre en permanence : elle passe d'un hero noir à
   des sections claires en un seul écran de défilement, et un fond qui
   s'inverse en cours de route attire l'œil sur la barre plutôt que sur
   la page.
   ══════════════════════════════════════════════════════════════ */
.entete{
  position:fixed;top:12px;left:0;right:0;z-index:100;
  display:flex;justify-content:center;
  padding:0;border-bottom:0;background:none;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  /* Le conteneur traverse toute la largeur : sans cela il masquerait
     les clics de part et d'autre de la pastille. */
  pointer-events:none;
  transition:transform .42s cubic-bezier(.16,1,.3,1),opacity .28s ease;
}
@media(min-width:768px){ .entete{top:16px} }

.entete .entete-inner{
  pointer-events:auto;
  width:auto;max-width:calc(100vw - 24px);
  gap:10px;padding:7px 7px 7px 16px;
  border-radius:999px;
  background:rgba(10,10,18,.68);
  border:1px solid rgba(255,255,255,.13);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  box-shadow:0 14px 44px -18px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.08) inset;
  transition:background .3s,border-color .3s;
}
@media(min-width:900px){ .entete .entete-inner{gap:16px;padding:7px 7px 7px 20px} }

/* .reduite servait à faire apparaître un bandeau blanc au défilement.
   La pastille est déjà opaque et détachée : l'état n'a plus de fond à
   changer, on neutralise ce qu'il posait pour que le texte reste clair
   au-dessus des sections blanches. */
.entete.reduite{background:none;box-shadow:none;border-bottom-color:transparent;padding:0}
.entete.reduite .entete-inner{background:rgba(10,10,18,.82);border-color:rgba(255,255,255,.16)}
.entete.reduite .marque{color:#fff}
.entete.reduite .nav a{color:rgba(255,255,255,.72)}
.entete.reduite .nav a:hover{color:#fff;background:rgba(255,255,255,.1)}
.entete.reduite .burger{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:#fff}
.entete.reduite .bouton-clair{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.2)}

.entete .marque{font-size:1.15rem}
.entete .marque-pastille{width:30px;height:30px;border-radius:9px}
.entete .nav a{padding:8px 13px;border-radius:999px;font-size:.875rem}
.entete .bouton{padding:10px 18px;border-radius:999px;font-size:.875rem}
.entete .burger{width:38px;height:38px;border-radius:999px}

@media(prefers-reduced-motion:reduce){ .entete{transition:none} }

/* ── Grille tarifaire, dans la carte prix ── */
.ss-tarifs{width:100%;display:flex;flex-direction:column;gap:7px}
.ss-tarifs div{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:#fff;border:1px solid var(--trait);border-radius:13px;padding:12px 15px;
}
.ss-tarifs span{font-size:.875rem;font-weight:700;color:var(--encre);display:flex;flex-direction:column}
.ss-tarifs small{font-size:.72rem;font-weight:500;color:var(--gris)}
.ss-tarifs b{font-size:1.0625rem;font-weight:900;color:var(--rose-fonce)}

/* ══════════════════════════════════════════════════════════════
   CADRE « EVERVAULT » + CARTE PRIX EN 3D
   Deux composants montés l'un dans l'autre sur le volet des tarifs :
   le cadre à quatre croix qui se révèle au survol, et la carte qui
   bascule en perspective sous le curseur.

   Les deux sont pilotés par le même mouvement de souris, donc par un
   seul écouteur : le cadre déplace le centre de son masque, la carte
   calcule ses deux rotations. Rien n'est fait en JavaScript qui puisse
   l'être en CSS — les positions passent par des variables, c'est le
   moteur de style qui peint.
   ══════════════════════════════════════════════════════════════ */
.ev{
  position:relative;width:100%;max-width:400px;
  padding:22px;border:1px solid rgba(20,20,40,.14);
  --ev-x:50%;--ev-y:50%;
  perspective:1100px;   /* c'est lui qui donne sa profondeur à la carte */
}

/* Les quatre croix d'angle, posées à cheval sur le bord. Deux traits en
   dégradé plutôt qu'un caractère « + » : une police peut manquer, pas
   une bordure. */
.ev-coin{position:absolute;width:13px;height:13px;pointer-events:none;z-index:4}
.ev-coin::before,.ev-coin::after{
  content:"";position:absolute;background:var(--rose);border-radius:2px;
}
.ev-coin::before{left:50%;top:0;width:1.5px;height:100%;transform:translateX(-50%)}
.ev-coin::after{top:50%;left:0;height:1.5px;width:100%;transform:translateY(-50%)}
.ev-hg{top:-7px;left:-7px}
.ev-hd{top:-7px;right:-7px}
.ev-bg{bottom:-7px;left:-7px}
.ev-bd{bottom:-7px;right:-7px}

/* Le voile révélé au survol : un dégradé de marque, découpé par un
   masque radial centré sur le curseur. */
.ev-fond,.ev-texte{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  opacity:0;transition:opacity .35s ease;
  -webkit-mask-image:radial-gradient(190px circle at var(--ev-x) var(--ev-y),#000 12%,transparent 72%);
          mask-image:radial-gradient(190px circle at var(--ev-x) var(--ev-y),#000 12%,transparent 72%);
}
.ev-fond{background:linear-gradient(135deg,var(--rose),var(--violet))}
.ev-texte{
  z-index:2;overflow:hidden;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10px;line-height:11px;letter-spacing:.05em;
  color:rgba(255,255,255,.75);word-break:break-all;white-space:pre-wrap;
  padding:6px;
}
.ev:hover .ev-fond{opacity:.9}
.ev:hover .ev-texte{opacity:1}

/* ── La carte, au-dessus du voile ── */
.ss-prix-carte{
  position:relative;z-index:3;
  background:#fff;border:1px solid var(--trait);border-radius:18px;
  padding:22px 20px;
  box-shadow:0 24px 50px -26px rgba(15,15,30,.45);
  transform-style:preserve-3d;
  transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s;
  will-change:transform;
}
/* Pendant le mouvement la transition est coupée : sinon la carte traîne
   d'un quart de seconde derrière le curseur au lieu de le suivre. Elle
   revient pour le retour à plat, qui doit être doux. */
.ss-prix-carte.ev-suit{transition:box-shadow .25s}
.ev:hover .ss-prix-carte{box-shadow:0 34px 70px -26px rgba(15,15,30,.6)}

.ss-prix-chapeau{
  display:block;font-size:.72rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--rose);
}
.ss-prix-gros{
  display:block;font-size:2.6rem;font-weight:900;letter-spacing:-.05em;
  color:var(--encre);line-height:1;margin-top:8px;
}
.ss-prix-sous{display:block;font-size:.8125rem;color:var(--gris);margin-top:7px}
.ss-prix-carte .ss-tarifs{margin-top:18px;max-width:none}
.ss-prix-carte .ss-tarifs div{background:var(--gray50,#f8fafc);background:#f8fafc}
.ss-prix-bt{
  display:inline-block;margin-top:18px;font-size:.875rem;font-weight:800;color:var(--rose);
}
.ss-prix-bt:hover{color:var(--rose-fonce)}

/* Les enfants marqués data-z sont soulevés au-dessus du plan de la carte.
   C'est ce qui donne l'épaisseur : sans eux, la carte bascule mais reste
   une image plate. */
.ss-prix-carte [data-z]{transform-style:preserve-3d}

/* Sous 900 px il n'y a ni survol ni curseur : la carte est simplement
   posée, le voile ne se déclenche jamais. */
.ss-vue-mobile{height:auto;min-height:0;padding:20px}
@media(max-width:899px){
  .ev{max-width:none;perspective:none}
  .ss-prix-carte{transform:none !important}
}

@media(prefers-reduced-motion:reduce){
  .ss-prix-carte{transition:none;transform:none !important}
  .ev-fond,.ev-texte{transition:none}
}

/* ══════════════════════════════════════════════════════════════
   FAQ — FAISCEAUX QUI TOMBENT ET ÉCLATENT
   Portage du composant « BackgroundBeamsWithCollision ».

   L'original détecte la collision en JavaScript : à chaque image il lit
   la position de chaque faisceau et celle du sol, compare, puis monte un
   composant d'explosion. C'est une boucle de mesure permanente pour un
   décor. Ici la collision est connue d'avance — un faisceau tombe à
   vitesse constante sur une distance connue, donc l'instant de l'impact
   se déduit de la durée. L'éclat partage l'animation du faisceau et ne
   s'allume que sur les derniers pour cent du cycle. Aucun JavaScript,
   aucune lecture de position, et le résultat est identique.
   ══════════════════════════════════════════════════════════════ */
.bb{
  position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,var(--nuit-2),var(--nuit));
  color:#fff;padding:110px 0 120px;min-height:100svh;
  display:flex;align-items:center;
}

.bb-faisceaux{position:absolute;inset:0;z-index:0;pointer-events:none}
.bb-piste{position:absolute;top:0;bottom:0;left:var(--x);width:2px}

/* Le faisceau. Le dégradé s'éteint vers le haut : c'est ce qui lui donne
   une traîne plutôt qu'un trait qui glisse. */
.bb-piste i{
  position:absolute;top:0;left:0;width:2px;height:130px;border-radius:2px;
  background:linear-gradient(to top,var(--rose),rgba(139,92,246,.55),transparent);
  animation:bbChute var(--t) linear var(--d) infinite;
}
@keyframes bbChute{
  from{transform:translateY(-160px);opacity:0}
  6%{opacity:1}
  92%{opacity:1}
  to{transform:translateY(100svh);opacity:1}
}

/* L'éclat, posé au sol, sur la même horloge que son faisceau. */
.bb-piste b{
  position:absolute;bottom:0;left:50%;width:70px;height:70px;margin-left:-35px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(244,63,94,.75),rgba(139,92,246,.28) 42%,transparent 70%);
  opacity:0;transform:scale(.3);
  animation:bbEclat var(--t) linear var(--d) infinite;
}
@keyframes bbEclat{
  0%,90%{opacity:0;transform:scale(.3)}
  94%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(1.8)}
}

/* Le sol : c'est lui que les faisceaux viennent frapper. */
.bb-sol{
  position:absolute;left:0;right:0;bottom:0;height:1px;z-index:1;
  background:linear-gradient(to right,transparent,rgba(244,63,94,.5),rgba(139,92,246,.5),transparent);
}

.bb-contenu{position:relative;z-index:2;width:100%}

.bb-titre{
  text-align:center;font-weight:900;letter-spacing:-.045em;line-height:1.06;
  font-size:clamp(1.9rem,5.4vw,4rem);margin:0 auto;max-width:16ch;
}
/* Le texte en dégradé. L'original superpose deux copies pour poser une
   ombre portée sur un texte détouré — le fond d'un bas-clip ne peut pas
   recevoir de text-shadow. Une drop-shadow sur le conteneur fait la même
   chose avec un seul exemplaire. */
.bb-degrade{
  display:inline-block;
  background:linear-gradient(100deg,var(--violet),var(--rose-vif) 55%,var(--rose));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 10px rgba(244,63,94,.35));
}

.bb-faq{max-width:760px;margin:52px auto 0;display:flex;flex-direction:column;gap:10px}
.bb-question{
  border:1px solid rgba(255,255,255,.13);border-radius:16px;
  background:rgba(255,255,255,.045);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:border-color .25s,background .25s;
}
.bb-question[open]{border-color:rgba(244,63,94,.45);background:rgba(244,63,94,.07)}
.bb-question summary{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 20px;cursor:pointer;list-style:none;
  font-size:1rem;font-weight:700;letter-spacing:-.01em;color:#fff;
}
.bb-question summary::-webkit-details-marker{display:none}
.bb-chevron{
  flex:none;width:11px;height:11px;border-right:2px solid var(--rose-vif);
  border-bottom:2px solid var(--rose-vif);transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .25s;
}
.bb-question[open] .bb-chevron{transform:rotate(-135deg) translate(-2px,-2px)}
.bb-reponse{
  padding:0 20px 20px;font-size:.9375rem;line-height:1.7;color:rgba(255,255,255,.66);
}
.bb-pied{text-align:center;margin-top:34px}

/* Le décor s'arrête net quand le mouvement est refusé : ce sont huit
   animations en boucle permanente, c'est exactement ce que le réglage
   cherche à éviter. */
@media(prefers-reduced-motion:reduce){
  .bb-piste i,.bb-piste b{animation:none;opacity:.25}
  .bb-piste b{display:none}
}

/* ══════════════════════════════════════════════════════════════
   PORTABLE QUI S'OUVRE AU DÉFILEMENT
   Portage du composant « MacbookScroll ».

   Le portable est dessiné en CSS — capot, écran, clavier, pavé — plutôt
   qu'importé en image : il doit s'ouvrir, donc le capot et la base sont
   deux plans distincts qui pivotent l'un par rapport à l'autre.

   Une seule variable pilote toute la scène : --p, l'avancée du
   défilement dans la section, de 0 à 1. Le JavaScript ne fait que la
   poser ; ouverture, échelle et fondu du titre en sont tous déduits en
   CSS. C'est ce qui permet de n'écrire qu'une propriété par image au
   lieu d'en recalculer six.
   ══════════════════════════════════════════════════════════════ */
.mb{
  --p:0;
  position:relative;background:var(--fond);
  /* La hauteur en trop est la course de défilement : c'est elle qui
     donne le temps de l'ouverture. */
  height:230svh;
}
.mb-scene{
  position:sticky;top:0;height:100svh;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:80px 20px 40px;
}

.mb-titre{
  text-align:center;font-size:clamp(1.4rem,3.4vw,2.4rem);font-weight:900;
  letter-spacing:-.04em;line-height:1.15;color:var(--encre);
  margin:0 0 26px;
  /* Le titre s'efface dès que le portable commence à s'ouvrir : les deux
     se disputeraient la hauteur disponible. */
  opacity:calc(1 - var(--p) * 2.4);
  transform:translateY(calc(var(--p) * -30px));
}

.mb-mac{
  position:relative;width:min(680px,86vw);
  transform:scale(calc(.86 + var(--p) * .3));
  transform-origin:center 62%;
}

/* ── Capot ──
   L'axe de rotation est le bas du capot, c'est-à-dire la charnière. La
   perspective est posée ici et non sur le parent : un seul élément
   pivote, inutile de mettre toute la scène en 3D. */
.mb-capot{
  transform:perspective(1100px) rotateX(calc(-82deg + var(--p) * 82deg));
  transform-origin:bottom center;
}
.mb-ecran{
  position:relative;aspect-ratio:16/10.4;border-radius:14px 14px 4px 4px;
  background:linear-gradient(180deg,#2a2a33,#15151c);
  padding:9px 9px 16px;
  box-shadow:0 -14px 40px -18px rgba(15,15,30,.5);
}
.mb-camera{
  position:absolute;top:4px;left:50%;width:5px;height:5px;margin-left:-2.5px;
  border-radius:50%;background:#3d3d47;
}
.mb-appli{
  height:100%;border-radius:7px;overflow:hidden;
  background:linear-gradient(160deg,#0f1420,var(--nuit));
  display:flex;flex-direction:column;
  /* Tant que le capot est presque fermé, l'écran serait vu par la
     tranche : on ne l'allume qu'à mi-ouverture. */
  opacity:calc(var(--p) * 2.2 - .5);
}
.mb-barre{display:flex;gap:5px;padding:9px 11px;border-bottom:1px solid rgba(255,255,255,.07)}
.mb-barre span{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.16)}
.mb-barre span:first-child{background:var(--rose)}
.mb-corps{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:14px 16px}
.mb-col{display:flex;flex-direction:column;gap:8px;min-width:0}
.mb-etiq{
  display:inline-block;align-self:flex-start;font-size:9px;font-weight:700;
  color:rgba(255,255,255,.7);background:rgba(255,255,255,.09);
  border-radius:999px;padding:3px 8px;white-space:nowrap;
}
.mb-etiq-vert{color:#6ee7b7;background:rgba(16,185,129,.16)}
.mb-prix{font-size:clamp(20px,3.6vw,34px);font-weight:900;color:#fff;letter-spacing:-.04em;line-height:1;margin-top:2px}
.mb-sous{font-size:10px;color:rgba(255,255,255,.5)}
.mb-slot{
  font-size:10px;font-weight:600;color:rgba(255,255,255,.62);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  border-radius:9px;padding:7px 9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mb-slot-on{
  background:linear-gradient(135deg,var(--rose-vif),var(--rose-fonce));
  border-color:transparent;color:#fff;font-weight:800;
}
.mb-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.mb-photos span{display:block;aspect-ratio:1;border-radius:5px;background:rgba(255,255,255,.13)}
.mb-photos span:nth-child(2n){background:rgba(255,255,255,.08)}

/* ── Base ── */
.mb-base{
  position:relative;height:clamp(16px,2.6vw,22px);
  border-radius:3px 3px 9px 9px;
  background:linear-gradient(180deg,#d4d4dc,#a8a8b4);
  box-shadow:0 14px 30px -12px rgba(15,15,30,.55);
}
.mb-clavier{
  position:absolute;left:9%;right:9%;top:22%;height:34%;
  border-radius:3px;background:rgba(30,30,40,.22);
}
.mb-pave{
  position:absolute;left:38%;right:38%;bottom:9%;height:22%;
  border-radius:2px;background:rgba(30,30,40,.12);
}
.mb-pied{
  display:block;width:34%;height:5px;margin:0 auto;
  border-radius:0 0 8px 8px;background:linear-gradient(180deg,#b9b9c4,#8f8f9c);
}

.mb-etapes{
  display:grid;grid-template-columns:1fr;gap:12px;margin-top:34px;
  width:min(760px,92vw);
  opacity:calc(var(--p) * 2.4 - 1.1);
}
@media(min-width:760px){ .mb-etapes{grid-template-columns:repeat(3,1fr);gap:22px} }
.mb-etapes div{display:flex;gap:10px;align-items:flex-start}
.mb-etapes b{font-size:.75rem;font-weight:800;letter-spacing:.1em;color:var(--rose)}
.mb-etapes span{font-size:.8125rem;line-height:1.5;color:var(--gris)}

/* Sans mouvement, le portable est simplement ouvert et posé. */
@media(prefers-reduced-motion:reduce){
  .mb{height:auto;padding:90px 0}
  .mb-scene{position:static;height:auto;padding:0 20px}
  .mb-capot{transform:none}
  .mb-mac{transform:none}
  .mb-titre,.mb-appli,.mb-etapes{opacity:1;transform:none}
}

/* ══════════════════════════════════════════════════════════════
   SECTION TARIFS
   ══════════════════════════════════════════════════════════════ */
.px{background:var(--fond);padding:100px 0}
.px-grille{display:grid;grid-template-columns:1fr;gap:48px;align-items:center}
@media(min-width:900px){ .px-grille{grid-template-columns:1fr 1fr;gap:64px} }
.px-texte .intro-section{margin-left:0;margin-right:0;text-align:left}
.px-liens{margin-top:28px}
.px-scene{display:flex;justify-content:center}

/* ══════════════════════════════════════════════════════════════
   CARROUSEL D'OPTIONS
   Portage du composant « AppleCardsCarousel ».

   Le défilement est confié au navigateur : overflow-x et scroll-snap
   font le travail que le composant d'origine refait à la main en
   suivant le doigt et en calculant des positions. On y gagne l'inertie
   native, le trackpad, la molette horizontale, le clavier, et le lecteur
   d'écran qui sait qu'il y a une zone défilante. Les flèches ne font
   qu'appeler scrollBy.
   ══════════════════════════════════════════════════════════════ */
.ac{background:var(--fond);padding:20px 0 100px;overflow:hidden}
.ac-tete{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:30px}
.ac-tete .titre-section{text-align:left}
.ac-fleches{display:none;gap:8px;flex:none}
@media(min-width:760px){ .ac-fleches{display:flex} }
.ac-fleche{
  width:42px;height:42px;border-radius:999px;cursor:pointer;
  display:grid;place-items:center;
  background:var(--blanc);border:1px solid var(--trait);color:var(--encre);
  transition:background .2s,transform .2s,opacity .2s;
}
.ac-fleche:hover{background:var(--gray100,#f1f5f9);transform:translateY(-1px)}
.ac-fleche[disabled]{opacity:.35;cursor:default;transform:none}

.ac-piste{
  display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:6px calc((100vw - var(--max)) / 2) 24px;
  scrollbar-width:none;-ms-overflow-style:none;
}
.ac-piste::-webkit-scrollbar{display:none}
@media(max-width:1228px){ .ac-piste{padding-left:24px;padding-right:24px} }
.ac-piste:focus-visible{outline:2px solid var(--rose);outline-offset:4px;border-radius:8px}

.ac-item{flex:0 0 auto;scroll-snap-align:start}
.ac-carte{
  position:relative;display:flex;flex-direction:column;justify-content:flex-start;
  width:250px;height:340px;padding:22px;cursor:pointer;text-align:left;
  border:0;border-radius:24px;overflow:hidden;color:#fff;
  transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s;
  box-shadow:0 20px 44px -24px rgba(15,15,30,.5);
}
@media(min-width:760px){ .ac-carte{width:300px;height:420px;padding:26px} }
.ac-carte:hover{transform:translateY(-6px);box-shadow:0 32px 60px -24px rgba(15,15,30,.6)}
/* La photo remplit la carte ; le dégradé de marque reste dessous et
   ressort tant qu'aucune image n'est en place. */
.ac-photo{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;
  transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.ac-carte:hover .ac-photo{transform:scale(1.06)}
/* Voile de lecture : sans lui, un titre blanc sur une photo claire
   devient illisible, et c'est justement le cas d'une photo de logement
   propre et lumineuse. Sombre en haut pour la catégorie et le titre,
   sombre en bas pour le pictogramme. */
.ac-carte::after{
  content:"";position:absolute;inset:0;z-index:1;
  /* Ces photos sont des intérieurs clairs et surexposés : sans un voile
     franc en haut, le titre blanc s'y noie. */
  background:linear-gradient(180deg,rgba(10,10,18,.66) 0%,rgba(10,10,18,.14) 44%,rgba(10,10,18,.46) 100%);
  pointer-events:none;
}
.ac-cat{position:relative;z-index:2;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;opacity:.85}
.ac-titre{position:relative;z-index:2;font-size:1.45rem;font-weight:900;letter-spacing:-.035em;line-height:1.1;margin-top:8px;max-width:9ch}
@media(min-width:760px){ .ac-titre{font-size:1.75rem} }
.ac-icone{display:none}

.ac-c1{background:linear-gradient(150deg,#fb7185,#e11d48)}
.ac-c2{background:linear-gradient(150deg,#1e2f4d,#0a0a12)}
.ac-c3{background:linear-gradient(150deg,#8b5cf6,#6d28d9)}
.ac-c4{background:linear-gradient(150deg,#fbbf24,#e11d48)}
.ac-c5{background:linear-gradient(150deg,#12121d,#2b1020)}

.ac-pied{text-align:center;margin-top:8px}
/* Le contenu de la fiche vit dans la page, masqué : il est recopié dans
   la boîte de dialogue à l'ouverture. L'écrire ici plutôt que dans un
   objet JavaScript le garde lisible par un moteur de recherche. */
.ac-detail{display:none}

/* ── Fiche détaillée ── */
.ac-modale{
  width:min(620px,92vw);max-height:86svh;padding:0;border:0;border-radius:26px;
  background:var(--blanc);color:var(--encre);overflow:auto;
  box-shadow:0 50px 100px -30px rgba(15,15,30,.6);
}
.ac-modale::backdrop{background:rgba(10,10,18,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.ac-modale-corps{padding:38px 32px 34px}
.ac-fermer{
  position:sticky;top:14px;float:right;margin:14px 14px 0 0;z-index:3;
  width:36px;height:36px;border-radius:999px;cursor:pointer;
  display:grid;place-items:center;
  background:var(--gray100,#f1f5f9);border:1px solid var(--trait);color:var(--encre);
}
.ac-fermer:hover{background:var(--trait)}
.ac-d-cat{display:block;font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--rose)}
.ac-modale h3{font-size:clamp(1.4rem,3.4vw,2rem);font-weight:900;letter-spacing:-.04em;margin:10px 0 0}
.ac-modale p{font-size:1rem;line-height:1.7;color:var(--gris);margin-top:16px}
.ac-prix{
  display:flex;align-items:baseline;gap:10px;margin-top:16px;
  background:var(--gray50,#f8fafc);border:1px solid var(--trait);border-radius:14px;padding:14px 18px;
}
.ac-prix b{font-size:1.6rem;font-weight:900;color:var(--rose-fonce);letter-spacing:-.04em}
.ac-prix span{font-size:.875rem;font-weight:600;color:var(--gris)}
.ac-note{font-size:.8125rem !important;color:var(--gris-clair) !important;margin-top:18px !important}

@media(prefers-reduced-motion:reduce){
  .ac-carte{transition:none}
  .ac-piste{scroll-behavior:auto}
}

/* ══════════════════════════════════════════════════════════════
   ÉCRAN DU PORTABLE — version détaillée
   ══════════════════════════════════════════════════════════════ */
.mb-corps{
  flex:1;display:grid;grid-template-columns:26px 1.25fr 1fr;gap:12px;
  padding:12px 14px;min-height:0;
}
@media(min-width:760px){ .mb-corps{grid-template-columns:34px 1.25fr 1fr;gap:16px;padding:14px 18px} }

/* Colonne de navigation, réduite à des pastilles : à cette échelle un
   libellé serait illisible, une forme reconnaissable suffit. */
.mb-nav{display:flex;flex-direction:column;align-items:center;gap:7px;padding-top:2px}
.mb-nav span{width:16px;height:6px;border-radius:3px;background:rgba(255,255,255,.12)}
.mb-logo{width:16px !important;height:16px !important;border-radius:5px !important;background:var(--rose) !important}
.mb-nav-on{background:rgba(244,63,94,.55) !important}

.mb-central{display:flex;flex-direction:column;gap:7px;min-width:0}
.mb-ligne-tete{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.mb-logement{display:block;font-size:11px;font-weight:800;color:#fff;letter-spacing:-.02em}
.mb-adresse{display:block;font-size:9px;color:rgba(255,255,255,.45);margin-top:2px}

.mb-facture{
  border:1px solid rgba(255,255,255,.1);border-radius:9px;
  background:rgba(255,255,255,.04);padding:8px 10px;
  display:flex;flex-direction:column;gap:5px;
}
.mb-facture div{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.mb-facture span{font-size:9px;color:rgba(255,255,255,.55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mb-facture b{font-size:9.5px;font-weight:700;color:rgba(255,255,255,.85);flex:none}
.mb-total{border-top:1px solid rgba(255,255,255,.11);padding-top:6px;margin-top:1px}
.mb-total span{color:#fff;font-weight:700}
.mb-total b{font-size:13px;font-weight:900;color:var(--rose-vif)}

.mb-cote{display:flex;flex-direction:column;gap:8px;min-width:0}
.mb-groom{display:flex;align-items:center;gap:8px}
.mb-avatar{
  width:22px;height:22px;border-radius:50%;flex:none;
  background:linear-gradient(135deg,var(--rose-vif),var(--violet));
}
.mb-groom b{display:block;font-size:10px;font-weight:800;color:#fff}
.mb-note{display:block;font-size:8.5px;color:var(--ambre)}

.mb-suivi{display:flex;flex-direction:column;gap:5px}
.mb-fait{display:flex;align-items:center;gap:6px;font-size:9px;color:rgba(255,255,255,.6)}
.mb-fait i{
  width:6px;height:6px;border-radius:50%;flex:none;
  background:var(--emerald,#10b981);box-shadow:0 0 0 2px rgba(16,185,129,.18);
}
.mb-fait em{margin-left:auto;font-style:normal;color:rgba(255,255,255,.35);font-size:8.5px}

/* ══════════════════════════════════════════════════════════════
   BLOC DE FIN, désormais dans la FAQ
   ══════════════════════════════════════════════════════════════ */
.bb-final{
  max-width:760px;margin:70px auto 0;padding-top:52px;text-align:center;
  border-top:1px solid rgba(255,255,255,.11);
}
.bb-final h2{
  font-size:clamp(1.7rem,4.4vw,2.9rem);font-weight:900;letter-spacing:-.045em;
  line-height:1.1;margin:0;color:#fff;
}
.bb-final p{font-size:1.0625rem;color:rgba(255,255,255,.62);margin-top:14px}
.bb-final-actions{display:flex;justify-content:center;margin-top:26px}