/* doctoclic.fr · Créer mon site et Votre démo (maquette optimale v10, 06/10/2026).
   Créer mon site : le configurateur « Studio » (A) : un accordéon de quatre questions à gauche (une seule ouverte, chaque
   réponse repliée en résumé), le site en grand sur une scène nuit à droite (sur téléphone, l'aperçu en haut).
   Votre démo (merci) : B · La démo en grand : la préparation (panneau nuit, jauge, quatre étapes) au-dessus de l'aperçu
   du site, puis « La suite, en trois temps » (cartes communes) ; le cas « je la prépare moi-même » avec ma photo. */
/* ── Créer mon site : le point de « Aperçu en direct » ── */
.point{position:relative;flex:none;width:8px;height:8px;border-radius:50%;background:var(--vert-logo)}
.point::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--vert-logo);animation:pouls 1.8s ease-out infinite}
/* ── Page « Votre démo » : la démo en grand (B, retenue le 05/10) ── */
@property --mp{syntax:'<number>';inherits:true;initial-value:0}
.merci{--mp:0;transition:--mp .8s ease}
.mv{min-height:calc(100vh - var(--hauteur-entete))}
.merci:not(.est-pret) .si-pret{display:none!important}
.merci:not(.est-manuel) .si-manuel{display:none!important}
.merci:is(.est-pret,.est-manuel) .si-prep{display:none!important}
.merci.est-pret .apparait,.merci.est-manuel .si-manuel{animation:monte .6s cubic-bezier(.2,.7,.2,1) both}
/* la démo elle-même dans le cadre dès qu'elle est en ligne (option A, 14/10/2026) : est-demo s'ajoute à est-pret et remplace
   les textes « elle arrive par e-mail » ; est-long : toujours en préparation au bout d'une minute */
