/* =====================================================================
   conga.css — thème, mise en page, animations
   ===================================================================== */
:root{
  --bg:#0f0d0c; --bg2:#171311; --surface:#201a17; --surface2:#2a2320;
  --line:#3a2f2a; --line2:#4c3d35;
  --txt:#f5ece5; --txt2:#bcaba0; --txt3:#827066;
  --open:#f0873c; --slap:#ffd166; --bass:#ef476f;
  --heel:#9fb0c9; --toe:#7d8aa3; --muff:#b191ff; --clave:#0fd9a3;
  --radius:16px;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --sans:"Segoe UI",system-ui,-apple-system,sans-serif;

  /* halos de fond */
  --halo1:#2d2017; --halo2:#1a2226;
  --grain:#fff; --grain-op:.035;
  /* surfaces de l'interface qui ne se déduisent pas des précédentes */
  --bar-bg:rgba(26,21,18,.86); --bar-bg-fs:rgba(15,12,11,.72);
  --enfonce:#141110; --survol:#382d27;
  --chaud:#3a2418; --chaud2:#2b1d16; --chaud3:#3a2c22;
  --rime-txt:#ffe9d6; --prim-bg:#16302a; --prim-txt:#dffff4; --prim-bg2:#1c4038;

  /* la chute — lues par ui.js au moment de dessiner (canvas, pas de CSS) */
  --fall-haut:#0b0a09; --fall-mil:#141010; --fall-bas:#1e1613;
  --fall-fondu:.35;
  --fall-lane:rgba(255,255,255,.032); --fall-lane-off:rgba(255,255,255,.008);
  --fall-bord:rgba(255,255,255,.06);
  --fall-grille:rgba(255,255,255,.06); --fall-grille-fort:rgba(255,255,255,.18);
  --fall-ligne:#ffffff; --fall-label:rgba(130,112,102,.9);
  --note-txt:#17110d; --note-accent:rgba(255,255,255,.55);
  --syl-txt:rgba(245,236,229,.9);
  --pad-off:rgba(255,255,255,.05); --pad-bord:rgba(255,255,255,.12);
  --pad-txt:rgba(255,255,255,.22); --pad-lab:rgba(188,171,160,.75);
}

/* ---------- directions artistiques ---------- */
/* Chaque DA redéfinit la même liste de variables : le canvas les relit à
   chaque changement (voir palette() dans ui.js), rien n'est codé en dur. */

/* Néon Havane — nuit, bleu-violet profond, notes néon */
html[data-da="neon"]{
  --bg:#07060f; --bg2:#100d1e; --surface:#171130; --surface2:#1f1840;
  --line:#2e2456; --line2:#463a78;
  --txt:#f2eaff; --txt2:#b9aee0; --txt3:#7d719f;
  --open:#ff7ab6; --slap:#ffe066; --bass:#ff4d6d;
  --heel:#62d6ff; --toe:#3f9fd8; --muff:#b06bff; --clave:#34ffd0;
  --halo1:#241a4d; --halo2:#0b3348; --grain:#9fd8ff; --grain-op:.05;
  --fall-haut:#05040c; --fall-mil:#0d0a1c; --fall-bas:#151030;
  --fall-fondu:.35;
  --fall-lane:rgba(150,180,255,.055); --fall-lane-off:rgba(150,180,255,.012);
  --fall-bord:rgba(140,190,255,.10);
  --fall-grille:rgba(120,200,255,.09); --fall-grille-fort:rgba(150,225,255,.30);
  --fall-ligne:#8ef4ff; --fall-label:rgba(140,125,180,.9);
  --note-txt:#0b0718; --note-accent:rgba(255,255,255,.7);
  --syl-txt:rgba(228,218,255,.92);
  --pad-off:rgba(150,180,255,.06); --pad-bord:rgba(150,190,255,.16);
  --pad-txt:rgba(180,190,240,.25); --pad-lab:rgba(160,150,200,.75);
  --bar-bg:rgba(20,15,42,.86); --bar-bg-fs:rgba(7,6,15,.74);
  --enfonce:#0d0a1c; --survol:#2a2154;
  --chaud:#3a1f47; --chaud2:#231640; --chaud3:#33254f;
  --rime-txt:#ffd9ee; --prim-bg:#10314a; --prim-txt:#d6fff6; --prim-bg2:#164059;
}

