/* ==========================================================================
   SCRIBEO - ardoise sombre, craie. Un bloc à la fois.
   ========================================================================== */
:root{
  --ardoise:#10151A;
  --surface:#161D24;
  --surface-2:#1D262E;
  --ligne:rgba(242,239,230,.14);
  --ligne-forte:rgba(242,239,230,.30);
  --craie:#F2EFE6;
  --craie-70:rgba(242,239,230,.70);
  --craie-45:rgba(242,239,230,.45);
  --accent:#FFFFFF;
  --craie-49:rgba(242,239,230,.49);   /* seuil mesuré pour 4,5:1 */
  --craie-decor:rgba(242,239,230,.25); /* barres et aplats, jamais du texte */
  /* Un seul accent saturé sur toute la page. Le reste se hiérarchise à la craie. */
  --fluo:#C2FF39;
  --display:'Bricolage Grotesque','Helvetica Neue',Arial,sans-serif;
  --sans:'Instrument Sans','Helvetica Neue',Arial,sans-serif;
  --plume:'Caveat',cursive;
  --gouttiere:clamp(1.15rem,5vw,3rem);
  --max:1060px;
}
*{box-sizing:border-box;margin:0;padding:0;min-width:0}
/* Contour de mise au point global : sans lui, la navigation au clavier
   dépend du navigateur et devient invisible sur fond sombre. */
:focus-visible{outline:2px solid var(--fluo);outline-offset:3px;border-radius:3px}
html{
  overflow-x:hidden;overflow-x:clip;
  touch-action:pan-y pinch-zoom;overscroll-behavior-x:none;
}
body{
  background:var(--ardoise);color:var(--craie);
  font-family:var(--sans);line-height:1.6;font-size:1rem;
  overflow-x:hidden;overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:var(--display);font-weight:600;line-height:1.08;letter-spacing:-.025em;color:var(--craie);
  /* Sans ça, onze titres finissaient sur un mot seul : « jour. », « devis. »,
     « échanges. ». Le navigateur répartit les lignes au lieu de remplir la
     première jusqu'au bord. */
  text-wrap:balance;
}
/* Même problème en plus discret dans les paragraphes : « pretty » évite
   surtout la dernière ligne réduite à un mot. */
p,li{text-wrap:pretty}
.it{font-style:italic;color:var(--accent)}

/* ---------- En-tête : bandeau d'offre, puis barre collante ---------- */
html{scroll-padding-top:72px}
.bandeau{
  display:block;text-decoration:none;text-align:center;
  background:var(--fluo);color:#1B2600;
  font-size:.84rem;font-weight:600;line-height:1.4;
  padding:.55rem var(--gouttiere);
  padding-top:calc(.55rem + env(safe-area-inset-top,0px));
}
.bandeau b{font-weight:800;font-variant-numeric:tabular-nums}
@media (max-width:520px){.bandeau{font-size:.78rem}}

.entete{
  position:sticky;top:0;z-index:50;
  background:rgba(16,21,26,.9);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--ligne);
}
.entete-inner{
  max-width:var(--max);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.75rem var(--gouttiere);
}
.marque{
  display:flex;align-items:center;gap:.55rem;text-decoration:none;color:var(--craie);
  font-family:var(--display);font-weight:600;font-size:1.35rem;letter-spacing:-.035em;
}
.marque .point{
  width:10px;height:10px;border-radius:3px;background:var(--fluo);flex:none;
  transform-origin:center;
  animation:curseur 2.6s ease-in-out infinite;
  transition:width .28s cubic-bezier(.3,0,.2,1),border-radius .28s;
}
/* Le point clignote comme un curseur de saisie : ce site attend qu'on lui écrive.
   Jamais jusqu'à l'invisible, un clignotement franc fatigue et distrait. */
