/* Woy — six apparences (charte : docs/charte.md du projet). 33 tours par défaut.
   Règle : toute couleur est une variable déclarée dans le bloc de l'apparence. Une zone de couleur différente (ex. l'ivoire de Transistor) redéfinit
   simplement --texte, --doux, --accent… pour ses enfants. [data-theme] vaut aussi pour les vignettes de Réglages. */

/* ───────── Polices (licences : polices/LICENCES.txt). Les fichiers *-eng n'ont que Ŋ ŋ ; une police téléchargée seulement si son apparence est affichée. ───────── */
@font-face { font-family: "Shrikhand"; src: url(/polices/shrikhand.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Cabin"; font-weight: 100 500; src: url(/polices/cabin-400.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Cabin"; font-weight: 501 900; src: url(/polices/cabin-600.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Cabin"; font-weight: 100 500; src: url(/polices/cabin-eng.woff2) format("woff2"); unicode-range: U+14A-14B; font-display: swap; }
@font-face { font-family: "Cabin"; font-weight: 501 900; src: url(/polices/cabin-eng.woff2) format("woff2"); unicode-range: U+14A-14B; font-display: swap; }
@font-face { font-family: "Covered By Your Grace"; src: url(/polices/covered-by-your-grace.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Inconsolata"; font-weight: 100 900; src: url(/polices/inconsolata-500.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Inconsolata"; font-weight: 100 900; src: url(/polices/inconsolata-eng.woff2) format("woff2"); unicode-range: U+14A-14B; font-display: swap; }
@font-face { font-family: "Oleo Script"; font-weight: 100 900; src: url(/polices/oleo-script-700.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "League Spartan"; font-weight: 100 900; src: url(/polices/league-spartan-500.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "League Spartan"; font-weight: 100 900; src: url(/polices/league-spartan-eng.woff2) format("woff2"); unicode-range: U+14A-14B; font-display: swap; }
@font-face { font-family: "VT323"; font-weight: 100 900; src: url(/polices/vt323.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "VT323"; font-weight: 100 900; src: url(/polices/vt323-eng.woff2) format("woff2"); unicode-range: U+14A-14B; font-display: swap; }
@font-face { font-family: "Sorts Mill Goudy"; font-weight: 100 900; src: url(/polices/sorts-mill-goudy.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Sorts Mill Goudy"; font-weight: 100 900; font-style: italic; src: url(/polices/sorts-mill-goudy-italique.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Sorts Mill Goudy"; font-weight: 100 900; src: url(/polices/eb-garamond-eng.woff2) format("woff2"); unicode-range: U+14A-14B; font-display: swap; }
@font-face { font-family: "Sorts Mill Goudy"; font-weight: 100 900; font-style: italic; src: url(/polices/eb-garamond-eng-italique.woff2) format("woff2"); unicode-range: U+14A-14B; font-display: swap; }
@font-face { font-family: "Anton"; font-weight: 100 900; src: url(/polices/anton.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Anton"; font-weight: 100 900; src: url(/polices/anton-eng.woff2) format("woff2"); unicode-range: U+14A-14B; font-display: swap; }
@font-face { font-family: "Sofia Sans"; font-weight: 100 600; src: url(/polices/sofia-sans-500.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Sofia Sans"; font-weight: 601 900; src: url(/polices/sofia-sans-800.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Sofia Sans"; font-weight: 100 600; src: url(/polices/sofia-sans-eng.woff2) format("woff2"); unicode-range: U+14A-14B; font-display: swap; }
@font-face { font-family: "Sofia Sans"; font-weight: 601 900; src: url(/polices/sofia-sans-eng.woff2) format("woff2"); unicode-range: U+14A-14B; font-display: swap; }

/* ───────── Variables communes ───────── */
:root {
  --mini: 72px; --trait: 1.8; --rayon: 0px; --rayon-carte: 0px; --rayon-feuille: 0px; --rayon-pochette: 0px; --graisse-titre: 400; --casse-titre: none;
  --voile: rgba(0, 0, 0, .6);
}
/* 33 tours (par défaut) : le disque sur la platine du salon */
:root, [data-theme="vinyle"] {
  --fond: #0e0c0b; --surface: #1a1715; --surface-2: #26211d; --bord: #352e29; --texte: #f5ecdc; --doux: #b0a596;
  --accent: #eab54d; --sur-accent: #1c1404; --accent-clair: rgba(234, 181, 77, .14); --accent-bord: rgba(234, 181, 77, .4); --rouge: #ff8a70; --barre: #0e0c0b;
  --titre: "Shrikhand", "Cabin", Georgia, serif; --corps: "Cabin", system-ui, sans-serif;
  --rayon: 999px; --rayon-carte: 14px; --rayon-feuille: 22px; --rayon-pochette: 3px;
  --noir: #000; --sillon-a: #050404; --sillon-b: #191614; --sillon-page: rgba(255, 255, 255, .035); --reflet: rgba(255, 255, 255, .09); --cercle: #4b423a;
  --label-rouge: #c8341f; --bras-a: #b98f3e; --bras-b: #f2d48c; --bras-pied: #2d2722; --bras-pied-2: #7c6c55;
  color-scheme: dark;
}
/* K7 : la cassette du marché Sandaga */
[data-theme="k7"] {
  --fond: #f3e9d4; --surface: #fbf4e4; --surface-2: #e9dcc1; --bord: #cdbb9a; --texte: #241d18; --doux: #62564a;
  --accent: #a8320a; --sur-accent: #fff6e6; --accent-clair: rgba(168, 50, 10, .1); --accent-bord: rgba(168, 50, 10, .4); --rouge: #a3210f; --barre: #26211d;
  --titre: "Covered By Your Grace", "Inconsolata", cursive; --corps: "Inconsolata", ui-monospace, monospace;
  --rayon: 3px; --rayon-carte: 3px; --rayon-feuille: 3px; --rayon-pochette: 0px;
  --plastique: #26211d; --plastique-2: #3f362e; --plastique-3: #2c2622; --plastique-bord: #43392f; --bande: #3a2a20; --fenetre: #17130f; --creme: #f6ecd8; --creme-doux: #c9bba4;
  --raie-1: #e4572e; --raie-2: #f2a51e; --raie-3: #a8461c; --scotch: rgba(242, 165, 30, .55); --ombre-dure: rgba(36, 29, 24, .35);
  --raies: linear-gradient(180deg, var(--raie-1) 0 25%, var(--raie-2) 25% 50%, var(--raie-3) 50% 75%, var(--bande) 75%);
  color-scheme: light;
}
/* Transistor : le poste rouge de la cuisine. Fond rouge ; les zones ivoire redéfinissent leurs couleurs plus bas. */
[data-theme="transistor"] {
  --fond: #ad2b13; --surface: #8c2210; --surface-2: #7f1d0c; --bord: #d3705a; --texte: #fff4e0; --doux: #ffdfc4;
  --accent: #f6ecd8; --sur-accent: #7f1d0c; --accent-clair: rgba(246, 236, 216, .14); --accent-bord: rgba(246, 236, 216, .4); --rouge: #fff4e0; --barre: #ad2b13;
  --titre: "Oleo Script", "League Spartan", Georgia, serif; --corps: "League Spartan", system-ui, sans-serif;
  --rayon: 7px; --rayon-carte: 7px; --rayon-feuille: 12px; --rayon-pochette: 6px; --trait: 2; --graisse-titre: 700;
  --creme-chaude: #fff4e0; --ivoire: #f6ecd8; --ivoire-2: #e7d9bd; --ivoire-bord: #d9c8a8; --encre: #2a1a12; --encre-douce: #6d4c38; --brique: #a32510; --bordeaux: #7f1d0c; --relief: #6b190b; --relief-2: #5e150a;
  --chrome-a: #f4f1ea; --chrome-b: #9b988f; --chrome-c: #efece4; --chrome-d: #d6d3cb; --aiguille: #d92a0d;
  --grille: radial-gradient(circle, var(--bordeaux) 0 1.7px, transparent 2px);
  color-scheme: light;
}
/* Baladeur : le petit écran à cristaux */
[data-theme="baladeur"] {
  --fond: #b4c88c; --surface: #a6bb7e; --surface-2: #9bb072; --bord: #1c2613; --texte: #1c2613; --doux: #2f3d25;
  --accent: #1c2613; --sur-accent: #b4c88c; --accent-clair: rgba(28, 38, 19, .12); --accent-bord: #1c2613; --rouge: #1c2613; --barre: #b4c88c;
  --titre: "VT323", ui-monospace, monospace; --corps: "VT323", ui-monospace, monospace; --casse-titre: uppercase; --trait: 2.4;
  --rayon: 0px; --rayon-carte: 0px; --rayon-feuille: 0px; --rayon-pochette: 0px;
  --pixel: rgba(28, 38, 19, .05);
  --pixels: repeating-linear-gradient(0deg, var(--pixel) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, var(--pixel) 0 1px, transparent 1px 3px);
  color-scheme: light;
}
/* Kora : la calebasse et les cordes du griot */
[data-theme="kora"] {
  --fond: #23110b; --surface: #321b12; --surface-2: #44281a; --bord: #5e3d28; --texte: #f7ead3; --doux: #d0b898;
  --accent: #e6a84f; --sur-accent: #2a1407; --accent-clair: rgba(230, 168, 79, .14); --accent-bord: rgba(230, 168, 79, .45); --rouge: #ff9a7c; --barre: #23110b;
  --titre: "Sorts Mill Goudy", Georgia, serif; --corps: "Sorts Mill Goudy", Georgia, serif;
  --rayon: 999px; --rayon-carte: 14px; --rayon-feuille: 22px; --rayon-pochette: 50%; --trait: 1.5;
  --corde: rgba(247, 234, 211, .13); --corde-vive: rgba(247, 234, 211, .72); --calebasse-a: #f0c27a; --calebasse-b: #b8742c; --calebasse-c: #7c4a1c; --clou: #2a1407; --clou-clair: #ffe2a8; --fond-nuit: #180b06; --lueur: #5a2f16;
  color-scheme: dark;
}
/* Affiche : le programme du concert, deux encres */
[data-theme="affiche"] {
  --fond: #f3eee2; --surface: #fbf7ee; --surface-2: #e6dfce; --bord: #1437b5; --texte: #1437b5; --doux: #2e4596;
  --accent: #1437b5; --sur-accent: #f3eee2; --accent-clair: rgba(20, 55, 181, .1); --accent-bord: #1437b5; --rouge: #c21f00; --barre: #f3eee2;
  --titre: "Anton", "Sofia Sans", Impact, sans-serif; --corps: "Sofia Sans", system-ui, sans-serif; --casse-titre: uppercase; --trait: 2.2;
  --rayon: 0px; --rayon-carte: 0px; --rayon-feuille: 0px; --rayon-pochette: 0px;
  --encre: #1437b5; --encre-2: #2e4596; --papier: #f3eee2; --encre-rouge: #ff4a26; --decalage: rgba(255, 74, 38, .85); --sur-rouge: #14141a; --papier-doux: #d8def2;
  --trame: radial-gradient(circle, var(--encre-rouge) 0 1.8px, transparent 2px);
  color-scheme: light;
}

/* Tailles de texte : les polices très petites ou très fines sont agrandies pour toute l'appli */
html[data-theme="baladeur"] { font-size: 131%; }
html[data-theme="kora"] { font-size: 112%; }
html[data-theme="affiche"] { font-size: 106%; }

/* ───────── Socle ───────── */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--corps); background: var(--fond); color: var(--texte); line-height: 1.4; font-synthesis: none;
  -webkit-tap-highlight-color: transparent; overflow-wrap: break-word;
}
body.avec-mini { padding-bottom: calc(var(--mini) + env(safe-area-inset-bottom)); }
body.plein-ouvert { overflow: hidden; }
a { color: var(--accent); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
main { max-width: 820px; margin: 0 auto; padding: 0 16px 40px; min-height: 60vh; }
[hidden] { display: none !important; }
h1, h2, h3 { line-height: 1.15; font-family: var(--titre); font-weight: var(--graisse-titre); text-transform: var(--casse-titre); }
svg { width: 22px; height: 22px; display: block; flex: none; }
svg [stroke] { stroke-width: var(--trait); }
.discret { color: var(--doux); font-size: .88rem; }
.discret svg { display: inline-block; width: 16px; height: 16px; vertical-align: -3px; }
.chargement { padding: 60px 0; color: var(--doux); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Le mot woy : son o prend la forme de l'objet de l'apparence */
.marque { display: flex; align-items: center; text-decoration: none; color: var(--texte); margin-right: auto; font-family: var(--titre); font-weight: var(--graisse-titre); font-size: 2rem; line-height: 1; min-height: 44px; }
.marque .mot { display: inline-flex; align-items: center; }
.marque .o { display: inline-block; width: .56em; height: .56em; margin: .08em .05em 0; position: relative; flex: none; }
.marque.grande { font-size: 4.2rem; min-height: 0; margin-bottom: 8px; }

/* En-tête */
.entete { position: sticky; top: 0; z-index: 20; background: var(--barre); padding-top: env(safe-area-inset-top); }
.entete .dedans { max-width: 820px; margin: 0 auto; padding: 7px 8px 7px 16px; display: flex; align-items: center; gap: 6px; }

/* Boutons */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 8px 16px; border-radius: var(--rayon); border: 0;
  background: var(--accent); color: var(--sur-accent); font-weight: 600; text-decoration: none; white-space: nowrap;
}
.bouton svg { width: 18px; height: 18px; }
.bouton:disabled { opacity: .6; cursor: wait; }
.bouton.petit { padding: 6px 14px; font-size: .95rem; }
.option-texte { margin-left: -3px; }
.bouton.grand { padding: 13px 26px; font-size: 1.05rem; }
.bouton.large { width: 100%; margin-top: 10px; white-space: normal; }
.bouton.second { background: var(--surface-2); color: var(--texte); box-shadow: inset 0 0 0 1px var(--bord); }
.bouton.danger-plein { background: var(--rouge); color: var(--fond); }

.rond {
  width: 44px; height: 44px; flex: none; border-radius: var(--rayon); border: 0; background: transparent; color: var(--texte); text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; position: relative; padding: 0;
}
.rond:hover { background: var(--surface-2); }
.rond.petit { color: var(--doux); }
.rond.petit svg { width: 18px; height: 18px; }
.rond.fort { background: var(--accent); color: var(--sur-accent); }
.rond.fort:hover { background: var(--accent); }
.rond.grand svg { width: 30px; height: 30px; }
.rond.tres-grand { width: 72px; height: 72px; }
.rond.tres-grand svg { width: 32px; height: 32px; }
.rond.actif { color: var(--accent); }
.rond.actif::after { content: ""; position: absolute; bottom: 4px; width: 4px; height: 4px; background: currentColor; }
.rond i { position: absolute; font-style: normal; font-size: .62rem; font-weight: 800; top: 8px; right: 7px; }

/* Curseurs : mêmes règles pour Chrome, Safari (-webkit-) et Firefox (-moz-). Une apparence ne change que les variables. */
input[type=range] {
  --piste-h: 4px; --curseur-l: 16px; --curseur-h: 16px; --curseur-r: 0; --curseur: var(--accent);
  --piste-image: linear-gradient(90deg, var(--accent) calc(var(--p, 0) * 100%), var(--bord) 0);
  -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer;
}
input[type=range]::-webkit-slider-runnable-track { height: var(--piste-h); background: var(--piste-image); }
input[type=range]::-moz-range-track { height: var(--piste-h); background: var(--piste-image); }
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: var(--curseur-l); height: var(--curseur-h); margin-top: calc((var(--piste-h) - var(--curseur-h)) / 2); background: var(--curseur); border: 0; border-radius: var(--curseur-r);
}
input[type=range]::-moz-range-thumb { width: var(--curseur-l); height: var(--curseur-h); background: var(--curseur); border: 0; border-radius: var(--curseur-r); }
input[type=range]:disabled { opacity: .45; }
input[type=checkbox] {
  -webkit-appearance: none; appearance: none; position: relative; flex: none; width: 46px; height: 28px; margin: 0; padding: 0; cursor: pointer;
  background: var(--surface-2); box-shadow: inset 0 0 0 1.5px var(--doux); border-radius: var(--rayon);
}
input[type=checkbox]::after { content: ""; position: absolute; left: 4px; top: 4px; width: 20px; height: 20px; background: var(--doux); border-radius: var(--rayon); }
input[type=checkbox]:checked { background: var(--accent); box-shadow: none; }
input[type=checkbox]:checked::after { left: 22px; background: var(--sur-accent); }

/* Accueil vide et partage reçu */
.accueil { padding: 34px 0 20px; }
.accueil h1 { font-size: 1.9rem; margin: 10px 0 8px; }
.accueil p { color: var(--doux); max-width: 520px; margin: 0 0 16px; }
.choix-ajout { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin: 22px 0; }
.choix {
  display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center;
  padding: 14px; border-radius: var(--rayon-carte); background: var(--surface); color: var(--texte); border: 1px solid var(--bord); text-align: left;
}
.choix:hover { border-color: var(--accent); }
.choix span { grid-row: span 2; color: var(--accent); display: flex; justify-content: center; }
.choix span svg { width: 28px; height: 28px; }
.choix small { color: var(--doux); font-size: .85rem; }

/* Recherche et champs */
.recherche {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; margin-bottom: 6px; background: var(--surface); color: var(--doux);
  border: 1px solid var(--bord); border-radius: var(--rayon);
}
.recherche svg { width: 18px; height: 18px; }
.recherche input { flex: 1; min-width: 0; height: 42px; border: 0; padding: 0; background: none; color: var(--texte); font-size: 1rem; outline: 0; -webkit-appearance: none; appearance: none; }
.recherche input { text-overflow: ellipsis; }
.recherche input::placeholder { color: var(--doux); opacity: 1; text-overflow: ellipsis; }
.recherche:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; }
textarea, .feuille input:not([type=range]):not([type=checkbox]) { width: 100%; padding: 12px 14px; min-height: 44px; border-radius: var(--rayon-carte); border: 1px solid var(--bord); background: var(--fond); font-size: 1rem; color: var(--texte); }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.recherche input:focus { outline: 0; }
.puces { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.puces::-webkit-scrollbar { display: none; }
.puce, .puces select {
  flex: none; min-height: 44px; padding: 8px 14px; border-radius: var(--rayon); border: 1px solid var(--bord); background: var(--surface); color: var(--texte); font-size: .92rem; white-space: nowrap;
}
.puce.actif { background: var(--texte); color: var(--fond); border-color: var(--texte); font-weight: 600; }
.puces select { margin-left: auto; color: var(--texte); }
.puces select option { color: var(--texte); background: var(--surface); }
.actions-liste { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 12px; }
.compte { color: var(--doux); font-size: .88rem; margin-left: auto; }

/* Listes de morceaux */
.morceaux { list-style: none; margin: 0; padding: 0; }
.morceaux li { display: flex; align-items: center; border-radius: var(--rayon-carte); }
.morceaux li:hover { background: var(--surface); }
.morceaux li.vide { padding: 30px 0; color: var(--doux); }
.ligne { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 7px 8px; border: 0; background: none; text-align: left; min-height: 48px; color: var(--texte); }
.textes { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.textes b, .textes small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.textes b { font-weight: 500; }
.textes small { color: var(--doux); font-size: .85rem; }
.morceaux li.courant .textes b { color: var(--accent); }
.duree { color: var(--doux); font-size: .85rem; font-variant-numeric: tabular-nums; }
.drive { display: inline-block; font-size: .7rem; font-weight: 700; padding: 0 5px; margin-right: 6px; background: var(--accent-clair); color: var(--accent); }

/* Pochettes. Sans image : .note, dessinée par chaque apparence */
.pochette { width: 46px; height: 46px; flex: none; border-radius: var(--rayon-pochette); overflow: hidden; background: var(--surface-2); display: block; position: relative; }
.pochette img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pochette .note { position: absolute; inset: 0; z-index: 2; display: block; background: var(--surface-2); }
.pochette.grande { width: 120px; height: 120px; }

/* Partage reçu */
.partage { padding-top: 22px; }
.sur-titre { color: var(--accent); font-weight: 600; margin: 0 0 14px; }
.partage-tete { display: flex; gap: 18px; align-items: center; margin-bottom: 14px; }
.partage-tete h1 { margin: 0 0 4px; font-size: 1.7rem; word-break: break-word; }
.partage-tete p { margin: 0; color: var(--doux); }

/* Mini lecteur */
.mini {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; gap: 2px; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)) 10px;
  background: var(--surface); color: var(--texte); border-top: 1px solid var(--bord);
}
.mini-barre { position: absolute; top: -1px; left: 0; right: 0; height: 3px; }
.mini-barre span { display: block; height: 100%; width: 0; background: var(--accent); }
.mini-info { flex: 1; min-width: 0; display: flex; gap: 10px; align-items: center; border: 0; background: none; text-align: left; padding: 0; min-height: 46px; color: var(--texte); }
.mini-textes { min-width: 0; display: flex; flex-direction: column; }
.mini-textes b, .mini-textes small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-textes b { font-weight: 600; }
.mini-textes small { color: var(--doux); font-size: .85rem; }
@media (max-width: 480px) { .mini [data-precedent] { display: none; } }
@media (min-width: 900px) { .mini { padding-left: calc(50vw - 410px); padding-right: calc(50vw - 410px); } }

/* Lecteur en grand */
.plein { position: fixed; inset: 0; z-index: 40; overflow-y: auto; background: var(--fond); color: var(--texte); }
.plein-dedans { --marge: 20px; max-width: 460px; margin: 0 auto; padding: calc(4px + env(safe-area-inset-top)) var(--marge) calc(30px + env(safe-area-inset-bottom)); position: relative; }
.plein-haut { display: flex; align-items: center; justify-content: space-between; color: var(--doux); font-size: .85rem; margin: 0 -10px; position: relative; z-index: 5; }
.support { --cote: min(100vw - 40px, 420px, 46vh); position: relative; height: calc(var(--cote) + 12px); margin-top: 6px; }
.objet, .objet i, .scotch, .spectre, .cadran { display: none; }
.objet { position: absolute; inset: 0; }
.objet i { position: absolute; display: block; }
.grande-pochette { position: absolute; z-index: 1; left: 50%; top: 6px; width: var(--cote); height: var(--cote); margin-left: calc(var(--cote) / -2); }
.plein-textes { display: flex; align-items: center; gap: 0; margin-top: 12px; min-height: 60px; position: relative; z-index: 2; }
.plein-textes > div { flex: 1; min-width: 0; }
.plein-textes h2 { margin: 0; font-size: 1.75rem; line-height: 1.12; word-break: break-word; }
.plein-textes p { margin: 2px 0 0; color: var(--doux); }
.plein-textes .rond { color: var(--doux); }
.rond.aime { color: var(--accent); }
.avance { position: relative; z-index: 2; }
.temps { display: flex; justify-content: space-between; color: var(--doux); font-size: .85rem; font-variant-numeric: tabular-nums; margin-top: -6px; position: relative; z-index: 2; }
.commandes { display: flex; align-items: center; justify-content: space-between; margin: 12px 0; position: relative; z-index: 2; }
.volume { display: flex; align-items: center; gap: 8px; color: var(--doux); position: relative; z-index: 2; }
.a-suivre-titre { margin: 18px 0 6px; font-size: 1.25rem; color: var(--texte); position: relative; z-index: 2; }
.a-suivre { position: relative; z-index: 2; }
.a-suivre li:first-child { background: var(--accent-clair); }

/* Fenêtres du bas */
.voile { position: fixed; inset: 0; z-index: 50; background: var(--voile); display: flex; align-items: flex-end; justify-content: center; }
.feuille {
  width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto; background: var(--surface); color: var(--texte);
  border-radius: var(--rayon-feuille) var(--rayon-feuille) 0 0; padding: 8px 20px calc(20px + env(safe-area-inset-bottom)); animation: monte .2s ease-out;
}
@media (min-width: 700px) { .voile { align-items: center; } .feuille { border-radius: var(--rayon-feuille); } }
@keyframes monte { from { transform: translateY(40px); opacity: 0; } }
.poignee { width: 40px; height: 4px; background: var(--bord); margin: 4px auto 10px; }
.feuille h2 { margin: 6px 0 12px; font-size: 1.5rem; word-break: break-word; }
.feuille h3 { margin: 20px 0 4px; font-size: 1.15rem; }
.feuille label { display: block; margin: 10px 0 4px; font-size: .9rem; color: var(--doux); }
.feuille label input { margin-top: 4px; color: var(--texte); }
.feuille .choix-ajout { margin: 0; grid-template-columns: 1fr; }
.feuille .erreur { color: var(--rouge); }
.feuille-morceau { display: flex; gap: 12px; align-items: center; margin: 4px 0 12px; }
.feuille-morceau div { min-width: 0; display: flex; flex-direction: column; }
.feuille-morceau small { color: var(--doux); }
.menu { display: flex; flex-direction: column; }
.menu button { display: flex; align-items: center; gap: 12px; text-align: left; min-height: 48px; padding: 10px 6px; border: 0; border-top: 1px solid var(--bord); background: none; color: var(--texte); font-size: 1rem; }
.menu button svg { width: 20px; height: 20px; color: var(--accent); }
.menu button:hover { color: var(--accent); }
.menu button.danger, .menu button.danger svg { color: var(--rouge); }
.menu small { font-size: .85rem; }
.partage-boutons { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.lien-a-copier { font-size: .85rem !important; color: var(--doux); }
.aide { margin: 14px 0 4px; background: var(--surface-2); border-radius: var(--rayon-carte); padding: 0 14px; }
.aide summary { cursor: pointer; font-weight: 600; min-height: 44px; padding: 10px 0; }
.aide ol { padding-left: 20px; margin: 8px 0; }
.aide li { margin: 4px 0; }

/* Dépôt de fichiers, messages */
.depot { position: fixed; inset: 0; z-index: 60; background: var(--fond); display: grid; place-items: center; pointer-events: none; }
.depot div { padding: 40px 50px; border: 3px dashed var(--accent); font-size: 1.3rem; font-weight: 700; }
.toast {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--mini) + 16px + env(safe-area-inset-bottom)); z-index: 70;
  width: max-content; max-width: min(92vw, 520px); padding: 12px 18px; border-radius: var(--rayon-carte); background: var(--texte); color: var(--fond); font-size: .92rem; font-weight: 500;
}
body.plein-ouvert .toast { bottom: auto; top: calc(16px + env(safe-area-inset-top)); }

.pied { max-width: 820px; margin: 0 auto; padding: 20px 16px 30px; color: var(--doux); font-size: .82rem; }
@media (max-width: 700px) { .pied { display: none; } }
@media (max-width: 560px) {
  .option-texte { display: none; }
  .accueil h1 { font-size: 1.6rem; }
  .actions-liste .compte { width: 100%; margin-left: 0; }
}
.preparation { font-size: .9rem; color: var(--texte); background: var(--surface-2); padding: 10px 12px; margin: 10px 0 0; word-break: break-word; }

/* Bibliothèque : grand titre, rubriques, grille de pochettes, page d'album */
.grand-titre { font-size: 2.25rem; line-height: 1.1; margin: 10px 0 10px; }
.retour { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; margin: 4px 0 0; color: var(--accent); text-decoration: none; font-size: 1.05rem; font-weight: 500; }
.retour svg { width: 18px; height: 18px; }
.titre-section { font-size: 1.4rem; margin: 24px 0 10px; }
.vide { color: var(--doux); padding: 30px 0; }
.accent { color: var(--accent); }

.rubriques { list-style: none; margin: 8px 0 0; padding: 0; }
.rubriques a, .rubriques button { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 4px 2px; border: 0; border-bottom: 1px solid var(--bord); background: none; color: var(--texte); text-decoration: none; text-align: left; font-size: 1.05rem; }
.rubriques li:last-child > a, .rubriques li:last-child > button { border-bottom: 0; }
.rubriques a:hover b, .rubriques button:hover b { color: var(--accent); }
.dossiers-drive li { display: flex; align-items: center; border-bottom: 1px solid var(--bord); }
.dossiers-drive li > a { flex: 1; min-width: 0; border-bottom: 0; }
.rubriques.dossiers-drive li > button { width: 44px; height: 44px; flex: none; min-height: 0; padding: 0; border-bottom: 0; justify-content: center; color: var(--accent); }
.dossiers-drive li:last-child { border-bottom: 0; }
.rubriques .ic { color: var(--accent); display: flex; width: 26px; justify-content: center; flex: none; }
.rubriques .textes b { font-weight: 500; }
.icone-rubrique { width: 24px; height: 24px; }
.rubriques .nombre { color: var(--doux); font-size: .92rem; white-space: nowrap; }
.nombre:empty { display: none; }
.chevron { color: var(--doux); width: 16px; height: 16px; }
.rubriques .rouge b, .rubriques .rouge .ic { color: var(--rouge); }
.empile { display: flex; flex: none; padding-right: 2px; }
.empile .pochette { width: 30px; height: 30px; margin-left: -11px; box-shadow: 0 0 0 2px var(--fond); }
.empile .pochette:first-child { margin-left: 0; }
@media (max-width: 340px) { .empile { display: none; } }

.tuiles { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 18px 14px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.tuile { display: flex; flex-direction: column; gap: 2px; color: var(--texte); text-decoration: none; min-width: 0; position: relative; }
.tuile .pochette { width: 100%; height: auto; aspect-ratio: 1; margin-bottom: 6px; }
.tuile b, .tuile small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tuile b { font-weight: 500; font-size: .95rem; }
.tuile small { color: var(--doux); font-size: .85rem; }
.pochette.ronde { border-radius: 50%; }

.collection-tete { display: flex; flex-direction: column; align-items: flex-start; padding: 8px 0 6px; }
.pochette.tres-grande { width: min(64vw, 260px); height: auto; aspect-ratio: 1; }
.collection-tete h1 { margin: 14px 0 2px; font-size: 1.9rem; word-break: break-word; }
.collection-tete p { margin: 2px 0; font-size: 1.05rem; }
.collection-tete .discret { font-size: .88rem; }
@media (min-width: 700px) {
  .collection-tete { flex-direction: row; align-items: flex-end; gap: 26px; }
  .collection-tete h1 { font-size: 2.3rem; margin-top: 0; }
}
.collection-boutons { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 16px 0 10px; }
.collection-boutons .bouton { flex: 1 1 96px; min-width: 0; max-width: 220px; padding-left: 10px; padding-right: 10px; }
.collection-boutons .bouton svg { width: 16px; height: 16px; }
.collection-boutons .rond { color: var(--accent); }
p.compte { margin: 0 0 6px; }
.numero { width: 26px; flex: none; color: var(--doux); font-variant-numeric: tabular-nums; }
.morceaux li.courant .numero { color: var(--accent); }
.puces .puce:first-child:last-child { display: none; }

.lien-bouton { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; background: none; border: 0; padding: 8px 2px; color: var(--doux); font-size: .95rem; text-align: left; }
.lien-bouton svg { width: 18px; height: 18px; }
a.lien-bouton { text-decoration: none; }
.lien-bouton.accent { color: var(--accent); font-weight: 600; font-size: 1rem; }
.lien-bouton.rouge { color: var(--rouge); display: flex; margin: 10px 0 0; }
.lien-bouton.centre { display: flex; margin: 10px 0 0; }
.lien-bouton.centre + .lien-bouton.rouge { margin-top: 0; }
a.puce { text-decoration: none; display: inline-flex; align-items: center; }
.installer { display: flex; align-items: center; gap: 10px; margin: 6px 0 10px; padding: 10px; background: var(--accent-clair); box-shadow: inset 0 0 0 1px var(--accent-bord); border-radius: var(--rayon-carte); color: var(--texte); }
.installer > span { color: var(--accent); }
.installer p { margin: 0; flex: 1; font-size: .92rem; }
.etapes { padding-left: 22px; margin: 8px 0 14px; }
.etapes li { margin: 10px 0; }
.symbole { display: inline-block; padding: 0 5px; background: var(--surface-2); color: var(--accent); vertical-align: -5px; }
.symbole svg { width: 18px; height: 18px; }
.aide-texte { font-size: .9rem; background: var(--surface-2); border-radius: var(--rayon-carte); padding: 10px 14px; }
.aide-texte svg { display: inline-block; width: 18px; height: 18px; vertical-align: -3px; }

/* Favoris et listes de lecture */
.coeur-ligne { color: var(--accent); margin-right: 8px; }
.coeur-ligne svg { width: 13px; height: 13px; }
.nouvelle-liste { margin: 8px 0 18px; }
.nouvelle-liste svg { width: 16px; height: 16px; }
svg.en-ligne { display: inline-block; width: 16px; height: 16px; vertical-align: -3px; color: var(--accent); }

/* Bilan de fin d'import */
.bilan-import { list-style: none; margin: 0 0 14px; padding: 0; max-height: 38vh; overflow-y: auto; }
.bilan-import li { padding: 6px 0; border-bottom: 1px solid var(--bord); overflow-wrap: anywhere; }
.bilan-import b { display: block; font-weight: 600; }
.bilan-import small { color: var(--doux); }

/* Égaliseur */
.feuille label.eq-interrupteur { display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 12px; font-weight: 600; min-height: 44px; color: var(--texte); font-size: 1rem; }
.feuille .eq-interrupteur input { margin: 0; }
.eq-reglages .puce:disabled { background: var(--surface-2); color: var(--doux); border-color: var(--bord); }
.feuille .eq-fermer { position: sticky; bottom: 0; box-shadow: 0 12px 0 12px var(--surface); }
.eq-bandes { margin-top: 14px; }
.feuille .eq-bandes label { display: grid; margin: 0; grid-template-columns: 4em 1fr 3.6em; align-items: center; gap: 8px; min-height: 44px; font-size: .85rem; color: var(--doux); }
.feuille .eq-bandes input { width: 100%; height: 44px; margin: 0; padding: 0; }
.eq-bandes output { text-align: right; font-variant-numeric: tabular-nums; }
.eq-legende { margin: 6px 0 14px; }

/* Réglages */
.groupe { margin-top: 18px; }
.groupe > h2 { font-size: 1.4rem; margin: 0 0 4px; color: var(--accent); }
.groupe .rubriques { margin-top: 0; }
.panneau { border-radius: var(--rayon-carte); }
.panneau .textes b, .rubriques .textes small { white-space: normal; line-height: 1.2; }
.bascule, .place { display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 4px 2px; border-bottom: 1px solid var(--bord); font-size: 1.05rem; cursor: pointer; }
.place { cursor: default; }
.place:last-child { border-bottom: 0; }
.jauge { display: block; height: 10px; margin: 4px 0 2px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--doux); border-radius: var(--rayon); overflow: hidden; }
.jauge i { display: block; height: 100%; width: 0; background: var(--accent); }
.vignettes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; max-width: 520px; }
.vignette { position: relative; display: block; height: 108px; padding: 0; overflow: hidden; border: 0; background: var(--fond); color: var(--texte); font-family: var(--titre); border-radius: 0; text-align: left; }
.vignette b { position: absolute; left: 8px; top: 8px; z-index: 1; font-weight: 400; font-size: 19px; line-height: 1; white-space: nowrap; }
.vignette i { position: absolute; display: block; }
.vignette[aria-pressed="true"] { outline: 3px solid currentColor; outline-offset: 1px; }
.vignette[aria-pressed="true"]::before { content: ""; position: absolute; right: 0; top: 0; width: 24px; height: 24px; background: var(--texte); z-index: 2; }
.vignette[aria-pressed="true"]::after { content: ""; position: absolute; right: 6px; top: 6px; width: 12px; height: 6px; border-left: 2.5px solid var(--fond); border-bottom: 2.5px solid var(--fond); transform: rotate(-45deg); z-index: 3; }
.vignette[data-theme="k7"] b { font-size: 28px; }
.vignette[data-theme="k7"] i { left: 0; right: 0; bottom: 12px; height: 24px; background: var(--raies); }
.vignette[data-theme="vinyle"] i { right: -22px; bottom: -22px; width: 78px; height: 78px; border-radius: 50%; background: radial-gradient(circle, var(--fond) 0 7%, var(--accent) 8% 30%, transparent 31%), repeating-radial-gradient(circle, var(--noir) 0 1.5px, var(--surface-2) 1.5px 3px); }
.vignette[data-theme="transistor"] { font-weight: 700; }
.vignette[data-theme="transistor"] i { inset: auto 0 0 0; height: 50px; background: var(--grille) 0 0 / 8px 8px; }
.vignette[data-theme="baladeur"], .vignette[data-theme="affiche"] { text-transform: uppercase; }
.vignette[data-theme="baladeur"] { background-image: var(--pixels); }
.vignette[data-theme="baladeur"] i { left: 8px; right: 8px; bottom: 8px; height: 30px; background: repeating-linear-gradient(90deg, var(--texte) 0 7px, transparent 7px 11px); clip-path: polygon(0 60%, 20% 20%, 40% 70%, 60% 0, 80% 50%, 100% 30%, 100% 100%, 0 100%); }
.vignette[data-theme="kora"] b { font-style: italic; }
.vignette[data-theme="kora"] i { inset: 0; background: repeating-linear-gradient(90deg, var(--corde) 0 1px, transparent 1px 12px); }
.vignette[data-theme="kora"] i::after { content: ""; position: absolute; right: 10px; bottom: 10px; width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--calebasse-a), var(--calebasse-b) 62%, var(--calebasse-c)); }
.vignette[data-theme="affiche"] i { right: -14px; bottom: -14px; width: 70px; height: 70px; border-radius: 50%; background: var(--encre-rouge); }

/* Disque, bobine : ne tournent qu'en lecture */
@keyframes tourne { to { transform: rotate(360deg); } }

/* ═════════ 33 tours ═════════ */
[data-theme="vinyle"] body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: repeating-radial-gradient(circle at 100% 0, var(--sillon-page) 0 1px, transparent 1px 5px); }
[data-theme="vinyle"] .marque { color: var(--accent); }
[data-theme="vinyle"] .marque .o { border-radius: 50%; background: radial-gradient(circle, var(--fond) 0 11%, var(--label-rouge) 12% 34%, var(--noir) 35%); box-shadow: 0 0 0 1.5px var(--accent); }
[data-theme="vinyle"] .entete .bouton { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
[data-theme="vinyle"] .grand-titre, [data-theme="vinyle"] .accueil h1 { color: var(--texte); }
[data-theme="vinyle"] .menu-biblio a { border: 0; min-height: 47px; gap: 14px; }
[data-theme="vinyle"] .menu-biblio .ic { width: 36px; height: 36px; border-radius: 50%; background: radial-gradient(circle, var(--fond) 0 6%, var(--lab, var(--label-rouge)) 7% 36%, var(--noir) 37% 100%); box-shadow: inset 0 0 0 1px var(--cercle); }
[data-theme="vinyle"] .menu-biblio .ic svg { display: none; }
[data-theme="vinyle"] .menu-biblio li:nth-child(3n+1) { --lab: var(--accent); }
[data-theme="vinyle"] .menu-biblio li:nth-child(3n) { --lab: var(--texte); }
[data-theme="vinyle"] .empile .pochette, [data-theme="vinyle"] .morceaux .pochette { border-radius: 50%; }
[data-theme="vinyle"] .pochette .note { background: radial-gradient(circle, var(--fond) 0 5%, hsl(calc(var(--h, 300) / 8 + 5) 62% 58%) 6% 30%, transparent 31%), repeating-radial-gradient(circle, var(--noir) 0 2px, var(--surface) 2px 4px); }
[data-theme="vinyle"] .tuile { padding-right: 10px; }
[data-theme="vinyle"] .tuile::before { content: ""; position: absolute; top: 3%; right: 0; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, var(--fond) 0 6%, var(--accent) 7% 32%, transparent 33%), repeating-radial-gradient(circle, var(--sillon-a) 0 1.5px, var(--sillon-b) 1.5px 3px); box-shadow: 0 0 0 1px var(--cercle); }
[data-theme="vinyle"] .tuile .pochette { box-shadow: 0 0 0 1px var(--bord); }
[data-theme="vinyle"] .mini #mini-pochette { border-radius: 50%; box-shadow: 0 0 0 3px var(--noir), 0 0 0 4px var(--cercle); margin: 0 3px; animation: tourne 5s linear infinite paused; }
[data-theme="vinyle"] .mini #mini-pochette::after { content: ""; position: absolute; inset: 41%; background: var(--fond); border-radius: 50%; z-index: 3; }
[data-theme="vinyle"] .rond.fort { border-radius: 50%; }
[data-theme="vinyle"] .support { height: calc(var(--cote) + 12px); }
[data-theme="vinyle"] .objet { display: block; left: 50%; right: auto; width: var(--cote); margin-left: calc(var(--cote) / -2); }
[data-theme="vinyle"] .objet i.a, [data-theme="vinyle"] .objet i.b, [data-theme="vinyle"] .objet i.c { display: block; }
[data-theme="vinyle"] .objet i.a { left: 0; top: 6px; width: calc(var(--cote) * .944); height: calc(var(--cote) * .944); border-radius: 50%; background: conic-gradient(from 40deg, var(--reflet), transparent 10% 42%, var(--reflet) 50%, transparent 58% 90%, var(--reflet)), repeating-radial-gradient(circle, var(--sillon-a) 0 1.5px, var(--sillon-b) 1.5px 3px); box-shadow: 0 0 0 1px var(--cercle); }
[data-theme="vinyle"] .grande-pochette { left: calc(50% - var(--cote) * .028); top: calc(6px + var(--cote) * .472); width: calc(var(--cote) * .42); height: calc(var(--cote) * .42); margin: calc(var(--cote) * -.21) 0 0 calc(var(--cote) * -.21); border-radius: 50%; box-shadow: 0 0 0 1px var(--noir); animation: tourne 5s linear infinite paused; }
[data-theme="vinyle"] .grande-pochette::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px; border-radius: 50%; background: var(--fond); box-shadow: 0 0 0 2px var(--accent); z-index: 3; }
[data-theme="vinyle"] .objet i.b { right: -4px; top: 2px; width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle, var(--surface-2) 0 26%, var(--bras-pied-2) 27% 34%, var(--bras-pied) 35%); box-shadow: 0 0 0 1px var(--cercle); }
[data-theme="vinyle"] .objet i.c { right: 16px; top: 22px; width: 6px; height: calc(var(--cote) * .66); background: linear-gradient(90deg, var(--bras-a), var(--bras-b), var(--bras-a)); transform-origin: 50% 2px; transform: rotate(calc(10deg + var(--p, 0) * 24deg)); border-radius: 3px; z-index: 2; }
[data-theme="vinyle"] .objet i.c::after { content: ""; position: absolute; left: -7px; bottom: -22px; width: 20px; height: 34px; background: var(--accent); border-radius: 2px; transform: rotate(14deg); }
[data-theme="vinyle"] .plein-textes h2 { color: var(--accent); padding: .08em 0; }
[data-theme="vinyle"] .a-suivre-titre { color: var(--accent); }
[data-theme="vinyle"] input[type=range] { --piste-h: 2px; --curseur-r: 50%; }
[data-theme="vinyle"] .commandes .rond.fort { box-shadow: 0 0 0 5px var(--fond), 0 0 0 6px var(--accent); }

/* ═════════ K7 ═════════ */
[data-theme="k7"] .entete, [data-theme="k7"] .mini { --texte: var(--creme); --doux: var(--creme-doux); --accent: var(--raie-2); --sur-accent: var(--plastique); --surface: var(--plastique); --surface-2: var(--plastique-2); --bord: var(--plastique-bord); }
[data-theme="k7"] .entete { color: var(--texte); }
[data-theme="k7"] .entete::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px; background: var(--raies); }
[data-theme="k7"] main { padding-top: 14px; }
[data-theme="k7"] .marque { font-size: 2.4rem; }
[data-theme="k7"] .marque .o { border-radius: 50%; background: var(--creme); box-shadow: inset 0 0 0 .05em var(--plastique); }
[data-theme="k7"] .marque .o::before { content: ""; position: absolute; inset: 26%; border-radius: 50%; background: repeating-conic-gradient(var(--plastique) 0 30deg, var(--creme) 30deg 60deg); }
[data-theme="k7"] .marque.grande .o { background: var(--surface); box-shadow: inset 0 0 0 .05em var(--texte); }
[data-theme="k7"] .grand-titre { font-size: 2.6rem; transform: rotate(-1deg); transform-origin: left; }
[data-theme="k7"] .collection-tete h1, [data-theme="k7"] .accueil h1 { font-size: 2.3rem; }
[data-theme="k7"] .recherche { border: 1.5px solid var(--texte); }
[data-theme="k7"] .textes b, [data-theme="k7"] .tuile b, [data-theme="k7"] .mini-textes b { font-family: var(--titre); font-weight: 400; font-size: 1.3rem; line-height: 1.15; letter-spacing: .02em; }
[data-theme="k7"] .menu-biblio { counter-reset: p; }
[data-theme="k7"] .menu-biblio li { counter-increment: p; }
[data-theme="k7"] .menu-biblio .ic { display: none; }
[data-theme="k7"] .menu-biblio a { min-height: 47px; }
[data-theme="k7"] .menu-biblio a::before { content: "A" counter(p); width: 26px; color: var(--accent); font-weight: 600; font-size: .9em; flex: none; }
[data-theme="k7"] .menu-biblio li:nth-child(n+6) a::before { content: "B" counter(p); }
[data-theme="k7"] .menu-biblio li:nth-child(6) { counter-set: p 1; }
[data-theme="k7"] .pochette img { filter: sepia(.18) saturate(.95); }
[data-theme="k7"] .pochette .note { background: var(--raies); }
[data-theme="k7"] .pochette .note::after { content: ""; position: absolute; inset: 18% 12%; background: var(--surface); box-shadow: inset 0 -2px 0 var(--texte); }
[data-theme="k7"] .tuile .pochette { box-shadow: 0 0 0 4px var(--surface), 2px 3px 0 4px var(--ombre-dure); margin: 4px 4px 12px; width: calc(100% - 8px); transform: rotate(-1.2deg); }
[data-theme="k7"] .tuiles li:nth-child(even) .pochette { transform: rotate(1deg); }
[data-theme="k7"] .collection-tete .pochette { box-shadow: 0 0 0 5px var(--surface), 3px 5px 0 5px var(--ombre-dure); margin: 6px; transform: rotate(-1.5deg); }
[data-theme="k7"] .mini { border-top: 0; }
[data-theme="k7"] .mini-barre { top: 0; height: 4px; background: var(--plastique-2); }
[data-theme="k7"] .rond.fort { border-radius: 3px; }
[data-theme="k7"] .mini .rond.fort { box-shadow: inset 0 -4px 0 var(--ombre-dure); }
[data-theme="k7"] .support { height: 304px; max-width: 340px; margin: 6px auto 0; }
[data-theme="k7"] .objet { display: block; top: auto; bottom: 0; height: 206px; background: var(--plastique-3); border-radius: 9px; box-shadow: inset 0 0 0 2px var(--plastique-bord); }
[data-theme="k7"] .objet::before { content: ""; position: absolute; left: 12px; right: 12px; top: 10px; height: 138px; background: linear-gradient(180deg, transparent 0 56px, var(--raie-1) 56px 64px, var(--raie-2) 64px 72px, var(--raie-3) 72px 80px, var(--surface) 80px), var(--surface); border-radius: 3px; }
[data-theme="k7"] .objet::after { content: ""; position: absolute; left: 62px; right: 62px; bottom: 0; height: 40px; background: var(--plastique-2); clip-path: polygon(9% 0, 91% 0, 100% 100%, 0 100%); }
[data-theme="k7"] .objet i { display: block; }
[data-theme="k7"] .objet i.a { left: 50%; top: 80px; width: 190px; height: 60px; margin-left: -95px; background: var(--fenetre); border-radius: 30px; box-shadow: 0 0 0 3px var(--surface-2); }
[data-theme="k7"] .objet i.b { left: 50%; top: 92px; margin-left: -22px; width: 44px; height: 36px; background: linear-gradient(90deg, var(--bande) calc(var(--p, 0) * 100%), var(--fenetre) 0); border: 1px solid var(--doux); }
[data-theme="k7"] .objet i.c, [data-theme="k7"] .objet i.d { top: 110px; left: calc(50% - 64px); width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: repeating-conic-gradient(var(--surface) 0 22deg, var(--fenetre) 22deg 60deg); box-shadow: 0 0 0 2px var(--surface), 0 0 0 calc(2px + (1 - var(--p, 0)) * 12px) var(--bande); animation: tourne 3.2s linear infinite paused; }
[data-theme="k7"] .objet i.d { left: calc(50% + 64px); box-shadow: 0 0 0 2px var(--surface), 0 0 0 calc(2px + var(--p, 0) * 12px) var(--bande); }
[data-theme="k7"] .grande-pochette { left: 0; top: 0; margin: 0; width: 176px; height: 176px; transform: rotate(-2.5deg); box-shadow: 0 0 0 5px var(--surface), 3px 5px 0 5px var(--ombre-dure); border-radius: 1px; z-index: 1; }
[data-theme="k7"] .scotch { display: block; position: absolute; left: 56px; top: -12px; width: 74px; height: 24px; background: var(--scotch); transform: rotate(-5deg); z-index: 2; }
[data-theme="k7"] .plein-textes h2 { font-size: 2.15rem; letter-spacing: .02em; }
[data-theme="k7"] .avance input { --piste-h: 8px; --curseur-l: 12px; --curseur-h: 26px; --curseur: var(--texte); --curseur-r: 2px; --piste-image: repeating-linear-gradient(90deg, var(--texte) 0 2px, transparent 2px 8px), linear-gradient(90deg, var(--accent) calc(var(--p, 0) * 100%), transparent 0); }
[data-theme="k7"] .temps { font-weight: 600; color: var(--texte); }
[data-theme="k7"] .commandes { gap: 3px; background: var(--plastique); padding: 6px; border-radius: 4px; color: var(--creme); }
[data-theme="k7"] .commandes .rond { flex: 1; width: auto; height: 58px; color: var(--creme); background: var(--plastique-2); border-radius: 2px; box-shadow: inset 0 -6px 0 var(--ombre-dure); }
[data-theme="k7"] .commandes .rond.actif { color: var(--raie-2); }
[data-theme="k7"] .commandes .fort { flex: 1.6; background: var(--raie-2); color: var(--plastique); transform: translateY(2px); box-shadow: inset 0 -3px 0 var(--ombre-dure); }
[data-theme="k7"] .commandes .fort:hover { background: var(--raie-2); }
[data-theme="k7"] .commandes .rond svg { width: 26px; height: 26px; }
[data-theme="k7"] .groupe > h2, [data-theme="k7"] .a-suivre-titre { font-size: 1.7rem; color: var(--accent); }
[data-theme="k7"] .feuille::before { content: ""; display: block; height: 10px; margin: -8px -20px 8px; background: var(--raies); }
[data-theme="k7"] .feuille h2, [data-theme="k7"] .feuille h3 { font-size: 1.8rem; }