/* Papier & encre — clair, lisible en plein jour */
html[data-da="papier"]{
  --bg:#ece5d8; --bg2:#f4efe4; --surface:#fbf7ee; --surface2:#f2ece0;
  --line:#d9cfbc; --line2:#c2b49a;
  --txt:#241e18; --txt2:#5b5045; --txt3:#8b7f70;
  --open:#c2551a; --slap:#a87a10; --bass:#b02b46;
  --heel:#4e6a8c; --toe:#39536e; --muff:#6a3fbf; --clave:#0a7a5c;
  --halo1:#f7e9cf; --halo2:#dfeaea; --grain:#241e18; --grain-op:.05;
  --fall-haut:#fcf8f0; --fall-mil:#f5efe2; --fall-bas:#ece4d3;
  --fall-fondu:.62;
  --fall-lane:rgba(36,30,24,.06); --fall-lane-off:rgba(36,30,24,.018);
  --fall-bord:rgba(36,30,24,.16);
  --fall-grille:rgba(36,30,24,.15); --fall-grille-fort:rgba(36,30,24,.4);
  --fall-ligne:#241e18; --fall-label:rgba(120,106,92,.95);
  --note-txt:#fff8ef; --note-accent:rgba(36,30,24,.6);
  --syl-txt:rgba(36,30,24,.85);
  --pad-off:rgba(36,30,24,.05); --pad-bord:rgba(36,30,24,.16);
  --pad-txt:rgba(36,30,24,.28); --pad-lab:rgba(91,80,69,.8);
  --bar-bg:rgba(251,247,238,.9); --bar-bg-fs:rgba(251,247,238,.84);
  --enfonce:#efe7d8; --survol:#e7dfcd;
  --chaud:#f6e3d0; --chaud2:#efd9c2; --chaud3:#f2e3c6;
  --rime-txt:#7a3410; --prim-bg:#dff0e7; --prim-txt:#0a5b44; --prim-bg2:#cfe8db;
}
html[data-da="papier"] .play{color:#fff8ef}
html[data-da="papier"] kbd{background:#efe7d8}

/* Vinyle 73 — terracotta, moutarde, olive, crème cassée */
html[data-da="vinyle"]{
  --bg:#1d1611; --bg2:#261d16; --surface:#31251c; --surface2:#3d2e23;
  --line:#54402f; --line2:#6d5540;
  --txt:#f6e7cd; --txt2:#d3bb9b; --txt3:#9c8467;
  --open:#e2622e; --slap:#eeb43c; --bass:#c03a3a;
  --heel:#8ea86a; --toe:#6d8654; --muff:#c98cb4; --clave:#5fbf94;
  --halo1:#42291a; --halo2:#2a2f1c; --grain:#ffd9a0; --grain-op:.06;
  --fall-haut:#171009; --fall-mil:#221708; --fall-bas:#33210f;
  --fall-fondu:.4;
  --fall-lane:rgba(255,214,150,.05); --fall-lane-off:rgba(255,214,150,.012);
  --fall-bord:rgba(255,214,150,.10);
  --fall-grille:rgba(255,214,150,.10); --fall-grille-fort:rgba(255,214,150,.30);
  --fall-ligne:#ffd9a0; --fall-label:rgba(156,132,103,.95);
  --note-txt:#1d1207; --note-accent:rgba(255,236,200,.6);
  --syl-txt:rgba(246,231,205,.92);
  --pad-off:rgba(255,214,150,.06); --pad-bord:rgba(255,214,150,.15);
  --pad-txt:rgba(255,214,150,.24); --pad-lab:rgba(211,187,155,.75);
  --bar-bg:rgba(49,37,28,.88); --bar-bg-fs:rgba(29,22,17,.76);
  --enfonce:#241a13; --survol:#4a3729;
  --chaud:#4d3016; --chaud2:#392514; --chaud3:#4a3520;
  --rime-txt:#ffe2b8; --prim-bg:#20392e; --prim-txt:#d6ffe9; --prim-bg2:#2b4b3c;
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:
    radial-gradient(1100px 620px at 12% -12%, var(--halo1) 0%, transparent 62%),
    radial-gradient(900px 520px at 96% -4%, var(--halo2) 0%, transparent 58%),
    var(--bg);
  color:var(--txt); font-family:var(--sans); line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;opacity:var(--grain-op);
  background-image:radial-gradient(var(--grain) 1px, transparent 1px);
  background-size:3px 3px;mix-blend-mode:overlay;
}
.app{max-width:1060px;margin:0 auto;padding:16px 16px 70px}
h2{font-size:12px;text-transform:uppercase;letter-spacing:.15em;color:var(--txt3);margin:0 0 14px;font-weight:600}
.hidden{display:none}
/* Masqué à l'œil, pas au lecteur d'écran : display:none le retirerait aussi
   de l'arbre d'accessibilité, ce qui reviendrait à ne pas avoir de titre. */
.hors-ecran{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ---------- barre de transport ---------- */
.bar{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:12px 16px;margin-bottom:14px;
  background:var(--bar-bg);backdrop-filter:blur(14px);
  border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.play{
  width:58px;height:58px;flex:0 0 auto;border:none;border-radius:50%;cursor:pointer;
  background:linear-gradient(160deg,#f6a055,#d9591b);
  box-shadow:0 8px 22px rgba(217,89,27,.38), inset 0 1px 0 rgba(255,255,255,.28);
  color:#1b0f06;font-size:21px;display:grid;place-items:center;
  transition:transform .12s ease, box-shadow .2s, background .3s;
}
.play:hover{transform:translateY(-2px)}
.play:active{transform:scale(.95)}
.play.on{background:linear-gradient(160deg,#98a3b5,#5c6573);box-shadow:0 6px 16px rgba(0,0,0,.4)}

.tempo{display:flex;flex-direction:column;gap:5px;min-width:210px;flex:1 1 210px}
.tempo-num{display:flex;align-items:baseline;gap:7px;font-family:var(--mono);line-height:1}
.tempo-num span{font-size:34px;font-weight:600;letter-spacing:-.03em}
.tempo-num small{font-size:10px;letter-spacing:.18em;color:var(--txt3)}
#tempo{width:100%;accent-color:var(--open);height:24px}
#tempo:disabled{opacity:.3}
.tempo-btns{display:flex;gap:6px}
.mini{
  background:var(--surface2);border:1px solid var(--line);color:var(--txt);
  border-radius:9px;padding:5px 11px;cursor:pointer;font-size:12px;font-family:var(--mono);
  min-height:30px;transition:.15s;
}
.mini:hover{background:var(--survol);border-color:var(--line2)}
.mini.prim{border-color:var(--clave);color:var(--prim-txt);background:var(--prim-bg)}
.mini.prim:hover{background:var(--prim-bg2)}
.fs{margin-left:auto;font-size:15px;padding:6px 12px}

.lamps{display:flex;gap:7px}
.lamp{width:11px;height:11px;border-radius:50%;background:var(--enfonce);border:1px solid var(--line);transition:background .07s, box-shadow .07s}
.lamp.on{background:var(--open);box-shadow:0 0 12px var(--open)}
.lamp.on.strong{background:var(--slap);box-shadow:0 0 16px var(--slap)}

.fall-fen{
  display:flex;gap:5px;align-items:center;
  font:500 10px/1 var(--mono);color:var(--txt3);letter-spacing:.1em;text-transform:uppercase;
}
.fall-fen button{
  border:1px solid var(--line);background:var(--surface2);color:var(--txt2);
  font:500 11px var(--mono);border-radius:7px;padding:4px 9px;cursor:pointer;min-height:28px;
}
.fall-fen button.on{border-color:var(--open);color:var(--txt);background:var(--chaud)}

/* ---------- la chute ---------- */
.stage{
  background:linear-gradient(180deg,var(--surface) 0%,var(--bg2) 100%);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:14px;margin-bottom:18px;
}
.fall-wrap{position:relative}
#fall{
  display:block;width:100%;height:min(66vh,560px);border-radius:12px;
  background:linear-gradient(180deg,var(--fall-haut) 0%,var(--fall-mil) 58%,var(--fall-bas) 100%);
  border:1px solid var(--line);
}

/* ---------- réglages ---------- */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:18px;overflow:hidden}
.panel summary{
  cursor:pointer;padding:13px 18px;font-size:12px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--txt3);font-weight:600;list-style:none;
}
.panel summary::-webkit-details-marker{display:none}
.panel summary::after{content:" ▾";color:var(--txt3)}
.panel[open] summary::after{content:" ▴"}
.panel-in{padding:0 18px 18px;border-top:1px solid var(--line)}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin-top:16px}
label.field{display:block;font-size:12px;color:var(--txt2);margin-bottom:6px}
select{
  width:100%;background:var(--surface2);color:var(--txt);border:1px solid var(--line);
  border-radius:10px;padding:10px;font-size:14px;font-family:inherit;min-height:42px;
}
.opts{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center;margin-top:18px}
.chk{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--txt2);cursor:pointer;min-height:34px}
/* 24 px : cible tactile minimale (WCAG 2.2 AA, 2.5.8). L'application se
   pilote au doigt sur un téléphone posé à côté de l'instrument — souvent
   en jouant, donc sans regarder. */
.chk input{accent-color:var(--open);width:24px;height:24px;flex:0 0 auto}
.slider{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--txt2)}
.slider input{accent-color:var(--open);width:110px;height:24px}
.slider label{cursor:pointer}

/* ---------- cartes ---------- */
.card{
  background:linear-gradient(180deg,var(--surface) 0%,var(--bg2) 100%);
  border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin-bottom:18px;
}
/* ---------- séance guidée ---------- */
.parcours-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.pbtn{
  text-align:left;background:var(--surface2);border:1px solid var(--line);
  color:var(--txt);border-radius:12px;padding:13px 14px;cursor:pointer;transition:.15s;
  display:flex;flex-direction:column;gap:5px;
}
.pbtn:hover{border-color:var(--line2);transform:translateY(-1px)}
.pbtn.encours{border-color:var(--open)}
.pbtn.fini{border-color:var(--clave)}
.pbtn b{font-size:14px}
.pbtn > span{font-size:11px;color:var(--txt3)}
.jauge{height:4px;background:var(--enfonce);border-radius:3px;overflow:hidden;margin:3px 0 1px}
.jauge i{display:block;height:100%;background:var(--open);border-radius:3px;transition:width .3s}
.pbtn.fini .jauge i{background:var(--clave)}
.pcompte{font:500 10.5px var(--mono);color:var(--txt3);letter-spacing:.03em}

.seance-tete{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:14px}
.seance-tete b{font-size:15px}
.pdesc{margin:5px 0 0;font-size:12.5px;color:var(--txt3);line-height:1.6;max-width:62ch}

.etape{
  background:linear-gradient(180deg,var(--chaud2),transparent);
  border:1px solid var(--line2);border-radius:14px;padding:16px;
}
.etape.finie{background:linear-gradient(180deg,rgba(15,217,163,.09),transparent);border-color:rgba(15,217,163,.35)}
.et-num{font:600 9.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--txt3)}
.et-titre{font-size:17px;font-weight:600;margin:5px 0 10px;line-height:1.3}
.et-consigne{margin:0 0 9px;font-size:14.5px;color:var(--txt)}
.et-pourquoi{margin:0;font-size:12.5px;color:var(--txt2);line-height:1.65;max-width:66ch}
.et-jauge{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px;
  padding-top:12px;border-top:1px solid rgba(255,255,255,.07)}
