/* L'ACCUEIL — ce qui n'appartient qu'à lui : le produit au premier écran, les métiers en onglets, le duo en direct. Le système
   graphique (en-tête, sections, boutons, tarif, questions, panneaux) est dans /statique/vitrine/vitrine.css depuis l'audit du 24/09/2026. */
:root{--ligne:var(--filet);--secondaire:var(--encre-3);--accent:var(--renard)}

/* ---------- le produit, au premier écran (25/09) ----------
   Repris de la version en ligne, que le dirigeant préfère : le site et l'espace pro du MÊME restaurant fictif, en perspective sur
   un socle, une demande qui part du téléphone et se pose sur l'espace. Le titre, le prix et les boutons ne bougent jamais ;
   seuls les appareils sont en perspective. La bascule « 01 Votre site / 02 Votre espace pro » met l'un ou l'autre devant. */
/* Un fond de scène PLAT (décision du 23/09, rappelée par l'audit design du 27/09, point 16) : le halo radial et le quadrillage
   masqué sous les appareils étaient des tics de gabarit. */
.produit-espace{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:center;min-width:0;padding:26px 0 24px;overflow:clip;background:var(--sourd)}
.produit-commandes{display:flex;align-self:center;gap:4px;margin:0 20px 18px;padding:5px;border:1px solid #d6c7ba;border-radius:99px;background:#fbfbfac9;box-shadow:0 4px 12px #65452908}
/* la place est réservée avant l'arrivée du script : pas de saut de mise en page sur une connexion lente */
.produit-commandes[hidden]{display:flex;visibility:hidden}
.produit-commandes button{min-height:44px;padding:0 20px;border:0;border-radius:99px;background:transparent;color:#62514a;font-size:13.5px;font-weight:600}
.produit-commandes button span{margin-right:6px;font-size:10px;opacity:.6}
.produit-commandes button[aria-pressed=true]{background:var(--encre);color:#fff;box-shadow:0 3px 10px #2c190e1a}
.exemple-commun{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 30px;font-size:14px;font-weight:650;letter-spacing:-.02em}
.exemple-commun span{font-size:11px;font-weight:400;letter-spacing:0;color:#66574d}
.appareils-espace{--depart-x:440px;--depart-y:196px;--arrivee-x:330px;--arrivee-y:58px;position:relative;height:430px;margin-top:12px;perspective:1400px;transform-style:preserve-3d;isolation:isolate}
.socle-produit{position:absolute;inset:0;z-index:-1;pointer-events:none;transform-style:preserve-3d}
.socle-produit i{position:absolute;left:12%;top:35%;width:77%;height:67%;border:1px solid #a5847050;border-radius:30px;background:linear-gradient(140deg,#fbfbfa70,#caa88825);transform:rotateX(66deg) rotateZ(-18deg) translateZ(-40px);box-shadow:18px 24px 40px #75554010}
.socle-produit i:nth-child(2){background:transparent;transform:rotateX(66deg) rotateZ(-18deg) translateZ(-60px)}
.socle-produit i:nth-child(3){background:transparent;transform:rotateX(66deg) rotateZ(-18deg) translateZ(-80px)}
.ordinateur-espace{position:absolute;z-index:1;top:24px;left:5%;display:block;width:82%;max-width:500px;padding:6px;border-radius:13px;background:#252424;color:var(--encre);text-decoration:none;
  transform:rotateY(16deg) rotateX(5deg) rotateZ(-3deg) scale(.92);box-shadow:-6px 5px 0 #63615d,0 28px 45px #583a2826}
.appareil-barre{display:flex;justify-content:space-between;padding:9px 14px;border-radius:8px 8px 0 0;background:#fbfbfa;font-size:11px}
.appareil-barre span{font-size:7px;letter-spacing:4px;color:#aaa}
.ordinateur-espace img{display:block;width:100%;height:auto;aspect-ratio:1280/900;object-fit:cover;border-radius:0 0 8px 8px}
.mobile-espace{position:absolute;z-index:2;right:10%;bottom:7px;display:block;width:162px;padding:5px;border-radius:27px;background:linear-gradient(135deg,#999,#222 25%,#777 90%);
  transform:rotateY(-17deg) rotateX(4deg) rotateZ(6deg) translateZ(32px);box-shadow:5px 5px 0 #49433e,10px 30px 40px #51392844}
.mobile-espace img{display:block;width:100%;height:auto;border-radius:22px}
.produit-espace[data-produit-vue=gestion] .ordinateur-espace{z-index:3;transform:rotateY(-5deg) translateY(8px) scale(.97)}
.produit-espace[data-produit-vue=gestion] .mobile-espace{z-index:1;transform:rotateY(-22deg) rotateZ(9deg) translateX(22px) scale(.87)}
/* La demande qui voyage : départ et arrivée mesurés par accueil.js sur les rectangles projetés des deux appareils ; la carte se
   déplace en translate, jamais en left/top (un déplacement de mise en page compterait comme un décalage). */
.demande-volante{position:absolute;z-index:4;left:0;top:0;width:150px;padding:10px 12px 11px;border-radius:12px;background:#fff;color:var(--encre);box-shadow:0 14px 30px -12px #3a251a80,0 0 0 1px #e6dcd3;
  font-size:11px;line-height:1.3;translate:var(--depart-x) var(--depart-y);opacity:0;transform:scale(.8);pointer-events:none}
.demande-etiquette{display:block;margin-bottom:4px;font-size:9px;letter-spacing:.07em;text-transform:uppercase;color:var(--renard)}
.demande-volante strong{display:block;margin-bottom:2px;font-size:14px;font-weight:650;letter-spacing:-.02em}
.pastille-demande{position:absolute;z-index:5;top:-11px;right:-9px;padding:7px 11px;border-radius:99px;background:var(--renard);color:#fff;font-size:10px;font-weight:650;letter-spacing:.02em;box-shadow:0 8px 18px -6px #d23c2599;opacity:0;transform:scale(.6);pointer-events:none}
.appareils-espace.recu .pastille-demande{opacity:1;transform:none}
/* sur ordinateur, l'ensemble suit un peu la souris (--tx, --ty) ; la classe n'arrive qu'après le dépliage */
.appareils-espace.pilote{animation:none;transform:perspective(1400px) rotateX(var(--ty,0deg)) rotateY(var(--tx,0deg))}
.produit-explication{min-height:32px;padding:10px 24px 0;text-align:center;font-size:13.5px;font-weight:600;color:#4b3a30}
.choix-demo{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 24px 0}
.espace-parcours{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:8px;min-height:78px;padding:15px 36px 15px 18px;border:1px solid #cbbbae;border-radius:14px;background:#fbfbfaaa;color:var(--encre);font-size:15px;font-weight:650;text-decoration:none}
.espace-parcours span{font-size:11px;font-weight:400}
.espace-parcours b{position:absolute;right:14px;bottom:15px;font-weight:400}
.espace-parcours.gestion-directe{border-color:var(--encre);background:var(--encre);color:#fff}
.statut-demo{padding:13px 24px 0;text-align:center;font-size:12px;color:#59554e}
@media(prefers-reduced-motion:no-preference){
  .appareils-espace{animation:produit-deplie 1.1s cubic-bezier(.2,.75,.15,1) both}
  @keyframes produit-deplie{from{transform:perspective(1400px) rotateY(-9deg) translateY(24px)}to{transform:none}}
  .ordinateur-espace,.mobile-espace{transition:transform .8s cubic-bezier(.2,.75,.15,1),box-shadow .6s}
  .produit-commandes button,.espace-parcours{transition:background .2s,color .2s,transform .25s}
  .espace-parcours:hover{transform:translateY(-3px)}
  .appareils-espace.pilote{transition:transform .4s cubic-bezier(.2,.7,.2,1)}
  .appareils-espace.joue .demande-volante{animation:demande-voyage 2.3s cubic-bezier(.5,.05,.2,1) both}
  @keyframes demande-voyage{0%{opacity:0;transform:scale(.8);translate:var(--depart-x) var(--depart-y)}14%,28%{opacity:1;transform:none;translate:var(--depart-x) var(--depart-y)}72%,86%{opacity:1;transform:none;translate:var(--arrivee-x) var(--arrivee-y)}100%{opacity:0;transform:scale(.92);translate:var(--arrivee-x) var(--arrivee-y)}}
  .appareils-espace.joue .pastille-demande{animation:pastille-pop .45s 1.7s cubic-bezier(.2,.9,.3,1.35) both}
  @keyframes pastille-pop{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:none}}
  .pastille-demande{transition:opacity .3s,transform .3s}}
@media(prefers-reduced-motion:reduce){
  .demande-volante{display:none}.pastille-demande{opacity:1;transform:none}
  .ordinateur-espace,.mobile-espace{transform:none!important;transition:none!important}}
@media(min-width:1600px){.appareils-espace{height:485px}.ordinateur-espace{max-width:560px}.mobile-espace{width:184px}}
/* entre tablette et petit portable, l'écran de l'espace à 82 % débordait sur sa légende (vu à 1024) ; le champ du nom passe sous
   son bouton, sinon « Nom de votre entreprise » était coupé */
@media(max-width:1099px) and (min-width:761px){.appareils-espace{height:350px}.ordinateur-espace{width:74%}.mobile-espace{width:140px}.produit-commandes button{padding:0 14px}
  .une .nommer{flex-direction:column;align-items:stretch;gap:10px;padding:0;border:0;border-radius:0;background:none;box-shadow:none}
  .une .nommer input{flex:none;height:54px;border:1px solid var(--filet-2);border-radius:999px;background:#fff}
  .une .nommer input:focus{border-color:var(--encre);box-shadow:0 0 0 4px #d23c2522}
  .une .nommer button{justify-content:space-between;min-height:54px}}
@media(max-width:760px){
  .produit-espace{padding:23px 0 26px}.produit-commandes{margin-bottom:18px}.produit-commandes button{padding:0 16px;font-size:13px}
  .exemple-commun{padding-inline:var(--gouttiere);font-size:13px}.exemple-commun span{font-size:10px}
  .appareils-espace{--depart-x:220px;--depart-y:132px;--arrivee-x:170px;--arrivee-y:60px;height:318px;margin-top:14px}
  .demande-volante{width:136px;padding:9px 10px;font-size:10px}.demande-volante strong{font-size:13px}.pastille-demande{top:-9px;right:-6px;padding:6px 9px;font-size:9px}
  .ordinateur-espace{top:38px;left:6%;width:82%;padding:4px;border-radius:10px}.appareil-barre{padding:7px 9px;font-size:9px}
  .mobile-espace{right:9%;bottom:16px;width:126px;padding:4px;border-radius:23px}.mobile-espace img{border-radius:19px}
  .produit-espace[data-produit-vue=gestion] .ordinateur-espace{transform:rotateY(-4deg) translateY(6px) scale(.97)}
  .produit-explication{min-height:24px;padding-top:0;font-size:12.5px}
  .choix-demo{margin:14px var(--gouttiere) 0}.espace-parcours{min-height:76px;padding:14px 30px 14px 14px;font-size:14px}.espace-parcours span{font-size:10px}
  .socle-produit i{left:10%;top:45%;width:80%;height:58%}}

/* L'étape 2 sans sa bulle (27/09 : « une phrase » est fermée en production) : la marge du bas lui faisait place ; sans elle, le
   mini-site remontait contre le haut de la carte au téléphone. */
.parcours .etape-image .mini-site{margin-bottom:0}

/* ---------- 03 · qui répond (27/09, registre v2 du comité : D16, R1) ----------
   À la place de la rangée des neuf exemples : une personne, son adresse, le formulaire. Même grille que les questions (titre à
   gauche, texte à droite), aucune couleur de plus, aucune photo tant que le fondateur ne l'a pas décidé. */
.qui-repond-grille{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:clamp(20px,5vw,80px);align-items:start}
.qui-repond-texte .chapo{margin-top:16px}
.qui-repond-joindre{margin-top:18px;font-size:17px;color:var(--encre-2)}
.qui-repond-joindre a{color:var(--encre);font-weight:600;overflow-wrap:anywhere}
.qui-repond-texte .lien-fleche{margin-top:14px;font-size:15.5px}
@media(max-width:860px){.qui-repond-grille{grid-template-columns:1fr}.qui-repond-texte .chapo{margin-top:0}}

/* ---------- 03 · au quotidien, par métier ---------- */
/* Les trois gestes du quotidien : trois cartes reliées, du client au professionnel. */
.etapes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:clamp(32px,4vw,48px);counter-reset:etape}
.etapes li{position:relative;padding:72px 24px 26px;border-radius:var(--rayon);background:var(--sourd);font-size:16px;line-height:1.5;color:var(--encre-2);counter-increment:etape}
.etapes li::before{content:counter(etape);position:absolute;top:22px;left:24px;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--encre);color:#fff;font:700 15px/1 var(--titre)}
.etapes li:not(:last-child)::after{content:"";position:absolute;top:40px;right:-13px;z-index:1;width:26px;height:26px;border-radius:50%;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D23C25' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/14px no-repeat;box-shadow:var(--ombre)}
.etapes b{display:block;margin-bottom:6px;font:700 19px/1.25 var(--titre);letter-spacing:-.02em;color:var(--encre)}
.metiers-choix{margin-top:clamp(24px,3vw,36px)}
body.vitrine .metiers-titre{font-size:clamp(26px,2.8vw,38px);line-height:1.1}
.metiers-onglets{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.metiers-onglets a{display:inline-flex;align-items:center;gap:9px;min-height:46px;padding:0 18px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--filet);color:var(--encre);font-size:15px;font-weight:600;text-decoration:none}
.metiers-onglets a i{display:none}
.metiers-onglets a:hover{box-shadow:inset 0 0 0 1.5px var(--encre)}
.metiers-onglets a[aria-selected=true]{background:var(--encre);box-shadow:none;color:#fff}
.metiers-onglets a[aria-selected=true] i{background:#fff}
.legende{margin-top:16px;font-size:13.5px;color:var(--encre-3)}
/* UN MÉTIER = UNE SCÈNE TEINTÉE (redessinée le 25/09 dans le langage du produit du premier écran). À gauche, qui, la promesse,
   les deux phrases ; à droite, l'espace et le site en légère perspective sur un socle, dans des cadres sobres. Tout tient dans
   un écran de portable. Le socle et les cadres sont ceux du premier écran (.socle-produit est partagé). */
.metier{position:relative;display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);align-items:center;gap:clamp(28px,4vw,56px);margin-top:22px;
  padding:clamp(28px,3.5vw,48px);border-radius:var(--rayon-g);overflow:clip;scroll-margin-top:90px;
  background:radial-gradient(ellipse at 72% 45%,#ffffffb8 0%,#ffffff00 58%),var(--t,var(--sourd))}
.metier[hidden]{display:none}
html:not(.js) .metier+.metier{margin-top:24px}
.metier-qui{font-size:14.5px;line-height:1.45;color:var(--encre-2)}
body.vitrine .metier h3{margin:10px 0 0;font-size:clamp(26px,2.5vw,36px);line-height:1.08;letter-spacing:-.035em}
.metier-tete .lien-fleche{margin-top:24px;font-size:15.5px}
.face-dits{display:grid;gap:14px;margin-top:24px}
.face-dits li{position:relative;padding-left:20px;font-size:15.5px;line-height:1.5;color:var(--encre)}
/* « Sur votre site / Dans votre espace » : étiquette et puce au vermillon, jamais à la couleur du métier (feu vert du 28/09, O9). */
.face-dits li b{display:block;margin-bottom:2px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--renard-fonce)}
.face-dits li::before{content:"";position:absolute;left:0;top:.45em;width:8px;height:8px;border-radius:50%;background:var(--renard)}
.metier-scene{position:relative;height:520px;perspective:1400px;transform-style:preserve-3d;isolation:isolate}
.metier-scene::before{content:"";position:absolute;inset:-10% -20%;z-index:-2;pointer-events:none;
  background:linear-gradient(90deg,#1111130a 1px,transparent 1px),linear-gradient(#1111130a 1px,transparent 1px);background-size:60px 60px;mask-image:radial-gradient(closest-side,#000,transparent)}
.metier-scene .socle-produit i{left:6%;top:40%;width:88%;height:62%}
/* des cadres sobres : une lunette sombre, une tranche suggérée par une ombre franche — plus de tranche métallisée ni de boutons */
.metier-scene .appareil{position:absolute;margin:0}
.appareil{padding:6px;border-radius:22px;background:#252424;box-shadow:-6px 5px 0 #63615d,0 30px 50px -18px #1111134d}
.appareil-telephone{padding:5px;border-radius:30px;background:linear-gradient(135deg,#999,#222 25%,#777 90%);box-shadow:5px 5px 0 #49433e,0 30px 44px -16px #11111355}
.face-ecran{display:block;width:100%;height:auto;border-radius:17px;background:#fff}
.appareil-telephone .face-ecran{border-radius:25px}
.appareil .ecran-live{border:0}
.appareil .vl-tel{border-radius:25px}.appareil .vl-tab{border-radius:17px}
.metier-scene .appareil-tablette{z-index:1;left:0;top:6px;width:57%;max-width:350px;transform:rotateY(14deg) rotateX(4deg) rotateZ(-2deg)}
.metier-scene .appareil-telephone{z-index:2;right:2%;bottom:0;width:37%;max-width:228px;transform:rotateY(-14deg) rotateX(4deg) rotateZ(3deg) translateZ(30px)}
/* sous 1100 px, le texte passe au-dessus et la scène garde toute la largeur : les écrans vivants des artisans ont besoin de leur taille */
@media(max-width:1099px){.metier{grid-template-columns:1fr}.metier-scene{width:min(100%,600px);margin-inline:auto}}
@media(max-width:760px){.etapes{grid-template-columns:1fr;gap:14px}.etapes li:not(:last-child)::after{top:auto;bottom:-13px;right:auto;left:30px;transform:rotate(90deg)}
  /* au téléphone, l'un sous l'autre et de face : réduits côte à côte, les écrans vivants deviendraient illisibles */
  .metier{gap:24px;padding:24px 18px}
  .metier-scene{display:grid;justify-items:center;gap:28px;height:auto;perspective:none}.metier-scene::before,.metier-scene .socle-produit{display:none}
  .metier-scene .appareil{position:relative;inset:auto;transform:none}
  .metier-scene .appareil-telephone{width:min(250px,80%)}.metier-scene .appareil-tablette{order:2;width:min(300px,92%)}
  .metiers-onglets{flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(-1 * var(--gouttiere));padding:2px var(--gouttiere) 8px;scrollbar-width:none}
  .metiers-onglets::-webkit-scrollbar{display:none}.metiers-onglets a{white-space:nowrap;padding:0 16px}}


/* ---------- LE DUO EN DIRECT (24/09, nuit) — « de vraies interactions, un engagement, du moderne, du Uber-like ».
   Les deux appareils d'un métier deviennent vivants et reliés : ce que la cliente touche sur son téléphone arrive sur la
   tablette du pro, et inversement. Noir et blanc, un statut = une couleur (nouveau, envoyé, accepté), de grands chiffres,
   de grands boutons, « En direct ». Chaque geste montré existe dans le produit. ---------- */
.ecran-live{--vl-noir:#0b0b0d;--vl-vert:#12a150;--vl-bleu:#2f6fed;--vl-rouge:#a8321e;--vl-gris:#8a8983;--vl-fond:#f3f3f1;
  position:relative;display:flex;flex-direction:column;width:100%;overflow:hidden;background:#fff;color:var(--vl-noir);
  font-family:Archivo,system-ui,sans-serif;line-height:1.3;text-align:left;border:8px solid #0c0c0e;-webkit-tap-highlight-color:transparent}
.ecran-live[hidden]{display:none}
.appareil.vivant .face-ecran{display:none}
.vl-tel{aspect-ratio:780/1654;border-radius:44px}
.vl-tab{aspect-ratio:1200/1648;border-width:15px;border-radius:26px;background:var(--vl-fond)}
.ecran-live button{font:inherit;cursor:pointer}
.vl-barre{flex:none;display:flex;align-items:center;justify-content:space-between;height:34px;padding:0 20px;font-size:12px;font-weight:700}
.vl-tab .vl-barre{height:22px;padding:0 14px;font-size:10px}
.vl-ilot{width:70px;height:20px;border-radius:12px;background:#050505}
.vl-icones{display:flex;gap:3px;align-items:flex-end}.vl-icones i{display:block;width:14px;height:7px;border:1.5px solid currentColor;border-radius:2px}
.vl-icones i:first-child{width:12px;border:0;background:linear-gradient(90deg,currentColor 0 2px,transparent 2px 4px,currentColor 4px 6px,transparent 6px 8px,currentColor 8px 10px,transparent 10px)}
/* les vues du téléphone : une seule à la fois */
.vl-vue{display:none;flex:1;flex-direction:column;gap:10px;padding:8px 14px 16px}
.vl-tel[data-vue=estimer] [data-vue=estimer],.vl-tel[data-vue=envoye] [data-vue=envoye],.vl-tel[data-vue=devis] [data-vue=devis],.vl-tel[data-vue=accepte] [data-vue=accepte]{display:flex;animation:vl-entre .35s ease both}
@keyframes vl-entre{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.vl-vue h5{margin:2px 0 0;font-size:19px;line-height:1.1;font-weight:800;letter-spacing:-.02em}
.vl-vue p{margin:0;font-size:13px;color:#3c3c42}
.vl-marque{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:700}
.vl-marque b{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--vl-noir);color:#fff;font-size:12px}
.vl-marque small{display:block;font-weight:400;color:var(--vl-gris);font-size:11px}
.vl-puces{display:flex;flex-wrap:wrap;gap:6px}
.vl-puce{padding:7px 11px;border:1.5px solid #e2e1dc;border-radius:999px;background:#fff;font-size:12px;font-weight:700;color:var(--vl-noir)}
.vl-puce.actif{background:var(--vl-noir);border-color:var(--vl-noir);color:#fff}
.vl-curseur{display:grid;grid-template-columns:1fr auto;gap:6px 8px;align-items:center;font-size:12px;font-weight:700;color:var(--vl-gris)}
.vl-curseur output{color:var(--vl-noir);font-size:14px}
.vl-curseur input{grid-column:1/-1;width:100%;accent-color:var(--vl-noir);height:26px}
.vl-curseur[hidden]{display:none}
.vl-prix{display:grid;gap:2px;padding:14px;border-radius:16px;background:var(--vl-fond)}
.vl-prix small{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--vl-gris)}
.vl-prix b{font-size:25px;font-weight:800;letter-spacing:-.03em;transition:transform .15s}
.vl-prix b.bouge{transform:scale(1.04)}
.vl-prix span{font-size:11px;color:var(--vl-gris)}
.vl-cta{margin-top:auto;min-height:48px;border:0;border-radius:14px;background:var(--vl-noir);color:#fff;font-size:15px;font-weight:800;transition:transform .12s}
.vl-cta:active,.vl-btn:active,.vl-cta.touche,.vl-btn.touche{transform:scale(.96)}
.vl-cta.vl-vert{background:var(--vl-vert)}
.vl-coche{display:grid;place-items:center;width:58px;height:58px;margin-top:18px;border-radius:50%;background:var(--vl-noir);color:#fff;font-size:28px;font-weight:800;animation:vl-coche .5s cubic-bezier(.2,1.6,.4,1) both}
.vl-coche.vl-vert{background:var(--vl-vert)}
@keyframes vl-coche{from{transform:scale(.3);opacity:0}to{transform:none;opacity:1}}
.vl-etapes{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:0}
.vl-etapes li{position:relative;padding:0 0 16px 26px;font-size:13px;font-weight:700;color:var(--vl-gris)}
.vl-etapes li::before{content:"";position:absolute;left:0;top:1px;width:14px;height:14px;border-radius:50%;border:2px solid #d6d4ce;background:#fff}
.vl-etapes li:not(:last-child)::after{content:"";position:absolute;left:8px;top:18px;bottom:0;width:2px;background:#e2e1dc}
.vl-etapes li.fait{color:var(--vl-noir)}.vl-etapes li.fait::before{border-color:var(--vl-vert);background:var(--vl-vert)}
.vl-sur{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--vl-gris)}
.vl-montant{font-size:28px;font-weight:800;letter-spacing:-.03em}.vl-montant small{font-size:13px;color:var(--vl-gris)}
.vl-lignes{list-style:none;margin:0;padding:10px 12px;border-radius:14px;background:var(--vl-fond);display:grid;gap:7px;font-size:12px}
.vl-lignes li{display:flex;justify-content:space-between;gap:8px}.vl-lignes span{font-weight:700}
.vl-case{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700}
.vl-case i{width:18px;height:18px;border-radius:5px;background:var(--vl-vert);position:relative}
.vl-case i::after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;border:solid #fff;border-width:0 2.5px 2.5px 0;rotate:45deg}
/* la notification du SMS de Robin, en haut du téléphone */
.vl-notif{position:absolute;left:8px;right:8px;top:30px;z-index:3;display:grid;gap:2px;padding:10px 12px;border-radius:16px;background:rgba(246,245,241,.97);
  box-shadow:0 12px 28px -10px #0006;font-size:12px;transform:translateY(-130%);transition:transform .45s cubic-bezier(.2,1,.3,1)}
.vl-notif b{font-size:12px}.vl-notif.vient{transform:none}
/* la tablette du pro */
.vl-entete{display:flex;align-items:flex-end;justify-content:space-between;padding:12px 16px 10px;background:#fff;border-bottom:1px solid #e6e5e0}
.vl-entete small{display:block;font-size:10.5px;color:var(--vl-gris);font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.vl-entete b{font-size:19px;font-weight:800;letter-spacing:-.02em}.vl-entete em{font-style:normal;display:inline-block}
.vl-entete em.bouge{animation:vl-saut .5s ease}
@keyframes vl-saut{40%{transform:translateY(-4px) scale(1.2);color:var(--vl-rouge)}}
.vl-direct{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:800;color:var(--vl-vert)}
.vl-direct i{width:8px;height:8px;border-radius:50%;background:var(--vl-vert);animation:vl-pouls 1.6s ease-out infinite}
@keyframes vl-pouls{0%{box-shadow:0 0 0 0 #12a15088}100%{box-shadow:0 0 0 9px #12a15000}}
.vl-liste{list-style:none;margin:0;padding:12px;display:grid;gap:10px}
.vl-carte{display:grid;gap:6px;padding:12px 13px;border-radius:14px;background:#fff;box-shadow:0 1px 0 #e6e5e0,0 6px 16px -12px #0003}
.vl-carte[hidden]{display:none}
.vl-carte p{margin:0;font-size:12px;color:#44444a}
.vl-ligne{display:flex;align-items:center;justify-content:space-between;gap:8px}.vl-ligne b{font-size:14px}
.vl-nouvelle{box-shadow:0 0 0 2px var(--vl-rouge),0 14px 30px -14px #a8321e88;animation:vl-arrive .55s cubic-bezier(.2,1.4,.4,1) both}
.vl-nouvelle.envoye{box-shadow:0 0 0 2px var(--vl-bleu),0 14px 30px -18px #2f6fed66}
.vl-nouvelle.accepte{box-shadow:0 0 0 2px var(--vl-vert),0 14px 30px -18px #12a15066;animation:vl-flash .8s ease}
@keyframes vl-arrive{from{opacity:0;transform:translateY(-18px) scale(.96)}to{opacity:1;transform:none}}
@keyframes vl-flash{30%{background:#e6f6ec}}
.vl-chip{padding:3px 9px;border-radius:999px;font-size:10.5px;font-weight:800;color:#fff;white-space:nowrap}
.vl-chip.rouge{background:var(--vl-rouge)}.vl-chip.bleu{background:var(--vl-bleu)}.vl-chip.vert{background:var(--vl-vert)}.vl-chip.gris{background:#ecebe7;color:#55555b}
.vl-photos{display:flex;gap:6px}.vl-photos i{width:46px;height:34px;border-radius:8px;background:linear-gradient(135deg,#cfd6dc,#9aa7b1)}
.vl-photos i+i{background:linear-gradient(135deg,#e2d6c8,#b9a48c)}
.vl-actions{display:flex;gap:8px}
.vl-btn{flex:1;min-height:36px;border-radius:10px;font-size:12.5px;font-weight:800;transition:transform .12s}
.vl-btn.clair{border:1.5px solid #dcdad4;background:#fff;color:var(--vl-noir)}.vl-btn.noir{border:0;background:var(--vl-noir);color:#fff}
.vl-btn[disabled]{opacity:.35;cursor:default}
.vl-visites{margin:auto 12px 12px;padding:12px 13px;border-radius:14px;background:#fff;box-shadow:0 1px 0 #e6e5e0}
.vl-visites p{display:flex;align-items:baseline;justify-content:space-between;margin:0}
.vl-visites small{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--vl-gris)}
.vl-visites p b{font-size:16px;font-weight:800}
.vl-visites ul{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:10px 0 0;padding:0;list-style:none}
.vl-visites li{display:grid;gap:1px;padding:8px;border-radius:10px;background:var(--vl-fond);font-size:10.5px;line-height:1.25;color:#55555b}
.vl-visites li b{font-size:15px;color:var(--vl-noir)}
/* l'invitation à toucher, et le doigt fantôme de la démonstration qui se joue seule */
.duo-essai{display:none;align-items:center;gap:8px;margin:14px 0 4px;font-size:13px;font-weight:700;color:var(--encre)}
.duo-essai i{width:9px;height:9px;border-radius:50%;background:var(--renard);animation:pouls 2.4s ease-out infinite}   /* le point qui invite à toucher : vermillon, comme le badge (un seul accent, O9) */
.metier.duo .duo-essai{display:flex}
.duo-doigt{position:absolute;z-index:5;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:#0b0b0d33;border:2px solid #fff;
  box-shadow:0 4px 14px #0004;pointer-events:none;opacity:0;transition:left .7s cubic-bezier(.4,0,.2,1),top .7s cubic-bezier(.4,0,.2,1),opacity .3s}
.duo-doigt.vu{opacity:1}.duo-doigt.appui{transform:scale(.8)}
@media(prefers-reduced-motion:reduce){.ecran-live *{animation:none!important;transition:none!important}}