/* ═════════ Transistor ═════════ */
/* Zones ivoire : mêmes règles que le reste, avec leurs couleurs */
[data-theme="transistor"] :is(.feuille, .panneau, .recherche, .menu-biblio a, .choix, .mini, .toast, .plein-textes, .avance, .a-suivre, .a-suivre-titre) {
  color: var(--texte);
  --fond: var(--ivoire); --surface: var(--ivoire); --surface-2: var(--ivoire-2); --bord: var(--ivoire-bord); --texte: var(--encre); --doux: var(--encre-douce);
  --accent: var(--brique); --sur-accent: var(--creme-chaude); --accent-clair: rgba(163, 37, 16, .12); --accent-bord: rgba(163, 37, 16, .4); --rouge: var(--brique);
}
[data-theme="transistor"] .toast { --texte: var(--ivoire); --fond: var(--encre); }
[data-theme="transistor"] .entete { background: var(--grille) 0 0 / 9px 9px, var(--fond); }
[data-theme="transistor"] .entete .dedans { padding-top: 11px; padding-bottom: 11px; }
[data-theme="transistor"] .marque { background: linear-gradient(180deg, var(--chrome-a) 0 48%, var(--chrome-d) 52%, var(--chrome-c)); padding: 1px 12px 4px; border-radius: 7px; color: var(--bordeaux); font-weight: 700; font-size: 1.95rem; box-shadow: 0 2px 0 var(--relief-2); min-height: 44px; }
[data-theme="transistor"] .marque.grande { font-size: 3.6rem; display: inline-flex; }
[data-theme="transistor"] .marque .o { border-radius: 50%; background: repeating-conic-gradient(var(--bordeaux) 0 12deg, var(--brique) 12deg 24deg); box-shadow: inset 0 0 0 .1em var(--bordeaux); }
[data-theme="transistor"] .marque .o::after { content: ""; position: absolute; left: 46%; top: 6%; width: 9%; height: 40%; background: var(--chrome-a); }
[data-theme="transistor"] .bouton { box-shadow: 0 3px 0 var(--relief); }
[data-theme="transistor"] .bouton.second { background: var(--ivoire-2); color: var(--encre); box-shadow: 0 3px 0 var(--relief); }
[data-theme="transistor"] .feuille .bouton { box-shadow: 0 3px 0 var(--ivoire-bord); }
[data-theme="transistor"] .feuille .bouton.second { background: var(--ivoire-2); color: var(--encre); }
[data-theme="transistor"] .feuille .bouton.danger-plein { background: var(--brique); color: var(--ivoire); }
[data-theme="transistor"] .recherche { border: 0; box-shadow: inset 0 2px 0 var(--ivoire-bord); }
[data-theme="transistor"] .menu-biblio { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-top: 12px; }
[data-theme="transistor"] .menu-biblio a { background: var(--ivoire); color: var(--encre); border: 0; border-radius: 6px; height: 62px; padding: 3px 10px 0; gap: 8px; box-shadow: 0 4px 0 var(--relief); font-size: 1rem; }
[data-theme="transistor"] .menu-biblio li:first-child, [data-theme="transistor"] .menu-biblio li:last-child, [data-theme="transistor"] .menu-biblio li:nth-last-child(2):nth-child(even) { grid-column: 1 / -1; }
[data-theme="transistor"] .menu-biblio li:first-child a, [data-theme="transistor"] .menu-biblio li:last-child a { height: 54px; }
[data-theme="transistor"] .menu-biblio .textes b { white-space: normal; line-height: 1.05; }
[data-theme="transistor"] .menu-biblio .chevron { display: none; }
[data-theme="transistor"] .menu-biblio li:first-child .chevron, [data-theme="transistor"] .menu-biblio li:last-child .chevron { display: block; }
[data-theme="transistor"] .empile .pochette { box-shadow: 0 0 0 2px var(--ivoire); }
[data-theme="transistor"] .pochette .note { background: radial-gradient(circle, var(--ivoire) 0 1.5px, transparent 1.8px) 0 0 / 7px 7px, var(--bordeaux); }
[data-theme="transistor"] .tuile .pochette, [data-theme="transistor"] .collection-tete .pochette { box-shadow: 0 0 0 3px var(--chrome-c), 0 0 0 4px var(--chrome-b), 0 3px 0 4px var(--relief-2); margin-left: 4px; margin-right: 4px; width: calc(100% - 8px); }
[data-theme="transistor"] .collection-tete .pochette { width: min(64vw, 260px); margin-top: 4px; }
[data-theme="transistor"] .panneau { background: var(--ivoire); padding: 0 10px; box-shadow: 0 4px 0 var(--relief); }
[data-theme="transistor"] .groupe > h2 { color: var(--texte); }
[data-theme="transistor"] .mini { border-top: 0; box-shadow: 0 -4px 0 var(--relief); }
[data-theme="transistor"] .mini-barre { top: 0; height: 4px; background: var(--ivoire-2); }
[data-theme="transistor"] .mini .rond.fort { border-radius: 50%; }
[data-theme="transistor"] .plein-haut { color: var(--texte); }
[data-theme="transistor"] .plein-haut .rond { color: var(--texte); }
[data-theme="transistor"] .support { height: 216px; margin: 0 calc(var(--marge) * -1); background: var(--grille) 0 0 / 9px 9px, var(--fond); }
[data-theme="transistor"] .grande-pochette { left: var(--marge); top: 8px; margin: 0; width: min(200px, 54vw); height: min(200px, 54vw); border-radius: 8px; box-shadow: 0 0 0 5px var(--chrome-c), 0 0 0 7px var(--chrome-b), 0 4px 0 7px var(--relief-2); }
[data-theme="transistor"] .objet { display: block; }
[data-theme="transistor"] .objet i.a, [data-theme="transistor"] .objet i.b, [data-theme="transistor"] .objet i.c { display: block; }
[data-theme="transistor"] .objet i.a { right: 16px; top: 16px; width: 92px; height: 92px; border-radius: 50%; background: repeating-conic-gradient(var(--chrome-a) 0 7deg, var(--chrome-b) 7deg 14deg); box-shadow: 0 3px 0 var(--relief-2); }
[data-theme="transistor"] .objet i.a::after, [data-theme="transistor"] .objet i.c::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--chrome-c); }
[data-theme="transistor"] .objet i.b { right: 57px; top: 26px; width: 10px; height: 34px; background: var(--brique); z-index: 1; border-radius: 2px; transform-origin: 5px 36px; transform: rotate(calc(-120deg + var(--p, 0) * 240deg)); }
[data-theme="transistor"] .objet i.c { right: 26px; top: 128px; width: 72px; height: 72px; border-radius: 50%; background: repeating-conic-gradient(var(--chrome-a) 0 9deg, var(--chrome-b) 9deg 18deg); box-shadow: 0 3px 0 var(--relief-2); }
[data-theme="transistor"] .plein-textes { margin: 0 calc(var(--marge) * -1); padding: 6px 8px 2px var(--marge); background: var(--ivoire); color: var(--encre); box-shadow: 0 -4px 0 var(--relief); }
[data-theme="transistor"] .plein-textes h2 { color: var(--bordeaux); }
[data-theme="transistor"] .avance { margin: 0 calc(var(--marge) * -1); padding: 2px var(--marge) 4px; background: var(--ivoire); border-bottom: 4px solid var(--relief); }
[data-theme="transistor"] .cadran { display: flex; justify-content: space-between; color: var(--encre); font-size: .75rem; font-weight: 600; }
[data-theme="transistor"] .avance::after { content: ""; position: absolute; left: var(--marge); right: var(--marge); top: 20px; height: 18px; background: repeating-linear-gradient(90deg, var(--encre) 0 1.5px, transparent 1.5px 8px); }
[data-theme="transistor"] .avance input { position: relative; z-index: 1; --piste-h: 2px; --curseur-l: 10px; --curseur-h: 44px; --curseur: linear-gradient(90deg, transparent 0 3.5px, var(--aiguille) 3.5px 6.5px, transparent 6.5px); --piste-image: linear-gradient(var(--encre), var(--encre)); }
[data-theme="transistor"] .temps { margin: 8px 0 0; color: var(--texte); }
[data-theme="transistor"] .commandes { margin: 2px 0 10px; }
[data-theme="transistor"] .commandes .rond { color: var(--doux); }
[data-theme="transistor"] .commandes .rond.actif { color: var(--ivoire); }
[data-theme="transistor"] .commandes .grand { width: 54px; height: 54px; background: var(--ivoire); color: var(--bordeaux); border-radius: 50%; box-shadow: 0 4px 0 var(--relief); }
[data-theme="transistor"] .commandes .grand:hover { background: var(--ivoire-2); }
[data-theme="transistor"] .commandes .fort, [data-theme="transistor"] .commandes .fort:hover { width: 78px; height: 78px; border-radius: 50%; background: repeating-conic-gradient(var(--chrome-a) 0 7deg, var(--chrome-b) 7deg 14deg); color: var(--bordeaux); box-shadow: 0 4px 0 var(--relief-2); }
[data-theme="transistor"] .commandes .fort::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--chrome-c); }
[data-theme="transistor"] .commandes .fort svg { position: relative; }
[data-theme="transistor"] .volume input { --curseur-r: 50%; --curseur: var(--ivoire); --piste-image: linear-gradient(90deg, var(--ivoire) calc(var(--p, 0) * 100%), var(--bordeaux) 0); }
[data-theme="transistor"] .volume { color: var(--texte); }
[data-theme="transistor"] .a-suivre-titre, [data-theme="transistor"] .a-suivre { background: var(--ivoire); margin-left: calc(var(--marge) * -1); margin-right: calc(var(--marge) * -1); padding-left: var(--marge); padding-right: var(--marge); }
[data-theme="transistor"] .a-suivre-titre { margin-top: 12px; margin-bottom: 0; padding-top: 10px; padding-bottom: 6px; color: var(--bordeaux); box-shadow: 0 -4px 0 var(--relief); }
[data-theme="transistor"] .a-suivre { padding-bottom: 12px; }
[data-theme="transistor"] .plein-dedans { padding-bottom: 0; }
[data-theme="transistor"] .rond.fort { border-radius: 50%; }
[data-theme="transistor"] .puce.actif { background: var(--ivoire); color: var(--bordeaux); border-color: var(--ivoire); }
[data-theme="transistor"] .feuille .puce.actif { background: var(--brique); color: var(--ivoire); border-color: var(--brique); }

