/* ══════════════════════════════════════════════════════════════════════════════════════════
   DÉMO INTERACTIVE — habillage.
   Reprend les jetons de `site/assets/style.css` (mêmes couleurs, même police) : la démo est
   posée en iframe DANS la page, elle ne doit pas avoir l'air d'une pièce rapportée.
   ══════════════════════════════════════════════════════════════════════════════════════════ */
:root{
  --cyan:#1abdd0; --cyan-d:#0e9fb2; --cyan-x:#0b7f8f;
  --petrol:#0b1f28; --ink:#0b1f28; --muted:#5b7480; --line:#e3edf0; --card:#fff;
  --r:14px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--petrol);color:var(--ink);
  font-family:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  line-height:1.5;-webkit-text-size-adjust:100%;overflow:hidden;
}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── La scène ────────────────────────────────────────────────────────────────────────────
   🔑 LE POINT CHAUD EST POSITIONNÉ EN POURCENTAGE D'UN CADRE QUI A LE RATIO DE L'IMAGE.
      Aucun calcul en JS, donc aucune façon de se tromper d'échelle — c'est la même règle que
      le `viewBox` d'un SVG. Avec `object-fit:contain` sur une image qui remplit le conteneur,
      il aurait fallu recalculer le rectangle RENDU à chaque redimensionnement : un décalage
      qui ne se voit qu'en changeant la taille de la fenêtre, donc jamais pendant les essais. */
.demo{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:0}
.scene{
  position:relative;aspect-ratio:var(--ratio, 16/9);
  width:100%;max-height:100%;margin:auto;background:#000;overflow:hidden;
}
.scene>img,.scene>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* ── Le point chaud ─────────────────────────────────────────────────────────────────────── */
.point{
  position:absolute;left:var(--px);top:var(--py);transform:translate(-50%,-50%);
  width:2.6rem;height:2.6rem;border:0;padding:0;border-radius:50%;cursor:pointer;
  background:rgba(26,189,208,.28);box-shadow:0 0 0 2px rgba(255,255,255,.9), 0 6px 18px rgba(0,0,0,.35);
}
.point::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:rgba(26,189,208,.55);animation:pouls 1.9s ease-out infinite;
}
@keyframes pouls{0%{transform:scale(.55);opacity:.85}70%{transform:scale(1.45);opacity:0}100%{opacity:0}}
.point:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* ── La bulle ───────────────────────────────────────────────────────────────────────────── */
.bulle{
  position:absolute;left:var(--px);top:var(--py);
  max-width:min(17rem,44%);background:var(--card);color:var(--ink);
  border-radius:var(--r);padding:.8rem .95rem;font-size:.86rem;
  box-shadow:0 14px 34px rgba(11,31,40,.34);pointer-events:none;
}
/* Le côté est décidé par le lecteur d'après la position du point : une bulle qui sort du
   cadre serait illisible, et c'est le cas dès que le point est près d'un bord. */
.bulle.d{transform:translate(2.1rem,-50%)}
.bulle.g{transform:translate(calc(-100% - 2.1rem),-50%)}
.bulle.b{transform:translate(-50%,2.1rem)}
.bulle.h{transform:translate(-50%,calc(-100% - 2.1rem))}
.bulle b{display:block;font-size:.93rem;margin-bottom:.15rem}

/* Le bandeau des étapes SANS point chaud (fin de tunnel, clip) : elles ne désignent rien, leur
   phrase se pose donc en bas du cadre plutôt que de disparaître. Il laisse passer les clics :
   la barre du bas reste atteignable en dessous. */
.legende{
  position:absolute;left:5%;right:5%;bottom:4.6rem;
  background:var(--card);color:var(--ink);border-radius:var(--r);
  padding:.8rem .95rem;font-size:.86rem;text-align:center;
  box-shadow:0 14px 34px rgba(11,31,40,.34);pointer-events:none;
}
.legende b{display:block;font-size:.93rem;margin-bottom:.15rem}
/* `legende: "haut"` — quand le BAS du cadre porte ce dont la phrase parle (le dernier clip
   montre un prix barré en bas de la carte, que le bandeau recouvrait exactement). */
.legende.haut{top:1.1rem;bottom:auto;left:12%;right:12%}

/* ── Plein écran ──────────────────────────────────────────────────────────────────────────
   Le glyphe est un caractère, pas une image : rien à télécharger, et il suit la couleur du
   texte. Largeur fixe pour que la barre ne saute pas quand l'icône change (⛶ / ✕). */
.plein{width:2rem;text-align:center;font-size:.95rem;line-height:1;padding:.3rem 0}
/* En plein écran la scène prend toute la place : sans cela elle resterait bornée par la
   hauteur de l'iframe d'origine et on agrandirait du noir. */
:fullscreen .demo,:-webkit-full-screen .demo{height:100vh}
:fullscreen .scene,:-webkit-full-screen .scene{max-height:100vh}

/* ── Couverture et fin ──────────────────────────────────────────────────────────────────── */
.carte{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;gap:.7rem;padding:8%;
  background:linear-gradient(135deg,#0b1f28 0%,#0a2d38 60%,#0b7f8f 160%);color:#fff;
}
.carte h2{margin:0;font-size:clamp(1.2rem,3.1vw,2rem);line-height:1.2}
.carte p{margin:0;max-width:34rem;color:#bcd7de;font-size:clamp(.82rem,1.6vw,1rem)}
.carte .btn{
  margin-top:.5rem;background:var(--cyan);color:#fff;border:0;border-radius:11px;
  padding:.72rem 1.5rem;font:inherit;font-weight:600;cursor:pointer;text-decoration:none;
  box-shadow:0 6px 20px rgba(26,189,208,.35);
}
.carte .btn:hover{background:var(--cyan-d)}
.carte .btn.second{background:transparent;border:1px solid rgba(255,255,255,.4);box-shadow:none}

/* ── La barre du bas ────────────────────────────────────────────────────────────────────── */
.barre{
  position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:.6rem;
  padding:.5rem .75rem;background:linear-gradient(to top,rgba(11,31,40,.82),rgba(11,31,40,0));
}
.jauge{flex:1;display:flex;gap:3px}
.jauge i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.26)}
.jauge i.on{background:var(--cyan)}
.barre button{
  border:0;background:rgba(255,255,255,.14);color:#fff;font:inherit;font-size:.76rem;
  padding:.3rem .66rem;border-radius:8px;cursor:pointer;
}
.barre button:hover{background:rgba(255,255,255,.26)}
.barre .compte{color:#cfe3e9;font-size:.74rem;white-space:nowrap}

/* ⚠️ Un utilisateur qui a demandé moins d'animation ne doit pas subir un point qui pulse
   en boucle dans une page vitrine. Le point reste visible, il cesse seulement de battre. */
@media (prefers-reduced-motion: reduce){
  .point::after{animation:none;transform:scale(1);opacity:.5}
}
@media (max-width:560px){
  .bulle{max-width:62%;font-size:.8rem}
  .legende{left:3%;right:3%;bottom:3.9rem;font-size:.8rem}
  .legende.haut{left:3%;right:3%;top:.7rem;bottom:auto}
  .point{width:2rem;height:2rem}
}