/* =====================================================================
   Ma Piano — interface en écrans, pensée pour l'horizontale.
   Thème clair et coloré : fond gris très pâle, cartes en dégradés vifs (une
   couleur par catégorie, par niveau, par famille), cartes blanches ombrées
   pour les exercices. La partition est une feuille blanche, lue de loin.
   Titres : Big Shoulders — Texte : Atkinson Hyperlegible — Chiffres : IBM Plex Mono.
   ===================================================================== */
:root{
  --fond:#f3f4fb;
  --surface:#ffffff;
  --surface-2:#eef0f5;
  --surface-3:#dde1ea;
  --bord:#e6e9ef;
  --texte:#1d2230;
  --texte-2:#535c6e;     /* 6,6:1 sur le fond */
  --texte-3:#667085;     /* 4,8:1 sur le fond */
  --ton-1:#60a5fa;       /* dégradé d'action : orange → rose */
  --ton-2:#7c3aed;
  --ton-texte:#6d28d9;   /* la couleur d'action, lisible en petit sur fond clair */
  --laiton:#f59e0b;
  --corail:#e5484d;      /* lecture en cours */
  --vert:#10b981;
  --papier:#fffdf9;
  --encre:#1d2230;
  --encre-2:#5d6474;
  --ombre-s:0 1px 2px rgba(22,28,45,.07), 0 2px 8px rgba(22,28,45,.06);
  --ombre:0 2px 4px rgba(22,28,45,.05), 0 14px 30px -14px rgba(22,28,45,.28);
  /* couleurs des illustrations (redéfinies selon la carte) */
  --ill-1:var(--ton-2); --ill-2:var(--ton-1); --ill-3:#7c3aed;
  --ill-fond:#eef2ff; --ill-trait:#e3e6ee; --ill-txt:#fff;

  --f-titre:'Big Shoulders Display', Oswald, Impact, 'Arial Narrow', sans-serif;
  --f-texte:'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-chiffres:'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;

  --r-carte:24px;
  --r:14px;
  --gout:20px;           /* marge latérale */
  --haut-entete:62px;
  --haut-transport:74px;
  --sur-g:env(safe-area-inset-left, 0px);
  --sur-d:env(safe-area-inset-right, 0px);
  --sur-h:env(safe-area-inset-top, 0px);
  --sur-b:env(safe-area-inset-bottom, 0px);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  background:var(--fond);color:var(--texte);
  font:15px/1.55 var(--f-texte);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;                    /* chaque écran gère son propre défilement */
  -webkit-tap-highlight-color:transparent;
}
h1,h2,h3,h4{margin:0;line-height:1.05;font-family:var(--f-titre);font-weight:800;letter-spacing:.02em;text-wrap:balance}
p{margin:.5em 0}
a{color:inherit;text-decoration:none}
b,strong{font-weight:700}
.muted{color:var(--texte-2)}
.small{font-size:13px}
.hidden,[hidden]{display:none !important}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ico{width:20px;height:20px;flex:0 0 20px;fill:currentColor}
:focus-visible{outline:3px solid #6366f1;outline-offset:3px;border-radius:10px}

/* ====== écrans ======
 * #appli est le conteneur de référence : toutes les adaptations à la taille (@container appli)
 * se règlent sur sa taille réelle, qu'il soit à plat ou pivoté (téléphone tenu droit). */
#appli{position:fixed;inset:0;container:appli / size}
.ecran{
  position:fixed;inset:0;display:flex;flex-direction:column;
  padding:var(--sur-h) var(--sur-d) var(--sur-b) var(--sur-g);
  animation:entree .22s ease-out;
}
@keyframes entree{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ====== en-têtes ====== */
.entete{flex:0 0 var(--haut-entete);display:flex;align-items:center;gap:14px;padding:0 var(--gout)}
.entete-titres{flex:1 0 auto;min-width:0;max-width:58%}
.entete-titres h1{font-size:30px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.entete-droite{margin-left:auto;display:flex;align-items:center;gap:10px}
.surtitre{
  margin:0 0 2px;font:700 12px/1.2 var(--f-titre);letter-spacing:.16em;text-transform:uppercase;color:var(--ton-texte);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.surtitre:empty{display:none}
.marque{display:flex;align-items:center;gap:10px}
.logo svg{width:36px;height:36px;display:block;filter:drop-shadow(0 3px 6px rgba(124,58,237,.25))}
.mot{font-size:28px;text-transform:uppercase;letter-spacing:.08em}
.version{padding:3px 9px;border-radius:99px;font:600 11px/1.4 var(--f-chiffres);color:var(--texte-2);background:var(--surface);box-shadow:var(--ombre-s)}
.pastille-stat{
  display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:99px;
  background:var(--surface);color:var(--texte);font:600 13px/1 var(--f-chiffres);box-shadow:var(--ombre-s);
}
.pastille-stat .ico{width:16px;height:16px;flex-basis:16px;color:var(--ton-2)}
.pastille-stat:hover{box-shadow:var(--ombre)}
.pastille-stat.reprendre{color:var(--ton-texte);max-width:320px}
.pastille-stat.reprendre span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ====== boutons ====== */
.rond{
  width:44px;height:44px;flex:0 0 44px;border-radius:50%;border:none;cursor:pointer;
  display:grid;place-items:center;background:var(--surface);color:var(--texte);box-shadow:var(--ombre-s);
  font:600 22px/1 var(--f-chiffres);transition:background .15s,box-shadow .15s,opacity .15s;
}
.rond:hover{box-shadow:var(--ombre)}
.rond.petit{width:38px;height:38px;flex-basis:38px;font-size:20px}
.rond[aria-disabled="true"]{opacity:.3;pointer-events:none;box-shadow:none}
.btn-plat{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;border:none;
  padding:10px 16px;border-radius:12px;background:var(--surface-2);color:var(--texte);
  font:600 14px/1 var(--f-texte);transition:background .15s,box-shadow .15s;
}
.btn-plat:hover{background:var(--surface-3)}
.btn-plat.accent,#btn-installer{background:linear-gradient(135deg,var(--ton-1),var(--ton-2));color:#fff;box-shadow:0 8px 18px -8px rgba(124,58,237,.6)}
.btn-plat.accent:hover,#btn-installer:hover{filter:brightness(1.05)}
.btn-plat .ico{width:17px;height:17px;flex-basis:17px}
#btn-half,#btn-double,#btn-tap{font-family:var(--f-chiffres);min-width:64px;justify-content:center}

/* ====== cartes en dégradé (accueil, niveaux, familles) ====== */
.carte-cat,.tuile,.groupe-tete{
  --c1:var(--ton-1);--c2:var(--ton-2);
  position:relative;overflow:hidden;isolation:isolate;color:#fff;
  background:linear-gradient(135deg,var(--c1) 0%,var(--c2) 100%);
  box-shadow:0 14px 28px -14px color-mix(in srgb, var(--c2) 75%, transparent), 0 2px 4px rgba(22,28,45,.06);
  --ill-1:#fff; --ill-2:rgba(255,255,255,.82); --ill-3:rgba(255,255,255,.55);
  --ill-fond:rgba(255,255,255,.16); --ill-trait:rgba(255,255,255,.32); --ill-txt:var(--c2);
  transition:transform .18s ease, box-shadow .18s ease;
}
/* formes décoratives : un grand disque clair en haut, un voile sombre sous le texte */
.carte-cat::before,.tuile::before,.groupe-tete::before{
  content:"";position:absolute;z-index:-1;width:78%;aspect-ratio:1;right:-22%;top:-38%;
  border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.26),rgba(255,255,255,.06) 70%);
}
.carte-cat::after,.tuile::after,.groupe-tete::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(0,0,0,.2),transparent 58%);
}
a.carte-cat:hover,.carte-cat:has(.carte-lien:hover),.tuile:hover{
  transform:translateY(-3px);
  box-shadow:0 20px 34px -14px color-mix(in srgb, var(--c2) 80%, transparent), 0 2px 4px rgba(22,28,45,.06);
}
a.carte-cat:active,.tuile:active,.item-carte:active{transform:scale(.98)}

