/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   CALLUTOPIA — feuille de style du site public
   ───────────────────────────────────────────────────────────────────────────────────────────────
   Les couleurs sont CELLES DE LA PLATEFORME (src/app/globals.css du CRM), à l'identique : un
   prospect qui passe du site à son espace client ne doit pas changer de maison.

   DIRECTION ARRÊTÉE AVEC NOLAN LE 18/08 :
   · Fond BLANC PUR partout. Plus d'alternance blanc / blanc cassé — elle donnait l'impression que
     le site changeait de papier une section sur deux.
   · Le blanc est cassé par des HALOS vert et rose, et par des NOTES DE NOIR (cartes, chiffres,
     boutons). Le noir est un accent : plus aucune section entièrement noire, sauf l'image des
     marcheurs et le pied de page, gardés tels quels.
   · AUCUN TEXTE EN DÉGRADÉ vert-rose. Nolan : « cette couleur en écriture c'est horrible. » Les
     chiffres sont noirs, roses, verts ou violets — pleins, jamais fondus.
   · Aucun orange nulle part.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */

:root{
  --blanc:#FFFFFF;
  --bg:#FFFFFF;
  --surface:#FFFFFF;
  --surface-2:#F7F7F4;
  --border:#EAEAE4;
  --border-strong:#D9D9D2;
  --text:#18181B;
  --muted:#6B6B74;
  --subtle:#9E9EA8;
  --lime:#A8E635;
  --lime-dark:#7CB80F;      /* le vert LISIBLE en texte : #A8E635 sur blanc ne se lit pas */
  --magenta:#D946B8;
  --magenta-dark:#B32A93;   /* idem pour le rose en petit corps */
  --violet:#9B59D4;

  --ink:#0A0A0C;
  --on-ink:#FFFFFF;
  --on-ink-muted:#B8B8C2;
  --on-ink-line:#26262F;

  --r-sm:12px; --r:18px; --r-lg:26px; --r-pill:100px;
  --wrap:1180px;
  --ease:cubic-bezier(.22,.72,.24,1);
  --ombre:0 1px 2px rgba(24,24,27,.04), 0 12px 34px -20px rgba(24,24,27,.16);
  --ombre-forte:0 26px 60px -28px rgba(24,24,27,.28);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Outfit',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--blanc); color:var(--text);
  font-size:17px; line-height:1.65; font-weight:400;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
::selection{background:var(--lime);color:var(--text)}

/* ── Typographie ─────────────────────────────────────────────────────────────────────────────── */
h1,h2,h3,h4{font-weight:600;line-height:1.06;letter-spacing:-.03em;color:var(--text)}
h1{font-size:clamp(2.6rem,6.2vw,4.7rem)}
h2{font-size:clamp(2rem,4.5vw,3.35rem)}
h3{font-size:clamp(1.14rem,2vw,1.38rem);letter-spacing:-.02em}
em,.serif{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:600;letter-spacing:-.01em}
h1 em,h2 em{font-size:1.06em}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 26px;position:relative;z-index:1}
section{padding:clamp(38px,3.8vw,60px) 0;position:relative}
.lead{font-size:clamp(1.06rem,1.6vw,1.26rem);color:var(--muted);line-height:1.6;max-width:62ch}
.small{font-size:.9rem;color:var(--muted)}
.center{text-align:center}
.center .lead{margin-left:auto;margin-right:auto}

/* ── Halos ───────────────────────────────────────────────────────────────────────────────────────
   Ce sont eux qui empêchent le blanc de devenir clinique. Un halo est une tache très diffuse posée
   DERRIÈRE le contenu (z-index 0, contenu à 1) : il n'colore pas le fond, il l'éclaire.
   `pointer-events:none` est indispensable — sans lui, un halo qui déborde avale les clics des
   boutons voisins, et le bug est introuvable puisqu'on ne voit rien. */
/* Le fond est UNE couche unique, posée derrière tout le document. Avant, chaque section portait
   ses propres halos et les rognait : la page se lisait comme une pile de vignettes séparées. En les
   sortant ici, la couleur coule d'une section à l'autre sans jamais montrer de couture. */
/* Le fond est peint en CSS, sur toute la hauteur du document, avec des taches exprimées en
   POURCENTAGE. Les halos posés en éléments séparés laissaient des trous blancs entre eux dès que la
   page s'allongeait : dix taches de 700 px réparties sur 14 000 px, ça fait neuf zones blanches.
   Ici, chaque tache couvre ~14 % de la hauteur et elles se recouvrent deux à deux — quelle que soit
   la longueur de la page, il n'y a plus une seule couture. Même fond sur TOUTES les pages. */
.fond{
  position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;
  background-image:
    radial-gradient(58% 34% at  4% 26%, rgba(217,70,184,.13), transparent 72%),
    radial-gradient(54% 32% at 97% 68%, rgba(168,230,53,.15), transparent 72%),
    repeating-linear-gradient(180deg,
      rgba(217,70,184,.060)    0px,
      rgba(155,89,212,.038)  540px,
      rgba(168,230,53,.085) 1080px,
      rgba(168,230,53,.040) 1620px,
      rgba(217,70,184,.060) 2160px);
  background-size:100% 1700px, 100% 2300px, 100% 100%;
  background-repeat:repeat-y, repeat-y, repeat;
}
.halo{position:absolute;border-radius:50%;pointer-events:none;filter:blur(110px);
  animation:respire 18s ease-in-out infinite alternate}
.halo-rose{background:radial-gradient(circle,rgba(217,70,184,.34),transparent 70%)}
.halo-vert{background:radial-gradient(circle,rgba(168,230,53,.40),transparent 70%)}
.halo-violet{background:radial-gradient(circle,rgba(155,89,212,.26),transparent 70%)}
.halo{width:52vw;height:52vw;max-width:760px;max-height:760px}
.halo-g{left:-16vw}
.halo-d{right:-14vw}
.halo-c{left:26vw}
/* `--y` place le halo en pourcentage de la hauteur totale de la page. */
.halo{top:var(--y,0)}
@keyframes respire{
  0%{transform:translate3d(0,0,0) scale(1);opacity:.85}
  100%{transform:translate3d(2vw,-1.5vw,0) scale(1.16);opacity:1}
}

/* ── Œil (surtitre) ─────────────────────────────────────────────────────────────────────────── */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.72rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--magenta-dark);margin-bottom:20px}
.eyebrow::before{content:"";width:26px;height:1.5px;background:currentColor}
.center .eyebrow{justify-content:center}

