/* ==========================================================================
   Mantara V3 → V4 — la couche numérique (étape 1 : le hero)
   Les signes de l'écran posés sur la DA du plan : état en ligne, heure, curseur de saisie.
   Suivent le thème (tokens.css). Le reste du kit (fenêtres, terminal, états) sera ajouté étape par étape.
   ========================================================================== */

/* ---------- État en ligne et heure (barre d'état de l'accueil) ---------- */
.statusbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 18px; }
.live { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); }
.live::before { content: ""; width: 7px; height: 7px; background: var(--ok); animation: live 2.4s ease-out infinite; }
@keyframes live { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 60%, transparent); } 70%, 100% { box-shadow: 0 0 0 8px transparent; } }
.clock { font-variant-numeric: tabular-nums; }
.clock b { font-weight: 500; color: var(--ink); }

/* ---------- Curseur de saisie ---------- */
.caret { display: inline-block; width: 0.075em; height: 0.8em; margin-left: 0.07em; background: var(--signal); vertical-align: -0.04em; animation: caret 1.1s steps(1, end) infinite; }
@keyframes caret { 50% { opacity: 0; } }

/* ---------- Suivi d'états d'une démonstration : Arrivée · Lecture · Rangé · À valider · Fait ---------- */
.track { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.track li { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; font: 500 0.6875rem/1 var(--f-mono); color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line); transition: color 0.3s, background-color 0.3s, box-shadow 0.3s; }
.track li::before { content: ""; width: 6px; height: 6px; box-shadow: inset 0 0 0 1.5px currentColor; }
.track li.is-done { color: var(--ink-2); }
.track li.is-done::before { background: currentColor; box-shadow: none; }
.track li.is-on { color: var(--signal-ink); background: color-mix(in srgb, var(--signal) 12%, transparent); box-shadow: inset 0 0 0 1px var(--signal); }
.track li.is-on::before { background: currentColor; box-shadow: none; animation: blink 1.2s steps(2, jump-none) infinite; }

/* ---------- L'étoile du logo : la présence de l'IA, seulement quand elle intervient ---------- */
.spark { display: inline-block; flex: none; width: 1em; height: 1em; color: var(--signal-ink); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--signal) 55%, transparent)); }
.tag-ai, .tag-rule { display: inline-flex; align-items: center; gap: 5px; font: 500 0.6875rem/1 var(--f-mono); }
.tag-ai { color: var(--signal-ink); }
.tag-rule { color: var(--ink-3); }

/* ---------- Touche du doigt : l'humain valide ---------- */
.ripple { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border: 2px solid var(--signal); border-radius: 50%; opacity: 0; pointer-events: none; }

/* ---------- Pastilles de liens ---------- */
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pill { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; box-shadow: inset 0 0 0 1px var(--ink); font-weight: 600; transition: background-color 0.4s var(--ease-snap), color 0.4s var(--ease-snap); }
.pill svg { width: 14px; height: 14px; flex: none; transition: transform 0.6s var(--ease-snap); }
.pill:hover { background: var(--ink); color: var(--white); }
.pill:hover svg { transform: translateX(4px); }

/* ---------- Ligne de commande : un choix posé comme une question et sa réponse ---------- */
.prompts { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.prompt { position: relative; isolation: isolate; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto 20px; align-items: center; gap: 4px 12px; min-height: 64px; padding: 12px 16px; border-bottom: 1px solid var(--ink); }
.prompt::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--white); transform: scaleY(0); transform-origin: bottom; transition: transform 0.6s var(--ease-snap); }
.prompt:hover::before, .prompt:focus-visible::before { transform: scaleY(1); }
.prompt__sig { font: 500 1rem/1 var(--f-mono); color: var(--signal-ink); }
.prompt__q { font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.375rem); letter-spacing: -0.01em; }
.prompt__a { font-weight: 650; color: var(--signal-ink); white-space: nowrap; }
.prompt svg { width: 16px; height: 16px; color: var(--signal-ink); transition: transform 0.6s var(--ease-snap); }
.prompt:hover svg { transform: translateX(5px); }
@media (max-width: 560px) {
  .prompt { grid-template-columns: 20px minmax(0, 1fr) 20px; padding-inline: 4px; }
  .prompt__q { grid-column: 2; }
  .prompt__a { grid-column: 2; grid-row: 2; }
  .prompt svg { grid-column: 3; grid-row: 1 / span 2; }
}

