/* ============================================================
 * ta-theorie.css — charte, typographie & composants des articles
 * Série "Théorie musicale" (twelve-assistant.com/theorie-musicale/)
 *
 * TOUT est scopé sous `.ta-theorie` (le corps de l'article est wrappé
 * dans <div class="ta-theorie">…</div>). Raison : le thème charge
 * Tailwind via CDN SANS le plugin typography → les classes `prose` sont
 * inertes, et `preflight` est désactivé. Le scope `.ta-theorie` :
 *   1. fournit la base typographique que le thème ne donne pas,
 *   2. protège les widgets/SVG d'éventuelles règles du thème,
 *   3. n'affecte QUE l'article (aucune fuite dans le reste du site).
 * Aucun `body{}`, aucun fond de page, aucun reset global : le fond et le
 * dark mode (classe html.dark) restent gérés par le thème.
 * ============================================================ */

/* ===== Tokens charte TA (source : apps/twelve-assistant/src/assets/main.css) ===== */
:root{
  --xiia-50:#f3f4ed; --xiia-100:#f1f4e4; --xiia-200:#e5e8d1; --xiia-300:#d3d6c5;
  --xiia-400:#bebfb4; --xiia-500:#a7a89e; --xiia-600:#727269; --xiia-700:#3a3734;
  --xiia-800:#282825; --xiia-900:#141413; --xiia-950:#0b0b0b;
  --xiia-cyan:#06b6d4;
}
html.dark{
  --xiia-50:#141413; --xiia-100:#282825; --xiia-200:#3a3734; --xiia-300:#727269;
  --xiia-400:#a7a89e; --xiia-500:#bebfb4; --xiia-600:#d3d6c5; --xiia-700:#e5e8d1;
  --xiia-800:#f1f4e4; --xiia-900:#f3f4ed; --xiia-950:#f3f4ed;
  --xiia-cyan:#22d3ee;
}

/* ===== Scope article : largeur de lecture + base typographique ===== */
.ta-theorie{
  max-width:800px;margin-inline:auto;
  font-family:Roboto,system-ui,-apple-system,sans-serif;
  font-size:1.0625rem;line-height:1.7;color:var(--xiia-900);
  -webkit-font-smoothing:antialiased;
}
.ta-theorie h2{font-size:1.65rem;line-height:1.3;margin:3rem 0 1rem;
  border-bottom:3px solid var(--xiia-300);padding-bottom:.4rem;color:var(--xiia-900);}
.ta-theorie h3{font-size:1.25rem;margin:2rem 0 .8rem;color:var(--xiia-700);}
.ta-theorie p{margin:0 0 1.15rem;}
.ta-theorie ul,.ta-theorie ol{margin:0 0 1.15rem 1.4rem;}
.ta-theorie li{margin-bottom:.5rem;}
.ta-theorie strong{color:var(--xiia-950);}
html.dark .ta-theorie strong{color:var(--xiia-900);}
.ta-theorie a{color:var(--xiia-cyan);}
.ta-theorie .lead{font-size:1.15rem;color:var(--xiia-700);margin-bottom:2rem;}

/* ===== Composants éditoriaux (blocs de l'article) ===== */
.ta-theorie .direct-answer{background:var(--xiia-100);border-left:5px solid var(--xiia-cyan);
  padding:1.4rem 1.5rem;margin:2rem 0;border-radius:6px;}
.ta-theorie .direct-answer h2{font-size:1.2rem;margin:0 0 .8rem;border:none;padding:0;}
.ta-theorie .direct-answer p:last-child{margin-bottom:0;}
.ta-theorie .toc{background:var(--xiia-50);border:1px solid var(--xiia-200);
  padding:1.4rem 1.5rem;border-radius:12px;margin:2rem 0;}
