/* Ma Guitare — feuille de style unique.
 *
 * Deux contextes, une seule feuille : téléphone au doigt, et téléviseur à
 * trois mètres avec une télécommande. Le mode TV n'est pas une autre page mais
 * la classe .tv sur <html> : tout grossit, les cibles de focus deviennent
 * visibles, et la barre d'onglets passe sur le côté (un pouce remonte vers le
 * bas de l'écran, une télécommande non).
 */

:root {
  --fond: #0E121B;
  --fond-2: #161C29;
  --fond-3: #1E2637;
  --trait: #2A3344;
  --texte: #EEF2F8;
  --texte-2: #9AA7BD;
  --bois: #D6A86A;
  --bois-sombre: #B07842;
  --corde: #E7ECF5;
  --ok: #58D08B;
  --presque: #E8C766;
  --faux: #E87A7A;
  --accent: #7FB8FF;
  --rayon: 14px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding-bottom: 88px;
  padding-top: env(safe-area-inset-top, 0);
  -webkit-tap-highlight-color: transparent;
}

h1 { font-size: 19px; margin: 0; }
h2 { font-size: 17px; margin: 0 0 10px; }
h3 { font-size: 15px; margin: 18px 0 8px; color: var(--bois); }

/* ---------------------------------------------------------------- en-tête */
.entete {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; background: var(--fond-2); border-bottom: 1px solid var(--trait);
  position: sticky; top: 0; z-index: 20;
}
.titre-bloc p { margin: 2px 0 0; color: var(--texte-2); font-size: 12px; }
.chip {
  font-size: 11px; background: var(--bois); color: #22180C; border-radius: 999px;
  padding: 1px 7px; vertical-align: middle; font-weight: 700;
}
.entete-droite { display: flex; align-items: center; gap: 14px; }
.compteur { text-align: center; line-height: 1.1; }
.compteur b { display: block; font-size: 18px; color: var(--bois); }
.compteur span { font-size: 10px; color: var(--texte-2); }
.btn-cast {
  background: none; border: 1px solid var(--trait); color: var(--texte);
  border-radius: 10px; font-size: 18px; padding: 4px 9px; cursor: pointer;
}
.btn-cast.on { border-color: var(--accent); color: var(--accent); }

/* ----------------------------------------------------------------- écrans */
.ecran { display: none; padding: 14px 14px 20px; max-width: 900px; margin: 0 auto; }
.ecran.actif { display: block; }

.carte {
  background: var(--fond-2); border: 1px solid var(--trait); border-radius: var(--rayon);
  padding: 16px; margin-bottom: 14px;
}
.carte.accent { border-color: var(--bois-sombre); }
.carte.conseil { background: var(--fond-3); }
.aide { color: var(--texte-2); font-size: 13px; margin: 8px 0 0; }
.mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; word-break: break-all; }

