/* Démonstration du CV (2026-10-11, js/demo/demo.js) : bandeau FIXE « Démonstration — données fictives » en tête de la fenêtre, et écran
   d'attente de l'entrée #/demo. Le bandeau vit hors de la zone des écrans (enfant de body) ; `html[data-demo]` + `--demo-h` (sa hauteur, suivie
   en JS) décalent d'autant le contenu, la barre du haut et la barre latérale du Fil : rien n'est recouvert, rien ne bouge pour un compte réel.
   Jetons du Fil seulement (tests/charte.test.mjs). */
.bandeau-demo { position: fixed; inset: 0 0 auto; z-index: 70; display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between;
  gap: 8px 16px; box-sizing: border-box; min-width: 0; min-height: 56px; padding: 6px clamp(16px, 3vw, 32px); background: var(--f-surface-2);
  color: var(--f-encre); border-bottom: 1px solid var(--f-filet); box-shadow: inset 3px 0 0 var(--f-vivre); }
.bd-texte { margin: 0; flex: 1 1 auto; min-width: 0; font: 400 14px/1.4 Inter, system-ui, sans-serif; color: var(--f-encre-2); overflow-wrap: anywhere; }
.bd-texte b { margin-right: 8px; font-weight: 600; color: var(--f-vivre-texte); }
.bd-court { display: none; }
.bd-retour { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--f-filet);
  border-radius: 14px; background: var(--f-surface); color: var(--f-encre); font: 500 14px/1.2 Inter, system-ui, sans-serif; text-decoration: none;
  white-space: nowrap; cursor: pointer; }
.bd-retour:hover { border-color: var(--f-encre-3); }
.bd-retour:focus-visible { outline: 2px solid var(--f-encre); outline-offset: 2px; }

html[data-demo] body { padding-top: var(--demo-h, 56px); }
html[data-demo][data-interface="fil"] .f-top { top: var(--demo-h, 56px); }
html[data-demo][data-interface="fil"] .f-sidebar { top: var(--demo-h, 56px); }

@media (max-width: 640px) {
  .bandeau-demo { gap: 10px; padding-inline: 16px; }
  .bd-long { display: none; }
  .bd-court { display: inline; }
  .bd-texte { font-size: 13px; }
  .bd-texte b { display: block; margin: 0; }
  .bd-retour { padding: 0 12px; font-size: 13px; }
}

.demo-entree { box-sizing: border-box; width: min(560px, calc(100% - 32px)); margin: 18vh auto 0; display: grid; gap: 16px; justify-items: start; }
.demo-entree-titre { margin: 0; font: 600 13px/1.3 Inter, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--f-encre-3); }
.demo-entree-texte { margin: 0; font: 400 20px/1.4 Inter, system-ui, sans-serif; color: var(--f-encre); }