.merci:not(.est-demo) .si-demo{display:none!important}
.merci.est-demo .si-pret:not(.si-demo){display:none!important}
.mvb-long{display:block;margin-top:2px;font-size:14px;color:var(--texte-sur-nuit-2)}
.merci:not(.est-long) .mvb-long{display:none}
/* barre d'actions */
.mv-b{background:var(--gris-100);padding-bottom:clamp(64px,8vw,104px)}
.mvb-barre{position:sticky;top:var(--hauteur-entete);z-index:20;background:var(--nuit);color:#fff}
.mvb-barre-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;min-height:72px;padding:10px 0}
.mvb-etat{display:flex;align-items:center;gap:12px;margin:0;font-size:15.5px;color:var(--texte-sur-nuit)}
.mvb-etat b{color:#fff;font-variant-numeric:tabular-nums}
.mvb-pastille{flex:none;width:10px;height:10px;border-radius:50%;background:var(--turquoise);box-shadow:0 0 0 5px rgba(20,184,176,.2);animation:ct-battre 1.2s ease-in-out infinite}
.merci:is(.est-pret,.est-manuel) .mvb-pastille{animation:none;background:var(--vert-logo)}
.mvb-act{display:flex;gap:10px}
.mvb-act .btn{min-height:46px;padding:0 18px;font-size:15px}
.mvb-act .btn-s{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35)}
.mvb-act .btn-s:hover{box-shadow:inset 0 0 0 1.5px #fff}

/* le site de la démo, en grand */
.mvb-cadre{position:relative;margin-top:32px}
.merci.est-manuel .mvb-cadre{display:none}
.merci.est-demo .mvb-cadre>:not(.mvb-vraie){display:none}
.merci.est-demo .mvb-vraie{animation:monte .7s ease both}
.mvb-vraie .mvb-ecran{height:min(640px,calc(100vh - var(--hauteur-entete) - 180px));min-height:420px;overflow:hidden;border-radius:0 0 15px 15px;background:#fff}
.mvb-vraie iframe{display:block;width:100%;height:100%;border:0}
.mvb-navig{box-shadow:0 50px 100px -50px rgba(7,7,48,.5)}
.merci.est-pret .mvb-navig{animation:monte .7s ease both}
.mvb-navig .cab-ent{padding:16px 28px}
.mvb-navig .cab-nav{margin-left:auto;margin-right:12px}
.mvb-navig .cab-heros{min-height:380px}
.mvb-navig .cab-txt{padding:40px 36px;gap:14px}
.mvb-navig .cab-titre{font-size:44px}
.mvb-navig .cab-p{font-size:16px}
.mvb-navig .cab-btn{font-size:14px;padding:13px 18px}
.mvb-navig .cab-soins{padding:16px 36px}
.mvb-bloc{padding:28px 36px;border-top:1px solid var(--gris-150)}
.mvb-t{display:block;margin-bottom:16px;font:800 22px var(--f);color:var(--nuit)}
.mvb-cartes{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.mvb-cartes span{display:grid;gap:8px;padding:16px;border-radius:14px;border:1px solid var(--gris-150)}
.mvb-cartes i{width:30px;height:30px;border-radius:10px;background:color-mix(in srgb,var(--c) 14%,#fff)}
.mvb-cartes b{font:700 14px var(--f);color:var(--nuit)}
.mvb-cartes em{display:block;height:6px;border-radius:3px;background:var(--gris-150)}
.mvb-cartes em+em{width:60%}
.mvb-infos{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:0 36px 32px}
.mvb-infos span{padding:14px 16px;border-radius:12px;background:var(--gris-100);font-size:13.5px;color:var(--gris-600)}
.mvb-infos b{display:block;font:700 14px var(--font-titre);color:var(--nuit)}

/* préparation : le site se construit sous un panneau nuit */
.mvb-prep{position:absolute;inset:37px 1px 1px;z-index:2;border-radius:0 0 15px 15px;overflow:hidden;background:#fff}
.mvb-squelette{position:absolute;inset:0;display:grid;align-content:start;gap:26px;padding:40px 36px}
.mvb-squelette :is(i,em,span){display:block;border-radius:10px;background:linear-gradient(90deg,var(--gris-150) 30%,#F8FAFC 50%,var(--gris-150) 70%);background-size:300% 100%;animation:miroite 1.4s linear infinite}
@keyframes miroite{from{background-position:100% 0}to{background-position:-100% 0}}
.mvb-sq-heros{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.mvb-sq-heros div{display:grid;gap:12px;align-content:center}
.mvb-sq-heros div i{height:14px}
.mvb-sq-heros div i:first-child{height:40px;width:80%}
.mvb-sq-heros div em{width:170px;height:44px}
.mvb-sq-heros>span{height:300px;border-radius:16px}
.mvb-sq-cartes{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.mvb-sq-cartes span{height:120px;border-radius:14px}
.mvb-pan{position:absolute;left:0;right:0;top:clamp(28px,6vw,84px);margin:0 auto;width:min(460px,100% - 32px);padding:26px 24px 18px;border-radius:26px;color:#fff;
  background:radial-gradient(340px 200px at 85% 0%,rgba(20,184,176,.28),rgba(20,184,176,0) 70%),linear-gradient(160deg,var(--nuit-profonde),#07062F);
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 50px 90px -30px rgba(4,5,34,.75),0 0 70px -24px rgba(20,184,176,.55);animation:monte .5s ease both}
.mvb-pan-t{display:flex;align-items:center;gap:10px;padding:0 4px;font:500 11px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--turquoise)}
.mvb-pan-pt{width:7px;height:7px;border-radius:50%;background:var(--turquoise);animation:ct-battre 1.2s ease-in-out infinite}
.mvb-pc{margin-top:14px;padding:0 4px;font:800 56px/1 var(--font-titre);letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:#fff}
.mvb-jauge{display:block;height:6px;margin:16px 4px 14px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden}
.mvb-jauge i{display:block;height:100%;width:calc(var(--mp) * 1%);border-radius:3px;background:linear-gradient(90deg,var(--vert-logo),var(--turquoise));box-shadow:0 0 14px rgba(20,184,176,.8)}
.mvb-et{display:grid;gap:2px;margin:0;padding:0;list-style:none}
.mvb-et li{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:14px;align-items:center;padding:10px;border-radius:14px;transition:background-color .35s}
.mvb-et li.encours{background:rgba(255,255,255,.06)}
.mvb-et b{display:block;font:600 15px/1.3 var(--font-titre);color:rgba(255,255,255,.5);transition:color .35s}
.mvb-et small{display:block;margin-top:2px;font-size:12.5px;line-height:1.35;color:var(--texte-sur-nuit-2);opacity:.75;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.mvb-et li:is(.fait,.encours) b{color:#fff}
.mvb-ic{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1.5px dashed rgba(255,255,255,.25);color:var(--nuit);transition:background-color .3s,border-color .3s}
.mvb-ic svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.mvb-et li.encours .mvb-ic{border:2px solid rgba(20,184,176,.22);border-top-color:var(--turquoise);animation:tourne .8s linear infinite}
.mvb-et li.fait .mvb-ic{border:0;background:var(--vert-logo);box-shadow:0 0 0 5px rgba(13,182,162,.15);animation:ct-coche .45s cubic-bezier(.3,1.6,.5,1)}
.mvb-et li.fait .mvb-ic svg{opacity:1}
.mvb-et em{font:500 10.5px/1 var(--font-mono);font-style:normal;letter-spacing:.1em;text-transform:uppercase}
.mvb-et li.encours em{color:var(--turquoise)}
.mvb-et li.encours em::after{content:"En cours"}
.mvb-et li.fait em{color:var(--vert-logo)}
.mvb-et li.fait em::after{content:"Fait"}

/* la suite, en trois temps */
.mvb-suite{margin-top:clamp(64px,8vw,104px);animation:monte .7s .15s ease both}
.merci:not(.est-pret):not(.est-manuel) .mvb-suite{display:none}
.mvb-temps li>span b{color:var(--nuit)}
.mvb-suite-t{display:grid;justify-items:center;gap:14px;margin-bottom:44px;text-align:center}
.mvb-copie{display:inline-flex;align-items:center;gap:10px;margin-top:4px;padding:7px 16px 7px 7px;border-radius:999px;background:#fff;border:1px solid var(--gris-200);font-size:14.5px;color:var(--gris-600);text-align:left}
.mvb-copie b{color:var(--nuit)}
.mvb-copie i{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:var(--vert-clair);color:var(--vert-action)}
.mvb-copie svg,.mvb-pic svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mvb-temps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch;margin:0;padding:0;list-style:none}
.mvb-temps li{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:30px 28px 28px;border-radius:24px;background:#fff;border:1px solid var(--gris-200);
  box-shadow:0 1px 2px rgba(7,7,48,.05),0 24px 48px -32px rgba(7,7,48,.35);transition:transform .25s,box-shadow .25s}
.mvb-temps li:hover{transform:translateY(-4px);box-shadow:0 1px 2px rgba(7,7,48,.05),0 34px 60px -34px rgba(7,7,48,.45)}
.mvb-temps li>b{font:800 21px/1.2 var(--font-titre);letter-spacing:-.015em;color:var(--nuit)}
.mvb-temps li>span:not(.mvb-n){flex:1;font-size:15.5px;line-height:1.6;color:var(--gris-600)}
.mvb-n{position:absolute;top:20px;right:24px;font:800 52px/1 var(--font-titre);letter-spacing:-.04em;color:var(--gris-150)}
.mvb-pic{display:grid;place-items:center;width:52px;height:52px;margin-bottom:6px;border-radius:16px;background:var(--vert-brume);color:var(--vert-action)}
.mvb-pic svg{width:24px;height:24px;stroke-width:1.8}
.mvb-lien{display:inline-flex;align-items:center;gap:6px;margin-top:4px;font:700 15px var(--font-titre);color:var(--vert-action);text-decoration:none}
.mvb-lien:hover{color:var(--vert-action-survol)}
.mvb-temps li.mvb-maint{border-color:transparent;color:#fff;transform:translateY(-10px);
  background:radial-gradient(320px 220px at 90% 0%,rgba(20,184,176,.26),rgba(20,184,176,0) 70%),linear-gradient(160deg,var(--nuit-profonde),#07062F);
  box-shadow:0 0 0 1px rgba(255,255,255,.06),0 40px 70px -34px rgba(4,5,34,.8),0 0 60px -26px rgba(20,184,176,.6)}
.mvb-temps li.mvb-maint:hover{transform:translateY(-14px)}
.mvb-maint>b{color:#fff!important}
.mvb-maint>span:not(.mvb-n){color:var(--texte-sur-nuit-2)!important}
.mvb-maint .mvb-n{color:rgba(255,255,255,.07)}
.mvb-maint .mvb-pic{background:rgba(20,184,176,.14);color:var(--turquoise);box-shadow:inset 0 0 0 1px rgba(20,184,176,.3)}
.mvb-maint .btn{margin-top:6px;min-height:48px}
.mvb-tag{position:absolute;top:-13px;left:28px;padding:7px 12px;border-radius:999px;background:var(--vert-logo);color:var(--nuit);font:600 11px/1 var(--font-mono);font-style:normal;letter-spacing:.06em;text-transform:uppercase;box-shadow:0 8px 20px -8px rgba(13,182,162,.8)}

/* cas où je prépare la démo moi-même */
.mvb-man{display:grid;grid-template-columns:auto minmax(0,1fr);gap:30px;align-items:start;max-width:860px;margin:48px auto 0;padding:44px;border-radius:28px;background:#fff;border:1px solid var(--gris-200);box-shadow:var(--ombre-forte);animation:monte .6s ease both}
.mvb-man img{width:88px;height:88px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 4px #fff,0 0 0 6px var(--vert-logo)}
.mvb-man-txt{display:grid;gap:12px;justify-items:start}
.mvb-man-txt p{font-size:18px;color:var(--gris-600)}
.mvb-man-txt b{color:var(--nuit)}
.mvb-man-act{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:6px}
.mvb-man-act small{max-width:300px;font-size:13.5px;line-height:1.45;color:var(--gris-500)}

@media (max-width:1100px){
  .mvb-cartes{grid-template-columns:1fr 1fr}
  .mvb-infos{grid-template-columns:1fr}
  .mvb-temps{grid-template-columns:minmax(0,1fr);gap:24px;max-width:560px;margin-inline:auto}
  .mvb-temps li.mvb-maint,.mvb-temps li.mvb-maint:hover{transform:none}
}
/* téléphone : un seul bouton dans la barre quand la démo est là (« Ouvrir mon espace » reste dans l'e-mail et dans La suite) */
@media (max-width:640px){
  .merci.est-demo .mvb-act .btn-s{display:none}
  .merci.est-demo .mvb-act .btn-p{padding:0 14px;font-size:14px}
  .mvb-vraie .mvb-ecran{height:calc(100vh - var(--hauteur-entete) - 200px);min-height:440px}
}
@media (max-width:620px){
  .mvb-act .btn{flex:1;min-height:44px;padding:0 12px;font-size:14px;white-space:nowrap}
  .mvb-long{display:none}
  .mvb-copie{border-radius:18px;align-items:flex-start}
  .mvb-navig .cab-nav{display:none}
  .mvb-navig .cab-heros{grid-template-columns:1fr;min-height:0}
  .mvb-navig .cab-photo{height:200px}
  .mvb-navig .cab-titre{font-size:30px}
  .mvb-navig .cab-txt{padding:24px 20px}
  .mvb-bloc{padding:22px 20px}
  .mvb-infos{padding:0 20px 24px}
  .mvb-squelette{padding:24px 20px}
  .mvb-sq-heros,.mvb-sq-cartes{grid-template-columns:1fr}
  .mvb-pan{padding:22px 16px 14px}
  .mvb-pc{font-size:46px}
  .mvb-temps li{padding:28px 22px 24px}
  .mvb-man{grid-template-columns:minmax(0,1fr);padding:28px 22px;gap:18px}
  .mvb-man img{width:72px;height:72px}
}
/* ── Créer mon site : le configurateur « Studio » (A, retenu le 05/10 ; mêmes données que la plateforme) ── */
.cfg-page{--coul:#1D5C68}
.cv [hidden]{display:none!important}
.cv .tel{display:block;position:relative;right:auto;bottom:auto}
.cv .cab-soins span{animation:pop .3s ease both}
.cv-nav .cab-nav{margin-left:auto;margin-right:10px}
.cv-err{margin:0;color:#B42318;font-size:14px;font-weight:600}
.cv-aide{font-size:14.5px;color:var(--gris-600)}
.cv-act{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:12px}
.cv-ex{margin-right:auto;padding:6px 0;border:0;background:none;font:600 14px var(--font-texte);color:var(--vert-action);cursor:pointer;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
.cv-ex:hover{color:var(--vert-action-survol)}
.cv-rgpd{font-size:12.5px;line-height:1.55;color:var(--gris-500)}
.cv-centre{font-size:13px;color:var(--gris-500)}
.cv-coul-t{font-size:14px;color:var(--gris-600)}
.cv-coul-t b{color:var(--nuit)}
.cv-go{min-height:56px;padding:0 28px;font-size:17px}
/* soins en puces */
.soin-puces{display:flex;flex-wrap:wrap;gap:8px}
.soin-p{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 16px 0 11px;border-radius:999px;border:1.5px solid var(--gris-200);background:#fff;
  font:600 14.5px var(--font-texte);color:var(--gris-600);cursor:pointer;transition:border-color .2s,background-color .2s,color .2s}
.soin-p i{display:grid;place-items:center;flex:none;width:19px;height:19px;border-radius:50%;border:1.5px solid var(--gris-300);transition:all .2s}
.soin-p svg{width:11px;height:11px;fill:none;stroke:#fff;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.soin-p svg{opacity:0}
.soin-p:hover{border-color:var(--gris-300);color:var(--nuit)}
.soin-p[aria-pressed=true]{border-color:var(--vert-action);background:var(--vert-clair);color:var(--vert-action)}
.soin-p[aria-pressed=true] i{border-color:var(--vert-action);background:var(--vert-action);animation:ct-coche .35s cubic-bezier(.3,1.6,.5,1)}
.soin-p[aria-pressed=true] svg{opacity:1}
/* styles en lignes */
.sty-lignes{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.sty-l{display:grid;justify-items:start;gap:8px;padding:12px;border-radius:16px;border:1.5px solid var(--gris-200);background:#fff;text-align:left;cursor:pointer;transition:border-color .2s,background-color .2s,box-shadow .2s}
.sty-l:hover{border-color:var(--gris-300)}
.sty-l-aa{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;background:color-mix(in srgb,var(--kdef) 12%,#fff);color:var(--kdef);font-size:19px;font-weight:700;transition:all .3s}
.coul-choisie .sty-l-aa{background:color-mix(in srgb,var(--coul) 12%,#fff);color:var(--coul)}
.sty-l-t b{display:block;font:700 14px/1.25 var(--font-titre);color:var(--nuit)}
.sty-l-t small{display:block;margin-top:2px;font-size:12px;line-height:1.3;color:var(--gris-500)}
.sty-l[aria-pressed=true]{border-color:var(--vert-action);background:var(--vert-brume);box-shadow:0 0 0 3px rgba(13,182,162,.16)}
.sty-l[aria-pressed=true] .sty-l-aa{background:var(--coul);color:#fff}
/* couleurs */
.cv-coul{display:flex;flex-wrap:wrap;gap:10px}
.cv-coul button{width:32px;height:32px;padding:0;border-radius:50%;border:3px solid #fff;background:var(--k);box-shadow:0 0 0 1.5px var(--gris-200);cursor:pointer;transition:transform .2s,box-shadow .2s}
.cv-coul button:hover{transform:scale(1.12)}
.cv-coul button[aria-pressed=true]{box-shadow:0 0 0 2.5px var(--nuit);transform:scale(1.08)}

/* Studio */
.cva-in{display:grid;grid-template-columns:calc(max(20px,(100vw - var(--largeur)) / 2) + 540px) minmax(0,1fr);min-height:calc(100vh - var(--hauteur-entete))}
.cva-panneau{display:grid;align-content:start;gap:26px;padding:48px 48px 56px max(20px,(100vw - var(--largeur)) / 2);background:radial-gradient(600px 400px at 0% 0%,var(--vert-brume),rgba(238,249,248,0) 70%),#fff}
.cva-tete h1{font-size:clamp(2rem,1.4rem + 1.6vw,2.7rem)}
.cva-tete>p:not(.rass){margin-top:10px;font-size:17.5px;color:var(--gris-600)}
.cva-acc{display:grid;gap:10px;margin:0;padding:0;list-style:none;counter-reset:a}
.cva-et{border-radius:20px;border:1px solid var(--gris-200);background:#fff;transition:box-shadow .3s,border-color .3s}
.cva-et.actif{border-color:transparent;box-shadow:0 0 0 1.5px var(--vert-action),0 30px 60px -36px rgba(7,7,48,.4)}
.cva-et-t{display:flex;align-items:center;gap:14px;width:100%;padding:16px 18px;border:0;border-radius:20px;background:none;text-align:left;font:inherit;color:inherit;cursor:pointer}
.cva-et.actif .cva-et-t{cursor:default}
.cva-et:not(.actif):not(.fait) .cva-et-t{opacity:.55}
.cva-num{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;border:1.5px solid var(--gris-300);font:700 13.5px var(--font-titre);font-style:normal;color:var(--gris-500);transition:all .3s}
.cva-num svg{display:none;width:15px;height:15px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.cva-et.actif .cva-num{border-color:var(--vert-action);background:var(--vert-action);color:#fff;box-shadow:0 0 0 5px rgba(11,122,117,.12)}
.cva-et.fait .cva-num{border-color:var(--vert-logo);background:var(--vert-logo)}
.cva-et.fait .cva-num span{display:none}
.cva-et.fait .cva-num svg{display:block}
.cva-et-l{display:grid;flex:1;min-width:0}
.cva-et-l b{font:700 16.5px/1.3 var(--font-titre);color:var(--nuit)}
.cva-et-l small{font-size:13.5px;color:var(--gris-500);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cva-et.fait .cva-et-l small{color:var(--gris-600)}
.cva-mod{display:none;font:600 13.5px var(--font-texte);color:var(--vert-action)}
.cva-et.fait .cva-mod{display:inline}
.cva-et-c{display:none;gap:16px;padding:0 20px 22px 66px}
.cva-et.actif .cva-et-c{display:grid;animation:monte .4s cubic-bezier(.2,.7,.2,1) both}
.cv-a .sty-lignes{grid-template-columns:1fr 1fr}
.cv-a .sty-l{grid-template-columns:40px minmax(0,1fr);align-items:center;gap:12px}
.cv-a .cv-go{justify-self:start}
.cva-scene{position:sticky;top:var(--hauteur-entete);height:calc(100vh - var(--hauteur-entete));display:grid;align-content:center;justify-items:center;gap:24px;padding:40px clamp(32px,4vw,72px);overflow:hidden;isolation:isolate;
  background:radial-gradient(620px 440px at 55% 42%,rgba(20,184,176,.2),rgba(20,184,176,0) 70%),linear-gradient(160deg,var(--nuit-profonde) 0%,var(--nuit-profonde) 45%,#07062F 100%)}
.cva-scene::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(rgba(203,213,225,.12) 1px,transparent 1.6px);background-size:26px 26px;
  -webkit-mask-image:radial-gradient(closest-side,#000,transparent);mask-image:radial-gradient(closest-side,#000,transparent)}
.cva-badge{display:inline-flex;align-items:center;gap:9px;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);font:500 11px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--turquoise)}
.cva-cadre{position:relative;width:min(720px,100%);padding:0 0 44px}
.cva-cadre .cv-nav{box-shadow:0 0 0 1px rgba(255,255,255,.08),0 60px 120px -40px rgba(0,0,0,.75),0 0 90px -30px rgba(20,184,176,.5)}
.cva-cadre .cv-tel{position:absolute;right:-28px;bottom:0;width:166px}
.cva-note{display:flex;align-items:center;gap:10px;max-width:520px;font-size:13.5px;color:var(--texte-sur-nuit-2);text-align:left}
.cva-note svg{flex:none;width:20px;height:20px;fill:none;stroke:var(--turquoise);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

@media (max-width:1100px){
  .cva-in{grid-template-columns:minmax(0,1fr)}
  .cva-panneau{padding:32px 20px 48px}
  .cva-scene{position:relative;top:0;order:-1;height:auto;padding:28px 20px 30px;gap:16px}
  .cva-cadre{width:auto;padding:0}
  .cva-cadre .cv-nav{display:none}
  .cva-cadre .cv-tel{position:relative;right:auto;width:150px;margin:0 auto}
  .cva-note{font-size:12.5px}
}
@media (max-width:620px){
  .cv-a .sty-lignes{grid-template-columns:minmax(0,1fr)}
  .cva-et-c{padding:0 16px 20px}
  .cva-et-t{padding:14px 16px}
  .sty-lignes{grid-template-columns:repeat(auto-fill,minmax(98px,1fr))}
  .cv-go{width:100%}
}
/* ════════ Créer mon site : mise à jour du 06/10 avec les choix validés ailleurs ════════ */
/* fond gris uni (plus de halo vert), cartes d’étape blanches */
.cva-panneau{background:var(--gris-100)}
.cva-tete{display:grid;gap:12px}
.cva-tete .eyebrow{margin-bottom:2px}
.cva-tete>p{margin:0!important;max-width:30em}
.cva-tete h1 em{font-style:normal;background:linear-gradient(95deg,var(--vert-action),var(--vert-moyen));-webkit-background-clip:text;background-clip:text;color:transparent}
/* puces : pastilles claires */
.cva-puces{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 0;padding:0;list-style:none}
.cva-puces li{display:inline-flex;align-items:center;gap:8px;padding:6px 13px 6px 7px;border-radius:999px;background:#fff;border:1px solid var(--gris-200);font:600 13.5px var(--font-texte);color:var(--nuit)}
.cva-puces i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--vert-clair);box-shadow:inset 0 0 0 1px rgba(13,182,162,.3)}
.cva-puces svg{width:12px;height:12px;fill:none;stroke:var(--vert-action);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
/* numéros d’étape : pastilles claires (en cours, faite) */
.cva-et.actif .cva-num{border-color:transparent;background:var(--vert-clair);color:var(--vert-action);box-shadow:inset 0 0 0 1.5px var(--vert-action),0 0 0 5px rgba(13,182,162,.1)}
.cva-et.fait .cva-num{border-color:transparent;background:var(--vert-clair);box-shadow:inset 0 0 0 1px rgba(13,182,162,.35)}
.cva-et.fait .cva-num svg{stroke:var(--vert-action)}
/* champs : comme le formulaire de Contact */
.cva-et-c .champ{display:block;font:500 11.5px/1.2 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--gris-600)}
.cva-et-c .champ small{margin-left:6px;font:400 12.5px var(--font-texte);letter-spacing:0;text-transform:none;color:var(--gris-500)}
.cva-et-c .champ input{display:block;width:100%;margin-top:8px;min-height:54px;padding:14px 16px;border:1.5px solid var(--gris-200);border-radius:14px;background:#fff;font:400 16px/1.5 var(--font-texte);letter-spacing:0;text-transform:none;color:var(--nuit);transition:border-color .2s,box-shadow .2s}
.cva-et-c .champ input:hover{border-color:var(--gris-300)}
.cva-et-c .champ input:focus{outline:none;border-color:var(--vert-logo);box-shadow:0 0 0 4px rgba(13,182,162,.14);background:#fff}
/* « Essayer avec un exemple » : lien souligné comme les autres liens du site */
.cv-ex{text-decoration:none;border-bottom:1.5px solid rgba(13,182,162,.45);padding:4px 0;font:700 15px var(--font-titre)}
.cv-ex:hover{border-color:var(--vert-action)}
.cv-centre{padding:14px 16px;border-radius:14px;border:1px dashed var(--gris-300);background:#fff}

/* ── Page « Votre démo » (merci) : mise à jour du 06/10, alignée sur les choix validés ──
   La suite dans sa propre section blanche, cartes du composant commun (B · Picto en ligne), l'étape en cours en vert
   clair (plus de carte bleu nuit) ; pastilles claires dans la préparation ; ma photo en petit, comme « Votre interlocuteur ». */
.mvb-act .btn>span:first-child{white-space:nowrap}
.mvb-barre{background:var(--nuit-profonde);box-shadow:0 1px 0 rgba(255,255,255,.06)}
.mvb-pastille{background:var(--vert-logo);box-shadow:0 0 0 5px rgba(13,182,162,.18)}
.mvb-et li.fait .mvb-ic{background:var(--vert-clair);color:var(--vert-action);box-shadow:0 0 0 5px rgba(13,182,162,.12)}
.mvb-man{align-items:center;gap:26px}
.mvb-man .qz-photo{align-self:start;margin-top:4px}
.mv-b{padding-bottom:clamp(56px,7vw,88px)}
.merci:not(.est-pret):not(.est-manuel) .mvs{display:none}
.mvs{animation:monte .7s .15s ease both}
.mvs-tete{display:grid;justify-items:center;gap:14px;margin-bottom:44px}
.mvs-tete>p:not(.mvb-copie){max-width:36em;color:var(--gris-600)}
.mvs-l{margin:0;padding:0;list-style:none;align-items:stretch}
.mvs-l .dc-carte{grid-template-rows:auto auto 1fr auto;align-content:stretch;padding:24px 24px 26px}
.mvs-l .dc-carte p{align-self:start}
.mvs-n{grid-column:1/-1;display:inline-flex;align-items:center;gap:8px;margin-bottom:6px;font:500 11.5px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--gris-500)}
.mvs-n i{width:8px;height:8px;border-radius:50%;background:var(--vert-logo);box-shadow:0 0 0 4px rgba(13,182,162,.18)}
.mvs-l .dc-carte>:is(.mvs-lien,.btn){grid-column:2;justify-self:start;margin-top:12px}
.mvs-lien{display:inline-flex;align-items:center;gap:6px;padding:4px 0;border-bottom:1.5px solid rgba(13,182,162,.45);font:700 15px var(--font-titre);color:var(--vert-action);text-decoration:none}
.mvs-lien:hover{border-bottom-color:var(--vert-action)}
.mvs-l .mvs-maint{background:var(--vert-clair);border-color:rgba(13,182,162,.55)}
.mvs-maint .mvs-n{color:var(--vert-action)}
.mvs-maint .dc-ic{background:#fff}
.mvs-maint .btn{min-height:46px;padding:0 18px;font-size:15px}
@media (max-width:1100px){.mvs-l{grid-template-columns:minmax(0,1fr);max-width:560px;margin-inline:auto}}
.mvs-tete .mvb-copie{max-width:none;margin-top:6px;font-size:14.5px}
.mvb-man .qz-photo>img:first-child{width:100%;height:100%;box-shadow:0 0 0 3px #fff,0 10px 24px -12px rgba(7,7,48,.45)}
.mvb-man .qz-photo>.qz-fav{width:20px;height:20px;border-radius:6px;box-shadow:0 4px 10px -4px rgba(0,0,0,.5)}
.merci.est-manuel .mv{min-height:0}
/* envoi de la demande (site.js) : en attente, puis message d'erreur si la plateforme refuse ou ne répond pas */
.cv-envoi{margin:0;font-size:14px;line-height:1.5;color:var(--gris-600)}
.cv-envoi.erreur{display:block;padding:10px 12px;border-radius:10px;background:var(--gris-150);font-weight:700;color:var(--nuit)}
/* préparation : plus de pourcentage ni de jauge (la page ne vérifie pas l'avancement, 06/10/2026) ; la liste suit le titre */
.mvb-pan-t+.mvb-et{margin-top:14px}

/* ═════════ Téléphone : version courte (B, choisie le 07/10/2026) (voir socle.css) ═════════ */
@media (max-width:640px){
  /* Créer mon site : les étapes d'abord (le premier champ et « Continuer » tiennent sur le premier écran), l'aperçu
     après ; « Essayer avec un exemple » à 44 px */
  .cva-scene{order:0;gap:10px;padding:16px 20px 18px}
  .cva-panneau{gap:20px;padding:24px 20px 40px}
  .cva-tete{gap:10px}
  .cva-tete>p:not(.rass){font-size:16px}
  .cv-ex{display:inline-flex;align-items:center;min-height:44px;padding:0}
  .cva-et-l small{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal}   /* sous-titre d'une étape : 2 lignes au plus, plus coupé à la 1re */
  /* Votre démo : la barre collante sur une rangée (127 → 60 px : le texte sur une ligne, le nom du cabinet sur la
     suivante, « e-mail » ne se coupe plus) ; sans « Nos soins » (les mêmes soins que les pastilles juste au-dessus) */
  .mvb-barre-in{flex-wrap:nowrap;gap:10px;min-height:0;padding:8px 0}
  .mvb-etat{gap:8px;font-size:12.5px;line-height:1.35}
  .mvb-etat .si-pret b{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  .mvb-act .btn{flex:none;padding:0 9px;font-size:13px}
  .mvb-cadre{margin-top:20px}
  .mvb-navig .cab-txt{padding:18px}
  .mvb-navig .cab-photo{height:150px}
  .mvb-bloc{display:none}
  .mvb-infos{gap:8px}
  .mvb-infos span{padding:10px 14px}
  .mv-b{padding-bottom:32px}
  .mvs-tete{margin-bottom:24px}
  .mvs-l{gap:10px}
  .mvs-l .dc-carte{padding:18px}
}

/* ── Confirmations (10/10/2026) : les trois lignes, même forme que .envoye-suite de Contact (p-contact.css) ; démo
   automatique : carte « Demande bien reçue » sur l'aperçu ; démo préparée par Bertrand : sous son titre ── */
.mvb-suite{display:grid;margin:0;padding:0;list-style:none;border:1px solid var(--gris-200);border-radius:16px;overflow:hidden;text-align:left}
.mvb-suite li{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:12px;padding:13px 16px;background:#fff}
.mvb-suite li+li{border-top:1px solid var(--gris-200)}
.mvb-suite i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--vert-clair);color:var(--vert-action)}
.mvb-suite i svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.mvb-suite .attente i{background:#fff;box-shadow:inset 0 0 0 2px var(--gris-300)}
.mvb-suite .attente i::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--vert-logo);animation:mvb-bat 1.2s ease-in-out infinite}
@keyframes mvb-bat{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.6);opacity:.55}}
.mvb-suite b{display:block;font:700 15px/1.35 var(--font-titre);color:var(--nuit)}
.mvb-suite small{display:block;font-size:13.5px;line-height:1.45;color:var(--gris-600)}
.mvb-suite small b{display:inline;font:inherit;font-weight:600;color:var(--nuit)}
.mvb-suite em{font:600 11px var(--font-mono);font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:var(--vert-action);white-space:nowrap}
.mvb-suite .attente em{color:var(--gris-600)}
.mvb-man-txt .mvb-suite{justify-self:stretch;margin-top:6px}
.mvb-recu{position:absolute;z-index:3;top:118px;right:22px;width:min(420px,46%);padding:16px;border-radius:20px;background:rgba(255,255,255,.97);border:1px solid var(--gris-200);box-shadow:0 30px 60px -30px rgba(7,7,48,.45)}
.merci.est-pret .mvb-recu{animation:monte .6s cubic-bezier(.2,.7,.2,1) .2s both}
.mvb-recu-t{display:flex;align-items:center;gap:10px;margin:0 0 10px;font:800 18px/1.2 var(--font-titre);color:var(--nuit)}
.mvb-ok{flex:none;width:30px;height:30px;border-radius:50%;background:var(--vert-action) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.6 3.6L17.5 8.6' fill='none' stroke='%23fff' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat}
.mvb-recu .mvb-suite li{padding:11px 13px}
@media (prefers-reduced-motion:reduce){.mvb-suite .attente i::before,.merci.est-pret .mvb-recu{animation:none}}
@media (max-width:900px){.mvb-recu{position:static;width:auto;margin:0 0 16px}}
@media (max-width:640px){
  .mvb-suite li{grid-template-columns:28px minmax(0,1fr);padding:12px 14px}
  .mvb-suite em{grid-column:2}
}

/* ── Téléphone (mission du 16/10/2026) : le bouton de l'étape en cours (« Continuer », avec son conteneur .cv-act, ou « Voir ma
   démo ») reste collé en bas de l'écran tant que l'étape est à l'écran : plus besoin de défiler pour le toucher ── */
@media (max-width:620px){
  .cva-et.actif .cv-act,.cva-et.actif .cv-go{position:sticky;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:3}
  .cva-et.actif .cv-act{margin:0 -8px;padding:8px;border-radius:16px;background:rgba(255,255,255,.96);box-shadow:0 14px 30px -14px rgba(7,7,48,.4)}
  .cva-et.actif .cv-act [data-suiv],.cva-et.actif .cv-go{width:100%;justify-content:center}
  .cva-et.actif .cv-go{box-shadow:0 16px 32px -12px rgba(7,7,48,.45)}
}

/* « Dr / Dre » (contrat 3 du 16/10/2026) : n'apparaît que si le prénom ne suffit pas à la plateforme ; deux cibles de 44 px */
.cv-genre{margin:14px 0 0;padding:0;border:0;min-width:0}
.cv-genre legend{padding:0;font:500 11.5px/1.2 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--gris-600)}
.cv-genre-ch{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.cv-genre-ch label{position:relative;display:inline-flex}
.cv-genre-ch input{position:absolute;opacity:0;width:1px;height:1px}
.cv-genre-ch span{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1.5px solid var(--gris-200);border-radius:999px;background:#fff;
  font:600 15px/1.2 var(--font-texte);color:var(--nuit);cursor:pointer}
.cv-genre-ch input:checked+span{border-color:var(--vert-action,#0B7A75);background:var(--vert-clair,#E6F7F6);color:var(--vert-action,#0B7A75)}
.cv-genre-ch input:focus-visible+span{outline:2px solid var(--vert-action,#0B7A75);outline-offset:2px}