.ta-theorie .toc h2{font-size:1.2rem;margin:0 0 .8rem;border:none;padding:0;}
.ta-theorie .toc ul{list-style:none;margin-left:0;}
.ta-theorie .toc li{margin-bottom:.5rem;}
.ta-theorie .toc a{color:var(--xiia-900);text-decoration:none;}
.ta-theorie .toc a:hover{color:var(--xiia-cyan);text-decoration:underline;}
.ta-theorie .guitar-tip{background:var(--xiia-100);border-left:5px solid var(--xiia-700);
  padding:1.4rem 1.5rem;margin:2rem 0;border-radius:6px;}
.ta-theorie .guitar-tip h3{margin-top:0;color:var(--xiia-900);font-size:1.15rem;}
.ta-theorie .faq-item{margin-bottom:1.8rem;}
.ta-theorie .faq-question{font-size:1.12rem;font-weight:700;margin-bottom:.4rem;}
.ta-theorie .faq-answer{color:var(--xiia-700);}
.ta-theorie .summary{background:var(--xiia-50);border:1px solid var(--xiia-200);
  border-left:5px solid var(--xiia-900);padding:1.4rem 1.5rem;margin:3rem 0;border-radius:6px;}
.ta-theorie .summary h2{font-size:1.2rem;margin:0 0 .8rem;border:none;padding:0;}
.ta-theorie .summary ul{margin-left:1.4rem;}
.ta-theorie .summary li{margin-bottom:.5rem;}
.ta-theorie .series-nav{margin-top:3rem;padding:1.8rem;background:var(--xiia-50);
  border:1px solid var(--xiia-200);border-radius:12px;text-align:center;}
.ta-theorie .series-nav h3{margin-top:0;}
.ta-theorie .series-nav .ta-btn{display:inline-block;text-decoration:none;margin-top:.6rem;}
.ta-theorie .series-nav .prev{display:block;margin-top:1rem;font-size:.9rem;color:var(--xiia-600);}

/* ===== Composants charte / boutons ===== */
.ta-theorie .ta-card{background:var(--xiia-50);border:1px solid var(--xiia-200);border-radius:12px;padding:1.25rem 1.5rem;}
.ta-theorie .ta-btn{font:inherit;font-weight:600;background:var(--xiia-900);color:var(--xiia-50);
  border:none;border-radius:10px;padding:.55em 1.1em;cursor:pointer;transition:250ms;}
.ta-theorie .ta-btn:hover{opacity:.85;}
.ta-theorie .ta-btn:disabled{opacity:.45;cursor:default;}
.ta-theorie .ta-btn--ghost{background:transparent;color:var(--xiia-700);border:1px solid var(--xiia-300);}
.ta-theorie .ta-toggle-group{display:inline-flex;border:1px solid var(--xiia-300);border-radius:10px;overflow:hidden;}
.ta-theorie .ta-toggle-group button{font:inherit;font-weight:600;font-size:.85rem;background:transparent;
  color:var(--xiia-600);border:none;padding:.4em .9em;cursor:pointer;transition:200ms;}
.ta-theorie .ta-toggle-group button.on{background:var(--xiia-900);color:var(--xiia-50);}

/* ===== Widgets (SVG interactifs) ===== */
.ta-theorie .ta-widget{margin:2rem 0;}
.ta-theorie .ta-widget svg{width:100%;height:auto;display:block;}
.ta-theorie .ta-widget .controls{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-bottom:.75rem;}
.ta-theorie .ta-widget .readout{min-height:2.6em;margin-top:.6rem;font-size:.95rem;color:var(--xiia-700);
  border-top:1px solid var(--xiia-200);padding-top:.6rem;}
.ta-theorie .ta-widget .readout strong{color:var(--xiia-900);}
.ta-theorie .svg-caption{margin-top:.65rem;font-size:.85rem;color:var(--xiia-600);font-style:italic;}

/* pastilles de notes (structure NoteView / notes.css) */
.ta-theorie .noteFont{font-family:"brother-xs","Arial Black","Helvetica Neue",system-ui,sans-serif;font-weight:900;}