/* ── Boutons ────────────────────────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 28px;border-radius:var(--r-pill);font-weight:600;font-size:.97rem;letter-spacing:-.01em;
  border:1px solid transparent;cursor:pointer;position:relative;background:var(--ink);color:#fff;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),background .3s,color .3s,border-color .3s;
  will-change:transform}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 36px -12px rgba(24,24,27,.48)}
.btn:active{transform:translateY(0)}
.btn .arrow{transition:transform .4s var(--ease)}
.btn:hover .arrow{transform:translateX(4px)}
.btn-lime{background:var(--lime);color:var(--text)}
.btn-lime:hover{background:#96D122;box-shadow:0 16px 36px -12px rgba(124,184,15,.65)}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--border-strong)}
.btn-ghost:hover{border-color:var(--text);box-shadow:none;background:transparent}
.btn-lg{padding:18px 34px;font-size:1.03rem}
.btns{display:flex;gap:14px;flex-wrap:wrap}
.center .btns{justify-content:center}

.link{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.95rem;color:var(--text);
  border-bottom:1.5px solid var(--border-strong);padding-bottom:3px;transition:.35s var(--ease)}
.link:hover{border-color:var(--magenta);color:var(--magenta-dark);gap:12px}

/* ── En-tête ────────────────────────────────────────────────────────────────────────────────── */
header{position:sticky;top:0;z-index:90;background:rgba(255,255,255,.74);
  backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid transparent;transition:border-color .4s,background .4s}
header.scrolled{border-bottom-color:var(--border);background:rgba(255,255,255,.93)}
header .wrap{display:flex;align-items:center;gap:34px;padding-top:14px;padding-bottom:14px}
.logo img{height:32px;width:auto}
nav{display:flex;gap:28px;margin-left:auto;align-items:center}
nav a{font-size:.94rem;font-weight:500;color:var(--muted);position:relative;padding:6px 0;transition:color .3s}
nav a::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:0;background:var(--magenta);transition:width .4s var(--ease)}
nav a:hover{color:var(--text)} nav a:hover::after{width:100%}
nav a.on{color:var(--text)} nav a.on::after{width:100%}
.head-cta{display:flex;gap:10px;align-items:center}
.nav-devis{display:none}
.head-cta .btn{padding:11px 22px;font-size:.9rem}
.burger{display:none;width:42px;height:42px;border:1px solid var(--border);border-radius:12px;
  background:var(--surface);margin-left:auto;flex-direction:column;justify-content:center;
  align-items:center;gap:5px;cursor:pointer}
.burger span{width:17px;height:1.6px;background:var(--text);transition:.35s var(--ease);display:block}
.burger.open span:nth-child(1){transform:translateY(6.6px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-6.6px) rotate(-45deg)}

/* ── Héros ──────────────────────────────────────────────────────────────────────────────────── */
.hero{padding-top:clamp(40px,4.6vw,66px);padding-bottom:clamp(40px,4.6vw,66px)}
.hero h1{margin-bottom:22px}
.hero .lead{font-size:clamp(1.1rem,1.75vw,1.32rem);margin-bottom:34px}
.hero-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(40px,5vw,72px);align-items:center}

.pricetag{display:inline-flex;align-items:baseline;gap:9px;padding:9px 18px 9px 15px;
  border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--border);
  font-size:.88rem;font-weight:500;color:var(--muted);margin-bottom:24px;box-shadow:var(--ombre)}
.pricetag b{font-weight:700;color:var(--text);font-size:1rem}
.pricetag .dot{width:7px;height:7px;border-radius:50%;background:var(--lime);align-self:center;
  box-shadow:0 0 0 4px rgba(168,230,53,.24);animation:pulse 2.6s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 3px rgba(168,230,53,.24)}50%{box-shadow:0 0 0 8px rgba(168,230,53,0)}}

.assurances{display:grid;gap:13px;padding-top:30px;margin-top:34px;border-top:1px solid var(--border)}
.assurances div{display:flex;align-items:center;gap:11px;font-size:.93rem;font-weight:500;color:var(--muted)}
.assurances svg{width:17px;height:17px;flex:none;color:var(--lime-dark)}

/* Fond neutre et non ambré : l'orange est proscrit sur ce site. Le liseré rose suffit à signaler. */
.note-ia{background:var(--surface-2);border:1px solid var(--border-strong);
  border-left:3px solid var(--magenta);border-radius:var(--r-sm);
  padding:18px 22px;margin:24px auto 0;max-width:66ch;text-align:left;font-size:.93rem;line-height:1.65;
  color:var(--text)}
.note-ia b{font-weight:600}

/* ── Le prompt à copier ───────────────────────────────────────────────────────────────────────────
   Un bloc que le visiteur emporte chez une IA pour vérifier notre affirmation sans nous. */
.prompt{background:var(--ink);color:var(--on-ink);border-radius:var(--r);padding:0;overflow:hidden;
  box-shadow:var(--ombre-forte)}
.prompt-tete{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:16px 20px;border-bottom:1px solid var(--on-ink-line)}
.prompt-tete span{font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;font-weight:600;
  color:var(--lime)}
.prompt pre{margin:0;padding:22px 24px;white-space:pre-wrap;word-break:break-word;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.83rem;line-height:1.72;
  color:var(--on-ink-muted);max-height:none}
.btn-copier{background:var(--lime);color:var(--text);border:0;border-radius:var(--r-pill);
  padding:9px 20px;font:inherit;font-size:.86rem;font-weight:600;cursor:pointer;white-space:nowrap;
  transition:transform .3s var(--ease),background .3s}
