/* ══════════════════════════════════════════════════════════════════════════════════════════
   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.
   ⓘ Refonte du 2026-09-26 : Instrument Sans, fond « nuit » plat (plus de dégradé), boutons au
   cyan foncé (texte blanc à 5,06:1). Le cyan VIF ne reste que sur les points chauds et la jauge,
   qui signalent sans porter de texte.
   ══════════════════════════════════════════════════════════════════════════════════════════ */
:root{
  --cyan:#0b7a88; --cyan-d:#09656f; --vif:#1abdd0;
  --petrol:#1b2124; --ink:#1b2124; --muted:#56626a; --line:#d3d7d4; --card:#fff;
  --r:8px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--petrol);color:var(--ink);
  font-family:"Instrument Sans",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);
  /* 🔴 LA LARGEUR EST BORNÉE PAR LA HAUTEUR, pas seulement la hauteur par `max-height`.
     Avec `width:100%` seul, une fenêtre PLUS LARGE que 16/9 (Edge de Philippe : 1870 × 915)
     écrasait le cadre en hauteur : il n'avait plus le ratio de l'image, `object-fit:cover`
     la rognait en haut et en bas, et chaque point chaud tombait UNE RANGÉE TROP HAUT (« on
     pointe sur Texte défilant », 25/09). Dans l'iframe de la vitrine le cadre est plus haut
     que 16/9 : le défaut ne s'y voyait pas. `--ratio-n` est posé par le lecteur. */
  width:min(100%, calc(100vh * var(--ratio-n, 1.7778)));
  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(27,33,36,.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:var(--petrol);color:#fff;
}
.carte h2{margin:0;font-size:clamp(1.3rem,3.4vw,2.2rem);line-height:1.1;font-weight:700;font-stretch:85%;letter-spacing:-.4px;text-wrap:balance}
.carte p{margin:0;max-width:34rem;color:#c3cccf;font-size:clamp(.82rem,1.6vw,1rem)}
.carte .btn{
  margin-top:.5rem;background:var(--cyan);color:#fff;border:0;border-radius:6px;
  padding:.72rem 1.5rem;font:inherit;font-weight:600;cursor:pointer;text-decoration:none;
}
.carte .btn:hover{background:var(--cyan-d)}
.carte .btn.second{background:transparent;border:1px solid rgba(255,255,255,.4);box-shadow:none}

/* ⚠️ DANS UN CADRE BAS (moins de 360 px : la demo posee en 16:9 dans la page, sur telephone, ne
   fait que ~190 px de haut), titre, paragraphe et bouton ne tiennent pas ensemble : le titre sortait
   par le haut et le bouton passait SOUS la barre du bas (capture de Philippe, 2026-09-26). On garde
   le titre et le bouton ; le paragraphe s'efface, il redit ce que la section de la page affiche
   juste au-dessus. Le bas de la carte laisse la place a la barre. */
@media (max-height:360px){
  .carte{justify-content:center;gap:.35rem;padding:.6rem 7% 2.9rem}
  .carte h2{font-size:clamp(.95rem,4.8vw,1.3rem)}
  .carte p{display:none}
  .carte .btn{margin-top:.25rem;padding:.5rem 1.15rem;font-size:.9rem}
  /* Meme cadre bas, pendant les etapes : une bulle de taille normale sortait par le haut (« Treize
     prix reperes… » coupe a l'etape 7) et le compteur chevauchait la jauge. Bulle et point plus
     petits ; la jauge s'efface, le compteur « 7 / 23 » suffit a situer l'etape. */
  .bulle{font-size:.68rem;line-height:1.35;padding:.42rem .55rem;max-width:min(13rem,50%);border-radius:6px}
  .bulle b{font-size:.72rem}
  .bulle.d{transform:translate(1.4rem,-50%)}
  .bulle.g{transform:translate(calc(-100% - 1.4rem),-50%)}
  .bulle.b{transform:translate(-50%,1.4rem)}
  .bulle.h{transform:translate(-50%,calc(-100% - 1.4rem))}
  .point{width:1.6rem;height:1.6rem}
  .legende{font-size:.68rem;padding:.42rem .55rem;bottom:2.6rem}
  /* `.barre .jauge` et non `.jauge` : les regles de la barre viennent PLUS BAS dans ce fichier et
     l'emportaient a specificite egale (la jauge restait affichee, vu a l'image). */
  .barre .jauge{display:none}
  .demo .barre{justify-content:flex-end}
}

/* ── 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(27,33,36,.85),rgba(27,33,36,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(--vif)}
.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:#d5dcde;font-size:.74rem;white-space:nowrap}
/* Une étape SANS point chaud n'a rien à cliquer dans l'image : le seul geste possible est
   « Suivant », trop discret dans la barre (Philippe, 25/09). Il s'allume et bat doucement. */
.barre button.appel{background:var(--cyan);font-weight:600;animation:appel 1.6s ease-in-out infinite}
.barre button.appel:hover{background:var(--cyan-d)}
@keyframes appel{0%,100%{box-shadow:0 0 0 0 rgba(26,189,208,.75)}50%{box-shadow:0 0 0 .5rem rgba(26,189,208,0)}}

/* ⚠️ 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}
  .barre button.appel{animation:none}
}
@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}
}