/* ═══════════════════════════════════════════════════════════════════════
 * Note+ — mini-démo cliquable (accueil, sous « Comment ça marche »)
 * Le visiteur rejoue lui-même le geste que la scène automatique du héro
 * montre en boucle : une remarque sur la page 4, le panneau IA qui réagit,
 * la page validée. Quatre états, portés par data-step="1..4" sur .np-demo ;
 * la logique est dans noteplus-demo.js, qui ne fait que changer cet
 * attribut et recopier le texte saisi.
 *
 * Même capture et mêmes repères (en % de l'image) que la scène du héro
 * (.np-scene--bat dans noteplus.css) : si la capture change, les deux se
 * reprennent ensemble. Les apparences des repères (halo, étiquette,
 * pastille, tampon) sont celles des rôles du moteur noteplus-motion.css,
 * posées par leurs classes np-scene-* ; ce fichier n'ajoute que la
 * position, l'état et les transitions.
 *
 * Sans JS (pas de .np-js sur <html>) : la capture reste nue et lisible,
 * aucune couche n'est affichée. Décision Khalil 21/10/2026 : option B,
 * section à part sous « Comment ça marche », jamais dans le héro.
 * ═══════════════════════════════════════════════════════════════════════ */

.np-demo-section .np-demo-wrap { max-width: 1300px; margin: 0 auto; }
.np-demo { position: relative; }
.np-demo .np-scene-stage { cursor: default; }

/* Les couches n'existent que si le script est là. */
.np-demo-hint, .np-demo-hot, .np-demo-note, .np-demo-glow, .np-demo-chip,
.np-demo-validate-wrap, .np-demo-status, .np-demo-stamp, .np-demo-end { display: none; }
.np-js .np-demo-hint, .np-js .np-demo-hot, .np-js .np-demo-note, .np-js .np-demo-glow,
.np-js .np-demo-chip, .np-js .np-demo-validate-wrap, .np-js .np-demo-stamp, .np-js .np-demo-end { display: block; }
.np-js .np-demo-hint, .np-js .np-demo-end, .np-js .np-demo-status { display: flex; }

/* ── Étape 1 : la zone cliquable de la page 4 (repères de la scène du héro) ── */
.np-demo-hot { position: absolute; left: 65.6%; top: 72.4%; width: 15.2%; height: 21.6%; border: 0; background: transparent; border-radius: 10px; cursor: pointer; padding: 0; z-index: 7; }
.np-demo-hot:disabled { cursor: default; }
.np-demo-hot:focus-visible { outline: 2px solid var(--np-color-primary); outline-offset: 3px; }
.np-demo-hot::after { content: ''; position: absolute; inset: 0; border-radius: 10px; border: 2px solid var(--np-color-primary); box-shadow: 0 0 0 4px var(--np-color-primary-halo); opacity: 0; transition: opacity var(--np-duration-base) ease; }
.np-demo[data-step="1"] .np-demo-hot::after { opacity: 1; animation: np-demo-pulse 1.6s ease-in-out infinite; }
.np-demo[data-step="1"] .np-demo-hot:hover::after { animation: none; }
@keyframes np-demo-pulse { 0%, 100% { box-shadow: 0 0 0 4px var(--np-color-primary-halo); } 50% { box-shadow: 0 0 0 10px transparent; } }
@media (prefers-reduced-motion: reduce) { .np-demo[data-step="1"] .np-demo-hot::after { animation: none; } }

/* ── La consigne, posée juste au-dessus de la page 4 (là où l'œil arrive) ── */
.np-demo-hint { position: absolute; left: 73.2%; top: 70.6%; transform: translate(-50%, -100%); align-items: center; gap: 10px; padding: 9px 16px; background: var(--np-color-ink); color: var(--np-color-on-primary); border-radius: var(--np-radius-pill); font-family: var(--np-font-sans); font-size: clamp(11px, 1.05cqw, 15px); white-space: nowrap; box-shadow: var(--np-shadow-popover); z-index: 9; }
.np-demo-hint b { display: inline-flex; width: 1.6em; height: 1.6em; align-items: center; justify-content: center; border-radius: var(--np-radius-full); background: var(--np-color-primary); color: var(--np-color-on-primary); font-size: 0.8em; font-weight: 600; flex-shrink: 0; }
.np-demo[data-step="4"] .np-demo-hint b { background: var(--np-color-success-strong); }

