/* ═══════════════════════════════════════════════════════════════════════════
   « UN APPEL, TOUT LE RESTE SUIT » — sous la section Réceptionniste de
   l'accueil (8 oct. 2026)

   Pas un lecteur vidéo, et rien à faire défiler : dès que la section est à
   l'écran, l'appel joue d'un trait. Le texte de gauche change tout seul,
   calé sur la vidéo, comme des sous-titres (le propriétaire : « je veux pas
   scroller, tout doit aller d'un coup, le texte suit l'appel »).

   L'histoire : un appel à Félix (la réceptionniste IA) quand le resto est
   fermé, puis le suivi automatique. La vidéo est la version « site » de
   motion/v2 (video.html#site) : sans titres de scène ni vignette, sur le fond
   --bg exact de la page ; les sous-titres de l'appel restent. Le masque
   radial efface ses bords : pas de cadre, elle se fond dans le site.
   ═══════════════════════════════════════════════════════════════════════════ */
.hi{position:relative;padding:24px 24px 88px}
.hi-wrap{max-width:1120px;margin:0 auto}
.hi-scene{display:grid;grid-template-columns:1fr minmax(320px,520px);gap:48px;align-items:center}
.hi-scene>*{min-width:0}

/* Les appareils */
.hi-media{position:relative;height:min(88vh,880px);order:2}
.hi-media video{display:block;height:100%;width:auto;max-width:100%;aspect-ratio:9/16;margin:0 auto;object-fit:cover;background:var(--bg);
  -webkit-mask-image:radial-gradient(ellipse 62% 56% at 50% 50%,#000 68%,transparent 100%);
          mask-image:radial-gradient(ellipse 62% 56% at 50% 50%,#000 68%,transparent 100%)}

/* Le haut-parleur : le seul bouton. Discret, sous les appareils. */
.hi-son{position:absolute;left:50%;bottom:2%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;z-index:3;
  padding:9px 16px;border-radius:99px;border:1px solid rgba(243,223,168,.35);background:rgba(10,11,15,.7);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--text-dim,#b6bccb);font:600 13px/1 var(--sans);cursor:pointer;
  transition:color .25s,border-color .25s,background .25s}
.hi-son:hover{color:#fff;border-color:rgba(243,223,168,.6)}
.hi-son:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.hi-son svg{width:16px;height:16px;stroke:var(--gold);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hi-son.actif{color:#fff;border-color:var(--gold)}

/* Le récit : les étapes sont empilées au même endroit, une seule visible.
   La grille donne à la pile la hauteur de la plus longue : rien ne saute. */
.hi-recit{order:1}
.hi-etapes{list-style:none;margin:0;padding:0;display:grid}
.hi-etape{grid-area:1/1;align-self:center;opacity:0;transform:translateY(14px);filter:blur(4px);pointer-events:none;
  transition:opacity .45s var(--ease),transform .55s var(--ease),filter .45s var(--ease)}
.hi-etape.on{opacity:1;transform:none;filter:none;pointer-events:auto;transition-delay:.12s}
.hi-heure{display:inline-flex;align-items:center;gap:8px;margin-bottom:18px;
  font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--gold)}
.hi-heure::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green,#27c281);box-shadow:0 0 10px var(--green,#27c281)}
.hi-titre{font-family:var(--serif);font-weight:600;font-size:clamp(30px,3.6vw,50px);line-height:1.08;letter-spacing:-.5px;color:#fff;margin:0 0 14px}
.hi-titre em{font-style:italic;color:var(--gold)}
.hi-texte{font-size:17px;line-height:1.65;color:var(--muted);max-width:30em;margin:0}

/* La progression : sept traits qui se remplissent avec l'appel (rien à cliquer) */
.hi-progres{display:flex;gap:6px;margin:34px 0 30px;max-width:420px}
.hi-progres i{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.09);overflow:hidden;position:relative}
.hi-progres i::after{content:"";position:absolute;inset:0;background:var(--gold);transform-origin:0 50%;transform:scaleX(var(--p,0))}

.hi-fin{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.hi-note{font-size:12px;color:var(--muted2,#565c6b)}
/* « Essayez-le vous-même » : le bac à sable essai/, où le visiteur réserve sur la vraie page */
.hi-boutons{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.hi-essai{color:#fff;font-weight:700;font-size:15px;text-decoration:none;padding:13px 18px;border-radius:10px;border:1px solid rgba(217,169,76,.45);background:rgba(217,169,76,.06)}
.hi-essai:hover{background:rgba(217,169,76,.14)}

/* Mobile : les appareils en haut, le récit dessous */
@media (max-width:860px){
  .hi{padding:16px 16px 64px}
  .hi-scene{grid-template-columns:1fr;gap:8px}
  .hi-media{order:0;height:min(68vh,620px)}
  .hi-recit{order:1;text-align:center}
  .hi-heure{margin-bottom:12px}
  .hi-titre{font-size:27px}
  .hi-texte{font-size:15.5px;margin:0 auto}
  .hi-progres{margin:22px auto 22px}
  .hi-fin{align-items:center}
  .hi-boutons{justify-content:center}
}

@media (prefers-reduced-motion:reduce){
  .hi-etape{transition:opacity .2s;transform:none;filter:none}
}