.btn-copier:hover{transform:translateY(-1px);background:#96D122}
.btn-copier.copie{background:var(--on-ink);color:var(--ink)}
.btn-copier:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.ia-liens{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:22px}
.ia-liens a{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:var(--r-pill);
  border:1px solid var(--border);background:var(--surface);color:var(--text);text-decoration:none;
  font-size:.9rem;font-weight:500;transition:transform .3s var(--ease),box-shadow .3s}
.ia-liens a:hover{transform:translateY(-2px);box-shadow:var(--ombre)}

/* ── Grilles ────────────────────────────────────────────────────────────────────────────────── */
.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g5{grid-template-columns:repeat(5,1fr)}

/* ── Cartes ─────────────────────────────────────────────────────────────────────────────────── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:clamp(26px,3vw,36px);position:relative;overflow:hidden;box-shadow:var(--ombre);
  transition:transform .55s var(--ease),box-shadow .55s var(--ease),border-color .55s var(--ease)}
.card:hover{box-shadow:var(--ombre-forte);border-color:var(--border-strong)}
.card h3{margin-bottom:11px}
.card p{color:var(--muted);font-size:.97rem}
.card::after{content:"";position:absolute;left:0;top:0;height:2px;width:0;
  background:linear-gradient(90deg,var(--magenta),var(--lime));transition:width .7s var(--ease)}
.card:hover::after{width:100%}

.icon{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;margin-bottom:20px;
  background:var(--surface-2);border:1px solid var(--border);color:var(--text);
  transition:background .45s var(--ease),color .45s var(--ease),transform .45s var(--ease)}
.icon svg{width:21px;height:21px}
.card:hover .icon{background:var(--ink);color:#fff;transform:scale(1.06) rotate(-3deg)}

/* Le prix ramené au contact : un chiffre qu'on lit avant la phrase qui l'explique. */
/* Une liste de ce qu'on ne fait pas : la puce ne doit pas être verte, ça dirait l'inverse. */
.mini.non svg{color:var(--muted)}
.mini.non li{color:var(--muted)}

.step .num{font-family:'Outfit',system-ui,sans-serif;font-style:normal;font-weight:700;
  font-variant-numeric:lining-nums tabular-nums;font-feature-settings:'lnum' 1,'tnum' 1;
  font-size:1.75rem;line-height:1;letter-spacing:-.02em;color:var(--magenta);
  margin-bottom:14px;display:block}

/* ── NOTES DE NOIR ───────────────────────────────────────────────────────────────────────────────
   Une carte noire au milieu de cartes blanches : la même force de contraste que les anciennes
   sections noires, sur un sixième de la surface au lieu d'un écran entier. */
.card.noire{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.card.noire h3{color:#fff}
.card.noire p{color:var(--on-ink-muted)}
.card.noire b,.card.noire strong{color:#fff}
.card.noire .num{color:var(--lime)}
.card.noire .icon{background:rgba(255,255,255,.08);border-color:var(--on-ink-line);color:#fff}
.card.noire:hover .icon{background:var(--lime);color:var(--ink)}
.card.noire .mini li{color:var(--on-ink-muted)}
.card.noire .mini svg{color:var(--lime)}
.card.noire .link{color:#fff;border-color:var(--on-ink-line)}
.card.noire .link:hover{color:var(--lime);border-color:var(--lime)}
.card.noire::after{background:linear-gradient(90deg,var(--lime),var(--magenta))}

.card.accent{border-color:var(--text)}
.card.accent::after{width:100%}
.card.accent .num{color:var(--lime-dark)}

.mini{list-style:none;display:grid;gap:10px;margin:20px 0 24px}
.mini li{display:flex;gap:10px;align-items:flex-start;font-size:.92rem;color:var(--muted);line-height:1.5}
.mini svg{width:15px;height:15px;flex:none;margin-top:4px;color:var(--lime-dark)}

.card.offer{display:flex;flex-direction:column}
.card.offer .link{margin-top:auto;align-self:flex-start}
.card.offer:hover .link{border-color:var(--magenta);color:var(--magenta-dark);gap:12px}
.card.noire.offer:hover .link{border-color:var(--lime);color:var(--lime)}

.card.row{display:flex;gap:20px;align-items:flex-start;padding:24px 26px}
.card.row .icon{margin-bottom:0;flex:none}
.card.row h3{font-size:1.05rem;margin-bottom:6px}
.card.row p{font-size:.92rem}

/* ── Tuiles de preuve ────────────────────────────────────────────────────────────────────────────
   Chiffres PLEINS, une couleur franche par tuile. Le dégradé vert→rose sur le texte a été retiré :
   illisible en petit corps, et laid en grand. */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.stat{padding:32px 28px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);
  box-shadow:var(--ombre);position:relative;overflow:hidden;
  transition:transform .55s var(--ease),box-shadow .55s var(--ease),border-color .55s var(--ease)}
.stat:hover{box-shadow:var(--ombre-forte);border-color:var(--border-strong)}
.stat .n{font-size:clamp(2.1rem,3.6vw,2.85rem);font-weight:700;letter-spacing:-.045em;line-height:1;color:var(--text)}
.stat .n.mot{font-size:clamp(1.32rem,2.1vw,1.72rem);letter-spacing:-.03em;line-height:1.15}
.stat .l{font-size:.88rem;color:var(--muted);margin-top:12px;line-height:1.5}
.stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--text)}
.stat:nth-child(2) .n{color:var(--magenta-dark)}
.stat:nth-child(2)::before{background:var(--magenta)}
.stat:nth-child(3) .n{color:var(--lime-dark)}
.stat:nth-child(3)::before{background:var(--lime)}
.stat:nth-child(4) .n{color:var(--violet)}
.stat:nth-child(4)::before{background:var(--violet)}

/* ── Tarifs ─────────────────────────────────────────────────────────────────────────────────── */
.price-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:clamp(24px,2.6vw,32px);position:relative;overflow:hidden;height:100%;
  display:flex;flex-direction:column;box-shadow:var(--ombre);
  transition:transform .55s var(--ease),box-shadow .55s var(--ease),border-color .55s var(--ease)}
.price-card:hover{transform:translateY(-5px);box-shadow:var(--ombre-forte)}
.price-card.mise-en-avant{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.price-card.mise-en-avant h3,.price-card.mise-en-avant .amount{color:#fff}
.price-card.mise-en-avant .per,.price-card.mise-en-avant .small,.price-card.mise-en-avant .plist li{color:var(--on-ink-muted)}
.price-card.mise-en-avant .plist b{color:#fff}
.price-card.mise-en-avant .eyebrow{color:var(--lime)}
.price-card.mise-en-avant .plist svg{color:var(--lime)}
.price-card.mise-en-avant .btn{background:var(--lime);color:var(--text)}
.price-card.mise-en-avant .btn:hover{background:#96D122}
.price-card::before{content:"";display:block;height:28px}
.price-card .badge{position:absolute;top:clamp(24px,2.6vw,32px);right:clamp(24px,2.6vw,32px);
  font-size:.66rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  background:var(--lime);color:var(--text);padding:6px 12px;border-radius:var(--r-pill)}
/* Le nom de la formule tient sur une ou deux lignes selon sa longueur (« Prise de rendez-vous
   BtoB 1 000 » passe a la ligne la ou « ... 100 » tient). On lui reserve donc DEUX lignes dans
   tous les cas : sans ca, la troisieme carte descend de 19 px et les trois ne sont plus alignees.
   Le titre s'aligne en bas de sa boite pour que le prix parte toujours du meme endroit. */
.price-card > .eyebrow{display:flex;align-items:flex-end;min-height:2.6em;line-height:1.3;
  text-wrap:balance}

.price{display:flex;align-items:baseline;gap:7px;margin:14px 0 4px;flex-wrap:nowrap}
.price .amount{font-size:clamp(1.95rem,3.1vw,2.45rem);font-weight:700;letter-spacing:-.045em;
  line-height:1;white-space:nowrap}
.price .per{font-size:.82rem;color:var(--muted);font-weight:500;white-space:nowrap}
.plist{list-style:none;margin:22px 0;display:grid;gap:12px}
.plist li{display:flex;gap:11px;align-items:flex-start;font-size:.93rem;color:var(--muted);line-height:1.5}
.plist svg{width:16px;height:16px;flex:none;margin-top:4px;color:var(--lime-dark)}
.plist b{color:var(--text);font-weight:600}
.price-card .btn{margin-top:auto;width:100%}

.mensuel{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px}
.mois{border:1px dashed var(--border-strong);border-radius:var(--r);padding:20px 22px;background:var(--surface)}
.mois .t{font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--subtle)}
.mois .p{font-size:1.5rem;font-weight:700;letter-spacing:-.03em;margin-top:8px}
.mois .p span{font-size:.85rem;font-weight:500;color:var(--muted);letter-spacing:0}

/* ── Bande défilante ────────────────────────────────────────────────────────────────────────── */
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  padding:16px 0;background:transparent;position:relative}
.marquee::before,.marquee::after{content:"";position:absolute;left:8%;right:8%;height:1px;
  background:linear-gradient(90deg,transparent,var(--border) 18%,var(--border) 82%,transparent)}
.marquee::before{top:0} .marquee::after{bottom:0}
.marquee-track{display:flex;width:max-content;animation:slide 46s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track > span{display:inline-flex;align-items:center;gap:18px;padding:0 26px;white-space:nowrap;
  font-size:1.02rem;font-weight:500;color:var(--muted)}
.marquee-track > span::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--magenta);opacity:.6}
@keyframes slide{to{transform:translateX(-50%)}}

/* ── FAQ ────────────────────────────────────────────────────────────────────────────────────── */
.faq{border-top:1px solid var(--border)}
.faq details{border-bottom:1px solid var(--border)}
.faq summary{list-style:none;cursor:pointer;padding:26px 46px 26px 0;position:relative;
  font-size:clamp(1.02rem,1.55vw,1.16rem);font-weight:600;letter-spacing:-.015em;transition:color .3s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--magenta-dark)}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;
  border-right:1.8px solid var(--muted);border-bottom:1.8px solid var(--muted);
  transform:translateY(-70%) rotate(45deg);transition:transform .42s var(--ease),border-color .3s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg);border-color:var(--magenta)}
