/* ===== Base ===== */
:root {
  --bg:#f3f5f9; --card:#fff; --ink:#18212f; --muted:#667085; --line:#e3e7ee; --line-strong:#cfd5e0;
  --accent:#265c71; --accent-soft:#e4eef3; --danger:#c62828; --ok:#15803d; --ok-soft:#e7f6ec;
  --shadow:0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.06);
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#0f141b; --card:#18202b; --ink:#e9edf3; --muted:#98a2b3; --line:#283241; --line-strong:#3a4658;
          --accent:#4a89ad; --accent-soft:#1b3340; --danger:#ef6b6b; --ok:#4ade80; --ok-soft:#173523; --shadow:none; }
}
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:15px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color:var(--accent); }
h2 { margin:30px 0 4px; font-size:1.15rem; letter-spacing:-.01em; }
h2 + .section-sub { margin:0 0 12px; }
.section-sub, .muted { color:var(--muted); font-size:.88rem; }

/* ===== En-tête et onglets ===== */
.topbar { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:0 24px; height:56px; background:var(--card); border-bottom:1px solid var(--line); }
.topbar-title { display:flex; align-items:center; gap:12px; min-width:0; }
/* Logo OxygenStream dans l'en-tête des pages admin / super admin / animateur. Fond clair garanti derrière : le logo a du texte sombre. */
.topbar-brand { display:block; height:30px; width:auto; flex:none; }
.brand-sep { width:1px; height:28px; background:var(--line-strong); flex:none; }
@media (max-width:640px) {
  .topbar { flex-wrap:wrap; height:auto; min-height:56px; padding:8px 14px; gap:4px 12px; }
  .topbar-brand { height:24px; } .brand-sep { height:22px; }
  .topbar-title { flex-wrap:wrap; gap:4px 10px; }
  .topbar-right { flex-wrap:wrap; }
}
.topbar-logo { display:block; height:34px; width:auto; max-width:180px; object-fit:contain; }
.topbar strong { font-size:1rem; letter-spacing:-.01em; }
.topbar-right { display:flex; gap:6px; align-items:center; }
.topbar-right a { padding:6px 12px; border-radius:12px; color:var(--muted); text-decoration:none; font-weight:600; font-size:.88rem; }
.topbar-right a:hover { background:var(--bg); color:var(--ink); }
.tabs { display:flex; gap:2px; padding:0 24px; background:var(--card); border-bottom:1px solid var(--line); overflow-x:auto; }
.tab { padding:12px 16px; color:var(--muted); text-decoration:none; font-weight:600; font-size:.92rem; border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap; }
.tab:hover { color:var(--ink); }
.tab.active { color:var(--accent); border-bottom-color:var(--accent); }
main { max-width:760px; margin:28px auto 80px; padding:0 16px; }
body.admin main { max-width:860px; }