/* ====== accueil ====== */
.accueil-grille{
  flex:1;min-height:0;display:grid;gap:14px;
  grid-template-columns:1.3fr 1fr 1fr;grid-template-rows:1fr 1fr;
  padding:4px var(--gout) var(--gout);
}
.carte-cat{border-radius:var(--r-carte);display:flex;flex-direction:column;justify-content:flex-end;padding:16px 18px;min-height:0}
.carte-cat h2{font-size:32px;text-transform:uppercase;letter-spacing:.05em;text-shadow:0 2px 10px rgba(0,0,0,.12)}
.carte-cat p{margin:4px 0 0;color:rgba(255,255,255,.92);font-size:13.5px;line-height:1.35}
.cat-illus{flex:1 1 0;min-height:0;margin:0 0 8px;pointer-events:none;filter:drop-shadow(0 4px 8px rgba(0,0,0,.12))}
.cat-illus svg{width:100%;height:100%;display:block}
.cat-texte{flex:none}
.c-parcours{--c1:#60a5fa;--c2:#6d28d9}
.c-morceaux{--c1:#fb7185;--c2:#be123c}
.c-exercices{--c1:#2dd4bf;--c2:#0f766e}
.c-libre{--c1:#fbbf24;--c2:#c2410c}
.c-progression{--c1:#a78bfa;--c2:#5b21b6}
.carte-cat.grande{grid-row:1 / 3;padding:22px 24px}
.carte-cat.grande{container:carte / inline-size}
@container carte (max-width:340px){ .cta-verbe{display:none} }
.carte-cat.grande .cat-illus{margin-bottom:12px}
.carte-cat.grande h2{font-size:52px}
.carte-cat.grande .cat-texte{max-width:34ch}
.carte-lien::after{content:"";position:absolute;inset:0;z-index:1}   /* toute la carte est cliquable */
.cta{
  position:relative;z-index:2;flex:none;align-self:flex-start;margin-top:14px;
  display:inline-flex;align-items:center;gap:9px;max-width:calc(100% - 48px);
  padding:13px 22px;border-radius:99px;background:#fff;color:var(--c2);
  font:800 17px/1 var(--f-titre);letter-spacing:.06em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  box-shadow:0 8px 20px -8px rgba(0,0,0,.35);transition:transform .15s;
}
.cta:hover{transform:translateY(-2px)}
.cta .ico{width:16px;height:16px;flex-basis:16px}
.jauge{height:8px;border-radius:99px;background:var(--surface-3);overflow:hidden;margin-top:12px}
.jauge i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--ton-1),var(--ton-2))}
.jauge.fine{height:7px}
.carte-cat .jauge,.tuile .jauge{background:rgba(255,255,255,.3)}
.carte-cat .jauge i,.tuile .jauge i{background:#fff}

/* ====== listes : une bande qui défile de gauche à droite ====== */
.liste-corps{
  flex:1;min-height:0;overflow-x:auto;overflow-y:hidden;
  padding:6px var(--gout) calc(var(--gout) - 4px);
  scroll-snap-type:x proximity;scroll-padding-left:var(--gout);
  overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:var(--surface-3) transparent;
}
.liste-corps::-webkit-scrollbar{height:6px}
.liste-corps::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:6px}
.bande{display:flex;gap:14px;height:100%;width:max-content;padding-bottom:8px}
.rangee{
  --rangs:2;height:100%;display:grid;gap:14px;
  grid-auto-flow:column;grid-template-rows:repeat(var(--rangs),minmax(0,1fr));grid-auto-columns:244px;
}
.rangee.tuiles{--rangs:1;grid-auto-columns:250px}
.rangee > *,.groupe-tete,.bloc{scroll-snap-align:start}
.groupe{display:flex;gap:14px;height:100%}
.groupe-tete{
  flex:0 0 auto;min-width:124px;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;
  border-radius:var(--r-carte);padding:16px;
}
.groupe-tete .g-num{font:800 64px/1 var(--f-titre);margin-bottom:auto;text-shadow:0 3px 12px rgba(0,0,0,.15)}
.groupe-tete b{font:800 21px/1.05 var(--f-titre);text-transform:uppercase;letter-spacing:.04em}
.groupe-tete span:last-child{font:600 12px var(--f-chiffres);color:rgba(255,255,255,.9)}
.sauts{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;min-width:0;padding:4px 2px}
.sauts::-webkit-scrollbar{display:none}
.entete-droite{min-width:0;flex:0 1 auto}
.sauts{flex:0 1 auto}
.groupe-tete.genre{min-width:150px}
.groupe-tete .g-illus{margin-bottom:auto;height:62px;--ill-1:#fff;--ill-2:rgba(255,255,255,.7);--ill-3:rgba(255,255,255,.85);--ill-trait:rgba(0,0,0,.18);--ill-txt:var(--c2)}
.groupe-tete .g-illus svg{height:100%;width:auto;display:block}
.groupe-tete.genre b{font-size:22px}
.chip.saut{padding:8px 12px;font-family:var(--f-chiffres);font-weight:600;letter-spacing:0}
.chip.saut::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--c);margin-right:6px;vertical-align:0}
@container appli (min-height:600px){ .rangee.tuiles{--rangs:2} }
@container appli (max-height:340px){ .rangee{--rangs:1} }
@container appli (min-height:620px){ .rangee{--rangs:3} }
@container appli (min-height:900px){ .rangee{--rangs:4} }

/* tuile : niveau, famille de rythmes, de rudiments */
.tuile{
  display:flex;flex-direction:column;gap:6px;border-radius:var(--r-carte);
  padding:14px 18px 18px;min-height:0;
}
.tuile .t-illus{flex:1 1 auto;min-height:56px;max-height:150px;margin:18px -4px 4px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.12))}
.tuile .t-illus svg{height:100%;width:100%;display:block}
.tuile h2{font-size:27px;text-transform:uppercase;letter-spacing:.04em;text-shadow:0 2px 10px rgba(0,0,0,.12)}
.tuile p{margin:0;color:rgba(255,255,255,.92);font-size:13px;line-height:1.35}
.tuile .jauge{margin-top:auto}
.tuile .t-coin{
  position:absolute;top:12px;left:14px;padding:5px 10px;border-radius:99px;
  font:600 11.5px/1 var(--f-chiffres);color:#fff;background:rgba(255,255,255,.22);backdrop-filter:blur(4px);
}

