/* ═══════════════════════════════════════════════════════════════════
   LE PARCOURS — quatre scènes, une seule mécanique de caméra
   ═══════════════════════════════════════════════════════════════════
   PAR DÉFAUT, UNE MISE EN PAGE NORMALE — LA PISTE DE 2400vh EST UN
   AJOUT, PAS LA BASE. La même erreur avait déjà coûté cher sur
   `.feat-piste` (voir son commentaire dans index.html) : poser
   `height:600vh`, `position:sticky` et `overflow:hidden` EN DUR alors
   que le contenu est caché en `opacity:0` et n'est levé QUE par
   parcours.js. Sans JavaScript, ou animations réduites — parcours.js
   sort dans les deux cas, comme fx.js — le visiteur tombe sur le
   tableau de bord posé par-dessus le téléphone, sans un mot de texte,
   sur ~2400vh de vide. Mesuré : 19 200px de rien sur les quatre scènes.

   Le correctif est le même que pour `.feat-piste` : par défaut, chaque
   scène est un bloc normal, téléphone et tableau empilés, tout le
   contenu visible. `.parc-actif`, que parcours.js pose SEULEMENT sur
   les pistes qu'il prend vraiment en charge, transforme le bloc en
   piste pilotée par le défilement. Les deux états ne se disputent
   jamais une propriété : tout ce qui est spécifique à la mise en
   scène (position, opacity de départ, transform) vit sous
   `.parc-actif`, jamais à la racine. */
.parc-piste{ padding:28px 0; max-width:900px; margin:0 auto }
.parc-piste.parc-actif{ height:600vh; position:relative; padding:0; max-width:none }

.parc-chapitre{ display:none }

/* LE SÉLECTEUR DE SECTEUR — même sécurité que le bouton lecture juste en
   dessous : caché tant que parcours.js n'a pas confirmé pouvoir vraiment
   l'appliquer (`.actif`, posée en JS une fois les quatre chapitres armés). */
