/* =========================================================
   Comwere – 3D, présentations plein écran, configurateur
   (accueil et offres, avec assets/3d.js). CSS 3D uniquement.
   « Réduire les animations » : tout est figé (bloc en bas + style.css).
   ========================================================= */
@property --gap{syntax:"<length>";inherits:true;initial-value:0px}

/* ---------- Héros : scène 3D ---------- */
.hero-grid > :first-child{position:relative;z-index:2}  /* le texte passe toujours devant l'orbite */
.hero-visual{position:relative;z-index:1}
.stage{--R:470px;--w:150px;position:relative;perspective:1300px;perspective-origin:50% 40%;touch-action:pan-y;cursor:pointer}
/* pas de will-change permanent : il fige la rastérisation (texte flou après mise à l'échelle) */
.stage-rig{position:relative;transform-style:preserve-3d}
/* maquette droite au repos (une rotation 2D rééchantillonne le texte) ; l'inclinaison vient du rig */
.stage .tr{transform:none;transform-style:preserve-3d;contain:none}
/* translateZ(70px) grossit de 1300/1230 ; scale(.946) ramène à 1 pour que la couche ne soit pas agrandie */
.stage .tr-phone{transform:translateZ(70px) translateY(46px) scale(.851)}
.stage .tr.s-phone .tr-phone{transform:translateZ(70px) scale(.946)}
/* orbite : anneau placé derrière la maquette, qui tourne (angle donné par 3d.js) */
.orbit{position:absolute;left:62%;top:40%;width:0;height:0;transform-style:preserve-3d;transform:translateZ(calc(var(--R) * -1 - 30px)) rotateX(-14deg) rotateZ(-6deg);pointer-events:none}
.orbit-ring{transform-style:preserve-3d;transform:rotateY(18deg)}
.orbit-it{position:absolute;width:var(--w);height:calc(var(--w) * .625);left:calc(var(--w) / -2);top:calc(var(--w) * -.3125);padding:2px;outline:1px solid transparent;transform:rotateY(calc(var(--i) * 45deg)) translateZ(var(--R));backface-visibility:hidden;opacity:0;transition:opacity 1.2s}
.orbit-it img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:10px;border:1px solid var(--line);background:var(--ink-3);box-shadow:0 18px 30px -18px rgba(111,130,255,.6)}
.orbit.vu .orbit-it{opacity:.85}
/* indice et bouton de présentation */
.tap-hint{position:absolute;left:14px;top:-14px;z-index:3;display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:rgba(15,19,48,.9);border:1px solid var(--line);font:600 .8rem var(--body);color:var(--text);pointer-events:none;box-shadow:0 10px 30px -10px rgba(0,0,0,.8)}
.tap-hint::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--amber)}
/* onde autour du point : transform + opacity seulement (une ombre animée repeignait toute la page à chaque image) */
.tap-hint::after{content:"";position:absolute;left:12px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;box-sizing:border-box;border:2px solid rgba(255,201,113,.8);animation:onde 2.2s infinite}
@keyframes onde{from{transform:scale(1);opacity:1}70%,to{transform:scale(2.8);opacity:0}}
.tr-open,.pz-open{display:inline-flex;align-items:center;gap:8px;font:600 .88rem var(--body);color:var(--on-grad);background:var(--amber);border:0;border-radius:999px;padding:0 16px;min-height:40px;cursor:pointer;transition:transform .2s,box-shadow .2s}
.tr-open:hover,.pz-open:hover{transform:translateY(-1px);box-shadow:0 8px 24px -8px rgba(255,201,113,.7)}
.tr-open svg,.pz-open svg,.pz-open-big svg{width:12px;height:12px;fill:currentColor}
.tr-foot .tr-say{flex:1 1 100%;order:-1}
@media(max-width:900px){.stage{--R:420px;--w:130px}.orbit{left:50%}}
@media(max-width:560px){.stage{--R:300px;--w:100px;perspective:1000px}.tap-hint{left:8px}.stage .tr.s-phone .tr-phone{transform:translateZ(70px) scale(.93)}}

/* ---------- Bords lisses des couches pivotées ----------
   Chrome ne lisse pas le bord d'une couche transformée en 3D : un contour transparent d'1 px repousse ce bord
   hors de la partie visible (le vrai bord, arrondi, est alors dessiné et lissé dans la texture). */
.stage .mock,.tr-phone,.card,.gv,
.ly,.v-phone .fc,.v-phone .bk,.v-phone .edge,
.ch-call,.ch-notes,.ch-msgs li,.wf-page,.wf-pin,.wf-ok > *,.lv-addr,.lv-plug,.lv-on,.sv-msg,.sv-site,.sv-stats,
.op-sheet,.op-tags li,.cl-ph,.cl-sheet,.mu-pg,.mu-tabs li,.md-base,.md-m,.dv-doc,.dv-sign,.dv-note{outline:1px solid transparent;backface-visibility:hidden}
/* ---------- Cartes d'offres : pivot 3D ---------- */
.card.pz-cible{cursor:pointer}
.pz-open{position:absolute;top:24px;right:24px;min-height:36px;padding:0 13px;font-size:.82rem}
@media(hover:hover) and (pointer:fine){
  .card.pz-cible{transition:transform .25s cubic-bezier(.2,.7,.2,1),border-color .3s}
  .card.pz-cible:hover{transform:perspective(900px) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg)) translateY(-4px)}
}
.pz-cible:not(.card){cursor:pointer}
.pz-open-big{margin-top:28px}
.gain li.pz-cible .gv{transition:transform .3s cubic-bezier(.2,.7,.2,1),border-color .3s}
.gain li.pz-cible:hover .gv{transform:perspective(700px) rotateX(6deg) translateY(-3px);border-color:var(--violet)}

/* ---------- Transitions de sections en profondeur (liées au défilement, rien n'est masqué) ---------- */
@supports (animation-timeline:view()){
  @media(prefers-reduced-motion:no-preference){
    main > section:not(.hero) > .wrap{animation:profond linear backwards;animation-timeline:view();animation-range:entry 0% entry 420px}
    .grid3 .card{animation:pivot linear backwards;animation-timeline:view();animation-range:entry 0% entry 320px}
    .grid3 .card:nth-child(1){--pv:16deg}.grid3 .card:nth-child(3){--pv:-16deg}
  }
}
/* Offres : à l'arrivée sur la page, les cartes pivotent en entrant (si une carte est encore en bas de l'écran, le pivot au défilement prend le relais) */
@media(prefers-reduced-motion:no-preference){
  .page-head ~ section .grid3 .card{--ci:-22deg;animation:carteIn .42s cubic-bezier(.2,.7,.2,1) backwards}
  .page-head ~ section .grid3 .card:nth-child(2){--ci:0deg;animation-delay:.06s}
  .page-head ~ section .grid3 .card:nth-child(3){--ci:22deg;animation-delay:.12s}
  @supports (animation-timeline:view()){
    .page-head ~ section .grid3 .card{animation:carteIn .42s cubic-bezier(.2,.7,.2,1) backwards,pivot linear backwards;animation-timeline:auto,view();animation-range:normal,entry 0% entry 320px}
    .page-head ~ section .grid3 .card:nth-child(2){animation-delay:.06s,0s}
    .page-head ~ section .grid3 .card:nth-child(3){animation-delay:.12s,0s}
  }
}
@keyframes carteIn{from{opacity:0;transform:perspective(1000px) rotateY(var(--ci)) translateY(28px)}}
@keyframes profond{from{transform:perspective(1400px) translateZ(-140px) rotateX(9deg)}}
@keyframes pivot{from{transform:perspective(1000px) rotateY(var(--pv,0deg)) rotateX(14deg)}}