.faq .answer p{padding:0 8% 28px 0;color:var(--muted);font-size:1rem;max-width:78ch}
.faq details[open] .answer{animation:unfold .5s var(--ease)}
@keyframes unfold{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ── Citation & appel final ─────────────────────────────────────────────────────────────────── */
.quote{max-width:80ch;margin:0 auto;text-align:center}
.quote p{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:700;
  font-size:clamp(2rem,4.6vw,3.4rem);line-height:1.22;letter-spacing:-.02em;color:var(--text)}
.quote .who{margin-top:26px;font-family:'Outfit',sans-serif;font-style:normal;font-size:.9rem;
  font-weight:500;color:var(--muted);letter-spacing:.02em}
.cta-final{text-align:center}
/* `text-align` ne centre pas un conteneur flex : sans cette ligne, les boutons du bandeau final
   restaient collés à gauche sous un titre centré. */
.cta-final .btns,.legal-hero .btns{justify-content:center}
.cta-final h2{max-width:19ch;margin:0 auto 20px}
.cta-final .lead{margin:0 auto 34px}

/* ── Compatibilité agendas ──────────────────────────────────────────────────────────────────── */
.compat{border:1px solid var(--border);border-radius:var(--r-lg);padding:30px 28px;
  background:var(--surface);box-shadow:var(--ombre)}
.compat-t{font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--subtle);margin-bottom:22px}
.compat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.marque{display:flex;align-items:center;gap:13px;padding:15px 16px;border:1px solid var(--border);
  border-radius:var(--r-sm);background:var(--surface-2);
  transition:border-color .45s var(--ease),transform .45s var(--ease),background .45s var(--ease)}
.marque:hover{transform:translateY(-2px);border-color:var(--border-strong);background:var(--surface)}
.marque-logo{flex:none;width:30px;height:30px;color:var(--text);opacity:.85}
.marque-logo svg{width:30px;height:30px;display:block}
.marque-nom{font-size:.9rem;font-weight:500;line-height:1.25}
.compat-note{font-size:.76rem;color:var(--subtle);margin-top:18px;line-height:1.5}
@media(max-width:520px){.compat-grid{grid-template-columns:1fr}}

/* ── Aperçu de l'espace client ──────────────────────────────────────────────────────────────── */
.mock{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 40px 80px -38px rgba(24,24,27,.38),0 2px 6px rgba(24,24,27,.05);
  transform:perspective(1400px) rotateY(-6deg) rotateX(2deg) translateY(var(--par,0px));
  transition:transform 1s var(--ease)}
.mock:hover{transform:perspective(1400px) rotateY(-2deg) rotateX(0deg) translateY(calc(var(--par,0px) - 5px))}
.mock-bar{display:flex;align-items:center;gap:7px;padding:13px 16px;background:var(--surface-2);
  border-bottom:1px solid var(--border)}
.mock-bar .d{width:9px;height:9px;border-radius:50%;background:var(--border-strong)}
.mock-bar .d:first-child{background:var(--magenta);opacity:.65}
.mock-url{margin-left:12px;font-size:.72rem;color:var(--subtle)}
.mock-body{padding:26px 26px 28px}
.mock-title{font-size:1.16rem;font-weight:600;letter-spacing:-.02em}
.mock-sub{font-size:.82rem;color:var(--muted);margin-top:3px;margin-bottom:22px}
.mock-steps{list-style:none;display:grid;gap:13px}
.mock-steps li{display:flex;align-items:center;gap:11px;font-size:.9rem;color:var(--subtle)}
.mock-steps li i{width:16px;height:16px;border-radius:50%;border:1.6px solid var(--border-strong);flex:none;display:block}
.mock-steps li svg{width:16px;height:16px;flex:none;color:#fff;background:var(--lime-dark);border-radius:50%;padding:3px}
.mock-steps li.ok{color:var(--text);font-weight:500}
.mock-steps li.now{color:var(--text);font-weight:600}
.mock-steps li.now i{border-color:var(--magenta);background:var(--magenta);
  box-shadow:0 0 0 0 rgba(217,70,184,.5);animation:ping 2.2s ease-out infinite}
@keyframes ping{70%{box-shadow:0 0 0 9px rgba(217,70,184,0)}100%{box-shadow:0 0 0 0 rgba(217,70,184,0)}}
.mock-sep{height:1px;background:var(--border);margin:24px 0 20px}
.mock-rdv-t{font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--subtle);margin-bottom:14px}
.mock-rdv{display:flex;align-items:center;gap:11px;padding:12px 14px;border:1px solid var(--border);
  border-radius:var(--r-sm);margin-bottom:9px;font-size:.85rem;color:var(--muted);background:var(--surface-2)}
.mock-rdv b{font-weight:600;color:var(--text)}
.mock-rdv .pt{width:6px;height:6px;border-radius:50%;background:var(--lime-dark);flex:none}

/* ── Illustrations ──────────────────────────────────────────────────────────────────────────── */
.illu{width:100%;height:auto;display:block;overflow:visible}
.illu-boite{position:relative;display:flex;justify-content:center;align-items:center}

/* Le mot « Callutopia » remplacé par le logo dans un titre. */
.logo-mot{display:inline-block;height:.78em;width:auto;vertical-align:baseline;
  transform:translateY(.05em);margin:0 .05em}