.btn {
  background: var(--fond-3); color: var(--texte); border: 1px solid var(--trait);
  border-radius: 10px; padding: 10px 14px; font-size: 15px; cursor: pointer;
}
.btn:focus-visible, .raccourci:focus-visible, .onglets button:focus-visible,
.accord-vignette:focus-visible, .ligne-lecon:focus-visible, .ligne-morceau:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 2px;
}
.btn.primaire { background: var(--bois); color: #22180C; border-color: var(--bois); font-weight: 700; }
.btn.large { width: 100%; margin-top: 10px; }
.btn[disabled] { opacity: .45; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: center; margin-top: 12px; }
.retour { background: none; border: none; color: var(--accent); font-size: 15px; padding: 4px 0 10px; cursor: pointer; }

/* ---------------------------------------------------------------- accueil */
.grille-raccourcis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.raccourci {
  background: var(--fond-2); border: 1px solid var(--trait); border-radius: var(--rayon);
  color: var(--texte); padding: 14px 6px; font-size: 13px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.raccourci span { font-size: 24px; }
.barre-objectif { height: 8px; background: var(--fond-3); border-radius: 99px; overflow: hidden; margin: 10px 0 4px; }
.barre-objectif i { display: block; height: 100%; background: var(--ok); }

/* --------------------------------------------------------------- parcours */
.chapitre { margin-bottom: 18px; }
.ligne-lecon {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: var(--fond-2); border: 1px solid var(--trait); border-radius: 12px;
  padding: 12px 14px; margin-bottom: 8px; color: var(--texte); cursor: pointer;
}
.ligne-lecon .puce {
  width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%; border: 2px solid var(--trait);
  display: grid; place-items: center; font-size: 13px; color: var(--texte-2);
}
.ligne-lecon.faite .puce { background: var(--ok); border-color: var(--ok); color: #0C2416; }
.ligne-lecon b { display: block; font-size: 15px; }
.ligne-lecon small { color: var(--texte-2); }
.lecon-texte { white-space: pre-line; margin: 12px 0; }

/* ---------------------------------------------------------------- accords */
.filtres { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.filtres button { background: var(--fond-2); border: 1px solid var(--trait); color: var(--texte-2); border-radius: 999px; padding: 6px 14px; cursor: pointer; }
.filtres button.actif { background: var(--bois); color: #22180C; border-color: var(--bois); font-weight: 700; }
.grille-accords { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 12px; }
.accord-vignette {
  background: var(--fond-2); border: 1px solid var(--trait); border-radius: 12px;
  padding: 10px 6px 6px; text-align: center; color: var(--texte); cursor: pointer;
}
.accord-vignette b { display: block; font-size: 16px; }
.accord-vignette small { color: var(--texte-2); font-size: 11px; }

/* diagrammes */
.diagramme { width: 100%; height: auto; }
.diagramme .sillet { fill: var(--corde); }
.diagramme .frette { stroke: #4A5670; stroke-width: 1.4; }
.diagramme .corde { stroke: #7C88A0; stroke-width: 1.4; }
.diagramme .doigt { fill: var(--bois); }
.diagramme .barre { fill: var(--bois); }
.diagramme .vide { fill: none; stroke: var(--corde); stroke-width: 1.6; }
.diagramme .diag-mute { fill: var(--texte-2); font-size: 11px; }
.diagramme .diag-doigt { fill: #22180C; font-size: 11px; font-weight: 700; }
.diagramme .diag-frette { fill: var(--texte-2); font-size: 11px; }
.grand-diagramme { max-width: 280px; margin: 0 auto; }

/* -------------------------------------------------------------- accordeur */
.accordeur { text-align: center; }
.accordeur-etat { color: var(--texte-2); font-size: 13px; min-height: 20px; }
.aiguille-boite {
  position: relative; height: 92px; margin: 14px auto 6px; max-width: 420px;
  background: var(--fond-3); border-radius: 12px; overflow: hidden;
}
.aiguille-graduation {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, #2A3344 0 1px, transparent 1px 10%);
}
.aiguille-centre { position: absolute; left: 50%; top: 8px; bottom: 8px; width: 2px; background: var(--ok); transform: translateX(-1px); }
.aiguille {
  position: absolute; top: 10px; bottom: 10px; width: 6px; border-radius: 3px;
  background: var(--faux); left: 50%; transform: translateX(-3px);
  transition: left .12s linear, background .2s;
}
.accordeur-note { font-size: 42px; font-weight: 700; line-height: 1.1; }
.accordeur-cents { color: var(--texte-2); min-height: 22px; }
.cordes-etat { display: flex; justify-content: center; gap: 8px; margin: 12px 0 4px; flex-wrap: wrap; }
.cordes-etat button {
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--trait);
  background: var(--fond-3); color: var(--texte); font-size: 13px; cursor: pointer;
}
.cordes-etat button.ok { background: var(--ok); color: #0C2416; border-color: var(--ok); }
.cordes-etat button.vise { border-color: var(--accent); color: var(--accent); }

/* -------------------------------------------------------------- métronome */
.metronome { text-align: center; }
.metro-tempo { font-size: 58px; font-weight: 700; line-height: 1; color: var(--bois); }
.metro-unite { color: var(--texte-2); font-size: 12px; margin-bottom: 14px; }
.metro-points { display: flex; justify-content: center; gap: 12px; margin: 16px 0; }
.metro-points i {
  width: 22px; height: 22px; border-radius: 50%; background: var(--fond-3);
  border: 2px solid var(--trait); transition: transform .05s, background .05s;
}
.metro-points i.actif { background: var(--bois); border-color: var(--bois); transform: scale(1.35); }
.metro-points i.fort.actif { background: var(--ok); border-color: var(--ok); }
.curseur { width: 100%; margin: 6px 0; }
label.ligne { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 10px 0; }
label.ligne input[type=text], label.ligne select, label.ligne input[type=range] { flex: 0 1 55%; }
select, input[type=text] {
  background: var(--fond-3); color: var(--texte); border: 1px solid var(--trait);
  border-radius: 8px; padding: 8px 10px; font-size: 15px;
}

/* ------------------------------------------------------------- tablature */
.ligne-morceau {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: var(--fond-2); border: 1px solid var(--trait); border-radius: 12px;
  padding: 12px 14px; margin-bottom: 8px; color: var(--texte); cursor: pointer;
}
.ligne-morceau .niveau { font-size: 11px; color: #22180C; background: var(--bois); border-radius: 999px; padding: 2px 8px; }
/* La largeur est choisie par Tablature.miseEnPage (mesures par ligne selon
   l'écran) : le dessin remplit la ligne, sans défilement horizontal. */
.tab-ligne { margin: 10px 0; }
.tab { width: 100%; height: auto; display: block; }
.tab-corde { stroke: #56607A; stroke-width: 1; }
.tab-mesure { stroke: #6C7790; stroke-width: 1.5; }
.tab-clef { fill: var(--texte-2); font-size: 9px; letter-spacing: 1px; }
.tab-fond { fill: var(--fond); }
.tab-chiffre { fill: var(--texte); font-size: 12px; font-weight: 600; }
.tab-main { fill: var(--bois); font-size: 10px; font-style: italic; }
.tab-note.en-cours .tab-chiffre { fill: #22180C; }
.tab-note.en-cours .tab-fond { fill: var(--bois); }

/* ---------------------------------------------------------------- oreille */
.choix-oreille { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-top: 14px; }
.choix-oreille button { padding: 16px 10px; font-size: 16px; }
.choix-oreille button.bon { background: var(--ok); color: #0C2416; border-color: var(--ok); }
.choix-oreille button.mauvais { background: var(--faux); color: #2A0E0E; border-color: var(--faux); }
.score { font-size: 15px; color: var(--texte-2); text-align: center; margin-top: 12px; }

/* --------------------------------------------------------------- onglets */
.onglets {
  position: fixed; left: 0; right: 0; bottom: 0; display: flex; z-index: 30;
  background: var(--fond-2); border-top: 1px solid var(--trait);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.onglets button {
  flex: 1; background: none; border: none; color: var(--texte-2); cursor: pointer;
  font-size: 10px; padding: 8px 2px; display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.onglets button span { font-size: 19px; }
.onglets button.actif { color: var(--bois); }

/* ------------------------------------------------------------- mode télé */
/* Trois mètres de recul : on grossit tout, on épaissit les repères de focus,
 * et la barre de navigation passe à gauche — le bas de l'écran d'un
 * téléviseur est souvent mangé par le surbalayage. */
html.tv body { font-size: 22px; padding-bottom: 0; padding-left: 190px; }
html.tv .entete { padding: 18px 28px; }
html.tv h1 { font-size: 28px; }
html.tv .ecran { max-width: 1400px; padding: 24px 32px; }
html.tv .compteur b { font-size: 26px; }
html.tv .onglets {
  top: 0; right: auto; width: 190px; flex-direction: column; justify-content: center;
  border-top: none; border-right: 1px solid var(--trait); padding: 0;
}
html.tv .onglets button { flex: 0 0 auto; flex-direction: row; gap: 12px; font-size: 17px; padding: 14px 18px; justify-content: flex-start; }
html.tv .onglets button span { font-size: 24px; }
html.tv .onglets button.actif { background: var(--fond-3); }
html.tv .grille-raccourcis { grid-template-columns: repeat(4, 1fr); }
html.tv .grille-accords { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
html.tv .grand-diagramme { max-width: 460px; }
html.tv .metro-tempo { font-size: 92px; }
html.tv .metro-points i { width: 34px; height: 34px; }
html.tv .accordeur-note { font-size: 76px; }
html.tv .aiguille-boite { height: 140px; max-width: 760px; }
html.tv .tab { min-width: 0; }
html.tv .cordes-etat button { width: 70px; height: 70px; font-size: 17px; }
html.tv :focus-visible { outline: 4px solid var(--accent) !important; outline-offset: 3px; }

@media (max-width: 380px) {
  .onglets button { font-size: 9px; }
  .onglets button span { font-size: 17px; }
  .grille-raccourcis { grid-template-columns: repeat(2, 1fr); }
}

/* ------------------------------------------------------------- schémas */
/* Dessinés par illustrations.js. Toutes les couleurs sont ici : le schéma
 * suit le thème, et un seul endroit à toucher pour les retoucher tous. */
.schema { width: 100%; height: auto; max-width: 460px; display: block; margin: 12px auto; }
.schema .sch-bois { fill: var(--bois); }
.schema .sch-manche { fill: var(--bois-sombre); }
.schema .sch-piece { fill: #3B4557; }
.schema .sch-piece-trait { stroke: #3B4557; stroke-width: 4; }
.schema .sch-trou { fill: var(--fond); }
.schema .sch-rosace { fill: none; stroke: var(--bois-sombre); stroke-width: 2.5; }
.schema .sch-corde { stroke: var(--corde); stroke-width: 1.6; }
.schema .sch-corde-pt { fill: var(--corde); }
.schema .sch-frette { stroke: #6B7791; stroke-width: 1.6; }
.schema .sch-barrette { stroke: #8892A8; stroke-width: 3; }
.schema .sch-sillet { stroke: var(--corde); stroke-width: 4; }
.schema .sch-corps { fill: #2E3648; }
.schema .sch-accent { fill: var(--accent); }
.schema .sch-doigt { fill: var(--bois); }
.schema .sch-doigt.sch-faux { fill: var(--faux); }
.schema .sch-doigt-nom { fill: #22180C; font-weight: 700; font-size: 17px; }
.schema .sch-trait-doigt { fill: none; stroke: var(--bois); stroke-width: 9; stroke-linecap: round; }
.schema .sch-trait-doigt.sch-faux { stroke: var(--faux); }
.schema .sch-repere { fill: none; stroke: var(--texte-2); stroke-width: 1.2; stroke-dasharray: 5 4; }
.schema .sch-fleche { stroke: var(--texte-2); stroke-width: 1.6; }
.schema .sch-pointe { fill: var(--texte-2); }
.schema .sch-txt { fill: var(--texte); font-size: 13px; }
.schema .sch-petit { fill: var(--texte-2); font-size: 12px; }
.schema .sch-case { fill: var(--fond); }
.schema .sch-chiffre { fill: var(--texte); font-size: 14px; font-weight: 700; }
.schema .sch-croix { fill: var(--faux); font-size: 20px; font-weight: 700; }
.schema .sch-ok { fill: var(--ok); font-size: 20px; font-weight: 700; }
.schema-legende { text-align: center; color: var(--texte-2); font-size: 12px; margin: -4px 0 14px; }
html.tv .schema { max-width: 760px; }
details { background: var(--fond-3); border: 1px solid var(--trait); border-radius: 10px; padding: 10px 14px; margin-top: 12px; }
details summary { cursor: pointer; color: var(--accent); }
.mains-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.main-accord { text-align: center; border: 1px solid var(--trait); border-radius: 10px; padding: 8px; }
.main-accord .diagramme { max-width: 140px; display: block; margin: 0 auto; }
.main-accord .aide { text-align: left; }
.main-accord-nom { margin-bottom: 4px; }
.schema .sch-rotation { fill: none; stroke: var(--accent); stroke-width: 2.4; }
.schema .sch-doigt.sch-exception { fill: var(--presque); }
.schema .sch-vide { fill: none; stroke: var(--corde); stroke-width: 2; }
.schema .sch-exception-txt { fill: var(--presque); font-size: 12px; }

/* Une glissière capte les flèches de la télécommande : le focus s'y retrouve
 * piégé, et chaque flèche change le tempo au lieu de déplacer le curseur.
 * Sur télé on la retire — les boutons −5 / +5 et « Battre le tempo » font le
 * même travail, eux, sans piéger personne. */
html.tv .curseur { display: none; }

.tv-seulement { display: none; }
html.tv .tv-seulement { display: block; }

/* -------------------------------------------------------------- portée */
/* Notation classique, dessinée par portee.js. Les notes partagent
 * data-temps avec la tablature : un seul surlignage pour les deux. */
.portee-ligne-bloc { overflow-x: auto; margin: 6px 0; }
.portee { width: 100%; height: auto; display: block; }
.portee-ligne { stroke: #6B7791; stroke-width: 1; }
.portee-mesure { stroke: #8892A8; stroke-width: 1.5; }
.portee-trait { fill: none; stroke: var(--texte); stroke-width: 1.8; stroke-linecap: round; }
.portee-cle .portee-trait { stroke-width: 2.4; }
.portee-tete { fill: var(--texte); }
.portee-tete-creuse { fill: none; stroke: var(--texte); stroke-width: 2; }
.portee-alteration { fill: var(--texte); font-size: 15px; }
.portee-chiffrage { fill: var(--texte); font-size: 15px; font-weight: 700; }
.portee-octave { fill: var(--texte-2); font-size: 11px; }
.portee-note.en-cours .portee-tete { fill: var(--bois); }
.portee-note.en-cours .portee-tete-creuse { stroke: var(--bois); }
.portee-note.en-cours .portee-trait { stroke: var(--bois); }
html.tv .portee { min-width: 0; }

/* Vue « main » d'un accord : un doigt, une couleur, du diagramme au dessin. */
.schema .sch-sillet-plein { fill: var(--corde); }
.schema .sch-paume { fill: #2E3648; stroke: #48536B; stroke-width: 2; }
.schema .sch-pouce { fill: none; stroke: var(--texte-2); stroke-width: 7; stroke-dasharray: 7 6; stroke-linecap: round; }
.schema .sch-doigt-tube { fill: none; stroke-width: 13; stroke-linecap: round; opacity: .9; }
.schema .sch-doigt-bout { stroke: none; }
.schema .sch-doigt-1 { stroke: #7FB8FF; fill: #7FB8FF; }
.schema .sch-doigt-2 { stroke: #58D08B; fill: #58D08B; }
.schema .sch-doigt-3 { stroke: #E8C766; fill: #E8C766; }
.schema .sch-doigt-4 { stroke: #C79BFF; fill: #C79BFF; }
.schema .sch-mute { fill: var(--texte-2); font-size: 13px; }
.schema .sch-corde-jouee { stroke: var(--accent); stroke-width: 3; }
.schema .sch-nom-corde-jouee { fill: var(--accent); font-size: 12px; font-weight: 700; }
.schema .sch-num-case { fill: var(--texte-2); font-size: 10px; }
.schema .sch-titre-main { fill: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: .08em; }
.schema .sch-pouce-derriere { fill: none; stroke: var(--texte-2); stroke-width: 2; stroke-dasharray: 4 3; }
.schema .sch-vide-jouee { fill: none; stroke: var(--accent); stroke-width: 2.5; }
.schema .sch-droite { stroke: #FF8F6B; fill: #FF8F6B; }
.schema .sch-doigt-tube-fin { stroke-width: 9; }
.schema .sch-bout-cerne { stroke: #22180C; stroke-width: 1.5; }
.guide-dessin .schema { max-width: 760px; margin: 6px auto; }
/* Le dessin couvre toute la guitare : sur téléphone il est réduit de moitié,
 * on grossit donc ses textes pour qu'ils restent lisibles. */
.guide-dessin .sch-txt { font-size: 17px; font-weight: 600; }
.guide-dessin .sch-titre-main { font-size: 15px; }
.guide-dessin .sch-petit { font-size: 14px; }
.guide-dessin .sch-num-case { font-size: 13px; }
.guide-dessin .sch-doigt-mini { font-size: 12px; }
.diagramme .doigt-1 { fill: #7FB8FF; }
.diagramme .doigt-2 { fill: #58D08B; }
.diagramme .doigt-3 { fill: #E8C766; }
.diagramme .doigt-4 { fill: #C79BFF; }
.schema .sch-zone { fill: rgba(127,184,255,.13); stroke: var(--accent); stroke-width: 2; stroke-dasharray: 6 4; }
.schema .sch-repere-touche { fill: #8A7355; }
.schema .sch-doigt-mini { fill: #22180C; font-size: 11px; font-weight: 700; }
/* Titre et sous-titre d'une ligne de liste se collaient : ils sont en ligne
 * dans le même <span>. */
.ligne-morceau b, .ligne-morceau small { display: block; }
.ligne-morceau small { color: var(--texte-2); }
.ligne-morceau > span:first-child { flex: 1; }

/* --------------------------------------------------- lecteur « pro » */
.options-lecture { justify-content: center; margin-top: 12px; }
.reglage-lecteur { margin-top: 6px; }
.reglage-lecteur .reglage-nom { min-width: 150px; color: var(--texte-2); font-size: 14px; }
.reglage-lecteur b { min-width: 80px; text-align: center; }
.tab-note.hors-section, .portee-note.hors-section { opacity: .28; }
.tab-texte {
  font: 13px/1.35 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  background: var(--fond-2); border: 1px solid var(--trait); border-radius: 10px;
  padding: 10px; overflow-x: auto; white-space: pre; color: var(--texte); width: 100%;
}

/* ---------------------------------------------------- manche virtuel */
.manche-boite { margin: 12px 0; overflow-x: auto; }
.manche { width: 100%; min-width: 420px; height: auto; display: block; }
.manche-bois { fill: #3A2A1A; }
.manche-frette { stroke: #B9C0CC; stroke-width: 1.6; }
.manche-sillet { stroke: #EDE6D6; stroke-width: 4; }
.manche-corde { stroke: var(--corde); }
.manche-repere { fill: #6E5A44; }
.manche-num { fill: var(--texte-2); font-size: 9px; }
.manche-nom { fill: var(--texte-2); font-size: 9px; }
.manche-point circle { fill: var(--fond-3); stroke: var(--accent); stroke-width: 1.4; }
.manche-point text { fill: var(--texte); font-size: 7px; font-weight: 700; }
.manche-point.joue circle, .manche-point.tonique circle { fill: var(--bois); stroke: var(--bois); }
.manche-point.joue text, .manche-point.tonique text { fill: #22180C; }
.manche-point.doigt-1 circle { fill: #7FB8FF; stroke: #7FB8FF; }
.manche-point.doigt-2 circle { fill: #58D08B; stroke: #58D08B; }
.manche-point.doigt-3 circle { fill: #E8C766; stroke: #E8C766; }
.manche-point.doigt-4 circle { fill: #C79BFF; stroke: #C79BFF; }
.etapes-morceau { margin: 12px 0; }
.etapes-morceau summary { font-weight: 700; }
.etapes-liste { list-style: none; padding: 0; margin: 8px 0 0; }
.etape { border-left: 3px solid var(--trait); padding: 6px 0 8px 12px; margin: 0 0 8px; }
.etape.prochaine { border-left-color: var(--accent); }
.etape.faite { opacity: .6; }
.etape.faite .etape-titre b { text-decoration: line-through; }
.etape-titre { display: flex; gap: 8px; align-items: center; cursor: pointer; }
.etape-titre input { width: 20px; height: 20px; flex: none; }
.etape .aide { margin: 4px 0 6px; }
.guide-mains { background: var(--fond-3); border: 1px solid var(--trait); border-radius: 12px; padding: 10px 14px; margin: 12px 0; }
.guide-mains h3 { margin: 0 0 6px; }
.guide-legende { margin: 0 0 8px; background: none; border: none; padding: 0; }
.guide-legende ul { margin: 6px 0 0; padding-left: 18px; }
.guide-titre { font-weight: 700; font-size: 1.1em; margin: 6px 0; }
.guide-corps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.guide-main h4 { margin: 0 0 4px; color: var(--accent); }
.guide-main p { margin: 4px 0; display: flex; gap: 8px; align-items: flex-start; }
.guide-pastille { flex: none; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: #22180C; background: var(--fond-2, #333); border: 2px solid var(--trait); }
.guide-pastille.doigt-0 { background: transparent; color: var(--texte-2); }
.guide-pastille.doigt-1 { background: #7FB8FF; border-color: #7FB8FF; }
.guide-pastille.doigt-2 { background: #58D08B; border-color: #58D08B; }
.guide-pastille.doigt-3 { background: #E8C766; border-color: #E8C766; }
.guide-pastille.doigt-4 { background: #C79BFF; border-color: #C79BFF; }
.guide-pastille.droite { background: #FF8F6B; border-color: #FF8F6B; font-style: italic; }

/* ------------------------------------------------------------ éditeur */
.saisie {
  width: 100%; background: var(--fond-2); color: var(--texte); border: 1px solid var(--trait);
  border-radius: 10px; padding: 10px 12px; font: inherit;
}
.editeur-apercu { margin: 12px 0; }
.grille-cases { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.grille-cases .btn { padding: 10px 0; font-weight: 700; }

/* ------------------------------------------------------- casque VR
 * Navigateur du casque : un pointeur (rayon, pincement) moins précis qu'un
 * doigt, sur un panneau vu à distance. On grossit, sans passer en mode télé. */
html.casque body { font-size: 19px; }
html.casque .btn, html.casque .filtres button { min-height: 52px; padding-left: 18px; padding-right: 18px; }
html.casque .grille-raccourcis { grid-template-columns: repeat(4, 1fr); }
html.casque .grille-cases .btn { min-height: 56px; }
html.casque #ecrans { max-width: 1100px; margin: 0 auto; }

/* -------------------------------------------------------------- pupitre
 * Vue « casque » : la fenêtre flottante du Quest (ou une tablette posée sur
 * le lutrin) ne montre que ce qui sert en jouant. */
html.en-pupitre .entete, html.en-pupitre .onglets { display: none; }
html.en-pupitre body { padding-bottom: 0; }
#ecran-pupitre { max-width: none; padding: 8px 14px; }
#pupitreVue { display: flex; flex-direction: column; gap: 10px; min-height: calc(100vh - 16px); }
.pupitre-tete { display: flex; align-items: center; gap: 14px; }
.pupitre-titre { font-size: 22px; color: var(--bois); flex: 1; }
.pupitre-info { color: var(--texte-2); font-size: 17px; }
.pupitre-partition { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.pupitre-ligne .tab { width: 100%; height: auto; min-width: 0; }
.pupitre-ligne.suivante { opacity: .4; }
.pupitre-manche .manche { min-width: 0; }
.pupitre-barre { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.pupitre-barre .btn { min-height: 60px; min-width: 96px; font-size: 18px; }
.pupitre-barre .btn.actif { border-color: var(--bois); color: var(--bois); }
.credit a { color: var(--accent); }

/* ------------------------------------------- Partition en plein écran */
.partition-barre { display: flex; justify-content: flex-end; margin-top: 6px; }
.partition.plein-ecran {
  position: fixed; inset: 0; z-index: 900; overflow-y: auto; overflow-x: hidden;
  background: var(--fond); padding: 64px max(14px, env(safe-area-inset-right)) 90px max(14px, env(safe-area-inset-left));
}
.pe-barre { display: none; }
.partition.plein-ecran .pe-barre {
  display: flex; gap: 8px; align-items: center; position: fixed; z-index: 901;
  top: 0; left: 0; right: 0; padding: 10px 14px; padding-top: max(10px, env(safe-area-inset-top));
  background: rgba(15, 18, 26, .94); backdrop-filter: blur(8px); border-bottom: 1px solid #2a3142;
}
.pe-barre .pe-titre { flex: 1; min-width: 0; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pe-barre .btn { min-height: 44px; }
html.plein-ecran-ouvert body { overflow: hidden; }
.systeme { margin: 4px 0 18px; padding-bottom: 8px; border-bottom: 1px solid #222a3a; }
.systeme .portee-ligne-bloc, .systeme .tab-ligne { margin: 0; }

/* ------------------------------------------------------- Enchaînement */
.enchainer { margin-bottom: 16px; }
.enchainer h3 { margin-top: 0; }
.liste-ligne { display: flex; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid #252c3c; }
.liste-ligne > span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.liste-ligne small { color: var(--texte-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.liste-ligne .btn { flex: none; }
.enchainer > .btn.large { margin-top: 12px; }
.ordre-liste { padding-left: 22px; }
.ordre-ligne { display: flex; align-items: center; gap: 6px; padding: 4px 0; }
.ordre-titre { flex: 1; min-width: 0; }
.ordre-ligne .btn { min-width: 44px; padding: 6px 10px; }
.ajout-liste { max-height: 50vh; overflow-y: auto; margin-top: 8px; }
.bandeau-liste {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px; margin: 8px 0;
  border-radius: 12px; background: #1d2a1f; border: 1px solid #2f5a37;
}
.bandeau-liste .bl-txt { flex: 1; min-width: 0; font-weight: 600; font-size: 14px; }
.bandeau-liste .btn { min-width: 46px; }
.suite-liste {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px; margin: 8px 0;
  border-radius: 12px; background: #2b2110; border: 1px solid var(--bois); font-size: 16px;
}
.suite-liste b { flex: 1 1 100%; }
.partition.plein-ecran .bandeau-liste { position: sticky; top: 64px; z-index: 2; }
/* display:flex ci-dessus l'emportait sur l'attribut hidden : cadre vide affiché (v1.17). */
.suite-liste[hidden], .bandeau-liste[hidden] { display: none; }
.tab-accord { fill: var(--bois); font-size: 11px; font-weight: 700; }