/* ── Étape 2 : la bulle de saisie (même place et même allure que la remarque du héro) ── */
.np-demo-note { position: absolute; left: 47%; top: 75%; width: 17%; min-width: 210px; padding: 0.9cqw 1.1cqw; background: var(--np-color-canvas); border: 1px solid var(--np-color-hairline); border-left: 3px solid var(--np-color-primary); border-radius: var(--np-radius-md); box-shadow: var(--np-shadow-scene-note); font-family: var(--np-font-sans); font-size: clamp(10px, 1cqw, 14px); line-height: 1.35; color: var(--np-color-body-strong); z-index: 8; opacity: 0; transform: translateY(8px); transition: opacity var(--np-duration-base) ease, transform var(--np-duration-base) ease; pointer-events: none; }
.np-demo[data-step="2"] .np-demo-note, .np-demo[data-step="3"] .np-demo-note, .np-demo[data-step="4"] .np-demo-note { opacity: 1; transform: none; pointer-events: auto; }
.np-demo-note b { display: block; font-weight: 600; color: var(--np-color-ink); margin-bottom: 0.35em; }
.np-demo-note label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.np-demo-note textarea { width: 100%; resize: none; border: 1px solid var(--np-color-hairline); border-radius: var(--np-radius-sm); padding: 0.5em 0.6em; font: inherit; color: inherit; background: var(--np-color-surface-soft); min-height: 3.4em; }
.np-demo-note textarea:focus-visible { outline: 2px solid var(--np-color-primary); outline-offset: 1px; }
.np-demo-row { display: flex; gap: 8px; align-items: center; justify-content: space-between; margin-top: 0.6em; }
.np-demo-note small { font-family: var(--np-font-mono); font-size: 0.8em; letter-spacing: 0.04em; color: var(--np-color-muted); }
.np-demo-note .np-btn { height: auto; padding: 0.45em 0.9em; font-size: 0.95em; }
.np-demo-sent { display: none; }
.np-demo[data-step="3"] .np-demo-note form, .np-demo[data-step="4"] .np-demo-note form { display: none; }
.np-demo[data-step="3"] .np-demo-sent, .np-demo[data-step="4"] .np-demo-sent { display: block; }
.np-demo-sent q { quotes: '« ' ' »'; }

/* ── Étape 3 : le panneau IA réagit (rôles np-scene-glow / np-scene-chip pour l'allure) ── */
.np-demo-glow { position: absolute; left: 17.6%; top: 23.3%; width: 80.9%; height: 10.2%; opacity: 0; transition: opacity var(--np-duration-slow) ease; pointer-events: none; }
.np-demo-chip { position: absolute; right: 3%; top: 29.4%; opacity: 0; transform: translateY(6px); transition: opacity var(--np-duration-slow) ease, transform var(--np-duration-slow) ease; pointer-events: none; }
.np-demo[data-step="3"] .np-demo-glow, .np-demo[data-step="4"] .np-demo-glow { opacity: 1; }
.np-demo[data-step="3"] .np-demo-chip, .np-demo[data-step="4"] .np-demo-chip { opacity: 1; transform: none; }

/* Le bouton « Valider », posé sur la page 4. Le centrage (translate -50 %)
   est porté par un conteneur, PAS par le bouton : .np-btn--primary:hover
   pose son propre transform (translateY(-1px)) et remplacerait le centrage,
   le bouton sauterait de la moitié de sa largeur sous la souris. Mesuré en
   ligne le 22/10/2026 : un clic sur deux manquait sa cible. */
.np-demo-validate-wrap { position: absolute; left: 73.2%; top: 84%; transform: translate(-50%, -50%); z-index: 8; opacity: 0; pointer-events: none; transition: opacity var(--np-duration-base) ease; }
.np-demo[data-step="3"] .np-demo-validate-wrap { opacity: 1; pointer-events: auto; }
.np-demo-validate { height: auto; padding: 0.55em 1.1em; font-size: clamp(11px, 1.05cqw, 15px); white-space: nowrap; }

/* ── Étape 4 : pastille et tampon (rôles np-scene-status / np-scene-stamp) ── */
.np-demo-status { position: absolute; left: 66.5%; top: 90.8%; width: 6.6%; height: 1.8%; opacity: 0; transition: opacity var(--np-duration-base) ease; pointer-events: none; }
.np-demo-stamp { position: absolute; left: 67.5%; top: 79%; transform: rotate(-7deg) scale(1.5); opacity: 0; transition: opacity var(--np-duration-base) ease, transform var(--np-duration-base) cubic-bezier(0.22,1,0.36,1); pointer-events: none; }
.np-demo[data-step="4"] .np-demo-status { opacity: 1; }
.np-demo[data-step="4"] .np-demo-stamp { opacity: 1; transform: rotate(-7deg) scale(1); }

/* La carte de fin : en bas de la capture, là où le visiteur regarde (la page 4
   est dans le dernier tiers de l'image), pas au centre géométrique. */
.np-demo-end { position: absolute; inset: 0; align-items: flex-end; justify-content: center; padding: 0 16px 6%; background: color-mix(in srgb, var(--np-color-canvas) 55%, transparent); opacity: 0; pointer-events: none; transition: opacity var(--np-duration-slow) ease; z-index: 10; }
.np-demo[data-step="4"] .np-demo-end { opacity: 1; pointer-events: auto; transition-delay: 1.1s; }
.np-demo-end-card { background: var(--np-color-canvas); border: 1px solid var(--np-color-hairline); border-radius: var(--np-radius-lg); box-shadow: var(--np-shadow-modal); padding: 28px 32px; max-width: 420px; text-align: center; }
.np-demo-end-card h3 { font-family: var(--np-font-serif); font-weight: 400; font-size: 26px; line-height: 1.15; color: var(--np-color-ink); margin: 0 0 10px; }
.np-demo-end-card p { font-size: 15px; color: var(--np-color-body); margin: 0 0 18px; }
.np-demo-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 640px) {
  .np-demo-glow, .np-demo-chip { display: none !important; }
  .np-demo-note { min-width: 0; width: 50%; }
  .np-demo-hint { left: 50%; white-space: normal; text-align: left; max-width: 92%; }
  .np-demo-end { padding-bottom: 4%; }
  .np-demo-end-card { padding: 18px 16px; }
  .np-demo-end-card h3 { font-size: 20px; }
  .np-demo-end-card p { font-size: 14px; }
}