/* tableau notation */
.ta-theorie table.ta-notation{width:100%;border-collapse:collapse;margin-top:1rem;font-size:.98rem;}
.ta-theorie table.ta-notation th,.ta-theorie table.ta-notation td{border:1px solid var(--xiia-200);padding:.55em .8em;text-align:center;}
.ta-theorie table.ta-notation th{background:var(--xiia-100);font-weight:700;}
.ta-theorie table.ta-notation tbody tr{cursor:pointer;transition:180ms;}
.ta-theorie table.ta-notation tbody tr:hover{background:var(--xiia-100);}
.ta-theorie table.ta-notation tbody tr.playing{background:color-mix(in srgb,var(--xiia-cyan) 18%,transparent);}
.ta-theorie table.ta-notation .play-ic{color:var(--xiia-600);font-size:.8rem;}

/* ===== Patch dark : lisibilité des pastilles noires + sélection =====
 * En dark, le fond de carte (--xiia-50) devient ~#141413, très proche du
 * remplissage des pastilles altérées/touches noires (#131313). On leur
 * redonne un contour clair. La sélection passe par la classe .is-selected
 * (posée en JS) plutôt que par les attributs stroke. */
html.dark .ta-theorie .ta-note--alt{stroke:var(--xiia-400);}
html.dark .ta-theorie .ta-key--black{stroke:var(--xiia-400);}
.ta-theorie .is-selected{stroke:var(--xiia-cyan) !important;stroke-width:4px !important;}
/* pastille de degré façon SquareDegree (série 1) — badges romains art6 */
.ta-theorie .rom-badge{font-family:Georgia,'Times New Roman',serif;font-weight:700;}

/* ===== Convention info-bulle (terme technique + définition courte) ===== */
.ta-theorie .ta-info{position:relative;cursor:help;border-bottom:1px dotted var(--xiia-500);}
.ta-theorie .ta-info::after{content:"\24D8";font-size:.72em;vertical-align:super;color:var(--xiia-cyan);margin-left:1px;}
.ta-theorie .ta-info-bulle{position:absolute;left:50%;bottom:calc(100% + 9px);transform:translateX(-50%);
  background:var(--xiia-900);color:var(--xiia-50);padding:.55rem .7rem;border-radius:8px;
  font-size:.82rem;line-height:1.45;font-weight:400;font-style:normal;text-align:left;
  width:max-content;max-width:260px;
  opacity:0;visibility:hidden;transition:opacity .15s;z-index:30;pointer-events:none;
  box-shadow:0 4px 14px rgba(0,0,0,.28);}
.ta-theorie .ta-info-bulle::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:6px solid transparent;border-top-color:var(--xiia-900);}
.ta-theorie .ta-info:hover .ta-info-bulle,
.ta-theorie .ta-info:focus .ta-info-bulle,
.ta-theorie .ta-info:focus-within .ta-info-bulle{opacity:1;visibility:visible;}
@media (max-width:640px){ .ta-theorie .ta-info-bulle{max-width:200px;} }

/* Diagramme d'accord en image, bascule light/dark (les-accords F1) — dimensions
   réservées via width/height sur <img> pour zéro CLS. */
.ta-theorie .ta-chord-figure{margin:1.6rem 0;text-align:center;}
.ta-theorie .ta-chord-figure img{width:210px;max-width:100%;height:auto;border-radius:8px;}
.ta-theorie .ta-chord-img--dark{display:none;}
html.dark .ta-theorie .ta-chord-img--light{display:none;}
html.dark .ta-theorie .ta-chord-img--dark{display:inline-block;}
.ta-theorie .ta-chord-figure figcaption{font-size:.85rem;color:var(--xiia-600);font-style:italic;margin-top:.55rem;}

