/* Habillage commun des démonstrations en navigateur (ouvertes dans une iframe du diaporama ou en plein écran). */
:root{--bg:#0b1220;--bg2:#121a2b;--surf:rgba(255,255,255,.05);--bord:rgba(255,255,255,.1);--encre:#eef2ff;--muet:#8b97ad;--t1:#4fd1c5;--t2:#7c9cf5;--amb:#f6ad55;--rose:#f687b3;--ok:#48bb78;--ko:#fc8181;--font:"Inter",system-ui,sans-serif}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg2);color:var(--encre);font-family:var(--font);font-size:18px}
body{padding:16px}h1{font-size:1.15rem;margin:0 0 10px;font-weight:800;letter-spacing:-.02em}h1 small{color:var(--muet);font-weight:500;font-size:.8rem;margin-left:.6em}
.barre{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin:8px 0 12px;font-size:.9rem}
label{color:#d5dced;display:inline-flex;align-items:center;gap:6px}
input[type=range]{accent-color:var(--t1);width:140px}select,input[type=text],textarea{background:var(--surf);color:var(--encre);border:1px solid var(--bord);border-radius:10px;padding:6px 10px;font:inherit}
textarea{width:100%;min-height:70px;resize:vertical}
button{background:linear-gradient(135deg,var(--t1),var(--t2));color:#0b1220;border:0;border-radius:999px;padding:8px 16px;font:inherit;font-weight:800;cursor:pointer}
button.sec{background:var(--surf);color:var(--encre);border:1px solid var(--bord)}button:disabled{opacity:.5;cursor:default}
canvas{background:var(--bg);border:1px solid var(--bord);border-radius:16px;max-width:100%;display:block}
.deux{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.mesure{display:flex;gap:18px;flex-wrap:wrap;margin-top:10px}.mesure div{background:var(--surf);border:1px solid var(--bord);border-radius:14px;padding:8px 14px;min-width:120px}
.mesure b{display:block;font-size:1.5rem;font-weight:900;background:linear-gradient(135deg,var(--t1),var(--t2));-webkit-background-clip:text;background-clip:text;color:transparent}
.mesure span{color:var(--muet);font-size:.78rem}
.note{color:var(--muet);font-size:.82rem;margin-top:10px;line-height:1.4}
.ok{color:var(--ok)}.ko{color:var(--ko)}.amb{color:var(--amb)}
.jeton{display:inline-block;padding:2px 6px;margin:2px;border-radius:6px;font-family:ui-monospace,monospace;font-size:.95rem}
.barres div{display:grid;grid-template-columns:150px 1fr 60px;gap:10px;align-items:center;margin:5px 0;font-size:.95rem}
.barres i{display:block;height:16px;border-radius:8px;background:linear-gradient(90deg,var(--t1),var(--t2));transition:width .3s}
.trace{font-family:ui-monospace,monospace;font-size:.86rem;line-height:1.5}.trace p{margin:4px 0;padding:6px 10px;border-radius:10px;background:var(--surf);border-left:4px solid var(--bord);animation:app .4s}
.trace .pense{border-color:var(--t2)}.trace .outil{border-color:var(--amb)}.trace .retour{border-color:var(--muet);color:#d5dced}.trace .fin{border-color:var(--ok)}.trace .erreur{border-color:var(--ko)}
@keyframes app{from{opacity:0;transform:translateY(8px)}}