/* ═════════ Baladeur ═════════ */
[data-theme="baladeur"] body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: var(--pixels); }
[data-theme="baladeur"] body { line-height: 1.1; }
[data-theme="baladeur"] svg [stroke] { shape-rendering: crispEdges; }
[data-theme="baladeur"] .entete { border-bottom: 3px solid var(--bord); }
[data-theme="baladeur"] .marque { font-size: 1.75rem; text-transform: uppercase; letter-spacing: .06em; }
[data-theme="baladeur"] .marque .o { background: var(--texte); box-shadow: inset 0 0 0 .12em var(--texte), inset 0 0 0 .2em var(--fond); }
[data-theme="baladeur"] .bouton { font-weight: 400; }
[data-theme="baladeur"] .entete .bouton, [data-theme="baladeur"] .bouton.second { background: none; color: var(--texte); box-shadow: inset 0 0 0 2px var(--bord); padding: 4px 8px; }
[data-theme="baladeur"] .grand-titre { font-size: 1.45rem; letter-spacing: .03em; }
[data-theme="baladeur"] .recherche { background: none; border: 2px solid var(--bord); }
[data-theme="baladeur"] .textes b, [data-theme="baladeur"] .mini-textes b, [data-theme="baladeur"] .tuile b { font-weight: 400; }
[data-theme="baladeur"] .menu-biblio { position: relative; margin: 6px 0 0 -6px; padding-right: 14px; }
[data-theme="baladeur"] .menu-biblio::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 7px; border: 2px solid var(--bord); background: linear-gradient(180deg, var(--bord) 0 28%, transparent 0); }
[data-theme="baladeur"] .menu-biblio a { border: 0; min-height: 44px; padding: 0 6px; gap: 8px; font-size: 1.1rem; }
[data-theme="baladeur"] .menu-biblio .ic { color: inherit; width: 22px; }
[data-theme="baladeur"] .menu-biblio a:hover, [data-theme="baladeur"] .menu-biblio li:first-child a { background: var(--bord); color: var(--fond); }
[data-theme="baladeur"] .menu-biblio:hover li:first-child a:not(:hover) { background: none; color: var(--texte); }
[data-theme="baladeur"] .menu-biblio a:hover b, [data-theme="baladeur"] .menu-biblio a:hover .nombre, [data-theme="baladeur"] .menu-biblio a:hover .chevron,
[data-theme="baladeur"] .menu-biblio li:first-child .nombre, [data-theme="baladeur"] .menu-biblio li:first-child .chevron, [data-theme="baladeur"] .menu-biblio li:first-child b { color: inherit; }
[data-theme="baladeur"] .menu-biblio:hover li:first-child a:not(:hover) .nombre { color: var(--doux); }
[data-theme="baladeur"] .empile .pochette { box-shadow: none; margin-left: 2px; width: 26px; height: 26px; }
[data-theme="baladeur"] .pochette { isolation: isolate; }
[data-theme="baladeur"] .pochette img { filter: grayscale(1) contrast(1.5) brightness(1.15); mix-blend-mode: multiply; }
[data-theme="baladeur"] .pochette::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, var(--fond) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, var(--fond) 0 1px, transparent 1px 3px); z-index: 1; }
[data-theme="baladeur"] .pochette .note { background: conic-gradient(var(--bord) 25%, var(--fond) 0 50%, var(--bord) 0 75%, var(--fond) 0) 0 0 / 8px 8px; }
[data-theme="baladeur"] .tuile .pochette, [data-theme="baladeur"] .collection-tete .pochette { box-shadow: 0 0 0 3px var(--bord); }
[data-theme="baladeur"] .morceaux li { content-visibility: auto; contain-intrinsic-size: auto 60px; }
[data-theme="baladeur"] .mini { background: var(--fond); border-top: 3px solid var(--bord); }
[data-theme="baladeur"] .mini-barre { display: none; }
[data-theme="baladeur"] .plein-haut { color: var(--texte); border-bottom: 3px solid var(--bord); text-transform: uppercase; margin: 0 calc(var(--marge) * -1); padding: 0 8px; }
[data-theme="baladeur"] .support { display: flex; gap: 18px; height: auto; margin-top: 14px; }
[data-theme="baladeur"] .grande-pochette { position: relative; left: 0; top: 0; margin: 3px; flex: none; width: min(186px, 50vw); height: min(186px, 50vw); box-shadow: 0 0 0 3px var(--bord); }
[data-theme="baladeur"] .spectre { display: flex; flex: 1; min-width: 0; gap: 4px; align-items: flex-end; }
[data-theme="baladeur"] .spectre span { flex: 1; height: var(--h); background: repeating-linear-gradient(0deg, var(--bord) 0 7px, transparent 7px 10px); animation: saute 1.1s steps(4) infinite alternate paused; animation-delay: var(--d); }
@keyframes saute { from { height: var(--h); } to { height: calc(var(--h) * .45); } }
[data-theme="baladeur"] .plein-textes { margin-top: 8px; }
[data-theme="baladeur"] .plein-textes h2 { font-size: 1.8rem; letter-spacing: .02em; }
[data-theme="baladeur"] input[type=range] { --piste-h: 12px; --curseur-l: 0px; --curseur-h: 12px; --piste-image: repeating-linear-gradient(90deg, transparent 0 8px, var(--fond) 8px 11px), linear-gradient(90deg, var(--bord) calc(var(--p, 0) * 100%), transparent 0); }
[data-theme="baladeur"] input[type=range]::-webkit-slider-runnable-track { box-shadow: inset 0 0 0 2px var(--bord); }
[data-theme="baladeur"] input[type=range]::-moz-range-track { box-shadow: inset 0 0 0 2px var(--bord); }
[data-theme="baladeur"] .avance input { --piste-h: 18px; --curseur-h: 18px; }
[data-theme="baladeur"] .temps { color: var(--texte); }
[data-theme="baladeur"] .commandes { gap: 0; border: 3px solid var(--bord); }
[data-theme="baladeur"] .commandes .rond { flex: 1; width: auto; height: 66px; border-right: 3px solid var(--bord); }
[data-theme="baladeur"] .commandes .rond:last-child { border: 0; }
[data-theme="baladeur"] .commandes .fort { flex: 1.4; }
[data-theme="baladeur"] .a-suivre-titre, [data-theme="baladeur"] .groupe > h2 { border-bottom: 3px solid var(--bord); padding-bottom: 2px; color: var(--texte); }
[data-theme="baladeur"] .a-suivre li:first-child { background: var(--accent-clair); }
[data-theme="baladeur"] .feuille { background: var(--fond); border: 3px solid var(--bord); border-bottom: 0; }
[data-theme="baladeur"] .eq-fermer { box-shadow: 0 12px 0 12px var(--fond); }
[data-theme="baladeur"] .puce, [data-theme="baladeur"] .eq-reglages .puce:disabled { background: none; border-width: 2px; }
[data-theme="baladeur"] .puce.actif { background: var(--texte); }
[data-theme="baladeur"] input[type=checkbox]::after { background: var(--texte); }
[data-theme="baladeur"] input[type=checkbox]:checked { box-shadow: none; }
[data-theme="baladeur"] input[type=checkbox]:checked::after { background: var(--fond); }