/* ===== Composants article 03 « Les Intervalles » ===== */
/* tableau des intervalles + pastille de couleur */
.ta-theorie table.ta-intervals{width:100%;border-collapse:collapse;margin-top:1rem;font-size:.95rem;}
.ta-theorie table.ta-intervals th,.ta-theorie table.ta-intervals td{border:1px solid var(--xiia-200);padding:.5em .7em;text-align:center;}
.ta-theorie table.ta-intervals th{background:var(--xiia-100);font-weight:700;}
.ta-theorie table.ta-intervals td.sym{font-size:1.2rem;font-weight:700;}
.ta-theorie table.ta-intervals tbody tr{cursor:pointer;transition:180ms;}
.ta-theorie table.ta-intervals tbody tr:hover{background:var(--xiia-100);}
.ta-theorie table.ta-intervals tbody tr.playing{background:color-mix(in srgb,var(--xiia-cyan) 18%,transparent);}
.ta-theorie table.ta-intervals .swatch{display:inline-block;width:.85em;height:.85em;border-radius:50%;vertical-align:-.08em;margin-right:.45em;border:1px solid rgba(0,0,0,.15);}
/* blind test des tierces (cartes A/B) */
.ta-theorie .ab-cards{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1rem 0;}
.ta-theorie .ab-card{border:2px solid var(--xiia-300);border-radius:12px;padding:1rem;text-align:center;cursor:pointer;transition:250ms;background:transparent;font:inherit;color:var(--xiia-900);}
.ta-theorie .ab-card:hover{border-color:var(--xiia-500);}
.ta-theorie .ab-card.playing{border-color:var(--xiia-cyan);}
.ta-theorie .ab-card .big{font-size:1.5rem;font-weight:900;display:block;margin-bottom:.2rem;}
.ta-theorie .ab-card .sub{font-size:.85rem;color:var(--xiia-600);}
.ta-theorie .ab-score{font-weight:700;}

/* ===== Composants article 05 « Les Degrés » : SquareDegree (réplique app) ===== */
.ta-theorie .ta-sqdeg{
  font-family:"ff-tisa-web-pro","Roboto Slab",Georgia,serif;
  display:inline-flex;align-items:center;justify-content:center;
  min-width:3.5rem;height:3.5rem;padding:0 .75rem;
  font-size:1.25rem;border-radius:.375rem;border:1px solid transparent;
  user-select:none;cursor:pointer;transition:all .25s;
}
.ta-theorie .ta-sqdeg--white{background:var(--xiia-50);color:var(--xiia-950);border-color:var(--xiia-300);}
.ta-theorie .ta-sqdeg--black{background:var(--xiia-950);color:var(--xiia-50);border-color:var(--xiia-300);}
html.dark .ta-theorie .ta-sqdeg--black{border-color:var(--xiia-400);}
.ta-theorie .ta-sqdeg.is-active{outline:3px solid var(--xiia-cyan);outline-offset:1px;}
.ta-theorie .ta-sqdeg--fn{position:relative;}
.ta-theorie .ta-sqdeg--fn::after{content:'';position:absolute;left:15%;right:15%;bottom:-9px;height:4px;border-radius:2px;background:var(--fn-color,transparent);}
.ta-theorie .deg-row{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center;margin:.8rem 0;}
.ta-theorie .deg-cell{display:flex;flex-direction:column;align-items:center;gap:.5rem;}
.ta-theorie .deg-note{font-size:.85rem;font-weight:700;color:var(--xiia-700);}
.ta-theorie .deg-fnlabel{font-size:.72rem;font-weight:700;letter-spacing:.02em;color:var(--xiia-600);text-align:center;}
.ta-theorie .chord-name{font-size:.95rem;font-weight:700;color:var(--xiia-700);min-height:1.4em;transition:200ms;}
.ta-theorie .chord-name.flash{color:var(--xiia-cyan);}