@keyframes curseur{
  0%,42%{opacity:1;transform:scaleY(1)}
  52%{opacity:.3;transform:scaleY(.82)}
  62%,100%{opacity:1;transform:scaleY(1)}
}
/* au survol du nom, le curseur s'étire : la craie commence son trait */
.marque:hover .point,.marque:focus-visible .point{width:26px;border-radius:2px}
.entete-nav{display:none;align-items:center;gap:1.5rem;list-style:none}
.entete-nav a{
  text-decoration:none;color:var(--craie-45);font-size:.9rem;
  position:relative;padding-bottom:3px;transition:color .2s;
}
.entete-nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;
  background:var(--fluo);transition:right .22s ease;
}
.entete-nav a:hover,.entete-nav a:focus-visible{color:var(--craie)}
.entete-nav a:hover::after,.entete-nav a:focus-visible::after{right:0}
.entete-cta{
  display:none;background:var(--fluo);color:#1B2600;text-decoration:none;
  font-size:.85rem;font-weight:700;padding:.5rem 1.05rem;border-radius:999px;
  white-space:nowrap;transition:transform .15s;
}
.entete-cta:hover{transform:translateY(-2px)}
@media (min-width:900px){
  .entete-nav{display:flex}
  .entete-cta{display:inline-block}
  .burger{display:none}
}
.burger{
  width:40px;height:40px;border:1px solid var(--ligne-forte);border-radius:11px;
  background:transparent;cursor:pointer;display:grid;place-content:center;gap:5px;padding:0;
}
.burger span{display:block;width:18px;height:1.8px;background:var(--craie);border-radius:2px;
  transition:transform .22s,opacity .18s}
.burger.ouvert span:nth-child(1){transform:translateY(6.8px) rotate(45deg)}
.burger.ouvert span:nth-child(2){opacity:0}
.burger.ouvert span:nth-child(3){transform:translateY(-6.8px) rotate(-45deg)}

#menu{
  position:fixed;inset:0;z-index:55;background:var(--ardoise);
  display:flex;flex-direction:column;justify-content:center;gap:.3rem;padding:var(--gouttiere);
}
#menu[hidden]{display:none}
#menu a{
  font-family:var(--display);font-weight:600;font-size:clamp(1.8rem,8vw,2.5rem);
  letter-spacing:-.03em;text-decoration:none;color:var(--craie);
  padding:.4rem 0;border-bottom:1px solid var(--ligne);
}
#menu a:last-child{border-bottom:0;color:var(--fluo)}

/* ---------- L'heure : une ligne, pas dix ---------- */
.heure{
  display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;
  font-size:.87rem;color:var(--craie-45);margin-bottom:1.4rem;
}
.heure b{color:var(--craie-70);font-weight:600;font-variant-numeric:tabular-nums}
.heure .pt{width:6px;height:6px;border-radius:50%;background:var(--fluo);flex:none}

/* ---------- Accroche ---------- */
.hero{padding:clamp(2rem,6vw,4rem) var(--gouttiere) clamp(1rem,3vw,2rem)}
.hero-inner{max-width:var(--max);margin:0 auto}
.hero h1{font-size:clamp(2.5rem,8.4vw,4.6rem);letter-spacing:-.035em;max-width:16ch}
.hero h1 .trace{position:relative;white-space:nowrap;color:var(--accent)}
.hero h1 .trace svg{position:absolute;left:0;right:0;bottom:-.15em;width:100%;height:.2em;overflow:visible}
.hero h1 .trace path{
  fill:none;stroke:var(--accent);stroke-width:7;stroke-linecap:round;opacity:.7;
  stroke-dasharray:420;stroke-dashoffset:420;
  animation:tracer 1.1s cubic-bezier(.6,0,.3,1) .35s forwards;
}
@keyframes tracer{to{stroke-dashoffset:0}}
.hero-lead{
  color:var(--craie-70);font-size:clamp(1.05rem,2.5vw,1.2rem);
  margin-top:1.6rem;max-width:52ch;
}
.hero-lead b{color:var(--craie);font-weight:600}
.preuves{
  list-style:none;display:flex;flex-wrap:wrap;gap:.55rem 1.7rem;
  margin-top:1.7rem;font-size:.89rem;color:var(--craie-45);
}
.preuves li{display:flex;align-items:center;gap:.45rem}
.preuves svg{flex:none;color:var(--fluo)}
@media (prefers-reduced-motion:reduce){.hero h1 .trace path{animation:none;stroke-dashoffset:0}}

/* ---------- Section ---------- */
.bloc{padding:clamp(2.2rem,7vw,4.5rem) var(--gouttiere) clamp(3rem,9vw,6rem)}
.bloc-inner{max-width:var(--max);margin:0 auto}
.etiquette{
  font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--craie-45);display:flex;align-items:center;gap:.6rem;margin-bottom:1rem;
}
.etiquette::before{content:"";width:26px;height:1.5px;background:var(--accent);flex:none}
.bloc h2{font-size:clamp(1.9rem,5.6vw,3rem);max-width:20ch}
.chapeau{color:var(--craie-70);margin-top:1.1rem;max-width:56ch;font-size:1.04rem}

