/* Démos publiques : la console (app.css) + le strict nécessaire.
 *
 * Tout l'aspect vient de tokens.css / kit.css / app.css, comme dans la console.
 * Ce fichier n'ajoute que ce qui n'existe pas côté console : le bandeau
 * « instances fictives », le choix rapide et la carte d'invitation finale.
 * Pas d'hex ici (un test le vérifie) : uniquement des variables.
 */
[hidden]{display:none !important}
body.demo{min-height:100vh}

/* Bandeau permanent : la démo ne se fait jamais passer pour un vrai compte. */
.demo-banner{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:8px 16px 8px 116px;font-size:12.5px;background:var(--warn-bg);color:var(--warn);
  border-bottom:1px solid var(--warn-line)}
.demo-banner b{font-weight:700}
.demo-banner-dot{width:8px;height:8px;border-radius:50%;background:var(--warn);flex:none}
body.demo .rail{top:56px}
body.demo main{padding-top:20px}

/* Choix rapide : quatre boutons qui cochent les étapes du pipeline. */
.demo-quick h2{margin:0}
.demo-quick-row{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 8px}
.demo-quick-row button{min-width:110px}
.demo-quick-row button[aria-pressed="true"]{background:var(--accent-tint);border-color:var(--accent);color:var(--accent);font-weight:600}
.demo-quick p{margin:0;font-size:13px}

/* Noms d'instances : le nom ne se coupe jamais au tiret, l'adresse passe dessous. */
.checklist label{flex-wrap:wrap}
.demo-inst{white-space:nowrap}
.checklist .muted{overflow-wrap:anywhere}

/* Invitation finale (seule chose que la console n'a pas). */
.demo-cta{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;border-color:var(--accent)}
.demo-cta h2{margin:0 0 4px}
.demo-cta p{margin:0}
.demo-cta-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

@media (max-width:760px){
  .demo-banner{padding-left:16px}
  body.demo .rail{top:auto}
  body.demo main{padding-top:14px}
}