/* ===== Composants article 06 « Les Accords » ===== */
/* RomanChord : badge SquareDegree + nuancier bas (fondamentale/tierce/quinte) */
.ta-theorie .ta-romanchord{position:relative;overflow:hidden;flex-direction:column;padding-bottom:10px;}
.ta-theorie .rc-strip{position:absolute;bottom:0;left:0;right:0;height:7px;display:flex;}
.ta-theorie .rc-strip span{flex:1;}
/* Tour d'accord (empilement des étages fondamentale/tierce/quinte) */
.ta-theorie .tour{display:flex;flex-direction:column-reverse;align-items:center;gap:.5rem;margin:1rem 0;}
.ta-theorie .tour-etage{display:flex;align-items:center;gap:.9rem;min-height:3.2rem;transition:all .4s;opacity:1;}
.ta-theorie .tour-etage.hidden-floor{opacity:0;transform:translateY(10px);}
.ta-theorie .tour-note{width:3.2rem;height:3.2rem;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:.85rem;color:#fff;border:2px solid #fff;}
html.dark .ta-theorie .tour-note{border-color:var(--xiia-400);}
.ta-theorie .tour-label{font-size:.85rem;color:var(--xiia-600);min-width:12rem;}
.ta-theorie .tour-label strong{color:var(--xiia-900);}
.ta-theorie .tour-dist{font-size:.75rem;font-weight:700;color:var(--xiia-500);min-width:5.5rem;text-align:right;}

/* ===== Composants article 07 « Les Modes » ===== */
.ta-theorie table.ta-intervals tbody tr.highlight{background:color-mix(in srgb,var(--xiia-cyan) 10%,transparent);font-weight:700;}
.ta-theorie .mode-name{font-size:1.15rem;font-weight:900;text-align:center;margin:.4rem 0 .2rem;}
.ta-theorie .mode-sub{font-size:.85rem;color:var(--xiia-600);text-align:center;margin-bottom:.6rem;}

/* ===== Composants article 08 « Les Cadences » ===== */
/* cartes-ponctuation */
.ta-theorie .punct-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1rem;margin:1rem 0;}
.ta-theorie .punct-card{border:2px solid var(--xiia-300);border-radius:12px;padding:1rem;text-align:center;cursor:pointer;transition:250ms;background:transparent;font:inherit;color:var(--xiia-900);}
.ta-theorie .punct-card:hover{border-color:var(--xiia-500);}
.ta-theorie .punct-card.playing{border-color:var(--xiia-cyan);}
.ta-theorie .punct-sign{font-size:2.6rem;font-weight:900;display:block;line-height:1;margin-bottom:.35rem;font-family:"ff-tisa-web-pro",Georgia,serif;}
.ta-theorie .punct-name{font-weight:700;display:block;margin-bottom:.2rem;}
.ta-theorie .punct-move{font-size:.85rem;color:var(--xiia-600);display:block;}
/* flow : jetons de degrés (chiffre romain + nom d'accord) */
.ta-theorie .flow{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;margin:.8rem 0;}
.ta-theorie .flow-chip{min-width:3.4rem;padding:.45rem .7rem;border-radius:8px;border:1px solid var(--xiia-300);
  text-align:center;transition:250ms;background:#ffffff;color:#000;
  display:flex;flex-direction:column;align-items:center;gap:.1rem;}
