/* Site vitrine CléOS v5 — « Une journée avec CléOS » (12/10/2026, refonte « page produit » du soir).
   Un seul monde chromatique : la page est un film qu'on descend. L'entrée est noire ; la première scène hérite de ce noir ; puis la
   lumière suit la journée (--lum de 0, la nuit, à 1, le plein jour — interpolée au défilement par site.js), retombe à 22:00, et la
   fin (prix, pari, qui je suis, rendez-vous) est claire et calme. Une seule couleur d'accent : le vert CléOS. Pile système.
   Les écrans du logiciel sont les vedettes ; le gros plan est un élément à part (carte nette), jamais un zoom qui coupe.
   Tout le mouvement est en transform/opacité ; mouvement réduit = scènes statiques, états finaux. Aucune ressource externe. */
:root{
  --fond-nuit:#0f1214; --fond-jour:#f7f8f6; --encre-nuit:#f1f4f2; --encre-jour:#121715;
  --fond:var(--fond-jour); --encre:var(--encre-jour);
  --encre-2:#4b5551; --encre-3:#7b8580; --trait:#e3e6e2; --trait-2:#d4d8d3; --carte:#ffffff;
  --vert:#0f6e56; --vert-vif:#2bb58c; --vert-pale:#e3f1eb; --vert-texte:#0b6b53; --halo:#1aa384;
  --accent:var(--vert); --accent-texte:var(--vert-texte); --accent-pale:var(--vert-pale);
  --ombre:0 40px 80px -30px rgba(0,0,0,.55);
  --ombre-carte:0 1px 2px rgba(16,24,22,.05), 0 12px 32px -18px rgba(16,24,22,.18);
  --police:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  --max:1180px; --gout:20px; --r:22px; --r-s:14px;
  color-scheme:light;
}
/* La nuit (scènes sombres, entrée) : une classe posée par site.js, jamais une interpolation de couleur sur tout le document. */
html.nuit{--fond:var(--fond-nuit);--encre:var(--encre-nuit);--encre-2:#b3bcb7;--encre-3:#86908a;--trait:#2b3236;--trait-2:#363e42;--carte:#1a1f23;--accent:var(--vert-vif);--accent-texte:#7fdcbc;--accent-pale:#163128}
/* Mode sombre : le « jour » est un anthracite profond, jamais noir pur ; les écrans du logiciel restent lisibles. */
:root[data-theme="sombre"]{--fond-jour:#1b2024;--encre-jour:#eef2ef;--encre-2:#b3bcb7;--encre-3:#86908a;--trait:#2b3236;--trait-2:#363e42;--carte:#242a2f;--vert:#2bb58c;--vert-texte:#7fdcbc;--vert-pale:#163128;--ombre-carte:0 1px 2px rgba(0,0,0,.35), 0 12px 32px -18px rgba(0,0,0,.6);color-scheme:dark}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="clair"]){--fond-jour:#1b2024;--encre-jour:#eef2ef;--encre-2:#b3bcb7;--encre-3:#86908a;--trait:#2b3236;--trait-2:#363e42;--carte:#242a2f;--vert:#2bb58c;--vert-texte:#7fdcbc;--vert-pale:#163128;--ombre-carte:0 1px 2px rgba(0,0,0,.35), 0 12px 32px -18px rgba(0,0,0,.6);color-scheme:dark}
}
/* Le voile de nuit : un calque fixe, noir, dont seule l'opacité bouge (compositeur) ; derrière le contenu, devant le fond. */
#voile{position:fixed;inset:0;background:var(--fond-nuit);opacity:0;pointer-events:none;z-index:-1;will-change:opacity}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip;background:var(--fond-jour)}
body{font-family:var(--police);background:var(--fond-jour);color:var(--encre);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:clip;transition:color .4s}
html.nuit body{background:transparent}
@media (min-width:900px){body{font-size:18px}}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:8px}
.sr,.evitement{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.evitement:focus{position:fixed;top:8px;left:8px;width:auto;height:auto;clip:auto;background:var(--encre);color:var(--fond);padding:8px 12px;z-index:100;border-radius:8px}
.cadre{width:min(var(--max),calc(100% - 2 * var(--gout)));margin-inline:auto}
.etroit{max-width:760px}
h1,h2,h3{font-weight:700;letter-spacing:-.045em;line-height:1.02;text-wrap:balance}
h2{font-size:clamp(2.6rem,6vw,5.6rem)}
h3{font-size:clamp(1.5rem,2.4vw,2rem);letter-spacing:-.03em}
.sur-titre{font-size:.85rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--accent-texte)}
.sur-titre b{font-weight:700;text-transform:none;letter-spacing:0;font-size:1.05em}

/* ───────────── Boutons ───────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:999px;padding:15px 24px;font-weight:600;font-size:1rem;text-decoration:none;border:0;cursor:pointer;
  background:var(--accent);color:#fff;box-shadow:0 10px 24px -12px rgba(15,110,86,.6);transition:filter .15s,transform .15s;white-space:nowrap}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:scale(.98)}
.btn-second{background:transparent;color:var(--encre);border:1.5px solid var(--trait-2);box-shadow:none}
.btn-second:hover{background:var(--trait)}
.btn-petit{padding:9px 16px;font-size:.92rem;box-shadow:none}
.btn-large{width:100%;padding:17px 24px;font-size:1.05rem}

/* ───────────── En-tête (disparaît pendant le récit) ───────────── */
.haut{position:fixed;top:0;left:0;right:0;z-index:30;transition:opacity .4s,transform .4s;background:color-mix(in srgb,var(--fond) 92%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--trait)}
.haut .cadre{display:flex;align-items:center;justify-content:space-between;gap:12px;height:64px}
html.recit .haut{opacity:0;visibility:hidden;transform:translateY(-8px);pointer-events:none}
.marque{display:inline-flex;align-items:center;gap:12px;font-style:normal;font-weight:800;font-size:1.35rem;letter-spacing:-.03em;text-decoration:none;line-height:1}
.marque i{font-style:normal;white-space:nowrap;letter-spacing:-.03em}
.marque b{color:var(--accent)}
.marque span{font-weight:500;font-size:.85rem;color:var(--encre-3);letter-spacing:0;padding-left:12px;border-left:1px solid var(--trait-2)}
.haut-droite{display:flex;align-items:center;gap:10px}
.theme{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--trait-2);background:transparent;color:var(--encre-2);cursor:pointer;display:grid;place-items:center;flex:none}
.progression{display:none}
/* Le menu (14/10 soir) : trois traits qui deviennent une croix ; un panneau sobre sous l'en-tête (carte à droite sur ordinateur,
   pleine largeur sur téléphone). Ancres : la marge de défilement garde le titre sous l'en-tête fixe (64 px + air). */
.menu-bouton{width:40px;height:40px;border-radius:50%;border:0;background:transparent;color:var(--encre);cursor:pointer;display:grid;place-items:center;flex:none;margin-right:-6px}
.menu-bouton:hover{background:var(--trait)}
.menu-traits{position:relative;width:20px;height:14px;display:block}
.menu-traits i{position:absolute;left:0;right:0;height:2px;border-radius:2px;background:currentColor;transition:transform .25s ease,opacity .2s ease}
.menu-traits i:nth-child(1){top:0}.menu-traits i:nth-child(2){top:6px}.menu-traits i:nth-child(3){top:12px}
.menu-bouton[aria-expanded="true"] .menu-traits i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-bouton[aria-expanded="true"] .menu-traits i:nth-child(2){opacity:0}
.menu-bouton[aria-expanded="true"] .menu-traits i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.menu-panneau{position:absolute;top:100%;left:0;right:0;pointer-events:none}
.menu-panneau[hidden]{display:none}
.menu-panneau ul{list-style:none;display:grid;grid-template-columns:1fr;pointer-events:auto;width:300px;padding:8px;margin:8px max(var(--gout),calc((100% - var(--max)) / 2)) 0 auto;
  background:var(--carte);border:1px solid var(--trait);border-radius:var(--r-s);box-shadow:var(--ombre-carte),0 24px 48px -24px rgba(0,0,0,.35);animation:menu-entre .2s ease}