/* ---------- Les trois constats ---------- */
.constats{display:grid;gap:1rem;margin-top:clamp(2rem,5vw,2.8rem)}
@media (min-width:760px){.constats{grid-template-columns:repeat(3,1fr)}}
.constat{
  border:1px solid var(--ligne);border-radius:18px;background:var(--surface);
  padding:clamp(1.3rem,3.5vw,1.7rem);
}
.constat .num{
  display:block;font-family:var(--display);font-weight:600;font-size:1.6rem;
  line-height:1;color:var(--fluo);letter-spacing:-.02em;margin-bottom:.8rem;
  font-variant-numeric:tabular-nums;
}
.constat h3{font-size:1.08rem;margin-bottom:.5rem}
.constat p{color:var(--craie-70);font-size:.95rem}

/* ---------- L'application : tuiles inégales, la première tient toute la hauteur ---------- */
.bento{display:grid;gap:.9rem;margin-top:clamp(2rem,5vw,2.8rem)}
@media (min-width:900px){
  .bento{grid-template-columns:1.05fr .95fr;align-items:stretch}
  .bento .tuile:first-child{grid-row:1 / span 3;display:flex;flex-direction:column;justify-content:center}
}
.tuile{
  border:1px solid var(--ligne);border-radius:18px;background:var(--surface);
  padding:clamp(1.3rem,3.5vw,1.8rem);
  transition:border-color .25s,transform .25s,background .25s;
}
.tuile:hover{border-color:var(--fluo);transform:translateY(-3px);background:var(--surface-2)}
.tuile .ico{
  width:42px;height:42px;border-radius:13px;display:grid;place-content:center;
  background:rgba(194,255,57,.12);color:var(--fluo);margin-bottom:1.1rem;
}
.tuile h3{font-size:1.15rem;margin-bottom:.5rem}
.tuile p{color:var(--craie-70);font-size:.95rem}
@media (min-width:900px){
  .bento .tuile:first-child h3{font-size:clamp(1.4rem,2.6vw,1.9rem)}
  .bento .tuile:first-child p{font-size:1.02rem}
  .bento .tuile:first-child .ico{width:52px;height:52px;border-radius:16px}
}
@media (prefers-reduced-motion:reduce){.tuile:hover{transform:none}}

/* ---------- Les deux colonnes ---------- */
.grille{display:grid;gap:1.2rem;align-items:start;margin-top:clamp(2rem,5vw,3rem)}
@media (min-width:880px){.grille{grid-template-columns:1.08fr .92fr}}

/* ---------- La carte de lancement ---------- */
.carte{
  border:1px solid var(--fluo);border-radius:20px;
  background:linear-gradient(160deg,rgba(194,255,57,.07),rgba(194,255,57,.015));
  padding:clamp(1.5rem,4vw,2.3rem);position:relative;
}
.badge{
  position:absolute;top:-.8rem;left:clamp(1.5rem,4vw,2.3rem);
  background:var(--fluo);color:var(--ardoise);
  font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:.3rem .75rem;border-radius:999px;
}
.places{display:flex;align-items:baseline;gap:.4rem;margin:.6rem 0 1.4rem;color:var(--craie-45);font-size:.87rem}
.places b{font-family:var(--display);font-size:1.6rem;color:var(--accent);line-height:1}
.prix{display:flex;align-items:baseline;gap:.65rem;flex-wrap:wrap}
.prix .gros{font-family:var(--display);font-size:clamp(2.5rem,9vw,3.4rem);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.prix .quoi{color:var(--craie-70);font-size:1rem}
.prix s{color:var(--craie-45);text-decoration-color:currentColor;margin-left:.2rem}
.trait{height:1px;background:var(--ligne);margin:1.3rem 0}
.compris{list-style:none;display:flex;flex-direction:column;gap:.55rem;margin:1.4rem 0}
.compris li{display:flex;gap:.6rem;align-items:flex-start;font-size:.95rem;color:var(--craie-70)}
.compris svg{flex:none;margin-top:.3rem;color:var(--fluo)}
.bouton{
  display:inline-flex;align-items:center;gap:.5rem;margin-top:.4rem;
  padding:.85rem 1.4rem;border-radius:999px;border:1px solid var(--accent);
  background:var(--accent);color:var(--ardoise);
  font-weight:700;font-size:.98rem;text-decoration:none;
  transition:transform .15s,box-shadow .2s;
}
.bouton:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(255,255,255,.14)}
.apres{
  margin-top:1.3rem;padding-top:1.1rem;border-top:1px solid var(--ligne);
  font-size:.86rem;color:var(--craie-45);line-height:1.6;
}