/* ── Image de bas de page + pied de page (conservés du site d'origine) ───────────────────────── */
.mountain{background:#000;display:flex;justify-content:center;line-height:0}
.mountain img{width:100%;max-width:none;height:auto;display:block}
footer{background:#000;color:var(--on-ink-muted);padding:70px 0 28px}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px}
footer h4{color:#fff;font-size:15px;font-weight:600;letter-spacing:.04em;margin-bottom:18px}
footer .brand{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:28px;color:#fff;font-weight:600}
footer ul{list-style:none}
footer li{margin-bottom:11px;font-size:14px}
footer li a{transition:color .3s}
footer li a:hover{color:var(--lime)}
footer p{font-size:14px;margin-top:14px;line-height:1.8;color:var(--on-ink-muted)}
.fbar{border-top:1px solid var(--on-ink-line);margin-top:46px;padding-top:22px;display:flex;
  justify-content:space-between;flex-wrap:wrap;gap:14px;font-size:13px;color:#7e7e8a}

/* ── Apparitions ────────────────────────────────────────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ── Une phrase par ligne ───────────────────────────────────────────────────────────────────── */
.ph{display:block}
.ph + .ph{margin-top:.45em}
.lead .ph + .ph{margin-top:.55em}
.legal .ph + .ph{margin-top:.5em}

/* ── Pages juridiques ───────────────────────────────────────────────────────────────────────── */
.legal-hero{padding:clamp(52px,6vw,84px) 0 clamp(30px,4vw,44px)}
.legal-hero h1{font-size:clamp(2.1rem,4.6vw,3.2rem)}
.legal-maj{font-size:.85rem;color:var(--subtle);margin-top:18px}
.legal{padding-top:0;padding-bottom:clamp(60px,7vw,96px)}
.legal .wrap{max-width:820px}
.legal h2{font-size:clamp(1.3rem,2.2vw,1.62rem);margin:52px 0 16px;padding-top:26px;
  border-top:1px solid var(--border);letter-spacing:-.02em}
.legal h2:first-of-type{margin-top:0;border-top:none;padding-top:0}
.legal h3{font-size:1.02rem;margin:26px 0 10px;font-weight:600}
.legal p{color:var(--muted);margin-bottom:14px;font-size:.98rem;line-height:1.72}
.legal ul,.legal ol{color:var(--muted);margin:0 0 16px 22px;font-size:.98rem;line-height:1.72}
.legal li{margin-bottom:8px}
.legal strong{color:var(--text);font-weight:600}
.legal a{color:var(--text);border-bottom:1px solid var(--border-strong);transition:.3s}
.legal a:hover{color:var(--magenta-dark);border-color:var(--magenta)}
.sommaire{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:26px 28px;margin-bottom:44px}
.sommaire h4{font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--subtle);margin-bottom:16px}
.sommaire ol{list-style:none;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:9px 26px;counter-reset:som}
.sommaire li{margin:0;counter-increment:som}
.sommaire a{font-size:.9rem;border:none;display:inline-flex;gap:9px;color:var(--muted)}
.sommaire a::before{content:counter(som,decimal-leading-zero);color:var(--subtle);font-variant-numeric:tabular-nums}
.sommaire a:hover{color:var(--magenta-dark)}
.encadre{border:1px solid var(--border-strong);border-left:3px solid var(--magenta);
  border-radius:var(--r-sm);padding:20px 22px;margin:26px 0;background:var(--surface-2)}
.encadre p{margin-bottom:0;font-size:.93rem}
@media(max-width:640px){.sommaire ol{grid-template-columns:1fr}}

/* ── Responsive ─────────────────────────────────────────────────────────────────────────────── */
@media(max-width:1100px){.g5{grid-template-columns:repeat(3,1fr)}}
@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr}
  .g4{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .mensuel{grid-template-columns:1fr}
  nav,.head-cta{display:none}
  .burger{display:flex}
  nav.show{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;
    background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border);
    padding:10px 26px 20px;margin-left:0;animation:unfold .35s var(--ease)}
  nav.show a{padding:14px 0;border-bottom:1px solid var(--border);font-size:1rem}
  nav.show a:last-child{border-bottom:none}
  /* Le devis immédiat n'existait que dans le bandeau du haut, masqué dès 980 px : sur téléphone,
     le menu déroulant ne le proposait donc jamais. Il y figure maintenant, en dernier — c'est
     l'action, elle vient après la navigation (21/08/2026). */
  nav.show .nav-devis{display:block;color:var(--accent);font-weight:700}
  nav.show a::after{display:none}
}
@media(max-width:820px){.g5{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){
  body{font-size:16px}
  .g2,.g3{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr 1fr}
  .btns .btn{width:100%}
  .halo{filter:blur(70px)}
}
@media(max-width:560px){.g5{grid-template-columns:1fr}}
@media(max-width:520px){
  .stats{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr}
  .fbar{flex-direction:column;gap:8px}
}

/* ── Mouvement réduit ───────────────────────────────────────────────────────────────────────── */

/* Cinq cartes sur trois colonnes : sans rien, la dernière ligne se colle à gauche et laisse un trou
   à droite. On passe la grille en six colonnes (chaque carte en occupe deux) et on décale les deux
   dernières d'une demi-colonne. Sous 721 px la grille est déjà en une colonne : rien à corriger, et
   c'est aussi là que le repli « voir les 2 autres » s'applique. */
@media(min-width:721px){
  .grid.g3.fin-centree{grid-template-columns:repeat(6,1fr)}
  .grid.g3.fin-centree>*{grid-column:span 2}
  .grid.g3.fin-centree>:nth-child(4){grid-column:2/span 2}
  .grid.g3.fin-centree>:nth-child(5){grid-column:4/span 2}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  .halo{animation:none}
  .mock{transform:none}
}

/* ═══ ANIMATIONS DES ILLUSTRATIONS ═══════════════════════════════════════════════════════════════
   Chaque dessin joue sa petite scène quand il entre à l'écran. Le déclencheur est la classe `.in`
   posée sur `.illu-boite` par le moteur d'apparition — le même que partout ailleurs, donc le filet
   de rattrapage protège aussi les illustrations.

   Toutes ces animations sont en `both` : l'état FINAL est l'état lisible. Si l'animation ne joue
   jamais, le dessin reste complet — jamais un créneau d'agenda vide ou une jauge à zéro. */

/* Agenda : les créneaux se posent l'un après l'autre. */
.illu-agenda .cr{opacity:0;transform-box:fill-box;transform-origin:center}
.in .illu-agenda .cr{animation:pose-cr .6s var(--ease) both}
.in .illu-agenda .cr:nth-of-type(1){animation-delay:.15s}
.in .illu-agenda .cr:nth-of-type(2){animation-delay:.35s}
.in .illu-agenda .cr:nth-of-type(3){animation-delay:.55s}
.in .illu-agenda .cr:nth-of-type(4){animation-delay:.75s}
@keyframes pose-cr{from{opacity:0;transform:scale(.7) translateY(8px)}to{opacity:1;transform:none}}
.illu-agenda .pt{opacity:0}
.in .illu-agenda .pt{animation:pose-cr .5s var(--ease) .95s both}

/* Conversation : la question, puis la réponse, puis le sceau qui se coche. */
.illu-conv .b1,.illu-conv .b2,.illu-conv .sceau{opacity:0}
.in .illu-conv .b1{animation:glisse-g .7s var(--ease) .1s both}
.in .illu-conv .b2{animation:glisse-d .7s var(--ease) .45s both}
.in .illu-conv .sceau{animation:pose-cr .6s var(--ease) .9s both}
@keyframes glisse-g{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}
@keyframes glisse-d{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
.illu-conv .coche{stroke-dasharray:46;stroke-dashoffset:46}
.in .illu-conv .coche{animation:trace .5s var(--ease) 1.3s both}
@keyframes trace{to{stroke-dashoffset:0}}

/* France : les ondes partent du centre, en boucle — un appel qui ne sort jamais du pays. */
.in .illu-fr .ondes circle{transform-box:fill-box;transform-origin:center;animation:onde 3.4s ease-out infinite}
.in .illu-fr .ondes circle:nth-child(2){animation-delay:.55s}
.in .illu-fr .ondes circle:nth-child(3){animation-delay:1.1s}
@keyframes onde{0%{transform:scale(.55);opacity:.65}70%{opacity:.12}100%{transform:scale(1.08);opacity:0}}
.illu-fr .villes circle{opacity:0}
.in .illu-fr .villes circle{animation:pose-cr .5s var(--ease) both}
.in .illu-fr .villes circle:nth-child(1){animation-delay:.3s}
.in .illu-fr .villes circle:nth-child(2){animation-delay:.45s}
.in .illu-fr .villes circle:nth-child(3){animation-delay:.6s}
.in .illu-fr .villes circle:nth-child(4){animation-delay:.75s}
.in .illu-fr .villes circle:nth-child(5){animation-delay:.9s}

/* Cible : les anneaux se resserrent, les retenus s'allument. */
.illu-cible .anneaux circle{transform-box:fill-box;transform-origin:center}
.in .illu-cible .anneaux circle{animation:resserre .9s var(--ease) both}
.in .illu-cible .anneaux circle:nth-child(2){animation-delay:.12s}
.in .illu-cible .anneaux circle:nth-child(3){animation-delay:.24s}
@keyframes resserre{from{transform:scale(1.35);opacity:0}to{transform:none;opacity:1}}
.illu-cible .retenus circle{opacity:0}
.in .illu-cible .retenus circle{animation:pose-cr .5s var(--ease) both}
.in .illu-cible .retenus circle:nth-child(1){animation-delay:.6s}
.in .illu-cible .retenus circle:nth-child(2){animation-delay:.72s}
.in .illu-cible .retenus circle:nth-child(3){animation-delay:.84s}
.in .illu-cible .retenus circle:nth-child(4){animation-delay:.96s}

/* IA : les cercles pointillés tournent lentement, les pastilles arrivent une à une. */
.in .illu-ia .halo-ia circle{transform-box:fill-box;transform-origin:center;animation:tourne 26s linear infinite}
.in .illu-ia .halo-ia circle:nth-child(2){animation-duration:34s;animation-direction:reverse}
@keyframes tourne{to{transform:rotate(360deg)}}
.illu-ia .pa{opacity:0}
.in .illu-ia .pa{animation:pose-cr .55s var(--ease) both}
.in .illu-ia .pa:nth-of-type(1){animation-delay:.3s}
.in .illu-ia .pa:nth-of-type(2){animation-delay:.45s}
.in .illu-ia .pa:nth-of-type(3){animation-delay:.6s}
.in .illu-ia .pa:nth-of-type(4){animation-delay:.75s}

/* Maison : le toit se trace, l'horloge tourne, l'écran s'allume. */
.illu-maison .toit{stroke-dasharray:340;stroke-dashoffset:340}
.in .illu-maison .toit{animation:trace 1s var(--ease) .1s both}
.in .illu-maison .aiguille{transform-box:fill-box;transform-origin:bottom;animation:tourne 9s linear infinite}
.illu-maison .ecran rect{opacity:0}
.in .illu-maison .ecran rect{animation:pose-cr .5s var(--ease) both}
.in .illu-maison .ecran rect:nth-child(1){animation-delay:.6s}
.in .illu-maison .ecran rect:nth-child(2){animation-delay:.72s}
.in .illu-maison .ecran rect:nth-child(3){animation-delay:.84s}

/* Espace client : les barres poussent depuis le bas. */
.illu-espace .barres rect{transform-box:fill-box;transform-origin:bottom}
.in .illu-espace .barres rect{animation:pousse .7s var(--ease) both}
.in .illu-espace .barres rect:nth-child(1){animation-delay:.2s}
.in .illu-espace .barres rect:nth-child(2){animation-delay:.32s}
.in .illu-espace .barres rect:nth-child(3){animation-delay:.44s}
.in .illu-espace .barres rect:nth-child(4){animation-delay:.56s}
.in .illu-espace .barres rect:nth-child(5){animation-delay:.68s}
@keyframes pousse{from{transform:scaleY(0)}to{transform:scaleY(1)}}

/* Progression : les marches montent, les jauges se remplissent. */
.illu-prog .marches rect{transform-box:fill-box;transform-origin:bottom}
.in .illu-prog .marches rect{animation:pousse .8s var(--ease) both}
.in .illu-prog .marches rect:nth-child(1){animation-delay:.1s}
.in .illu-prog .marches rect:nth-child(2){animation-delay:.25s}
.in .illu-prog .marches rect:nth-child(3){animation-delay:.4s}
.in .illu-prog .marches rect:nth-child(4){animation-delay:.55s}
.illu-prog .badges circle,.illu-prog .badges path{opacity:0}
.in .illu-prog .badges circle,.in .illu-prog .badges path{animation:pose-cr .5s var(--ease) .8s both}
.illu-prog .j{transform-box:fill-box;transform-origin:left}
.in .illu-prog .j{animation:remplit .9s var(--ease) .6s both}
@keyframes remplit{from{transform:scaleX(0)}to{transform:scaleX(1)}}

@media(prefers-reduced-motion:reduce){
  .illu *{animation:none!important;opacity:1!important;transform:none!important;
    stroke-dashoffset:0!important}
}

/* ═══ CADRE LÉGAL ════════════════════════════════════════════════════════════════════════════════
   Bloc « ce qui est interdit / ce qui reste possible », secteur par secteur.

   Il est volontairement placé HAUT et écrit gros : son rôle est de faire partir tout de suite le
   visiteur dont la campagne est illégale. Un lead qu'on ne pourra pas servir coûte un rendez-vous,
   une étude de faisabilité et une déception — autant qu'il se disqualifie seul en trente secondes.

   Le rouge est la seule couleur d'alerte utilisée (celle de `--danger` dans la plateforme).
   Surtout pas d'orange. */
.loi{border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;background:var(--surface);
  box-shadow:var(--ombre);display:flex;flex-direction:column;
  transition:box-shadow .55s var(--ease),border-color .55s var(--ease)}
.loi:hover{box-shadow:var(--ombre-forte);border-color:var(--border-strong)}
.loi-tete{padding:26px 28px 22px;border-bottom:1px solid var(--border)}
.loi-tete h3{margin-bottom:8px}
.loi-ref{font-size:.8rem;color:var(--muted);line-height:1.55}
.loi-ref b{color:var(--text);font-weight:600}
.loi-corps{display:grid;grid-template-columns:1fr 1fr;flex:1}
.loi-col{padding:24px 28px}
.loi-col + .loi-col{border-left:1px solid var(--border)}
.loi-t{display:flex;align-items:center;gap:9px;font-size:.72rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:14px}
.loi-t svg{width:16px;height:16px;flex:none}
.loi-non .loi-t{color:#D93636}
.loi-oui .loi-t{color:var(--lime-dark)}
.loi-col ul{list-style:none;display:grid;gap:10px}
.loi-col li{font-size:.92rem;color:var(--muted);line-height:1.55;padding-left:16px;position:relative}
.loi-col li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:2px;background:var(--border-strong)}
.loi-non li::before{background:#D93636;opacity:.6}
.loi-oui li::before{background:var(--lime-dark);opacity:.7}
.loi-pied{padding:18px 28px;background:var(--surface-2);font-size:.85rem;color:var(--muted);
  border-top:1px solid var(--border)}
.loi-pied b{color:var(--text);font-weight:600}
@media(max-width:640px){.loi-corps{grid-template-columns:1fr}
  .loi-col + .loi-col{border-left:none;border-top:1px solid var(--border)}}

/* Bandeau d'avertissement court, à poser dans une page d'offre. */
.avert{display:flex;gap:16px;align-items:flex-start;border:1px solid var(--border-strong);
  border-left:3px solid #D93636;border-radius:var(--r);padding:22px 24px;background:var(--surface);
  box-shadow:var(--ombre)}
.avert svg{width:22px;height:22px;flex:none;color:#D93636;margin-top:2px}
.avert h3{font-size:1.02rem;margin-bottom:6px}
.avert p{font-size:.93rem;color:var(--muted);line-height:1.6}


/* ── Continuité entre les sections ───────────────────────────────────────────────────────────────
   Nolan (18/08) : « j'aime pas le côté coupé entre chaque page, faut qu'on ait l'impression que
   tout soit continu. »

   Trois mesures, toutes soustractives — on n'ajoute pas un liant, on enlève ce qui coupait :
     1. plus aucun fond de section (fait plus haut) ;
     2. plus aucun rognage de section, donc les halos débordent d'une section sur l'autre ;
     3. `body` porte le blanc, une seule fois, pour toute la page. */
body{position:relative}
main{position:relative;z-index:1}

/* Les sections voisines se chevauchent légèrement au lieu de s'empiler bord à bord : l'œil ne
   trouve plus la ligne de séparation, même en la cherchant. */
section + section{margin-top:calc(-1 * clamp(16px,2.4vw,42px))}

/* ── Finitions téléphone ─────────────────────────────────────────────────────────────────────────
   80 % du trafic arrive d'un téléphone (Nolan, 18/08) : ces règles ne sont pas un rattrapage de fin
   de course, ce sont celles que voient quatre visiteurs sur cinq. */
@media(max-width:560px){
  /* La pastille de prix se cassait en deux lignes mal alignées : on la met en colonne, assumée. */
  .pricetag{flex-direction:column;align-items:flex-start;gap:2px;padding:12px 18px;line-height:1.35}
  .pricetag b{font-size:1.05rem}

  /* « Jeudi 10 h 30 » ne doit jamais se couper au milieu de l'heure. */
  .mock-rdv{flex-wrap:wrap;row-gap:2px}
  .mock-rdv b{white-space:nowrap}
  .mock-body{padding:20px 18px 22px}
  .mock{transform:none}          /* pas de perspective sur un écran étroit : ça rogne les bords */

  /* Les titres respirent moins : on resserre l'interlettrage pour éviter les coupures de mots. */
  h1{letter-spacing:-.035em}
  h2{letter-spacing:-.032em}

  /* Les illustrations n'ont pas besoin de toute la largeur, elles gagnent à être un peu rentrées. */
  .illu-boite{padding:0 6%}

  /* Un seul bouton par ligne, pleine largeur : la cible tactile ne se discute pas. */
  .btns{gap:10px}
}

/* ── Bouton « voir les N autres » (téléphone) ────────────────────────────────────────────────────
   Il occupe toute la largeur de la grille et se lit comme une carte de plus : sur un pouce, un
   bouton discret en fin de liste ne se voit pas, et le contenu replié est perdu pour de bon. */
.voir-plus{
  grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:10px;
  padding:17px 24px;border-radius:var(--r-pill);cursor:pointer;
  background:var(--surface);border:1px solid var(--border-strong);
  font-weight:600;font-size:.95rem;color:var(--text);box-shadow:var(--ombre);
  transition:border-color .35s var(--ease),transform .35s var(--ease)
}
.voir-plus:hover{border-color:var(--text)}
.voir-plus:active{transform:scale(.985)}
.voir-plus::after{
  content:"";width:9px;height:9px;flex:none;
  border-right:1.8px solid var(--magenta);border-bottom:1.8px solid var(--magenta);
  transform:translateY(-2px) rotate(45deg);transition:transform .4s var(--ease)
}
.deplie .voir-plus::after{transform:translateY(2px) rotate(-135deg)}
@media(min-width:721px){.voir-plus{display:none}}

/* ═══ COMPACTION TÉLÉPHONE ═══════════════════════════════════════════════════════════════════════
   L'accueil faisait 24 écrans de défilement sur un téléphone, là où 80 % des visiteurs arrivent.
   Deux sections pesaient 5 000 px à elles seules : les tarifs (trois cartes empilées) et « aucun
   appel délocalisé ». Ce bloc les traite, et resserre le reste.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */
@media(max-width:720px){

  /* 1. Les sections respirent moins. 76 px en haut ET en bas sur treize sections, c'est 2 000 px de
        vide — soit deux écrans et demi passés à ne rien lire. */
  section{padding:clamp(34px,4.6vw,50px) 0}

  /* 2. LES TARIFS SE FONT GLISSER au lieu de s'empiler. Trois cartes de 800 px l'une sous l'autre
        obligent à faire défiler pour comparer, ce qui est exactement ce qu'on ne veut pas au moment
        de choisir. Côte à côte, on compare d'un coup de pouce. */
  .grid.g3:has(.price-card){
    display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    gap:14px;margin:0 -26px;padding:4px 26px 18px;
    scrollbar-width:none;-ms-overflow-style:none;
  }
  .grid.g3:has(.price-card)::-webkit-scrollbar{display:none}
  .grid.g3:has(.price-card) > .price-card{
    flex:0 0 84%;scroll-snap-align:center;height:auto;
  }
  /* Repère de défilement : sans lui, on ne devine pas qu'il y a deux autres formules à droite. */
  .glisser{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:-6px;
    font-size:.8rem;color:var(--subtle)}
  .glisser::after{content:"";width:7px;height:7px;border-right:1.6px solid var(--subtle);
    border-bottom:1.6px solid var(--subtle);transform:rotate(-45deg);animation:pousse-d 1.6s ease-in-out infinite}
  @keyframes pousse-d{0%,100%{transform:translateX(0) rotate(-45deg)}50%{transform:translateX(4px) rotate(-45deg)}}

  /* 3. Les tuiles de preuve tiennent à deux par ligne : elles sont courtes, une par ligne était du
        gâchis pur. */
  .stats{grid-template-columns:1fr 1fr;gap:12px}
  .stat{padding:20px 16px}
  .stat .l{font-size:.8rem;margin-top:8px}

  /* 4. Les phrases restent une par ligne (demande de Nolan) mais se serrent un peu. */
  .lead .ph + .ph{margin-top:.4em}
  .ph + .ph{margin-top:.35em}

  /* 5. Les cartes et les listes se resserrent. */
  .card{padding:22px 20px}
  .card.row{padding:18px 18px;gap:14px}
  .mini{gap:8px;margin:16px 0 18px}
  .plist{gap:10px;margin:18px 0}
  .price-card{padding:24px 22px}

  /* 6. Les grands titres de section : moins d'air au-dessus des grilles. */
  .grid{gap:14px}
}
/* `:has()` n'est pas connu de quelques anciens navigateurs : la grille redevient alors une simple
   colonne, plus longue mais parfaitement lisible. Aucun contenu n'est perdu dans ce repli. */

/* ── Le fond sur téléphone ───────────────────────────────────────────────────────────────────────
   Les taches sont exprimées en pourcentage de LARGEUR : sur un écran de 390 px, 58 % ne font que
   226 px, et comme elles sont posées à 8 % et 92 % elles sortent presque entièrement par les bords.
   D'où l'impression que le fond avait disparu. Sur téléphone, elles couvrent donc toute la largeur
   et se recentrent. */
@media(max-width:720px){
  .fond{
    background-image:
      radial-gradient(130% 20% at 16% 26%, rgba(217,70,184,.17), transparent 70%),
      radial-gradient(130% 18% at 84% 66%, rgba(168,230,53,.19), transparent 70%),
      repeating-linear-gradient(180deg,
        rgba(217,70,184,.075)    0px,
        rgba(155,89,212,.048)  420px,
        rgba(168,230,53,.100)  840px,
        rgba(168,230,53,.050) 1260px,
        rgba(217,70,184,.075) 1680px);
    background-size:100% 1250px, 100% 1650px, 100% 100%;
    background-repeat:repeat-y, repeat-y, repeat;
  }
  /* Les trois halos animés aussi : plus larges que l'écran, sinon on ne voit qu'un bout. */
  .halo{width:150vw;max-width:none;height:70vw;max-height:none;filter:blur(80px)}
  .halo-g{left:-40vw} .halo-d{right:-40vw} .halo-c{left:-20vw}
}

/* ═══ PARCOURS DE DEVIS ══════════════════════════════════════════════════════════════════════════
   Il doit être « super intuitif » (Nolan) : une question à l'écran, de grosses cibles tactiles, un
   fil qui dit où l'on en est, et un retour toujours possible. Le parcours se termine sur un PRIX,
   pas sur un formulaire de contact — c'est ce qu'on est venu chercher.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */
.devis{max-width:920px;margin:0 auto}
.fil{display:flex;gap:8px;justify-content:center;margin-bottom:34px}
.fil i{width:34px;height:4px;border-radius:2px;background:var(--border);display:block;transition:background .4s var(--ease)}
.fil i.fait{background:var(--text)}
.fil i.ici{background:var(--magenta)}

.ecran{display:none}
.ecran.actif{display:block;animation:unfold .45s var(--ease)}
.q{text-align:center;margin-bottom:32px}
.q h2{font-size:clamp(1.6rem,3.4vw,2.5rem)}
.q p{color:var(--muted);margin-top:14px;font-size:1.02rem}

.choix{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.choix.trois{grid-template-columns:repeat(3,1fr)}
.opt{
  text-align:left;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:26px 26px;cursor:pointer;box-shadow:var(--ombre);position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease)
}
.opt:hover{transform:translateY(-3px);box-shadow:var(--ombre-forte);border-color:var(--text)}
.opt:active{transform:translateY(0)}
.opt .ic{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;margin-bottom:16px;
  background:var(--surface-2);border:1px solid var(--border)}
.opt .ic svg{width:20px;height:20px}
.opt h3{font-size:1.1rem;margin-bottom:6px}
.opt p{font-size:.92rem;color:var(--muted);line-height:1.5}
.opt::after{content:"";position:absolute;left:0;top:0;height:3px;width:0;
  background:linear-gradient(90deg,var(--magenta),var(--lime));transition:width .5s var(--ease)}
.opt:hover::after{width:100%}

.retour{display:inline-flex;align-items:center;gap:8px;margin-top:28px;background:none;border:none;
  cursor:pointer;color:var(--muted);font-size:.92rem;font-weight:500;transition:color .3s}
.retour:hover{color:var(--text)}
.retour::before{content:"←"}

/* Le blocage légal : un écran à part entière, pas une note en bas de page. */
.stop{border:1px solid var(--border-strong);border-left:3px solid #D93636;border-radius:var(--r-lg);
  padding:clamp(26px,3vw,36px);background:var(--surface);box-shadow:var(--ombre)}
.stop h3{margin-bottom:12px}
.stop p{color:var(--muted);margin-bottom:12px}
.stop .ref{font-size:.86rem;color:var(--subtle);line-height:1.55}

/* L'écran de résultat */
.resultat{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);
  padding:clamp(28px,3.4vw,42px);box-shadow:var(--ombre-forte);text-align:center}
.resultat .formule{font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--magenta-dark);margin-bottom:14px}
.resultat .prix{font-size:clamp(2.6rem,6vw,3.6rem);font-weight:700;letter-spacing:-.045em;line-height:1}
.resultat .ht{font-size:.95rem;color:var(--muted);margin-top:8px}
.resultat .detail{display:grid;gap:11px;margin:28px auto;max-width:460px;text-align:left}
.resultat .detail li{display:flex;gap:11px;align-items:flex-start;font-size:.94rem;color:var(--muted);
  line-height:1.5;list-style:none}
.resultat .detail svg{width:16px;height:16px;flex:none;margin-top:4px;color:var(--lime-dark)}
.resultat .detail b{color:var(--text);font-weight:600}

@media(max-width:720px){
  .choix,.choix.trois{grid-template-columns:1fr}
  .opt{padding:20px 20px}
  .opt .ic{width:38px;height:38px;margin-bottom:12px}
  .fil i{width:26px}
}

/* ── Séparateur de famille dans le parcours de devis ────────────────────────────────────────────
   Les deux secteurs encadrés (rénovation énergétique, formation CPF) ne sont pas des publics comme
   les autres : la loi y interdit l'appel à froid. Les poser sur la même ligne que « entreprises » et
   « particuliers » laissait croire à quatre choix équivalents. Un intertitre les sépare, et une
   bordure plus marquée annonce le régime particulier avant même qu'on ait cliqué. */
/* Même taille et même couleur que « À qui vendez-vous ? » : c'est une seconde question posée au
   visiteur, pas une étiquette de rangement. Les filets latéraux disparaissent — ils encadraient une
   petite mention, ils écraseraient un titre. */
.famille{margin:clamp(38px,4.5vw,58px) 0 26px;text-align:center}
.famille h2{font-size:clamp(1.6rem,3.4vw,2.5rem);color:var(--text)}
.opt.encadre{border-color:var(--border-strong);background:var(--surface-2)}
.opt.encadre .ic{background:var(--surface);border-color:var(--border-strong)}
.opt.encadre::after{background:linear-gradient(90deg,#D93636,var(--magenta))}

/* ── Onglets des deux familles de formules ──────────────────────────────────────────────────────
   « Vos leads à rappeler à heure dite » et « pas de contrainte d'horaire » ne donnent pas les mêmes
   volumes à prix égal. Le visiteur qui arrive par le devis atterrit directement sur la bonne
   famille ; celui qui arrive par un lien peut basculer. */
.onglets{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:26px}
.onglet{
  padding:12px 20px;border-radius:var(--r-pill);cursor:pointer;
  background:var(--surface);border:1px solid var(--border);
  font-size:.88rem;font-weight:500;color:var(--muted);
  transition:border-color .35s var(--ease),color .35s var(--ease),background .35s var(--ease)
}
.onglet:hover{border-color:var(--border-strong);color:var(--text)}
.onglet.actif{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:600}
@media(max-width:720px){.onglets{flex-direction:column}.onglet{width:100%}}