/* carte d'un élément jouable : blanche, avec la couleur de son niveau ou de sa famille.
 * Sa mise en page dépend de sa hauteur réelle (requête de conteneur) :
 * basse → visuel à gauche, texte à droite ; haute → visuel au-dessus. Rien n'est jamais coupé. */
.item-carte{
  --c1:var(--ton-1);--c2:var(--ton-2);
  position:relative;display:block;border-radius:20px;min-height:0;overflow:hidden;
  background:var(--surface);box-shadow:var(--ombre);transition:transform .18s ease, box-shadow .18s ease;
  container-type:size;
  --ill-1:var(--c2); --ill-2:color-mix(in srgb, var(--c2) 55%, var(--c1)); --ill-3:color-mix(in srgb, var(--c2) 55%, #1d2230);
  --ill-fond:color-mix(in srgb, var(--c1) 16%, #fff); --ill-trait:color-mix(in srgb, var(--c2) 18%, #fff); --ill-txt:#fff;
}
.item-carte::before{      /* liseré coloré en haut de la carte */
  content:"";position:absolute;left:0;right:0;top:0;height:5px;background:linear-gradient(90deg,var(--c1),var(--c2));
}
.item-carte:hover{transform:translateY(-3px);box-shadow:0 4px 8px rgba(22,28,45,.06), 0 20px 34px -16px color-mix(in srgb, var(--c2) 55%, transparent)}
.i-corps{
  height:100%;padding:13px 14px 12px 12px;
  display:grid;grid-template-columns:60px minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;
  grid-template-areas:"vis texte" "bas texte";column-gap:12px;row-gap:8px;align-items:center;
}
.i-vis{
  grid-area:vis;justify-self:center;align-self:end;
  width:60px;height:46px;border-radius:13px;padding:4px 5px;display:grid;place-items:center;
  background:color-mix(in srgb, var(--c1) 12%, #fff);
}
.i-corps:not(:has(.i-bas)) .i-vis{grid-row:1 / 3;align-self:center}
.i-vis svg{width:100%;height:100%;display:block}
.i-vis text{display:none}                 /* lettres illisibles en miniature : seulement sur carte haute */
.i-vis-num{width:46px;height:46px;padding:0;background:linear-gradient(135deg,var(--c1),var(--c2));
  box-shadow:0 6px 14px -6px color-mix(in srgb, var(--c2) 80%, transparent)}
.i-num{font:800 26px/1 var(--f-titre);color:#fff}
.i-texte{grid-area:texte;min-width:0;display:flex;flex-direction:column;gap:2px}
.i-nom{
  font-weight:700;font-size:14.5px;line-height:1.2;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.i-meta{
  font-size:12.5px;color:var(--texte-2);line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.i-bas{grid-area:bas;align-self:start;display:flex;flex-direction:column;align-items:center;gap:6px}
.i-tag,.item-carte .cle{
  align-self:flex-start;padding:2px 8px;border-radius:99px;margin-bottom:2px;
  font:800 10.5px/1.4 var(--f-titre);letter-spacing:.1em;text-transform:uppercase;
}
.i-tag{background:var(--c2);color:#fff}
.item-carte .cle{background:color-mix(in srgb, var(--c1) 20%, #fff);color:color-mix(in srgb, var(--c2) 80%, #000)}
/* carte haute : visuel en haut, texte dessous, niveau et tempo en bas */
@container (min-height:190px){
  .i-corps{display:flex;flex-direction:column;align-items:stretch;gap:8px;padding:16px 16px 14px}
  .i-vis{width:auto;height:auto;flex:0 1 72px;min-height:40px;align-self:stretch}
  .i-vis text{display:inline}
  .i-vis-num{width:50px;height:50px;flex:none;align-self:flex-start}
  .i-texte{flex:1;gap:3px}
  .i-nom{font-size:15.5px;-webkit-line-clamp:4}
  .i-bas{flex-direction:row;align-self:stretch;gap:8px;margin-top:auto;padding-top:4px}
  .i-bas .bpm-pastille,.i-bas .etat{margin-left:auto}
}
.niveau-points{display:inline-flex;gap:2px;flex:none}
.niveau-points i{width:6px;height:6px;border-radius:50%;background:var(--surface-3)}
.niveau-points i.on{background:var(--c2)}
.bpm-pastille{flex:none;font:600 11px/1 var(--f-chiffres);color:var(--texte-2);background:var(--surface-2);padding:4px 7px;border-radius:99px;white-space:nowrap}
@container (min-height:190px){
  .niveau-points{gap:3px}
  .niveau-points i{width:8px;height:8px}
  .bpm-pastille{font-size:11.5px;padding:5px 8px}
}
.etat{
  flex:none;width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;background:var(--surface-2);color:var(--texte-3);
}
.etat .ico{width:15px;height:15px;flex-basis:15px}
.i-vis{position:relative}
.etat.etat-vis{position:absolute;top:-8px;right:-8px;width:22px;height:22px;box-shadow:0 0 0 2.5px #fff}
.etat.etat-vis .ico{width:13px;height:13px;flex-basis:13px}
.etat-bas{display:none}
.i-corps:not(:has(.i-vis)) .etat-bas{display:grid}
@container (min-height:190px){
  .etat.etat-vis{display:none}
  .etat-bas{display:grid}
}
.etat.acquis{background:var(--vert);color:#fff;box-shadow:0 4px 10px -4px rgba(16,185,129,.7)}
.etat.travail{background:#fff1dc;color:#c2410c;box-shadow:inset 0 0 0 1.5px #fdba74}
.item-carte.a-travailler{box-shadow:inset 0 0 0 2px #fdba74, var(--ombre)}
.item-carte.faite .etat{background:var(--vert);color:#fff;box-shadow:0 4px 10px -4px rgba(16,185,129,.7)}
.item-carte.prochaine{box-shadow:inset 0 0 0 3px var(--c2), 0 18px 30px -14px color-mix(in srgb, var(--c2) 70%, transparent)}

/* ====== progression ====== */
.bloc{background:var(--surface);border-radius:var(--r-carte);padding:16px 18px;height:100%;overflow-y:auto;box-shadow:var(--ombre)}
.bloc h3{font-size:15px;letter-spacing:.12em;text-transform:uppercase;color:var(--texte-2);margin-bottom:12px}
.bloc-stats{width:320px}
.bloc-histo{width:440px;display:flex;flex-direction:column}
.bloc-histo .barres{flex:1;height:auto;min-height:90px}
.bloc-parcours{width:560px;overscroll-behavior:contain}
.niveaux{display:grid;grid-template-columns:1fr 1fr;gap:4px 18px}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stat{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:var(--r);color:#fff;background:linear-gradient(135deg,var(--c1),var(--c2))}
.stat:nth-child(1){--c1:#60a5fa;--c2:#6d28d9}
.stat:nth-child(2){--c1:#3fc3fb;--c2:#1f4fe0}
.stat:nth-child(3){--c1:#2fd6a3;--c2:#0b8f82}
.stat:nth-child(4){--c1:#a78bfa;--c2:#6425e0}
.stat-n{font:800 30px/1 var(--f-titre);font-variant-numeric:tabular-nums}
.stat span:last-child{font-size:12px;color:rgba(255,255,255,.92)}
.barres{display:flex;align-items:flex-end;gap:4px;height:110px}
.barre{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px;height:100%}
.barre .fut{flex:1;width:100%;display:flex;align-items:flex-end;background:var(--surface-2);border-radius:6px}
.barre .fut i{width:100%;border-radius:6px;background:linear-gradient(180deg,var(--ton-1),var(--ton-2))}
.barre u{font:500 11px var(--f-chiffres);color:var(--texte-3);text-decoration:none}
.niv-bloc{margin:0 0 14px}
.niv-head{display:flex;align-items:center;gap:8px;font-size:13px;margin-bottom:8px}
.niv-head i{width:10px;height:10px;border-radius:50%}
.niv-head b{font:800 16px/1 var(--f-titre);letter-spacing:.04em}
.niv-lecons{display:flex;gap:6px;flex-wrap:wrap}
.pastille{
  position:relative;width:46px;height:46px;border-radius:13px;background:var(--surface-2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;color:var(--texte-2);
}
.pastille:hover{background:var(--surface-3);color:var(--texte)}
.pastille span{font:800 17px/1 var(--f-titre)}
.pastille em{font:600 9.5px var(--f-chiffres);font-style:normal;color:var(--ton-texte)}
.pastille.faite{background:var(--vert);color:#fff}
.pastille.faite em{color:#fff}
.pastille .defi-ok{position:absolute;top:-3px;right:-3px;width:11px;height:11px;border-radius:50%;background:var(--laiton);box-shadow:0 0 0 2px var(--surface)}

/* ====== lecteur ====== */
.ecran-jouer{animation:none}
.barre-jeu{flex:0 0 60px;display:flex;align-items:center;gap:12px;padding:0 14px}
.j-nav{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:12px}
.j-titres{min-width:0;text-align:center}
.j-titres h1{font-size:26px;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.j-titres .surtitre{letter-spacing:.12em}
.j-titres h1.deux-lignes{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.02}
.j-droite{display:flex;align-items:center;gap:8px}
/* statut de l'élément : à travailler / acquis, en un toucher */
.statut-seg{display:inline-flex;gap:3px;padding:3px;border-radius:99px;background:var(--surface);box-shadow:var(--ombre-s)}
.statut-btn{
  height:38px;min-width:38px;padding:0 10px;border:none;border-radius:99px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:transparent;color:var(--texte-3);font:700 13px/1 var(--f-titre);letter-spacing:.08em;text-transform:uppercase;
  transition:background .15s,color .15s;
}
.statut-btn .ico{width:19px;height:19px;flex-basis:19px}
.statut-btn span{display:none}
.statut-btn:hover{color:var(--texte)}
.statut-btn.travail.actif{background:#fff1dc;color:#c2410c}
.statut-btn.acquis.actif{background:var(--vert);color:#fff;box-shadow:0 6px 14px -6px rgba(16,185,129,.8)}
@container appli (min-width:1100px){ .statut-btn span{display:inline} .statut-btn{padding:0 14px} }
@container appli (max-height:500px){ .statut-btn{height:34px;min-width:34px;padding:0 8px} }
.toast{
  position:fixed;left:50%;bottom:calc(var(--haut-transport) + 16px);z-index:45;transform:translateX(-50%);
  padding:11px 18px;border-radius:99px;background:#1d2230;color:#fff;box-shadow:0 12px 26px -10px rgba(22,28,45,.6);
  font:600 14px/1.2 var(--f-texte);white-space:nowrap;pointer-events:none;animation:toast .25s ease-out;
}
@keyframes toast{from{opacity:0;transform:translate(-50%,8px)}}
.pastille-stat.a-travailler{color:#c2410c}
.pastille-stat.a-travailler .ico{color:#c2410c}
@container appli (max-width:900px){ .pt-lbl{display:none} }
/* progression : listes « à travailler » et « acquis » */
.bloc-statut{width:300px;display:flex;flex-direction:column}
.bloc-statut h3{display:flex;align-items:center;gap:8px}
.bloc-statut h3 .ico{width:18px;height:18px;flex-basis:18px}
.bloc-statut.travail h3{color:#c2410c}
.bloc-statut.acquis h3{color:#047857}
.liste-statut{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.liste-statut a{display:flex;flex-direction:column;gap:1px;padding:9px 12px;border-radius:12px;background:var(--surface-2)}
.liste-statut a:hover{background:var(--surface-3)}
.ls-cat{font:700 11px/1.2 var(--f-titre);letter-spacing:.12em;text-transform:uppercase;color:var(--texte-3)}
.ls-nom{font-weight:700;font-size:14px;line-height:1.25}
.note-jeu{font:600 12.5px/1 var(--f-chiffres);padding:9px 13px;border-radius:99px;background:var(--surface);box-shadow:var(--ombre-s);white-space:nowrap}
.note-jeu.ok{color:#047857}
.note-jeu.moyen{color:#b45309}
.note-jeu.rate{color:#be123c}

.sections-bar{flex:0 0 auto;display:flex;gap:6px;padding:2px 14px 10px;overflow-x:auto;scrollbar-width:none}
.sections-bar::-webkit-scrollbar{display:none}
.chip{
  flex:0 0 auto;cursor:pointer;border:none;border-radius:99px;padding:8px 14px;
  background:var(--surface);color:var(--texte-2);box-shadow:var(--ombre-s);
  font:700 13px/1 var(--f-titre);letter-spacing:.08em;text-transform:uppercase;
}
.chip em{font:500 11px var(--f-chiffres);font-style:normal;opacity:.75;margin-left:3px}
.chip:hover{color:var(--texte)}
.chip.actif{background:linear-gradient(135deg,var(--ton-1),var(--ton-2));color:#fff;box-shadow:0 6px 14px -6px rgba(124,58,237,.7)}

.partition-zone{position:relative;flex:1;min-height:0;padding:0 14px}
.papier{
  height:100%;border-radius:20px;background:var(--papier);color:var(--encre);
  overflow:hidden;position:relative;box-shadow:var(--ombre);
}
/* --- décompte --- */
.count-overlay{
  position:absolute;inset:0 14px;display:grid;place-items:center;pointer-events:none;z-index:5;border-radius:20px;
  background:rgba(255,253,249,.74);
}
.count-overlay span{
  font:800 120px/1 var(--f-titre);animation:pop .35s ease-out;
  background:linear-gradient(135deg,var(--ton-1),var(--ton-2));-webkit-background-clip:text;background-clip:text;color:transparent;
}
@keyframes pop{from{transform:scale(1.35);opacity:0}to{transform:scale(1);opacity:1}}

/* --- barre de transport --- */
.barre-transport{flex:0 0 var(--haut-transport);display:flex;align-items:center;gap:16px;padding:0 14px}
.t-bascules{display:flex;gap:8px}
.bascule{
  width:50px;height:46px;border-radius:15px;border:none;cursor:pointer;display:grid;place-items:center;
  background:var(--surface);color:var(--texte-3);box-shadow:var(--ombre-s);transition:background .15s,color .15s;
}
.bascule:hover{color:var(--texte)}
.bascule.actif{background:linear-gradient(135deg,#dbeafe,#e9d5ff);color:var(--ton-texte)}
.bascule .ico{width:22px;height:22px;flex-basis:22px}
.t-tempo{flex:1;min-width:0;display:flex;align-items:center;gap:10px;justify-content:center}
.bpm-aff{display:flex;align-items:baseline;gap:5px;min-width:88px;justify-content:center}
.bpm-aff output{font:800 32px/1 var(--f-titre);font-variant-numeric:tabular-nums}
.bpm-aff span{font:600 11px var(--f-chiffres);color:var(--texte-3)}
.t-tempo input[type=range]{flex:1;max-width:320px;min-width:80px}
.lecture{
  width:62px;height:62px;flex:0 0 62px;border-radius:50%;border:none;cursor:pointer;
  display:grid;place-items:center;color:#fff;
  background:linear-gradient(145deg,var(--ton-1),var(--ton-2));
  box-shadow:0 10px 22px -8px rgba(124,58,237,.7);transition:transform .1s,background .15s;
}
.lecture:active{transform:scale(.94)}
.lecture .ico{width:28px;height:28px;flex-basis:28px}
.lecture.actif{background:linear-gradient(145deg,#475569,#1e293b);box-shadow:0 10px 22px -8px rgba(30,41,59,.6)}

/* curseurs */
input[type=range]{-webkit-appearance:none;appearance:none;height:28px;background:transparent;cursor:pointer;margin:0}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:99px;background:var(--surface-3)}
input[type=range]::-moz-range-track{height:6px;border-radius:99px;background:var(--surface-3)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-8px;border-radius:50%;background:var(--ton-2);border:3px solid #fff;box-shadow:0 2px 6px rgba(22,28,45,.3)}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--ton-2);border:3px solid #fff;box-shadow:0 2px 6px rgba(22,28,45,.3)}

/* ====== volets (explications, réglages) ====== */
.voile{position:fixed;inset:0;z-index:40;background:rgba(22,28,45,.32);animation:fondu .18s}
@keyframes fondu{from{opacity:0}}
.volet{
  position:fixed;top:0;right:0;bottom:0;z-index:41;width:min(440px,92cqw);
  background:var(--surface);display:flex;flex-direction:column;
  padding:var(--sur-h) var(--sur-d) var(--sur-b) 0;border-radius:24px 0 0 24px;
  box-shadow:-20px 0 40px rgba(22,28,45,.18);animation:glisse .22s ease-out;
}
@keyframes glisse{from{transform:translateX(30px);opacity:0}}
.volet-tete{display:flex;align-items:center;justify-content:space-between;padding:14px 18px 6px}
.volet-tete h2{font-size:26px;text-transform:uppercase;letter-spacing:.05em}
.volet-tete .rond{box-shadow:none;background:var(--surface-2)}
.volet-corps{flex:1;overflow-y:auto;padding:4px 18px 24px;overscroll-behavior:contain}
.volet-corps h3{margin:22px 0 10px;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--ton-texte)}
.volet-corps h3:first-child{margin-top:8px}
.texte h2{font-size:28px;margin:4px 0 8px}
.texte h3{margin:18px 0 6px;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--ton-texte)}
.texte ul,.texte ol{padding-left:1.25em;margin:.4em 0 .8em}
.texte li{margin:.3em 0}
.objectif{background:linear-gradient(135deg,#e8f0ff,#f0e8ff);border-radius:var(--r);padding:10px 14px}
.tip,.defi{border-radius:var(--r);padding:10px 14px;margin:12px 0;font-size:14px;background:#fff6e0}
.defi{background:#ffe9ee}
.tip p,.defi p{margin:0}
.tip-lbl{display:block;font:800 11px/1.6 var(--f-titre);letter-spacing:.14em;text-transform:uppercase;color:#a15c00}
.defi .tip-lbl{color:#b0163f}
.badge{
  display:inline-block;font:600 11.5px/1.2 var(--f-chiffres);color:var(--texte-2);white-space:nowrap;
  background:var(--surface-2);border-radius:99px;padding:5px 10px;margin:0 4px 4px 0;
}
.badge.fid-origine{color:#047857;background:#dcfce9}
.badge.fid-acc{color:#a15c00;background:#fff3d6}
.lecon-fin{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:18px;padding:12px 14px;
  border-radius:var(--r);background:var(--surface-2);
}
.lecon-fin .inter{flex:1;margin:0;padding:0;border:none}
kbd{
  display:inline-block;min-width:24px;text-align:center;background:var(--surface);
  border:1px solid var(--surface-3);border-bottom-width:3px;border-radius:7px;padding:1px 7px;font:600 12px var(--f-chiffres);color:var(--texte);
}

/* interrupteurs */
.inter{
  display:flex;align-items:center;justify-content:space-between;gap:14px;cursor:pointer;
  padding:10px 0;border-bottom:1px solid var(--bord);user-select:none;
}
.inter input{position:absolute;opacity:0;width:1px;height:1px}
.inter i{position:relative;flex:0 0 46px;height:28px;border-radius:99px;background:var(--surface-3);transition:background .15s}
.inter i::after{
  content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(22,28,45,.3);transition:transform .15s;
}
.inter input:checked + i{background:linear-gradient(135deg,var(--ton-1),var(--ton-2))}
.inter input:checked + i::after{transform:translateX(18px)}
.inter input:focus-visible + i{outline:3px solid #6366f1;outline-offset:3px}
.ligne-reglage{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid var(--bord)}
.choix{background:var(--surface-2);color:var(--texte);border:none;border-radius:10px;padding:8px 10px;font:inherit;font-size:14px}
.rampe{padding:10px 0;font-size:13.5px;color:var(--texte-2);border-bottom:1px solid var(--bord)}
.rampe input{
  width:54px;background:var(--surface-2);border:none;color:var(--texte);border-radius:8px;
  padding:5px 6px;font:600 13px var(--f-chiffres);text-align:right;margin:0 3px;
}
.rang-boutons{display:flex;gap:8px;flex-wrap:wrap}
.seg{display:inline-flex;background:var(--surface-2);border-radius:13px;padding:3px}
.seg-btn{border:none;background:none;color:var(--texte-2);padding:8px 16px;border-radius:10px;cursor:pointer;font:600 14px var(--f-texte)}
.seg-btn.actif{background:var(--surface);color:var(--texte);box-shadow:var(--ombre-s)}
.keys{width:100%;border-collapse:collapse;margin:10px 0 4px;font-size:13.5px}
.keys td{padding:6px 2px;border-bottom:1px solid var(--bord)}
.keys td:first-child{width:130px}
.credit{margin-top:16px}

/* ====== fenêtre (installation iPhone) ====== */
.modal{position:fixed;inset:0;background:rgba(22,28,45,.4);display:grid;place-items:center;z-index:50;padding:20px}
.modal-box{background:var(--surface);border-radius:var(--r-carte);padding:22px 24px;max-width:460px;width:100%;max-height:100%;overflow:auto;box-shadow:var(--ombre)}
.modal-box h2{font-size:28px;text-transform:uppercase}
.etapes{padding-left:1.2em;margin:12px 0}
.install-box{display:flex;gap:20px;align-items:flex-start;max-width:560px}
.install-icone{flex:none;border-radius:22px;box-shadow:0 10px 24px -10px rgba(124,58,237,.6)}
.install-texte h2{margin-bottom:4px}
.install-texte p{margin:6px 0 12px;color:var(--texte-2)}
.install-texte .rang-boutons{margin-top:6px}
.etapes li{margin:.5em 0}

/* ====== téléphone tenu droit : l'appli pivote d'elle-même ======
 * Quand le navigateur ne peut pas verrouiller l'écran à l'horizontale (iPhone, ou avant le
 * premier toucher), tout le contenu tourne d'un quart de tour : il suffit de pencher le
 * téléphone, sans aucun message. Les zones sûres (encoche) suivent la rotation. */
@media (orientation:portrait) and (pointer:coarse){
  #appli{
    position:fixed;top:0;left:0;overflow:hidden;
    width:100vh;width:100dvh;height:100vw;
    transform-origin:top left;transform:rotate(90deg) translateY(-100%);
    --sur-g:env(safe-area-inset-top, 0px);
    --sur-d:env(safe-area-inset-bottom, 0px);
    --sur-h:env(safe-area-inset-right, 0px);
    --sur-b:env(safe-area-inset-left, 0px);
  }
  /* le défilement au doigt est piloté par l'appli : pas d'aimantation qui le contrarie */
  #appli .liste-corps{scroll-snap-type:none}
}

/* ====== écrans bas (téléphone couché) ====== */
@container appli (max-height:500px){
  #appli > *{--haut-entete:54px;--haut-transport:64px;--gout:16px}
  .accueil-grille{gap:10px}
  .carte-cat{padding:12px 14px;border-radius:20px}
  .carte-cat h2{font-size:26px}
  .carte-cat p{font-size:12.5px}
  .carte-cat.grande{padding:16px 18px}
  .carte-cat.grande h2{font-size:40px}
  .cta{margin-top:10px;padding:11px 18px;font-size:15px}
  .entete-titres h1{font-size:26px}
  .barre-jeu{flex-basis:52px}
  .j-titres h1{font-size:21px}
  .rond{width:40px;height:40px;flex-basis:40px}
  .rond.petit{width:34px;height:34px;flex-basis:34px}
  .lecture{width:54px;height:54px;flex-basis:54px}
  .bpm-aff output{font-size:27px}
  .tuile h2{font-size:24px}
  .count-overlay span{font-size:96px}
}
@container appli (max-height:380px){
  .carte-cat p{display:none}
  .carte-cat.grande p{display:block}
  .sections-bar{padding-bottom:6px}
  .chip{padding:6px 11px}
}
@container appli (max-width:900px){ .pastille-stat.reprendre{max-width:230px} }
@container appli (max-width:700px){
  .t-tempo input[type=range]{display:none}
  .j-titres .surtitre{display:none}
}
@media (pointer:coarse){
  .item-carte,.tuile,.carte-cat{-webkit-user-select:none;user-select:none}
}
@media (prefers-reduced-motion:reduce){
  .pad.frappe .eclat{opacity:.5}
  *,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
}


/* =====================================================================
   PIANO : partition à défilement, clavier, lecteur, écran « Mon micro »
   ===================================================================== */
:root{
  --main-d:#2563eb;     /* main droite */
  --main-g:#ea580c;     /* main gauche */
  --juste:#10b981;
  --faux:#e11d48;
}
.pastille-main{display:inline-block;padding:1px 9px;border-radius:99px;color:#fff;font-weight:700;font-size:12.5px}
.pastille-main.d{background:var(--main-d)}
.pastille-main.g{background:var(--main-g)}

/* --- lecteur : partition en haut, clavier en bas --- */
.zone-jeu{flex:1;min-height:0;display:flex;flex-direction:column;gap:8px;padding:0 14px 8px}
.papier{flex:1 1 auto;min-height:0;height:auto;position:relative;overflow:hidden;border-radius:20px;background:var(--papier);box-shadow:var(--ombre)}
.score-zone{position:absolute;inset:0}
.zone-clavier{flex:0 0 clamp(62px, 23%, 130px);min-height:0;border-radius:14px;overflow:hidden;box-shadow:var(--ombre);background:#1d2036;padding:0 0 0 0}
.count-overlay{inset:0;border-radius:20px}

/* --- partition --- */
.partition{display:flex;height:100%;position:relative;color:var(--encre)}
.p-entete{flex:none;position:relative;z-index:2;background:var(--papier);box-shadow:8px 0 10px -6px rgba(253,250,240,.95)}
.p-fenetre{flex:1;position:relative;overflow:hidden}
.p-piste{position:absolute;left:0;top:0;will-change:transform}
.p-svg{display:block}
.p-svg .ligne{stroke:#9aa0ab;stroke-width:1}
.p-svg .ligne.sup{stroke:var(--encre);stroke-width:1.2}
.p-svg .barre{stroke:var(--encre);stroke-width:1.2}
.p-svg .barre.fin{stroke-width:4}
.p-svg .cle,.p-svg .alt,.p-svg .tete,.p-svg .crochet,.p-svg .point-duree{fill:var(--encre)}
.p-svg .silence{fill:#6a7080}
.p-svg .hampe{stroke:var(--encre);stroke-width:1.2}
.p-svg .liaison rect{fill:var(--encre)}
.p-svg .sig{font:800 22px var(--f-titre);fill:var(--encre)}
.p-svg .num-mesure{font:600 max(9px, calc(11px / var(--echelle, 1))) var(--f-chiffres);fill:#8a90a0}
.p-svg .doigt{font:800 max(11px, calc(11.5px / var(--echelle, 1))) var(--f-texte);fill:#535c6e}
.p-svg .sec-txt{font:800 max(10px, calc(11px / var(--echelle, 1))) var(--f-titre);letter-spacing:.06em;text-transform:uppercase;fill:#5b21b6}
.p-svg .sec-trait{stroke:var(--ton-2);stroke-width:1.2;opacity:.6}
.acc.main-D{--hc:var(--main-d)}
.acc.main-G{--hc:var(--main-g)}
.acc.actif .tete,.acc.actif .crochet,.acc.actif .alt,.acc.actif .point-duree{fill:var(--hc)}
.acc.actif .hampe{stroke:var(--hc)}
.acc.actif .doigt{fill:var(--hc)}
.acc.faite .hampe{stroke:var(--juste)}
.acc.faite .crochet,.acc.faite .alt,.acc.faite .point-duree{fill:var(--juste)}
.nt.ok .tete,.nt.ok .alt{fill:var(--juste)}
.nt.faux .tete,.nt.faux .alt{fill:var(--faux)}
.p-curseur{position:absolute;top:8%;bottom:8%;width:3px;border-radius:2px;background:rgba(124,58,237,.22);pointer-events:none;transform:translateX(-1px)}

/* --- clavier --- */
.clavier{position:relative;width:100%;height:100%;user-select:none;-webkit-user-select:none;touch-action:none}
.touche{position:absolute;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .08s}
.touche.blanche{
  left:calc(var(--i) / var(--n) * 100%);width:calc(100% / var(--n));top:0;bottom:0;box-sizing:border-box;
  background:linear-gradient(#fff,#eceefb);border:1px solid #c3c8e0;border-top:none;border-radius:0 0 9px 9px;
  display:flex;flex-direction:column;justify-content:flex-end;align-items:center;
}
.touche.noire{
  left:calc((var(--i) - 0.3) / var(--n) * 100%);width:calc(0.6 / var(--n) * 100%);top:0;height:62%;z-index:2;
  background:linear-gradient(#444a73,#1d2036);border-radius:0 0 7px 7px;box-shadow:0 3px 5px rgba(0,0,0,.35);
}
.touche .nom{font:700 11px var(--f-texte);color:#8a90b0;padding-bottom:4px;pointer-events:none;white-space:nowrap}
.touche .nom .oct{font-style:normal;opacity:.75;margin-left:1px}
.clavier.etroit .nom .oct{display:none}
.clavier.tres-etroit .touche:not(.do) .nom{display:none}
.touche .doigt{position:absolute;top:8%;left:50%;transform:translateX(-50%);min-width:19px;height:19px;padding:0 3px;border-radius:99px;
  background:#fff;color:var(--encre);font:800 12px/19px var(--f-texte);text-align:center;pointer-events:none;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.touche.noire .doigt{top:auto;bottom:10%}
.touche .doigt:empty{display:none}
.touche.cible.main-D{background:linear-gradient(#93c5fd,#3b82f6)}
.touche.cible.main-G{background:linear-gradient(#fdba74,#f97316)}
.touche.noire.cible.main-D{background:linear-gradient(#3b82f6,#1e40af)}
.touche.noire.cible.main-G{background:linear-gradient(#f97316,#9a3412)}
.touche.cible .nom{color:#fff}
.touche.entendue{box-shadow:inset 0 -14px 0 -2px rgba(124,58,237,.55)}
.touche.noire.entendue{box-shadow:0 3px 5px rgba(0,0,0,.35), inset 0 -14px 0 -2px rgba(167,139,250,.9)}
.touche.presse{transform:translateY(2px);filter:brightness(.94)}
.touche.ok{animation:juste .45s ease-out}
.touche.faux{animation:faux .5s ease-out}
@keyframes juste{0%{background:#34d399;box-shadow:0 0 14px 2px rgba(16,185,129,.8)}100%{}}
@keyframes faux{0%,30%{background:#fb7185;box-shadow:0 0 14px 2px rgba(225,29,72,.8)}100%{}}

/* --- retour pendant le jeu --- */
.retour-jeu{position:absolute;left:50%;top:10px;transform:translateX(-50%);z-index:4;max-width:92%;padding:8px 18px;border-radius:99px;
  font:700 14.5px/1.25 var(--f-texte);text-align:center;box-shadow:var(--ombre);pointer-events:none;animation:toast .2s ease-out}
.retour-jeu.ok{background:#d1fae5;color:#047857}
.retour-jeu.faux{background:#ffe4e6;color:#be123c}
.retour-jeu.info{background:#e0e7ff;color:#4338ca}

/* --- bilan --- */
.bilan{position:absolute;inset:0;z-index:6;display:grid;place-items:center;background:rgba(255,253,249,.9);animation:fondu .2s}
.bilan-boite{text-align:center;padding:10px 20px}
.bilan-etoiles{font-size:44px;letter-spacing:6px;color:#fbbf24;line-height:1;margin-bottom:4px}
.bilan-etoiles i{font-style:normal;color:#dde1ea}
.bilan-etoiles i.on{color:#fbbf24;text-shadow:0 4px 14px rgba(251,191,36,.6)}
.bilan h2{font-size:38px;text-transform:uppercase}
.bilan p{margin:4px 0 12px;color:var(--texte-2)}
.bilan .rang-boutons{justify-content:center}

/* --- transport --- */
.barre-transport{gap:12px}
.modes .seg-btn{display:inline-flex;align-items:center;gap:7px;padding:9px 13px}
.modes .seg-btn .ico{width:18px;height:18px;flex-basis:18px}
.bascule.micro{width:auto;padding:0 14px;display:inline-flex;align-items:center;gap:8px;font:700 13px var(--f-titre);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.bascule.micro.actif{background:linear-gradient(135deg,#d1fae5,#a7f3d0);color:#047857}
.bascule.micro.erreur{background:#ffe4e6;color:#be123c}
.bascule.micro.actif .ico{animation:souffle 1.6s ease-in-out infinite}
@keyframes souffle{50%{transform:scale(1.18)}}
.t-tempo.cache{visibility:hidden}
@container appli (max-width:860px){ .modes .seg-btn span{display:none} .modes .seg-btn{padding:9px 11px} .bascule.micro span{display:none} .bascule.micro{width:46px;padding:0;justify-content:center} }
@container appli (max-width:700px){ .t-tempo input[type=range]{display:none} }

/* --- Mon micro --- */
.libre-corps{flex:1;min-height:0;display:flex;gap:22px;padding:6px var(--gout) var(--gout);align-items:stretch}
.libre-gauche{flex:0 0 min(330px, 40%);display:flex;flex-direction:column;gap:10px;justify-content:center}
.libre-droite{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px;justify-content:center}
#libre-clavier{height:clamp(120px, 42%, 220px);border-radius:16px;overflow:hidden;box-shadow:var(--ombre);background:#1d2036}
.btn-plat.gros{padding:14px 20px;font-size:15px;justify-content:center}
.libre-note{font:800 clamp(52px, 13vh, 96px)/1 var(--f-titre);text-align:center;min-height:1.05em;background:linear-gradient(135deg,var(--ton-1),var(--ton-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.libre-sous{text-align:center;color:var(--texte-2);font-size:14px;min-height:2.4em}
.niveau-micro{height:10px;border-radius:99px;background:var(--surface-3);overflow:hidden}
.niveau-micro i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#34d399,#fbbf24,#f87171);transition:width .08s}
.libre-sens{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--texte-2)}
.libre-sens input{flex:1;min-width:60px}
.libre-sens span{min-width:56px;font-family:var(--f-chiffres);font-size:12px}
@container appli (max-height:380px){ .libre-note{font-size:54px} .libre-sous{display:none} }

/* carte « Importer un fichier MIDI » (Mes partitions) */
.carte-import{cursor:pointer}
.carte-import .i-num{font-size:34px}
.carte-import:focus-within{outline:3px solid var(--ton-2);outline-offset:2px}

/* choix des mains à l'import MIDI */
.import-box{max-width:560px}
.import-box{padding:16px 20px}
.import-box h2{font-size:22px}
.import-parties{list-style:none;margin:10px 0 12px;padding:0;display:grid;gap:8px}
.import-parties li{display:flex;align-items:center;gap:12px;padding:6px 12px;border-radius:14px;background:var(--fond, #f3f4fa)}
.import-parties .ip-texte{flex:1;min-width:0;display:flex;flex-direction:column}
.import-parties .ip-nom{font:700 16px var(--f-texte);overflow-wrap:anywhere}
.import-parties .ip-meta{font:500 14px var(--f-texte);color:var(--texte-2)}
.import-parties select{flex:none;font:600 15px var(--f-texte);padding:8px 10px;border-radius:10px;border:1px solid rgba(124,58,237,.35);background:var(--surface);color:inherit}