@keyframes menu-entre{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.menu-panneau a,.theme-menu{display:block;width:100%;text-align:left;padding:12px 14px;border-radius:10px;font-size:1.02rem;font-weight:600;letter-spacing:-.01em;color:var(--encre);text-decoration:none;background:transparent;border:0;cursor:pointer}
.menu-panneau a:hover,.theme-menu:hover{background:var(--trait)}
.menu-theme{display:none;border-top:1px solid var(--trait);margin-top:6px;padding-top:6px}
.theme-menu{font-weight:500;color:var(--encre-2);font-size:.95rem}
#gabriel,#cleos-price,#portes,#prix,#equipe,#rendez-vous{scroll-margin-top:65px}      /* = en-tête (64 px + filet) : le bloc commence pile dessous, sans liseré du bloc précédent */
main section[tabindex="-1"]:focus{outline:none}
@media (prefers-reduced-motion:reduce){.menu-panneau ul{animation:none}.menu-traits i{transition:none}}
/* Téléphone : plus la place pour le bouton rond du thème à côté du bouton et du menu ; le thème passe dans le menu */
@media (max-width:560px){
  .haut .theme{display:none}
  .menu-theme{display:block}
  .haut-droite{gap:6px}
  .menu-panneau ul{width:auto;margin:0;border-radius:0 0 var(--r-s) var(--r-s);border-width:0 0 1px;padding:8px var(--gout) 12px;grid-template-columns:1fr}
  .menu-panneau a,.theme-menu{padding:14px 4px;font-size:1.1rem;border-bottom:1px solid var(--trait);border-radius:0}
  .menu-panneau li:nth-last-child(2) a,.theme-menu{border-bottom:0}
  .menu-theme{border-top:1px solid var(--trait);margin-top:0;padding-top:0}
}

/* ═══════════════ L'ENTRÉE — une affiche pleine largeur, noire ═══════════════ */
.entree{position:fixed;inset:0;z-index:80;background:var(--fond-nuit);color:#f3f5f3;display:grid;place-items:center;padding:24px;overflow:hidden;transition:opacity .9s ease}
.entree[hidden]{display:none}
html.entree-ouverte{overflow:hidden}
.entree.sortie{opacity:0;pointer-events:none}
.entree.sortie::before,.entree.valide::before{animation:none}
.entree::before{content:"";position:absolute;inset:-30%;background:radial-gradient(42% 40% at 50% 62%,rgba(43,181,140,.2),transparent 70%);pointer-events:none;animation:respire 9s ease-in-out infinite alternate}
@keyframes respire{from{transform:scale(.92) translateY(2%);opacity:.7}to{transform:scale(1.06) translateY(-2%);opacity:1}}
.entree-filigrane{position:absolute;left:0;right:0;bottom:2vh;display:grid;place-items:end center;pointer-events:none;font-weight:700;font-size:clamp(4.5rem,13vw,13rem);letter-spacing:-.06em;color:#fff;opacity:.03;font-variant-numeric:tabular-nums;line-height:1;transition:opacity .8s;z-index:0}
.entree-carte{z-index:1}
.entree.valide .entree-filigrane{opacity:.06}
.entree-carte{position:relative;width:min(760px,100%);display:grid;gap:16px;justify-items:center;text-align:center;transition:opacity .4s ease,transform .4s ease}
.entree.valide .entree-carte{opacity:0;transform:translateY(-12px) scale(.98);pointer-events:none}
.entree-marque{font-weight:800;font-size:1.5rem;letter-spacing:-.03em;color:#fff;margin-bottom:clamp(14px,3vh,34px)}
.entree-marque b{color:#43c79f}
.entree-phrase{font-size:clamp(2.2rem,5.4vw,4.6rem);font-weight:700;letter-spacing:-.045em;line-height:1;color:#fff;margin-bottom:clamp(18px,3.5vh,40px);text-wrap:balance;max-width:14ch}
.entree-phrase em{font-style:normal;color:#43c79f}
.entree-label{font-size:.85rem;font-weight:600;color:#a9b3ad;letter-spacing:.02em}
.entree-champ{width:min(440px,100%);font-size:1.15rem;font-weight:500;text-align:center;padding:14px 18px;border-radius:14px;border:1.5px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:#fff;transition:border-color .15s,background .15s}
.entree-champ::placeholder{color:#6f7a74}
.entree-champ:focus{outline:none;border-color:#43c79f;background:rgba(255,255,255,.09)}
.entree .btn{width:min(440px,100%);background:#2bb58c;color:#0b2a21;box-shadow:0 12px 30px -12px rgba(43,181,140,.7)}
.entree-sans{background:none;border:0;color:#a9b3ad;font-size:.92rem;cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:6px}
.entree-sans:hover{color:#fff}
.entree-note{font-size:.78rem;color:#6f7a74}
.entree-transition{position:absolute;inset:0;display:grid;place-content:center;gap:14px;text-align:center;opacity:0;pointer-events:none;transition:opacity .4s ease .2s}
.entree.valide .entree-transition{opacity:1}
.entree-nom-grand{font-size:clamp(2.6rem,10vw,9rem);font-weight:700;letter-spacing:-.05em;line-height:.98;color:#fff;max-width:min(92vw,12ch);margin-inline:auto;text-wrap:balance;transform-origin:center;will-change:transform,opacity}
.entree.pose .entree-nom-grand{transition:transform 1s cubic-bezier(.2,.8,.2,1),opacity .6s ease .5s;opacity:0}
.entree-lib{font-size:1.05rem;color:#a9b3ad;font-weight:500;transition:opacity .4s}
.entree.pose .entree-lib{opacity:0}

/* ═══════════════ LES SCÈNES ═══════════════ */
.journee{position:relative}
.scene{position:relative;height:220svh;--p:0;
  --ka:clamp(0,calc((var(--p) + .04) / .2),1);            /* l'appareil monte */
  --kb:clamp(0,calc((var(--p) - .26) / .13),1);    /* le détail sort, et il est opaque dès 39 % */
  --kc:clamp(0,calc((var(--p) - .52) / .16),1);    /* la parole ; l'appareil en retrait */
  --kd:clamp(0,calc((var(--p) - .44) / .06),1);    /* la légende s'efface avant la parole */
  --kt:clamp(0,calc(var(--p) / .06),1)}            /* le titre entre dès les premiers pixels */
.scene.longue{height:300svh}
@property --p{syntax:"<number>";inherits:true;initial-value:0}
@supports (animation-timeline: view()){
  .scene{animation:course linear both;animation-timeline:view();animation-range:contain 0% contain 100%}
  @keyframes course{from{--p:0}to{--p:1}}
}
.scene-fixe{position:sticky;top:0;height:100svh;overflow:hidden;contain:layout style paint}
.scene.active .tel,.scene.active .ordi,.scene.active .detail,.scene.active .scene-parole,.scene.active .scene-titre{will-change:transform,opacity}
.scene-grille{position:relative;height:100%;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr;gap:0 clamp(24px,5vw,80px);align-items:center;padding:clamp(56px,8vh,80px) 0 clamp(24px,4vh,48px)}
/* v6b : les écrans ordinateur (enregistrés à 960 px) prennent une colonne plus large pour que le texte du logiciel reste lisible (≥ 11 px à 1440) */
.scene.app-ordi .scene-grille{grid-template-columns:1fr 1.5fr}
.scene.app-ordi.gauche .scene-grille{grid-template-columns:1.5fr 1fr}
.scene.app-ordi .scene-titre,.scene.app-ordi .scene-parole{max-width:30rem}
.scene.app-ordi h2{font-size:clamp(2.2rem,3.9vw,3.8rem)}
/* ÉCARTS 13/10 (etudes/site-cleos-v6-1310/ECARTS.md) : le titre ne s'éteint plus tout à fait pendant le gros plan (n° 5), le titre tient en
   3 lignes sur ordinateur pour que la parole reste à l'écran (n° 3), le téléphone est borné par la hauteur de la fenêtre (n° 1), le gros plan
   se centre dans la colonne de l'appareil et s'efface avec la parole (n° 4), l'appareil se colle à la marge du cadre (n° 9). */
.scene-titre{grid-column:1;grid-row:1;align-self:start;position:relative;z-index:3;opacity:calc(1 - var(--kb) * .65);transform:translateY(calc(var(--kb) * -16px))}
.scene.gauche .scene-titre{grid-column:2}
.scene .heure{position:relative;line-height:1;margin-bottom:8px}
.scene .heure time{font-weight:700;font-size:clamp(4.4rem,12vw,11rem);letter-spacing:-.06em;line-height:1;color:var(--accent);opacity:.22;font-variant-numeric:tabular-nums;display:block}
.scene .chez{display:block;font-size:.95rem;font-weight:500;color:var(--encre-3);margin-top:8px}
.scene .chez b{font-weight:600;color:var(--encre-2)}
.scene h2{margin-top:10px;max-width:13ch;font-size:clamp(2.4rem,4.6vw,4.4rem);opacity:var(--kt);transform:translateY(calc((1 - var(--kt)) * 14px))}
.scene-ecran{grid-column:2;grid-row:1 / 3;position:static;margin:0;display:grid;place-items:center;height:100%;min-height:0;z-index:1}
.scene.app-tel .scene-ecran{align-items:start;justify-items:end;padding-top:4vh}
.scene.gauche .scene-ecran{grid-column:1}
.scene.gauche.app-tel .scene-ecran{justify-items:start}
.scene-parole{grid-column:1;grid-row:2;align-self:end;position:relative;z-index:3;opacity:var(--kc);transform:translateY(calc((1 - var(--kc)) * 20px));max-width:34rem}
.scene.gauche .scene-parole{grid-column:2}

/* appareils */
.tel,.ordi{position:relative;transition:none;opacity:var(--ka);transform:translateY(calc((1 - var(--ka)) * 14svh)) scale(calc(1 - var(--kc) * .06))}
.tel .dedans::after,.ordi .img::after{content:"";position:absolute;inset:0;background:#000;opacity:calc(var(--kb) * .22 + var(--kc) * .08);pointer-events:none;z-index:4}
/* v6b : tout ce qui est dessiné DANS le téléphone est en unités de sa largeur (cqw sur .tel) : barre d'état, heure, nom, encoche —
   plus rien en px fixes qui déborde sur un petit écran (320 px) ou flotte sur un grand (440 px) */
.tel{width:min(500px,40vw,calc((100svh - 200px) / 2.05));margin:0;border-radius:clamp(22px,17cqw,44px);border:clamp(3px,2.3cqw,6px) solid #0b0e10;background:#0b0e10;box-shadow:var(--ombre);container-type:inline-size}
.tel .encoche{position:absolute;top:4cqw;left:50%;transform:translateX(-50%);width:22%;height:5.4cqw;background:#0b0e10;border-radius:999px;z-index:3}
.tel .dedans{border-radius:clamp(18px,15cqw,38px);overflow:hidden;position:relative;background:#fff;padding-top:18.5cqw;aspect-ratio:10/19.5}
.tel .dedans::before{content:attr(data-h);position:absolute;top:0;left:0;right:0;height:18.5cqw;display:flex;align-items:flex-start;padding:3.5cqw 8.5cqw 0;font-size:4.6cqw;font-weight:700;color:#111;z-index:2;background:#fff}
.tel-nom{position:absolute;top:10.8cqw;left:50%;transform:translateX(-50%);height:7cqw;line-height:7cqw;display:block;font-size:3.85cqw;font-weight:600;color:#0f6e56;z-index:2;max-width:84%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:center}
.tel .dedans .img{position:relative}
.tel .dedans img{width:100%}
.ordi{width:100%;border-radius:18px;overflow:hidden;background:#fff;box-shadow:var(--ombre);border:1px solid rgba(0,0,0,.06)}
.ordi .img{position:relative}
.img,.dedans{container-type:inline-size}
.nom-calque{position:absolute;display:block;white-space:normal;overflow:hidden;line-height:1.45;font-family:var(--police);letter-spacing:0;padding-right:3%;z-index:2}
/* l'écran qui bouge (v6) : la vidéo prend la place de l'image ; le calque du nom est du texte seul, sur fond transparent,
   borné au nombre de lignes d'origine (ellipse) ; le bouton n'apparaît qu'en mouvement réduit ou si la lecture est refusée */
.ecran-video video{display:block;width:100%;height:auto;background:#f5f5f7}
.nom-video{padding:0;background:transparent;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;word-break:break-word;pointer-events:none}
.nom-video[hidden]{display:none}
.ecran-video .lire{position:absolute;left:50%;bottom:18%;transform:translateX(-50%);z-index:5;display:inline-flex;align-items:center;gap:8px;padding:9px 16px 9px 10px;border-radius:999px;border:0;background:rgba(15,18,20,.78);color:#fff;font-weight:600;font-size:.9rem;cursor:pointer;white-space:nowrap;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.ecran-video .lire[hidden]{display:none}
.ecran-video .lire svg{width:22px;height:22px;border-radius:50%;background:var(--vert-vif);color:#fff;padding:4px}

/* le gros plan : un élément à part, net, qui vient se poser devant / à côté */
.detail{position:absolute;z-index:6;width:clamp(min(440px,86vw),calc(var(--dw,520px) * 1.12),min(680px,47vw));left:74%;top:52%;transform:translate(-50%,-50%) translateY(calc((1 - var(--kb)) * 40px)) scale(calc(.94 + var(--kb) * .06));opacity:calc(var(--kb) * (1 - var(--kc)));
  border-radius:16px;overflow:visible;box-shadow:0 30px 70px -24px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.06);background:#fff;transition:none}
.scene.gauche .detail{left:26%}
.detail img{width:100%;max-height:70svh;object-fit:contain;object-position:top;border-radius:16px;display:block}
.detail::before{content:"";position:absolute;inset:-6px;border-radius:21px;border:2px solid var(--halo);box-shadow:0 0 0 6px color-mix(in srgb,var(--halo) 16%,transparent);pointer-events:none;opacity:var(--kb)}
.detail .etiq{position:absolute;left:50%;top:calc(100% + 22px);transform:translateX(-50%);opacity:calc(1 - var(--kd));display:inline-flex;align-items:center;gap:8px;white-space:nowrap;background:var(--carte);color:var(--encre);font-weight:600;font-size:13px;padding:8px 14px 8px 10px;border-radius:999px;box-shadow:var(--ombre-carte);max-width:calc(100vw - 40px)}
.detail .etiq::before{content:"";position:absolute;left:50%;bottom:100%;width:1px;height:22px;background:var(--trait-2)}
.detail .etiq i{width:8px;height:8px;border-radius:50%;background:var(--halo)}


/* la parole */
.voix{position:relative;background:var(--carte);border:1px solid var(--trait);border-radius:var(--r-s);padding:18px 20px;box-shadow:var(--ombre-carte)}
.voix-texte{font-size:1.02rem;line-height:1.5;color:var(--encre)}
.voix footer{margin-top:10px;font-size:.85rem;font-weight:600;color:var(--encre-3)}
.voix footer::before{content:"— "}
.voix footer b{color:var(--accent-texte)}
.ecoute{display:inline-flex;align-items:center;gap:8px;margin:0 0 12px;padding:7px 14px 7px 8px;border-radius:999px;border:1.5px solid var(--trait-2);background:var(--carte);cursor:pointer;font-weight:600;font-size:.9rem;color:var(--encre)}
.ecoute svg{width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff;padding:3px}
.pas-eu{display:flex;gap:10px;align-items:center;margin-top:16px;font-weight:700;font-size:clamp(1.1rem,1.6vw,1.35rem);letter-spacing:-.02em;color:var(--encre)}
.pas-eu svg{color:var(--accent);flex:none}
.preuve-bug{margin-top:12px;color:var(--encre-2);font-size:.98rem;line-height:1.5}
.defiler{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);width:36px;height:36px;border-radius:50%;border:1.5px solid var(--trait-2);display:grid;place-items:center;color:var(--encre-2);z-index:5;opacity:calc(1 - var(--ka) * 3);animation:descend 1.8s ease-in-out infinite}
@keyframes descend{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,4px)}}

/* ═══════════════ LA FIN : prix, pari, qui je suis, invitation ═══════════════ */
.bloc{padding:clamp(72px,10vh,120px) 0;scroll-margin-top:72px;content-visibility:auto;contain-intrinsic-block-size:auto 80svh}
#compteur,#pari,#qui,#rendez-vous{scroll-margin-top:88px}
.prix.bloc{padding-top:clamp(120px,16vh,170px)}      /* sous l'en-tête fixe, qui revient après le récit */
.prix.bloc{padding-top:clamp(110px,16vh,160px)}
.bloc-tete{text-align:center;max-width:720px;margin:0 auto clamp(32px,5vh,56px)}
.bloc-tete h2{margin-top:12px}
.prix-grille{display:grid;gap:22px;align-items:start;grid-template-columns:1.15fr .85fr}
.carte{background:var(--carte);border:1px solid var(--trait);border-radius:var(--r);padding:clamp(22px,3vw,34px);box-shadow:var(--ombre-carte)}
.compteur .engagement{margin:0 0 18px}
.compteur .socle{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin:0}
.compteur .socle>b{font-size:clamp(2.6rem,5vw,3.6rem);font-weight:700;letter-spacing:-.04em;line-height:1;color:var(--accent)}
.compteur .socle span{font-size:1rem;color:var(--encre-2);line-height:1.4;flex:1 1 14rem}
.compteur .socle span b{color:var(--encre);font-weight:600;white-space:nowrap}
.socle-suite{font-size:.92rem;color:var(--encre-3);margin:6px 0 18px;padding-bottom:18px;border-bottom:1px solid var(--trait)}
.moyenne{margin:8px 0 18px;font-size:.98rem;color:var(--encre-2)}
.moyenne b{color:var(--encre);font-weight:600}
.note-bas{font-size:.85rem;color:var(--encre-3);margin-top:10px}
.compteur-tete{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:22px}
.compteur-tete .lib{font-weight:600}
.compteur .pas{display:flex;align-items:center;gap:10px}
.compteur .n{font-size:1.6rem;font-weight:700;letter-spacing:-.03em;min-width:2.4ch;text-align:center;font-variant-numeric:tabular-nums}
.rond{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--trait-2);background:var(--carte);font-size:1.3rem;font-weight:600;cursor:pointer;display:grid;place-items:center;line-height:1;flex:none;color:var(--encre-2)}
.rond:hover{background:var(--trait)}
.compteur input[type=range]{width:100%;margin:12px 0 18px;accent-color:var(--accent);height:32px}
.total{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px}
.total span{font-size:clamp(2rem,3.6vw,2.6rem);font-weight:700;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.total small{font-size:1rem;color:var(--encre-2)}
.total small b{color:var(--encre);white-space:nowrap}
.detail-prix,.suite{margin-top:8px;font-size:.95rem;color:var(--encre-2)}
.suite b{color:var(--encre);font-weight:600}
.engagement{border:0;display:inline-flex;background:var(--trait);border-radius:999px;padding:4px;margin:20px 0 10px;gap:4px}
.engagement .choix{position:relative;cursor:pointer}
.engagement input{position:absolute;opacity:0;width:1px;height:1px;left:0;top:0}
.engagement span{display:inline-block;padding:9px 16px;border-radius:999px;font-weight:600;font-size:.92rem;color:var(--encre-2)}
.engagement input:checked+span{background:var(--accent);color:#fff}
.engagement input:focus-visible+span{outline:3px solid var(--accent);outline-offset:2px}
.engagement-note{font-size:.9rem;color:var(--encre-3);line-height:1.5}
.garanties{list-style:none;display:grid;gap:8px;margin-top:20px;border-top:1px solid var(--trait);padding-top:16px}
.garanties li{display:flex;align-items:center;gap:10px;font-weight:600;font-size:1rem;white-space:nowrap}
.garanties li svg{color:var(--accent);flex:none}
.garanties sup a{color:var(--accent-texte);text-decoration:none;margin-left:2px}
/* v6b : l'exemple « 0 % de commission » — trois chiffres sur une ligne, puis la phrase ; sobre, pas d'encadré */
.exemple-commission{margin-top:16px;padding-top:14px;border-top:1px solid var(--trait)}
.exemple-chiffres{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:.95rem;color:var(--encre-2)}
.exemple-chiffres b{color:var(--encre);font-weight:700;font-variant-numeric:tabular-nums}
.exemple-chiffres i{width:4px;height:4px;border-radius:50%;background:var(--encre-3)}
.exemple-texte{margin-top:8px;font-size:.9rem;color:var(--encre-3);line-height:1.5}
.formulaire .fin.offre{color:var(--encre-2);font-weight:600;margin-top:4px}
.lancement{background:var(--accent-pale);border-color:transparent}
.lancement-chiffre{font-size:clamp(3.4rem,7vw,5.2rem);font-weight:700;letter-spacing:-.05em;line-height:1;color:var(--accent);margin:10px 0 6px}
.lancement h3{margin:0 0 10px;font-size:clamp(1.3rem,2vw,1.6rem)}
.lancement .sign{font-size:.95rem;color:var(--encre-2);line-height:1.5;margin-bottom:18px}
.lancement-places{display:inline-block;font-size:.85rem;font-weight:600;color:var(--accent-texte);border:1.5px solid currentColor;border-radius:999px;padding:4px 12px;margin:0 0 14px}
/* ───────────── 14/10 : bandeau de lancement, Gabriel, CléOS Price, conclusion ───────────── */
.bandeau-lancement{position:relative;z-index:2;background:var(--accent-pale);color:var(--encre);border-bottom:1px solid var(--trait)}
.bandeau-lancement p{max-width:1180px;margin:0 auto;padding:12px 16px;font-size:.92rem;line-height:1.45;text-align:center;text-wrap:balance}
.bandeau-lancement b{color:var(--accent-texte);font-weight:700;margin-right:4px}
.bandeau-lancement .bandeau-places{font-weight:600;white-space:nowrap}
.bandeau-lancement a{color:var(--accent-texte);font-weight:600;white-space:nowrap;text-underline-offset:3px;margin-left:4px}
.plateformes{font-size:.95rem;color:var(--encre-3);max-width:34rem;margin:0}
/* 14/10 soir : l'offre de l'écran d'entrée était trop discrète (.88rem, sans repère) — une pastille verte pleine, puis la phrase en
   blanc presque pur, plus grande ; un cadre très léger la sépare du bouton principal sans lui voler la vedette. */
.entree-offre{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 12px;margin:10px 0 0;max-width:34rem;padding:12px 16px;
  border:1px solid rgba(67,199,159,.35);border-radius:16px;background:rgba(43,181,140,.1);font-size:clamp(.98rem,.4vw + .85rem,1.08rem);line-height:1.45;color:#eef6f2;text-wrap:balance}
.entree-offre-pastille{flex:none;font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#0b2a21;background:#43c79f;border-radius:999px;padding:4px 10px;line-height:1.3}
.entree-offre-texte{font-weight:500}
/* 21/10 (2e appel Google Ads) : l'entrée n'a plus de champ — un seul bouton « Démarrer », un peu plus d'air au-dessus de l'offre. */
.entree #entree-demarrer{margin-top:4px}
/* L'encart de personnalisation, en haut de la page (2e temps de l'entrée) : sobre, centré, facultatif. Couleurs = variables du
   thème (la page est encore « de nuit » à cet endroit). */
.perso{position:relative;z-index:2;padding:clamp(22px,4vh,40px) 0 clamp(6px,2vh,18px)}
.perso[hidden]{display:none}
.perso-cadre{display:grid;justify-items:center;gap:10px;text-align:center}
.perso-ouvrir{max-width:100%;white-space:normal}
.perso-zone{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;width:min(520px,100%)}
.perso-zone[hidden],.perso-etat[hidden],.perso-ouvrir[hidden]{display:none}
.perso-champ{flex:1 1 220px;min-width:0;font-family:var(--police);font-size:1.02rem;font-weight:500;padding:12px 16px;border-radius:999px;border:1.5px solid var(--trait-2);background:var(--carte);color:var(--encre)}
.perso-champ:focus{outline:none;border-color:var(--accent)}
.perso-valider{padding:12px 22px}
.perso-etat{margin:0;color:var(--encre-2);font-size:.98rem;line-height:1.5}
.perso-etat b{color:var(--encre)}
.perso-lien{background:none;border:0;padding:2px 4px;font:inherit;font-size:.92rem;color:var(--accent-texte);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.perso-note{display:block;max-width:44ch;font-size:.78rem;line-height:1.45;color:var(--encre-3)}
.atout-grille{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);align-items:start}
.atout-tete h2{margin:10px 0 16px;font-size:clamp(2rem,4vw,3.4rem);text-wrap:balance}
.atout-chapo{font-size:clamp(1.05rem,1.1vw + .7rem,1.25rem);color:var(--encre-2);line-height:1.5;max-width:32rem;margin:0}
.atout-points{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.atout-points li{display:flex;gap:12px;align-items:flex-start;background:var(--carte);border:1px solid var(--trait);border-radius:var(--r-s,14px);padding:16px 18px;font-size:1rem;line-height:1.5;color:var(--encre)}
.atout-points svg{color:var(--accent);flex:none;margin-top:2px}
.atout-appel{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin:0}
.atout-appel small{color:var(--encre-3);font-size:.92rem}
.atout-corps{display:grid;gap:16px}
.atout-note{font-size:.95rem;color:var(--encre-2);line-height:1.5;margin:0}
.atout-bientot{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 12px;margin:0;padding-top:18px;border-top:1px solid var(--trait);color:var(--encre-2);font-size:.98rem;line-height:1.5}
.pastille{font-size:.75rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--accent-texte);background:var(--accent-pale);border-radius:999px;padding:4px 10px}
.conclusion-grille{display:grid;justify-items:center;text-align:center;gap:16px;max-width:820px}
.conclusion h2{margin:0;font-size:clamp(2.2rem,5vw,4rem);text-wrap:balance}
.conclusion-texte{font-size:clamp(1.05rem,1.1vw + .7rem,1.25rem);color:var(--encre-2);line-height:1.5;margin:0;max-width:40rem}
.conclusion-lancement{font-weight:600;color:var(--accent-texte);margin:0;max-width:40rem;line-height:1.45}
.conclusion-preuve{font-size:.9rem;color:var(--encre-3);margin:4px 0 0;max-width:36rem;line-height:1.5}
.conclusion.bloc{padding-bottom:clamp(24px,4vh,48px)}
@media (max-width:820px){
  .atout-grille{grid-template-columns:1fr}
  .bandeau-lancement p{font-size:.82rem;padding:10px 16px}
  .atout-appel .btn-large{width:100%;white-space:normal;text-align:center}
}
.zero-euro{margin-top:22px;max-width:860px}
.zero-euro h3{margin:4px 0 12px;font-size:clamp(1.3rem,2.2vw,1.7rem)}
.zero-euro p{color:var(--encre-2);line-height:1.55;margin:0 0 10px}
.zero-euro b{color:var(--encre);white-space:nowrap}
.lancement-montant{font-size:1rem;color:var(--encre-2);line-height:1.45;margin:0 0 18px}
.lancement-montant[hidden]{display:none}
.lancement-seuil{font-weight:600;color:var(--accent-texte)}
.lancement-montant b{color:var(--encre);font-weight:700;font-size:1.15rem;white-space:nowrap;font-variant-numeric:tabular-nums}
.pari-scene{min-height:80svh;display:grid;align-items:center;text-align:center}
.pari-grille{display:grid;justify-items:center;gap:16px;max-width:900px}
.pari-ico{display:grid;place-items:center;width:72px;height:72px;border-radius:24px;background:var(--accent-pale);color:var(--accent-texte)}
.pari-scene h2.carte{background:none;border:0;box-shadow:none;padding:0;font-size:clamp(2.2rem,5.4vw,4.8rem)}
.pari-scene .sign{font-size:1.05rem;color:var(--encre-2);max-width:38rem}
.qui-grille{display:grid;grid-template-columns:1fr;gap:clamp(24px,5vw,72px);align-items:center;max-width:980px;margin-inline:auto}
.qui-grille.avec-photo{grid-template-columns:minmax(220px,.8fr) 1.2fr}
.qui-photo{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r);box-shadow:var(--ombre-carte)}
.qui-nom{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center;margin:0 0 18px}
.qui-nom .rond-photo{grid-row:1 / 3}
.qui-nom b{font-weight:700;font-size:1.1rem;line-height:1.2}
.qui-nom span{color:var(--encre-2);font-size:.95rem;line-height:1.3}
.qui-texte .ecoute{margin-top:18px}
.qui-scene.bloc{padding-bottom:clamp(40px,6vh,64px)}
/* ───────────── L'équipe (v6) : Christopher en grand, puis les six assistants ───────────── */
.equipe-scene.bloc{padding-bottom:clamp(40px,6vh,64px)}
.equipe-grille{display:grid;gap:clamp(28px,4vh,48px);max-width:980px;margin-inline:auto}
.equipe-tete h2{margin-top:12px;max-width:16ch}
.equipe-christopher{display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,3vw,36px);align-items:start}
.equipe-christopher .qui-photo{width:clamp(96px,11vw,140px);aspect-ratio:1;border-radius:50%;object-fit:cover}      /* photo ronde (static/site/christopher.jpg, optionnelle) ; sinon le monogramme */
.rond-photo.initiales.grand{width:clamp(72px,9vw,112px);height:clamp(72px,9vw,112px);font-size:clamp(1.4rem,2.4vw,2.2rem)}
.equipe-texte .lead{max-width:40rem}
.equipe-texte .lead.premier{font-size:clamp(1.25rem,1.4vw + .8rem,1.7rem);color:var(--encre);font-weight:600;letter-spacing:-.015em}
.assistants{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 22px}
.assistant{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;padding:16px 18px;border:1px solid var(--trait);border-radius:var(--r-s);background:var(--carte);box-shadow:var(--ombre-carte)}
.assistant .puce{width:12px;height:12px;border-radius:50%;background:var(--teinte,var(--accent));margin-top:.45em}
.assistant p{font-size:1rem;line-height:1.5;color:var(--encre-2)}
.assistant b{color:var(--encre);font-weight:700}
.equipe-fin{max-width:40rem;color:var(--encre);font-weight:500}
.equipe-lien{font-size:clamp(.95rem,.4vw + .8rem,1.05rem)}.equipe-lien a{color:var(--encre-2);text-decoration:underline;text-underline-offset:.2em}
@media (max-width:820px){.assistants{grid-template-columns:1fr}.equipe-christopher{grid-template-columns:1fr}.equipe-christopher .qui-photo{width:112px}}
/* 14/10 soir (Christopher : « trop grand, ça fait un peu peur ») : le bloc reprend l'échelle de Gabriel / CléOS Price — titre au niveau
   des autres blocs, monogramme ou photo plus petit, texte et cartes plus compacts, moins d'air autour. */
.equipe-scene.bloc{padding-top:clamp(56px,8vh,88px);padding-bottom:clamp(32px,5vh,48px)}
.equipe-grille{gap:clamp(18px,2.6vh,28px);max-width:900px}
.equipe-tete h2{font-size:clamp(1.9rem,3.6vw,3rem);max-width:20ch;margin-top:10px}
.equipe-christopher{gap:clamp(14px,2vw,24px)}
.equipe-christopher .qui-photo{width:clamp(64px,6.5vw,88px)}
.rond-photo.initiales.grand{width:clamp(56px,6vw,76px);height:clamp(56px,6vw,76px);font-size:clamp(1.1rem,1.6vw,1.5rem)}
.equipe-texte .lead{font-size:clamp(1rem,.5vw + .85rem,1.12rem)}
.equipe-texte .lead.premier{font-size:clamp(1.1rem,.6vw + .9rem,1.3rem)}
.assistants{gap:10px 16px}
.assistant{padding:12px 16px;gap:10px}
.assistant p{font-size:.95rem}
.equipe-fin.lead{font-size:clamp(1rem,.5vw + .85rem,1.12rem)}
@media (max-width:820px){.equipe-christopher{grid-template-columns:1fr;gap:12px}.equipe-christopher .qui-photo{width:56px}.rond-photo.initiales.grand{width:52px;height:52px;font-size:1.05rem}}
.invit.bloc{padding-top:clamp(40px,6vh,64px)}
.rond-photo{width:48px;height:48px;border-radius:50%;flex:none;object-fit:cover}
.qui-nom .rond-photo{width:44px;height:44px;font-size:.95rem}
.rond-photo.initiales{display:grid;place-items:center;background:var(--accent-pale);color:var(--accent-texte);font-weight:700;letter-spacing:-.03em}
.qui-texte h2{margin:12px 0 22px}
.qui-texte h2 em{font-style:normal;color:var(--accent)}
.lead{max-width:36rem;font-size:clamp(1.05rem,1.1vw + .7rem,1.3rem);line-height:1.5;color:var(--encre-2);text-wrap:pretty}
.lead+.lead{margin-top:.8em}
.lead strong{color:var(--encre);font-weight:600}
.lead.fin{color:var(--encre);font-weight:600}
.invit-grille{display:grid;grid-template-columns:5fr 7fr;gap:clamp(28px,4vw,56px);align-items:start}
.invit .heure time{font-weight:700;font-size:clamp(2rem,3.6vw,2.8rem);letter-spacing:-.04em;line-height:1;color:var(--accent);display:inline-block}
.invit h2{margin:10px 0 18px;font-size:clamp(2.2rem,4.6vw,4rem)}
.invit-texte>p{font-size:clamp(1.05rem,1.1vw + .7rem,1.3rem);color:var(--encre-2);max-width:30rem;line-height:1.5}
.invit-texte>p strong{color:var(--encre);font-weight:600}
.formulaire{display:grid;gap:14px}
.creneaux{border:0;display:grid;gap:10px}
.creneaux legend{font-weight:700;font-size:1.05rem;margin-bottom:10px;letter-spacing:-.01em}
.jour{display:grid;grid-template-columns:9rem 1fr;gap:8px;align-items:center}
.jour-nom{font-size:.92rem;font-weight:600;color:var(--encre-2)}
.heures{display:flex;gap:6px;flex-wrap:wrap}
.creneau{position:relative;cursor:pointer}
.creneau input{position:absolute;opacity:0;width:1px;height:1px;left:0;top:0}
.creneau span{display:inline-block;border:1.5px solid var(--trait);border-radius:999px;padding:8px 13px;font-weight:600;font-size:.92rem;line-height:1;background:var(--fond);font-variant-numeric:tabular-nums}
.creneau:hover span{border-color:var(--encre-3)}
.creneau input:checked+span{background:var(--accent);color:#fff;border-color:var(--accent)}
.creneau input:focus-visible+span{outline:3px solid var(--accent);outline-offset:2px}
.jours-suite summary{cursor:pointer;font-size:.92rem;color:var(--encre-2);font-weight:600;margin-bottom:10px}
.jours-suite .jour{margin-bottom:10px}
.creneaux-note{color:var(--encre-3);font-size:.85rem;line-height:1.4}
.champ{display:grid;gap:6px;font-size:.8rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--encre-3)}
.champ input,.champ select{width:100%;font-family:var(--police);font-size:1.02rem;font-weight:500;padding:13px 14px;border:1.5px solid var(--trait);border-radius:var(--r-s);background:var(--fond);color:var(--encre);text-transform:none;letter-spacing:0}
.champ input:focus,.champ select:focus{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}
.deux{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.avertir{display:none;font-size:.9rem;color:var(--encre-2);padding:10px 14px;border-radius:var(--r-s);background:var(--trait)}
.avertir.visible{display:block}
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formulaire .btn-large{margin-top:6px}
.formulaire .fin{font-size:.88rem;color:var(--encre-3);text-align:center;line-height:1.4}
.merci{text-align:center;padding:40px 24px}
.merci .coche{width:64px;height:64px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;margin:0 auto 18px}
.merci .retour{font-size:1.2rem;font-weight:600;line-height:1.4}
.questions{padding:0 0 clamp(48px,6vw,80px);border-top:1px solid var(--trait)}
.questions{padding-top:clamp(48px,8vh,88px)}
.questions-titre{font-size:clamp(2rem,4vw,3rem);margin:10px 0 22px}
.faq{border-top:1px solid var(--trait)}
.faq details{border-bottom:1px solid var(--trait)}
.faq summary{cursor:pointer;padding:16px 28px 16px 0;font-weight:600;font-size:1.02rem;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:14px;color:var(--accent);font-weight:600;font-size:1.2rem}
.faq details[open] summary::after{content:"−"}
.faq p{padding:0 0 18px;color:var(--encre-2);font-size:.98rem;line-height:1.55;max-width:62ch}
.pied{border-top:1px solid var(--trait);padding:32px 0 56px;font-size:.9rem;color:var(--encre-2)}
.pied .cadre{display:grid;gap:10px}
.pied nav{display:flex;flex-wrap:wrap;gap:8px 18px}
.pied nav a{color:var(--encre-2)}
.pied .ar,.texte .ar{font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--encre-3);margin-left:6px;font-weight:600}
.pied small{display:block;color:var(--encre-3);max-width:80ch;line-height:1.6;font-size:.82rem}
/* 21/10 : l'éditeur en clair au pied de chaque page — photo ronde de Christopher, société, adresse, téléphone, e-mail. */
.pied-editeur{display:flex;align-items:center;gap:16px;margin-bottom:6px}
.pied-photo{width:64px;height:64px;flex:none;border-radius:50%;object-fit:cover}
.pied-coord{display:grid;gap:2px;font-style:normal;line-height:1.5;color:var(--encre-2);min-width:0}
.pied-coord b{color:var(--encre);font-weight:600}
.pied-coord a{color:var(--encre-2);overflow-wrap:anywhere}
.pied-qui{font-size:.85rem;color:var(--encre-3)}
.texte{max-width:720px;margin:0 auto;padding:100px var(--gout) 80px}
.texte h1{font-size:clamp(2rem,5vw,3rem);margin:0 0 24px}
.texte h2{font-size:1.5rem;margin:36px 0 10px;letter-spacing:-.03em}
.texte p,.texte li{color:var(--encre-2);line-height:1.6;margin-bottom:12px}
.texte p strong{color:var(--encre)}
.texte ul{padding-left:20px}

/* apparitions de la fin (sobres) */
html.anim .compteur,html.anim .lancement,html.anim .pari-grille,html.anim .qui-grille,html.anim .formulaire{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
html.anim .compteur.vu,html.anim .lancement.vu,html.anim .pari-grille.vu,html.anim .qui-grille.vu,html.anim .formulaire.vu{opacity:1;transform:none}

/* ───────────── iPad portrait ───────────── */
@media (max-width:1024px){
  .scene-grille{gap:0 24px}
  .scene .heure time{font-size:clamp(4rem,10vw,7rem)}
  .detail{width:clamp(min(440px,94vw),calc(var(--dw,520px) * 1.12),94vw)}
  .scene.app-tel .tel{width:min(380px,44vw,calc((100svh - 200px) / 2.05))}
}
/* ───────────── Téléphone : une scène = un écran qui respire ───────────── */
@media (max-width:820px){
  .marque span{display:none}
  .haut .btn-petit{padding:8px 14px;font-size:.88rem}
  .scene{height:220svh}
  .scene.longue{height:280svh}
  .scene-grille{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);padding:58px 0 20px;gap:10px}
  .scene-titre,.scene.gauche .scene-titre,.scene-ecran,.scene.gauche .scene-ecran,.scene-parole,.scene.gauche .scene-parole{grid-column:1}
  .scene-titre{grid-row:1;transform:none;min-height:232px;padding-bottom:24px}      /* écart n° 7 : 3 lignes réservées ; v6b : ≥ 24 px entre le titre et l'appareil, quel que soit le nombre de lignes */
  .scene-ecran{grid-row:2;height:100%;min-height:0;align-self:stretch;align-content:start;justify-items:center;padding-top:8px}
  .scene.gauche.app-tel .scene-ecran,.scene.app-tel .scene-ecran{justify-items:center;padding-top:8px}
  .scene.app-ordi .scene-ecran{align-content:center;padding-bottom:12vh}      /* l'écran ordinateur (16:10) ne reste pas collé sous le titre avec un trou dessous */
  .entree{align-items:start;padding-top:14vh}                    /* écart n° 8 : la carte ne flotte plus au milieu, le filigrane reste entier */
  /* v6b : le gros plan sur téléphone (captures réelles de Christopher, iPhone, 13/10 20h08 : gros plan décalé à gauche et coupé, énorme,
     posé sur le titre et le téléphone, pastille coupée). Il est maintenant positionné dans la ZONE DE L'APPAREIL (figure en position relative,
     jamais sur le titre), centré, borné à la fenêtre moins 32 px et en hauteur à la zone restante ; la pastille est centrée et peut passer
     sur deux lignes. Aucune valeur réglée pour 390 : tout en vw/svh. */
  .scene-ecran{position:relative}
  .scene .detail,.scene.gauche .detail{left:50%;top:50%;width:min(92vw,calc(100vw - 32px));max-width:none}
  .detail img{max-height:min(50svh,calc(100svh - 490px))}      /* la pastille sous le gros plan reste dans la fenêtre, même pour la facture (1062×1617) */
  .detail .etiq{max-width:calc(100vw - 32px);white-space:normal;text-align:center;line-height:1.3}
  .scene-parole{position:absolute;left:0;right:0;bottom:16px;max-width:none;z-index:5}
  .scene .heure time{font-size:clamp(3rem,16vw,4.4rem)}
  .scene h2,.scene.app-ordi h2{font-size:clamp(1.9rem,9.6vw,2.7rem);max-width:none;margin-top:4px}
  .scene .chez{font-size:.9rem}
  .tel,.scene.app-tel .tel{width:min(260px,calc((100svh - 360px) / 2.05))}
  .scene.app-tel .scene-ecran{align-items:center;padding-top:0}
  .ordi{width:100%}
  /* la parole prend l'écran pendant que l'appareil s'efface */
  .tel .dedans::after,.ordi .img::after{opacity:calc(var(--kb) * .45)}
  .scene .tel,.scene .ordi{opacity:calc(var(--ka) * (1 - var(--kb) * .35) * (1 - var(--kc) * .9));transform:translateY(calc((1 - var(--ka)) * 14svh)) scale(calc(1 - var(--kb) * .04 - var(--kc) * .08))}
  .detail{width:min(92vw,calc(100vw - 32px));max-width:none;top:50%}
  .detail .etiq{font-size:12px;top:calc(100% + 16px)}
  .detail .etiq::before{height:16px}
  .scene .detail{opacity:calc(var(--kb) * (1 - var(--kc)))}
  .voix{padding:14px 16px}
  .voix-texte{font-size:.95rem;line-height:1.45}
  .pas-eu{margin-top:12px;font-size:1.05rem}
  .prix-grille,.invit-grille,.qui-grille,.qui-grille.avec-photo{grid-template-columns:1fr}
  .qui-photo{max-width:260px}
  .inter time{font-size:clamp(4rem,26vw,8rem)}
}
@media (max-width:480px){
  .deux,.jour{grid-template-columns:1fr}
  .entree-phrase{max-width:12ch}
}
/* v6b : petits écrans (320–360 px) : la carte du rendez-vous et le calendrier (7 colonnes) débordaient de 10 à 50 px */
@media (max-width:400px){
  .carte{padding:clamp(12px,4vw,22px)}
  .cal-jours,.cal-grille{gap:2px}
  .cal-grille button,.cal-grille .vide{min-height:34px;min-width:0;font-size:.92rem;padding:0}
  .cal-nav{width:34px;height:34px}
  .creneau span{padding:7px 10px}
  .engagement span{padding:8px 10px;font-size:.85rem}
  .garanties li{white-space:normal}
}
/* ───────────── Mouvement réduit, et téléphone en PAYSAGE (v6b, fenêtre ≤ 520 px de haut) : scènes statiques, états finaux ─────────────
   En paysage, la mise en scène épinglée ne tient pas (parole, légende et gros plan sortaient de 50 à 250 px) : la page redevient un
   récit qui défile, tout visible, rien d'épinglé — site.js suit (matchMedia max-height). ───────────── */
@media (prefers-reduced-motion:reduce),(max-height:520px){
  html{scroll-behavior:auto}
  .scene,.scene.longue{height:auto;--p:1}
  .scene-fixe{position:static;height:auto;overflow:visible}
  .scene-grille{height:auto;padding:48px 0}
  .tel,.ordi,.detail,.scene-parole,.scene h2{transform:none!important;opacity:1!important}
  .tel .dedans::after,.ordi .img::after{display:none}
  .scene{animation:none}
  .detail{position:relative;left:auto;top:auto;margin:24px auto 48px}
  .inter{height:auto;padding:48px 0;content-visibility:visible}
  .defiler,.entree::before{animation:none}
  .entree,.entree-carte,.entree-transition,.entree-nom-grand{transition:none}
  html.anim .compteur,html.anim .lancement,html.anim .pari-grille,html.anim .qui-grille,html.anim .formulaire{opacity:1;transform:none;transition:none}
  body{transition:none}
  .scene-titre,.scene.app-ordi .scene-titre{opacity:1!important;min-height:0;padding-bottom:16px}
  .scene-parole{position:static;max-width:34rem;margin-top:24px}
  .scene-ecran{height:auto;padding:0}
  .tel,.scene.app-tel .tel{width:min(320px,42vw,100%)}
  .ordi{width:100%;max-width:720px}
  .detail,.scene.gauche .detail{width:100%!important;max-width:720px;left:auto}
  .scene-grille{overflow:visible}
  .detail .etiq{position:static;transform:none;margin-top:12px;white-space:normal;max-width:100%}
  .detail .etiq::before{display:none}
  .defiler{display:none}
}
@media (max-height:520px) and (min-width:700px){
  .scene-grille{grid-template-columns:1fr 1fr;gap:24px 32px;padding:32px 0}
  .scene-titre,.scene.gauche .scene-titre{grid-column:1;grid-row:1}
  .scene-ecran,.scene.gauche .scene-ecran{grid-column:2;grid-row:1 / 3}
  .scene-parole,.scene.gauche .scene-parole{grid-column:1;grid-row:2}
  .scene .heure time{font-size:clamp(2.4rem,8vh,4rem)}
  .scene h2,.scene.app-ordi h2{font-size:clamp(1.5rem,5.5vh,2.4rem);max-width:none}
  .entree{padding-top:0;align-items:center}
  .entree-phrase{font-size:clamp(1.6rem,7vh,3rem);margin-bottom:12px}
  .entree-marque{margin-bottom:8px}
  .entree-carte{gap:8px}
}

/* ───────────── Clap de fin et fin de page (v5c) ───────────── */
/* « section.fin » et non « .fin » : les deux petites lignes sous le bouton du formulaire (small.fin) prenaient aussi 70svh chacune,
   d'où le grand vide blanc sous le calendrier (14/10). */
.clap,section.fin{min-height:70svh;display:grid;align-items:center;text-align:center;content-visibility:visible}
.clap-grille,.fin-grille{display:grid;justify-items:center;gap:22px;max-width:840px}
.clap-parole{margin:0}
.clap-parole p{font-size:clamp(1.45rem,3vw,2.5rem);font-weight:700;letter-spacing:-.035em;line-height:1.12;text-wrap:balance}
.clap-parole footer{margin-top:14px;font-size:.95rem;font-weight:600;color:var(--encre-3)}
.clap-parole footer::before{content:"— "}
.clap-suite{font-size:clamp(1.05rem,1.4vw,1.25rem);color:var(--encre-2);max-width:34rem}
section.fin h2{font-size:clamp(2.2rem,5vw,4.4rem)}
section.fin p{font-size:clamp(1.05rem,1.4vw,1.25rem);color:var(--encre-2)}
.clap .btn-large,section.fin .btn-large{width:auto;min-width:min(320px,100%)}
/* ───────────── Le calendrier du rendez-vous (v5c) ───────────── */
.calendrier .liste-creneaux{display:grid;gap:10px}
.cal{display:grid;gap:10px}
.cal-tete{display:flex;align-items:center;justify-content:space-between;gap:8px}
.cal-mois{font-weight:700;font-size:1.05rem;text-transform:capitalize}
.cal-nav{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--trait-2);background:var(--carte);cursor:pointer;font-size:1.3rem;line-height:1;color:var(--encre-2)}
.cal-nav:disabled{opacity:.3;cursor:default}
.cal-jours,.cal-grille{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}
.cal-jours span{font-size:.75rem;font-weight:600;color:var(--encre-3);padding:4px 0}
.cal-grille button{aspect-ratio:1;border-radius:50%;border:0;background:transparent;font-weight:600;font-size:1rem;color:var(--encre);cursor:pointer;min-height:40px}
.cal-grille button:hover:not(:disabled){background:var(--trait)}
.cal-grille button:disabled{color:var(--encre-3);opacity:.45;cursor:default;font-weight:500}
.cal-grille button[aria-pressed="true"],.cal-grille button[aria-pressed="true"]:hover{background:var(--accent);color:#fff}
.cal-grille .vide{min-height:40px}
.cal-choix{font-size:.92rem;color:var(--encre-2);margin-top:4px}
#cal-heures .creneau span{padding:11px 16px;font-size:1rem}
.cal:not([hidden])+.liste-creneaux{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.calendrier{position:relative}

/* Blocs sombres de la fin (clap, fin de page) : leur propre nuit, locale — le voile et html.nuit ne servent qu'à la journée. */
.bloc.sombre{--fond:var(--fond-nuit);--encre:var(--encre-nuit);--encre-2:#b3bcb7;--encre-3:#86908a;--trait:#2b3236;--trait-2:#363e42;--carte:#1a1f23;--accent:var(--vert-vif);--accent-texte:#7fdcbc;--accent-pale:#163128;background:var(--fond-nuit);color:var(--encre-nuit)}
.bloc.sombre .btn{color:#0b2a21}
/* Fin de scène sur téléphone : le titre revient, l'appareil reste reconnaissable, pas de demi-écran vide. */
@media (max-width:820px){
  /* v6b : pendant le gros plan le titre reste à 35 % (plus de tiers d'écran vide) ; pendant la parole il s'efface et l'appareil prend sa place
     en haut (−30svh), entier et net : la carte de la parole, même longue (312 px), ne le recouvre plus et il ne chevauche plus le titre */
  .scene-titre{opacity:clamp(0,calc(1 - var(--kb) * .65 - var(--kc)),1)}
  .scene .tel,.scene .ordi{opacity:calc(var(--ka) * (1 - var(--kb) * .35) * (1 - var(--kc) * .25));transform:translateY(calc((1 - var(--ka)) * 14svh - var(--kc) * 30svh)) scale(calc(1 - var(--kb) * .04 - var(--kc) * .08))}
  /* scènes ordinateur sur téléphone : une seule colonne (la colonne élargie est pour l'ordinateur), l'écran 16:10 reste au milieu et le titre
     reste affiché pendant la parole : titre en haut, écran au milieu, carte en bas — pas de trou */
  .scene.app-ordi .scene-grille,.scene.app-ordi.gauche .scene-grille{grid-template-columns:1fr}
  .scene.app-ordi .scene-titre,.scene.app-ordi .scene-parole{max-width:none}
  .scene.app-ordi .scene-titre{opacity:clamp(0,calc(1 - var(--kb) * .65),1)}
  .scene.app-ordi .tel,.scene.app-ordi .ordi{transform:translateY(calc((1 - var(--ka)) * 14svh - var(--kc) * 11svh)) scale(calc(1 - var(--kb) * .04 - var(--kc) * .1))}
  /* v6b : écran ordinateur AVEC version téléphone (.a-tel) : l'enregistrement étroit (400 px) prend toute la largeur, cadré en hauteur ;
     plus de gros plan en bande ni d'écran grisé : la vidéo est la vedette, le titre reste lisible */
  .scene.app-ordi.a-tel .ordi{width:min(100vw - 24px,420px);border-radius:22px}
  .scene.app-ordi.a-tel .ordi .img{max-height:min(54svh,calc(100svh - 400px));overflow:hidden}
  .scene.app-ordi.a-tel .ordi video{object-fit:cover;object-position:top}
  .scene.app-ordi.a-tel .detail{display:none}
  .scene.app-ordi.a-tel .scene-titre{opacity:clamp(0,calc(1 - var(--kc)),1)}
  .scene.app-ordi.a-tel .ordi{opacity:calc(var(--ka) * (1 - var(--kc) * .25))}
  .scene.app-ordi.a-tel .ordi .img::after{opacity:0}
  .scene.app-ordi.a-tel .scene-ecran{align-content:start;padding-bottom:0}
  .tel .dedans::after,.ordi .img::after{opacity:calc(var(--kb) * .45 - var(--kc) * .2)}
}

/* Synthèse avant le prix (14/10) */
.synthese{text-align:center}
.synthese-grille{display:grid;justify-items:center;gap:22px;max-width:1040px}
.synthese h2{margin:0;font-size:clamp(2rem,4.4vw,3.6rem);letter-spacing:-.035em;line-height:1.08;text-wrap:balance;max-width:16em}
.synthese-chapo{margin:0;font-size:clamp(1.05rem,1.4vw,1.25rem);opacity:.82;max-width:36rem;line-height:1.5}
.synthese-liste{list-style:none;margin:10px 0 6px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;width:100%;text-align:left}
.synthese-liste li{display:grid;gap:6px;padding:18px 20px;border-radius:var(--r-s,14px);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);line-height:1.45}
.synthese-liste b{font-size:1.02rem}
.synthese-liste span{font-size:.95rem;opacity:.8}
@media (max-width:900px){.synthese-liste{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.synthese-liste{grid-template-columns:1fr}.synthese .btn-large{width:100%}}