.et-jauge > span:first-child{font:500 9.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--txt3)}
.points{display:flex;gap:6px}
.pt{width:13px;height:13px;border-radius:50%;background:var(--enfonce);border:1px solid var(--line)}
.pt.on{background:var(--open);border-color:var(--open);box-shadow:0 0 9px var(--open)}
.et-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}

.rythmes-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
h3.niveau{
  font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--txt3);
  font-weight:600;margin:18px 0 10px;
}
h3.niveau:first-child{margin-top:0}
.rbtn{
  position:relative;text-align:left;background:var(--surface2);border:1px solid var(--line);
  color:var(--txt);border-radius:12px;padding:11px 12px;cursor:pointer;transition:.15s;
}
.rbtn:hover{border-color:var(--line2);transform:translateY(-1px)}
.rbtn.sel{border-color:var(--open);background:linear-gradient(180deg,var(--chaud),var(--chaud2));box-shadow:0 0 0 1px var(--open) inset}
.rbtn b{display:block;font-size:14px;margin-bottom:2px}
.rbtn span{font-size:11px;color:var(--txt3)}
.badge{
  display:inline-block;margin-top:6px;font:600 9px var(--mono);letter-spacing:.08em;
  background:var(--chaud3);color:var(--slap);border-radius:5px;padding:2px 6px;
}
.rime{font-size:clamp(17px,2.4vw,21px);line-height:1.7;color:var(--rime-txt);border-left:3px solid var(--open);padding:2px 0 2px 16px;margin:0;font-style:italic}
.chant{font-family:var(--mono);font-size:13px;color:var(--slap);margin-top:12px;letter-spacing:.05em}
.desc{color:var(--txt2);font-size:14px;margin:14px 0 0}