.parc-secteurs{display:none;flex-wrap:wrap;justify-content:center;gap:8px;padding:0 16px 18px;max-width:720px;margin:0 auto}
.parc-secteurs.actif{display:flex}
.parc-secteur-btn{display:inline-flex;align-items:center;gap:7px;background:var(--surface,#0d1220);
  border:1px solid var(--border);color:var(--muted);font-size:13px;font-weight:600;
  padding:8px 15px;border-radius:99px;cursor:pointer;transition:all .2s;font-family:inherit}
.parc-secteur-btn span{font-size:14px}
.parc-secteur-btn:hover{border-color:rgba(217,169,76,.3);color:#fff}
.parc-secteur-btn.active{background:rgba(217,169,76,.12);border-color:rgba(217,169,76,.4);color:var(--gold)}

/* DEUX SÉCURITÉS, PAS UNE. La zone ET le bouton sont CACHÉS PAR DÉFAUT.
   C'est l'inverse du reste de ce fichier : ici, le défaut sûr est
   invisible, pas visible. Un bouton qu'on voit mais qui ne fait rien au
   clic (sans JS, ou animations réduites — parcours.js sort avant de le
   révéler dans les deux cas) est pire qu'un bouton absent. La zone se
   cache EN PLUS du bouton pour que son padding ne laisse pas un blanc
   vide quand il n'y a rien dedans — mais si jamais l'une des deux
   règles saute (un futur correctif qui oublierait l'autre), la seconde
   tient encore. parcours.js révèle les deux ensemble une fois certain
   de pouvoir vraiment piloter le défilement. */
.parc-play-zone{display:none;text-align:center;padding:4px 16px 32px}
.parc-play-zone.actif{display:block}
.parc-play{display:none;align-items:center;gap:10px;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  color:#000;font-weight:800;font-size:16px;border:none;border-radius:14px;padding:16px 32px;
  cursor:pointer;transition:transform .15s,box-shadow .2s;
  box-shadow:0 10px 30px rgba(217,169,76,.28),0 0 0 0 rgba(217,169,76,.35);
  animation:parcPlayRespire 2.6s ease-in-out infinite}
.parc-play.actif{display:inline-flex}
.parc-play:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 14px 38px rgba(217,169,76,.4)}
/* Le souffle s'arrête pendant la lecture — un bouton qui respire ET
   qu'on vient de presser raconte deux choses en même temps. */
.parc-play.en-lecture{animation:none;box-shadow:0 10px 30px rgba(217,169,76,.28)}

/* PENDANT LA LECTURE, LA ZONE SUIT L'ÉCRAN — SANS QUOI ELLE DISPARAÎT.
   `.parc-play-zone` vit normalement dans le flux, juste avant la piste de
   600vh. Dès que la lecture auto commence, cette piste défile SOUS elle :
   mesuré, le bouton « Mettre en pause » et « Passer » quittaient l'écran
   à la première seconde, injoignables pour le reste du chapitre. Fixée
   pendant `.en-lecture` seulement, la zone reste à portée tout le long —
   c'est justement le seul moment où on a besoin d'y toucher à nouveau.
   EN HAUT, PAS EN BAS : la bannière de témoins (`.fsc`, consentement.js)
   est elle-même fixe et couvre grossièrement la moitié basse de l'écran
   sur mobile tant qu'elle n'a pas été fermée — déjà mesuré une fois sur
   ce chantier (le lien « Être avisé en premier » de la carte réceptionniste
   tombait dans cette même zone). Sous le bandeau de navigation (62px),
   jamais dans la zone qu'elle recouvre. */
.parc-play-zone.en-lecture{position:fixed;left:0;right:0;top:74px;z-index:500;margin:0}

/* Repère « Chapitre X / 4 » + bouton « passer » — MÊME SÉCURITÉ que le
   bouton lui-même : masqués tant que parcours.js n'a pas pris la main,
   affichés seulement pendant la lecture automatique (.parc-play-zone
   .en-lecture, posée par demarrerLecture()/arreterLecture()). Un
   visiteur qui défile à la main n'en a pas besoin. */
.parc-play-meta{display:none;align-items:center;justify-content:center;gap:14px;margin-top:14px;font-size:13px}
.parc-play-zone.en-lecture .parc-play-meta{display:flex}
.parc-progress{color:var(--muted);font-weight:600;letter-spacing:.2px}
.parc-skip{background:none;border:1px solid var(--border);color:var(--muted);font-size:12.5px;
  padding:6px 14px;border-radius:8px;cursor:pointer;transition:all .2s;font-family:inherit}
.parc-skip:hover{color:#fff;border-color:rgba(255,255,255,.25)}
/* Le souffle doré — pas un clignotement, une respiration lente, pour
   dire « c'est vivant, clique-moi » sans crier dessus. */
@keyframes parcPlayRespire{
  0%,100%{box-shadow:0 10px 30px rgba(217,169,76,.28),0 0 0 0 rgba(217,169,76,.35)}
  50%{box-shadow:0 10px 30px rgba(217,169,76,.28),0 0 0 14px rgba(217,169,76,0)}
}

.parc-stage{
  display:flex; flex-direction:column; align-items:center; gap:28px;
  padding:32px 16px; border-radius:20px;
  background:
    radial-gradient(900px 600px at 50% 30%, rgba(217,169,76,.05), transparent 60%),
    var(--bg);
}
.parc-actif .parc-stage{
  position:sticky; top:0; height:100svh; overflow:hidden;
  flex-direction:row; padding:0; border-radius:0;
  align-items:center; justify-content:center; perspective:1800px;
}

.parc-cadre{ display:flex; flex-direction:column; align-items:center; gap:28px; width:100% }
.parc-actif .parc-cadre{
  display:block; position:relative; width:100%; height:100%;
  transform-style:preserve-3d; will-change:transform;
}

/* Le pulse doré — un seul accent visuel réutilisé aux instants clés de
   chaque scène (confirmation, clic, réponse) : posé par JS pendant une
   fenêtre de progression étroite, jamais permanent, jamais deux fois de
   suite sans repasser par le seuil. Une lueur, pas un feu d'artifice. */
@keyframes parcPulse{
  0%{box-shadow:0 0 0 0 rgba(217,169,76,.55)}
  70%{box-shadow:0 0 0 24px rgba(217,169,76,0)}
  100%{box-shadow:0 0 0 0 rgba(217,169,76,0)}
}
.parc-actif .parc-pulse{animation:parcPulse .9s ease-out}

/* ── LE TÉLÉPHONE — un vrai appareil (14 sept. 2026) ──
   Cadre à 44px, tranche sombre (l'anneau de 6px en box-shadow), îlot
   dynamique, barre d'état, indicateur d'accueil : le chrome vit dans le
   HTML (demo.html) et s'affiche AUSSI sans script — un appareil sans sa
   barre d'état n'aurait l'air d'un téléphone pour personne. L'écran est
   une colonne : barre d'état, puis `.parc-phone-contenu` (position:relative)
   qui accueille les écrans successifs — le fil SMS en surcouche s'étend sur
   LUI (inset:0), jamais sur la barre d'état ni sur l'îlot. */
.parc-phone{ width:280px; max-width:100% }
.parc-actif .parc-phone{
  position:absolute; left:50%; top:50%; width:280px; margin:0;
  transform:translate(-50%,-50%) translate3d(var(--px,0px),0,var(--pz,0px)) rotateY(var(--pr,0deg)) rotateX(var(--pt,0deg));
  transform-style:preserve-3d;
  filter:blur(var(--pb,0px));
}
.parc-phone-body{
  position:relative; background:#0f1116; border:2px solid #2a2d36; border-radius:44px;
  padding:10px; box-shadow:0 0 0 6px #0c0d12, 0 30px 80px rgba(0,0,0,.6);
}
.parc-phone-ilot{position:absolute;top:16px;left:50%;width:74px;height:22px;margin-left:-37px;background:#000;
  border-radius:99px;z-index:4;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.parc-phone-screen{background:#000;border-radius:34px;overflow:hidden;min-height:460px;position:relative;
  display:flex;flex-direction:column}
.parc-phone-statut{display:flex;justify-content:space-between;align-items:center;padding:12px 22px 6px;
  font-size:10px;font-weight:700;color:#fff;background:#000;letter-spacing:.2px;line-height:1;flex-shrink:0}
.parc-phone-statut .signal{display:inline-flex;align-items:center;gap:6px;font-size:8px;letter-spacing:-.5px}
.batterie{display:inline-block;width:18px;height:9px;border:1px solid rgba(255,255,255,.55);border-radius:3px;
  position:relative;margin-left:1px;vertical-align:middle}
.batterie::before{content:'';position:absolute;left:1px;top:1px;bottom:1px;width:11px;background:#fff;border-radius:1.5px}
.batterie::after{content:'';position:absolute;right:-3px;top:2px;width:1.5px;height:3px;background:rgba(255,255,255,.55);
  border-radius:0 1px 1px 0}
.parc-phone-contenu{position:relative;flex:1;padding-bottom:16px}
.parc-phone-home{position:absolute;left:50%;bottom:6px;width:90px;height:4px;margin-left:-45px;border-radius:99px;
  background:rgba(255,255,255,.3);z-index:5}
.parc-nav{background:var(--bg-deep);padding:8px 12px;font-size:10px;color:var(--muted);border-bottom:1px solid var(--border-soft);text-align:center}
/* Le formulaire de réservation (et celui de la caisse, `[data-a="capte"]`) :
   champs sur --bg-deep, filet --border, bouton métal — les jetons du socle. */
.rb{padding:14px}
.rb-title{font-size:13px;font-weight:800;color:#fff;margin-bottom:12px}
.rb-row{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--muted);
  padding:9px 0;border-bottom:1px solid var(--border-soft)}
.parc-actif .rb-row{opacity:.35;transition:opacity .3s}
.parc-actif .rb-row.on{opacity:1}
.rb-row b{color:#fff;font-size:12px}
.rb input[type="checkbox"]{accent-color:var(--gold)}
.rb-slots{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.parc-actif .rb-slots{opacity:.25;transition:opacity .3s}
.parc-actif .rb-slots.on{opacity:1}
.rb-slot{border:1px solid var(--border);border-radius:8px;padding:6px 10px;font-size:10.5px;color:var(--muted);background:var(--bg-deep)}
.rb-slot.pick{border-color:var(--gold);color:var(--gold);background:var(--gold-soft);font-weight:700}
.rb-confirm{display:block;width:100%;margin-top:16px;background:linear-gradient(155deg,var(--metal-1),var(--metal-2));
  color:#1a1305;font-weight:800;font-size:12px;border:none;border-radius:10px;padding:11px;text-align:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}
.parc-actif .rb-confirm{opacity:.3;transform:scale(.97);transition:all .3s}
.parc-actif .rb-confirm.on{opacity:1;transform:scale(1)}
.parc-actif .rb-confirm.tap{transform:scale(.94);filter:brightness(.85)}
/* Sans JS, le fil SMS suit le formulaire dans le flux normal (pas une
   surcouche) : un second bloc, pas une superposition sur le premier. */
.parc-sms{padding:14px;margin-top:2px;border-top:1px solid var(--border-soft)}
.parc-actif .parc-sms{position:absolute;inset:0;background:#000;padding:8px 12px 12px;margin:0;border-top:none;
  opacity:0;transform:translateY(14px);transition:opacity .35s,transform .35s;pointer-events:none}
.parc-actif .parc-sms.on{opacity:1;transform:none}
/* L'en-tête de messagerie : avatar rond aux initiales (dégradé métal), nom
   dessous — comme Messages. parcours.js écrit dans .sms-avatar / .sms-nom. */
.sms-hdr{display:flex;flex-direction:column;align-items:center;gap:5px;padding:2px 0 10px;
  border-bottom:1px solid var(--border-soft);margin-bottom:12px;font-size:10.5px;font-weight:700;color:#fff}
.sms-avatar{width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(155deg,var(--metal-1),var(--metal-2));color:#1a1305;font-size:11px;font-weight:800;
  letter-spacing:.3px;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 4px 10px -4px rgba(217,169,76,.6)}
.bubble{max-width:82%;padding:8px 11px;border-radius:16px;font-size:11px;line-height:1.5;margin-bottom:5px}
.parc-actif .bubble{opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s}
.parc-actif .bubble.on{opacity:1;transform:none}
/* Reçues : gris ardoise avec le petit angle en bas à gauche. Envoyées : NOTRE
   or métal, texte sombre — pas le bleu iMessage. */
.b-in{background:#26292f;color:#e9ebf1;border-bottom-left-radius:4px}
.b-out{background:linear-gradient(155deg,var(--metal-1),var(--metal-2));color:#1a1305;border-bottom-right-radius:4px;margin-left:auto}
/* L'heure sous la dernière bulle d'un groupe — suit sa bulle dans le DOM,
   et n'apparaît qu'avec elle (`.bubble.on + .b-heure`). */
.b-heure{font-size:9px;color:var(--muted);margin:-1px 0 9px 6px;line-height:1.2}
.b-heure-out{text-align:right;margin-right:6px}
.parc-actif .b-heure{opacity:0;transition:opacity .3s .15s}
.parc-actif .bubble.on+.b-heure{opacity:1}

.parc-actif .parc-chapitre{
  display:block; position:absolute; top:8vh; left:0; right:0; text-align:center; z-index:2;
  font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--gold);
  opacity:0; transition:opacity .4s;
}
.parc-actif .parc-chapitre.on{opacity:1}

/* ── LE TABLEAU DE BORD — LA CAPTURE RÉELLE, ET DES CARTES PAR-DESSUS ──
   (14 sept. 2026) Le faux tableau (barre latérale en émojis, .dd-main
   maquetté) est parti : chaque scène montre la capture du VRAI dashboard
   refondu (`.dd-ecran`, media/vitrine/demo-*.webp, 1600×1000) et, dans la
   surcouche `.dd-sur`, les cartes que parcours.js anime — en verre sombre
   (fond à 78 %, flou 10px, filet --border), posées à des endroits qui ne
   cachent ni la barre latérale (x < 7 %) ni le titre de la page (y 18–29 %,
   x 9–45 %) de la capture. Par défaut — sans script, ou sous 760px — la
   surcouche est un bloc en flux SOUS l'image : les cartes s'y empilent,
   tout reste lisible. Les positions flottantes vivent sous `.parc-actif`
   ET au-dessus de 760px, jamais à la racine (même règle que tout le
   fichier : le repli est la mise en page normale). */
.parc-dash{ width:760px; max-width:100%; margin-top:4px }
.parc-actif .parc-dash{
  position:absolute; left:50%; top:50%; width:760px; max-width:88vw; margin:0;
  transform:translate(-50%,-50%) translate3d(var(--dx,0px),0,var(--dz,0px)) rotateY(var(--dr,0deg)) rotateX(var(--dt,0deg));
  transform-style:preserve-3d;
  filter:blur(var(--db,0px));
}
.parc-dash-frame{position:relative;background:var(--bg-deep);border:1px solid var(--border);border-radius:14px;
  box-shadow:0 50px 120px rgba(0,0,0,.6);overflow:hidden}
/* Le reflet or en haut du cadre — le même hairline que .hv-ecran de l'accueil. */
.dd-reel::before{content:'';position:absolute;top:0;left:10%;right:10%;height:1px;z-index:3;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(217,169,76,.55),transparent)}
.dd-ecran{display:block;width:100%;height:auto}
/* « Exemple fictif » — discret, en haut à droite, comme .hv-fictif (vérité 8). */
.dd-fictif{position:absolute;top:7px;right:12px;z-index:3;font-size:10px;font-weight:600;letter-spacing:.6px;
  text-transform:uppercase;color:var(--muted);background:rgba(5,8,16,.7);border:1px solid var(--border);
  border-radius:99px;padding:3px 9px;line-height:1.4;pointer-events:none}
.dd-sur{padding:12px 14px 14px}
.dd-sur>*{margin-bottom:10px}
.dd-sur>*:last-child{margin-bottom:0}
.dd-col{display:flex;flex-direction:column;gap:10px}
/* LA CARTE EN VERRE — une seule recette pour tout ce qui flotte sur la capture. */
.dd-kpi,.dd-item,.dd-table-card,.dd-review,.ai-box,.dd-msg,.pr-consent,.pr-compose{
  background:rgba(10,11,15,.78);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid var(--border);border-radius:12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 1px 2px rgba(0,0,0,.5),0 18px 40px -14px rgba(0,0,0,.75)}
/* Les icônes fines des tuiles (vitrine.js remplit [data-icone]) — jamais un émoji. */
.dd-kpi-ico,.dd-table-plan,.pr-consent-ico,.av-scan-ico{display:inline-flex;align-items:center;justify-content:center;
  flex-shrink:0;color:var(--gold);background:var(--gold-soft);border:1px solid color-mix(in srgb, var(--gold) 30%, transparent)}
.dd-kpi-ico svg,.dd-table-plan svg,.pr-consent-ico svg,.av-scan-ico svg{stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
/* Sans JavaScript, vitrine.js ne remplit rien : une case vide serait pire qu'aucune case. */
.dd-kpi-ico:empty,.dd-table-plan:empty,.pr-consent-ico:empty,.av-scan-ico:empty{display:none}
.dd-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.dd-kpi{padding:10px 11px 11px}
.dd-kpi-top{display:flex;justify-content:space-between;align-items:flex-start;gap:6px;margin-bottom:7px}
.dd-kpi-lbl{font-size:8px;font-weight:800;color:var(--text-dim);letter-spacing:.5px;text-transform:uppercase;line-height:1.3}
.dd-kpi-ico{width:22px;height:22px;border-radius:7px}
.dd-kpi-ico svg{width:12px;height:12px}
.dd-kpi-val{font-family:var(--serif);font-weight:600;font-size:21px;color:#fff;letter-spacing:-.6px;line-height:1.1;
  font-variant-numeric:tabular-nums}
.dd-kpi.on{animation:ddPop .4s both}
@keyframes ddPop{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:none}}
.dd-item{padding:12px 14px;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-shrink:0}
.parc-actif .dd-item{opacity:0;transform:translateX(-14px);transition:opacity .4s,transform .4s}
.parc-actif .dd-item.on{opacity:1;transform:none}
.dd-item .who{font-size:12.5px;font-weight:700;color:#fff}
.dd-item .meta{font-size:10.5px;color:var(--muted);margin-top:2px}
/* `.dd-badge`, PAS `.badge` — index.html définit déjà un `.badge` global
   (rouge, 12px, padding 7px 18px, margin-bottom 30px, majuscules) pour le
   badge du hero. Les deux noms identiques se disputaient la carte : la
   taille et la marge du hero gagnaient sur ces étiquettes, les poussant
   30px au-dessus de leur ligne — vérifié à l'écran, pas supposé. */
.dd-badge{font-size:10px;font-weight:700;padding:4px 9px;border-radius:99px;flex-shrink:0;
  background:rgba(39,194,129,.12);color:var(--green);border:1px solid rgba(39,194,129,.3);
  margin:0;text-transform:none;letter-spacing:normal;animation:none;display:inline-flex;align-items:center}
.parc-actif .dd-table{opacity:0;transform:translateY(10px);transition:opacity .4s,transform .4s}
.parc-actif .dd-table.on{opacity:1;transform:none}
.dd-table-card{border-color:color-mix(in srgb, var(--gold) 30%, transparent);padding:12px 14px;
  display:flex;gap:12px;align-items:center}
.dd-table-plan{width:44px;height:44px;border-radius:10px}
.dd-table-plan svg{width:22px;height:22px}
.dd-table-txt b{color:#fff;font-size:12.5px}
.dd-table-txt div{font-size:10.5px;color:var(--muted);margin-top:3px}

/* ── LES POSITIONS FLOTTANTES — bureau, scène prise en main seulement ──
   En % du cadre (ratio 1,6 : 760×475px à pleine largeur). La bande de KPI
   en haut à droite (sous la barre d'en-tête de la capture, à droite du
   titre) ; les cartes de récit en bas, là où la capture montre une liste
   ou un panneau vide. Chaque scène a ses places, par `data-parc`. */
@media (min-width:761px){
  .parc-actif .dd-sur{position:absolute;inset:0;padding:0;pointer-events:none}
  .parc-actif .dd-sur>*{position:absolute;margin:0}
  .parc-actif .dd-kpis{top:12%;right:3%;width:54%}
  .parc-actif[data-parc="resa"] .dd-item{left:9%;bottom:6%;width:44%}
  .parc-actif[data-parc="resa"] .dd-table{right:3%;bottom:6%;width:41%}
  .parc-actif[data-parc="avis"] .dd-col{left:9%;bottom:6%;width:44%}
  .parc-actif[data-parc="avis"] .ai-box{right:3%;bottom:6%;width:44%}
  .parc-actif[data-parc="promo"] .dd-col{left:9%;top:31%;width:52%}
  .parc-actif[data-parc="question"] .dd-msg{right:3%;bottom:8%;width:52%}
}
/* Scène promo : la bande de KPI n'a rien à dire avant le retour sur le
   tableau (« Envoyés 0 » pendant qu'on tape le message contredisait le
   récit) — parcours.js pose .on à 0,80, juste avant le toast et le compte. */
.parc-actif[data-parc="promo"] .dd-kpis{opacity:0;transform:translateY(-8px);
  transition:opacity .4s,transform .5s cubic-bezier(.34,1.56,.64,1)}
.parc-actif[data-parc="promo"] .dd-kpis.on{opacity:1;transform:none}

/* ── SOUS 760px, LE TABLEAU DE BORD SE REPLIE — comme le vrai produit :
   la barre latérale de dashboard.html se cache sous ce seuil et sa grille
   de KPI passe à deux colonnes. Ici la capture est recadrée sur sa moitié
   haute (en-tête, titre, premières tuiles : à 340px, le reste serait
   illisible de toute façon) et les cartes passent EN FLUX sous l'image —
   flottantes sur 340px, elles se chevauchaient. Mesuré. */
@media (max-width:760px){
  /* Le centre descend de 36px : la zone « Mettre en pause » est FIXÉE en
     haut pendant la lecture (74px + ~120px) et couvrait le haut de la capture.
     Mesuré à 400×860 : scène avis, tableau de 94 à 766px avant → dégagé après. */
  .parc-actif .parc-dash{ width:340px; max-width:92vw; top:calc(50% + 36px) }
  .parc-actif .dd-ecran{ aspect-ratio:5/2; object-fit:cover; object-position:left top }
  .dd-kpis{ grid-template-columns:repeat(2,1fr); gap:6px }
  .dd-sur{ padding:8px }
  .dd-sur>*{ margin-bottom:8px }
  .dd-col{ gap:8px }
  .dd-kpi{ padding:7px 9px 8px }
  .dd-kpi-top{ margin-bottom:4px }
  .dd-kpi-lbl{ font-size:7.5px }
  .dd-kpi-ico{ width:18px; height:18px; border-radius:6px }
  .dd-kpi-ico svg{ width:10px; height:10px }
  .dd-kpi-val{ font-size:18px }
  .dd-review,.ai-box,.dd-msg,.dd-item{ padding:9px 11px }
  .dd-table-card{ padding:9px 11px }
  .dd-table-plan{ width:36px; height:36px }
  .dd-review .txt,.ai-box-txt{ font-size:10.5px }
}

/* ── SCÉNARIO AVIS GOOGLE — étoiles, réponse rédigée par l'IA ── */
.av-scan{background:var(--bg-deep);border:1px dashed var(--border);border-radius:14px;padding:22px;text-align:center;
  margin:16px 14px}
.parc-actif .av-scan{opacity:.25;transition:opacity .35s}
.parc-actif .av-scan.on{opacity:1}
.av-scan-ico{width:56px;height:56px;border-radius:16px;margin:0 auto 10px}
.av-scan-ico svg{width:30px;height:30px}
.av-scan-txt{font-size:11px;color:var(--muted)}
/* `[data-a="capte"]` — l'écran de consentement, entre le scan et le
   texto. parcours.js pose son opacité EN LIGNE (`.style.opacity`), pas
   par classe : sans lui (pas de JS, animations réduites), l'inline ne
   se pose jamais et cette règle — pas une valeur figée dans le HTML —
   est ce qui garde le bloc visible par défaut. */
[data-a="capte"]{margin-top:14px}
.parc-actif [data-a="capte"]{opacity:0;transition:opacity .4s}
/* L'étoile de note : le glyphe ★ en or, pas un émoji. */
.av-stars{color:var(--gold);font-size:14px;letter-spacing:1.5px;margin:0}
.ai-box{border-color:color-mix(in srgb, var(--purple) 35%, var(--border));padding:11px 13px}
.parc-actif .ai-box{opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s}
.parc-actif .ai-box.on{opacity:1;transform:none}
.ai-box-lbl{font-size:9px;font-weight:800;color:var(--purple);letter-spacing:.8px;text-transform:uppercase;
  margin-bottom:5px}
.ai-box-txt{font-size:10.5px;color:var(--text);line-height:1.5}
.dd-review{padding:12px 14px}
.parc-actif .dd-review{opacity:0;transform:translateX(-14px);transition:opacity .4s,transform .4s}
.parc-actif .dd-review.on{opacity:1;transform:none}
.dd-review .who{font-size:12px;font-weight:700;color:#fff;display:flex;justify-content:space-between}
.dd-review .txt{font-size:11px;color:var(--muted);margin-top:5px;line-height:1.5}

/* ── SCÉNARIO SMS PROMOTIONNEL ──
   `[data-p="txt"]` porte un texte de repli en dur dans le HTML (le
   message complet) : parcours.js le VIDE avant de le retaper au fil du
   défilement. Sans JS, ce vidage n'a jamais lieu et le message complet
   reste affiché — c'est le même principe que les bulles ci-dessous. */
.pr-compose{padding:14px 16px}
.pr-compose-lbl{font-size:9px;font-weight:800;color:var(--muted);letter-spacing:.8px;text-transform:uppercase;margin-bottom:8px}
.pr-compose-txt{font-size:12px;color:var(--text);line-height:1.5;min-height:40px;border-bottom:1px solid var(--border);padding-bottom:10px;margin-bottom:10px}
.pr-compose-txt .curseur{display:none;width:2px;height:13px;background:var(--gold);vertical-align:middle;margin-left:1px;animation:clignote 1s step-end infinite}
.parc-actif .pr-compose-txt .curseur{display:inline-block}
@keyframes clignote{50%{opacity:0}}
.pr-compose-foot{display:flex;justify-content:space-between;align-items:center;font-size:10.5px;color:var(--muted)}
.pr-send-btn{background:linear-gradient(155deg,var(--metal-1),var(--metal-2));color:#1a1305;font-weight:800;font-size:11px;
  border:none;border-radius:8px;padding:8px 16px;transition:opacity .3s,transform .15s;box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}
.pr-consent{font-size:10px;color:var(--text-dim);display:flex;align-items:center;gap:7px;padding:9px 12px;line-height:1.4}
.pr-consent b{color:#fff;white-space:nowrap}
.pr-consent-ico{width:20px;height:20px;border-radius:6px;color:var(--green);background:color-mix(in srgb, var(--green) 12%, transparent);
  border-color:color-mix(in srgb, var(--green) 30%, transparent)}
.pr-consent-ico svg{width:11px;height:11px;stroke-width:2}

/* ── SCÉNARIO QUESTION EN LIGNE ── */
.qc-widget{background:var(--bg-deep);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin:10px 12px 0}
.parc-actif .qc-widget{position:absolute;bottom:8px;right:12px;left:12px;margin:0;
  opacity:0;transform:translateY(10px);transition:opacity .35s,transform .35s}
.parc-actif .qc-widget.on{opacity:1;transform:none}
.qc-hdr{background:linear-gradient(155deg,var(--metal-1),var(--metal-2));color:#1a1305;padding:10px 12px;
  font-size:11px;font-weight:800;display:flex;align-items:center;gap:6px}
.qc-msgs{padding:10px;min-height:120px;display:flex;flex-direction:column}
/* Les points de saisie n'ont de sens QUE pendant l'animation : sans JS,
   il n'y a pas de « en train d'écrire » qui tienne, donc pas de points. */
.qc-dots{display:none;gap:3px;padding:8px 11px;background:#26292f;border-radius:14px;
  align-self:flex-start;opacity:0;transition:opacity .3s}
.parc-actif .qc-dots{display:inline-flex}
.parc-actif .qc-dots.on{opacity:1}
.qc-dots i{width:5px;height:5px;border-radius:50%;background:var(--muted);animation:qcDot 1s infinite}
.qc-dots i:nth-child(2){animation-delay:.15s}
.qc-dots i:nth-child(3){animation-delay:.3s}
@keyframes qcDot{0%,100%{opacity:.3}50%{opacity:1}}
.dd-msg{padding:12px 14px}
.parc-actif .dd-msg{opacity:0;transform:translateX(-14px);transition:opacity .4s,transform .4s}
.parc-actif .dd-msg.on{opacity:1;transform:none}
.dd-msg .who{font-size:12px;font-weight:700;color:#fff;display:flex;justify-content:space-between;align-items:center}
.dd-msg .q{font-size:11px;color:var(--muted);margin-top:6px}
.dd-msg .r{font-size:11px;color:var(--text);margin-top:6px;padding-top:6px;border-top:1px solid var(--border)}

/* ═══════════════════════════════════════════════════════════════════
   LA MISE EN SCÈNE IMMERSIVE — tout vit sous `.parc-actif`, JAMAIS à la
   racine : le repli sans JavaScript / animations réduites (parcours.js
   sort avant de poser la classe) reste la mise en page empilée sobre du
   haut de ce fichier, sans un décor qui bouge tout seul.
   Trois familles d'ajouts, aucune ne déplace un seuil de lecture :
   · LE DÉCOR — plancher en perspective, halos, poussière lumineuse,
     flottement lent des appareils, décor qui suit la souris (JS pose
     --tx/--ty sur .parc-cadre, pointeur fin seulement).
   · LES APPAREILS — reflet d'écran, boutons latéraux, ombre au sol du
     téléphone (sa barre d'état, elle, vit dans le HTML depuis le 14 sept.
     2026) ; lueur sur le tableau de bord.
   · LES BATTEMENTS — bulles à ressort, « en train d'écrire » dans les
     fils SMS, toasts sur le tableau de bord, rail de chapitres fixe.
   Performance : transform + opacity seulement dans les animations en
   continu — rien qui repeigne la page à chaque image. ═══════════════ */

/* ── LE DÉCOR ── */
.parc-actif .parc-stage{
  background:
    radial-gradient(1100px 700px at 50% 16%, rgba(217,169,76,.07), transparent 55%),
    radial-gradient(900px 620px at 14% 86%, rgba(59,130,246,.06), transparent 60%),
    radial-gradient(1000px 650px at 88% 78%, rgba(139,92,246,.05), transparent 60%),
    var(--bg);
}
/* Le plancher : une grille couchée en perspective, fondue vers le haut —
   donne un « sol » aux appareils sans un seul élément de plus dans le DOM. */
.parc-actif .parc-stage::before{
  content:''; position:absolute; left:-20%; right:-20%; bottom:-10%; height:56%;
  background:
    linear-gradient(to top, rgba(217,169,76,.05), transparent 70%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 90px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 70px);
  transform:perspective(700px) rotateX(62deg); transform-origin:50% 100%;
  -webkit-mask-image:linear-gradient(to top, #000 25%, transparent);
  mask-image:linear-gradient(to top, #000 25%, transparent);
  pointer-events:none;
}
/* La poussière lumineuse : des points en dégradés radiaux répétés, la
   COUCHE entière translatée en boucle (transform, pas background-position
   — celui-là repeint à chaque image). Tailles 260 et 390 = boucle
   parfaite sur 780px, leur plus petit multiple commun. */
.parc-actif .parc-stage::after{
  content:''; position:absolute; left:0; right:0; top:-780px; bottom:0;
  background:
    radial-gradient(2px 2px at 12% 30%, rgba(217,169,76,.55), transparent 60%),
    radial-gradient(1.5px 1.5px at 68% 64%, rgba(255,255,255,.4), transparent 60%),
    radial-gradient(2px 2px at 42% 82%, rgba(59,130,246,.45), transparent 60%);
  background-size:390px 390px, 260px 260px, 390px 390px;
  animation:parcPoussiere 26s linear infinite;
  opacity:.5; pointer-events:none;
}
@keyframes parcPoussiere{ from{transform:translateY(0)} to{transform:translateY(780px)} }
/* Le décor suit la souris — --tx/--ty posées par parcours.js sur
   mousemove (pointeur fin seulement), remises à 0 à la sortie. */
.parc-actif .parc-cadre{
  transform:rotateX(var(--ty,0deg)) rotateY(var(--tx,0deg));
  transition:transform .5s ease-out;
}
/* Le flottement lent — sur les CORPS (phone-body/dash-frame), jamais sur
   .parc-phone/.parc-dash : ceux-là portent le transform de la caméra. */
@keyframes parcFlotte{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }
.parc-actif .parc-phone-body{ animation:parcFlotte 6s ease-in-out infinite }
.parc-actif .parc-dash-frame{ animation:parcFlotte 7.5s ease-in-out 1.2s infinite }

/* ── LE TÉLÉPHONE ── */
.parc-actif .parc-phone-body{
  box-shadow:0 0 0 6px #0c0d12, 0 30px 80px rgba(0,0,0,.65), 0 0 50px rgba(217,169,76,.08),
    inset 0 1px 0 rgba(255,255,255,.08);
}
/* Reflet d'écran en diagonale + boutons latéraux (volume à gauche,
   allumage à droite — le second est l'ombre portée décalée du premier),
   posés CONTRE la tranche de 6px (l'anneau en box-shadow du corps). */
.parc-actif .parc-phone-body::after{
  content:''; position:absolute; inset:0; border-radius:42px; pointer-events:none;
  background:linear-gradient(115deg, transparent 32%, rgba(255,255,255,.045) 45%,
    rgba(255,255,255,.09) 50%, rgba(255,255,255,.045) 55%, transparent 68%);
}
.parc-actif .parc-phone-body::before{
  content:''; position:absolute; left:-11px; top:108px; width:3px; height:26px;
  border-radius:2px; background:#2a2e3a;
  box-shadow:0 36px 0 #2a2e3a, 295px 14px 0 #2a2e3a;
}
/* L'ombre au sol — reculée en Z pour rester « sous » l'appareil quand la
   caméra le fait pivoter. */
.parc-actif .parc-phone::after{
  content:''; position:absolute; left:6%; right:6%; bottom:-36px; height:26px;
  border-radius:50%; background:radial-gradient(closest-side, rgba(0,0,0,.5), transparent);
  filter:blur(6px); transform:translateZ(-40px); pointer-events:none;
}
/* La barre d'état vit dans le HTML depuis le 14 sept. 2026
   (`.parc-phone-statut`, voir le bloc téléphone plus haut) ; parcours.js n'y
   écrit plus que l'heure du récit de chaque chapitre. */

/* ── LE TABLEAU DE BORD ── */
.parc-actif .parc-dash-frame{
  border-color:var(--border);
  box-shadow:0 50px 120px rgba(0,0,0,.65), 0 0 70px rgba(217,169,76,.06),
    inset 0 1px 0 rgba(255,255,255,.05);
}
.parc-actif .parc-dash::after{
  content:''; position:absolute; left:10%; right:10%; bottom:-42px; height:30px;
  border-radius:50%; background:radial-gradient(closest-side, rgba(0,0,0,.5), transparent);
  filter:blur(8px); transform:translateZ(-40px); pointer-events:none;
}
/* Les cartes KPI arrivent avec un léger rebond et un éclair doré qui
   s'éteint — le chiffre qui compte devient un événement, pas un fondu. */
@keyframes ddPop{
  0%{opacity:0; transform:translateY(10px) scale(.95)}
  60%{opacity:1; transform:translateY(-2px) scale(1.015)}
  100%{opacity:1; transform:none}
}
.parc-actif .dd-kpi{ position:relative }
.parc-actif .dd-kpi.on::after{
  content:''; position:absolute; inset:0; border-radius:12px; pointer-events:none;
  animation:ddFlash 1s ease-out both;
}
@keyframes ddFlash{
  0%{box-shadow:inset 0 0 0 1px rgba(217,169,76,.55), 0 0 18px rgba(217,169,76,.22)}
  100%{box-shadow:inset 0 0 0 1px rgba(217,169,76,0), 0 0 0 rgba(217,169,76,0)}
}
/* Les entrées du tableau glissent avec un ressort, plus une simple translation. */
.parc-actif .dd-item, .parc-actif .dd-review, .parc-actif .dd-msg{
  transform:translateX(-18px) scale(.98);
  transition:opacity .4s, transform .55s cubic-bezier(.34,1.56,.64,1);
}
.parc-actif .dd-item.on, .parc-actif .dd-review.on, .parc-actif .dd-msg.on{ transform:none }

/* ── LES BATTEMENTS ── */
/* Les bulles SMS arrivent à ressort — le même easing que le tiroir du
   menu, la signature du site. */
.parc-actif .bubble{
  transform:translateY(10px) scale(.92);
  transition:opacity .3s, transform .5s cubic-bezier(.34,1.56,.64,1);
}
.parc-actif .bubble.on{ transform:none }
/* « En train d'écrire » dans les fils SMS — même dessin que .qc-dots du
   widget, mais en display:none tant qu'il ne parle pas : contrairement au
   widget (min-height prévu pour), une bulle fantôme qui garderait sa
   place trouerait le fil. Injecté par parcours.js, absent du repli. */
.sms-typing{ display:none; gap:3px; padding:8px 11px; background:#26292f;
  border-radius:16px; border-bottom-left-radius:4px; width:max-content; margin-bottom:5px }
.parc-actif .sms-typing.on{ display:inline-flex; animation:parcFade .25s both }
.sms-typing i{ width:5px; height:5px; border-radius:50%; background:var(--muted); animation:qcDot 1s infinite }
.sms-typing i:nth-child(2){ animation-delay:.15s }
.sms-typing i:nth-child(3){ animation-delay:.3s }
@keyframes parcFade{ from{opacity:0} to{opacity:1} }
/* Le toast — la notification qui tombe en haut du tableau de bord à
   l'instant clé de chaque chapitre. Injecté par parcours.js. EN HAUT AU
   CENTRE depuis que le cadre est la capture réelle : à droite, il se
   posait sur l'étiquette « Exemple fictif » et sur la bande de KPI ; au
   centre il ne couvre que le fil d'Ariane de la capture, une seconde. */
.parc-toast{ display:none }
.parc-actif .parc-toast{
  display:flex; position:absolute; top:10px; left:50%; z-index:4; max-width:70%;
  align-items:center; gap:8px; background:rgba(10,11,15,.92);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid rgba(217,169,76,.35); border-radius:12px; padding:9px 14px;
  font-size:11.5px; font-weight:700; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  box-shadow:0 12px 30px rgba(0,0,0,.5), 0 0 24px rgba(217,169,76,.12);
  opacity:0; transform:translate(-50%,-10px) scale(.94);
  transition:opacity .35s, transform .45s cubic-bezier(.34,1.56,.64,1);
  pointer-events:none;
}
.parc-actif .parc-toast.on{ opacity:1; transform:translate(-50%,0) }

/* ── LA LÉGENDE DE CHAPITRE — un carton de cinéma, plus une étiquette ── */
.parc-actif .parc-chapitre{
  top:6vh; font-size:13px; letter-spacing:2.5px; color:#fff;
  text-shadow:0 0 24px rgba(217,169,76,.35);
  transform:translateY(-8px); transition:opacity .45s, transform .45s;
}
.parc-actif .parc-chapitre.on{ transform:none }
.parc-actif .parc-chapitre::before{
  content:attr(data-num) ' / 4'; display:inline-block; color:var(--gold);
  border:1px solid rgba(217,169,76,.4); border-radius:99px; padding:3px 10px;
  margin-right:12px; font-size:10px; vertical-align:1px;
  background:rgba(217,169,76,.08); letter-spacing:1px;
}
.parc-actif .parc-chapitre::after{
  content:''; display:block; width:54px; height:2px; margin:10px auto 0;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  transform:scaleX(0); transition:transform .5s .15s;
}
.parc-actif .parc-chapitre.on::after{ transform:scaleX(1) }

/* ── LE RAIL DE CHAPITRES — quatre points fixes à droite, cliquables.
   Construit par parcours.js (absent du repli), visible seulement pendant
   qu'on est DANS le parcours, masqué sur mobile (l'écran est trop étroit
   pour un meuble de plus, et le pouce fait déjà le travail). ── */
.parc-rail{
  position:fixed; right:18px; top:50%; transform:translateY(-50%); z-index:400;
  display:flex; flex-direction:column; gap:14px;
  opacity:0; pointer-events:none; transition:opacity .35s;
}
.parc-rail.visible{ opacity:1; pointer-events:auto }
.parc-rail-pt{
  display:flex; align-items:center; gap:9px; flex-direction:row-reverse;
  background:none; border:0; padding:0; cursor:pointer; font-family:inherit;
}
.parc-rail-dot{
  width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.22);
  transition:all .3s; flex-shrink:0;
}
.parc-rail-pt.actif .parc-rail-dot{ background:var(--gold); box-shadow:0 0 12px rgba(217,169,76,.6) }
.parc-rail-pt:hover .parc-rail-dot{ background:rgba(255,255,255,.5) }
.parc-rail-lbl{
  font-size:10.5px; font-weight:700; color:var(--muted); letter-spacing:.4px;
  opacity:0; transform:translateX(4px); transition:all .3s; white-space:nowrap;
  background:rgba(9,13,26,.85); border:1px solid rgba(255,255,255,.1);
  border-radius:7px; padding:3px 8px;
}
.parc-rail-pt.actif .parc-rail-lbl, .parc-rail-pt:hover .parc-rail-lbl{
  opacity:1; transform:none; color:#fff;
}
@media (max-width:760px){ .parc-rail{ display:none } }