/* ---------- Ce qui est compris : un bordereau, pas une grille de cartes ---------- */
.inventaire{list-style:none;margin-top:clamp(2rem,5vw,2.8rem);border-top:1px solid var(--ligne)}
.inventaire li{
  display:grid;gap:.35rem 2.5rem;padding:1.25rem 0;border-bottom:1px solid var(--ligne);
}
@media (min-width:820px){
  .inventaire li{grid-template-columns:minmax(0,17rem) 1fr;align-items:baseline;gap:0 3rem}
}
.inventaire .quoi{display:flex;align-items:baseline;gap:.6rem}
.inventaire .quoi svg{flex:none;color:var(--fluo);transform:translateY(1px)}
.inventaire h3{font-size:1.03rem;line-height:1.3}
.inventaire p{color:var(--craie-70);font-size:.95rem}
.inventaire-mot{
  margin-top:1.6rem;font-size:.86rem;color:var(--craie-45);max-width:60ch;
}

/* ---------- La chronologie : un fil, parce que c'est vraiment une suite ---------- */
.chrono{display:grid;margin-top:clamp(2rem,5vw,2.8rem)}
.etape{
  position:relative;padding:0 0 1.9rem 1.9rem;
  border-left:1px solid var(--ligne);
}
.etape:last-child{border-left-color:transparent;padding-bottom:0}
.etape::before{
  content:"";position:absolute;left:-5px;top:.3rem;
  width:9px;height:9px;border-radius:50%;background:var(--fluo);
}
.etape .quand{
  display:block;font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fluo);margin-bottom:.55rem;
}
.etape h3{font-size:1.1rem;margin-bottom:.4rem}
.etape p{color:var(--craie-70);font-size:.95rem}
@media (min-width:820px){
  .chrono{grid-template-columns:repeat(4,1fr);gap:0 1.8rem}
  .etape{
    border-left:0;border-top:1px solid var(--ligne);
    padding:1.7rem 0 0 0;
  }
  .etape:last-child{border-top-color:var(--ligne)}
  .etape::before{left:0;top:-5px}
}

/* ---------- Le direct : l'agenda réel d'un client, lu chez lui ---------- */
/* Classes préfixées « direct- » : une collision de noms avait déjà décalé
   deux images de 21 px, on ne recommence pas. */
.direct-carte{
  border:1px solid var(--ligne);border-radius:20px;background:var(--surface);
  padding:clamp(1.3rem,3.5vw,1.9rem);margin-top:clamp(2rem,5vw,2.8rem);
  max-width:640px;
}
.direct-tete{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin-bottom:1.1rem;flex-wrap:wrap;
}
.direct-source{display:flex;align-items:center;gap:.55rem;font-size:.78rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--craie-45)}
.direct-pastille{
  width:7px;height:7px;border-radius:50%;background:var(--fluo);flex:none;
  animation:direct-battement 2.6s ease-in-out infinite;
}
@keyframes direct-battement{0%,100%{opacity:1}50%{opacity:.35}}
.direct-date{font-size:.78rem;color:var(--craie-49)}
.direct-jours{list-style:none}
.direct-jours li{
  display:flex;align-items:baseline;gap:.9rem;
  padding:.7rem 0;border-top:1px solid var(--ligne);
}
.direct-jours li:first-child{border-top:0}
.direct-jours .j{font-size:.8rem;color:var(--craie-45);width:2.6rem;flex:none}
.direct-jours .l{font-size:1rem;color:var(--craie);flex:1;min-width:0}
.direct-jours .h{font-size:.8rem;color:var(--craie-45);white-space:nowrap}
.direct-jours li.repos .l{color:var(--craie-45)}
.direct-jours li.auj{
  /* on déborde juste assez pour respirer, jamais jusqu'à la bordure arrondie */
  background:rgba(194,255,57,.08);border-radius:10px;
  margin-inline:-.7rem;padding-inline:.7rem;border-top-color:transparent;
}
.direct-jours li.auj + li{border-top-color:transparent}
.direct-jours li.auj .j{color:var(--fluo)}
.direct-jours li.auj .l small{color:var(--craie-45);font-size:.8rem;margin-left:.4rem}
.direct-mot{
  margin-top:1.2rem;padding-top:1.1rem;border-top:1px solid var(--ligne);
  font-size:.86rem;color:var(--craie-45);line-height:1.6;
}
@media (prefers-reduced-motion:reduce){.direct-pastille,.marque .point{animation:none}}