/* ═════════ Kora ═════════ */
[data-theme="kora"] body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: repeating-linear-gradient(90deg, transparent 0 33px, var(--corde) 33px 34px) 15px 0, radial-gradient(ellipse 420px 300px at 50% 118%, var(--lueur), transparent 70%); }
[data-theme="kora"] .marque, [data-theme="kora"] .grand-titre, [data-theme="kora"] h1, [data-theme="kora"] h2, [data-theme="kora"] h3 { font-style: italic; }
[data-theme="kora"] .marque { font-size: 2.15rem; color: var(--accent); }
[data-theme="kora"] .marque .o { border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--calebasse-a), var(--calebasse-b) 62%, var(--calebasse-c)); box-shadow: 0 0 0 2px var(--fond), 0 0 0 3px var(--accent); }
[data-theme="kora"] .entete .bouton { background: none; color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); font-weight: 400; padding: 4px 12px 4px 9px; gap: 3px; }
[data-theme="kora"] .grand-titre { font-size: 2.5rem; }
[data-theme="kora"] .recherche { background: var(--fond); border: 0; border-bottom: 1px solid var(--accent); border-radius: 0; padding: 0 2px; font-style: italic; }
[data-theme="kora"] .textes b, [data-theme="kora"] .tuile b, [data-theme="kora"] .mini-textes b, [data-theme="kora"] .groupe b { font-weight: 400; }
[data-theme="kora"] .textes small, [data-theme="kora"] .tuile small, [data-theme="kora"] .mini-textes small { font-style: italic; }
[data-theme="kora"] .bouton { font-weight: 400; }
[data-theme="kora"] .menu-biblio { position: relative; padding-left: 22px; }
[data-theme="kora"] .menu-biblio::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 1.5px; background: var(--accent); }
[data-theme="kora"] .menu-biblio a { border: 0; min-height: 44px; position: relative; font-size: 1.1rem; }
[data-theme="kora"] .menu-biblio a::before { content: ""; position: absolute; left: -20px; top: 50%; width: 11px; height: 11px; margin-top: -5.5px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--clou-clair), var(--calebasse-b) 70%); box-shadow: 0 0 0 3px var(--fond); }
[data-theme="kora"] .menu-biblio .ic { display: none; }
[data-theme="kora"] .pochette img { filter: sepia(.35) saturate(1.1); }
[data-theme="kora"] .pochette .note { background: radial-gradient(circle, var(--clou) 0 7%, var(--calebasse-b) 8% 38%, var(--calebasse-a) 39% 41%, var(--calebasse-b) 42% 70%, var(--calebasse-c) 71%); }
[data-theme="kora"] .tuile .pochette, [data-theme="kora"] .collection-tete .pochette { box-shadow: 0 0 0 3px var(--clou), 0 0 0 5px var(--calebasse-b); margin: 5px 5px 10px; width: calc(100% - 10px); }
[data-theme="kora"] .collection-tete .pochette { width: min(64vw, 260px); }
[data-theme="kora"] .mini { background: var(--fond-nuit); border-top: 1px solid var(--accent); }
[data-theme="kora"] .mini-barre { top: -2px; height: 2px; }
[data-theme="kora"] .rond.fort, [data-theme="kora"] .rond.fort:hover { background: none; box-shadow: inset 0 0 0 1.5px var(--accent); color: var(--accent); border-radius: 50%; }
[data-theme="kora"] .plein-haut { font-style: italic; }
[data-theme="kora"] .support { height: calc(var(--cote) * .96 + 10px); }
[data-theme="kora"] .objet { display: block; left: 50%; right: auto; width: var(--cote); margin-left: calc(var(--cote) / -2); }
[data-theme="kora"] .objet i.a, [data-theme="kora"] .objet i.b, [data-theme="kora"] .objet i.c { display: block; }
[data-theme="kora"] .objet i.a { left: 2%; top: 4px; width: 96%; height: calc(var(--cote) * .96); border-radius: 50%; background: radial-gradient(circle at 36% 28%, var(--calebasse-a), var(--calebasse-b) 58%, var(--calebasse-c)); }
[data-theme="kora"] .objet i.b { left: 5%; top: calc(4px + var(--cote) * .03); width: 90%; height: calc(var(--cote) * .9); border-radius: 50%; background: repeating-conic-gradient(from 3deg, var(--clou) 0 1.6deg, transparent 1.6deg 12deg); -webkit-mask: radial-gradient(closest-side, transparent 96%, black 96.6%); mask: radial-gradient(closest-side, transparent 96%, black 96.6%); }
[data-theme="kora"] .objet i.c { left: 27%; width: 46%; top: -8px; bottom: -8px; background: repeating-linear-gradient(90deg, var(--corde-vive) 0 1px, transparent 1px 15px); z-index: 2; pointer-events: none; }
[data-theme="kora"] .grande-pochette { left: 50%; top: calc(4px + var(--cote) * .48); width: calc(var(--cote) * .78); height: calc(var(--cote) * .78); margin: calc(var(--cote) * -.39) 0 0 calc(var(--cote) * -.39); border-radius: 50%; box-shadow: 0 0 0 3px var(--clou); }
[data-theme="kora"] .avance input { --piste-h: 1.5px; --curseur-l: 14px; --curseur-h: 22px; --piste-image: linear-gradient(90deg, var(--accent) calc(var(--p, 0) * 100%), var(--doux) 0); }
[data-theme="kora"] .avance input::-webkit-slider-thumb { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
[data-theme="kora"] .avance input::-moz-range-thumb { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
[data-theme="kora"] input[type=range] { --piste-h: 1.5px; --curseur-r: 50%; --curseur-l: 13px; --curseur-h: 13px; }
[data-theme="kora"] .commandes .fort { box-shadow: inset 0 0 0 1.5px var(--accent), inset 0 0 0 5px var(--fond), inset 0 0 0 6px var(--bord); }
[data-theme="kora"] .a-suivre-titre { color: var(--accent); }

/* ═════════ Affiche ═════════ */
[data-theme="affiche"] h1, [data-theme="affiche"] .marque { text-shadow: 3px 2px 0 var(--decalage); }
[data-theme="affiche"] .marque { font-size: 2.2rem; text-transform: uppercase; letter-spacing: .01em; }
[data-theme="affiche"] .marque .o { width: .62em; height: .74em; margin: .02em .07em 0; border-radius: 50%; background: var(--encre-rouge); box-shadow: 3px 2px 0 var(--texte) inset; }
[data-theme="affiche"] .entete .bouton { font-family: var(--titre); font-weight: 400; text-transform: uppercase; letter-spacing: .02em; }
[data-theme="affiche"] .titre-accueil { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[data-theme="affiche"] .recherche { border: 2.5px solid var(--bord); background: none; font-weight: 500; }
[data-theme="affiche"] .recherche input { font-weight: 500; }
[data-theme="affiche"] #contenu[data-page=""] { position: relative; }
[data-theme="affiche"] .menu-biblio { position: relative; margin-top: 8px; }
[data-theme="affiche"] .menu-biblio::before { content: ""; position: absolute; right: -76px; top: 30px; width: 230px; height: 230px; border-radius: 50%; background: var(--trame) 0 0 / 7px 7px; opacity: .75; z-index: -1; }
[data-theme="affiche"] main { overflow-x: clip; position: relative; z-index: 0; }
[data-theme="affiche"] .menu-biblio a { border: 0; min-height: 44px; gap: 8px; padding: 2px 0; }
[data-theme="affiche"] .menu-biblio .ic, [data-theme="affiche"] .menu-biblio .chevron { display: none; }
[data-theme="affiche"] .menu-biblio .textes { flex: 0 1 auto; }
[data-theme="affiche"] .menu-biblio .textes b { font-family: var(--titre); font-weight: 400; font-size: 1.9rem; line-height: 1.1; text-transform: uppercase; letter-spacing: .005em; text-shadow: 2px 1.5px 0 var(--decalage); }
[data-theme="affiche"] .menu-biblio li:first-child b { font-size: 1.55rem; }
[data-theme="affiche"] .menu-biblio .nombre { align-self: flex-start; margin-top: 6px; font-weight: 800; color: var(--fond); background: var(--texte); padding: 1px 6px; font-size: .88rem; line-height: 1.2; }
[data-theme="affiche"] .menu-biblio .empile { margin-left: auto; order: 3; }
[data-theme="affiche"] .pochette { background: var(--texte); isolation: isolate; }
[data-theme="affiche"] .pochette img { filter: grayscale(1) contrast(1.3); mix-blend-mode: screen; }
[data-theme="affiche"] .pochette::after { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(circle, var(--fond) 0 .9px, transparent 1.1px) 0 0 / 4px 4px; mix-blend-mode: soft-light; }
[data-theme="affiche"] .pochette .note { background: var(--trame) 0 0 / 6px 6px, var(--fond); box-shadow: inset 0 0 0 2px var(--bord); }
[data-theme="affiche"] .morceaux li { content-visibility: auto; contain-intrinsic-size: auto 60px; }
[data-theme="affiche"] .mini { --texte: var(--papier); --doux: var(--papier-doux); --accent: var(--encre-rouge); --sur-accent: var(--sur-rouge); --surface: var(--encre); --surface-2: var(--encre-2); background: var(--surface); border: 0; }
[data-theme="affiche"] .mini-barre { top: 0; height: 5px; }
[data-theme="affiche"] .mini-textes b { font-family: var(--titre); font-weight: 400; text-transform: uppercase; letter-spacing: .02em; font-size: 1.1rem; }
[data-theme="affiche"] .rond.fort { border-radius: 50%; }
[data-theme="affiche"] .mini .rond.fort { background: var(--encre-rouge); color: var(--sur-rouge); }
[data-theme="affiche"] .plein-dedans { padding-top: 0; }
[data-theme="affiche"] .plein-haut { margin: 0 calc(var(--marge) * -1) -44px; padding: calc(4px + env(safe-area-inset-top)) 6px 0; color: var(--fond); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
[data-theme="affiche"] .plein-haut .rond { background: var(--texte); color: var(--fond); }
[data-theme="affiche"] .plein-haut span { background: var(--texte); padding: 3px 8px; }
[data-theme="affiche"] .support { height: min(286px, 40vh); margin: 0 calc(var(--marge) * -1); overflow: hidden; }
[data-theme="affiche"] .grande-pochette { inset: 0; margin: 0; width: auto; height: auto; }
[data-theme="affiche"] .objet { display: block; z-index: 3; mix-blend-mode: multiply; }
[data-theme="affiche"] .objet i.a { display: block; right: -40px; bottom: -34px; width: 170px; height: 170px; border-radius: 50%; background: var(--encre-rouge); }
[data-theme="affiche"] .plein-textes { align-items: flex-end; margin-top: 10px; min-height: 0; z-index: 4; }
[data-theme="affiche"] .plein-textes h2 { font-size: 3.2rem; line-height: 1.12; text-shadow: 3px 2px 0 var(--decalage); padding-top: .04em; }
[data-theme="affiche"] .plein-textes p { font-weight: 700; font-size: 1.1rem; color: var(--texte); }
[data-theme="affiche"] .plein-textes .rond { color: var(--texte); }
[data-theme="affiche"] .avance input { --piste-h: 16px; --curseur-l: 10px; --curseur-h: 30px; --piste-image: linear-gradient(90deg, var(--encre-rouge) calc(var(--p, 0) * 100%), transparent 0); }
[data-theme="affiche"] .avance input::-webkit-slider-runnable-track { box-shadow: inset 0 0 0 2.5px var(--bord); }
[data-theme="affiche"] .avance input::-moz-range-track { box-shadow: inset 0 0 0 2.5px var(--bord); }
[data-theme="affiche"] input[type=range] { --curseur-l: 8px; --curseur-h: 22px; }
[data-theme="affiche"] .temps { font-weight: 700; color: var(--texte); }
[data-theme="affiche"] .commandes .fort, [data-theme="affiche"] .commandes .fort:hover { background: var(--encre-rouge); color: var(--sur-rouge); box-shadow: 4px 3px 0 var(--texte); }
[data-theme="affiche"] .groupe > h2 { font-size: 1.55rem; }
[data-theme="affiche"] .feuille { background: var(--fond); border: 2.5px solid var(--bord); border-bottom: 0; }
[data-theme="affiche"] .eq-fermer { box-shadow: 0 12px 0 12px var(--fond); }
[data-theme="affiche"] .textes b { font-weight: 600; }

/* En lecture seulement, et jamais si l'appareil demande moins d'animation */
body.en-lecture .grande-pochette, body.en-lecture #mini-pochette, body.en-lecture .objet i, body.en-lecture .spectre span { animation-play-state: running !important; }
@media (prefers-reduced-motion: reduce) {
  .grande-pochette, #mini-pochette, .objet i, .spectre span, .feuille { animation: none !important; }
}

/* Très petits téléphones */
@media (max-width: 340px) {
  [data-theme="transistor"] .menu-biblio a { padding: 3px 7px 0; gap: 5px; font-size: .9rem; }
  [data-theme="transistor"] .menu-biblio .ic { width: 20px; }
  .vignette b { font-size: 15px; }
  .vignette[data-theme="k7"] b { font-size: 24px; }
}

/* Grand lecteur : les commandes restent à l'écran, quels que soient le titre et la hauteur du téléphone */
.plein-textes h2, .plein-textes p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; word-break: normal; }
.plein-textes p { -webkit-line-clamp: 1; line-clamp: 1; }
[data-theme="affiche"] .plein-textes h2 { font-size: 2.6rem; }
@media (max-height: 760px) {
  .support { --cote: min(100vw - 40px, 420px, 36vh); }
  [data-theme="affiche"] .support { height: 32vh; }
  [data-theme="affiche"] .plein-textes h2 { font-size: 2.1rem; }
  .plein-textes h2 { font-size: 1.45rem; }
}
@media (max-height: 600px) {
  .support { --cote: min(100vw - 40px, 30vh); }
  [data-theme="k7"] .support { height: 280px; }
  [data-theme="affiche"] .support { height: 28vh; }
  [data-theme="affiche"] .plein-textes h2 { font-size: 1.7rem; }
  .plein-textes h2 { font-size: 1.25rem; -webkit-line-clamp: 1; line-clamp: 1; }
}
.vignette[aria-pressed="true"]::before { top: auto; bottom: 0; }
.vignette[aria-pressed="true"]::after { top: auto; bottom: 11px; }