/* ---------- Défilement horizontal des séries (réalisations sur mobile) : l'indice « il y a une suite » reste visible ---------- */
.snap-hint { display: none; }
@media (max-width: 760px) {
  .snap { display: flex; gap: 14px; margin-inline: calc(-1 * var(--gutter)); padding: 7px var(--gutter) 22px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .snap::-webkit-scrollbar { display: none; }
  .snap > * { flex: 0 0 min(84%, 360px); scroll-snap-align: start; }
  .snap-hint { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; }
  .snap-dots { display: flex; gap: 6px; }
  .snap-dots i { width: 18px; height: 3px; background: var(--line-strong); transition: background-color 0.3s, width 0.4s var(--ease-snap); }
  .snap-dots i.is-on { width: 30px; background: var(--signal); }
}

/* ---------- Les messages qui circulent entre les outils (.flowtag) : accueil (iso.js les projette sur les tuiles)
   et pages intérieures (variante .flowtags--static, positions --x / --y en pourcentage de la figure) ---------- */
.flowtags { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; overflow: hidden; pointer-events: none; }
.flowtag { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 9px; background: var(--term-bg); color: var(--term-fg); box-shadow: 0 0 0 1px var(--term-line), 4px 4px 0 rgba(0, 150, 186, 0.28); font: 500 0.625rem/1 var(--f-mono); white-space: nowrap; opacity: 0; will-change: transform, opacity; }
.flowtag::before { content: ""; width: 6px; height: 6px; background: var(--term-ok); }
.flowtag--acc::before { background: var(--term-accent); }
.flowtags--static .flowtag { left: var(--x, 0); top: var(--y, 0); transform: translateY(6px); transition: opacity 0.5s var(--ease-out), transform 0.7s var(--ease-snap); will-change: auto; }
.flowtags--static .flowtag.is-in { opacity: 1; transform: none; }
@media (max-width: 560px) { .flowtag { height: 21px; font-size: 0.5625rem; } }

/* ---------- Fenêtre d'application : le cadre des schémas des pages intérieures (barre de titre, trois pastilles, état) ---------- */
.appwin { position: relative; background: var(--white); box-shadow: 0 0 0 1px var(--line-strong), 5px 5px 0 rgba(0, 150, 186, 0.16); }
.appwin__bar { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; background: var(--paper-2); box-shadow: inset 0 -1px 0 var(--line-strong); font: 500 0.625rem/1 var(--f-mono); color: var(--ink-3); }
.appwin__bar > i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); }
.appwin__title { margin-left: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.appwin__state { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); white-space: nowrap; }
.appwin__state::before { content: ""; width: 6px; height: 6px; background: var(--ok); }
.appwin__body { position: relative; padding: 14px 14px 36px; }
.appwin__body > svg { display: block; width: 100%; height: auto; overflow: visible; }
.appwin figcaption { position: absolute; left: 12px; right: 12px; bottom: 9px; margin: 0; }

/* ---------- Barre d'état dans l'en-tête d'une page intérieure (à côté de l'adresse de la page) ---------- */
.phead__rule .statusbar { gap: 2px 14px; }
@media (max-width: 560px) { .phead__rule .statusbar .hide-sm { display: none; } }
@media (prefers-reduced-motion: reduce) { .flowtags--static .flowtag { opacity: 1; transform: none; transition: none; } }

/* ---------- Dans l'en-tête d'une page intérieure : la barre de fenêtre prend toute la largeur de la figure, le journal passe dessous ---------- */
.phead__fig--sheet > .appwin__bar { margin: -18px -18px 14px; }
.phead__fig--work > .appwin__bar { margin: -10px -10px 10px; }
.flowtags--strip { position: static; inset: auto; display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 12px; overflow: visible; }
.flowtags--strip .flowtag { position: static; }

.phead__end { display: inline-flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 4px 18px; }