/* ---------- Avant / après : un seul téléphone, une poignée ---------- */
.duel{display:grid;justify-items:center;margin-top:clamp(2rem,5vw,2.8rem)}
.duel-tel{
  width:min(330px,84vw);border:1px solid var(--ligne-forte);border-radius:36px;
  background:var(--ardoise);padding:.5rem;box-shadow:0 40px 90px rgba(0,0,0,.55);
  position:relative;
}
.ecran{
  position:relative;border-radius:30px;overflow:hidden;background:#0C1116;
  aspect-ratio:9 / 19.5;touch-action:pan-y;
}
/* picture ne doit pas creer de boite : sinon la ligne vide qu'il ajoute
   fausse la hauteur de l'ecran et decale les deux captures. */
picture{display:contents}
.ecran img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;
  user-select:none;-webkit-user-drag:none;
}
/* Noms préfixés : « .apres » servait déjà au petit texte de la carte tarifaire,
   et sa marge décalait l'image de 21 px. Une collision de classes suffit à
   désaligner deux captures que le visiteur compare au pixel près. */
.ecran .duel-site,.ecran .duel-fb{margin:0;padding:0}
/* la couche du dessus ne montre que ce qui est à droite de la poignée */
.ecran .duel-fb{clip-path:inset(0 0 0 var(--x,52%))}
.poignee{
  position:absolute;top:0;bottom:0;left:var(--x,52%);width:2px;
  background:var(--fluo);transform:translateX(-1px);pointer-events:none;
  box-shadow:0 0 14px rgba(194,255,57,.55);
}
.poignee::after{
  content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:38px;height:38px;border-radius:50%;background:var(--fluo);
  box-shadow:0 4px 18px rgba(0,0,0,.5);
}
.poignee::before{
  content:"";position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);width:15px;height:9px;z-index:1;
  background:
    linear-gradient(90deg,var(--ardoise) 2px,transparent 2px 5px,var(--ardoise) 5px 7px,
      transparent 7px 8px,var(--ardoise) 8px 10px,transparent 10px 13px,var(--ardoise) 13px);
}
.curseur{
  position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;
  -webkit-appearance:none;appearance:none;background:transparent;
}
.curseur:focus-visible{opacity:1;outline:3px solid var(--fluo);outline-offset:4px}
.duel-legendes{
  display:flex;justify-content:space-between;gap:1rem;width:min(330px,84vw);
  margin-top:1rem;font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
}
.duel-legendes .gauche{color:var(--fluo)}
.duel-legendes .droite{color:var(--craie-45)}
.duel-mot{
  margin-top:1.4rem;text-align:center;font-size:.87rem;color:var(--craie-45);
  max-width:46ch;
}
.duel-manque{
  display:grid;place-content:center;text-align:center;gap:.5rem;height:100%;
  padding:2rem 1.2rem;color:var(--craie-45);font-size:.86rem;
}

/* ---------- Les vingt places, comptées à la craie ---------- */
.tally{margin:.7rem 0 1.5rem}
.tally-barres{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:.6rem}
.tally-barres i{
  display:block;width:5px;height:22px;border-radius:2px;background:var(--fluo);
}
.tally-barres i.prise{background:var(--craie-decor);position:relative}
.tally-barres i.prise::after{
  content:"";position:absolute;top:50%;left:-3px;right:-3px;height:1.5px;
  background:var(--craie-45);transform:rotate(-18deg);
}
.tally-mot{font-size:.87rem;color:var(--craie-45)}
.tally-mot b{color:var(--fluo);font-weight:700;font-variant-numeric:tabular-nums}