/* ===== Cartes ===== */
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:20px; margin-bottom:16px; box-shadow:var(--shadow); }
.card.flush { padding:0; overflow:hidden; }
.narrow { max-width:400px; margin:48px auto; }
.notice { padding:11px 14px; border-radius:12px; background:var(--ok-soft); color:var(--ok); margin-bottom:16px; font-weight:500; }
.notice.error { background:#fdecea; color:var(--danger); }

/* ===== Formulaires ===== */
.field { margin-bottom:14px; }
.field > label { display:block; font-weight:600; margin-bottom:5px; font-size:.88rem; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=url], input:not([type]), select, textarea {
  width:100%; padding:9px 12px; border:1px solid var(--line-strong); border-radius:12px; background:var(--card); color:var(--ink); font:inherit; }
input:focus, select:focus, textarea:focus { outline:2px solid var(--accent); outline-offset:-1px; border-color:transparent; }
input[readonly] { background:var(--bg); color:var(--muted); }
textarea { margin-bottom:8px; resize:vertical; }
input[type=file] { display:block; margin:8px 0 4px; font-size:.88rem; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
@media (max-width:640px) { .grid2 { grid-template-columns:1fr; } }

button, .button { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:9px 16px; background:var(--accent); color:#fff; border:1px solid transparent;
  border-radius:12px; font:inherit; font-weight:600; font-size:.9rem; cursor:pointer; text-decoration:none; transition:background .15s, opacity .15s; }
button:hover, .button:hover { filter:brightness(1.08); }
button:disabled { opacity:.45; cursor:default; filter:none; }
button.secondary, .button.secondary { background:var(--card); color:var(--ink); border-color:var(--line-strong); }
button.secondary:hover { background:var(--bg); filter:none; }
button.danger { background:var(--card); color:var(--danger); border-color:var(--line-strong); }
.small { padding:6px 12px; font-size:.84rem; }

/* ===== Lignes de réglages (libellé à gauche, commande à droite) ===== */
.group-title { margin:0 0 2px; font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:700; }
.settings .card { padding:6px 20px; }
.row { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:14px 0; border-bottom:1px solid var(--line); cursor:default; }
.row:last-child { border-bottom:0; }
.row-text { min-width:0; }
.row-label { display:block; font-weight:600; }
.row-help { display:block; color:var(--muted); font-size:.85rem; margin-top:2px; }
.row.stack { flex-direction:column; align-items:stretch; gap:10px; }
.row-control { flex:none; }
.row-control input[type=number] { width:110px; text-align:right; }
.row-control select { width:auto; min-width:180px; }
label.row { cursor:pointer; }
.switch-row { justify-content:flex-start; gap:16px; }   /* interrupteur à gauche, texte à droite */
.switch-row .row-text { flex:1; }

/* Interrupteur */
input.toggle { appearance:none; -webkit-appearance:none; flex:none; width:46px; height:26px; border-radius:12px; background:var(--line-strong); position:relative; cursor:pointer; transition:background .18s; margin:0; border:0; padding:0; }
input.toggle::after { content:''; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); transition:left .18s; }
input.toggle:checked { background:var(--accent); }
input.toggle:checked::after { left:23px; }
input.toggle:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* Choix multiples en pastilles */
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chip { position:relative; cursor:pointer; }
.chip input { position:absolute; opacity:0; pointer-events:none; }
/* Même forme que les boutons : rectangle arrondi 8px, même taille de texte. Coché = bleu plein, comme « Enregistrer ». */
.chip span { display:inline-block; padding:9px 16px; border:1px solid var(--line-strong); border-radius:10px; font-size:.9rem; font-weight:600; background:var(--card); color:var(--ink); transition:all .15s; }
.chip:hover span { background:var(--bg); }
.chip input:checked + span { background:var(--accent); border-color:var(--accent); color:#fff; }
.chip input:checked:hover + span, .chip:hover input:checked + span { filter:brightness(1.08); background:var(--accent); }
/* Option imposée : grise et non modifiable (l'explication est dans l'aide sous le titre et dans la bulle). */
.chip-locked { cursor:not-allowed; }
.chip-locked span, .chip-locked:hover span, .chip-locked input:checked + span { background:#e5e7eb; border-color:#d1d5db; color:#6b7280; filter:none; }
@media (prefers-color-scheme: dark) { .chip-locked span, .chip-locked:hover span, .chip-locked input:checked + span { background:#374151; border-color:#4b5563; color:#9ca3af; } }
.chip input:focus-visible + span { outline:2px solid var(--accent); outline-offset:2px; }

/* Barre d'enregistrement (collée en bas de l'écran) */
.savebar { position:sticky; bottom:var(--footer-h); display:flex; justify-content:flex-end; align-items:center; gap:14px; padding:12px 0; margin-top:4px; background:linear-gradient(to top, var(--bg) 70%, transparent); }
.savebar .dirty-note { color:var(--muted); font-size:.86rem; }
.savebar .dirty-note.on { color:#b45309; font-weight:600; }
.savebar .dirty-note.on::before { content:'● '; }

.logo-preview { display:inline-block; }
.logo-preview img { max-width:220px; max-height:110px; border:1px solid var(--line); border-radius:12px; padding:6px; background:#fff; }

/* ===== Super admin : modules (une section par module, regroupées par catégorie) ===== */
.category-title { margin:34px 0 10px; padding-bottom:6px; border-bottom:2px solid var(--line-strong); font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:700; }
.category-title:first-of-type { margin-top:12px; }
.module { padding:0; border-left:5px solid var(--line-strong); }
.module.is-on { border-left-color:var(--accent); }
.module-top { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding:20px 22px 6px; }
.module-title { margin:0; font-size:1.45rem; line-height:1.25; letter-spacing:-.02em; font-weight:700; }
.module-desc { margin:6px 0 0; color:var(--muted); max-width:62ch; }
.module-switches { margin-top:12px; padding:2px 22px; border-top:1px solid var(--line); background:var(--bg); border-radius:0 0 12px 0; }
.module-switches .row { padding:12px 0; }
.module-switches .row-label { font-weight:600; }
.pill { display:inline-block; padding:1px 9px; border-radius:10px; font-size:.74rem; font-weight:700; background:var(--ok-soft); color:var(--ok); margin-left:8px; vertical-align:middle; }
/* ===== Super admin : apparence des pages publiques ===== */
.theme-row { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:12px 0; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.theme-controls { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
input[type=color] { width:52px; height:38px; padding:2px; border:1px solid var(--line-strong); border-radius:12px; background:var(--card); cursor:pointer; }
.theme-hex { font-size:.82rem; min-width:64px; color:var(--muted); }
.theme-state { min-width:90px; font-size:.8rem; }
.theme-preview { border:1px solid var(--line); border-radius:12px; overflow:hidden; margin:6px 0; }
.tp-header, .tp-footer { display:flex; justify-content:space-between; align-items:center; padding:10px 16px; font-size:.85rem; }
.tp-body { padding:18px 16px; }
.tp-card { border-radius:12px; padding:14px 16px; max-width:420px; }
.tp-card p { margin:6px 0 0; font-size:.9rem; }
.pill.pill-super { background:#fef3c7; color:#92400e; }
.pw-line { display:flex; flex-wrap:wrap; gap:8px; }
.pw-line input { flex:1; min-width:0; }

/* ===== Stats ===== */
.cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:12px; margin:14px 0 20px; }
.stat { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px 16px; box-shadow:var(--shadow); }
.stat .n { display:block; font-size:1.55rem; font-weight:700; color:var(--accent); line-height:1.2; letter-spacing:-.02em; }
.stat .l { font-size:.74rem; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; font-weight:600; }
/* Barre d'onglets (statistiques : une ligne d'onglets ; modération du Q&A : deux lignes étiquetées, alignées en colonnes). */
.stats-nav { display:flex; width:fit-content; max-width:100%; flex-wrap:wrap; gap:4px 2px; padding:4px; margin:6px 0 16px; background:var(--card); border:1px solid var(--line); border-radius:12px; }
.stats-nav a { padding:7px 12px; border-radius:10px; text-decoration:none; color:var(--muted); font-size:.88rem; font-weight:600; white-space:nowrap; flex:none; }
#qa-tabs { flex-direction:column; flex-wrap:nowrap; align-items:stretch; gap:2px; min-height:98px; width:100%; }   /* hauteur réservée : pas de saut au chargement */
#qa-mod-list { min-height:120px; }
.nav-row { display:grid; grid-template-columns:104px 1fr; align-items:center; }
.nav-row + .nav-row { margin-top:2px; padding-top:4px; border-top:1px solid var(--line); }
.nav-tabs { display:flex; flex-wrap:wrap; gap:2px; min-width:0; }
.stats-nav .group { padding:0 10px 0 8px; font-size:.7rem; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); font-weight:700; white-space:nowrap; }
@media (max-width:520px) { .nav-row { grid-template-columns:1fr; } .stats-nav .group { padding-bottom:2px; } }
.stats-nav a:hover { color:var(--ink); }
.stats-nav a.on { background:var(--accent); color:#fff; }
table.t { width:100%; border-collapse:collapse; font-size:.88rem; background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden; box-shadow:var(--shadow); }
table.t th { text-align:left; padding:10px 14px; background:var(--bg); color:var(--muted); font-size:.76rem; text-transform:uppercase; letter-spacing:.05em; border-bottom:1px solid var(--line); }
table.t td { padding:10px 14px; border-bottom:1px solid var(--line); vertical-align:top; }
table.t tr:last-child td { border-bottom:0; }
table.t .num { text-align:right; font-variant-numeric:tabular-nums; }
.dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--line-strong); margin-right:8px; }
.dot.on { background:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,.2); }
.period-form { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:8px; }
.period-form input, .period-form select { width:auto; }

/* ===== Q&A ===== */
.badge { display:inline-block; margin-left:8px; padding:1px 9px; border-radius:10px; background:var(--bg); border:1px solid var(--line); font-size:.74rem; font-weight:600; color:var(--muted); }
.badge.st-approved { background:var(--ok-soft); border-color:transparent; color:var(--ok); }
.badge.st-pending { background:#fef3c7; border-color:transparent; color:#92400e; }
.badge.st-rejected { background:#fdecea; border-color:transparent; color:var(--danger); }
.qa-mod { border-left:4px solid var(--line-strong); }
.qa-mod.status-approved { border-left-color:#22c55e; }
.qa-mod.status-pending { border-left-color:#f59e0b; }
.qa-mod.status-rejected { border-left-color:#ef4444; opacity:.85; }
.qa-mod .qa-head { margin-bottom:6px; }
.qa-mod .qa-body { font-size:1.05rem; font-weight:500; margin:4px 0 12px; white-space:pre-wrap; }
.qa-mod .field > label { color:var(--muted); font-weight:500; }
.qa-mod.is-deleted { border-left-color:var(--line-strong); opacity:.8; }
.qa-mod.is-deleted .qa-body { color:var(--muted); font-weight:500; }
.danger-zone { border-color:var(--danger); border-left-width:5px; }
button.danger:not(:disabled):hover { background:var(--danger); color:#fff; }
.qa-mod .actions { display:flex; gap:8px; flex-wrap:wrap; }
@keyframes qa-fresh { from { box-shadow:0 0 0 3px var(--accent); background:var(--accent-soft); } to { box-shadow:var(--shadow); } }
.qa-mod.fresh { animation:qa-fresh 3s ease-out; }
.qa-count { margin:-4px 0 10px; font-size:.82rem; color:var(--muted); text-align:right; }
.qa-count.over { color:var(--danger); font-weight:600; }
textarea.over { border-color:var(--danger); }
button:disabled { cursor:not-allowed; }
.qa-item { border-top:1px solid var(--line); padding:12px 0; }
.qa-item.pending { opacity:.7; }
.qa-body { margin:4px 0; white-space:pre-wrap; }
.qa-answer { margin-top:6px; padding:8px 12px; background:var(--bg); border-left:3px solid var(--accent); border-radius:6px; }

/* ===== Page animateur (/anim/) : épurée, lisible de loin, tablette ===== */
body.host { background:var(--card); }
.host-bar { position:sticky; top:0; z-index:5; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:14px 28px; background:var(--card); border-bottom:1px solid var(--line); }
.host-brand { display:block; height:42px; width:auto; flex:none; }
.host-role { flex:none; font-size:1.05rem; font-weight:700; color:var(--ink); text-transform:uppercase; letter-spacing:.04em; }
.host-heading { flex:1; min-width:0; }
.host-pin-brand { display:block; height:44px; width:auto; margin:0 auto 22px; }
@media (max-width:640px) { .host-bar > a:first-child, .host-bar > a:first-child + .brand-sep { display:none; } .host-bar { gap:10px; } }   /* petit écran : on garde la place pour le titre et les boutons A−/A+ ; le logo reste dans le pied de page */
.host-title { margin:0; font-size:1.1rem; letter-spacing:-.01em; }
.host-counts { color:var(--muted); font-size:.95rem; font-weight:600; }
.host-tools { display:flex; gap:8px; }
.host-tools button { padding:8px 14px; font-size:1rem; }
.host-main { max-width:980px; margin:0 auto; padding:18px 28px 80px; }
.host-q { display:flex; align-items:flex-start; gap:22px; padding:calc(22px * var(--host-scale, 1)) 4px; border-bottom:1px solid var(--line); cursor:pointer; }
.host-check { flex:none; width:calc(34px * var(--host-scale, 1)); height:calc(34px * var(--host-scale, 1)); margin:4px 0 0; accent-color:var(--ok); cursor:pointer; }
.host-text { min-width:0; }
.host-body { font-size:calc(1.7rem * var(--host-scale, 1)); line-height:1.35; font-weight:600; letter-spacing:-.01em; white-space:pre-wrap; overflow-wrap:anywhere; }
.host-meta { margin-top:6px; color:var(--muted); font-size:calc(.95rem * var(--host-scale, 1)); }
.host-q.is-done .host-body { color:var(--muted); text-decoration:line-through; font-weight:500; font-size:calc(1.2rem * var(--host-scale, 1)); }
.host-q.is-done { padding-top:calc(12px * var(--host-scale, 1)); padding-bottom:calc(12px * var(--host-scale, 1)); }
body.host-login { display:flex; align-items:center; justify-content:center; min-height:100vh; }
.host-pin { width:min(340px, 90vw); text-align:center; }
.host-pin h1 { font-size:1.5rem; margin:0 0 6px; }
.host-pin input { margin:14px 0; text-align:center; font-size:2.2rem; letter-spacing:.5em; padding:12px 8px 12px calc(8px + .5em); }
.host-pin button { width:100%; padding:14px; font-size:1.05rem; }
.host-empty { padding:60px 0; text-align:center; color:var(--muted); font-size:1.4rem; }
.host-done-toggle { display:block; margin:26px auto 6px; background:transparent; color:var(--muted); border:1px solid var(--line-strong); }
@keyframes host-fresh { from { background:var(--accent-soft); } to { background:transparent; } }
.host-q.fresh { animation:host-fresh 4s ease-out; }

/* ===== Pied de page OxygenStream (toutes les pages) ===== */
:root { --footer-h:52px; }                                  /* hauteur réservée : le contenu ne passe jamais dessous */
body { padding-bottom:var(--footer-h); }
#oxy-footer { position:fixed; left:0; right:0; bottom:0; z-index:1200; height:var(--footer-h); display:flex; align-items:center;
  padding:0 20px; background:rgba(255,255,255,.97); border-top:1px solid rgba(0,0,0,.08); box-shadow:0 -2px 12px rgba(0,0,0,.05); color:#666; }
/* Fond toujours clair, même en thème sombre : le logo a du texte sombre. */
.oxy-footer-inner { width:100%; max-width:1400px; margin:0 auto; display:flex; align-items:center; gap:14px; }
.oxy-footer-logo { display:block; height:32px; flex:none; transition:opacity .25s; }
.oxy-footer-logo:hover { opacity:.85; }
.oxy-footer-logo img { display:block; height:100%; width:auto; }
.oxy-footer-text { font-size:11px; line-height:1.4; color:#666; min-width:0; }
.oxy-footer-text a, .oxy-footer-privacy { color:#255c71; text-decoration:none; }
.oxy-footer-text a:hover, .oxy-footer-privacy:hover { text-decoration:underline; }
.oxy-footer-privacy { margin-left:auto; flex:none; font-size:11px; }
@media (max-width:700px) {
  :root { --footer-h:64px; }
  #oxy-footer { padding:0 12px; }
  .oxy-footer-inner { flex-wrap:wrap; gap:2px 12px; }
  .oxy-footer-logo { height:26px; }
  .oxy-footer-text { font-size:9px; width:100%; order:3; }
  .oxy-footer-privacy { font-size:10px; }
}

/* ===== Pages publiques ===== */
.consent-label { align-items:flex-start; font-size:.86rem; color:var(--muted); }
.consent-label input { margin-top:3px; flex:none; }
.notice-privacy h3 { font-size:.95rem; margin:18px 0 4px; }
.notice-privacy p, .notice-privacy li { color:var(--ink); }
.notice-privacy ul { margin:4px 0; padding-left:20px; }
body.rgpd main { max-width:760px; }
.logo { text-align:center; margin-bottom:16px; }
.logo img { max-width:100%; max-height:120px; }
.form-public h1 { font-size:1.3rem; text-align:center; margin:0 0 18px; }
.error-text { color:var(--danger); font-size:.85rem; }
.live-player iframe { width:100%; aspect-ratio:16/9; border:0; border-radius:12px; }

/* ===== Vote : question par-dessus le lecteur (le plein écran est celui du lecteur intégré) ===== */
.player-stage { position:relative; line-height:0; }
.vote-overlay { position:absolute; inset:0; z-index:5; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(8,12,20,.35); line-height:1.5; pointer-events:none; }
.vote-overlay.floating { position:fixed; z-index:1300; }
.vote-box { position:relative; pointer-events:auto; width:100%; max-width:560px; max-height:100%; overflow:auto; padding:22px 24px; border-radius:12px; background:var(--card); color:var(--ink); box-shadow:0 12px 40px rgba(0,0,0,.35); animation:vote-in .25s ease-out; }
@keyframes vote-in { from { opacity:0; transform:translateY(10px) scale(.98); } to { opacity:1; transform:none; } }
.vote-title { font-size:1.3rem; font-weight:800; line-height:1.25; margin-bottom:6px; }
.vote-thanks { font-weight:700; color:var(--ok); }
.vote-form .vote-opt { display:flex; align-items:center; gap:12px; margin:8px 0; padding:12px 14px; border:1px solid var(--line-strong); border-radius:12px; cursor:pointer; font-weight:600; transition:background .12s, border-color .12s; }
.vote-form .vote-opt:hover { background:var(--bg); }
.vote-form .vote-opt:has(input:checked) { border-color:var(--accent); background:var(--accent-soft); }
.vote-form .vote-opt input { width:20px; height:20px; flex:none; accent-color:var(--accent); margin:0; }
.vote-form .vote-actions { display:flex; gap:10px; margin-top:14px; }
/* Réduire / fermer : en haut à droite de la carte. La pastille « réduit » laisse tout le lecteur utilisable. */
.vote-tools { position:absolute; top:8px; right:8px; display:flex; gap:6px; }
.vote-tool { width:34px; height:34px; padding:0; border-radius:12px; border:1px solid var(--line-strong); background:var(--bg); color:var(--ink); font-size:1.3rem; font-weight:700; line-height:1; cursor:pointer; }
.vote-tool:hover, .vote-tool:focus-visible { background:var(--accent-soft); filter:none; }
.vote-box .vote-title { padding-right:84px; }
.vote-pill { position:absolute; left:10px; top:10px; z-index:6; width:auto; max-width:calc(100% - 20px); padding:9px 16px; border:0; border-radius:10px; background:var(--accent); color:#fff; font-weight:700; font-size:.95rem; line-height:1.2; box-shadow:0 4px 16px rgba(0,0,0,.4); cursor:pointer; animation:vote-in .25s ease-out; }
.vote-pill.floating { position:fixed; z-index:1300; left:auto; right:14px; top:auto; bottom:14px; }
@media (max-width:520px) { .vote-overlay { align-items:flex-start; }
   .vote-box { padding:16px; } .vote-title { font-size:1.1rem; } }

/* Barres de résultats (admin et participants) */
.vote-bars { display:flex; flex-direction:column; gap:10px; margin:12px 0; }
.v-row { display:grid; grid-template-columns:minmax(80px, 30%) 1fr auto; align-items:center; gap:10px; }
.v-label { font-weight:600; overflow-wrap:anywhere; }
.v-bar { height:14px; border-radius:4px; background:var(--line); overflow:hidden; }
.v-bar i { display:block; height:100%; background:var(--accent); border-radius:4px; transition:width .5s ease; }
.v-num { white-space:nowrap; font-variant-numeric:tabular-nums; color:var(--muted); min-width:92px; text-align:right; }
.v-num b { color:var(--ink); }
@media (max-width:520px) { .v-row { grid-template-columns:1fr auto; } .v-bar { grid-column:1 / -1; order:3; } }
.vote-card-admin { border-left:4px solid var(--line-strong); }
.vote-card-admin.is-live { border-left-color:#22c55e; }
.vote-card-admin.is-closed { border-left-color:#f59e0b; }
.vote-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap; }
.vote-q { font-size:1.05rem; margin-right:6px; }
.vote-voters { color:var(--muted); white-space:nowrap; } .vote-voters b { color:var(--ink); font-size:1.2rem; }
.vote-card-admin .vote-actions form { display:flex; flex-wrap:wrap; gap:8px; margin:0; }
.v-opt-row { display:flex; gap:8px; margin-bottom:8px; }
.v-opt-row input { flex:1; }
.toolbar .f select { padding:8px 11px; border:1px solid var(--line-strong); border-radius:12px; background:var(--card); color:var(--ink); font:inherit; font-size:.9rem; text-transform:none; letter-spacing:0; font-weight:400; width:auto; max-width:260px; }
body.live main { max-width:1000px; }

/* ===== Page de live : lecteur + colonne latérale (documents…). Dessous sur petit écran, à côté dès 1100 px ===== */
.live-layout { display:block; }
.live-layout .live-side { margin-top:0; }
@media (min-width:1100px) {
  body.live main:has(.live-layout.has-side) { max-width:1380px; }
  .live-layout.has-side { display:grid; grid-template-columns:minmax(0, 1fr) 340px; gap:16px; align-items:start; }
  .live-layout.has-side .live-side { position:sticky; top:12px; }
}
.live-side .card:first-child { margin-top:0; }
.doc-ext { flex:none; display:inline-flex; align-items:center; justify-content:center; min-width:46px; height:34px; padding:0 8px; border-radius:12px;
  background:var(--accent-soft); color:var(--accent); font-size:.72rem; font-weight:800; letter-spacing:.04em; }
.doc-live-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.doc-live-list li { display:flex; align-items:flex-start; gap:12px; padding:10px 0; border-top:1px solid var(--line); }
.doc-live-list li:first-child { border-top:0; padding-top:0; }
.doc-live-list .doc-info, .doc-row .doc-info { flex:1; min-width:0; overflow-wrap:anywhere; }
.doc-live-list .muted { font-size:.8rem; }
.doc-row { display:flex; align-items:flex-start; gap:12px; flex-wrap:wrap; }
.doc-row .doc-info { min-width:200px; }
.doc-actions { display:flex; gap:6px; flex-wrap:wrap; margin:0; }
/* ===== Questionnaire de satisfaction ===== */
.sat-live { border-left:5px solid var(--accent); }
.sat-live.sat-flash { animation:sat-flash 2.4s ease-out; }
@keyframes sat-flash { from { box-shadow:0 0 0 4px var(--accent); } to { box-shadow:var(--shadow); } }
.sat-q { border:0; padding:0; margin:0 0 18px; min-width:0; }
.sat-label { font-weight:700; padding:0; margin-bottom:8px; }
.sat-q.missing .sat-label { color:var(--danger); }
.sat-scale { display:flex; gap:6px; flex-wrap:wrap; }
.sat-pick, .sat-opt { cursor:pointer; position:relative; }
.sat-pick input { position:absolute; opacity:0; pointer-events:none; }
.sat-nps .sat-pick span { display:inline-flex; align-items:center; justify-content:center; min-width:42px; height:42px; border:1px solid var(--line-strong); border-radius:12px; font-weight:700; background:var(--card); }
.sat-nps .sat-pick:hover span { background:var(--bg); }
.sat-nps .sat-pick input:checked + span { background:var(--accent); border-color:var(--accent); color:#fff; }
.sat-ends { display:flex; justify-content:space-between; font-size:.8rem; margin-top:4px; }
.sat-stars { flex-direction:row-reverse; justify-content:flex-end; gap:2px; }
.sat-stars .sat-pick span { font-size:2.2rem; line-height:1; color:var(--line-strong); transition:color .12s, transform .12s; display:block; padding:0 2px; }
.sat-stars .sat-pick:hover span, .sat-stars .sat-pick:hover ~ .sat-pick span,
.sat-stars .sat-pick:has(input:checked) span, .sat-stars .sat-pick:has(input:checked) ~ .sat-pick span { color:#f59e0b; }
.sat-stars .sat-pick:hover span { transform:scale(1.12); }
.sat-opt { display:flex; align-items:center; gap:10px; margin:6px 0; padding:10px 12px; border:1px solid var(--line-strong); border-radius:12px; font-weight:600; }
.sat-opt:hover { background:var(--bg); }
.sat-opt:has(input:checked) { border-color:var(--accent); background:var(--accent-soft); }
.sat-opt input { width:18px; height:18px; accent-color:var(--accent); margin:0; flex:none; }
.sat-form textarea { width:100%; padding:9px 12px; border:1px solid var(--line-strong); border-radius:12px; background:var(--card); color:var(--ink); font:inherit; }
.sat-thanks { font-weight:700; color:var(--ok); margin:0; }
.sat-status.is-open { border-left:4px solid #22c55e; } .sat-status.is-closed { border-left:4px solid #f59e0b; }
.sat-kpis { display:flex; gap:24px; flex-wrap:wrap; margin:8px 0 4px; }
.sat-kpis b { font-size:1.6rem; color:var(--accent); }
.sat-comment { margin:8px 0; padding:8px 12px; background:var(--bg); border-left:3px solid var(--accent); border-radius:6px; }
.sat-comment footer { font-size:.8rem; margin-top:4px; }
.doc-admin.is-hidden { opacity:.75; border-left:4px solid var(--line-strong); }
.doc-admin details { margin-top:8px; }
.check { display:inline-flex; gap:8px; align-items:center; font-weight:400; }

/* ===== Listes d'admin : barre d'outils, tableau défilant, pastilles d'état ===== */
.toolbar { display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px 14px; padding:14px 16px; margin:0 0 16px; background:var(--card); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); }
.toolbar .f { display:flex; flex-direction:column; gap:4px; font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:600; }
.toolbar .f input { width:auto; padding:8px 11px; border:1px solid var(--line-strong); border-radius:12px; background:var(--card); text-transform:none; letter-spacing:0; font-family:inherit; font-size:.9rem; font-weight:400; color:var(--ink); }
.toolbar .f input:focus { outline:2px solid var(--accent); outline-offset:-1px; border-color:transparent; }
.toolbar .f.search { flex:1 1 200px; } .toolbar .f.search input { width:100%; }
.toolbar .actions { display:flex; gap:8px; align-items:center; margin-left:auto; }
.table-wrap { overflow-x:auto; background:var(--card); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); }
.table-wrap table.t { border:0; border-radius:0; box-shadow:none; min-width:640px; }
.table-wrap table.t th, .table-wrap table.t td { padding-left:12px; padding-right:12px; }
table.t td .sub { display:block; color:var(--muted); font-size:.78rem; margin-top:1px; }
table.t td.nowrap, table.t th.nowrap { white-space:nowrap; }
table.t.rows tbody tr:hover td { background:var(--bg); }
table.t td.who strong { font-weight:600; }
table.t td.mail { overflow-wrap:anywhere; min-width:150px; }
table.t td.who { min-width:110px; }
.badge.flat { margin-left:0; }
.badge.st-none { background:var(--bg); color:var(--muted); }
.stat.is-bad .n { color:var(--danger); } .stat.is-ok .n { color:var(--ok); }
.notice.warn { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 16px; background:#fef3c7; color:#92400e; }
.notice.warn form { margin:0; }
@media (prefers-color-scheme: dark) { .notice.warn { background:#3b2f0e; color:#fbbf24; } .badge.st-pending { background:#3b2f0e; color:#fbbf24; } .badge.st-rejected { background:#3a1f1f; } }
@media (max-width:640px) { .toolbar .actions { margin-left:0; width:100%; } }
.doc-get { display:flex; align-items:center; gap:10px; margin-top:8px; }
.doc-live-list .doc-ext { margin-top:2px; }

/* Pop-up du questionnaire de satisfaction, par-dessus le lecteur (sous la question de vote, qui reste prioritaire) */
.sat-popup { position:absolute; inset:0; z-index:4; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(8,12,20,.35); line-height:1.5; pointer-events:none; }
.sat-popup.floating { position:fixed; z-index:1300; }
.sat-popup-box { position:relative; pointer-events:auto; width:100%; max-width:520px; max-height:100%; overflow:auto; padding:22px 24px; border-radius:12px; background:var(--card); color:var(--ink); box-shadow:0 12px 40px rgba(0,0,0,.35); animation:vote-in .25s ease-out; }
.sat-popup-box .vote-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
.live-main .card:first-child { margin-top:0; }

/* Titres des blocs de la page de live : bien visibles, avec un filet de la couleur d'accent */
.qa > h2, .live-docs > h2, .sat-live > h2 { margin:0 0 16px; padding-bottom:12px; font-size:1.55rem; font-weight:800; letter-spacing:-.015em; line-height:1.2; border-bottom:3px solid var(--accent); }
@media (max-width:520px) { .qa > h2, .live-docs > h2, .sat-live > h2 { font-size:1.3rem; } }

/* ===== Questionnaire de satisfaction : rendu amélioré (remplace les règles plus haut quand elles se recoupent) ===== */
.sat-live { padding:26px 28px 28px; }
.sat-intro { font-size:1.05rem; color:var(--muted); margin:0 0 18px; }
.sat-progress { position:sticky; top:0; z-index:3; display:flex; align-items:center; gap:14px; padding:10px 0 12px; margin:0 0 14px; background:var(--card); }
.sat-bar { flex:1; height:10px; border-radius:4px; background:var(--line); overflow:hidden; }
.sat-bar i { display:block; height:100%; width:0; background:linear-gradient(90deg, var(--accent), #22c55e); border-radius:4px; transition:width .35s ease; }
.sat-ptxt { font-size:.82rem; font-weight:600; color:var(--muted); white-space:nowrap; }
.sat-q { padding:18px 20px 16px; margin:0 0 14px; border:1px solid var(--line); border-radius:12px; background:var(--card); transition:border-color .2s, box-shadow .2s, background .2s; }
.sat-q.is-done { border-color:#86efac; background:rgba(34,197,94,.05); }
.sat-q.missing { border-color:var(--danger); box-shadow:0 0 0 3px rgba(198,40,40,.14); background:rgba(198,40,40,.04); }
.sat-label { display:flex; align-items:flex-start; gap:12px; width:100%; padding:0; margin:0 0 14px; font-size:1.1rem; font-weight:700; line-height:1.35; float:none; }
.sat-label + * { clear:both; }
.sat-num { flex:none; display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; background:var(--accent); color:#fff; font-size:.9rem; font-weight:800; }
.sat-q.is-done .sat-num { background:#22c55e; }
.sat-text { flex:1; min-width:0; }
.sat-req, .sat-opt-tag { flex:none; align-self:center; padding:2px 9px; border-radius:10px; font-size:.7rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase; }
.sat-req { background:#fef3c7; color:#92400e; } .sat-opt-tag { background:var(--bg); color:var(--muted); }
@media (prefers-color-scheme: dark) { .sat-req { background:#3b2f0e; color:#fbbf24; } }
.sat-stars { gap:4px; }
.sat-stars .sat-pick span { font-size:3rem; padding:0 3px; }
.sat-hint { min-height:1.5em; margin-top:6px; font-size:.95rem; font-weight:600; color:var(--muted); }
.sat-nps { gap:6px; }
.sat-nps .sat-pick span { min-width:46px; height:46px; font-size:1.05rem; transition:transform .12s, background .12s, color .12s, border-color .12s; }
.sat-nps .sat-pick:hover span { transform:translateY(-2px); }
.sat-nps .sat-pick input:checked + span { color:#fff; }
.sat-nps .nps-0 input:checked + span, .sat-nps .nps-1 input:checked + span, .sat-nps .nps-2 input:checked + span, .sat-nps .nps-3 input:checked + span, .sat-nps .nps-4 input:checked + span, .sat-nps .nps-5 input:checked + span, .sat-nps .nps-6 input:checked + span { background:#ef4444; border-color:#ef4444; }
.sat-nps .nps-7 input:checked + span, .sat-nps .nps-8 input:checked + span { background:#f59e0b; border-color:#f59e0b; }
.sat-nps .nps-9 input:checked + span, .sat-nps .nps-10 input:checked + span { background:#22c55e; border-color:#22c55e; }
.sat-ends { display:flex; justify-content:space-between; margin-top:8px; font-size:.82rem; color:var(--muted); font-weight:600; }
.sat-opts { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:8px; }
.sat-opt { margin:0; padding:12px 14px; }
.sat-form textarea { min-height:110px; padding:12px 14px; border-radius:12px; resize:vertical; font-size:1rem; }
.sat-count { text-align:right; font-size:.78rem; color:var(--muted); margin-top:4px; }
.sat-error { min-height:1.2em; margin:4px 0 8px; font-weight:600; }
.sat-send { width:100%; padding:15px 20px; font-size:1.1rem; font-weight:700; border-radius:12px; }
.sat-send:disabled { opacity:.7; cursor:progress; }
.sat-done { display:flex; align-items:center; gap:16px; padding:18px 20px; border-radius:12px; background:var(--ok-soft); }
.sat-check { flex:none; display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:12px; background:var(--ok); color:#fff; font-size:1.6rem; font-weight:800; }
.sat-done .sat-thanks { font-size:1.15rem; }
@media (max-width:520px) { .sat-live { padding:18px 16px 20px; } .sat-q { padding:14px 14px 12px; } .sat-stars .sat-pick span { font-size:2.5rem; } .sat-nps .sat-pick span { min-width:38px; height:42px; } .sat-nps { gap:4px; } .sat-label { font-size:1rem; } }
.live-side .live-docs > h2 { font-size:1.3rem; }
.event-when { text-align:center; margin:0 0 14px; font-weight:700; font-size:1.05rem; color:var(--muted); }

/* ===== Zone « Documents à télécharger » : un seul bloc en trois étapes ===== */
.docs-block { padding:0; overflow:hidden; }
.docs-block > form, .docs-block > .docs-step, .docs-block > .doc-list, .docs-block > .docs-empty { margin-left:24px; margin-right:24px; }
.docs-zone { margin-top:22px; }
.docs-step { display:flex; align-items:flex-start; gap:12px; margin-bottom:14px; }
.docs-step > div { flex:1 1 auto; min-width:0; }   /* le titre de l'étape prend toute la largeur à côté de sa pastille, replié ou non */
.docs-block > .docs-step { margin-top:22px; }
.docs-n { flex:none; display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; background:var(--accent); color:#fff; font-size:.85rem; font-weight:800; }
.docs-step strong { font-size:1.05rem; }
.docs-sep { height:1px; background:var(--line); margin:22px 0 0; }
.docs-zone-fields, .docs-add-fields { display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
.docs-add-fields { grid-template-columns:1.2fr 1fr 1fr; }
@media (max-width:760px) { .docs-zone-fields, .docs-add-fields { grid-template-columns:1fr; } }
.docs-zone-save { display:flex; justify-content:flex-end; align-items:center; gap:12px; margin-bottom:22px; }
.docs-zone-save .dirty-note { font-size:.85rem; color:#b45309; font-weight:600; }
.docs-add { margin-top:22px; margin-bottom:24px; }
.docs-empty { padding:6px 0 18px; }
.doc-list { margin-bottom:0; }
.doc-item { padding:14px 0; border-top:1px solid var(--line); }
.doc-item:first-child { border-top:0; padding-top:0; }
.doc-item.is-hidden { opacity:.75; }
.doc-item details { margin-top:8px; }
.docs-block .doc-list { padding-bottom:6px; }
.row-value { display:block; margin:2px 0 4px; font-size:1.05rem; font-weight:700; color:var(--accent); }

/* ===== Compte à rebours avant le live : bannière au-dessus du lecteur (le lecteur n'est pas recouvert) =====
   Aucune couleur imposée : tout vient de la carte, du texte et des traits du thème (voir lib/theme.php), donc la bannière
   reste lisible et assortie quelles que soient les couleurs choisies pour la plateforme (fond clair, sombre, coloré…). */
.countdown { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px 28px; margin:0 0 16px; padding:20px 26px;
  border-radius:12px; color:var(--ink); background:var(--card); border:1px solid var(--line); border-top:5px solid var(--accent);
  box-shadow:var(--shadow); transition:opacity .5s ease, height .6s ease, padding .6s ease, margin .6s ease, border-width .6s ease; }
.countdown.cd-out { opacity:0; height:0 !important; padding-top:0; padding-bottom:0; margin-bottom:0; border-width:0; }
.countdown.cd-live { justify-content:center; text-align:center; border-top-color:var(--ok); }
.countdown.cd-live .cd-text { color:var(--ok); }
.cd-head { min-width:0; }
.cd-text { font-size:clamp(1.15rem, 2.4vw, 1.9rem); font-weight:800; letter-spacing:-.01em; line-height:1.2; }
.cd-date { margin-top:4px; font-size:clamp(.85rem, 1.5vw, 1.05rem); font-weight:600; color:var(--muted); }
.cd-grid { display:flex; gap:clamp(8px, 1.4vw, 16px); }
.cd-grid[hidden], .cd-box[hidden] { display:none; }
.cd-box { min-width:clamp(62px, 8vw, 96px); padding:10px 8px 8px; text-align:center; border-radius:12px; background:var(--bg); border:1px solid var(--line-strong); }
.cd-box b { display:block; font-size:clamp(1.7rem, 4.2vw, 3rem); line-height:1.05; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-.02em; color:var(--ink); }
.cd-box span { display:block; margin-top:3px; font-size:.68rem; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); font-weight:700; }
@media (max-width:640px) { .countdown { flex-direction:column; align-items:stretch; text-align:center; padding:16px; } .cd-grid { justify-content:center; } }
.chip.chip-off { cursor:not-allowed; } .chip.chip-off span { opacity:.45; text-decoration:line-through; }
.pw-cell { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.pw-cell code { user-select:all; padding:4px 8px; border-radius:6px; background:var(--bg); border:1px solid var(--line); font-size:.9rem; }
.pager { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 16px; margin:14px 0; } .pager-nav { display:flex; flex-wrap:wrap; gap:6px; }
#inv-list { transition:opacity .15s; } #inv-list.is-loading { opacity:.5; pointer-events:none; }

/* ===== Super admin : modules qui s'excluent, présentés comme UN choix (boutons radio) ===== */
.choice-group { border-left:4px solid var(--accent); }
.choice-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.choice-head .module-title { margin:0; }
.choice-list { display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.choice { border:2px solid var(--line); border-radius:12px; background:var(--card); transition:border-color .15s, background .15s, box-shadow .15s; }
.choice:hover { border-color:var(--line-strong); }
.choice.is-on { border-color:var(--accent); background:var(--accent-soft); box-shadow:0 0 0 3px rgba(38,92,113,.12); }
.choice-main { position:relative; display:flex; align-items:flex-start; gap:14px; padding:16px 18px; cursor:pointer; margin:0; }
.choice-main input { position:absolute; opacity:0; pointer-events:none; }
.choice-dot { flex:none; width:22px; height:22px; margin-top:1px; border-radius:50%; border:2px solid var(--line-strong); background:var(--card); position:relative; transition:border-color .15s; }
.choice.is-on .choice-dot { border-color:var(--accent); }
.choice.is-on .choice-dot::after { content:""; position:absolute; inset:4px; border-radius:50%; background:var(--accent); }
.choice-main input:focus-visible + .choice-dot { outline:2px solid var(--accent); outline-offset:3px; }
.choice-body { display:flex; flex-direction:column; gap:2px; min-width:0; }
.choice-body strong { font-size:1.05rem; }
.choice-desc { color:var(--muted); font-size:.9rem; font-weight:400; }
.choice-extra { display:none; align-items:center; flex-wrap:wrap; gap:8px 18px; padding:0 18px 16px 54px; }
.choice.is-on .choice-extra { display:flex; }
.choice-extra .switch-row { margin:0; flex:1; min-width:240px; }
.choice-none .choice-main { padding:14px 18px; }
/* Assemblée générale : d'où vient la liste des membres (invitations ou inscriptions validées), choisi sous le mode */
.choice-sub { flex:1 0 100%; display:flex; flex-direction:column; gap:6px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--card); }
.choice-sub-title { font-size:.8rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }
.choice-sub-opt { display:flex; align-items:flex-start; gap:8px; margin:0; cursor:pointer; }
.choice-sub-opt input { margin-top:3px; }
.choice-sub-opt > span { display:flex; flex-direction:column; }
.choice-sub-opt .muted { font-size:.85rem; }
/* Inscriptions en assemblée générale : barre de la sélection, cases, boutons de la ligne */
.insc-bulk { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 10px; }
.insc-bulk .muted { margin-right:6px; }
th.pick, td.pick { width:34px; text-align:center; }
.row-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; margin:0; }
/* Live : question d'assemblée générale montrée à une personne dont l'inscription attend la validation */
.vote-pending { margin:6px 0 0; padding:10px 12px; border-radius:10px; background:#fef3c7; color:#92400e; font-weight:600; }
@media (prefers-color-scheme: dark) { .vote-pending { background:#3b2f0e; color:#fbbf24; } }
/* Assemblée générale : un bulletin par personne représentée (procurations), et le bloc « Vote par correspondance » du live */
.vote-ballot { margin:0 0 12px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; }
.vote-ballot-title { margin:0 0 6px; font-weight:700; }
.vote-same { margin:0 0 12px; }
.ag-mail-q { margin:0 0 14px; padding:12px 14px; border:1px solid var(--line); border-radius:10px; }
.ag-mail-q legend { padding:0 6px; font-weight:700; }
.ag-mail-q .vote-opt { display:inline-flex; margin-right:14px; }
.ag-proxy-form { display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px; }
.ag-proxy-form .field { margin:0; flex:1 1 240px; }
.ag-proxy-form select { width:100%; }
.choice-none .choice-dot { width:20px; height:20px; }
.choice-title { display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .choice-title .pill { margin-left:0; }

/* ===== RGPD (admin) : demandes, personnes ===== */
.rgpd-rights { margin:8px 0 12px; padding-left:20px; } .rgpd-rights li { margin:4px 0; }
.rgpd-request, .rgpd-person { border-left:4px solid var(--line-strong); }
.req-head { display:flex; align-items:center; flex-wrap:wrap; gap:6px 12px; }
.req-type { display:inline-block; padding:2px 11px; border-radius:10px; font-size:.78rem; font-weight:800; letter-spacing:.02em; background:var(--bg); color:var(--muted); }
.req-type.t-access { background:var(--accent-soft); color:var(--accent); }
.req-type.t-rectify { background:#fef3c7; color:#92400e; }
.req-type.t-erase { background:#fdecea; color:var(--danger); }
@media (prefers-color-scheme: dark) { .req-type.t-rectify { background:#3b2f0e; color:#fbbf24; } .req-type.t-erase { background:#3a1f1f; } }
.rgpd-request:has(.t-access) { border-left-color:var(--accent); } .rgpd-request:has(.t-rectify) { border-left-color:#f59e0b; } .rgpd-request:has(.t-erase) { border-left-color:var(--danger); }
.req-what { margin:10px 0 6px; }
.req-do { display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; margin-top:12px; }
.req-do.req-danger { padding-top:12px; border-top:1px dashed var(--line-strong); }

/* Réglages supplémentaires affichés dans la carte d'un module (ex. page publique RGPD) */
.module-extra { margin:0; padding:18px 24px 22px; border-top:1px dashed var(--line-strong); }
.module-extra-title { margin:0 0 4px; font-size:1rem; }
.rgpd-actions { display:grid; grid-template-columns:1fr 1fr; gap:14px 24px; margin-top:16px; } .rgpd-action p { margin:8px 0 0; font-size:.85rem; line-height:1.45; } @media (max-width:700px) { .rgpd-actions { grid-template-columns:1fr; } }
.rgpd-item { padding:12px 0; border-top:1px solid var(--line); } .rgpd-item:first-of-type { border-top:0; }
.topbar-event-link { display:flex; flex:none; }
.topbar-event { display:block; height:42px; width:auto; flex:none; }
@media (max-width:640px) { .topbar-event { height:30px; } }
.topbar-admin { padding-right:6px; font-size:1.05rem; color:var(--ink); font-weight:700; text-transform:uppercase; letter-spacing:.04em; }   /* « Admin » et « Super admin » : même style */
.topbar .tabs { padding:0; border:0; background:none; align-self:stretch; margin-left:6px; }
.topbar .tab { display:flex; align-items:center; padding:0 10px; margin-bottom:0; font-size:.9rem; }
.topbar .tab.active { border-bottom-color:transparent; box-shadow:inset 0 -2px 0 var(--accent); }
.topbar-title:has(.tabs) { align-self:stretch; overflow-x:auto; }
.topbar-right a { white-space:nowrap; }

.oxy-footer-event { height:28px; }
#oxy-footer .brand-sep { height:24px; }

@media (max-width:640px) { .oxy-footer-event { height:22px; } #oxy-footer .brand-sep { height:18px; } }

.live-hello { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.link-btn { background:none; border:0; padding:1px 6px; margin-left:-6px; border-radius:6px; color:var(--muted); font:inherit; font-size:.9em; line-height:1.2; opacity:.45; cursor:pointer; transition:opacity .15s, background .15s; }
.link-btn:hover, .link-btn:focus-visible { opacity:1; color:var(--accent); background:var(--accent-soft, rgba(38,92,113,.1)); }
.nick-form { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 14px; }
.nick-form[hidden], .link-btn[hidden] { display:none; }
.nick-form label { font-weight:600; font-size:.9rem; }
.nick-form input { max-width:240px; margin:0; }
.nick-msg { color:#b91c1c; font-size:.85rem; }
.sat-popup-box .vote-title { padding-right:84px; }
.vote-pill.sat-pill { left:auto; right:10px; }
.vote-pill.sat-pill.floating { right:14px; }
@media (max-width:520px) { .sat-popup { align-items:flex-start; } }

/* ===== Capacité du serveur (super admin) ===== */
.cap-card { border-left:4px solid #dc2626; }
.cap-card.cap-l0 { border-left-color:#dc2626; }
.cap-reminder { margin:0 0 14px; padding:10px 14px; border-radius:12px; background:#fdecea; color:#b42318; line-height:1.5; }
.cap-stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px; margin-bottom:10px; }
.cap-stats > div { padding:12px 14px; border-radius:12px; border:1px solid var(--line); background:var(--bg); }
.cap-stats .n { display:block; font-size:1.7rem; font-weight:800; line-height:1.1; }
.cap-stats .l { display:block; font-size:.85rem; color:var(--muted); }
.cap-stats .cap-l0 .n { color:var(--ok); }
.cap-stats .cap-l1 { border-color:#f59e0b; background:#fffbeb; } .cap-stats .cap-l1 .n { color:#b45309; }
.cap-stats .cap-l2 { border-color:#dc2626; background:#fdecea; } .cap-stats .cap-l2 .n { color:#b42318; }
.cap-banner { display:block; padding:10px 14px; margin-bottom:16px; border-radius:12px; font-weight:600; text-decoration:none; }
.cap-banner.cap-l1 { background:#fffbeb; color:#92400e; border:1px solid #f59e0b; }
.cap-banner.cap-l2 { background:#dc2626; color:#fff; }

/* Téléphone : la question de vote / le rappel du questionnaire s'affiche EN DESSOUS du lecteur (dans le même bloc), pas par-dessus :
   la zone du lecteur est trop petite pour contenir la carte. La pastille « réduit » reste sur le lecteur. */
@media (max-width:520px) {
  .vote-overlay:not(.floating), .sat-popup:not(.floating) { position:static; padding:12px 0 0; background:transparent; pointer-events:auto; }
  .vote-overlay:not(.floating) .vote-box, .sat-popup:not(.floating) .sat-popup-box { max-width:none; max-height:none; overflow:visible; border:1px solid var(--line-strong); box-shadow:0 4px 16px rgba(0,0,0,.18); }
}

/* ===== Mode démonstration (bac à sable) ===== */
.demo-banner { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:10px 14px; margin-bottom:16px; border-radius:12px; background:#fff7ed; border:1px solid #fdba74; color:#9a3412; font-weight:600; font-size:.92rem; }
.demo-banner form { margin:0; }
.demo-intro h1 { margin-top:0; font-size:1.5rem; }
.demo-intro ol { margin:8px 0 0; padding-left:22px; line-height:1.7; }
.demo-split { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.demo-split section { min-width:0; }
.demo-split h2 { font-size:1.05rem; margin:0 0 8px; }
.demo-split iframe { width:100%; height:78vh; min-height:520px; border:1px solid var(--line-strong); border-radius:12px; background:#fff; }
.demo-links { text-align:center; color:var(--muted); margin:16px 0 0; }
@media (max-width:900px) { .demo-split { grid-template-columns:1fr; } .demo-split iframe { height:70vh; min-height:420px; } }
body.demo main { max-width:1500px; }
body.demo .demo-intro { max-width:900px; margin-left:auto; margin-right:auto; }
body.demo .demo-banner { max-width:900px; margin-left:auto; margin-right:auto; }

/* ===== Trombinoscope (intervenants) ===== */
.trombi-avatar { width:56px; height:56px; border-radius:12px; object-fit:cover; flex:none; background:var(--line); }
.trombi-initials { display:inline-flex; align-items:center; justify-content:center; background:var(--accent-soft); color:var(--accent); font-weight:800; font-size:1.1rem; }
.trombi-line { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.trombi-who { display:flex; flex-direction:column; min-width:0; flex:1; line-height:1.3; }
.trombi-who strong { font-size:1.05rem; }
.trombi-actions { margin:0; display:flex; gap:8px; flex-wrap:wrap; }
.trombi-stage.is-on, .trombi-row.is-on { border-left:4px solid var(--accent); }
.trombi-now { border-left:4px solid var(--accent); }
.trombi-now-label { font-size:.75rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin-bottom:8px; }
.trombi-now .trombi-avatar { width:72px; height:72px; }
.trombi-now .trombi-who strong { font-size:1.25rem; }
.trombi-dir h2 { margin:0 0 14px; }
.trombi-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:12px; }
.trombi-tile { display:flex; align-items:center; gap:12px; padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:var(--bg); }
.trombi-tile.on { border-color:var(--accent); background:var(--accent-soft); }
.trombi-tile .trombi-avatar { width:46px; height:46px; }
.trombi-tile .trombi-who strong { font-size:.95rem; }
.trombi-tile .trombi-who .muted { font-size:.8rem; }
/* Bandeau sur la vidéo : en bas à gauche, au-dessus de la barre de commandes du lecteur, sans jamais bloquer les clics. */
.trombi-lower { position:absolute; left:14px; bottom:64px; z-index:4; display:flex; align-items:center; gap:12px; max-width:calc(100% - 28px); padding:10px 16px 10px 10px; border-radius:12px; background:rgba(10,15,25,.82); color:#fff; pointer-events:none; line-height:1.3; animation:vote-in .25s ease-out; }
.trombi-lower .trombi-avatar { width:48px; height:48px; }
.trombi-lower .trombi-who .muted { color:rgba(255,255,255,.78); font-size:.85rem; }
@media (max-width:520px) { .trombi-lower { left:8px; bottom:44px; padding:6px 12px 6px 6px; } .trombi-lower .trombi-avatar { width:38px; height:38px; } .trombi-lower .trombi-who strong { font-size:.9rem; } }
/* Page animateur : choix de l'orateur en scène (cartes larges, faciles à toucher sur tablette). */
.host-speakers { margin:0 0 18px; border:1px solid var(--line); border-radius:12px; background:var(--card); }
.host-speakers-head { display:flex; align-items:center; gap:12px; width:100%; padding:12px 14px; border:0; background:none; color:var(--ink); font:inherit; text-align:left; cursor:pointer; }
.host-speakers-help { flex:1; min-width:0; font-size:calc(.9rem * var(--host-scale, 1)); line-height:1.35; }
.host-speakers-now { flex:none; max-width:38%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font-size:calc(.95rem * var(--host-scale, 1)); }
.host-speakers-now.is-on { color:var(--accent); font-weight:700; }
.host-speakers-caret { flex:none; color:var(--muted); transition:transform .15s; }
.host-speakers.is-collapsed .host-speakers-caret { transform:rotate(-90deg); }
.host-speakers-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:10px; padding:0 14px 14px; }
.host-speakers.is-collapsed .host-speakers-grid, .host-speakers.is-collapsed .host-speakers-dir { display:none; }
.host-speakers-dir { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:0 14px 14px; padding-top:12px; border-top:1px solid var(--line); font-size:calc(.9rem * var(--host-scale, 1)); }
.host-speakers-dir button { min-height:44px; }
.host-dir-state { font-weight:600; }
.host-dir-state::before { content:'●'; margin-right:8px; color:var(--muted); }   /* gris : liste masquée aux visiteurs */
.host-dir-state.is-on::before { color:#16a34a; }   /* vert : liste visible des visiteurs */
.host-speaker.read-only, .host-speaker.read-only:disabled { cursor:default; color:inherit; opacity:1; }
.host-speaker.read-only:active { transform:none; }
.host-speakers.no-stage .host-speakers-grid, .host-speakers.no-stage .host-speakers-group, .host-speakers.no-stage .host-speakers-now { display:none; }   /* seul le contact de la liste reste, sous un en-tête qui se replie */
.trombi-dir-row { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-top:14px; }
.host-speaker { position:relative; display:flex; align-items:center; gap:12px; min-height:72px; padding:8px 12px 8px 8px; border:2px solid var(--line-strong); border-radius:12px; background:var(--bg); color:var(--ink); text-align:left; cursor:pointer; font:inherit; font-size:calc(.95rem * var(--host-scale, 1)); transition:border-color .12s, background .12s, transform .08s; }
.host-speaker:active { transform:scale(.985); }
.host-speaker.is-sending { opacity:.6; }
.host-speaker.on { border-color:var(--accent); background:var(--accent-soft); }
.host-speaker .trombi-avatar { width:46px; height:58px; border-radius:12px; font-size:.95rem; }   /* portrait rectangulaire */
.host-speaker-who { display:flex; flex-direction:column; gap:2px; min-width:0; line-height:1.25; }
.host-speaker-who strong { font-size:calc(1rem * var(--host-scale, 1)); }
.host-speaker-role { color:var(--muted); font-size:calc(.82rem * var(--host-scale, 1)); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.host-speaker-badge { position:absolute; top:6px; right:8px; color:var(--accent); font-size:calc(.7rem * var(--host-scale, 1)); font-weight:800; letter-spacing:.03em; text-transform:uppercase; }
.host-speaker-none { justify-content:center; border-style:dashed; color:var(--muted); font-weight:700; }
.host-speaker-none.on { color:var(--accent); border-style:solid; }
@media (max-width:560px) { .host-speakers-grid { grid-template-columns:1fr; } }

/* Barre d'en-tête de l'admin client dans un cadre étroit (essai en démonstration, tablette) : les onglets passent sur leur propre ligne, tous visibles */
@media (max-width:1000px) {
  .topbar:has(.tabs) { height:auto; flex-wrap:wrap; padding:8px 16px; row-gap:4px; }
  .topbar-title:has(.tabs) { flex-wrap:wrap; overflow:visible; flex:1 1 100%; align-self:auto; }
  .topbar .tabs { flex:1 1 100%; flex-wrap:wrap; margin:0; align-self:auto; }
  .topbar .tab { padding:8px 10px; }
  .topbar:has(.tabs) .topbar-right { flex:1 1 100%; justify-content:flex-end; }
}

/* Droit à l'image : fenêtre d'information du public sur le live, page de signature, signature tracée */
.img-modal { position:fixed; inset:0; z-index:1400; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(8,12,20,.6); }
.img-modal-box { width:100%; max-width:480px; max-height:100%; overflow:auto; padding:24px; border-radius:12px; background:var(--card); color:var(--ink); box-shadow:0 12px 40px rgba(0,0,0,.4); line-height:1.5; animation:vote-in .25s ease-out; }
.img-modal-box h2 { margin:0 0 10px; font-size:1.25rem; }
.img-modal-box p { margin:0 0 12px; }
.img-modal-box button { width:100%; }
.img-page .img-h3 { margin:16px 0 4px; font-size:1rem; }
.img-page p { line-height:1.5; }
.img-dl { display:grid; grid-template-columns:minmax(110px, 190px) 1fr; gap:6px 16px; margin:8px 0 12px; }
.img-dl dt { color:var(--muted); font-size:.85rem; font-weight:600; }
.img-dl dd { margin:0; }
@media (max-width:560px) { .img-dl { grid-template-columns:1fr; gap:0; } .img-dl dd { margin-bottom:8px; } }
.img-checks { display:grid; gap:8px; margin:12px 0 4px; }
.img-uses { list-style:none; padding:0; margin:10px 0; display:grid; gap:6px; }
.img-tick { display:inline-block; width:22px; text-align:center; font-weight:700; color:var(--muted); }
.img-tick.on { color:#16803c; }
.sig-pad { margin:10px 0 14px; }
.sig-pad canvas { display:block; width:100%; max-width:480px; aspect-ratio:3 / 1; border:1px dashed var(--line-strong); border-radius:12px; background:#fff; touch-action:none; cursor:crosshair; }
.sig-row { display:flex; justify-content:space-between; align-items:center; gap:10px; max-width:480px; margin-top:6px; font-size:.85rem; }

/* Vote en salle : la part de la salle dans les barres (2e couleur, réglable dans le module) et le point de légende */
.v-bar i { display:flex; justify-content:flex-end; }
.v-bar i u { display:block; height:100%; background:var(--room, #f59e0b); text-decoration:none; }
.room-dot { display:inline-block; width:10px; height:10px; margin-right:5px; border-radius:3px; background:var(--room, #f59e0b); vertical-align:baseline; }
.v-room-note { color:var(--muted); font-size:.9em; }
.v-split { display:block; margin-top:2px; font-size:.85em; font-weight:700; color:var(--ink); }
.v-split .sw { display:inline-block; width:9px; height:9px; margin:0 4px 0 8px; border-radius:2px; }
.v-split .sw:first-child { margin-left:0; }
.sw-remote { background:var(--accent); }
.sw-room { background:var(--room, #f59e0b); }
.foot-sw, .muted .sw { display:inline-block; width:9px; height:9px; border-radius:2px; vertical-align:baseline; }
.v-num .v-split { display:block; text-align:right; }
.v-detail { grid-column:2; display:flex; flex-wrap:wrap; gap:2px 16px; margin-top:-4px; font-size:.85rem; color:var(--muted); }
.v-chip { display:inline-flex; align-items:center; gap:5px; }
.v-chip b { color:var(--ink); }
.v-chip .sw { display:inline-block; width:10px; height:10px; border-radius:3px; }
@media (max-width:520px) { .v-detail { grid-column:1 / -1; order:4; } }

/* ===== Densité compacte de l'administration (proposition) : texte 14 px, marges réduites, réglages sur deux colonnes ===== */
body.admin { font-size:14px; line-height:1.45; }
body.admin main { max-width:1080px; margin:16px auto 56px; }
body.admin h2 { margin:20px 0 2px; font-size:1.05rem; }
body.admin h2 + .section-sub { margin:0 0 8px; }
body.admin h3 { font-size:.95rem; }
body.admin .section-sub, body.admin .muted { font-size:.82rem; }
body.admin .card { padding:12px 16px; margin-bottom:10px; }
body.admin .field { margin-bottom:9px; }
body.admin .field > label { margin-bottom:3px; font-size:.82rem; }
body.admin input[type=text], body.admin input[type=email], body.admin input[type=password], body.admin input[type=number], body.admin input[type=url], body.admin input[type=datetime-local], body.admin input:not([type]), body.admin select, body.admin textarea { padding:6px 10px; }
body.admin button, body.admin .button { padding:6px 13px; font-size:.86rem; }
body.admin .small { padding:4px 10px; font-size:.8rem; }
body.admin .notice { padding:8px 12px; margin-bottom:10px; }
body.admin .stat { padding:9px 12px; }
body.admin .cards { gap:10px; margin-bottom:10px; }
body.admin table.t th, body.admin table.t td { padding-top:6px; padding-bottom:6px; }
/* Réglages : lignes plus basses, deux colonnes sur grand écran */
body.admin .settings .card { padding:0 16px; }
body.admin .row { padding:8px 0; gap:16px; }
body.admin .row-help { font-size:.78rem; margin-top:0; }
body.admin .group-title { margin-top:14px; }
body.admin input.toggle { width:36px; height:20px; border-radius:10px; }
body.admin input.toggle::after { top:2px; left:2px; width:16px; height:16px; }
body.admin input.toggle:checked::after { left:18px; }
body.admin .row-control input[type=number] { width:90px; }
body.admin .row-control select { min-width:150px; }
@media (min-width:1000px) {
  body.admin .settings .card { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:40px; }
  body.admin .settings .card .row.stack, body.admin .settings .card > :not(.row) { grid-column:1 / -1; }
}
/* Modules du super admin : titre et interrupteurs plus compacts */
body.admin .module-top { padding:12px 16px 2px; }
body.admin .module-title { font-size:1.05rem; }
body.admin .module-desc { margin-top:3px; max-width:none; }
body.admin .module-switches { margin-top:8px; padding:0 16px; }
body.admin .module-switches .row { padding:7px 0; }
body.admin .category-title { margin:22px 0 8px; }
/* Réglages d'un module : une ligne repliée en haut de la page, ouverte à la demande */
.settings-fold { margin:0 0 10px; border:1px solid var(--line); border-radius:12px; background:var(--card); }
.settings-fold > summary { cursor:pointer; padding:8px 16px; font-weight:600; color:var(--muted); list-style:none; display:flex; align-items:center; gap:8px; }
.settings-fold > summary::before { content:'⚙'; }
.settings-fold > summary::after { content:'▾'; margin-left:auto; transition:transform .15s; }
.settings-fold[open] > summary::after { transform:rotate(180deg); }
.settings-fold[open] > summary { border-bottom:1px solid var(--line); color:var(--ink); }
.settings-fold > form { padding:6px 12px 0; }
.settings-fold > summary.fold-plus::before { content:'＋'; color:var(--accent); font-weight:800; }
.settings-fold > summary.fold-cog::before { content:'⚙'; }
.settings-fold > form.card { border:0; box-shadow:none; margin:0; padding:10px 14px; }
.settings-fold .card { box-shadow:none; }
/* Super admin : onglets et modules en lignes compactes */
.sa-tabs { display:flex; gap:4px; margin:6px 0 4px; border-bottom:1px solid var(--line); }
.sa-tab { background:none; border:0; border-bottom:2px solid transparent; border-radius:0; color:var(--muted); padding:8px 14px; margin-bottom:-1px; font-weight:700; }
.sa-tab:hover { color:var(--ink); background:none; filter:none; }
.sa-tab.active { color:var(--accent); border-bottom-color:var(--accent); }
.sa-pane[hidden] { display:none; }
.module-row { display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; padding:9px 14px; margin-bottom:6px; background:var(--card); border:1px solid var(--line); border-left:4px solid var(--line-strong); border-radius:12px; }
.module-row.is-on { border-left-color:var(--accent); }
.module-row.is-off .mr-title strong { color:var(--muted); }
.mr-main { flex:1 1 420px; min-width:0; }
.mr-title strong { font-size:.98rem; }
.mr-title .muted { margin-left:8px; }
.mr-more summary { cursor:pointer; color:var(--accent); font-size:.8rem; display:inline-block; }
.mr-more .module-desc { margin:4px 0 2px; max-width:80ch; }
.mr-switches { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.tg { display:inline-flex; align-items:center; gap:7px; cursor:pointer; font-weight:600; font-size:.84rem; white-space:nowrap; }
.tg input.toggle:disabled { opacity:.4; cursor:not-allowed; }
.choice-group .choice-desc { font-size:.84rem; }
/* Mode d'accès : choix plus serrés */
body.admin .choice-list { gap:6px; margin-top:8px; }
body.admin .choice { border-width:1px; }
body.admin .choice.is-on { box-shadow:none; border-width:2px; }
body.admin .choice-main { padding:9px 12px; gap:10px; align-items:center; }
body.admin .choice-dot { width:18px; height:18px; margin-top:0; }
body.admin .choice.is-on .choice-dot::after { inset:3px; }
body.admin .choice-body strong { font-size:.95rem; }
body.admin .choice-desc { font-size:.8rem; }
body.admin .choice-extra { padding:0 12px 9px 40px; gap:6px 16px; }
body.admin .choice-none .choice-main { padding:9px 12px; }
body.admin .choice-group { padding:12px 14px; }
/* Navigation de l'admin client : onglets principaux dans l'en-tête, modules du groupe sur une 2e ligne */
.subtabs { display:flex; flex-wrap:wrap; gap:2px; padding:0 24px; background:var(--card); border-bottom:1px solid var(--line); }
.subtab { padding:7px 12px; color:var(--muted); text-decoration:none; font-weight:600; font-size:.84rem; border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap; }
.subtab:hover { color:var(--ink); }
.subtab.active { color:var(--accent); border-bottom-color:var(--accent); }
/* Page Régie : cartes en grille */
.regie-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(420px, 1fr)); gap:10px; align-items:start; }
.regie-grid .card { margin:0; }
.regie-grid .pw-line input[readonly] { min-width:0; }
/* Live participant : annuaire des intervenants repliable, cartes un peu plus serrées */
.trombi-dir > summary { cursor:pointer; font-weight:700; list-style:none; display:flex; align-items:center; gap:8px; }
.trombi-dir > summary::after { content:'▾'; margin-left:auto; color:var(--muted); transition:transform .15s; }
.trombi-dir[open] > summary::after { transform:rotate(180deg); }
.trombi-dir[open] > summary { margin-bottom:10px; }
.trombi-dir:not([open]) { padding-top:10px; padding-bottom:10px; }
body.live .card { padding:16px 18px; margin-bottom:12px; }
/* « Prêt pour l'événement ? » */
.ready-head { display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.ready-head .pill { margin-left:0; }
.ready-list { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:4px 24px; }
.ready-list li { font-size:.88rem; }
.ready-list li.ok { color:var(--muted); }
.ready-list li.ok span { color:var(--ok); font-weight:800; }
.ready-list li.todo span { color:#b45309; font-weight:800; }
.ready-list li.todo a { font-weight:600; }
.nav-badge { display:inline-block; min-width:18px; padding:0 6px; margin-left:4px; border-radius:9px; background:#dc2626; color:#fff; font-size:.72rem; font-weight:800; line-height:18px; text-align:center; }
.regie-note { padding:8px 14px; font-size:.88rem; }

/* ===== Retouches suite aux essais : fonds teintés, navigation lisible, pages entières compactes ===== */
/* Zones teintées : chaque groupe de réglages a sa couleur très claire */
.tone-1 { background:color-mix(in srgb, #265c71 5%, var(--card)); border-color:color-mix(in srgb, #265c71 16%, var(--line)); }
.tone-2 { background:color-mix(in srgb, #16a34a 6%, var(--card)); border-color:color-mix(in srgb, #16a34a 16%, var(--line)); }
.tone-3 { background:color-mix(in srgb, #f59e0b 7%, var(--card)); border-color:color-mix(in srgb, #f59e0b 20%, var(--line)); }
.tone-4 { background:color-mix(in srgb, #6b7280 5%, var(--card)); border-color:color-mix(in srgb, #6b7280 16%, var(--line)); }
.tone-1 .row, .tone-2 .row, .tone-3 .row, .tone-4 .row { border-bottom-color:color-mix(in srgb, currentColor 8%, transparent); }
/* Réglages : champs texte sur deux colonnes, textes longs et images sur toute la largeur */
body.admin .settings .card .row.stack:not(.wide) { grid-column:auto; }
body.admin .row.stack { gap:5px; }
body.admin .settings .card { padding:2px 14px; }
body.admin .group-title { margin:12px 0 4px; font-size:.72rem; }
body.admin .settings .card .row { padding:7px 0; }
body.admin textarea { margin-bottom:2px; min-height:0; }
body.admin .savebar { padding:8px 0; margin-top:0; }
body.admin .card { padding:10px 14px; margin-bottom:8px; }
body.admin h2 { margin:16px 0 2px; }
body.admin .toolbar { padding:8px 12px; margin:0 0 8px; }
body.admin .stat { padding:7px 12px; }
body.admin .stat .n { font-size:1.35rem; }
button.icon, .button.icon { padding:3px 8px; min-width:28px; }

/* Navigation : onglets principaux pleins, deuxième ligne d'une autre teinte avec le nom du groupe */
.topbar .tab { border-radius:8px; margin:0 2px; padding:0 12px; }
.topbar .tab.active { background:var(--accent-soft); box-shadow:none; color:var(--accent); }
.topbar .tab.has-sub::after { content:'▾'; margin-left:5px; font-size:.7em; opacity:.7; }
.subtabs { align-items:center; gap:4px; padding:5px 24px; background:color-mix(in srgb, var(--accent) 9%, var(--card)); border-bottom:1px solid color-mix(in srgb, var(--accent) 22%, var(--line)); }
.subtabs-label { font-size:.7rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--accent); padding-right:12px; margin-right:6px; border-right:1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.subtab { border:0; border-radius:8px; padding:5px 12px; margin:0; }
.subtab:hover { background:color-mix(in srgb, var(--accent) 12%, transparent); }
.subtab.active { background:var(--accent); color:#fff; }
.subtab.active .nav-badge { background:#fff; color:#dc2626; }
/* Recherche et aide dans l'en-tête */
.adm-search { position:relative; }
.adm-search input { width:200px; padding:5px 10px; font-size:.84rem; border-radius:10px; }
#adm-res { position:absolute; right:0; top:calc(100% + 4px); width:300px; margin:0; padding:4px; list-style:none; background:var(--card); border:1px solid var(--line-strong); border-radius:12px; box-shadow:0 8px 28px rgba(0,0,0,.18); z-index:50; }
#adm-res li a { display:block; padding:7px 10px; border-radius:8px; color:var(--ink); text-decoration:none; font-size:.86rem; font-weight:600; }
#adm-res li a:hover, #adm-res li a.on { background:var(--accent-soft); color:var(--accent); }
#adm-res li.none { padding:8px 10px; color:var(--muted); font-size:.84rem; }
.adm-help { position:relative; }
#adm-help-pop { position:absolute; right:0; top:calc(100% + 6px); width:340px; padding:12px 14px; background:var(--card); border:1px solid var(--line-strong); border-radius:12px; box-shadow:0 8px 28px rgba(0,0,0,.18); z-index:50; font-size:.84rem; line-height:1.5; }
#adm-help-pop p { margin:6px 0 0; color:var(--muted); }
@media (max-width:1100px) { .adm-search input { width:130px; } }

/* Info-bulles sur les boutons qui demandent une explication */

/* Questions de vote : fond selon l'état, puces sous la question */
.vote-card-admin.is-live { background:color-mix(in srgb, #16a34a 9%, var(--card)); border-color:color-mix(in srgb, #16a34a 35%, var(--line)); }
.vote-card-admin.is-draft { background:color-mix(in srgb, #64748b 6%, var(--card)); }
.vote-card-admin.is-closed { background:color-mix(in srgb, #f59e0b 8%, var(--card)); border-color:color-mix(in srgb, #f59e0b 30%, var(--line)); }
.vote-bullets { margin:6px 0 10px; padding:0 0 0 26px; list-style:none; }
.vote-bullets li { position:relative; padding:2px 0; color:var(--ink); }
.vote-bullets li::before { content:''; position:absolute; left:-16px; top:.72em; width:7px; height:7px; border-radius:2px; background:var(--muted); }
.vote-card-admin.is-live .vote-bullets li::before { background:#16a34a; }
.vote-card-admin.is-closed .vote-bullets li::before { background:#d97706; }
.v-bul { display:inline-block; width:7px; height:7px; margin:0 8px 1px 14px; border-radius:2px; background:var(--muted); }
.vote-card-admin.is-live .v-bul { background:#16a34a; }
.vote-card-admin.is-closed .v-bul { background:#d97706; }
.vote-card-admin .v-bar { background:color-mix(in srgb, currentColor 10%, transparent); }

/* Questions du public : la réponse n'occupe de la place que lorsqu'on la rédige */
.qa-saved { margin:0 0 8px; padding:6px 10px; border-left:3px solid var(--accent); background:var(--accent-soft); border-radius:0 8px 8px 0; font-size:.9rem; white-space:pre-wrap; }
.qa-mod { padding:10px 14px; }
.qa-mod .qa-body { font-size:.98rem; margin:2px 0 8px; }
.qa-mod textarea { min-height:60px; }

/* Page Plateforme : identité, couleurs, documents */
.gen-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 28px; align-items:start; }
.gen-grid .field { margin-bottom:8px; }
.gen-grid .muted { display:block; margin-top:2px; }
.gen-toggles .row { padding:6px 0; border:0; }
.gen-logo { display:flex; align-items:center; gap:12px; }
.gen-logo .logo-preview img { max-height:40px; max-width:140px; padding:3px; }
@media (max-width:800px) { .gen-grid { grid-template-columns:1fr; } }
.theme-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 28px; }
.theme-grid .theme-row { padding:6px 0; gap:10px; }
.theme-grid .row-help { display:none; }
.theme-grid .theme-controls { gap:6px; }
.theme-grid .theme-state { display:none; }
.theme-preview { max-width:380px; }
@media (max-width:800px) { .theme-grid { grid-template-columns:1fr; } }
.dm-zone-fields { display:grid; grid-template-columns:1fr 1.4fr auto; gap:0 12px; align-items:end; }
.dm-zone-fields .field { margin-bottom:6px; }
.dm-zone-save { margin-bottom:6px; }
.dm-list { margin:4px 0 6px; border-top:1px solid color-mix(in srgb, #f59e0b 22%, var(--line)); }
.dm-item { padding:6px 0; border-bottom:1px solid color-mix(in srgb, #f59e0b 16%, var(--line)); }
.dm-item.is-hidden { opacity:.7; }
.dm-row { display:flex; align-items:center; gap:10px; }
.dm-row .doc-ext { height:26px; min-width:40px; font-size:.7rem; border-radius:8px; }
.dm-info { flex:1; min-width:0; display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 10px; }
.dm-info strong { font-size:.92rem; }
.dm-info .muted { font-size:.78rem; }
.dm-actions { display:flex; gap:4px; margin:0; }
.dm-edit { display:grid; grid-template-columns:1fr 1fr 1fr auto; gap:0 10px; align-items:end; padding:8px 0 2px 50px; }
.dm-edit[hidden] { display:none; }
.dm-edit .field { margin-bottom:6px; }
.dm-add { display:grid; grid-template-columns:1.3fr 1fr 1fr auto; gap:0 10px; align-items:end; margin-top:8px; }
.dm-add .field { margin-bottom:6px; }
.dm-add-btn { margin-bottom:6px; }
.dm-empty { margin:4px 0 8px; }
@media (max-width:800px) { .dm-zone-fields, .dm-edit, .dm-add { grid-template-columns:1fr; } .dm-edit { padding-left:0; } }

body.admin .settings .card.gen-grid > * { grid-column:auto; }
body.admin .settings .card.gen-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.dm-hint { grid-column:1 / -1; margin:0 0 4px; font-size:.74rem; }
.res-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px 10px; align-items:start; }
.res-grid > .card { margin:0; }
.res-grid > p { grid-column:1 / -1; }
@media (max-width:900px) { .res-grid { grid-template-columns:1fr; } }
body.admin .v-row { padding:0; gap:2px 12px; }

/* ===== Retouches 2 : menu latéral aux couleurs du logo, valeurs par défaut en grisé, blocs de la page Plateforme ===== */
/* Couleurs du logo OxygenEvent : bleu foncé #265c71, bleu clair #5797bb */
:root { --logo-dark:#265c71; --logo-mid:#326275; --logo-light:#5797bb; --logo-sky:#8cc4e3; }

/* Valeur appliquée quand le champ reste vide : affichée en grisé */
body.admin input::placeholder, body.admin textarea::placeholder { color:var(--muted); opacity:.55; }

/* Mise en page à menu latéral */
.burger { display:inline-flex; flex-direction:column; justify-content:center; gap:4px; width:36px; height:36px; padding:0 8px; margin-right:4px; background:var(--logo-dark); border:0; border-radius:10px; cursor:pointer; flex:none; }
.burger:hover { background:var(--logo-mid); filter:none; }
.burger span { display:block; height:2px; border-radius:1px; background:#fff; }
.shell { display:flex; align-items:flex-start; min-height:calc(100vh - 56px); }
.shell-main { flex:1 1 auto; min-width:0; }
.side { flex:none; width:236px; position:sticky; top:0; align-self:flex-start; max-height:100vh; overflow-y:auto; padding:14px 10px 24px; background:var(--logo-dark); color:#fff; min-height:calc(100vh - 56px); }
.side nav { display:flex; flex-direction:column; gap:2px; }
.side a { text-decoration:none; }
.side-top { display:block; padding:9px 12px; border-radius:10px; color:#e7f1f7; font-weight:700; font-size:.92rem; }
.side-top:hover, .side-link:hover { background:rgba(255,255,255,.1); color:#fff; }
.side-top.active, .side-link.active { background:var(--logo-light); color:#fff; }
.side-group { margin-top:10px; }
.side-head { display:flex; align-items:center; justify-content:space-between; width:100%; padding:6px 12px; background:none; border:0; border-radius:8px; color:var(--logo-sky); font-size:.7rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; text-align:left; cursor:pointer; }
.side-head:hover { background:rgba(255,255,255,.06); color:#fff; filter:none; }
.side-head::after { content:'▾'; font-size:.9em; transition:transform .15s; }
.side-group.closed .side-head::after { transform:rotate(-90deg); }
.side-group.closed .side-items { display:none; }
.side-items { display:flex; flex-direction:column; gap:1px; margin:2px 0 0 6px; padding-left:8px; border-left:1px solid rgba(140,196,227,.35); }
.side-link { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:7px 12px; border-radius:8px; color:#d6e8f2; font-weight:600; font-size:.88rem; }
.side-link .nav-badge, .side-top .nav-badge { background:#fff; color:#dc2626; }
body.side-collapsed .side { display:none; }
.shell .sa-tabs { display:none; }
@media (max-width:900px) {
  .side { position:fixed; z-index:40; top:56px; left:0; bottom:0; max-height:none; box-shadow:0 0 40px rgba(0,0,0,.35); }
  .shell { display:block; }
}

/* Super admin : module actif en vert */
.module-row { transition:background .6s, box-shadow .6s; }
.module-row.is-on { background:color-mix(in srgb, #16a34a 11%, var(--card)); border-color:color-mix(in srgb, #16a34a 38%, var(--line)); border-left-color:#16a34a; }
.module-row.flash { box-shadow:0 0 0 3px color-mix(in srgb, var(--logo-light) 60%, transparent); }

/* Réglages d'un groupe en liste : une seule colonne, les uns sous les autres */
body.admin .settings .card.card-list { display:block; }

/* Page Plateforme : blocs séparés par des traits */
.gen-sep { border:0; border-top:1px solid color-mix(in srgb, #265c71 16%, var(--line)); margin:10px 0; }
.gen-card { padding:10px 16px; }
.gen-2 { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0 36px; align-items:start; }
.gen-card .field { margin-bottom:6px; }
.gen-card .muted { display:block; margin-top:2px; }
.gen-card .gen-toggles .row { padding:5px 0; border:0; }
.gen-count .row { padding:5px 0; border:0; }
.gen-count .field { max-width:520px; margin:4px 0 2px 0; }
@media (max-width:800px) { .gen-2 { grid-template-columns:1fr; } }
/* Couleurs : liste verticale à gauche, aperçu à droite */
.theme-wrap { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:0 36px; align-items:start; }
.theme-wrap .theme-grid { display:block; }
.theme-wrap .theme-grid .row-help { display:block; }
.theme-wrap .theme-row { padding:7px 0; border-bottom:1px solid color-mix(in srgb, #16a34a 14%, var(--line)); }
.theme-wrap .theme-row:last-child { border-bottom:0; }
.theme-wrap .theme-side { position:sticky; top:12px; margin:8px 0 0; }
.theme-wrap .theme-preview { max-width:none; }
@media (max-width:900px) { .theme-wrap { grid-template-columns:1fr; } }
/* Documents : un trait avant l'ajout */
.dm-add { border-top:1px solid color-mix(in srgb, #f59e0b 28%, var(--line)); padding-top:12px; margin-top:12px; }
.burger { align-items:stretch; }
.burger span { width:100%; min-height:2px; }
.topbar .burger { padding:0; box-sizing:border-box; align-items:center; }
.topbar .burger span { width:18px; }

/* Questions déjà traitées par l'animateur : fond vert clair, textes adoucis */
.qa-mod.is-presented { background:color-mix(in srgb, #16a34a 9%, var(--card)); border-color:color-mix(in srgb, #16a34a 30%, var(--line)); border-left-color:#16a34a; }
.qa-mod.is-presented .qa-body { color:color-mix(in srgb, var(--ink) 62%, var(--card)); font-weight:500; }
.qa-mod.is-presented .qa-head { color:color-mix(in srgb, var(--ink) 55%, var(--card)); }
.qa-mod.is-presented .qa-head strong { color:color-mix(in srgb, var(--ink) 70%, var(--card)); }

/* « Tous les réglages » dépliés sous le bloc */
.set-toggle::after { content:'▾'; margin-left:7px; font-size:.85em; }
.set-toggle.open::after { content:'▴'; }
.inline-set { flex:1 1 100%; grid-column:1 / -1; margin:8px 0 4px; padding:2px 12px 0; border:1px solid var(--line-strong); border-left:4px solid var(--logo-light, #5797bb); border-radius:12px; background:var(--card); }
.inline-set[hidden] { display:none; }
.inline-set-title { margin:10px 0 0; font-size:.95rem; color:var(--logo-dark, #265c71); }
.inline-set .settings-fold, .inline-set form.settings { margin-bottom:0; }
.module-row > .inline-set, .choice > .inline-set { width:100%; }
.choice { flex-wrap:wrap; }

/* Champs préremplis par leur valeur automatique : grisés, entièrement sélectionnés au clic */
input.is-default, textarea.is-default { color:color-mix(in srgb, var(--ink) 42%, var(--card)); }
input.is-default::selection, textarea.is-default::selection { background:var(--accent-soft); color:var(--ink); }

/* Super admin, onglet Modules : titre et bouton « Tout déplier » sur une ligne */
.sa-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.sa-head h2 { margin-right:auto; }

/* Super admin : carte « Plateforme » dépliable */
.plat-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; border-left:4px solid var(--logo-light, #5797bb); }
.set-all-bar { display:flex; justify-content:flex-end; margin:0 0 8px; }
.inline-extra .module-extra { border:0; padding:10px 0 8px; margin:0; background:none; }

/* Vue client (onglet du super admin) */
.cv-banner { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:0 0 10px; padding:8px 14px; border-radius:12px; background:#fff7e0; border:1px solid #f3cf78; color:#7a5200; font-size:.88rem; font-weight:600; }
.cv-banner a { color:#7a5200; white-space:nowrap; }

/* ===== Aperçu schématique à droite des réglages ===== */
.set-split { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:18px; align-items:start; }
.set-split > .set-main { min-width:0; }
body.admin .set-split .settings .card { display:block; }
.set-split .gen-2 { grid-template-columns:1fr; }
.set-split .theme-wrap { grid-template-columns:1fr; }
.set-split .dm-zone-fields, .set-split .dm-add, .set-split .dm-edit { grid-template-columns:1fr 1fr; }
@media (max-width:1180px) { .set-split { grid-template-columns:1fr; } .pv-box { position:static !important; max-width:340px; } }
.pv-aside { min-width:0; }
.pv-box { position:sticky; top:12px; margin:8px 0; padding:10px; background:var(--card); border:1px solid var(--line-strong); border-left:4px solid var(--logo-light, #5797bb); border-radius:12px; max-height:calc(100vh - 24px); overflow:auto; }
.pv-title { font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.07em; color:var(--logo-dark, #265c71); margin-bottom:8px; }
.pv-title small { display:block; text-transform:none; letter-spacing:0; font-weight:500; color:var(--muted); margin-top:2px; }
.pv { font-size:11px; line-height:1.35; color:#334155; --c:#f59e0b; }
.pv [hidden] { display:none !important; }
.pv-label { margin:10px 0 4px; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.pv-label:first-child { margin-top:0; }
.pv-page { background:#eef1f6; border:1px solid #dbe1ea; border-radius:8px; overflow:hidden; padding-bottom:6px; }
.pv-head { display:flex; align-items:center; gap:7px; padding:6px 8px; background:#fff; border-bottom:1px solid #dbe1ea; }
.pv-logo { flex:none; width:22px; height:22px; border-radius:5px; background:#cbd5e1 center/cover no-repeat; }
.pv-logo-big { display:block; width:44px; height:26px; margin-bottom:5px; }
.pv-logo.has-img { background-color:transparent; }
.pv-name { font-size:11.5px; }
.pv-player { position:relative; margin:6px; aspect-ratio:16/8; background:#1f2937; border-radius:6px; display:flex; align-items:center; justify-content:center; color:#94a3b8; }
.pv-play { font-size:18px; }
.pv-card { margin:6px; padding:7px 8px; background:#fff; border:1px solid #dbe1ea; border-radius:8px; }
.pv-line { display:block; height:5px; margin:5px 0; border-radius:3px; background:#e2e8f0; }
.pv-line:nth-child(odd) { width:92%; } .pv-line:nth-child(even) { width:64%; }
.pv-note { margin:5px 0 0; font-size:10px; color:#64748b; }
.pv-warn { color:#b45309; font-weight:700; }
.pv-av { display:inline-block; flex:none; width:22px; height:22px; border-radius:50%; background:linear-gradient(135deg,#94a3b8,#64748b); }
.pv-avs { display:flex; gap:6px; margin-top:6px; }
.pv-now { display:flex; align-items:center; gap:7px; }
.pv-chip { position:absolute; display:flex; align-items:center; gap:5px; left:6px; bottom:6px; padding:3px 7px 3px 4px; border-radius:999px; background:rgba(255,255,255,.92); color:#1f2937; font-size:10px; font-weight:700; }
.pv-chip .pv-av { width:16px; height:16px; }
.pv-input { height:16px; margin:3px 0 6px; border:1px solid #cbd5e1; border-radius:5px; background:#fff; }
.pv-area { height:34px; position:relative; }
.pv-count { position:absolute; right:5px; bottom:2px; font-size:9px; color:#94a3b8; }
.pv-row2 { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.pv-check { display:inline-flex; align-items:center; gap:4px; font-size:10px; color:#475569; }
.pv-check i { width:9px; height:9px; border:1px solid #94a3b8; border-radius:2px; }
.pv-btn { display:inline-block; padding:3px 10px; border-radius:6px; background:var(--accent, #265c71); color:#fff; font-weight:700; font-size:10px; }
.pv-q { padding:5px 0; border-bottom:1px solid #eef1f6; } .pv-q:last-child { border:0; }
.pv-ans { margin:4px 0 0 8px; padding:3px 6px; border-left:3px solid var(--accent, #265c71); background:#edf4f7; border-radius:0 5px 5px 0; }
.pv-ans small { color:#64748b; }
.pv-vote { position:absolute; inset:6px; padding:7px 9px; background:#fff; border-radius:7px; color:#1f2937; overflow:hidden; }
.pv-thanks { margin-top:8px; color:#15803d; font-weight:700; }
.pv-res { margin-top:5px; } .pv-res-h { display:flex; justify-content:space-between; font-size:10px; }
.pv-bar { height:7px; margin-top:2px; border-radius:4px; background:#e2e8f0; overflow:hidden; }
.pv-bar i { display:flex; justify-content:flex-end; height:100%; background:var(--accent, #265c71); border-radius:4px; }
.pv-bar u { display:block; height:100%; background:var(--c); text-decoration:none; }
.pv-phone { width:70%; margin:0 auto; padding:9px 10px; background:#fff; border:2px solid #cbd5e1; border-radius:14px; }
.pv-phone .pv-btn { margin-top:2px; }
.pv-field > span { display:block; font-size:10px; color:#475569; margin-top:5px; }
.pv-field em { color:#dc2626; font-style:normal; } .pv-field small { color:#94a3b8; }
.pv-screen { position:relative; min-height:128px; padding:9px; background:#0f172a; color:#e2e8f0; border-radius:8px; }
.pv-screen .pv-bar { background:#334155; } .pv-screen .pv-res-h { color:#e2e8f0; }
.pv-qrbox { position:absolute; right:7px; bottom:7px; width:52px; padding:3px; background:#fff; border-radius:5px; text-align:center; color:#0f172a; }
.pv-qrbox small { display:block; font-size:6px; font-weight:700; line-height:1.1; }
.pv-screen.pv-v-side .pv-qrbox { top:50%; bottom:auto; transform:translateY(-50%); width:62px; }
.pv-qrbox.pv-v-only { left:50%; top:50%; right:auto; bottom:auto; transform:translate(-50%,-50%); width:96px; }
.pv-qrsvg svg { display:block; width:100%; height:auto; }
.pv-screen-res { max-width:68%; }
.pv-stars { margin:5px 0; font-size:14px; letter-spacing:2px; color:#f59e0b; }
.pv-ok { display:inline-block; width:15px; height:15px; line-height:15px; text-align:center; border-radius:50%; background:#16a34a; color:#fff; font-size:10px; }
.pv-qrcard { display:flex; align-items:center; gap:8px; } .pv-qrcard .pv-qrsvg { width:44px; flex:none; }
.pv-paper { padding:8px 10px; background:#fff; border:1px solid #dbe1ea; border-radius:6px; box-shadow:0 1px 0 #e2e8f0; }
.pv-kv { display:flex; flex-direction:column; padding:4px 0; border-bottom:1px solid #eef1f6; } .pv-kv:last-of-type { border:0; }
.pv-kv small { font-size:9px; color:#94a3b8; } .pv-kv span { font-size:10.5px; color:#1f2937; word-break:break-word; }
.pv-count-card { text-align:center; } .pv-count-card small { display:block; color:#64748b; } .pv-clock { font-size:15px; letter-spacing:1px; color:#1f2937; }
.pv-doc { display:flex; align-items:center; gap:6px; margin-top:4px; } .pv-doc .pv-line { flex:1; margin:0; }
.pv-ext { flex:none; padding:2px 5px; border-radius:4px; background:#e2e8f0; font-size:8px; font-weight:800; color:#475569; }

/* Aperçu fixe de la page du live (panneau à droite, repliable) */
.pv-dock { position:fixed; z-index:30; top:64px; right:0; bottom:0; width:316px; padding:0 12px 12px 4px; pointer-events:none; overflow:auto; }
.pv-dock .pv-box { position:static; pointer-events:auto; max-height:none; margin:0; box-shadow:0 6px 26px rgba(15,23,42,.14); }
.pv-dock-close { float:right; width:22px; height:22px; padding:0; line-height:20px; font-size:16px; border-radius:6px; background:none; color:var(--muted); border:1px solid var(--line); }
.pv-dock-close:hover { background:var(--bg); filter:none; color:var(--ink); }
.pv-dock-tab { position:fixed; z-index:31; top:50%; right:0; transform:translateY(-50%); writing-mode:vertical-rl; padding:12px 6px; border-radius:10px 0 0 10px; border:0; background:var(--logo-dark, #265c71); color:#fff; font-weight:700; font-size:.8rem; letter-spacing:.04em; cursor:pointer; display:none; }
.pv-dock-tab:hover { background:var(--logo-mid, #326275); filter:none; }
body.has-dock.dock-closed .pv-dock-tab { display:block; }
body.has-dock.dock-closed .pv-dock { display:none; }
body.has-dock:not(.dock-closed) .shell-main { padding-right:322px; }
@media (max-width:1399px) { body.has-dock:not(.dock-closed) .shell-main { padding-right:0; } .pv-dock { background:linear-gradient(90deg, transparent, var(--bg) 6%); } }
@media (max-width:700px) { .pv-dock { width:100%; } }
.pv-vote-mini { inset:auto 6px 6px 6px; padding:5px 8px; }
.pv-dock .pv-player { aspect-ratio:16/9; }.topbar-page { font-size:1.02rem; font-weight:700; color:var(--logo-dark, #265c71); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.topbar-admin { white-space:nowrap; }
@media (max-width:1100px) { body.admin .topbar { flex-wrap:wrap; height:auto; padding:6px 14px; row-gap:4px; } body.admin .topbar-right { flex-wrap:wrap; } }

/* Aperçu du live : couleurs de la page publique et contenus réels */
.pv-page { background:var(--pv-bg, #eef1f6); color:var(--pv-ink, #334155); }
.pv-page .pv-head { background:var(--pv-head, #fff); color:var(--pv-head-ink, #111827); }
.pv-page .pv-card { background:var(--pv-card, #fff); color:var(--pv-ink, #334155); }
.pv-page .pv-note, .pv-page .pv-q small { color:inherit; opacity:.7; }
.pv-foot { margin:6px 0 -6px; padding:4px 8px; background:var(--pv-foot, #fff); color:var(--pv-foot-ink, #111827); font-size:9px; text-align:center; opacity:.95; }
.pv-av.has-img { background-size:cover; background-position:center; }
.pv-av:not(.has-img) { display:inline-flex; align-items:center; justify-content:center; color:#fff; font-size:8px; font-weight:800; }
.pv-avs { flex-wrap:wrap; }
.pv-pers { display:flex; flex-direction:column; align-items:center; gap:2px; width:46px; text-align:center; }
.pv-pers small { font-size:8px; line-height:1.1; opacity:.75; }
.pv-doc-t { font-size:10px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pv-sq { display:flex; justify-content:space-between; align-items:center; gap:6px; margin-top:4px; } .pv-sq small { font-size:9px; opacity:.8; min-width:0; } .pv-sq .pv-stars { margin:0; font-size:10px; flex:none; }
.pv-ans span { display:block; font-size:10px; }
.pv-vote b { font-size:10.5px; }.pv-over { margin:6px; }
.pv-dock .pv-over .pv-chip { position:static; display:inline-flex; margin:0 0 6px; background:var(--pv-card, #fff); border:1px solid #dbe1ea; color:var(--pv-ink, #1f2937); }
.pv-dock .pv-over .pv-vote { position:static; inset:auto; margin:0 0 6px; padding:7px 8px; border:1px solid #dbe1ea; background:var(--pv-card, #fff); color:var(--pv-ink, #1f2937); }
.pv-livepic { margin:6px; border-radius:6px; overflow:hidden; aspect-ratio:16/8; background:#0f1f36; }
.pv-livepic svg { display:block; width:100%; height:100%; }
.pv-empty { margin:6px; padding:5px 8px; border:1px dashed color-mix(in srgb, var(--pv-ink, #334155) 35%, transparent); border-radius:8px; font-size:10px; font-style:italic; color:var(--pv-ink, #64748b); opacity:.65; }
.pv-livepic + .pv-chip { margin:0 6px 6px; }
.pv-page > .pv-chip { display:inline-flex; position:static; margin:0 6px 6px; background:var(--pv-card, #fff); border:1px solid #dbe1ea; color:var(--pv-ink, #1f2937); }
.pv-vote-card b { font-size:10.5px; }

/* Aperçu du live : éléments posés sur la vidéo (bandeau de l'intervenant, vote, invitation au questionnaire), comme sur la vraie page */
.pv-livepic { position:relative; aspect-ratio:16/9; }
.pv-livepic .pv-chip { position:absolute; left:6px; bottom:6px; right:auto; margin:0; z-index:2; background:rgba(255,255,255,.93); color:#1f2937; border:0; }
.pv-vote-pop { position:absolute; left:8px; right:8px; top:30px; z-index:1; padding:5px 7px; border-radius:6px; background:rgba(255,255,255,.96); color:#1f2937; font-size:9px; line-height:1.25; box-shadow:0 2px 8px rgba(0,0,0,.3); }
.pv-vote-pop b { font-size:9.5px; }
.pv-vote-pop .pv-res { margin-top:3px; } .pv-vote-pop .pv-res-h { font-size:9px; } .pv-vote-pop .pv-bar { height:5px; }
.pv-vote-pop .pv-thanks { margin-top:4px; }
.pv-sat-pop { position:absolute; right:6px; bottom:6px; z-index:2; padding:3px 8px; border-radius:999px; background:#f59e0b; color:#1f2937; font-size:9px; font-weight:800; }

/* Aperçu du live : largeur réglable, schéma ou version réelle */
.pv-dock { width:var(--dock-w, clamp(316px, 38vw, 760px)); }
body.has-dock:not(.dock-closed) .shell-main { padding-right:calc(var(--dock-w, clamp(316px, 38vw, 760px)) + 6px); }
@media (max-width:1399px) { body.has-dock:not(.dock-closed) .shell-main { padding-right:0; } }
.pv-dock .pv-box { position:relative; }
.pv-dock-resize { position:absolute; left:-7px; top:0; bottom:0; width:14px; cursor:ew-resize; z-index:5; touch-action:none; pointer-events:auto; }
.pv-dock-resize::after { content:''; position:absolute; left:5px; top:50%; width:4px; height:46px; margin-top:-23px; border-radius:3px; background:var(--logo-light, #5797bb); opacity:.55; }
.pv-dock-resize:hover::after, body.dock-resizing .pv-dock-resize::after { opacity:1; }
body.dock-resizing { user-select:none; cursor:ew-resize; }
body.dock-resizing .pv-real { pointer-events:none; }
.pv-modes { display:flex; gap:4px; margin-top:6px; text-transform:none; letter-spacing:0; }
.pv-mode, .pv-reload { padding:3px 10px; font-size:.74rem; font-weight:700; border-radius:8px; background:var(--card); color:var(--muted); border:1px solid var(--line-strong); }
.pv-mode.on { background:var(--logo-dark, #265c71); border-color:var(--logo-dark, #265c71); color:#fff; }
.pv-mode:hover, .pv-reload:hover { filter:none; border-color:var(--logo-light, #5797bb); }
.pv-reload { display:none; margin-left:auto; padding:3px 8px; }
.pv-dock.mode-real .pv-reload { display:inline-block; }
.pv-hint-real { display:none; }
.pv-dock.mode-real .pv-hint-real { display:block; } .pv-dock.mode-real .pv-hint-sketch { display:none; }
.pv-real-wrap { display:none; }
.pv-dock.mode-real .pv-real-wrap { display:block; }
.pv-dock.mode-real .pv[data-pv-dock] { display:none; }
.pv-real { display:block; width:100%; height:calc(100vh - 215px); min-height:320px; border:1px solid var(--line-strong); border-radius:8px; background:#fff; }
/* Menu : petit texte sous un lien (ex. Régie) */
.side-link.has-sub { display:block; }
.side-sub { display:block; margin-top:2px; font-size:.67rem; font-weight:400; line-height:1.25; color:#93bdd3; letter-spacing:.01em; }   /* plus discret que le nom : teinte plus claire du bleu, plus petit, sans gras */
.side-link.active .side-sub, .side-top.active .side-sub { color:#e3f1f9; }   /* sur le fond bleu clair de la page en cours */
.side-link:hover .side-sub, .side-top:hover .side-sub { color:#c5e0ee; }

/* « Réglages du module » : bandeau bleu foncé OxygenEvent, texte blanc (bien visible en haut de chaque page de module) */
#reglages.settings-fold { border-color:var(--logo-dark, #265c71); background:var(--card); overflow:hidden; }
#reglages.settings-fold > summary { padding:11px 16px; background:var(--logo-dark, #265c71); color:#fff; font-weight:700; font-size:.98rem; }
#reglages.settings-fold > summary:hover { background:var(--logo-mid, #326275); }
#reglages.settings-fold > summary::before { color:#fff; font-size:1.05em; }
#reglages.settings-fold > summary::after { color:#fff; }
#reglages.settings-fold[open] > summary { color:#fff; border-bottom:0; }
#reglages.settings-fold > summary:focus-visible { outline:2px solid var(--logo-light, #5797bb); outline-offset:-3px; }

/* ===== En-tête (menu du haut) de l'administration, repris du site OxygenEvent ===== */
/* En-tête fixe, qui se compacte au défilement */
body.admin .topbar { position:sticky; top:0; z-index:50; box-shadow:0 1px 8px rgba(0,0,0,.08); transition:height .3s ease-in-out, padding .3s ease-in-out, box-shadow .3s ease-in-out; }
body.admin .topbar.header-compact { height:46px; box-shadow:0 2px 8px rgba(0,0,0,.12); }
.topbar .topbar-event { transition:height .3s ease-in-out; }
.topbar.header-compact .topbar-event { height:30px; }
body.hdr-compact .pv-dock { top:54px; }
/* FR | EN : la langue courante en gras sur fond dégradé, l'autre en lien (comme sur le site), tout à droite */
.lang { display:inline-flex; align-items:center; margin-left:8px; border:1px solid var(--line-strong); border-radius:10px; overflow:hidden; font-size:.85rem; line-height:1; }
.lang a, .lang b { display:block; padding:8px 12px; }
.lang b { background:linear-gradient(to right, #5797bb, #326275); color:#fff; }
.topbar-right .lang a { padding:8px 12px; border-radius:0; color:var(--ink); font-size:.85rem; font-weight:400; }
.topbar-right .lang a:hover { background:#eef4f8; color:#326275; }
/* Liens du haut : en ligne à partir de 1480 px, sinon dans le panneau du burger (même seuil que le site) */
.hdr-links { display:none; align-items:center; gap:2px; }
.hdr-burger { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; padding:0; margin:0 0 0 2px; background:none; border:0; border-radius:10px; cursor:pointer; }
.hdr-burger:hover { background:none; filter:none; }
.hdr-burger span { display:block; width:24px; height:2px; background:var(--ink); position:relative; transition:background .2s; }
.hdr-burger span::before, .hdr-burger span::after { content:""; position:absolute; left:0; width:24px; height:2px; background:var(--ink); transition:transform .2s; }
.hdr-burger span::before { top:-8px; } .hdr-burger span::after { top:8px; }
.hdr-burger[aria-expanded="true"] span { background:transparent; }
.hdr-burger[aria-expanded="true"] span::before { transform:translateY(8px) rotate(45deg); }
.hdr-burger[aria-expanded="true"] span::after { transform:translateY(-8px) rotate(-45deg); }
.hdr-burger:focus-visible { outline:2px solid #5797bb; outline-offset:2px; }
@media (min-width:1480px) { .hdr-links { display:inline-flex; } .hdr-burger, .mobile-panel, .mobile-overlay { display:none; } }
/* Panneau qui glisse depuis la droite, voile sombre, croix */
.mobile-overlay { position:fixed; inset:0; background:rgba(33,33,33,.4); z-index:55; opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s; }
.mobile-overlay.open { opacity:1; visibility:visible; }
.mobile-panel { position:fixed; top:0; right:0; height:100%; width:85%; max-width:384px; z-index:60; background:#326275; color:#fff; padding:20px 24px 32px; overflow-y:auto; transform:translateX(100%); visibility:hidden; transition:transform .3s ease, visibility .3s; box-shadow:-10px 0 30px rgba(0,0,0,.25); }
.mobile-panel.open { transform:translateX(0); visibility:visible; }
body.menu-open { overflow:hidden; }
.mp-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:30px; }
.mp-logo { display:inline-block; padding:0; border:0; } .mp-logo img { height:40px; width:auto; display:block; }
.mp-close { background:none; border:0; color:#fff; font-size:2.2rem; line-height:1; cursor:pointer; padding:2px 8px; border-radius:8px; }
.mp-close:hover { background:rgba(255,255,255,.1); filter:none; }
.mp-close:focus-visible { outline:2px solid #a9d6ee; }
.mobile-panel a:not(.mp-logo) { display:block; padding:13px 0; color:#fff; font-size:1rem; border-bottom:1px solid rgba(255,255,255,.18); text-decoration:none; }
.mobile-panel a:not(.mp-logo):hover { color:#a9d6ee; background:none; }
@media (prefers-reduced-motion:reduce) { body.admin .topbar, .mobile-panel, .mobile-overlay { transition:none; } }
@media (max-width:1560px) { body.admin .topbar-right a { padding:6px 8px; } .adm-search input { width:150px; } }
@media (max-width:640px) { .adm-search { display:none; } }/* Le menu de gauche reste sous l'en-tête fixe */
body.admin .side { top:56px; max-height:calc(100vh - 56px); min-height:calc(100vh - 56px); }
body.admin.hdr-compact .side { top:46px; max-height:calc(100vh - 46px); }

/* Menu de gauche : immobile, il ne bouge pas du tout quand on fait défiler la page (ni quand l'en-tête se compacte) ; il défile seulement en lui-même s'il est plus haut que l'écran */
.shell { display:block; min-height:0; }
body.admin .side { position:fixed; left:0; top:56px; bottom:0; width:236px; height:auto; min-height:0; max-height:none; overflow-y:auto; z-index:20; }
body.admin.hdr-compact .side { top:56px; max-height:none; }
body.admin .shell-main { margin-left:236px; }
body.admin.side-collapsed .shell-main { margin-left:0; }
body.hdr-compact .pv-dock { top:64px; }
@media (max-width:900px) { body.admin .shell-main { margin-left:0; } body.admin .side { z-index:40; box-shadow:0 0 40px rgba(0,0,0,.35); } }

/* Menu de gauche : la couleur bleue va du haut de l'écran (sous l'en-tête fixe) jusqu'au pied de page, sans jamais changer ni laisser de bande blanche quand l'en-tête se compacte */
body.admin .side, body.admin.hdr-compact .side { top:0; bottom:0; padding-top:70px; padding-bottom:calc(var(--footer-h, 56px) + 24px); background:#265c71; }

/* La colonne bleue du menu de gauche monte jusqu'en haut de l'écran : la partie gauche de l'en-tête (burger et logo, en blanc) est elle aussi sur fond bleu, pour que la couleur ne change jamais, même quand l'en-tête se compacte */
body.admin:not(.side-collapsed) .topbar::before { content:''; position:absolute; left:0; top:0; bottom:0; width:236px; background:#265c71; z-index:0; }
body.admin:not(.side-collapsed) .topbar > * { position:relative; z-index:1; }
body.admin:not(.side-collapsed) .topbar .topbar-event { height:34px; filter:brightness(0) invert(1); }
body.admin:not(.side-collapsed) .topbar.header-compact .topbar-event { height:28px; }
body.admin:not(.side-collapsed) .topbar .brand-sep:first-of-type { background:rgba(255,255,255,.4); }
body.admin:not(.side-collapsed) .topbar #side-toggle { background:rgba(255,255,255,.14); }
body.admin:not(.side-collapsed) .topbar #side-toggle:hover { background:rgba(255,255,255,.26); }
@media (max-width:900px) { body.admin .topbar::before { display:none; } body.admin .topbar .topbar-event { filter:none; } }
body.admin:not(.side-collapsed) .topbar .topbar-event-link { width:142px; flex:none; }
body.admin:not(.side-collapsed) .topbar .topbar-event { max-width:100%; width:auto; }
/* Hauteur du menu de gauche : tout l'écran, sans dépendre d'une autre règle (la colonne bleue va jusqu'au pied de page) */
body.admin .side, body.admin.hdr-compact .side { top:0; bottom:auto; height:100vh; min-height:0; max-height:none; }
@supports (height:100dvh) { body.admin .side, body.admin.hdr-compact .side { height:100dvh; } }

/* Logo OxygenEvent de l'en-tête : comme avant, sur fond blanc et avec ses vraies couleurs (la colonne bleue du menu commence juste sous l'en-tête) */
body.admin .topbar::before { content:none; display:none; }
body.admin .topbar > * { position:static; z-index:auto; }
body.admin:not(.side-collapsed) .topbar .topbar-event, body.admin .topbar .topbar-event { filter:none; height:42px; }
body.admin .topbar.header-compact .topbar-event { height:30px; }
body.admin:not(.side-collapsed) .topbar .brand-sep:first-of-type, body.admin .topbar .brand-sep { background:var(--line-strong); }
body.admin:not(.side-collapsed) .topbar .topbar-event-link { width:auto; flex:none; }
body.admin:not(.side-collapsed) .topbar .topbar-event { max-width:none; }
body.admin:not(.side-collapsed) .topbar #side-toggle { background:var(--logo-dark, #265c71); }
body.admin:not(.side-collapsed) .topbar #side-toggle:hover { background:var(--logo-mid, #326275); }

/* « Réglages du module » : rien n'est rogné (le bandeau bleu garde ses coins arrondis sans masquer la suite des réglages ; la barre « Enregistrer » reste collée au bas de l'écran, pas au bas du bandeau) */
#reglages.settings-fold { overflow:visible; }
#reglages.settings-fold > summary { border-radius:11px; }
#reglages.settings-fold[open] > summary { border-radius:11px 11px 0 0; }

/* Aperçu propre au module, en premier dans le panneau de droite (la mise en page des réglages gagne la place) */
.pv-mod { margin:0 0 14px; padding-bottom:12px; border-bottom:2px solid var(--line-strong); }
.pv-dock .pv-dock-close { position:absolute; right:10px; top:10px; float:none; z-index:6; }
.pv-mod .pv-title { padding-right:30px; }

/* Super admin, onglet Modules : un seul « Enregistrer » (celui des modules) ; les réglages dépliés n'ont plus le leur */
body.sa-tab-modules .inline-set button.js-save, body.sa-tab-modules .inline-set .dirty-note, body.sa-tab-modules .inline-set .dm-zone-save { display:none; }
body.sa-tab-modules .inline-set .savebar:not(:has(button:not(.js-save))) { display:none; }

/* Petite description sous « Plateforme » (lien direct du menu de gauche), comme sous Régie */
.side-top.has-sub { display:block; }
.side-top .side-sub { font-weight:500; }

/* Menu de gauche : point vert « en cours » (vote, QR code de la salle) et nombre d'inscrits entre parenthèses */
.side-link:not(.has-sub) { justify-content:flex-start; }   /* le point vert et le nombre restent collés au nom */
.side-link:not(.has-sub) .nav-badge { margin-left:auto; }   /* seule la pastille rouge reste tout à droite */
.nav-live { display:inline-block; flex:none; width:9px; height:9px; margin-left:-2px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 0 rgba(34,197,94,.6); animation:nav-live-pulse 2s infinite; vertical-align:middle; }
@keyframes nav-live-pulse { 70% { box-shadow:0 0 0 6px rgba(34,197,94,0); } 100% { box-shadow:0 0 0 0 rgba(34,197,94,0); } }
.nav-count { margin-left:3px; font-weight:500; opacity:.8; }
@media (prefers-reduced-motion: reduce) { .nav-live { animation:none; } }
.side-link.has-sub .nav-live { margin-left:6px; }   /* entrées à description : le texte n'est pas en flex, il faut un vrai espace */

.gen-nologo { color:#b45309; font-weight:600; margin-top:6px; }
.gen-nologo[hidden] { display:none; }

.nav-x { display:contents; }   /* pastille / point vert / nombre : restent des éléments du lien, remplacés sur place par le menu vivant */
.side-sub:empty { display:none; }

/* Menu de gauche plus compact : tout tient sans défilement sur un écran Full HD (liens, groupes et bas de menu resserrés) */
.side-group { margin-top:6px; }
.side-link { padding-top:4px; padding-bottom:4px; }
.side-top { padding-top:7px; padding-bottom:7px; }
.side-head { padding-top:4px; padding-bottom:4px; }
.side-sub { margin-top:1px; line-height:1.2; }
body.admin .side, body.admin.hdr-compact .side { padding-bottom:calc(var(--footer-h, 56px) + 8px); }

/* Régie : quand on ouvre « Tous les réglages » d'un bloc, ce bloc passe sur toute la largeur et ses réglages s'affichent juste dessous (et non sous le bloc voisin) */
.regie-grid > .card:has(+ .inline-set:not([hidden])) { grid-column:1 / -1; }
.regie-grid > .card, .regie-grid > .inline-set { scroll-margin-top:78px; }


/* Réglages de la plateforme dans le super admin : blocs repliables (réglages techniques, apparence, documents) */
details.gen-fold { margin:14px 0; border:1px solid var(--line-strong); border-radius:12px; background:var(--card); }
details.gen-fold > summary { padding:11px 16px; font-weight:700; font-size:.98rem; cursor:pointer; color:var(--logo-dark, #265c71); list-style:none; }
details.gen-fold > summary::-webkit-details-marker { display:none; }
details.gen-fold > summary::before { content:'▸'; display:inline-block; width:1.1em; transition:transform .15s; }
details.gen-fold[open] > summary::before { transform:rotate(90deg); }
details.gen-fold > .gen-fold-body { padding:0 14px 12px; }
.gen-fold-body > h2:first-child, .gen-fold-body > .section-sub:first-of-type { display:none; }   /* le titre est déjà dans l'en-tête du bloc */

/* Onglet Événement du super admin : un seul bouton « Enregistrer » pour toute la page */
.sa-pane[data-pane=event] form .savebar, .sa-pane[data-pane=event] .dm-zone-save { display:none; }

/* Régie en deux zones : « En direct » (bandeau d'état et cartes de commande) puis « Adresses et codes à transmettre » (une ligne par destination) */
.regie-status { display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 4px; }
.rs-chip { display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px; background:var(--card); border:1px solid var(--line-strong); color:var(--muted); font-size:.84rem; font-weight:600; text-decoration:none; }
.rs-chip:hover { border-color:var(--logo-light, #5797bb); filter:none; }
.rs-chip.on { color:var(--ink); border-color:#86efac; }
.rs-chip.warn { background:#fef3c7; border-color:#f59e0b; color:#92400e; }
h3.regie-zone { margin:22px 0 8px; font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.09em; color:var(--logo-dark, #265c71); }
.regie-grid.regie-live { grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); align-items:stretch; }
.regie-live > .card { display:flex; flex-direction:column; }
.regie-live > .inline-set { align-self:start; }
.regie-grid .card > h3 { margin:0 0 10px; font-size:1rem; }
.regie-grid .card-state { margin:0 0 10px; }
.regie-grid .card-help { margin:10px 0 0; font-size:.84rem; }
.regie-grid .card-foot { margin-top:auto; padding-top:14px; display:flex; flex-wrap:wrap; gap:8px; }
.regie-addr { padding:4px 18px; }
.regie-row { display:grid; grid-template-columns:minmax(190px, 1fr) minmax(300px, 1.7fr) 280px; gap:6px 18px; align-items:center; padding:12px 0; margin:0; border-top:1px solid var(--line, #e5e9f0); }
.regie-addr > .regie-row:first-child { border-top:0; }
.rr-name { display:flex; flex-direction:column; gap:2px; min-width:0; }
.rr-name .muted { font-size:.8rem; line-height:1.3; }
.rr-url { display:flex; gap:8px; align-items:center; min-width:0; }
.rr-url input[readonly] { flex:1; min-width:0; }
.rr-act { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; align-items:center; }
.regie-pin .pin-input { flex:0 0 auto; width:110px; max-width:110px; font-size:1.15rem; letter-spacing:.3em; text-align:center; }
.regie-pin .pill { margin-left:6px; }
.link-btn { background:none; border:0; padding:4px 2px; color:var(--logo-light, #265c71); text-decoration:underline; font-size:.85rem; font-weight:600; cursor:pointer; }
.link-btn:hover { background:none; filter:none; color:var(--logo-dark, #265c71); }
.regie-addr > .inline-set { margin:4px 0 12px; }
@media (max-width: 1100px) { .regie-row { grid-template-columns:1fr; } .rr-act { justify-content:flex-start; } }
.rr-name .pill, .regie-pin .pill { align-self:flex-start; margin-left:0; }

/* Trombinoscope : chapitres (tables rondes) */
.trombi-switch { display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; }
.trombi-switch .muted { flex:1 1 100%; font-size:.84rem; }
.trombi-group { margin-bottom:10px; }
.trombi-group.is-on { border-left:4px solid #22c55e; }
.trombi-group-head { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.trombi-group-head input[type=text] { flex:1 1 220px; max-width:420px; font-weight:700; }
.trombi-group-actions { margin-left:auto; display:flex; gap:6px; }
.trombi-members { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.trombi-tables { font-size:.78rem; }
.card-label { margin:0 0 6px; font-size:.74rem; font-weight:800; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); }
.regie-grid .card form.chips + .card-label { margin-top:12px; }

/* Chapitres : une couleur chacun (fond teinté + liseré), pastilles de choix */
.trombi-group { border-left:5px solid var(--ch, var(--accent)); background:color-mix(in srgb, var(--ch, var(--accent)) 8%, var(--card)); }
.trombi-group.is-on { border-left-width:5px; box-shadow:0 0 0 2px color-mix(in srgb, var(--ch, var(--accent)) 35%, transparent); }
.ch-btn { box-shadow:inset 5px 0 0 var(--ch, transparent); padding-left:20px; }
.ch-btn.secondary { background:color-mix(in srgb, var(--ch, #fff) 9%, var(--card)); }
.trombi-group { background:color-mix(in srgb, var(--ch, var(--accent)) 12%, var(--card)); }
.trombi-group .chip input:checked + span { background:var(--ch, var(--accent)); border-color:var(--ch, var(--accent)); }
.trombi-group .chip span { background:var(--card); }
.trombi-group > form > .actions button:not(.secondary) { background:var(--ch, var(--accent)); }

/* Chapitre en diffusion : rouge « en direct », comme le LIVE du lecteur */
.onair-dot { display:inline-block; flex:none; width:10px; height:10px; margin-right:7px; border-radius:50%; background:#dc2626; box-shadow:0 0 0 0 rgba(220,38,38,.6); animation:onair-pulse 1.6s infinite; vertical-align:middle; }
.onair-dot.off { background:#94a3b8; animation:none; }
@keyframes onair-pulse { 70% { box-shadow:0 0 0 8px rgba(220,38,38,0); } 100% { box-shadow:0 0 0 0 rgba(220,38,38,0); } }
.onair-badge { display:inline-flex; align-items:center; padding:3px 10px 3px 9px; border-radius:999px; background:#dc2626; color:#fff; font-size:.72rem; font-weight:800; letter-spacing:.07em; white-space:nowrap; }
.onair-badge .onair-dot { background:#fff; box-shadow:0 0 0 0 rgba(255,255,255,.7); animation-name:onair-pulse-w; width:8px; height:8px; margin-right:6px; }
@keyframes onair-pulse-w { 70% { box-shadow:0 0 0 6px rgba(255,255,255,0); } 100% { box-shadow:0 0 0 0 rgba(255,255,255,0); } }
.onair-banner { display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin:10px 0; padding:12px 16px; border-radius:12px; border:1px solid #dc2626; border-left-width:6px; background:color-mix(in srgb, #dc2626 9%, var(--card)); }
.onair-banner strong { font-size:1.05rem; }
.onair-banner.compact { margin:0 0 12px; padding:8px 12px; }
.onair-off { margin:6px 0 10px; color:var(--muted); font-size:.88rem; display:flex; align-items:center; }
.trombi-group.is-air { border-color:#dc2626; border-left-color:#dc2626; box-shadow:0 0 0 2px rgba(220,38,38,.35); }
.ch-btn.is-air { background:#dc2626; border-color:#dc2626; color:#fff; box-shadow:none; }
.ch-btn.is-air .onair-dot { background:#fff; animation-name:onair-pulse-w; width:8px; height:8px; }
.rs-chip.air { background:#dc2626; border-color:#dc2626; color:#fff; }
.rs-chip.air .onair-dot { background:#fff; animation-name:onair-pulse-w; width:8px; height:8px; margin-right:6px; }
.side-link.has-sub .onair-dot { margin-left:6px; margin-right:0; width:9px; height:9px; }

/* Chapitres : intervenants du chapitre (un clic = prend la parole), retrait et ajout */
.trombi-group .trombi-members { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; align-items:center; }
.member { display:inline-flex; align-items:stretch; border:1px solid var(--line-strong); border-radius:10px; background:var(--card); overflow:hidden; }
.member form { margin:0; display:flex; }
.member .member-name { background:none; color:var(--ink); border:0; border-radius:0; padding:8px 12px; font-weight:600; }
.member .member-name:hover { background:color-mix(in srgb, var(--ch, var(--accent)) 14%, var(--card)); filter:none; }
.member .member-x { background:none; color:var(--muted); border:0; border-left:1px solid var(--line); border-radius:0; padding:0 10px; font-size:1.1rem; line-height:1; }
.member .member-x:hover { background:#fdecea; color:#c62828; filter:none; }
.member.is-speaking { background:var(--ch, var(--accent)); border-color:var(--ch, var(--accent)); }
.member.is-speaking .member-name { color:#fff; }
.member.is-speaking .member-name:hover { background:rgba(255,255,255,.12); }
.member.is-speaking .member-x { color:#fff; border-left-color:rgba(255,255,255,.35); }
.member.is-speaking .nav-live { margin:0 6px 0 0; background:#fff; box-shadow:none; animation:none; }
.member-add { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; align-items:center; }
.member-add select { max-width:320px; }

/* Ajout d'un intervenant à un chapitre : liste de noms, un clic = ajouté */
.member-add { display:block; margin-top:12px; }
.member-add > summary { display:inline-block; cursor:pointer; list-style:none; padding:7px 14px; border:1px dashed var(--line-strong); border-radius:10px; font-weight:600; font-size:.9rem; background:var(--card); }
.member-add > summary::-webkit-details-marker { display:none; }
.member-add > summary:hover { border-color:var(--ch, var(--accent)); }
.member-add[open] > summary { border-style:solid; border-color:var(--ch, var(--accent)); }
.member-pick { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; max-height:240px; overflow:auto; padding:2px; }
.member-pick .pick { background:var(--card); color:var(--ink); border:1px dashed var(--line-strong); font-weight:600; padding:7px 12px; }
.member-pick .pick:hover { background:color-mix(in srgb, var(--ch, var(--accent)) 14%, var(--card)); border-color:var(--ch, var(--accent)); filter:none; }

/* Animation d'un chapitre : étiquette sur la pastille (administration) et sur la tuile (live) */
.member .member-host { background:none; color:var(--muted); border:0; border-left:1px solid var(--line); border-radius:0; padding:0 9px; font-size:.7rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; opacity:.55; }
.member .member-host:hover { opacity:1; background:color-mix(in srgb, var(--ch, var(--accent)) 14%, var(--card)); filter:none; }
.member.is-host .member-host { opacity:1; color:var(--ch, var(--accent)); background:color-mix(in srgb, var(--ch, var(--accent)) 14%, var(--card)); }
.member.is-speaking .member-host { color:#fff; border-left-color:rgba(255,255,255,.35); }
.trombi-hosts { margin:0 0 10px; font-size:.9rem; font-weight:700; }
.trombi-host-tag { display:inline-block; margin:0 0 2px; padding:1px 7px; border-radius:999px; background:var(--accent); color:#fff; font-size:.66rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.trombi-tile.host { border-color:var(--accent); }
/* L'étiquette « Animation » garde son aspect (clair) même sur l'intervenant qui parle, pour ne pas ressembler à une sélection */
.member.is-speaking .member-host { background:var(--card); color:color-mix(in srgb, var(--muted) 55%, transparent); border-left-color:var(--line); opacity:1; }   /* même aspect que sur un intervenant qui ne parle pas */
.member.is-speaking.is-host .member-host { background:color-mix(in srgb, var(--ch, var(--accent)) 14%, var(--card)); color:var(--ch, var(--accent)); opacity:1; }

/* Animation : même mise en valeur partout (live, aperçu réel, schéma, carte « En ce moment ») */
.trombi-host-tag { display:block; margin:0 0 3px; text-align:left; }
.trombi-now .trombi-host-tag, .trombi-lower .trombi-host-tag { display:inline-block; align-self:flex-start; }
.trombi-who.is-host { min-width:0; }
.pv-hosttag { display:inline-block; padding:0 5px; border-radius:999px; background:var(--accent, #265c71); color:#fff; font-size:7px; font-style:normal; font-weight:800; letter-spacing:.05em; text-transform:uppercase; line-height:1.5; vertical-align:middle; }
.pv-hosts { display:block; margin-top:4px; font-size:8px; font-weight:700; }
.pv-pers.host .pv-av { box-shadow:0 0 0 2px var(--accent, #265c71); }
.pv-pers.host .pv-hosttag { margin-top:1px; }

/* Onglet Plateforme du super admin : le bouton « Réinitialiser toutes les couleurs » reste visible (seuls l'enregistrement et l'indicateur sont masqués) */
.sa-pane[data-pane=event] #theme-form .savebar { display:flex; position:static; background:none; padding:6px 0 0; }
.sa-pane[data-pane=event] #theme-form .savebar > span { display:none; }

/* Mode sombre : les titres en bleu foncé du logo passent au bleu clair pour rester lisibles */
@media (prefers-color-scheme: dark) {
  .inline-set-title, .pv-title, .topbar-page, details.gen-fold > summary, h3.regie-zone, .link-btn:hover { color:var(--logo-sky, #8cc4e3); }
}

/* Tablette de l'animateur : chapitre en diffusion et animation mises en évidence */
.host-speakers-group { margin:0 14px 10px; padding:8px 12px; border-left:5px solid #dc2626; border-radius:8px; background:color-mix(in srgb, #dc2626 8%, var(--card)); font-size:calc(.95rem * var(--host-scale, 1)); font-weight:700; }
.host-speaker.is-host { border-color:var(--accent); }
.host-speaker-tag { display:block; align-self:flex-start; margin:0 0 3px; padding:1px 9px; border-radius:999px; background:var(--accent); color:#fff; font-size:calc(.66rem * var(--host-scale, 1)); font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.host-speaker.is-host .host-speaker-badge { top:auto; bottom:8px; }   /* l'étiquette « En scène » ne recouvre pas l'étiquette « Animation » */
/* Page animateur : les cartes d'intervenants sont alignées à gauche (le bouton centrait son contenu, ce qui décalait les portraits selon la longueur du nom) */
.host-speaker { justify-content:flex-start; }
.host-speaker .trombi-avatar { flex:none; }

/* Démonstration : barre en haut de l'administration, actions verrouillées */
.demo-banner .demo-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.demo-banner .demo-text { flex:1 1 320px; }
.demo-locked { position:relative; opacity:.55; cursor:not-allowed !important; }
button.demo-locked::before { content:'🔒'; margin-right:6px; font-size:.85em; }
#demo-toast { position:fixed; left:50%; bottom:64px; transform:translateX(-50%); z-index:200; max-width:92%; padding:9px 16px; border-radius:10px; background:#265c71; color:#fff; font-weight:600; font-size:.9rem; box-shadow:0 4px 14px rgba(0,0,0,.25); }
#demo-toast[hidden] { display:none; }

/* ===== Marque blanche (lib/brand.php) : nom écrit à la place du logo, pastille du panneau mobile ===== */
.brand-text { display:inline-block; font-weight:700; font-size:1.05rem; line-height:1.2; letter-spacing:.01em; color:inherit; white-space:nowrap; }
.oxy-footer-logo .brand-text { font-size:.95rem; line-height:32px; }
.host-bar .brand-text { font-size:1.15rem; }
.host-pin-mark { display:block; text-align:center; margin:0 auto 22px; }
.host-pin-mark .brand-text { font-size:1.5rem; }
.host-pin-mark .host-pin-brand { margin-bottom:0; }
.mp-logo.mp-custom { background:#fff; padding:7px 12px; border-radius:8px; color:#18212f; }
.mp-logo.mp-custom img { height:34px; max-width:200px; object-fit:contain; }
.mp-logo.mp-custom .brand-text { color:#18212f; }

/* Barre de démonstration : nombre de personnes connectées (bac à sable partagé) */
.demo-banner .demo-online { display:flex; align-items:center; gap:8px; margin-top:4px; font-weight:500; font-size:.88rem; }
.demo-banner .demo-online i { flex:none; width:9px; height:9px; border-radius:50%; background:#16a34a; box-shadow:0 0 0 3px rgba(22,163,74,.2); }

/* Barre de démonstration : bandeau pleine largeur sous le menu de l'en-tête (administration) */
body.admin > .demo-banner { position:sticky; top:var(--hdr-h, 56px); z-index:19; margin:0; border-radius:0; border-width:0 0 1px; padding:8px 24px; font-size:.88rem; line-height:1.4; gap:8px 16px; }   /* toujours visible sous l'en-tête, même en faisant défiler la page ; sous le menu de gauche (z-index 20) */
body.admin > .demo-banner .demo-text { flex:1 1 420px; }
body.admin > .demo-banner .demo-actions { flex:0 1 auto; }
@media (max-width:700px) { body.admin > .demo-banner { position:static; padding:8px 14px; } }   /* téléphone : il défile avec la page (il prendrait trop de place) */
body.has-dock .pv-dock { top:var(--dock-top, 64px); }   /* le panneau d'aperçu se place sous le bandeau de démonstration */
body.admin:not(.side-collapsed) > .demo-banner { padding-left:calc(236px + 24px); }   /* le menu de gauche est fixe : le texte du bandeau commence à sa droite */
@media (max-width:900px) {   /* petit écran : le menu latéral (superposé) commence sous le bandeau */
  body.admin > .demo-banner, body.admin:not(.side-collapsed) > .demo-banner { padding-left:14px; }
  body.admin .side, body.admin.hdr-compact .side { top:var(--strip-bottom, 56px); bottom:0; height:auto; padding-top:14px; }
}
.trombi-dir-wait { margin-top:8px; padding:7px 10px; border-radius:8px; background:#fff7ed; border:1px solid #fdba74; color:#9a3412; font-size:.86rem; font-weight:600; line-height:1.4; }

/* ===== Chapitres : interface plus sobre (couleurs discrètes, titre mis en avant, actions effacées, intervenants séparés) ===== */
/* La couleur d'un chapitre ne sert plus qu'à le repérer : une pastille et un liseré fin, plus de fond teinté. */
.trombi-group { background:var(--card); border-left:3px solid color-mix(in srgb, var(--ch, var(--accent)) 55%, var(--line)); box-shadow:none; padding:16px 18px 14px; }
.trombi-group.is-on { box-shadow:none; }
.trombi-group.is-air { border-color:var(--line); border-left-color:#dc2626; box-shadow:0 0 0 1px rgba(220,38,38,.28); }
.ch-btn { box-shadow:none; padding-left:12px; }
.ch-btn::before { content:''; display:inline-block; width:8px; height:8px; margin-right:8px; border-radius:50%; background:color-mix(in srgb, var(--ch, var(--accent)) 70%, var(--card)); vertical-align:middle; }
.ch-btn.secondary { background:var(--card); }
.ch-btn.is-air::before { display:none; }
.trombi-group .chip span { background:var(--card); }

/* En-tête : le titre est le premier élément de la carte. */
.trombi-group-head { display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; }
.tg-dot { flex:none; width:11px; height:11px; border-radius:50%; background:color-mix(in srgb, var(--ch, var(--accent)) 75%, var(--card)); }
.trombi-group-head input.tg-title { flex:1 1 260px; max-width:none; min-width:0; padding:5px 8px; margin:0 -8px; border:1px solid transparent; border-radius:8px; background:transparent; font-size:1.3rem; line-height:1.25; font-weight:800; color:var(--ink); }
.trombi-group-head input.tg-title:hover { border-color:var(--line-strong); }
.trombi-group-head input.tg-title:focus { border-color:var(--accent); background:var(--card); outline:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.trombi-group-actions { margin-left:auto; display:flex; flex-wrap:wrap; align-items:center; gap:2px; }
.trombi-group .tg-btn { background:none; color:var(--muted); border:1px solid transparent; border-radius:8px; padding:4px 9px; font-size:.82rem; font-weight:600; min-height:0; box-shadow:none; }
.trombi-group .tg-btn:hover:not(:disabled) { background:var(--bg); color:var(--ink); filter:none; }
.trombi-group .tg-btn:disabled { opacity:.35; cursor:default; }
.trombi-group .tg-main { border-color:var(--line-strong); color:var(--ink); margin-right:4px; }
.trombi-group .tg-icon { padding:4px 8px; font-size:.95rem; }
.trombi-group .tg-danger:hover:not(:disabled) { background:#fdecea; color:#c62828; }

/* Séparateur annonçant les intervenants, puis animation et autres intervenants sur deux rangées. */
.tg-sep { display:flex; align-items:center; gap:12px; margin:14px 0 10px; color:var(--muted); font-size:.74rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
.tg-sep::after { content:''; flex:1 1 auto; height:1px; background:var(--line); }
.trombi-group .trombi-members { display:flex; flex-direction:column; align-items:stretch; gap:10px; margin-top:0; }
.tg-row { display:flex; align-items:flex-start; gap:12px; }
.tg-rowlabel { flex:0 0 136px; padding-top:9px; color:var(--muted); font-size:.74rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.tg-chips { display:flex; flex-wrap:wrap; gap:8px; min-width:0; }
.tg-hint { padding-top:7px; font-size:.84rem; }
@media (max-width:700px) { .tg-row { flex-direction:column; gap:4px; } .tg-rowlabel { flex:none; padding-top:0; } }

/* Pastilles d'intervenants : neutres ; seul celui qui parle est en couleur (celle de la plateforme, pas celle du chapitre). */
.member .member-name:hover, .member .member-host:hover { background:var(--bg); }
.member.is-host .member-host { color:var(--ink); background:var(--bg); opacity:1; }
.member.is-speaking { background:var(--accent); border-color:var(--accent); }
.member.is-speaking.is-host .member-host { background:var(--bg); color:var(--ink); }
.member-add > summary:hover, .member-add[open] > summary { border-color:var(--accent); }
.member-pick .pick:hover { background:var(--bg); border-color:var(--accent); }
.trombi-group .member-add { margin-top:12px; }

/* Chapitres : fond très léger dans une nuance de bleu du logo (couleur du chapitre), plutôt qu'un fond neutre ou multicolore */
.trombi-group { background:color-mix(in srgb, var(--ch, var(--accent)) 8%, var(--card)); border-left:4px solid color-mix(in srgb, var(--ch, var(--accent)) 85%, var(--card)); }
.trombi-group.is-air { background:color-mix(in srgb, #dc2626 4%, color-mix(in srgb, var(--ch, var(--accent)) 8%, var(--card))); }
.tg-dot { background:var(--ch, var(--accent)); }
.ch-btn.secondary { background:color-mix(in srgb, var(--ch, var(--accent)) 10%, var(--card)); }
.ch-btn::before { background:var(--ch, var(--accent)); }
.tg-sep::after { background:color-mix(in srgb, var(--ch, var(--accent)) 28%, var(--line)); }
.trombi-group .tg-btn:hover:not(:disabled) { background:color-mix(in srgb, var(--ch, var(--accent)) 14%, var(--card)); }
.trombi-group .tg-main { background:var(--card); }
.member .member-name:hover, .member .member-host:hover { background:color-mix(in srgb, var(--ch, var(--accent)) 12%, var(--card)); }
.member.is-host .member-host { background:color-mix(in srgb, var(--ch, var(--accent)) 16%, var(--card)); }
.member.is-speaking.is-host .member-host { background:color-mix(in srgb, var(--ch, var(--accent)) 16%, var(--card)); }

/* « ＋ Ajouter un intervenant » devient « ✕ Fermer l'ajout d'un intervenant » quand la liste est ouverte */
.member-add .ma-close { display:none; }
.member-add[open] .ma-open { display:none; }
.member-add[open] .ma-close { display:inline; }

/* Lecture seule (super admin dans la démonstration) : tout est verrouillé, donc pas de cadenas sur chaque bouton, juste un aspect atténué */
html.demo-ro button.demo-locked::before { display:none; }
html.demo-ro .demo-locked { opacity:.7; }

/* Démonstration : sélecteur de vue « Admin » / « Super admin (lecture seule) » dans le bandeau. La vue affichée est pleine, l'autre est un bouton bien visible. */
.demo-view { display:inline-flex; align-items:center; gap:0; padding:3px; border-radius:999px; background:#fff; border:1px solid #fdba74; }
.demo-view-label { padding:0 10px 0 12px; font-weight:700; font-size:.82rem; color:#9a3412; }
.demo-view form { margin:0; display:flex; }
.demo-view .demo-view-btn { display:inline-flex; align-items:center; padding:5px 14px; border-radius:999px; font-size:.84rem; font-weight:700; line-height:1.3; white-space:nowrap; border:0; min-height:0; }
.demo-view .demo-view-btn.on { background:#265c71; color:#fff; cursor:default; }
.demo-view button.demo-view-btn.go { background:transparent; color:#265c71; box-shadow:inset 0 0 0 2px #265c71; cursor:pointer; }
.demo-view button.demo-view-btn.go:hover { background:#e6f1f7; filter:none; }
.demo-view form + .demo-view-btn, .demo-view .demo-view-btn + form { margin-left:4px; }
@media (max-width:700px) { .demo-view-label { display:none; } }

/* Bandeau de démonstration en trois zones : une ligne d'information collée en haut, puis — séparés — la vue (Admin / Super admin),
   les personnes connectées et les boutons de la démonstration. */
body.admin > .demo-banner { display:block; padding:6px 24px 8px; }
body.admin:not(.side-collapsed) > .demo-banner { padding-left:calc(236px + 24px); }
.demo-banner .demo-info { margin:0 0 6px; padding:0 0 5px; border-bottom:1px solid rgba(154,52,18,.18); font-size:.8rem; font-weight:600; line-height:1.35; }
.demo-banner .demo-bar { display:flex; align-items:center; gap:0; flex-wrap:wrap; }
.demo-banner .demo-group { display:flex; align-items:center; gap:8px; min-width:0; padding:2px 16px; border-left:1px solid rgba(154,52,18,.25); }
.demo-banner .demo-group:first-child { padding-left:0; border-left:0; }
.demo-banner .demo-presence { flex:1 1 260px; }
.demo-banner .demo-actions { flex:0 1 auto; flex-wrap:wrap; }
.demo-banner .demo-online { margin:0; font-size:.84rem; font-weight:500; line-height:1.35; }
@media (min-width:1100px) { .demo-banner .demo-info { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } }
@media (max-width:900px) { .demo-banner .demo-group { padding:4px 0; border-left:0; flex:1 1 100%; } .demo-banner .demo-presence { flex:1 1 100%; } }
@media (max-width:900px) { body.admin > .demo-banner, body.admin:not(.side-collapsed) > .demo-banner { padding-left:14px; padding-right:14px; } }

/* Deux vues, deux couleurs : Admin = bleu du logo (menu de gauche habituel), Super admin = gris anthracite. Le bouton de la vue affichée et le menu de gauche ont la même teinte. */
.demo-view .demo-view-btn.v-admin.on { background:#265c71; color:#fff; }
.demo-view .demo-view-btn.v-super.on { background:#333333; color:#fff; }
.demo-view button.demo-view-btn.v-admin.go { color:#265c71; box-shadow:inset 0 0 0 2px #265c71; }
.demo-view button.demo-view-btn.v-super.go { color:#333333; box-shadow:inset 0 0 0 2px #333333; }
.demo-view button.demo-view-btn.v-super.go:hover { background:#ececec; }
body.admin.view-super .side, body.admin.view-super.hdr-compact .side { background:#333333; }
body.view-super .side-top.active, body.view-super .side-link.active { background:#5a5a5a; }
body.view-super .side-head, body.view-super .side-group .side-head { color:#d0d0d0; }
body.view-super .side-items { border-left-color:rgba(208,208,208,.35); }
body.view-super .side-link { color:#ececec; }

/* Vue super admin de la démonstration : tout ce qui est d'ordinaire dans la couleur du menu (boutons, onglets, pastilles, liens, pliage des réglages…)
   passe au gris anthracite du menu de gauche, pour garder une seule logique de couleur dans la vue. Les couleurs du logo sont reprises par variables. */
body.view-super { --accent:#333333; --accent-soft:#ececec; --logo-dark:#333333; --logo-mid:#4a4a4a; --logo-light:#5c5c5c; --logo-sky:#d0d0d0; }
@media (prefers-color-scheme: dark) { body.view-super { --accent:#d0d0d0; --accent-soft:#2a2a2a; } }
body.view-super .tone-1 { background:color-mix(in srgb, #333333 5%, var(--card)); border-color:color-mix(in srgb, #333333 16%, var(--line)); }
body.view-super .gen-sep { border-top-color:color-mix(in srgb, #333333 16%, var(--line)); }
body.view-super .lang b { background:linear-gradient(to right, #5c5c5c, #4a4a4a); }
body.view-super .topbar-right .lang a:hover { background:#efefef; color:#4a4a4a; }
body.view-super .oxy-footer-text a, body.view-super .oxy-footer-privacy { color:#333333; }
body.view-super #demo-toast { background:#333333; }
body.view-super .mobile-panel { background:#4a4a4a; }
body.view-super .pv-ans { background:#efefef; }
body.view-super .side-top.active, body.view-super .side-link.active { background:var(--logo-light); }

/* Sélecteur de vue en haut du menu de gauche (démonstration) : deux grands boutons l'un sous l'autre, la vue affichée est pleine. */
.demo-viewbox { margin:0 0 14px; padding:0 0 14px; border-bottom:1px solid rgba(255,255,255,.22); display:flex; flex-direction:column; gap:6px; }
.demo-viewbox-label { padding:0 4px; color:var(--logo-sky); font-size:.7rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
.demo-viewbox form { margin:0; }
.demo-viewbox .dv-btn { display:flex; flex-direction:column; align-items:flex-start; gap:1px; width:100%; padding:8px 12px; border-radius:10px; text-align:left; font-size:.9rem; line-height:1.25; border:1px solid rgba(255,255,255,.35); background:transparent; color:#fff; min-height:0; box-shadow:none; }
.demo-viewbox .dv-btn b { font-weight:800; }
.demo-viewbox .dv-btn small { font-size:.74rem; font-weight:500; opacity:.85; }
.demo-viewbox .dv-btn.on { background:#fff; border-color:#fff; color:var(--logo-dark); cursor:default; }
.demo-viewbox .dv-btn.on small { opacity:.8; }
.demo-viewbox .dv-btn.go { cursor:pointer; border-width:2px; padding:7px 11px; }
.demo-viewbox .dv-btn.go:hover { background:rgba(255,255,255,.14); filter:none; }

/* Menu de gauche : pas de barre de défilement visible (il défile toujours à la molette et au doigt). */
body.admin .side { scrollbar-width:none; -ms-overflow-style:none; }
body.admin .side::-webkit-scrollbar { display:none; width:0; height:0; }
/* Vue super admin : pastille « Accès limité » (elle passe à la ligne du dessous si la place manque). */
.demo-viewbox .dv-pill { display:inline-block; margin-left:4px; padding:1px 7px; border-radius:999px; background:rgba(255,255,255,.22); color:#fff; font-size:.62rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; vertical-align:1px; }
.demo-viewbox .dv-btn.on .dv-pill { background:var(--logo-dark); color:#fff; }
.demo-viewbox { margin-bottom:10px; padding-bottom:10px; }

/* Bandeau de démonstration : une ligne qui dit ce qu'on peut faire dans la vue affichée (bleu en Admin, gris anthracite en Super admin). */
.demo-banner .demo-role { margin:0 0 6px; padding:0 0 5px; border-bottom:1px solid rgba(154,52,18,.18); font-size:.8rem; font-weight:500; line-height:1.35; color:#7c2d12; }
.demo-banner .demo-role strong { font-weight:800; color:#265c71; }
.demo-banner .demo-role.super strong { color:#333333; }
.demo-banner .demo-info { margin-bottom:4px; padding-bottom:4px; }

/* Bandeau de démonstration : phrase « n'existe pas dans la version finale » */
.demo-banner .demo-note { font-weight:500; color:#9a3412; opacity:.85; }
@media (min-width:1100px) { .demo-banner .demo-info { white-space:normal; overflow:visible; text-overflow:clip; } }

/* ===== Visite guidée de la démonstration (assets/tour.js) ===== */
.tour-layer { position:fixed; inset:0; z-index:3000; background:rgba(15,23,42,.55); }
.tour-spot { position:fixed; z-index:3001; border-radius:12px; pointer-events:none; box-shadow:0 0 0 100vmax rgba(15,23,42,.5), 0 0 0 3px #fff, 0 0 0 6px #f59e0b; transition:left .2s, top .2s, width .2s, height .2s; }
.tour-bubble { position:fixed; z-index:3002; width:min(340px, calc(100vw - 16px)); padding:14px 16px 12px; border-radius:14px; background:#fff; color:#18212f; box-shadow:0 12px 40px rgba(15,23,42,.35); font-size:.92rem; line-height:1.45; }
.tour-bhead { display:flex; align-items:center; gap:10px; margin:0 0 6px; }
.tour-bhead strong { flex:1 1 auto; font-size:1.02rem; }
.tour-num { flex:none; display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; background:#f59e0b; color:#fff; font-weight:800; font-size:.85rem; }
.tour-x { flex:none; width:26px; height:26px; padding:0; line-height:22px; border-radius:7px; background:none; border:1px solid #d6dbe4; color:#667085; font-size:1.1rem; cursor:pointer; }
.tour-x:hover { background:#f1f4f8; color:#18212f; filter:none; }
.tour-text { margin:0 0 10px; color:#334155; }
.tour-bfoot { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.tour-count { color:#667085; font-size:.78rem; font-weight:700; }
.tour-bbtns { display:flex; align-items:center; gap:6px; }
.tour-btn { padding:7px 14px; border-radius:9px; border:1px solid #cbd3df; background:#fff; color:#18212f; font-weight:700; font-size:.88rem; cursor:pointer; min-height:0; }
.tour-btn.small { padding:5px 11px; font-size:.82rem; }
.tour-btn.primary { background:#265c71; border-color:#265c71; color:#fff; }
.tour-btn.primary:hover { background:#326275; filter:none; }
.tour-btn.ghost:hover { background:#f1f4f8; filter:none; }
.tour-btn.link { border-color:transparent; background:none; color:#667085; font-weight:600; }
.tour-btn.link:hover { color:#18212f; background:none; filter:none; text-decoration:underline; }
.tour-arrow { position:absolute; width:14px; height:14px; background:#fff; transform:rotate(45deg); }
.tour-bubble[data-side=right] .tour-arrow { left:-7px; }
.tour-bubble[data-side=left] .tour-arrow { right:-7px; }
.tour-bubble[data-side=bottom] .tour-arrow { top:-7px; }
.tour-bubble[data-side=top] .tour-arrow { bottom:-7px; }
.tour-modal { position:fixed; z-index:3002; left:50%; top:50%; transform:translate(-50%, -50%); width:min(720px, calc(100vw - 24px)); max-height:calc(100vh - 24px); overflow:auto; padding:22px 26px 20px; border-radius:18px; background:#fff; color:#18212f; box-shadow:0 18px 60px rgba(15,23,42,.45); }
.tour-modal h2 { margin:0 0 6px; font-size:1.35rem; padding-right:34px; }
.tour-modal .tour-x { position:absolute; right:16px; top:16px; }
.tour-lead { margin:0 0 14px; color:#475467; }
.tour-compare { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:0 0 16px; }
.tour-col { padding:12px 14px; border-radius:12px; border:2px solid #265c71; background:#f4f9fb; }
.tour-col.is-super { border-color:#333333; background:#f4f4f4; }
.tour-col-head { display:flex; align-items:center; gap:8px; margin:0 0 2px; font-size:1.05rem; }
.tour-col.is-admin .tour-col-head strong { color:#265c71; }
.tour-col.is-super .tour-col-head strong { color:#333333; }
.tour-pill { padding:1px 8px; border-radius:999px; background:#333333; color:#fff; font-size:.62rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.tour-col-sub { margin:0 0 6px; color:#667085; font-size:.84rem; }
.tour-col ul { margin:0; padding-left:18px; font-size:.88rem; color:#334155; }
.tour-col li { margin:2px 0; }
.tour-actions { display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
@media (max-width:640px) { .tour-compare { grid-template-columns:1fr; } .tour-modal { padding:18px 16px 16px; } }
@media (prefers-reduced-motion:reduce) { .tour-spot { transition:none; } }
.tour-note { margin:0 0 14px; padding:8px 12px; border-radius:10px; background:#fff7ed; border:1px solid #fdba74; color:#9a3412; font-size:.84rem; line-height:1.4; }

/* Régie : les lignes « adresses et codes » passent sur une colonne selon la largeur de leur carte, pas celle de l'écran (l'aperçu du live à droite en prend une grande part). */
.regie-addr { container-type:inline-size; container-name:regieaddr; }
@container regieaddr (max-width: 1040px) { .regie-row { grid-template-columns:1fr; } .rr-act { justify-content:flex-start; } }
.regie-row > * { min-width:0; }

/* Menu de gauche : un espace de la couleur du fond des pages sépare la partie Super admin (Plateforme, Modules) de la partie Admin. */
.side-gap { height:14px; margin:12px -10px; background:var(--bg); }
/* Visite guidée : colonnes cliquables (Super admin à gauche, Admin à droite), bulle d'indication, pastilles de parcours. */
.tour-col { cursor:pointer; position:relative; padding-bottom:36px; transition:box-shadow .15s, transform .15s; }
.tour-col:hover, .tour-col:focus-visible { box-shadow:0 6px 18px rgba(15,23,42,.18); transform:translateY(-1px); outline:none; }
.tour-col-go { position:absolute; left:14px; bottom:10px; font-size:.8rem; font-weight:800; color:#265c71; }
.tour-col.is-super .tour-col-go { color:#333333; }
.tour-actions { padding-top:40px; align-items:center; }
.tour-startwrap { position:relative; display:inline-flex; }
.tour-hint { position:absolute; right:0; bottom:calc(100% + 11px); width:230px; padding:6px 10px; border-radius:10px; background:#f59e0b; color:#fff; font-size:.78rem; font-weight:700; line-height:1.3; box-shadow:0 4px 14px rgba(15,23,42,.2); }
.tour-hint::after { content:''; position:absolute; right:46px; bottom:-5px; width:10px; height:10px; background:#f59e0b; transform:rotate(45deg); }
/* Démonstration en mode assemblée générale (visite guidée) : rappel dans le bandeau, avec le retour à la démonstration classique */
.demo-ag { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 14px; margin:6px 0 8px; padding:8px 12px; border-radius:10px; background:#fdf3dc; border:1px solid #e0b972; color:#7a4f0a; font-size:.86rem; }
.demo-ag form { margin:0; }
.tour-col.is-ag { grid-column:1 / -1; border-color:#a16207; background:#fdf6e7; }
.tour-col.is-ag .tour-col-head strong, .tour-col.is-ag .tour-col-go { color:#7a4f0a; }
.tour-col.is-ag .tour-pill { background:#a16207; }
.tour-col.is-ag ul { columns:2; column-gap:22px; }
@media (max-width:640px) { .tour-col.is-ag ul { columns:1; } }
.tour-num.ag, .tour-seq.ag { background:#a16207; }
.tour-bar.ag .tour-bar-btn.go { background:#a16207; }
.tour-bar.ag .tour-bar-btn.go:hover { background:#b7791f; }
.tour-num.super { background:#333333; }
.tour-num.admin { background:#265c71; }
.tour-seq { display:inline-block; margin-right:4px; padding:0 7px; border-radius:999px; color:#fff; font-size:.6rem; font-weight:800; letter-spacing:.05em; }
.tour-seq.super { background:#333333; }
.tour-seq.admin { background:#265c71; }
.tour-bubble .tour-text { margin:0 0 8px; }
.tour-bubble .tour-text strong { color:#18212f; }
.tour-bubble { width:min(370px, calc(100vw - 16px)); }
.tour-count { display:flex; align-items:center; gap:4px; white-space:nowrap; }
/* Bas de la bulle : si le compteur (« ASSEMBLÉE GÉNÉRALE 6 / 9 ») et les boutons ne tiennent pas sur une ligne, les boutons passent dessous, à droite, sans jamais sortir de la bulle */
.tour-bfoot { flex-wrap:wrap; row-gap:8px; }
.tour-bbtns { margin-left:auto; flex-wrap:nowrap; }

/* Administration sur grand écran : tout est un peu plus petit (90 %), comme avec un zoom de navigateur, pour que les pages tiennent mieux avec le menu et l'aperçu du live.
   Les mesures lues par les scripts (position d'un élément, largeur de l'écran) sont corrigées de ce facteur (voir assets/admin.js, tour.js, lib/demo.php). */
@media (min-width:1500px) { html:has(body.admin) { zoom:.9; } }

/* Régie : pastilles d'état à angles de boutons, intervenant en scène sur toute la largeur, adresses en trois blocs. */
.rs-chip { border-radius:12px; }
.regie-status-help { margin:4px 0 6px; font-size:.86rem; color:var(--muted); }
.regie-status-help strong { color:var(--ink); }
.regie-live > .regie-wide { grid-column:1 / -1; }
.rw-cols { display:grid; grid-template-columns:repeat(auto-fit, minmax(340px, 1fr)); gap:6px 28px; }
.rw-col .chips { margin-bottom:4px; }
h4.regie-sub { margin:0 0 4px; font-size:1.02rem; }
.regie-sub-help { margin:0 0 6px; font-size:.86rem; }
.regie-addr + .regie-addr { margin-top:10px; }
/* Mêmes angles que les autres boutons (12 px) pour les boutons de taille normale ; les très petits boutons d'outils gardent un angle plus fin. */
.demo-viewbox .dv-btn, .burger, .hdr-burger, .tour-btn, .member-add > summary { border-radius:12px; }

/* Menu de gauche (démonstration) : le bloc « Vue » est séparé du menu par l'espace .side-gap, le même que dans le menu du Super admin (pas de marge ni de trait en plus). */
.demo-viewbox { margin-bottom:0; padding-bottom:0; border-bottom:0; }
/* La page est réduite à 90 % sur grand écran : les hauteurs écrites en « vh » ne suivent pas ce zoom, on les divise par le facteur (--z) pour que la couleur du menu aille jusqu'au pied de page. */
@media (min-width:1500px) { html:has(body.admin) { --z:.9; } }
body.admin .side, body.admin.hdr-compact .side { height:calc(100vh / var(--z, 1)); }
@supports (height:100dvh) { body.admin .side, body.admin.hdr-compact .side { height:calc(100dvh / var(--z, 1)); } }
body.admin .shell { min-height:calc(100vh / var(--z, 1) - 56px); }
.pv-real { height:calc(100vh / var(--z, 1) - 215px); }

/* Régie : petit QR code dans le bloc « QR code de la salle » ; titres des blocs d'adresses sur un bandeau bleu ciel. */
.qr-mini { float:right; width:92px; margin:0 0 8px 14px; padding:5px; background:#fff; border:1px solid var(--line-strong); border-radius:12px; line-height:0; }
.qr-mini svg { display:block; width:100%; height:auto; }
.qr-mini-help { margin:0 0 10px; }
/* Titres de blocs de toutes les pages d'administration : même bandeau bleu ciel que « Pour l'animateur » (gris-bleu clair dans la vue Super admin de la démonstration). */
h4.regie-sub, body.admin .card > h2, body.admin .card > h3, body.admin .card > h4 { margin-top:0; margin-bottom:12px; padding:8px 14px; border-radius:10px; background:color-mix(in srgb, #a9d6ee 55%, var(--card)); color:var(--logo-dark, #265c71); font-size:1.02rem; line-height:1.3; }
@media (prefers-color-scheme: dark) { h4.regie-sub, body.admin .card > h2, body.admin .card > h3, body.admin .card > h4 { background:color-mix(in srgb, #5797bb 28%, var(--card)); color:var(--logo-sky, #8cc4e3); } }
body.view-super h4.regie-sub, body.view-super.admin .card > h2, body.view-super.admin .card > h3, body.view-super.admin .card > h4 { background:#3d4852; color:#ffffff; }
@media (prefers-color-scheme: dark) { body.view-super h4.regie-sub, body.view-super.admin .card > h2, body.view-super.admin .card > h3, body.view-super.admin .card > h4 { background:color-mix(in srgb, #9fb3c1 24%, var(--card)); color:#d0d0d0; } }
/* Le bloc « QR code de la salle » est en colonne : le petit QR code se place en haut à droite de la carte, le titre et l'aide lui laissent la place. */
.regie-live > .card:has(.qr-mini) { position:relative; }
.qr-mini { position:static; float:none; flex:none; margin:0; }


/* Titres de sections des pages de modules (« Questions », « Résultats »…) : même bandeau ; le premier titre de la page reste le titre de la page, sans bandeau. */
body.admin :is(main > h2:not(:first-of-type), main > [data-soft-region="trombi-main"] > h2) { margin:26px 0 10px; padding:8px 14px; border-radius:10px; background:color-mix(in srgb, #a9d6ee 55%, var(--card)); color:var(--logo-dark, #265c71); font-size:1.02rem; line-height:1.3; }
body.admin :is(main > h2:not(:first-of-type), main > [data-soft-region="trombi-main"] > h2)[style*="--danger"] { background:color-mix(in srgb, var(--danger) 12%, var(--card)); }
body.view-super.admin :is(main > h2:not(:first-of-type), main > [data-soft-region="trombi-main"] > h2) { background:#3d4852; color:#ffffff; }
body.view-super.admin :is(main > h2:not(:first-of-type), main > [data-soft-region="trombi-main"] > h2)[style*="--danger"] { background:color-mix(in srgb, var(--danger) 12%, var(--card)); color:var(--danger); }
@media (prefers-color-scheme: dark) {
  body.admin :is(main > h2:not(:first-of-type), main > [data-soft-region="trombi-main"] > h2) { background:color-mix(in srgb, #5797bb 28%, var(--card)); color:var(--logo-sky, #8cc4e3); }
  body.view-super.admin :is(main > h2:not(:first-of-type), main > [data-soft-region="trombi-main"] > h2) { background:color-mix(in srgb, #9fb3c1 24%, var(--card)); color:#d0d0d0; }
  body.admin :is(main > h2:not(:first-of-type), main > [data-soft-region="trombi-main"] > h2)[style*="--danger"], body.view-super.admin :is(main > h2:not(:first-of-type), main > [data-soft-region="trombi-main"] > h2)[style*="--danger"] { background:color-mix(in srgb, var(--danger) 18%, var(--card)); color:var(--danger); }
}

/* Démonstration : la phrase « n'existent que dans la démonstration » est au centre de l'en-tête, détachée du bandeau (sur grand écran ; sinon elle reste dans le bandeau). */
.topbar-demo { display:none; }
@media (min-width:1500px) {
  .topbar-demo { display:block; flex:0 1 auto; align-self:flex-end; white-space:nowrap; margin:0 auto -1px; padding:5px 18px 6px; border:1px solid #fdba74; border-bottom:0; border-radius:10px 10px 0 0; background:#fff7ed; color:#9a3412; font-size:.8rem; font-weight:600; line-height:1.35; text-align:center; position:relative; z-index:1; }   /* onglet du bandeau jaune : même jaune, collé au bord haut du bandeau */
  .demo-banner .demo-note { display:none; }
}


.demo-viewbox a.dv-btn { text-decoration:none; box-sizing:border-box; }
button.onair-badge { border:0; min-height:0; box-shadow:none; font-family:inherit; cursor:pointer; }
button.onair-badge:hover { background:#b91c1c; filter:none; }
/* Chapitres : fond de chaque bloc plus teinté et liseré plus épais, pour bien distinguer un chapitre du suivant. */
.trombi-group { background:color-mix(in srgb, var(--ch, var(--accent)) 11%, var(--card)); border-left:5px solid var(--ch, var(--accent)); }
.trombi-group.is-air { background:color-mix(in srgb, #dc2626 5%, color-mix(in srgb, var(--ch, var(--accent)) 11%, var(--card))); border-left-color:#dc2626; }
.ch-btn.secondary { background:color-mix(in srgb, var(--ch, var(--accent)) 12%, var(--card)); }
/* Régie : les deux petits blocs (QR code de la salle, questionnaire) se partagent chacun la moitié de la largeur ; le QR code est sous le bandeau du titre, à droite du texte. */
.regie-grid.regie-live { grid-template-columns:repeat(2, minmax(0, 1fr)); }
@media (max-width:760px) { .regie-grid.regie-live { grid-template-columns:minmax(0, 1fr); } }
.qr-body { display:flex; gap:14px; align-items:flex-start; }
.qr-body > .qr-text { flex:1 1 auto; min-width:0; }
.qr-opts { margin-top:12px; padding-top:10px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:6px; }
/* Info-bulle noire immédiate (une seule, posée par admin.js) pour tous les éléments qui ont un title ou un data-tip. */
#oxy-tip { position:fixed; left:0; top:0; z-index:100000; width:max-content; max-width:260px; padding:7px 10px; border-radius:8px; background:#111827; color:#fff; font-size:.78rem; font-weight:500; line-height:1.35; text-align:left; white-space:normal; pointer-events:none; box-shadow:0 4px 14px rgba(0,0,0,.3); opacity:0; visibility:hidden; }
#oxy-tip.on { opacity:1; visibility:visible; }
#oxy-tip.measure { visibility:hidden; opacity:0; left:0; top:0; }
#oxy-tip::after { content:''; position:absolute; left:var(--ax, 50%); transform:translateX(-50%); border:6px solid transparent; }
#oxy-tip.up::after { top:100%; border-top-color:#111827; border-bottom:0; }
#oxy-tip.down::after { bottom:100%; border-bottom-color:#111827; border-top:0; }
#oxy-tip.right::after { left:auto; right:100%; top:var(--ay, 50%); transform:translateY(-50%); border-right-color:#111827; border-left:0; }   /* bulle d'une entrée du menu de gauche */
/* Message de confirmation affiché en bandeau flottant quand la page a gardé sa position après un bouton (voir admin.js). */
main > .notice.notice-float { position:fixed; left:50%; bottom:64px; transform:translateX(-50%); z-index:150; max-width:min(92%, 720px); margin:0; box-shadow:0 6px 20px rgba(0,0,0,.22); cursor:pointer; }
/* Page du live et page RGPD de la démonstration : même rappel orange au centre de l'en-tête, sans bandeau jaune dessous (donc encadré). */
@media (min-width:760px) {
  .topbar-demo.topbar-demo-pub { display:block; flex:0 1 560px; align-self:center; white-space:normal; margin:0 auto; padding:5px 14px; border:1px solid #fdba74; border-radius:10px; background:#fff7ed; color:#9a3412; font-size:.8rem; font-weight:600; line-height:1.35; text-align:center; }
}
.regie-addrs + .regie-addr { margin-top:10px; }   /* le conteneur regie-addrs (étape de la visite guidée) ne change pas l'espacement */
/* Visite guidée : barre « Précédent / Suivant » fixe, tout en haut au centre de l'écran. */
.tour-bar { position:fixed; top:3px; left:50%; transform:translateX(-50%); z-index:3003; display:flex; align-items:center; gap:4px; padding:2px; border-radius:999px; background:#18212f; box-shadow:0 3px 12px rgba(0,0,0,.35); }
.tour-bar-btn { padding:3px 12px; border:0; border-radius:999px; background:transparent; color:#fff; font-size:.76rem; font-weight:700; line-height:1.3; cursor:pointer; min-height:0; box-shadow:none; }
.tour-bar-btn:hover { background:rgba(255,255,255,.18); filter:none; }
.tour-bar-btn.go { background:#326275; }
.tour-bar-btn.go:hover { background:#5797bb; }
.tour-bar.super .tour-bar-btn.go { background:#4a4a4a; }
.tour-bar.super .tour-bar-btn.go:hover { background:#5c5c5c; }
.tour-bar-count { padding:0 6px; color:#c9d3e0; font-size:.72rem; font-weight:700; white-space:nowrap; }
/* Bac à sable : bouton « Visite guidée » dans l'en-tête, à la place de la recherche. */
.tour-head-btn { padding:7px 16px; border:1px solid var(--accent); border-radius:12px; background:var(--accent); color:#fff; font-size:.9rem; font-weight:700; white-space:nowrap; cursor:pointer; min-height:0; box-shadow:none; }
.tour-head-btn:hover { background:color-mix(in srgb, var(--accent) 85%, #fff); filter:none; }
/* Titrage de l'intervenant sur la vidéo : cliquable (il se réduit en languette) ; la languette est posée à gauche, en dehors de la vidéo. */
.trombi-lower { pointer-events:auto; cursor:pointer; }
.trombi-lower[hidden] { display:none; }
.trombi-lower:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.trombi-lower-tab { position:absolute; left:-15px; bottom:64px; z-index:4; width:15px; height:58px; padding:0; border:0; border-radius:8px 0 0 8px; background:rgba(10,15,25,.82); color:#fff; font-size:1rem; font-weight:700; line-height:58px; text-align:center; cursor:pointer; min-height:0; box-shadow:none; }
.trombi-lower-tab:hover { background:var(--accent); filter:none; }
.trombi-lower-tab[hidden] { display:none; }
@media (max-width:520px) { .trombi-lower-tab { bottom:44px; } }

/* Chapitres (module Intervenants & chapitres) : la durée du timer à côté du titre */
.tg-timer { display:inline-flex; align-items:center; gap:4px; flex:none; }
.tg-timer input { width:66px; padding:6px 8px; text-align:center; }

/* Réglages repliables (settings-fold) : le fond de la barre « Enregistrer » est celui de la carte, pas celui de la page (sinon une bande grisée apparaît sous les réglages) */
.settings-fold .savebar { background:linear-gradient(to top, var(--card) 70%, transparent); }

/* ==========================================================================================================================================
   Hiérarchie des titres de l'administration : trois niveaux, les mêmes couleurs partout (bleu ciel ; gris-bleu clair dans la vue Super admin).
   1. Titre de page ou de grande section (h2) : bandeau plein + liseré. 2. Sous-section (h3) et blocs repliables : bandeau léger + liseré.
   3. Étiquette de groupe de réglages (« Ce que voit le public »…) : texte coloré avec son liseré. Les blocs « carte » gardent leur bandeau de titre.
   Le bloc « Réglages du module » reste la barre foncée : c'est l'outil de la page, pas un titre.
   ========================================================================================================================================== */
body.admin { --band-bg:color-mix(in srgb, #a9d6ee 55%, var(--card)); --band-soft:color-mix(in srgb, #a9d6ee 24%, var(--card)); --band-fg:var(--logo-dark, #265c71); --band-accent:var(--logo-light, #5797bb); }
/* Vue Super admin : titres foncés, texte blanc (niveau 1 gris-bleu foncé, niveau 2 gris-bleu moyen) pour bien découper les pages ; le niveau 3 reste un texte anthracite. */
body.view-super.admin { --band-bg:#3d4852; --band-bg-fg:#ffffff; --band-soft:#5b6772; --band-soft-fg:#ffffff; --band-soft-accent:#3d4852; --band-fg:#333333; --band-accent:#333333; }
@media (prefers-color-scheme: dark) {
  body.admin { --band-bg:color-mix(in srgb, #5797bb 28%, var(--card)); --band-soft:color-mix(in srgb, #5797bb 14%, var(--card)); --band-fg:var(--logo-sky, #8cc4e3); --band-accent:#5797bb; }
  body.view-super.admin { --band-bg:color-mix(in srgb, #9fb3c1 24%, var(--card)); --band-soft:color-mix(in srgb, #9fb3c1 12%, var(--card)); --band-fg:#d0d0d0; --band-accent:#9a9a9a;
                          --band-bg-fg:#d0d0d0; --band-soft-fg:#d0d0d0; --band-soft-accent:#9a9a9a; }
}
/* 1. Titre de page / de grande section : tous les h2 posés directement dans la page (le premier compris), sauf la zone dangereuse qui garde sa couleur */
body.admin main h2:not(.group-title):not([style*="--danger"]):not(.card *):not(.inline-set *):not(form *) {
  margin:26px 0 10px; padding:8px 14px; border-radius:10px; background:var(--band-bg); color:var(--band-bg-fg, var(--band-fg)); border-left:5px solid var(--band-accent); font-size:1.08rem; line-height:1.3; }
body.admin main > h2:first-of-type, body.admin main > div:first-child > h2:first-child { margin-top:8px; }
/* 2. Sous-section : h3 posés directement dans la page (les zones de la Régie et les titres de réglages gardent leur style) */
body.admin main > h3:not(.regie-zone):not(.inline-set-title) { margin:20px 0 8px; padding:6px 12px; border-radius:8px; background:var(--band-soft); color:var(--band-soft-fg, var(--band-fg)); border-left:4px solid var(--band-soft-accent, var(--band-accent)); font-size:.98rem; line-height:1.3; }
/* 2 bis. Blocs repliables de la page (« Durées préparées », « Nouvelle question »…) : même bandeau léger ; « Réglages du module » garde sa barre foncée */
body.admin main details.settings-fold:not(#reglages) > summary { background:var(--band-soft); color:var(--band-soft-fg, var(--band-fg)); font-weight:700; border-left:4px solid var(--band-soft-accent, var(--band-accent)); border-radius:10px; padding:9px 16px; }
body.admin main details.settings-fold:not(#reglages)[open] > summary { border-radius:10px 10px 0 0; }
body.admin main details.settings-fold:not(#reglages) > summary::before { color:var(--band-soft-fg, var(--band-accent)); }
body.admin main details.settings-fold:not(#reglages) > summary.fold-plus::before { color:var(--band-soft-fg, var(--band-accent)); }
body.view-super.admin main details.settings-fold:not(#reglages) > summary :is(.muted, .sub) { color:inherit; opacity:.8; }   /* compteur « (3) » du titre lisible sur le fond foncé */
/* 3. Étiquette de groupe de réglages */
body.admin .group-title { display:flex; align-items:center; gap:8px; margin:0 0 4px; color:var(--band-fg); font-weight:800; }
body.admin .group-title::before { content:''; flex:none; width:4px; height:1.05em; border-radius:2px; background:var(--band-accent); }
/* Blocs repliables de la page Plateforme (« Réglages techniques », « Marque »…) : même bandeau léger que les autres blocs repliables */
body.admin main details.gen-fold > summary { background:var(--band-soft); color:var(--band-soft-fg, var(--band-fg)); border-left:4px solid var(--band-soft-accent, var(--band-accent)); border-radius:11px; }
body.admin main details.gen-fold[open] > summary { border-radius:11px 11px 0 0; }
/* Titres de section repliables (admin.js) : un clic replie ou déplie ce qui suit le titre ; tout est ouvert au chargement. */
/* Catégories de modules du Super admin (« Accès des participants », « Pendant le live »…) : bandeau de niveau 2, comme les blocs repliables */
body.admin h3.category-title { padding:8px 14px; border:0; border-left:4px solid var(--band-soft-accent, var(--band-accent)); border-radius:10px; background:var(--band-soft); color:var(--band-soft-fg, var(--band-fg)); font-size:.85rem; }
.fold-head { cursor:pointer; position:relative; padding-right:36px !important; user-select:none; }
.fold-head::after { content:'▾'; position:absolute; right:13px; top:50%; transform:translateY(-50%); font-size:.9em; opacity:.85; transition:transform .15s; }
.fold-head.is-folded::after { transform:translateY(-50%) rotate(-90deg); }
.fold-head:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.fold-hidden { display:none !important; }
/* Champ de date qui reprend une date réglée ailleurs (ex. date limite du vote par correspondance = date de l'événement) : en grisé tant qu'on n'y touche pas */
input.dt-default { color:var(--muted); font-style:italic; }
/* Réglages ouverts sous un mode d'accès (Formulaire, Invitations…) : le panneau ne colle plus à la boîte qui le contient, il garde le même retrait à gauche que sous un module (Intervenants, Questions…) */
.choice > .inline-set { width:auto; margin:8px 14px 14px; }
/* Adresses : page dédiée, bloc « adresse du live » sous l'identité, et bloc replié dans la Régie */
.fold-body { padding:12px 14px 14px; }
.settings-fold > summary.fold-link::before { content:'🔗'; }
.adr-pin { font-variant-numeric:tabular-nums; letter-spacing:.18em; font-size:1.05rem; }
.gen-live { margin:12px 0 4px; }
.gen-live .pw-line { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.gen-live .pw-line input { flex:1 1 280px; min-width:0; }
.regie-fold { margin-top:18px; }
.adr-pin-form { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:2px 0 0; }
.adr-pin-form .pin-input { width:92px; text-align:center; letter-spacing:.2em; }
/* Page Adresses : les trois adresses des participants côte à côte (elles sont courtes), l'une sous l'autre sur un écran étroit */
.adr-trio { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; margin:0 0 10px; }
.adr-trio > .regie-addr { margin:0; }
@media (max-width:1100px) { .adr-trio { grid-template-columns:1fr; } }
/* Pastille « pour qui » sur chaque adresse : participants (vert), animation (bleu), régie (orange) */
.adr-tag { display:inline-block; margin-left:8px; padding:2px 9px; border-radius:99px; font-size:.7rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; vertical-align:middle; }
.adr-tag-part { background:#dcfce7; color:#166534; }
.adr-tag-anim { background:#dbeafe; color:#1e40af; }
.adr-tag-regie { background:#ffedd5; color:#9a3412; }
@media (prefers-color-scheme: dark) { .adr-tag-part { background:#14532d; color:#bbf7d0; } .adr-tag-anim { background:#1e3a8a; color:#bfdbfe; } .adr-tag-regie { background:#7c2d12; color:#fed7aa; } }
.adr-name { display:flex; flex-wrap:wrap; align-items:center; gap:4px 0; }
.adr-trio .rr-url { flex-wrap:wrap; }
.adr-trio .rr-url input { flex:1 1 100%; min-width:0; }
/* Les trois adresses des participants : le texte en haut, l'adresse et ses boutons alignés en bas de chaque bloc, à la même hauteur */
.adr-trio > .regie-addr { display:flex; flex-direction:column; }
.adr-trio .regie-row { flex:1; display:flex; flex-direction:column; }
.adr-trio .rr-url { margin-top:auto; padding-top:10px; }
.adr-hint { margin:4px 0 12px; }
/* Page animateur : les boutons de chapitre, repliés avec le menu */
.host-chapters { margin:0 14px 12px; }
.host-chapters .card-label { margin:0 0 6px; }
.host-speakers.is-collapsed .host-chapters, .host-speakers.no-stage .host-chapters { display:none; }
/* Quiz : champs propres au quiz, bonnes réponses marquées */
#poll-form:not(.is-quiz) .quiz-only { display:none; }
.v-opt-row { display:flex; gap:8px; align-items:center; margin-bottom:6px; }
.v-opt-row input[name="options[]"] { flex:1 1 auto; }
.v-ok { display:inline-flex; align-items:center; justify-content:center; flex:none; width:34px; height:34px; border:1px solid var(--line, #cbd5e1); border-radius:8px; background:var(--card); cursor:pointer; }
.v-ok input { width:18px; height:18px; margin:0; accent-color:#16a34a; }
.quiz-fields { margin:6px 0 14px; padding:10px 12px; border:1px dashed var(--line, #cbd5e1); border-radius:10px; }
.vote-quiz-badge { background:#e3f0f7; color:#265c71; border-color:transparent; }
.vote-left { font-variant-numeric:tabular-nums; color:#b45309; }
.vote-bullets li.is-correct, .v-row.is-correct .v-label { font-weight:800; color:#15803d; }
.vote-bullets li.is-correct::after, .v-row.is-correct .v-label::after { content:' ✓'; }
.v-row.is-correct .v-bar i { background:#16a34a; }
.vote-series { margin:0 0 10px; }
/* Quiz chez le participant : minuteur, correction, score, classement */
.quiz-tag { display:inline-block; margin:0 0 6px; padding:2px 10px; border-radius:99px; background:#e3f0f7; color:#265c71; font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.quiz-timer { display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; margin:6px 0 10px; font-size:.95rem; }
.quiz-timer b { font-variant-numeric:tabular-nums; font-size:1.15rem; }
.quiz-timer.is-low b { color:#dc2626; }
.quiz-track { flex:1 0 100%; height:8px; border-radius:6px; background:var(--line, #e2e8f0); overflow:hidden; }
.quiz-track i { display:block; height:100%; width:100%; background:var(--accent, #5797bb); transition:width .25s linear; }
.quiz-timer.is-low .quiz-track i { background:#dc2626; }
.quiz-verdict { margin:6px 0 10px; font-size:1.25rem; font-weight:800; }
.quiz-verdict.is-ok { color:#15803d; } .quiz-verdict.is-ko { color:#b91c1c; } .quiz-verdict.is-none { color:var(--muted, #64748b); }
.quiz-opts { display:flex; flex-direction:column; gap:6px; margin:0 0 10px; }
.quiz-opt { display:flex; align-items:center; gap:10px; padding:9px 12px; border:1px solid var(--line, #cbd5e1); border-radius:10px; }
.quiz-opt.is-correct { border-color:#16a34a; background:color-mix(in srgb, #16a34a 12%, var(--card, #fff)); font-weight:700; }
.quiz-opt.is-mine:not(.is-correct) { border-color:#dc2626; background:color-mix(in srgb, #dc2626 9%, var(--card, #fff)); }
.quiz-mark { flex:none; width:1.2em; text-align:center; font-weight:900; }
.quiz-opt.is-correct .quiz-mark { color:#16a34a; } .quiz-opt.is-mine:not(.is-correct) .quiz-mark { color:#dc2626; }
.quiz-label { flex:1 1 auto; min-width:0; }
.quiz-note { flex:none; font-size:.78rem; font-style:normal; color:var(--muted, #64748b); }
.quiz-pct { flex:none; font-variant-numeric:tabular-nums; color:var(--muted, #64748b); }
.quiz-score { margin:8px 0 4px; font-size:1.1rem; font-weight:800; }
.quiz-rank-title { margin:10px 0 4px; font-weight:800; }
.quiz-rank { margin:0; padding-left:1.4em; } .quiz-rank li { display:flex; justify-content:space-between; gap:12px; padding:2px 0; } .quiz-rank li.is-me { font-weight:800; color:#15803d; }
/* Pli « Réglages du module » : résumé des valeurs sur la ligne repliée */
.settings-fold > summary .fold-sum { display:flex; flex-wrap:wrap; gap:6px 8px; margin:7px 0 2px; font-weight:400; }
.settings-fold[open] > summary .fold-sum { display:none; }
.sum-chip { display:inline-flex; align-items:center; gap:7px; padding:3px 4px 3px 11px; border-radius:99px; background:rgba(255,255,255,.14); font-size:.84rem; line-height:1.3; }
.sum-l { opacity:.88; }
.sum-v { padding:1px 10px; border-radius:99px; background:rgba(255,255,255,.22); font-weight:700; }
.sum-v.is-yes { background:#16a34a; color:#fff; }
.sum-v.is-no { background:rgba(255,255,255,.14); color:rgba(255,255,255,.75); text-decoration:line-through; text-decoration-thickness:1px; }
/* Assemblée générale : jauge du quorum (page du module, Régie) et bande sur la page animateur */
.ag-line { font-size:1.1rem; font-weight:700; margin-bottom:10px; }
.ag-gauge { position:relative; height:18px; border-radius:9px; background:var(--line, #e2e8f0); overflow:hidden; }
.ag-gauge i { display:block; height:100%; width:0; background:#f59e0b; transition:width .6s ease, background .3s; }
.ag-gauge.is-ok i { background:#16a34a; }
.ag-gauge u { position:absolute; top:-2px; bottom:-2px; width:3px; background:#0f172a; text-decoration:none; }
.host-quorum { margin:0 14px 12px; padding:10px 14px; border-left:5px solid #f59e0b; border-radius:8px; background:color-mix(in srgb, #f59e0b 12%, var(--card)); font-weight:700; font-size:calc(.95rem * var(--host-scale, 1)); }
.host-quorum.is-ok { border-left-color:#16a34a; background:color-mix(in srgb, #16a34a 12%, var(--card)); }
/* Démonstration de l'administration : prévue pour un écran d'ordinateur. Sur téléphone et tablette, un message le dit tout en haut du bandeau. */
.demo-banner .demo-screen { display:none; }
@media (max-width:900px) { .demo-banner .demo-screen { display:block; flex:1 1 100%; margin:0 0 8px; padding:8px 10px; border-radius:8px; background:#9a3412; color:#fff; font-size:.82rem; font-weight:600; line-height:1.4; } }
/* Téléphone : le champ « Choisir un fichier » du logo passe à la ligne au lieu de faire déborder la page à droite */
@media (max-width:700px) { .gen-logo { flex-wrap:wrap; } .gen-logo input[type=file] { max-width:100%; } }