/* ---------- Configurateur ---------- */
.cfg-sec{padding-top:0}
.cfg{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:28px 56px;margin-top:44px;align-items:start}
.cfg-ctl{display:grid;gap:26px}
.cfg-f{border:0;padding:0;margin:0;min-width:0}
.cfg-f legend{font:700 1.05rem var(--display);margin-bottom:12px;padding:0}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.cfg label{display:block;position:relative;font-weight:500;gap:0}
.cfg .chip input,.cfg .seg input{position:absolute;inset:0;width:100%;height:100%;min-height:0;margin:0;padding:0;opacity:0;cursor:pointer;border:0}
.chip span{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--text);transition:background .2s,border-color .2s,color .2s}
.chip:hover span{border-color:#3d4390;background:rgba(255,255,255,.06)}
.chip input:checked + span{background:var(--grad);color:var(--on-grad);border-color:transparent;font-weight:600}
.chip input:focus-visible + span,.seg input:focus-visible + span{outline:3px solid var(--amber);outline-offset:2px}
.sw span::before{content:"";width:16px;height:16px;border-radius:50%;background:var(--sw);box-shadow:0 0 0 1px rgba(255,255,255,.25)}
.sw-violet{--sw:linear-gradient(135deg,#B77CFF,#6F82FF)}.sw-bleu{--sw:linear-gradient(135deg,#6F82FF,#5FC8FF)}.sw-rose{--sw:linear-gradient(135deg,#FF7DB1,#B77CFF)}.sw-ambre{--sw:linear-gradient(135deg,#FFC971,#FF9D6E)}.sw-vert{--sw:linear-gradient(135deg,#5FD4A0,#3FB7C9)}
.chk span::before{content:"+";font:700 1.15rem/1 var(--display);width:1ch;text-align:center}
.chk input:checked + span::before{content:"✓"}
.cfg-devs{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 12px;margin-bottom:6px}
.cfg-devs legend{float:left;margin:0;font-size:.95rem;color:var(--muted);font-weight:600}
.seg{display:inline-flex;padding:4px;border-radius:999px;background:var(--ink-2);border:1px solid var(--line)}
.seg span{display:block;padding:0 14px;line-height:36px;min-height:36px;border-radius:999px;font-weight:600;font-size:.9rem;color:var(--muted);transition:background .2s,color .2s}
.seg input:checked + span{background:var(--ink-3);color:var(--text);box-shadow:inset 0 0 0 1px #3d4390}
/* scène et appareil */
.cfg-stage{container-type:inline-size;perspective:1200px;touch-action:pan-y;display:grid;justify-items:center;padding:22px 0 8px;user-select:none;-webkit-user-select:none}
.cfg-rig{transform-style:preserve-3d;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.cfg-rig.suit{transition:transform .12s linear}
.cfg-spin{transform-style:preserve-3d}
.cfg-dev{--w:min(100cqw,600px);--h:calc(var(--w) * .62);position:relative;width:var(--w);height:var(--h);display:flex;flex-direction:column;padding:8px;border-radius:16px;background:var(--ink-3);border:1px solid #343b7c;transform-style:preserve-3d;box-shadow:0 44px 80px -34px rgba(111,130,255,.55);transition:width .7s cubic-bezier(.65,0,.35,1),height .7s cubic-bezier(.65,0,.35,1),border-radius .7s,padding .7s}
.cfg-dev[data-dev="tab"]{--w:min(66cqw,330px);--h:calc(var(--w) * 1.3);border-radius:26px;padding:12px}
.cfg-dev[data-dev="phone"]{--w:min(52cqw,220px);--h:calc(var(--w) * 2.02);border-radius:32px;padding:12px 8px}
/* épaisseur : deux plaques derrière l'écran */
.cfg-dev::before,.cfg-dev::after{content:"";position:absolute;inset:-1px;border-radius:inherit;background:#10133a;border:1px solid #2a3070;transform:translateZ(-9px);pointer-events:none}
.cfg-dev::after{transform:translateZ(-18px);background:#090b22}
.cfg-bar{display:flex;align-items:center;gap:5px;padding:2px 6px 8px;max-height:30px;overflow:hidden;transition:max-height .5s,padding .5s,opacity .4s}
.cfg-bar i{width:8px;height:8px;border-radius:50%;background:var(--line)}
.cfg-bar b{margin-left:6px;flex:1;background:var(--ink);border-radius:999px;padding:1px 10px;font:500 .7rem var(--body);color:var(--muted);white-space:nowrap;overflow:hidden}
.cfg-dev:not([data-dev="desk"]) .cfg-bar{max-height:0;padding:0;opacity:0}
/* écran du site d'exemple : couleurs et style en variables */
.cfg-scr{--c1:#B77CFF;--c2:#6F82FF;--s-bg:#0F1330;--s-card:#171C42;--s-line:#2A3066;--s-tx:#EEF0FF;--s-mu:#A9B0D6;--s-r:10px;--s-pill:999px;--s-h:var(--display);
  position:relative;flex:1;min-height:0;overflow:hidden;border-radius:10px;container-type:inline-size;background:var(--s-bg);color:var(--s-tx);display:flex;flex-direction:column;gap:8px;padding:8px;font:400 11px/1.35 var(--body);transition:background-color .5s,color .5s}
.cfg-scr[data-color="bleu"]{--c1:#6F82FF;--c2:#5FC8FF}
.cfg-scr[data-color="rose"]{--c1:#FF7DB1;--c2:#B77CFF}
.cfg-scr[data-color="ambre"]{--c1:#FFC971;--c2:#FF9D6E}
.cfg-scr[data-color="vert"]{--c1:#5FD4A0;--c2:#3FB7C9}
.cfg-scr[data-style="clair"]{--s-bg:#F7F6FC;--s-card:#FFFFFF;--s-line:#E1DFEE;--s-tx:#1A1B33;--s-mu:#565A7C}
.cfg-scr[data-style="elegant"]{--s-bg:#15121C;--s-card:#1E1A28;--s-line:#3B3447;--s-tx:#F4EEE6;--s-mu:#BDB3A7;--s-r:0px;--s-pill:0px;--s-h:Georgia,"Times New Roman",serif}
.cfg-scr[data-style="elegant"] .cb-h{font-weight:400;letter-spacing:0}
.cb{display:block;flex-shrink:0;width:100%;text-align:left;font:inherit;color:inherit;background:none;border:0;padding:8px;margin:0;border-radius:var(--s-r);cursor:pointer;position:relative;transition:background-color .5s,box-shadow .2s}
.cb[hidden]{display:none}
.cb > span{display:block}
.cb:hover{box-shadow:0 0 0 1px var(--c1)}
.cb:focus-visible{outline:2px solid var(--amber);outline-offset:1px}
.cb.vu{box-shadow:0 0 0 2px var(--amber),0 0 24px -4px rgba(255,201,113,.6)}
.cb-nav{display:flex;justify-content:space-between;align-items:center;padding:4px 6px}
.cb-nav > span{display:inline-block}
.cb-logo{font:700 12px var(--s-h);background:linear-gradient(110deg,var(--c1),var(--c2));-webkit-background-clip:text;background-clip:text;color:transparent}
.cb-call{padding:2px 9px;border-radius:var(--s-pill);border:1px solid var(--s-line);font-size:10px;font-weight:600}
.cb-hero{padding:14px 12px;background:linear-gradient(135deg,color-mix(in oklab,var(--c1) 28%,var(--s-bg)),color-mix(in oklab,var(--c2) 12%,var(--s-bg)))}
.cb-h{font:700 clamp(14px,5cqw,24px)/1.12 var(--s-h);letter-spacing:-.01em;max-width:20ch}
.cb-p{font-size:10.5px;color:var(--s-mu);margin-top:5px}
.cb > .cb-cta{display:inline-block;margin-top:10px;padding:5px 12px;border-radius:var(--s-pill);background:var(--c1);color:#140D26;font-weight:700;font-size:10.5px}
.cb-t{font:700 12px var(--s-h);margin-bottom:6px}
.cb-cards{display:grid!important;grid-template-columns:repeat(3,1fr);gap:6px}
.cb-cards span,.cb-cal span{position:relative;border-radius:calc(var(--s-r) * .7);background:var(--s-card);border:1px solid var(--s-line);font-size:10px;font-weight:600;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.cb-cards span{padding:16px 6px 6px}
.cb-cards span::before{content:"";position:absolute;left:6px;top:6px;width:16px;height:5px;border-radius:3px;background:linear-gradient(90deg,var(--c1),var(--c2))}
.cb-cal{display:grid!important;grid-template-columns:repeat(3,1fr);gap:4px}
.cb-cal span{padding:4px 0;text-align:center}
.cb-cal .on{background:var(--c1);color:#140D26;border-color:transparent}
.cb-tiles{display:grid!important;grid-template-columns:repeat(4,1fr);gap:4px}
.cb-tiles span{aspect-ratio:4/3;border-radius:calc(var(--s-r) * .6);background:linear-gradient(135deg,var(--c1),var(--c2));opacity:.8}
.cb-tiles span:nth-child(2){background:linear-gradient(200deg,var(--c2),var(--s-card))}
.cb-tiles span:nth-child(3){background:linear-gradient(20deg,var(--s-card),var(--c1))}
.cb-stars{display:flex!important;gap:3px}
.cb-stars span{width:12px;height:12px;background:var(--s-line);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.cb-mapbox{position:relative;height:54px;border-radius:var(--s-r);background:repeating-linear-gradient(0deg,transparent 0 13px,var(--s-line) 13px 14px),repeating-linear-gradient(90deg,transparent 0 17px,var(--s-line) 17px 18px),var(--s-card)}
.pin{position:absolute;left:46%;top:26%;width:14px;height:14px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--c1);box-shadow:0 0 0 4px color-mix(in oklab,var(--c1) 30%,transparent)}
.cb-info{display:flex!important;flex-wrap:wrap;gap:4px 10px;margin-top:auto;border-top:1px solid var(--s-line);border-radius:0;font-size:10px;color:var(--s-mu)}
.cb-info span{display:inline-flex!important;align-items:center;gap:4px}
.cb-info span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c2)}
.cb.in{animation:flipIn .75s cubic-bezier(.2,.8,.2,1) both;transform-origin:50% 0}
/* icône du métier, à droite du titre (zone à part : jamais sur le texte) ; change en fondu (3d.js) */
.cb-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;justify-items:start}
.cb-hero > :not(.cb-ico){grid-column:1}
.cb-hero > .cb-ico{grid-column:2;grid-row:1/span 3;align-self:center;width:clamp(22px,11cqw,58px);aspect-ratio:1;color:var(--c1)}
.cb-ico:empty{display:none}
.cb-ico svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* machine à écrire : curseur clignotant sur le bloc en cours de frappe */
.cfg .tw::after{content:"";display:inline-block;width:2px;height:1em;margin-left:1px;vertical-align:-.15em;background:var(--amber);animation:blink 1s steps(1) infinite}
@keyframes flipIn{from{opacity:0;transform:perspective(500px) rotateX(-85deg)}}
@container (max-width:230px){.cb-cards,.cb-cal{grid-template-columns:1fr 1fr}.cb-tiles{grid-template-columns:1fr 1fr}.cb-h{font-size:15px}}
/* explication d'un bloc */
.cfg-say{min-height:3.4em;margin:14px auto 0;text-align:center;max-width:52ch;color:var(--text)}
.cfg-say b{color:var(--amber)}
.cfg-say .h-mouse,.cfg-say .h-touch{color:var(--muted)}
.h-mouse{display:none}
@media(hover:hover) and (pointer:fine){.h-mouse{display:inline}.h-touch{display:none}}
.cfg-view .mock-cap{text-align:center}
/* barre de la formule conseillée (reste visible pendant qu'on compose) */
.cfg-bot{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding:14px 16px 14px 24px;border-radius:22px;background:rgba(15,19,48,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid #343b7c;box-shadow:0 24px 60px -24px rgba(0,0,0,.9)}
.cfg-formule{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;max-width:none}
.cfg-formule > span:first-child{color:var(--muted);font-size:.9rem}
.cfg-nom{font:800 1.35rem var(--display);letter-spacing:-.01em}
.cfg-prix{color:var(--muted)}
.cfg-prix b{display:inline-block;color:var(--text);font:800 1.15rem var(--display)}
.cfg-prix b.flip{animation:flip .6s cubic-bezier(.2,.8,.2,1)}
@keyframes flip{from{transform:perspective(300px) rotateX(-100deg);opacity:0}}
.cfg-why{grid-column:1/-1;margin-top:-12px;color:var(--muted);font-size:.92rem;max-width:72ch}
.cfg-vu .to-top{opacity:0;visibility:hidden}
@media(max-width:900px){
  .cfg{display:flex;flex-direction:column;gap:22px}
  .cfg-ctl{display:contents}
  /* téléphone : métier, aperçu, besoins, puis la formule et le devis juste dessous ; couleur et style ensuite */
  .cfg-metier{order:1}.cfg-view{order:2;width:100%}.cfg-mods{order:3}.cfg-bot{order:4;width:100%}.cfg-why{order:5;margin-top:-8px}.cfg-couleur{order:6}.cfg-style{order:7}
}
@media(max-width:560px){
  .cfg-bot{padding:12px;gap:8px}
  .cfg-bot .btn{width:100%;padding:12px 18px}
  .cfg-formule{gap:2px 10px}
  .cfg-nom{font-size:1.15rem}
  .chip span{padding:0 14px}
  .seg span{padding:0 10px;font-size:.85rem}
}
/* particules de validation */
.fx{position:fixed;inset:0;pointer-events:none;z-index:200}
.fx i{position:fixed;width:9px;height:9px;border-radius:2px}

/* ---------- Présentation plein écran ---------- */
html.pz-lock{overflow:hidden}
.pz{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--ink);color:var(--text);overflow:hidden}
.pz[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.pz::backdrop{background:rgba(8,10,26,.5)}
.pz-bg{position:absolute;inset:0;pointer-events:none;background:radial-gradient(55% 50% at 12% 8%,rgba(111,130,255,.3),transparent 70%),radial-gradient(45% 45% at 92% 85%,rgba(255,125,177,.2),transparent 70%),radial-gradient(40% 40% at 70% 20%,rgba(183,124,255,.14),transparent 70%)}
.pz-top,.pz-stage,.pz-bot{position:relative;z-index:1}
.pz-top{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;padding:14px clamp(16px,3vw,32px) 10px}
.pz-titre{font:700 1.02rem var(--display);margin-right:auto;max-width:none}
.pz-ctl{display:flex;gap:8px}
.pz-prog{flex-basis:100%;display:flex;gap:6px;list-style:none;padding:0}
.pz-prog li{flex:1;height:4px;border-radius:2px;background:rgba(255,255,255,.14);overflow:hidden}
.pz-prog li::after{content:"";display:block;height:100%;background:var(--grad);transform:scaleX(0);transform-origin:left}
.pz-prog li.done::after{transform:none}
.pz-prog li.now::after{animation:prog var(--dur,7s) linear forwards}
.pz.paused .pz-prog li.now::after{animation-play-state:paused}
@keyframes prog{to{transform:none}}
.pz-b{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--text);font:600 .92rem var(--body);cursor:pointer;transition:background .2s,opacity .2s}
.pz-b:hover{background:rgba(255,255,255,.1)}
.pz-b[hidden]{display:none}
.pz-b:disabled{opacity:.4;cursor:default}
.pz-b svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pz-b kbd{font:600 .72rem var(--body);color:var(--muted);border:1px solid var(--line);border-radius:5px;padding:1px 5px;display:none}
@media(hover:hover) and (pointer:fine){.pz-b kbd{display:inline}}
.pz-close{border-color:#3d4390;background:var(--ink-3)}
.pz-stage{display:grid;overflow:hidden auto;perspective:1400px;touch-action:pan-y;overscroll-behavior:contain}
/* Une seule scène visible : la sortante (.out, inerte) part en .3 s puis est retirée ; l'entrante (.in) attend
   la fin de cette sortie (.apres : --d) ; au repos (.pose) aucune animation ni transformation ne reste active.
   Les remplissages sont « backwards » : une animation finie ne garde ni couche ni transform sur le texte. */
.pz-scene{--d:0s;grid-area:1/1;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);grid-template-areas:"txt vis";align-items:center;gap:clamp(24px,5vw,72px);padding:clamp(16px,4vh,48px) clamp(16px,7vw,110px);max-width:1400px;width:100%;margin:auto}
.pz-scene.apres{--d:.3s}
.pz-scene.in{animation:scIn .8s var(--d) cubic-bezier(.2,.8,.2,1) backwards}
.pz-scene.in-back{animation:scInB .8s var(--d) cubic-bezier(.2,.8,.2,1) backwards}
.pz-scene.out{animation:scOut .3s cubic-bezier(.6,0,.8,.4) forwards;pointer-events:none}
.pz-scene.out-back{animation:scOutB .3s cubic-bezier(.6,0,.8,.4) forwards;pointer-events:none}
@keyframes scIn{from{opacity:0;transform:translateZ(-460px) rotateX(6deg)}}
@keyframes scOut{to{opacity:0;transform:translateZ(340px)}}
@keyframes scInB{from{opacity:0;transform:translateZ(340px)}}
@keyframes scOutB{to{opacity:0;transform:translateZ(-460px)}}
.pz-txt{grid-area:txt;min-width:0}
.pz-h{font:800 clamp(2rem,min(5.6vw,8.5vh),4.8rem)/1.06 var(--display);letter-spacing:-.035em;max-width:13ch;overflow-wrap:break-word}
.pz-h .w{display:inline-block;perspective:600px}
.pz-h .w > span{display:inline-block;transform-origin:50% 100%;animation:wIn .8s calc(var(--d) + .1s + var(--i) * 55ms) cubic-bezier(.2,.8,.2,1) backwards}
@keyframes wIn{from{opacity:0;transform:translateY(.5em) rotateX(-80deg)}}
.pz-p{margin-top:22px;color:var(--muted);font-size:clamp(1.05rem,1.5vw,1.3rem);max-width:42ch;animation:pIn .6s calc(var(--d) + .3s) cubic-bezier(.2,.8,.2,1) backwards}
@keyframes pIn{from{opacity:0;transform:translateY(12px)}}
.pz-scene .actions{animation:pIn .6s calc(var(--d) + .45s) backwards}
.pz-bot{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;padding:10px clamp(16px,3vw,32px) max(14px,env(safe-area-inset-bottom))}
.pz-num{min-width:3.6em;text-align:center;color:var(--muted);font-variant-numeric:tabular-nums}
.pz-devis{margin-left:auto}
/* visuels des scènes */
/* zone visuelle séparée (grille) ; container : le prix se règle sur la largeur de sa zone, pas sur l'écran */
.pz-vis{grid-area:vis;min-width:0;container-type:inline-size;perspective:1100px;display:grid;place-items:center;min-height:min(58vh,480px)}
/* au repos : transform none (texte rendu à plat, net) ; l'inclinaison à la souris ne dure que pendant le mouvement */
.v3{transition:transform .5s cubic-bezier(.2,.8,.2,1);animation:visIn 1.1s var(--d) cubic-bezier(.2,.8,.2,1) backwards}
.pz.tilt .v3{transform:rotateX(var(--px,0deg)) rotateY(var(--py,0deg))}
@keyframes visIn{from{transform:rotateY(-75deg) translateZ(-220px);opacity:0}}
/* vrai volume seulement pour les visuels sans texte (ou presque) ; les autres restent plats : moins de couches */
.v3:has(> .v-layers, > .v-phone, > .v-multi, > .v-coin){transform-style:preserve-3d}
.v3 > :is(.v-layers,.v-phone,.v-multi,.v-coin){transform-style:preserve-3d}
/* site éclaté en couches */
.v-layers{--sp:30px;position:relative;width:min(300px,58vw);aspect-ratio:3/4;transform:rotateX(56deg) rotateZ(-36deg);animation:layTurn 9s ease-in-out infinite alternate}
.v-layers.x{animation:layTurn 9s ease-in-out infinite alternate,explode 1.3s .35s cubic-bezier(.2,.8,.2,1) both}
@keyframes layTurn{to{transform:rotateX(52deg) rotateZ(-14deg)}}
@keyframes explode{to{--gap:var(--sp)}}
.ly{position:absolute;display:block;border-radius:10px;background:var(--ink-3);border:1px solid #343b7c;transform:translateZ(calc(var(--z) * var(--gap)));transition:box-shadow .4s}
.ly-base{inset:0;--z:0;background:var(--ink-2);box-shadow:0 0 80px -10px rgba(111,130,255,.5)}
.ly-nav{top:5%;left:6%;right:6%;height:7%;--z:1}
.ly-title{top:17%;left:8%;width:72%;height:11%;--z:2.2}
.ly-txt{top:31%;left:8%;width:62%;height:6%;--z:1.4;background:repeating-linear-gradient(180deg,#2c3370 0 4px,transparent 4px 9px);border:0}
.ly-btn{top:41%;left:8%;width:40%;height:7%;--z:3.2;border-radius:999px;background:#3a3f80}
.ly-cards{top:55%;left:6%;right:6%;height:22%;--z:2;background:linear-gradient(90deg,#272d66 0 31%,transparent 31% 34.5%,#272d66 34.5% 65.5%,transparent 65.5% 69%,#272d66 69%);border:0}
.ly-info{bottom:5%;left:6%;right:6%;height:10%;--z:1.2}
.v-layers.c .ly-title{background:linear-gradient(110deg,var(--blue),var(--violet) 55%,var(--rose))}
.v-layers.c .ly-btn{background:var(--amber)}
.v-layers.c .ly-cards{background:linear-gradient(90deg,var(--violet) 0 31%,transparent 31% 34.5%,var(--blue) 34.5% 65.5%,transparent 65.5% 69%,var(--rose) 69%);opacity:.9}
.v-layers.c .ly-nav{background:linear-gradient(90deg,var(--violet) 0 18%,var(--ink-3) 18%)}
.ly.hl{--z:5;box-shadow:0 0 0 2px var(--amber),0 0 40px rgba(255,201,113,.55)}
/* téléphone en volume */
.v-phone{position:relative;width:min(210px,40vw);aspect-ratio:9/18.5}
.v-phone .fc,.v-phone .bk{position:absolute;inset:0;border-radius:30px;backface-visibility:hidden}
.v-phone .fc{overflow:hidden;display:grid;align-content:start;gap:10px;padding:30px 14px 14px;background:var(--ink);border:6px solid var(--ink-3);box-shadow:0 0 0 1px #3d4390,0 40px 80px -30px rgba(111,130,255,.6)}
.v-phone .bk{background:linear-gradient(160deg,#2a2f6e,#1a1440);border:1px solid #3d4390;transform:rotateY(180deg) translateZ(7px)}
.v-phone .edge{position:absolute;top:26px;bottom:26px;width:14px;background:#262c66}
.edge-l{left:-7px;transform:rotateY(-90deg)}.edge-r{right:-7px;transform:rotateY(90deg)}
.v-phone .fc i{display:block;border-radius:5px;background:var(--ink-3)}
.p-nav{height:10px;width:44%;background:var(--grad)!important}
.p-t{height:22px;width:86%;background:linear-gradient(110deg,var(--blue),var(--violet))!important;margin-top:6px}
.p-l{height:7px}.p-l.s{width:70%}
.p-btn{display:grid;place-items:center;height:38px;border-radius:999px;background:var(--amber);color:var(--on-grad);font:700 .95rem var(--body);margin:6px 0;box-shadow:0 10px 24px -8px rgba(255,201,113,.7)}
.p-c{height:52px;border-radius:10px!important;background:linear-gradient(160deg,var(--ink-3),#3a2a6e)!important}
/* ===== Visuels propres à chaque sujet (étapes et formules) =====
   Règle : l'état de base est l'état final (« réduire les animations » montre donc l'image terminée) ;
   les animations partent d'un état caché (keyframes « from ») et n'agrandissent jamais un texte. */
.v-chat,.v-wire,.v-live,.v-suivi,.v-one,.v-multi,.v-mods,.v-devis{position:relative;width:min(440px,86vw);font:500 13px/1.35 var(--body);color:var(--text);text-align:left}
.v-chat b,.v-wire b,.v-live b,.v-suivi b,.v-mods b,.v-devis b,.v-call b{font-family:var(--display)}
.v-chat ul,.v-chat ol,.v-wire ol,.v-live ul,.v-mods ul,.v-devis ul,.v-one ul,.v-multi ul{list-style:none;margin:0;padding:0}
/* curseur et appui (illustration d'un clic) */
.cur{position:absolute;left:0;top:0;width:22px;height:22px;z-index:5;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M3 2l15 8.5-6.6 1.6 3.8 6.6-2.6 1.5-3.8-6.6L4 18z' fill='%23fff' stroke='%230B0820' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat;filter:drop-shadow(0 4px 6px rgba(0,0,0,.5))}
.cur::after,.tap::after{content:"";position:absolute;left:-9px;top:-9px;width:22px;height:22px;border-radius:50%;border:2px solid var(--amber);opacity:0}
@keyframes clic{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(1.6)}}

/* 1. On discute : visio, bulles, prise de notes */
.v-chat{display:grid;grid-template-columns:1fr .9fr;gap:12px}
.ch-call{grid-column:1/-1;display:flex;align-items:center;gap:8px;padding:8px;border-radius:14px;background:#1B2050;border:1px solid #343b7c}
.ch-tile{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border-radius:10px;background:#252B66;font-weight:600}
.ch-us{box-shadow:0 0 0 2px #5FD4A0}  /* la personne qui parle */
.ch-av{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--grad);color:var(--on-grad);font:800 13px var(--display);font-style:normal}
.ch-rec{margin-left:auto;display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:12px}
.ch-rec::before{content:"";width:8px;height:8px;border-radius:50%;background:#FF6B7A;animation:clignote 2s infinite}
@keyframes clignote{50%{opacity:.3}}
.ch-msgs{display:grid;gap:8px;align-content:start}
.ch-msgs li{max-width:92%;padding:9px 12px;border-radius:14px 14px 14px 4px;background:#EEF0FF;color:#16182F;animation:bulle .5s cubic-bezier(.2,.8,.2,1) backwards}
.ch-msgs .m-us{justify-self:end;border-radius:14px 14px 4px 14px;background:#8F6BFF;color:#fff}
.ch-msgs li:nth-child(1){animation-delay:.5s}.ch-msgs li:nth-child(2){animation-delay:1.5s}.ch-msgs li:nth-child(3){animation-delay:2.6s}.ch-msgs li:nth-child(4){animation-delay:3.6s}
.m-dots{display:flex;gap:4px;padding:12px 14px!important}
.m-dots i{width:6px;height:6px;border-radius:50%;background:#fff;animation:dots 1.2s infinite}
.m-dots i:nth-child(2){animation-delay:.15s}.m-dots i:nth-child(3){animation-delay:.3s}
@keyframes dots{50%{opacity:.3;translate:0 -3px}}
@keyframes bulle{from{opacity:0;translate:0 12px}}
.ch-notes{align-self:start;padding:14px;border-radius:6px;background:#FFF8E1;color:#3A2E12;box-shadow:0 30px 50px -24px rgba(0,0,0,.9);rotate:2deg;background-image:repeating-linear-gradient(180deg,transparent 0 21px,rgba(143,86,0,.16) 21px 22px);background-position:0 30px}
.ch-notes b{display:block;margin-bottom:8px;font-size:13px}
.ch-notes li{position:relative;padding-left:16px;line-height:22px;font-size:12.5px;animation:note .4s backwards}
.ch-notes li::before{content:"";position:absolute;left:2px;top:9px;width:6px;height:6px;border-radius:50%;background:#8F5600}
.ch-notes li:nth-child(1){animation-delay:1.1s}.ch-notes li:nth-child(2){animation-delay:2.2s}.ch-notes li:nth-child(3){animation-delay:3.3s}
@keyframes note{from{opacity:0;clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
.ch-next{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:4px 10px;border-radius:999px;background:#2E7D5B;color:#fff;font-size:12px;font-weight:700;animation:monte .4s 4.4s backwards}
.ch-next::before{content:"✓"}

/* 2. Maquette : plan filaire annoté qui se colore, puis validation */
.v-wire{display:grid;grid-template-columns:1fr 150px;gap:14px;align-items:start}
.wf-page{position:relative;display:grid;gap:8px;padding:12px;border-radius:10px;background:#F7F4EC;color:#16182F;box-shadow:0 34px 60px -30px rgba(0,0,0,.9);font-size:11px}
.wf-page > span,.wf-page i:not(.wf-pin){font-style:normal}
.wf-nav{display:flex;justify-content:space-between;align-items:center}
.wf-logo{font:800 12px var(--display)}
.wf-pill,.wf-btn{padding:3px 10px;border-radius:999px;border:1.5px solid #6B3FCF;color:#6B3FCF;font-weight:700}
.wf-hero{display:grid;gap:8px;justify-items:start;padding:12px;border-radius:8px;background:#E9DDF9}
.wf-hero b{font-size:16px;line-height:1.1;max-width:16ch}
.wf-btn{background:#6B3FCF;color:#fff}
.wf-img{height:56px;border-radius:8px;background:linear-gradient(135deg,#C9A27E,#8C5E3C)}
.wf-cards,.wf-info{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.wf-cards i{padding:14px 6px 6px;border-radius:6px;background:#fff;border:1px solid #E0D6C6;font-weight:700}
.wf-info i{color:#4C5070}
/* au départ : du fil de fer (traits pointillés, aucun remplissage) */
.wf-hero,.wf-img,.wf-cards i,.wf-btn,.wf-pill{animation:filaire 1s 2.6s backwards}
.wf-cards i:nth-child(2){animation-delay:2.8s}.wf-cards i:nth-child(3){animation-delay:3s}
@keyframes filaire{0%,99%{background:transparent;border:1.5px dashed #9AA0BF;color:#6B6F8E}}
.wf-pin{position:absolute;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#FFC971;color:#3A2400;font:800 11px var(--display);font-style:normal;box-shadow:0 0 0 3px rgba(255,201,113,.35);animation:monte .35s backwards}
.wf-cta{display:flex;align-items:center;gap:8px}
.wf-cta .wf-pin{position:static}
.wp1{left:-8px;top:52px;animation-delay:.6s}.wp2{animation-delay:1.2s}.wp3{right:-8px;bottom:10px;animation-delay:1.8s}
.wf-notes{counter-reset:n;display:grid;gap:8px;color:var(--muted);font-size:12.5px}
.wf-notes li{counter-increment:n;display:grid;grid-template-columns:20px 1fr;gap:8px;animation:monte .35s backwards}
.wf-notes li::before{content:counter(n);display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#FFC971;color:#3A2400;font:800 11px var(--display)}
.wf-notes li:nth-child(1){animation-delay:.7s}.wf-notes li:nth-child(2){animation-delay:1.3s}.wf-notes li:nth-child(3){animation-delay:1.9s}
.wf-ok{grid-column:1/-1;position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.wf-cmt{padding:8px 12px;border-radius:12px 12px 12px 4px;background:#EEF0FF;color:#16182F;animation:bulle .4s 3.6s backwards}
.wf-val,.wf-done{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;font-weight:700}
.wf-val{position:absolute;right:0;background:var(--amber);color:var(--on-grad);opacity:0;animation:valBtn 5.6s backwards}
@keyframes valBtn{0%,70%{opacity:0}74%,88%{opacity:1}100%{opacity:0}}
.wf-done{margin-left:auto;background:#2E7D5B;color:#fff;animation:monte .3s 5.1s backwards}
.wf-done::before{content:"✓"}
.v-wire .cur{left:calc(100% - 70px);top:calc(100% - 14px);animation:curWire 5.6s cubic-bezier(.5,0,.3,1) backwards}
.v-wire .cur::after{animation:clic .5s 4.9s backwards}
@keyframes curWire{0%,60%{opacity:0;translate:-160px -140px}66%{opacity:1;translate:-160px -140px}84%{translate:0 0}}

/* 3. Mise en ligne : le domaine se branche, le cadenas se ferme, le site passe en ligne */
.v-live{display:grid;gap:14px}
.lv-addr{display:flex;align-items:center;gap:2px;padding:10px 14px;border-radius:999px;background:#fff;color:#16182F;font:600 15px var(--body);box-shadow:0 26px 50px -24px rgba(0,0,0,.9)}
.lv-lock{width:18px;height:18px;margin-right:6px;color:#2E7D5B}
.lv-lock svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.lv-lock rect{fill:currentColor}
.lv-arc{animation:cadenas .4s 3s backwards}
@keyframes cadenas{from{translate:0 -2.5px;stroke:#9AA0BF}}
.lv-lock{animation:lockC 3.4s backwards}
@keyframes lockC{0%,99%{color:#9AA0BF}}
.lv-https{color:#2E7D5B;animation:fade .3s 3s backwards}
.lv-dom{overflow:hidden;white-space:nowrap;animation:tape 1.2s steps(16,end) .4s backwards}
@keyframes tape{from{max-width:0}to{max-width:16ch}}
@keyframes fade{from{opacity:0}}
.lv-link{display:grid;grid-template-columns:auto 1fr auto;align-items:center}
.lv-plug{display:grid;gap:2px;padding:10px 14px;border-radius:12px;background:#1B2050;border:1px solid #343b7c;font:700 13px var(--display)}
.lv-plug small{font:500 11px var(--body);color:var(--muted)}
.lv-site{border-color:#5FD4A0}
.lv-wire{height:4px;border-radius:2px;margin:0 -1px;background:linear-gradient(90deg,var(--violet),#5FD4A0);transform-origin:left;animation:fil .9s 1.7s cubic-bezier(.65,0,.35,1) backwards}
@keyframes fil{from{transform:scaleX(0)}}
.lv-checks{display:grid;gap:6px;color:var(--muted)}
.lv-checks li{display:flex;align-items:center;gap:8px;animation:monte .3s backwards}
.lv-checks li::before{content:"✓";display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#2E7D5B;color:#fff;font:800 10px var(--body)}
.lv-checks li:nth-child(1){animation-delay:2.6s}.lv-checks li:nth-child(2){animation-delay:3.2s}.lv-checks li:nth-child(3){animation-delay:3.8s}
.lv-on{justify-self:start;display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;background:rgba(95,212,160,.14);border:1px solid #5FD4A0;color:#7BE3B4;font:800 15px var(--display);animation:monte .4s 4.4s backwards}
.lv-on i{width:10px;height:10px;border-radius:50%;background:#5FD4A0;animation:clignote 2s 4.8s infinite}

/* 4. Suivi : une demande, la retouche appliquée, un tableau de visites (sans chiffres) */
.v-suivi{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
.sv-msg,.sv-site,.sv-stats{padding:12px 14px;border-radius:12px}
.sv-msg{grid-column:1/-1;background:#1B2050;border:1px solid #343b7c;border-left:3px solid var(--violet);animation:bulle .4s .4s backwards}
.sv-msg b,.sv-site b,.sv-stats b{display:block;font-size:13px;margin-bottom:4px}
.sv-msg p{color:var(--muted)}
.sv-site{position:relative;background:#fff;color:#16182F;box-shadow:0 30px 50px -26px rgba(0,0,0,.9)}
.sv-site p{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 8px;padding:5px 0;border-top:1px solid #E6E2F0;font-size:12px}
.sv-site p span{color:#4C5070}
.sv-chg s{color:#9AA0BF;animation:fade .3s 2.2s backwards}
.sv-new{flex-basis:100%;text-align:right;color:#2E7D5B!important;font-weight:700;animation:monte .35s 2.8s backwards}
.sv-chg{animation:surligne 1.2s 2.6s backwards;border-radius:4px}
@keyframes surligne{from{background:rgba(255,201,113,.5)}}
.sv-done{position:absolute;top:10px;right:10px;padding:2px 8px;border-radius:999px;background:#2E7D5B;color:#fff;font-size:11px;font-weight:700;animation:monte .3s 3.4s backwards}
.sv-done::before{content:"✓ "}
.sv-stats{display:grid;align-content:start;background:#1B2050;border:1px solid #343b7c}
.sv-bars{display:grid;grid-template-columns:repeat(7,1fr);align-items:end;gap:5px;height:70px;margin-top:4px}
.sv-bars i{border-radius:4px 4px 0 0;background:linear-gradient(180deg,var(--violet),var(--blue));transform-origin:bottom;animation:barre .6s cubic-bezier(.2,.8,.2,1) backwards}
.sv-bars i:nth-child(1){height:40%;animation-delay:1.2s}.sv-bars i:nth-child(2){height:55%;animation-delay:1.28s}.sv-bars i:nth-child(3){height:48%;animation-delay:1.36s}.sv-bars i:nth-child(4){height:62%;animation-delay:1.44s}.sv-bars i:nth-child(5){height:78%;animation-delay:1.52s}.sv-bars i:nth-child(6){height:100%;animation-delay:1.6s}.sv-bars i:nth-child(7){height:30%;animation-delay:1.68s}
@keyframes barre{from{transform:scaleY(0)}}
.sv-days{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-top:4px;color:var(--muted);font-size:10.5px;text-align:center}
.sv-days i{font-style:normal}
.sv-stats small{margin-top:6px;color:var(--muted);font-size:10.5px}
.v-suivi:not(:has(.sv-stats)) .sv-site{grid-column:1/-1}

/* 5. Vitrine : une seule page (vraie capture) qui défile, ses sections repérées */
.v-one{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;width:min(420px,86vw)}
.op-sheet{position:relative;margin:0;height:min(400px,46vh);overflow:hidden;border-radius:10px;background:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 44px 80px -34px rgba(0,0,0,.95)}
.op-sheet img{width:100%;height:auto;animation:defile 9s 1s ease-in-out infinite alternate}
@keyframes defile{0%,8%{transform:translateY(0)}92%,100%{transform:translateY(calc(-100% + min(400px,46vh)))}}
.op-tags{display:grid;gap:10px}
.op-tags li{position:relative;padding:6px 12px;border-radius:999px;background:#1B2050;border:1px solid #343b7c;font-weight:600}
.op-tags li::before{content:"";position:absolute;right:100%;top:50%;width:14px;height:2px;background:var(--amber)}
.v-one:not(.tags) .op-tags{display:none}
.v-one:not(.tags){grid-template-columns:1fr;width:min(320px,70vw)}
.v-one.tags .op-tags li{animation:monte .35s backwards}
.v-one.tags .op-tags li:nth-child(2){animation-delay:.5s}.v-one.tags .op-tags li:nth-child(3){animation-delay:1s}.v-one.tags .op-tags li:nth-child(4){animation-delay:1.5s}
.op-cap{grid-column:1/-1;color:var(--muted);font-size:12px}

/* 6. Vitrine et Sur mesure : un vrai petit écran de téléphone, avec l'appui du doigt */
.v-call{position:relative;width:min(230px,52vw)}
.cl-ph{position:relative;display:grid;gap:10px;padding:34px 14px 16px;aspect-ratio:9/18;overflow:hidden;border-radius:34px;background:#FBF7F2;color:#2A2420;border:7px solid #1B1F45;box-shadow:0 0 0 1px #3d4390,0 50px 80px -30px rgba(111,130,255,.55);font:500 12px/1.35 var(--body)}
.cl-ph::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(0,0,0,.05);pointer-events:none}
.cl-notch{position:absolute;top:8px;left:50%;width:64px;height:16px;margin-left:-32px;border-radius:999px;background:#1B1F45}
.cl-logo{font:800 13px Georgia,serif;letter-spacing:.02em;color:#3F5B3A}
.cl-h{font:700 19px/1.1 Georgia,serif}
.cl-hrs{display:inline-flex;align-items:center;gap:6px;color:#5C5248}
.cl-hrs i{width:8px;height:8px;border-radius:50%;background:#3F9B5B}
.cl-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cl-btns i,.bk-go{display:grid;place-items:center;min-height:38px;border-radius:999px;font-style:normal;font-weight:700}
.cl-tel{background:#3F5B3A;color:#fff}
.cl-iti{border:1.5px solid #3F5B3A;color:#3F5B3A}
.cl-map{position:relative;flex:1;min-height:70px;border-radius:12px;background:repeating-linear-gradient(0deg,transparent 0 15px,#E6DDD0 15px 16px),repeating-linear-gradient(90deg,transparent 0 19px,#E6DDD0 19px 20px),#F2ECE3}
.cl-map .pin{background:#B8336A}
.cl-sheet{position:absolute;left:8px;right:8px;bottom:8px;display:grid;gap:6px;padding:12px;border-radius:18px;background:#fff;box-shadow:0 -10px 30px -10px rgba(0,0,0,.35);text-align:center;animation:feuille 7s cubic-bezier(.2,.8,.2,1) backwards}
.cl-sheet b{font:700 13px var(--body)}
.cl-sheet i{font-style:normal;padding:8px;border-radius:12px;background:#3F5B3A;color:#fff;font-weight:700}
.cl-sheet i + i{background:#F2ECE3;color:#2A2420}
@keyframes feuille{0%,40%{transform:translateY(130%)}50%{transform:none}}
.tap{position:absolute;left:30%;top:51%;width:4px;height:4px;pointer-events:none}
.tap::after{animation:clic .6s 2.3s backwards}
/* Sur mesure : réservation d'un créneau */
.bk-days,.bk-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.bk-days i,.bk-slots i{display:grid;place-items:center;min-height:34px;border-radius:10px;border:1.5px solid #D9CFBE;font-style:normal;font-weight:700}
.bk-days .on{background:#2A2420;color:#fff;border-color:#2A2420}
.bk-slots .pick{background:#B4532A;color:#fff;border-color:#B4532A;animation:choix .3s 2.3s backwards}
@keyframes choix{from{background:transparent;color:#2A2420;border-color:#D9CFBE}}
.bk-slots .full{color:#B5AA9C;text-decoration:line-through}
.bk-go{background:#B4532A;color:#fff}
.bk-ok{display:flex;align-items:center;gap:6px;padding:10px;border-radius:12px;background:#E5F2E8;color:#245C33;font-weight:700;animation:monte .35s 4.4s backwards}
.bk-ok::before{content:"✓"}
.v-book .cl-h{font-size:17px}
.v-book .tap{left:50%;top:58%}
.v-book .tap::after{animation:clic .6s 2.1s backwards}
.v-book .cl-logo{color:#B4532A}

/* 7. Site complet : les vraies pages d'un même site, qui passent l'une après l'autre en profondeur */
.v-multi{width:min(460px,86vw)}
.mu-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.mu-tabs li{padding:5px 12px;border-radius:999px;border:1px solid #343b7c;color:var(--muted);font-weight:600;animation:onglet 12s calc(var(--k) * 3s - 12s) infinite}
@keyframes onglet{0%,22%,99%,100%{background:var(--ink-3);color:var(--text);border-color:var(--amber)}24%,95%{background:transparent;color:var(--muted);border-color:#343b7c}}
.mu-deck{position:relative;aspect-ratio:16/10;margin-top:44px;transform-style:preserve-3d}
.mu-pg{position:absolute;inset:0;margin:0;transform:translate3d(0,calc(var(--k) * -16px),calc(var(--k) * -60px));animation:pile 12s calc(var(--k) * 3s - 12s) infinite}
.mu-pg img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:10px;background:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 40px 70px -34px rgba(0,0,0,.95)}
/* une page au premier plan 3 s, puis elle part sur le côté et revient au fond de la pile */
@keyframes pile{
  0%,22%{transform:translate3d(0,0,0);opacity:1}
  27%{transform:translate3d(40%,0,-140px) rotateY(-16deg);opacity:0}  /* part en arrière : ne recouvre jamais la page suivante */
  28%{transform:translate3d(0,-48px,-180px);opacity:0}
  32%,47%{transform:translate3d(0,-48px,-180px);opacity:.75}
  52%,72%{transform:translate3d(0,-32px,-120px);opacity:.85}
  77%,97%{transform:translate3d(0,-16px,-60px);opacity:.95}
  100%{transform:translate3d(0,0,0);opacity:1}}
.v-multi.open .mu-pg{animation:none;transform:translate3d(calc((var(--k) - 1.5) * 30%),0,calc(var(--k) * -30px)) rotateY(calc((var(--k) - 1.5) * -14deg))}
.v-multi.open .mu-tabs li{animation:none}
.v-multi.open .mu-deck{width:52%;margin:16px auto 20px}
.v-multi .op-cap{display:block;margin-top:14px}

/* 8. Sur mesure : des fonctions qui viennent s'assembler sur la page */
.v-mods{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start;perspective:900px}
.md-base{grid-row:span 3;margin:0;height:min(340px,42vh);overflow:hidden;border-radius:10px;background:#fff;box-shadow:0 44px 70px -34px rgba(0,0,0,.95)}
.md-base img{width:100%;height:auto}
.md-m{display:grid;gap:8px;padding:12px;border-radius:12px;background:#FBF7F2;color:#2A2420;box-shadow:0 26px 40px -22px rgba(0,0,0,.9);animation:assemble .7s cubic-bezier(.2,.8,.2,1.15) backwards}
.md-m b{font-size:13px}
.md-resa{animation-delay:.5s}.md-cat{animation-delay:1.3s}.md-alert{animation-delay:2.1s}
@keyframes assemble{from{opacity:0;transform:translate3d(140px,-40px,260px) rotateY(-30deg)}}
.md-slots,.md-items{display:flex;flex-wrap:wrap;gap:5px}
.md-slots i,.md-items i{padding:4px 8px;border-radius:8px;border:1px solid #D9CFBE;font-style:normal;font-weight:600;font-size:11.5px}
.md-slots .on{background:#B4532A;color:#fff;border-color:#B4532A}
.md-items i::before{content:"";display:inline-block;width:9px;height:9px;margin-right:5px;border-radius:50%;background:#C9A27E;vertical-align:-1px}
.md-items i:nth-child(2)::before{background:#7E9C8F}.md-items i:nth-child(3)::before{background:#3F5B6E}
.md-f{padding:6px 8px;border-radius:8px;border:1px solid #D9CFBE;color:#8A7F72;font-size:11.5px}
.md-btn{justify-self:start;padding:5px 10px;border-radius:999px;background:#2A2420;color:#fff;font-style:normal;font-weight:700;font-size:11.5px}
.v-mods .op-cap{grid-column:1/-1}

/* 9. Cadrage : un devis papier qui se remplit, puis l'accord */
.v-devis{display:grid;justify-items:center;gap:14px;width:min(340px,80vw)}
.dv-doc{position:relative;width:100%;display:grid;gap:4px;padding:22px 22px 26px;border-radius:4px;background:#fff;color:#16182F;box-shadow:0 44px 70px -30px rgba(0,0,0,.95)}
.dv-doc b{font-size:22px}
.dv-doc small{color:#4C5070;font-size:12px;margin-bottom:8px}
.dv-doc li{display:flex;align-items:center;gap:8px;padding:7px 0;border-top:1px solid #ECE8F3;animation:monte .3s backwards}
.dv-doc li::before{content:"✓";color:#2E7D5B;font-weight:800}
.dv-doc li:nth-child(1){animation-delay:.5s}.dv-doc li:nth-child(2){animation-delay:.9s}.dv-doc li:nth-child(3){animation-delay:1.3s}.dv-doc li:nth-child(4){animation-delay:1.7s}.dv-doc li:nth-child(5){animation-delay:2.1s}
.dv-sign{position:absolute;right:18px;bottom:-14px;padding:6px 14px;border:2px solid #6B3FCF;border-radius:8px;color:#6B3FCF;background:#fff;font:800 13px var(--display);rotate:-6deg;animation:tampon .35s 3.4s cubic-bezier(.2,.8,.2,1.3) backwards}
@keyframes tampon{from{opacity:0;translate:0 -20px}}
.dv-note{justify-self:stretch;padding:10px 12px;border-radius:12px 12px 12px 4px;background:#1B2050;border:1px solid #343b7c;color:var(--muted);font-size:12.5px;animation:bulle .4s 2.6s backwards}

@media(max-width:760px){
  .v-chat,.v-wire,.v-live,.v-suivi,.v-mods{font-size:12px}
  .v-chat{grid-template-columns:1fr}

  .ch-msgs .m-dots{display:none}
  .v-wire{grid-template-columns:1fr}
  .wf-notes{grid-template-columns:repeat(3,1fr);font-size:11px}
  .wf-notes li{grid-template-columns:1fr;justify-items:start;gap:4px}
  .v-wire .cur{display:none}
  .wf-img{display:none}  /* place gagnée : la scène tient sans défiler */
  .lv-addr{font-size:13.5px}
  .v-suivi{grid-template-columns:1fr}
  .sv-bars{height:46px}
  .op-sheet{height:min(260px,34vh)}
  @keyframes defile{0%,8%{transform:translateY(0)}92%,100%{transform:translateY(calc(-100% + min(260px,34vh)))}}
  .v-one.tags{grid-template-columns:minmax(0,1fr) auto;gap:10px}
  .op-tags li{padding:4px 9px;font-size:11.5px}
  .v-call{width:min(170px,46vw)}
  .cl-ph{padding:28px 10px 12px;gap:7px;border-radius:28px;border-width:6px;font-size:11px}
  .cl-h{font-size:15px}.v-book .cl-h{font-size:14px}
  .cl-btns i,.bk-go{min-height:30px}
  .bk-days i,.bk-slots i{min-height:28px}
  .cl-map{min-height:40px}
  .md-base{height:min(250px,32vh)}
  .md-m{padding:9px;gap:5px}
}
/* prix en relief : vraie taille de police (réglée sur la largeur de sa zone), relief en text-shadow 2D, aucun transform */
.v-price{text-align:center;max-width:100%}
.v-price small{display:block;font:600 1.05rem/1.3 var(--body);color:var(--muted);margin-bottom:.6em}
.pile{position:relative;display:block;font:800 clamp(2.8rem,21cqi,8rem)/1.12 var(--display);letter-spacing:-.05em;white-space:nowrap}
.pile .cou{position:absolute;inset:0;color:#4d379b;text-shadow:1px 1.5px #47338f,2px 3px #412f84,3px 4.5px #3b2b78,4px 6px #35276d,5px 7.5px #2f2362,6px 9px #291f56,7px 10.5px #231b4b}
.pile .f{position:relative;display:block;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
/* médaille qui pivote (étapes) */
.v-coin{position:relative;width:min(240px,46vw);aspect-ratio:1;animation:coin 7s cubic-bezier(.6,0,.4,1) infinite}
@keyframes coin{0%,35%{transform:rotateY(-12deg)}50%,85%{transform:rotateY(168deg)}100%{transform:rotateY(348deg)}}
.v-coin .fc{position:absolute;inset:0;display:grid;place-items:center;border-radius:50%;backface-visibility:hidden;background:radial-gradient(circle at 32% 28%,#2d3276,var(--ink-2) 70%);border:2px solid var(--violet);box-shadow:inset 0 0 50px -10px rgba(183,124,255,.6),0 30px 80px -30px rgba(183,124,255,.7);transform:translateZ(6px)}
.v-coin .fc svg{width:42%;height:42%;fill:none;stroke:var(--violet);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.v-coin .bk{transform:rotateY(180deg) translateZ(6px);font:800 clamp(5rem,12vw,8rem)/1 var(--display);color:var(--amber)}
.v-coin .tr1,.v-coin .tr2{position:absolute;inset:0;border-radius:50%;background:#3b2c80;transform:translateZ(2px)}
.v-coin .tr2{transform:translateZ(-2px)}
/* illustration reprise de la page (Ce que vous obtenez) : zoom plutôt que scale(), le texte est remis en page à sa vraie taille donc net */
.v-clone{width:375px;height:225px;display:grid;place-items:center}
.v-clone .gv{width:250px;height:150px;flex:none;zoom:1.5;box-shadow:0 40px 80px -30px rgba(111,130,255,.6)}
/* présentation sur téléphone : visuel au-dessus, texte dessous */
@media(max-width:760px){
  .pz-scene{grid-template-columns:minmax(0,1fr);grid-template-areas:"vis" "txt";align-content:start;align-items:start;gap:8px;padding:8px 16px 16px}
  .pz-vis{min-height:30vh}
  .pz-h{font-size:clamp(1.9rem,8.4vw,2.6rem);max-width:none}
  .pz-p{margin-top:12px;font-size:1.02rem}
  .pz-titre{flex-basis:100%;order:2;font-size:.95rem}
  .pz-ctl{width:100%;justify-content:flex-end}
  .pz-prog{order:3}
  .pz-b{padding:0 13px;font-size:.88rem}
  .pz-devis{flex-basis:100%;margin-left:0;min-height:46px;padding:12px}
  .pz-bot{justify-content:space-between}
  .v-layers{width:min(200px,52vw);--sp:20px}
  .v-phone{width:min(112px,30vw)}.v-phone .fc{padding:22px 10px 10px;gap:7px}.p-btn{height:28px;font-size:.78rem}.p-c{height:34px}
  .v-pages{width:min(150px,38vw)}
  .v-coin{width:min(170px,44vw)}
  .v-clone{width:275px;height:165px}.v-clone .gv{zoom:1.1}
  .v-price small{font-size:.95rem}
}
@media(max-height:560px) and (min-width:761px){.pz-vis{min-height:0}}

/* ---------- Réduire les animations : version statique propre ---------- */
@media(prefers-reduced-motion:reduce){
  .pz-prog li.now::after{transform:none}
  .v-layers.x{--gap:var(--sp)}
  .stage{cursor:pointer}
  .orbit-it{transition:none}
  .cur,.tap,.m-dots{display:none}  /* pas de faux clic figé */
}