/* ---------- L'engagement, écrit à la main ---------- */
.engag{
  border:1px dashed var(--ligne-forte);border-radius:20px;
  padding:clamp(1.5rem,4vw,2.3rem);margin-top:clamp(2rem,5vw,2.8rem);
  max-width:620px;
}
.engag-liste{list-style:none;display:flex;flex-direction:column;gap:1rem;margin:1.4rem 0 1.8rem}
.engag-liste li{display:flex;gap:.75rem;align-items:flex-start}
.engag-liste svg{flex:none;margin-top:.3rem;color:var(--fluo)}
.engag-liste b{display:block;font-family:var(--display);font-weight:600;font-size:1.02rem;margin-bottom:.2rem}
.engag-liste span{color:var(--craie-70);font-size:.94rem}
.engag-signature{
  border-top:1px solid var(--ligne);padding-top:1.3rem;
  display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap;
}
.engag-nom{font-family:var(--plume);font-size:2.4rem;line-height:1;color:var(--craie)}
.engag-trait{width:min(260px,58vw);height:auto;display:block;opacity:.92}
.engag-qui{font-size:.82rem;color:var(--craie-45);text-align:right}

/* ---------- Le contact : une phrase, pas un formulaire ---------- */
.phrase{
  font-size:clamp(1.15rem,4.2vw,1.5rem);line-height:2.2;color:var(--craie-45);
  margin-top:clamp(1.8rem,4vw,2.4rem);max-width:34ch;
}
.phrase input{
  font:inherit;color:var(--craie);background:transparent;border:0;
  border-bottom:1.5px solid var(--fluo);border-radius:0;
  padding:0 .35rem;margin:0 .1rem;min-width:2ch;
  transition:border-color .2s;
}
.phrase input::placeholder{color:var(--craie-49)}
.phrase input:placeholder-shown{border-bottom-color:var(--craie-decor)}
.phrase input:focus-visible{outline:2px solid var(--fluo);outline-offset:3px;border-radius:3px}
.phrase input:focus{border-bottom-width:2.5px}
.phrase input.manque{border-bottom-color:#FF6F5E}
/* Le point final ne doit pas se détacher du champ qu'il termine. */
.insecable{white-space:nowrap}
.pot-miel{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.phrase-actions{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center;margin-top:1.8rem}
.phrase-erreur{color:#FF6F5E;font-size:.9rem}
/* La porte de sortie : beaucoup de commerçants n'écriront jamais dans un
   formulaire mais répondent en trente secondes sur WhatsApp. */
.bouton-second{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.8rem 1.3rem;border-radius:999px;
  border:1px solid var(--ligne-forte);background:transparent;color:var(--craie);
  font-weight:600;font-size:.95rem;text-decoration:none;
  transition:border-color .2s,transform .15s,color .2s;
}
.bouton-second:hover,.bouton-second:focus-visible{border-color:var(--fluo);color:var(--fluo);transform:translateY(-2px)}
.bouton-second svg{flex:none}
.phrase-ou{font-size:.86rem;color:var(--craie-49);margin-top:.9rem}
.phrase-secours{font-size:.88rem;color:var(--craie-45);margin-top:1.2rem}
.phrase-secours a{color:var(--fluo)}

/* l'accusé de réception : une promesse datée, pas un « merci » */
.recu{
  border:1px solid var(--fluo);border-radius:20px;
  background:linear-gradient(160deg,rgba(194,255,57,.07),rgba(194,255,57,.015));
  padding:clamp(1.4rem,4vw,2rem);margin-top:clamp(1.8rem,4vw,2.4rem);max-width:520px;
}
.recu-tete{display:flex;align-items:center;gap:.6rem;margin-bottom:.8rem}
.recu-tete svg{color:var(--fluo);flex:none}
.recu-tete b{font-family:var(--display);font-weight:600;font-size:1.2rem}
.recu p{color:var(--craie-70);font-size:.98rem;line-height:1.65;margin-bottom:.8rem}
.recu p:last-child{margin-bottom:0;font-size:.86rem;color:var(--craie-45)}
.recu .quand{color:var(--fluo)}
.horaires{
  margin-top:1.6rem;font-size:.86rem;color:var(--craie-45);line-height:1.6;
  display:flex;align-items:flex-start;gap:.6rem;max-width:44ch;
}
.horaires svg{flex:none;margin-top:.25rem;color:var(--craie-45)}

/* ---------- Le pied de page ---------- */
.pied{
  border-top:1px solid var(--ligne);
  padding:clamp(2.6rem,6vw,4rem) var(--gouttiere) clamp(2rem,4vw,2.6rem);
}
.pied-inner{
  max-width:var(--max);margin:0 auto;
  display:grid;gap:2.2rem;
}
@media (min-width:760px){.pied-inner{grid-template-columns:1.5fr 1fr 1fr;gap:3rem}}
.pied-marque{
  display:flex;align-items:center;gap:.55rem;
  font-family:var(--display);font-weight:600;font-size:1.35rem;letter-spacing:-.035em;
}
.pied-marque .point{width:10px;height:10px;border-radius:3px;background:var(--fluo);flex:none}
.pied-mot{color:var(--craie-45);font-size:.92rem;margin-top:.9rem;max-width:34ch;line-height:1.65}
.pied h2{
  font-family:var(--sans);font-size:.74rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--craie-49);margin-bottom:.9rem;
}
.pied ul{list-style:none;display:flex;flex-direction:column;gap:.55rem}
.pied li{color:var(--craie-45);font-size:.92rem}
/* la raison sociale : presente, sans voler la vedette au nom */
.pied-societe{color:var(--craie-49);font-size:.82rem}
.pied a{color:var(--craie-45);text-decoration:none;transition:color .2s}
.pied a:hover,.pied a:focus-visible{color:var(--fluo)}
.pied-bas{
  max-width:var(--max);margin:clamp(2.2rem,5vw,3rem) auto 0;
  padding-top:1.3rem;border-top:1px solid var(--ligne);
  display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.4rem;
  font-size:.82rem;color:var(--craie-49);
}
.pied-bas a{color:inherit;text-decoration:underline;text-decoration-color:var(--craie-decor);text-underline-offset:3px}
.pied-bas a:hover,.pied-bas a:focus-visible{color:var(--fluo);text-decoration-color:var(--fluo)}
/* Le curseur clignote encore ici : la page attend qu'on lui écrive,
   jusqu'à la dernière ligne. */
.pied-curseur{
  width:8px;height:15px;border-radius:2px;background:var(--fluo);
  margin-left:auto;animation:curseur 2.6s ease-in-out infinite;
}
@media (prefers-reduced-motion:reduce){.pied-curseur{animation:none}}

/* ---------- Le comparatif ---------- */
.compare{border:1px solid var(--ligne);border-radius:20px;background:var(--surface);padding:clamp(1.4rem,4vw,1.9rem)}
.compare h3{font-size:1.05rem;margin-bottom:1.3rem}
.ligne-bar{margin-bottom:1.15rem}
.ligne-bar .lab{display:flex;justify-content:space-between;gap:1rem;font-size:.88rem;color:var(--craie-70);margin-bottom:.4rem}
.ligne-bar .lab b{color:var(--craie);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.bar{height:9px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.bar i{display:block;height:100%;width:0;border-radius:999px;transition:width 1s cubic-bezier(.2,.8,.3,1)}
.bar.agence i{background:var(--craie-decor)}
.bar.normal i{background:var(--craie-45)}
.bar.lancement i{background:var(--fluo)}
.compare small{display:block;color:var(--craie-45);font-size:.82rem;line-height:1.55;margin-top:1rem}
.compare .trait{margin:1.4rem 0 1.1rem}
.compare h3+small{margin-top:0}

@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important}}

/* ---------- La phrase vivante ---------- */
/* L'idée : la page est en train d'être écrite. Le curseur fluo reste allumé
   après le dernier mot, comme si le pouce venait de se lever. Pas de cadre,
   pas de carte : la phrase EST la page, elle ne parle pas d'elle-même. */
.vivant{
  border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne);
  padding:clamp(2.4rem,7vw,4rem) var(--gouttiere);
}
.vivant-inner{max-width:var(--max);margin:0 auto}
.vivant-phrase{margin:0;border:0;padding:0}
.vivant-phrase p{
  font-family:var(--display);font-weight:600;
  font-size:clamp(1.5rem,4.6vw,2.5rem);line-height:1.16;letter-spacing:-.025em;
  color:var(--craie);text-wrap:balance;max-width:24ch;
}
.vivant-curseur{
  display:inline-block;vertical-align:-.08em;margin-left:.22em;
  width:.11em;height:.86em;border-radius:2px;background:var(--fluo);
  animation:curseur 2.6s ease-in-out infinite;
}
/* Espace fine des guillemets portée par le CSS : la police d'affichage n'a pas
   le glyphe U+202F et le rendait à zéro. */
.vivant-guil{color:var(--craie-45)}
.vivant-phrase p>.vivant-guil:first-child{margin-right:.13em}
.vivant-phrase p>.vivant-guil+ .vivant-guil,
.vivant-phrase p>span+.vivant-guil{margin-left:.13em}
.vivant-recu{
  display:flex;align-items:flex-start;gap:.55rem;
  margin-top:1.4rem;font-size:.86rem;color:var(--craie-49);max-width:52ch;
}
.vivant-pt{
  width:7px;height:7px;border-radius:50%;background:var(--fluo);flex:none;
  margin-top:.42em;
  animation:direct-battement 2.4s ease-in-out infinite;
}
@media (prefers-reduced-motion:reduce){
  .vivant-curseur,.vivant-pt{animation:none}
}

/* ---------- L'échelle des paliers ---------- */
/* Le visiteur ne compte pas des places qui disparaissent, il lit un prix qui
   monte. Le barreau du bas est barré, celui du milieu est allumé, celui du
   haut attend. On monte l'escalier dans le sens de la lecture. */
.echelle{
  list-style:none;margin:1.5rem 0 0;padding:0;
  border:1px solid var(--ligne);border-radius:14px;overflow:hidden;
}
.echelle li{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding:.62rem .9rem;font-size:.88rem;color:var(--craie-49);
}
.echelle li+li{border-top:1px solid var(--ligne)}
.echelle-prix{font-weight:600;font-variant-numeric:tabular-nums}
.echelle li.passe{color:var(--craie-45);opacity:.55}
.echelle li.passe .echelle-prix{text-decoration:line-through}
.echelle li.ici{
  background:color-mix(in srgb, var(--fluo) 12%, transparent);
  color:var(--craie);
}
.echelle li.ici .echelle-prix{color:var(--fluo);font-size:1.02rem}
.echelle-mot{margin-top:.85rem;font-size:.86rem;color:var(--craie-70);line-height:1.55}
/* Le bâton du palier en cours : ni pris, ni lointain. */
.tally-barres i.ici{background:color-mix(in srgb, var(--fluo) 45%, transparent)}

/* ---------- Les deux preuves clients ---------- */
/* Deux encadrés lus chez les clients. Sur téléphone ils s'empilent, sur écran
   large ils se répondent : l'un montre qu'elle s'en sert, l'autre ce que ça
   rapporte. */
.preuves-clients{display:grid;gap:1.1rem}
@media (min-width:860px){
  .preuves-clients{grid-template-columns:1.15fr 1fr;align-items:start}
}
.preuves-clients>*{min-width:0}
.resa-gros{
  display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;
  margin:1.4rem 0 .2rem;
}
.resa-gros b{
  font-family:var(--display);font-weight:600;font-size:clamp(3rem,13vw,4.6rem);
  line-height:.92;letter-spacing:-.04em;color:var(--fluo);
  font-variant-numeric:tabular-nums;
}
.resa-gros span{font-size:1.05rem;color:var(--craie);font-weight:600}
.resa-sous{font-size:.95rem;color:var(--craie-70);margin-bottom:1.2rem}
.resa-sous b{color:var(--craie);font-weight:600;font-variant-numeric:tabular-nums}

/* ---------- L'app ---------- */
/* Le bouton d'installation vit dans le menu, au même rang que les liens : on
   ne mendie pas l'installation par une bannière qui recouvre la page. */
.menu-app{
  font-family:var(--display);font-weight:600;font-size:clamp(1.8rem,8vw,2.5rem);
  letter-spacing:-.03em;color:var(--fluo);background:none;border:0;
  padding:.4rem 0;margin-top:.6rem;text-align:left;cursor:pointer;
  display:flex;align-items:center;gap:.5rem;
}
.menu-app span{font-size:.55em}
.menu-app:hover,.menu-app:focus-visible{opacity:.75}
.menu-geste{
  margin-top:.9rem;font-size:.92rem;line-height:1.6;color:var(--craie-49);max-width:34ch;
}
.menu-geste b{color:var(--craie-70);font-weight:600}
/* Une fois le bandeau dépassé, l'en-tête est en haut de l'écran : en mode app
   sur iPhone elle passerait sous l'heure et la batterie sans ce retrait. */
.entete.epingle .entete-inner{padding-top:calc(.75rem + env(safe-area-inset-top,0px))}