.legend{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:10px}
.lg{display:flex;gap:11px;align-items:flex-start;background:var(--surface2);border:1px solid var(--line);border-radius:12px;padding:10px 12px;cursor:pointer;text-align:left;color:inherit;font:inherit}
.lg:hover{border-color:var(--line2)}
.dot{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:700 10px var(--mono);color:#17110d;flex:0 0 auto;margin-top:2px}
.lg b{font-size:13px}
.lg p{margin:2px 0 0;font-size:11.5px;color:var(--txt3);line-height:1.4}
kbd{font:500 10px var(--mono);background:var(--enfonce);border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:1px 5px;color:var(--txt2)}

.tips{columns:2;column-gap:26px;font-size:14px;color:var(--txt2)}
.tips p{margin:0 0 12px;break-inside:avoid}
.tips b{color:var(--txt)}
footer{color:var(--txt3);font-size:12px;text-align:center;margin-top:22px}
.kbd-help{display:block;margin-top:4px;font-family:var(--mono);font-size:11px}

/* ---------- plein écran : la chute seule ---------- */
body.fs{overflow:hidden}
body.fs .app{max-width:none;padding:0;height:100vh;display:flex;flex-direction:column}
body.fs .panel,body.fs .card,body.fs footer{display:none}
body.fs .stage{
  flex:1;margin:0;padding:0;border:none;border-radius:0;background:none;min-height:0;
}
body.fs .fall-wrap{height:100%}
body.fs #fall{height:100%;border-radius:0;border:none}
body.fs .bar{
  position:fixed;top:0;left:0;right:0;z-index:60;border-radius:0;border:none;
  border-bottom:1px solid rgba(58,47,42,.6);background:var(--bar-bg-fs);
  transition:opacity .45s ease, transform .45s ease;
}
body.fs.idle .bar{opacity:0;transform:translateY(-100%);pointer-events:none}

/* ---------- mobile ---------- */
@media(max-width:680px){
  .tips{columns:1}
  .bar{gap:10px;padding:10px}
  .tempo{min-width:150px}
  .tempo-num span{font-size:27px}
  .lamps{order:5}
  .fall-fen{order:6}
  .fs{position:absolute;top:10px;right:10px;margin:0}
  #fall{height:min(62vh,520px)}
}
@media(prefers-reduced-motion:reduce){
  .play,.mini,.rbtn{transition:none}
}