.ta-theorie .flow-rom{font-family:"ff-tisa-web-pro","Roboto Slab",Georgia,serif;font-size:1.2rem;font-weight:700;line-height:1.1;}
.ta-theorie .flow-name{font-size:.72rem;font-weight:600;color:var(--xiia-600);}
.ta-theorie .flow-chip.on{background:#131313;color:#fff;border-color:#fff;}
.ta-theorie .flow-chip.on .flow-name{color:#bebfb4;}
html.dark .ta-theorie .flow-chip.on{border-color:var(--xiia-400);}
.ta-theorie .flow-arrow{align-self:center;color:var(--xiia-500);font-weight:900;}

/* ===== Blocs CTA de fin de série (reco @marketing, dans le corps, hors schema) ===== */
.ta-theorie .series-cta{margin-top:3rem;padding:1.8rem;background:var(--xiia-50);border:1px solid var(--xiia-200);
  border-radius:12px;text-align:center;}
.ta-theorie .series-cta h3{margin-top:0;margin-bottom:.6rem;color:var(--xiia-900);}
.ta-theorie .series-cta p{color:var(--xiia-700);margin-bottom:1rem;}
.ta-theorie .series-cta .ta-btn{display:inline-block;text-decoration:none;}
.ta-theorie .series-cta--secondaire{margin-top:1rem;background:transparent;border-style:dashed;}

/* ===== SÉRIE 2 — art. 2 : liste HowTo numérotée + ligne d'exception ===== */
.ta-theorie .howto-steps{list-style:none;counter-reset:step;margin:1.2rem 0;}
.ta-theorie .howto-steps li{counter-increment:step;position:relative;padding:.6rem 0 .6rem 3.2rem;
  border-bottom:1px dashed var(--xiia-200);}
.ta-theorie .howto-steps li::before{content:counter(step);position:absolute;left:0;top:.55rem;
  width:2.2rem;height:2.2rem;border-radius:8px;background:var(--xiia-900);color:var(--xiia-50);
  display:flex;align-items:center;justify-content:center;font-weight:700;
  font-family:Georgia,'Times New Roman',serif;}
.ta-theorie table.ta-intervals tbody tr.is-exception td{font-weight:700;border-color:#E52E40;}

/* ===== Page HUB « Théorie musicale » : cartes de la série ===== */
.ta-theorie .serie-grid{display:grid;grid-template-columns:1fr;gap:1rem;margin:1.5rem 0;list-style:none;}
.ta-theorie .serie-card{display:flex;gap:1.1rem;align-items:flex-start;background:var(--xiia-50);
  border:1px solid var(--xiia-200);border-radius:12px;padding:1.15rem 1.3rem;transition:250ms;}
.ta-theorie .serie-card:hover{border-color:var(--xiia-500);}
.ta-theorie .serie-num{flex:0 0 auto;width:2.6rem;height:2.6rem;border-radius:.375rem;background:var(--xiia-900);color:var(--xiia-50);
  border:1px solid var(--xiia-300);display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;font-weight:700;font-family:"ff-tisa-web-pro","Roboto Slab",Georgia,serif;}
html.dark .ta-theorie .serie-num{border-color:var(--xiia-400);}
.ta-theorie .serie-card h3{font-size:1.12rem;margin:0 0 .25rem;}
.ta-theorie .serie-card h3 a{color:var(--xiia-900);text-decoration:none;}
.ta-theorie .serie-card h3 a:hover{color:var(--xiia-cyan);}
.ta-theorie .serie-card p{margin:0;font-size:.95rem;color:var(--xiia-700);}
.ta-theorie .serie-card .serie-tags{display:block;margin-top:.5rem;font-size:.8rem;color:var(--xiia-500);}
/* pont vers la série jumelle (hub) */
.ta-theorie .pont{margin-top:2.5rem;padding:1.4rem 1.5rem;background:var(--xiia-100);border-left:5px solid var(--xiia-700);border-radius:6px;}
.ta-theorie .pont h2{margin-top:0;border:none;padding:0;font-size:1.2rem;}
.ta-theorie .pont p{margin-bottom:0;}
/* Liste « au programme des prochains guides » (hub entraînement) */
.ta-theorie .a-venir{margin:1.4rem 0 0;list-style:none;padding:0;}
.ta-theorie .a-venir li{padding:.7rem 0 .7rem 1.9rem;position:relative;color:var(--xiia-700);border-bottom:1px dashed var(--xiia-200);}
.ta-theorie .a-venir li::before{content:'\266A';position:absolute;left:.3rem;color:var(--xiia-500);}

/* ===== Pages silo « outils gratuits » (accordeur) ===== */
.ta-theorie .tuner-slot{min-height:420px;margin:1.2rem 0 .8rem;background:var(--xiia-50);border:1px solid var(--xiia-200);border-radius:12px;}
.ta-theorie .privacy-note{font-size:.85rem;color:var(--xiia-600);font-style:italic;margin-bottom:1.6rem;}
.ta-theorie .chapo{background:var(--xiia-100);border-left:5px solid var(--xiia-cyan);padding:1.2rem 1.4rem;margin:1.4rem 0 2rem;border-radius:6px;}
.ta-theorie .chapo p{margin:0;}
.ta-theorie .hub-link{margin-top:2rem;text-align:center;font-size:.9rem;color:var(--xiia-600);}
@media (max-width:640px){ .ta-theorie .tuner-slot{min-height:480px;} }

/* ===== Composants article 10 « L'Harmonisation » : récap série numérotée ===== */
.ta-theorie .serie-recap{list-style:none;counter-reset:etape;margin-left:0;}
.ta-theorie .serie-recap li{margin-bottom:.7rem;padding-left:2.4rem;position:relative;counter-increment:etape;}
.ta-theorie .serie-recap li::before{content:counter(etape);position:absolute;left:0;top:.1em;
  width:1.7rem;height:1.7rem;border-radius:.375rem;background:#131313;color:#fff;border:1px solid #fff;
  display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:700;
  font-family:"ff-tisa-web-pro","Roboto Slab",Georgia,serif;}
html.dark .ta-theorie .serie-recap li::before{border-color:var(--xiia-400);}

/* ===== Composants article 09 « La Tonalité » : enquête ===== */
.ta-theorie .indice{border:1px dashed var(--xiia-300);border-radius:10px;padding:.9rem 1.1rem;margin:.6rem 0;transition:250ms;opacity:.45;}
.ta-theorie .indice.revealed{opacity:1;border-style:solid;border-color:var(--xiia-500);}
.ta-theorie .indice .num{font-weight:900;color:var(--xiia-cyan);margin-right:.4rem;}

/* ===== Lecteur de suite (article 09 manche « Mes premières suites d'accords ») ===== */
.ta-theorie .suite-player .chips{display:flex;flex-wrap:wrap;gap:.55rem;align-items:center;margin:.4rem 0 .9rem;}
.ta-theorie .suite-chip{min-width:3.6rem;text-align:center;padding:.5em .8em;border-radius:10px;
  background:var(--xiia-100);border:2px solid var(--xiia-300);font-weight:700;transition:180ms;}
.ta-theorie .suite-chip .badge{display:block;font-size:.7rem;font-weight:600;color:var(--xiia-600);
  font-family:Georgia,'Times New Roman',serif;}
.ta-theorie .suite-chip.on{background:var(--xiia-900);color:var(--xiia-50);border-color:var(--xiia-900);}
.ta-theorie .suite-chip.on .badge{color:var(--xiia-400);}
.ta-theorie .suite-sep{color:var(--xiia-500);font-weight:700;}
/* Diagrammes d'accords : un svg par accord, flex-wrap → 2 par ligne sur mobile (pas de rétrécissement) */
.ta-theorie .suite-player .suite-diagrams{display:flex;flex-wrap:wrap;justify-content:center;gap:.45rem;margin:0 0 .6rem;}
/* flex:1 1 0 : les diagrammes se partagent équitablement TOUTE la largeur de la colonne */
.ta-theorie .suite-player .suite-diagrams svg{display:block;flex:1 1 0;min-width:0;height:auto;}
/* mobile : 2 par ligne, chaque diagramme s'étire (calc(50% - .3rem) pour le gap) */
@media (max-width:640px){ .ta-theorie .suite-player .suite-diagrams svg{flex:1 1 calc(50% - .3rem);} }

/* ===== Responsive ===== */
@media (max-width:640px){
  .ta-theorie{font-size:1rem;}
  .ta-theorie h2{font-size:1.35rem;}
  .ta-theorie .ab-cards{grid-template-columns:1fr;}
  .ta-theorie .ta-sqdeg{min-width:2.9rem;height:2.9rem;font-size:1.05rem;}
  .ta-theorie .tour-label{min-width:9rem;}
}