/* =====================================================================
   ÉCRIN — la scène du MODE VOCAL (28/09/2026) : la sphère d'or de l'app,
   ce qu'on lui dit, ce qu'elle répond. Voir voix-demo.js.
   ===================================================================== */
.voix-scene{--orbe:clamp(260px,34vw,400px);position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;
  width:100%;max-width:560px;margin:0 auto;padding-top:28px;overflow-x:clip;isolation:isolate}
/* la scène se détache du fond d'écran du site : un voile sombre et rond derrière la sphère, SOUS
   le texte de la scène (z-index -1 dans la scène isolée) ; rogné en largeur seulement (jamais de
   défilement de côté sur un téléphone) — un Safari trop ancien pour « clip » garde un voile étroit */
.voix-scene::before{content:"";position:absolute;z-index:-1;left:50%;top:calc(28px + var(--orbe) / 2);
  width:calc(var(--orbe) * 1.5);height:calc(var(--orbe) * 1.5);transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(9,8,6,.92) 0%,rgba(9,8,6,.72) 55%,rgba(9,8,6,0) 100%)}
@supports not (overflow-x:clip){.voix-scene::before{width:100%}}
.voix-scene #voix-mode{width:100%;display:flex;justify-content:center;position:relative}
.voix-scene .vm-orbe{position:relative;width:var(--orbe);aspect-ratio:1;height:auto}
@supports not (aspect-ratio:1){.voix-scene .vm-orbe{height:var(--orbe)}}
/* la toile de l'app est carrée : son halo touche les bords — un fondu rond efface le carré */
.voix-scene .vm-orbe canvas{position:absolute;inset:0;width:100%;height:100%;display:block;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 52%,transparent 70.5%);
  mask-image:radial-gradient(circle at 50% 50%,#000 52%,transparent 70.5%)}
.voix-scene #voix-mode.repos .vm-orbe{filter:saturate(.35) brightness(.7);transition:filter .6s}
.voix-scene #voix-mode.reflechit .vm-orbe{filter:saturate(.7);transition:filter .4s}
.voix-scene #voix-mode .vm-orbe{transition:filter .4s}
/* sans JavaScript : la sphère posée, dessinée en CSS (mêmes dégradés que l'app) */
.voix-scene:not(.vs-vivante) .vm-orbe::before{content:"";position:absolute;left:31%;top:31%;width:38%;height:38%;border-radius:50%;
  background:radial-gradient(circle at 32% 30%,#fff3cf 0%,#d8ab6a 30%,#86603a 72%,#3c2a17 100%);
  box-shadow:0 0 90px 30px rgba(216,171,106,.18),0 0 0 1px rgba(255,244,222,.25) inset}
.voix-scene:not(.vs-vivante) .vm-orbe::after{content:"";position:absolute;inset:18%;border-radius:50%;
  border:1px solid rgba(216,171,106,.28);box-shadow:0 0 0 26px rgba(216,171,106,0),0 0 0 27px rgba(216,171,106,.16)}

.vs-texte{width:100%;margin-top:-6px}
.vs-etat{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:rgba(242,234,217,.62);min-height:20px;font-weight:600}
.vs-entendu{font-size:clamp(20px,2.3vw,25px);line-height:1.35;color:#e8ca96;min-height:2.7em;margin-top:10px;
  display:flex;align-items:flex-end;justify-content:center;text-wrap:balance}
.vs-reponse{font-size:17.5px;line-height:1.6;color:#f2efe9;min-height:6.4em;margin-top:12px;text-wrap:pretty}
.vs-attente{display:flex;gap:12px;justify-content:center;margin-top:12px}
.vs-attente[hidden]{display:none}
.vs-attente span{font-size:14.5px;font-weight:600;padding:10px 20px;border-radius:14px;border:1px solid rgba(242,234,217,.25);color:#f2efe9}
.vs-attente .oui{background:var(--or);color:#181206;border-color:transparent}

.vs-commandes{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:18px}
.vs-son{display:inline-flex;align-items:center;gap:10px;font:inherit;font-size:14.5px;font-weight:600;cursor:pointer;
  padding:12px 24px;border-radius:999px;border:1px solid var(--or);background:rgba(216,171,106,.08);color:var(--or);
  transition:background .2s,color .2s}
.vs-son[hidden]{display:none}
.vs-son:hover{background:rgba(216,171,106,.16);color:var(--or-vif)}
.vs-son svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.vs-son .onde{transition:opacity .2s}
.vs-son[aria-pressed="false"] .onde{opacity:.35}
.vs-son[aria-pressed="true"]{background:var(--or);color:#181206;border-color:transparent}
.vs-scenes{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.vs-scenes button{font:inherit;font-size:13px;letter-spacing:.02em;cursor:pointer;padding:7px 14px;border-radius:999px;
  border:1px solid var(--bord);background:rgba(23,20,16,.75);color:var(--texte2);transition:border-color .2s,color .2s}
.vs-scenes button:hover{color:var(--texte);border-color:var(--bord-or)}
.vs-scenes button[aria-pressed="true"]{color:var(--or);border-color:var(--or)}
.voix-scene:not(.vs-vivante) .vs-scenes{display:none}
.vs-note{margin-top:16px;max-width:460px}

/* ---------- le bandeau d'ouverture de la page Assistant : le texte, la scène ---------- */
.hero-voix{position:relative;padding:96px 0 40px;overflow:hidden}
.hero-voix .contenu{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  grid-template-areas:"titre scene" "texte scene";column-gap:40px;align-items:center}
.hero-voix .titre-col{grid-area:titre;align-self:end}
.hero-voix .scene-col{grid-area:scene}
.hero-voix .texte-col{grid-area:texte;align-self:start}
.hero-voix h1{font-size:clamp(34px,3.9vw,52px)}
.hero-voix .sous{max-width:560px}
.hero-voix .encart-prix{margin-top:30px}
.prix-limite{display:block;margin-top:8px;font-size:14px;color:var(--texte);letter-spacing:.01em}
.prix-limite b{color:var(--or);font-weight:600}
/* sur téléphone : le titre, puis la sphère tout de suite, puis le texte et le prix */
@media(max-width:980px){
  .hero-voix{padding-top:84px}
  .hero-voix .contenu{grid-template-columns:1fr;grid-template-areas:"titre" "scene" "texte";row-gap:6px}
}

/* ---------- les phrases qu'on peut lui dire ---------- */
.phrases .dire{display:block;font-size:18px;line-height:1.4;font-weight:500;color:var(--or-vif);margin:6px 0 10px}

@media(max-width:680px){
  .vs-reponse{font-size:16.5px;min-height:8.2em}
  .vs-entendu{min-height:2.8em}
}
@media print{.vs-commandes,.voix-scene .vm-orbe{display:none}}