/* ============ CARAMEL 2 · THÈMES VISUELS (v2.1) ============
   Un thème = des JETONS surchargés sous [data-theme="…"] — posé sur <html> par js/ui/theme-picker.js
   (thème du profil actif, appliqué par main.js), ou sur une carte d'aperçu du sélecteur : un thème peut
   habiller n'importe quel sous-arbre. Le thème « Caramel » (l'original) est défini dans css/base.css
   (:root, [data-theme="caramel"]) ; chaque bloc ci-dessous redéfinit TOUS les jetons thémables :
     fonds --bg-1/2/3 (dégradé de la page) + --bg-pattern (motif SVG très discret, data-URI) ;
     encres --ink … --ink-5 et --title ;
     --pink-*  = famille SECONDAIRE (bordures, pastilles, états choisis, cartes, rideaux de la scène) ;
     --amber-* = famille PRINCIPALE (boutons, badges, surlignages), claire : texte --amber-900 dessus ;
     --shade (ombres, voile), --accent (complément : micro, particules), --focus (anneau clavier),
     --panel-bg/--panel-line (panneaux en pointillés), --ava-ring (anneau de l'avatar de l'accueil),
     --tile-<jeu> (cartes « Mes jeux » et choix du jeu libre).
   Inchangés dans tous les thèmes : --card (blanc), --ok* (réussite verte), --soft* (erreur douce orange),
   --sky/--grass, --fr/--ma (radars officiels) et la palette --n-* des décors naturels des jeux.
   L'habillage (--amber-400/500, --pink-400, --focus, --amber-200, --pink-200) reste loin de l'orange de l'erreur douce
   et n'est jamais rouge : un enfant ne doit pas confondre un bouton avec « essaie encore ».
   Contraste vérifié par tests/themes.test.mjs : --ink, --ink-2, --ink-3, --title ≥ 4,5:1 sur --card,
   --bg-1/2/3, --pink-50, --amber-50/100 ; --amber-900 sur --amber-50…400 ; --pink-800 sur --pink-50/100 ;
   texte des cartes de jeux sur --tile-* ; --focus ≥ 4,5:1 sur --card et --bg-1/2/3 ; écart de couleur (ΔE76) avec
   --soft et --soft-bg. Aucune référence à une marque (thème « Super-héros » générique). */

/* ---------- jetons dérivés, recalculés sur chaque porteur de thème (page ou carte d'aperçu) ---------- */
[data-theme] {
  --line: 3px solid var(--pink-200);
  --shadow-1: 0 4px 14px color-mix(in srgb, var(--shade) 8%, transparent);
  --shadow-2: 0 6px 18px color-mix(in srgb, var(--shade) 14%, transparent);
  --shadow-btn: 0 4px 10px color-mix(in srgb, var(--shade) 25%, transparent);
  --overlay: color-mix(in srgb, var(--ink) 35%, transparent);
}

/* ---------- LICORNE : lavande, rose et turquoise pastel ; arc-en-ciel (anneau de l’avatar, motif) ; boutons lavande, bordures turquoise ---------- */
[data-theme="licorne"] {
  --bg-1: #fbf4ff; --bg-2: #fff1f8; --bg-3: #eefcf9;
  --bg-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cpath d='M26 21Q28.52 27.48 35 30Q28.52 32.52 26 39Q23.48 32.52 17 30Q23.48 27.48 26 21Z' fill='%23a07cf0' fill-opacity='0.24'/%3E%3Cpath transform='translate(104 26) scale(1.1)' d='M0 3C0 -1 5 -2 6 2C7 -2 12 -1 12 3C12 7 6 10 6 11C6 10 0 7 0 3Z' fill='%23e879c9' fill-opacity='0.2'/%3E%3Cpath d='M92 106Q93.68 110.32 98 112Q93.68 113.68 92 118Q90.32 113.68 86 112Q90.32 110.32 92 106Z' fill='%2317b8a2' fill-opacity='0.26'/%3E%3Cpath d='M150 73Q151.4 76.6 155 78Q151.4 79.4 150 83Q148.6 79.4 145 78Q148.6 76.6 150 73Z' fill='%23e879c9' fill-opacity='0.22'/%3E%3Ccircle cx='44' cy='128' r='2.6' fill='%23a07cf0' fill-opacity='.22'/%3E%3Ccircle cx='140' cy='150' r='2' fill='%2317b8a2' fill-opacity='.26'/%3E%3Cg fill='none' stroke-width='2.4' stroke-linecap='round' stroke-opacity='.2' transform='translate(18 92)'%3E%3Cpath d='M0 14a14 14 0 0 1 28 0' stroke='%23f17fb0'/%3E%3Cpath d='M4 14a10 10 0 0 1 20 0' stroke='%23f5c74e'/%3E%3Cpath d='M8 14a6 6 0 0 1 12 0' stroke='%233dd5bd'/%3E%3C/g%3E%3C/svg%3E");
  --ink: #45285e; --ink-2: #5f3f7c; --ink-3: #73528f; --ink-4: #a48bbd; --ink-5: #c2b0d6;
  --title: #a3238e;
  --pink-50: #effcf9; --pink-100: #d6f7ef; --pink-200: #a8ebdd; --pink-400: #2fbfa6; --pink-800: #0d5c53;
  --amber-50: #f8f5ff;
  --amber-100: #efe9ff; --amber-200: #e0d6ff; --amber-300: #cbbcfd; --amber-400: #b5a0fa; --amber-500: #9a7ff3; --amber-900: #2c165c;
  --shade: #7c3aed; --accent: #ec7fc5; --focus: #a3238e;
  --panel-bg: #f8f5ff; --panel-line: #cbbcfd;
  --ava-ring: conic-gradient(from 210deg, #ffb3d1, #ffd59e, #fff1a1, #b9f3c6, #a6e7ff, #c9b8ff, #ffb3d1);
  --tile-course: #fbe7f6; --tile-cloture: #e6f9f5; --tile-tables: #efe8ff;
  --tile-pommes: #fff0f3; --tile-orchestre: #f3eaff; --tile-operations: #e3f6fd;
}

/* ---------- PRINCESSE : violet royal, fuchsia et or ; couronnes et pierres précieuses ; boutons fuchsia, touches dorées ---------- */
[data-theme="princesse"] {
  --bg-1: #fbf3ff; --bg-2: #fff2fb; --bg-3: #f6efff;
  --bg-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cpath transform='translate(22 30)' d='M0 12L2 2 7 7 11 0 15 7 20 2 22 12Z' fill='%23e3ad0b' fill-opacity='.26'/%3E%3Cpath transform='translate(118 22)' d='M6 0L12 7 6 14 0 7Z' fill='%23d65fe8' fill-opacity='.17'/%3E%3Cpath d='M96 97Q97.96 102.04 103 104Q97.96 105.96 96 111Q94.04 105.96 89 104Q94.04 102.04 96 97Z' fill='%237b1fa2' fill-opacity='0.15'/%3E%3Cpath transform='translate(36 128)' d='M5 0L10 6 5 12 0 6Z' fill='%23a855f7' fill-opacity='.15'/%3E%3Cpath transform='translate(130 128)' d='M0 10L2 2 6 6 9 0 12 6 16 2 18 10Z' fill='%23d65fe8' fill-opacity='.15'/%3E%3Ccircle cx='160' cy='86' r='2.4' fill='%23e3ad0b' fill-opacity='.3'/%3E%3Ccircle cx='70' cy='70' r='2' fill='%23d65fe8' fill-opacity='.22'/%3E%3C/svg%3E");
  --ink: #41204f; --ink-2: #5e3670; --ink-3: #71477f; --ink-4: #a383b0; --ink-5: #c3a9cd;
  --title: #7b1fa2;
  --pink-50: #faf5ff; --pink-100: #f3e8ff; --pink-200: #e5cffd; --pink-400: #a855f7; --pink-800: #6b21a8;
  --amber-50: #fdf4ff;
  --amber-100: #fae6fe; --amber-200: #f6d0fd; --amber-300: #f0abfc; --amber-400: #e77ff7; --amber-500: #d946ef; --amber-900: #4a044e;
  --shade: #86198f; --accent: #f6c831; --focus: #7b1fa2;
  --panel-bg: #fdf4ff; --panel-line: #f0abfc;
  --ava-ring: conic-gradient(from 0deg, #f6c831, #e879f9, #a855f7, #f6c831, #e879f9, #a855f7, #f6c831);
  --tile-course: #fbe8fd; --tile-cloture: #fff7d6; --tile-tables: #f1e6ff;
  --tile-pommes: #fdeef6; --tile-orchestre: #efe3ff; --tile-operations: #fff1df;
}

/* ---------- SUPER-HÉROS : bleu roi, rouge et jaune vif, style BD (trame de points, étoiles, éclairs) ; générique : aucune marque ---------- */
[data-theme="superheros"] {
  --bg-1: #eff5ff; --bg-2: #fffbeb; --bg-3: #edf3ff;
  --bg-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='132' height='132'%3E%3Cg fill='%232f6ae0' fill-opacity='.06'%3E%3Ccircle cx='5' cy='5' r='1.6'/%3E%3Ccircle cx='27' cy='5' r='2.1'/%3E%3Ccircle cx='49' cy='5' r='2.6'/%3E%3Ccircle cx='71' cy='5' r='1.6'/%3E%3Ccircle cx='93' cy='5' r='2.1'/%3E%3Ccircle cx='115' cy='5' r='2.6'/%3E%3Ccircle cx='16' cy='27' r='2.1'/%3E%3Ccircle cx='38' cy='27' r='2.6'/%3E%3Ccircle cx='60' cy='27' r='1.6'/%3E%3Ccircle cx='82' cy='27' r='2.1'/%3E%3Ccircle cx='104' cy='27' r='2.6'/%3E%3Ccircle cx='126' cy='27' r='1.6'/%3E%3Ccircle cx='5' cy='49' r='2.6'/%3E%3Ccircle cx='27' cy='49' r='1.6'/%3E%3Ccircle cx='49' cy='49' r='2.1'/%3E%3Ccircle cx='71' cy='49' r='2.6'/%3E%3Ccircle cx='93' cy='49' r='1.6'/%3E%3Ccircle cx='115' cy='49' r='2.1'/%3E%3Ccircle cx='16' cy='71' r='1.6'/%3E%3Ccircle cx='38' cy='71' r='2.1'/%3E%3Ccircle cx='60' cy='71' r='2.6'/%3E%3Ccircle cx='82' cy='71' r='1.6'/%3E%3Ccircle cx='104' cy='71' r='2.1'/%3E%3Ccircle cx='126' cy='71' r='2.6'/%3E%3Ccircle cx='5' cy='93' r='2.1'/%3E%3Ccircle cx='27' cy='93' r='2.6'/%3E%3Ccircle cx='49' cy='93' r='1.6'/%3E%3Ccircle cx='71' cy='93' r='2.1'/%3E%3Ccircle cx='93' cy='93' r='2.6'/%3E%3Ccircle cx='115' cy='93' r='1.6'/%3E%3Ccircle cx='16' cy='115' r='2.6'/%3E%3Ccircle cx='38' cy='115' r='1.6'/%3E%3Ccircle cx='60' cy='115' r='2.1'/%3E%3Ccircle cx='82' cy='115' r='2.6'/%3E%3Ccircle cx='104' cy='115' r='1.6'/%3E%3Ccircle cx='126' cy='115' r='2.1'/%3E%3C/g%3E%3Cpolygon points='34.0,32.0 36.1,37.1 41.6,37.5 37.4,41.1 38.7,46.5 34.0,43.6 29.3,46.5 30.6,41.1 26.4,37.5 31.9,37.1' fill='%23f2c200' fill-opacity='0.24'/%3E%3Cpath transform='translate(92 74)' d='M9 0L1 14 7 14 4 26 15 9 9 9 12 0Z' fill='%23f2c200' fill-opacity='.26' stroke='%231b3a8f' stroke-opacity='.1' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ink: #14234d; --ink-2: #2c3f6e; --ink-3: #3f5384; --ink-4: #8392b8; --ink-5: #aab6d2;
  --title: #c21d1d;
  --pink-50: #f0f6ff; --pink-100: #dde9ff; --pink-200: #b4cdfb; --pink-400: #2f6ae0; --pink-800: #1b3a8f;
  --amber-50: #fffce6;
  --amber-100: #fff6bf; --amber-200: #ffec80; --amber-300: #ffe04a; --amber-400: #fdd21f; --amber-500: #e9b600; --amber-900: #14234d;
  --shade: #1b3a8f; --accent: #c21d1d; --focus: #1b3a8f;
  --panel-bg: #f0f6ff; --panel-line: #93b8f7;
  --ava-ring: repeating-conic-gradient(#fdd21f 0 15deg, #2f6ae0 15deg 30deg);
  --tile-course: #e1ecff; --tile-cloture: #fff4c2; --tile-tables: #e3f0ff;
  --tile-pommes: #ffeccc; --tile-orchestre: #e8e9ff; --tile-operations: #fff6d6;
}

/* ---------- DINOSAURES : vert feuillage, terre et ocre ; empreintes et feuilles ; boutons ocre (l'orange volcan reste dans --accent) ---------- */
[data-theme="dinosaures"] {
  --bg-1: #f3f9ea; --bg-2: #fbf5e6; --bg-3: #edf6e3;
  --bg-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cg fill='%236b4f2c' fill-opacity='.075'%3E%3Cg transform='translate(34 44) rotate(-16)'%3E%3Cellipse cx='9' cy='17' rx='6.5' ry='7'/%3E%3Cpath d='M3 12L-3 0 6 9Z'/%3E%3Cpath d='M7 10L9 -4 12 10Z'/%3E%3Cpath d='M13 11L22 1 16 13Z'/%3E%3C/g%3E%3Cg transform='translate(66 98) rotate(-6)'%3E%3Cellipse cx='9' cy='17' rx='6.5' ry='7'/%3E%3Cpath d='M3 12L-3 0 6 9Z'/%3E%3Cpath d='M7 10L9 -4 12 10Z'/%3E%3Cpath d='M13 11L22 1 16 13Z'/%3E%3C/g%3E%3C/g%3E%3Cpath transform='translate(140 30) rotate(30)' d='M0 0C10 -4 22 2 24 14C12 16 2 10 0 0Z' fill='%235f8f22' fill-opacity='.12'/%3E%3Cpath transform='translate(126 150) rotate(-40)' d='M0 0C10 -4 22 2 24 14C12 16 2 10 0 0Z' fill='%235f8f22' fill-opacity='.1'/%3E%3Ccircle cx='170' cy='104' r='3' fill='%23ef7417' fill-opacity='.14'/%3E%3Ccircle cx='22' cy='160' r='2.4' fill='%235f8f22' fill-opacity='.16'/%3E%3C/svg%3E");
  --ink: #33281a; --ink-2: #4f402b; --ink-3: #5f5036; --ink-4: #9a8b6c; --ink-5: #bcb092;
  --title: #2f6a1e;
  --pink-50: #f6faeb; --pink-100: #ebf4d4; --pink-200: #d4e6a6; --pink-400: #7ea52f; --pink-800: #3c5a12;
  --amber-50: #fffbea;
  --amber-100: #fdf2c6; --amber-200: #f9e28f; --amber-300: #eec350; --amber-400: #d9a12a; --amber-500: #b7820f; --amber-900: #3a2804;
  --shade: #55621c; --accent: #ef7417; --focus: #2f6a1e;
  --panel-bg: #f6faeb; --panel-line: #bcd681;
  --ava-ring: repeating-conic-gradient(#7ea52f 0 22.5deg, #b9d46b 22.5deg 45deg);
  --tile-course: #eaf4d8; --tile-cloture: #fbefd9; --tile-tables: #e2f1d9;
  --tile-pommes: #ffe9d5; --tile-orchestre: #f0ecd9; --tile-operations: #e5efe0;
}

/* ---------- BOLIDES : bleu course, gris bitume et titres rouges ; damier et traits de vitesse ; boutons bleus, bordures grises ---------- */
[data-theme="bolides"] {
  --bg-1: #f1f4f8; --bg-2: #f7f9fb; --bg-3: #ebeff5;
  --bg-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='168' height='168'%3E%3Cg fill='%231d2633' fill-opacity='.06' transform='translate(20 24)'%3E%3Crect width='6' height='6'/%3E%3Crect x='12' width='6' height='6'/%3E%3Crect x='6' y='6' width='6' height='6'/%3E%3Crect x='18' y='6' width='6' height='6'/%3E%3Crect y='12' width='6' height='6'/%3E%3Crect x='12' y='12' width='6' height='6'/%3E%3C/g%3E%3Cg stroke='%232f7de8' stroke-opacity='.13' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M96 104h34'/%3E%3Cpath d='M104 114h24'/%3E%3Cpath d='M112 124h14'/%3E%3C/g%3E%3Cg fill='%231d2633' fill-opacity='.05' transform='translate(118 34)'%3E%3Crect width='5' height='5'/%3E%3Crect x='10' width='5' height='5'/%3E%3Crect x='5' y='5' width='5' height='5'/%3E%3Crect y='10' width='5' height='5'/%3E%3Crect x='10' y='10' width='5' height='5'/%3E%3C/g%3E%3Ccircle cx='40' cy='138' r='2.4' fill='%231d2633' fill-opacity='.09'/%3E%3C/svg%3E");
  --ink: #1d2633; --ink-2: #36404f; --ink-3: #4a5566; --ink-4: #8c97a8; --ink-5: #b3bcc9;
  --title: #c0141c;
  --pink-50: #f4f6f9; --pink-100: #e8ecf2; --pink-200: #cfd6e1; --pink-400: #4a5566; --pink-800: #1d2633;
  --amber-50: #eef5ff;
  --amber-100: #dbe9ff; --amber-200: #bad5ff; --amber-300: #8dbaff; --amber-400: #5b9df7; --amber-500: #2f7de8; --amber-900: #0b1c45;
  --shade: #1d2633; --accent: #2f7de8; --focus: #0b1c45;
  --panel-bg: #f4f6f9; --panel-line: #b3bcc9;
  --ava-ring: repeating-conic-gradient(#1d2633 0 25%, #ffffff 0 50%) 0 0 / 10px 10px;
  --tile-course: #e4ebf5; --tile-cloture: #e1edff; --tile-tables: #eceff3;
  --tile-pommes: #fff1d6; --tile-orchestre: #e6e9f2; --tile-operations: #dfeaff;
}

/* ---------- ESPACE : bleu nuit doux sur fond lavande clair, jaune étoile ; étoiles et planètes ; boutons jaune étoile ---------- */
[data-theme="espace"] {
  --bg-1: #f2f0ff; --bg-2: #ecefff; --bg-3: #f5f2ff;
  --bg-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cpolygon points='30.0,28.0 31.6,31.8 35.7,32.1 32.6,34.8 33.5,38.9 30.0,36.7 26.5,38.9 27.4,34.8 24.3,32.1 28.4,31.8' fill='%236668ea' fill-opacity='0.22'/%3E%3Cpath d='M120 21Q121.4 24.6 125 26Q121.4 27.4 120 31Q118.6 27.4 115 26Q118.6 24.6 120 21Z' fill='%23e8b10c' fill-opacity='0.4'/%3E%3Cpath d='M70 116Q71.12 118.88 74 120Q71.12 121.12 70 124Q68.88 121.12 66 120Q68.88 118.88 70 116Z' fill='%236668ea' fill-opacity='0.24'/%3E%3Cpolygon points='160.0,145.5 161.2,148.4 164.3,148.6 161.9,150.6 162.6,153.6 160.0,152.0 157.4,153.6 158.1,150.6 155.7,148.6 158.8,148.4' fill='%23e8b10c' fill-opacity='0.38'/%3E%3Ccircle cx='96' cy='70' r='1.8' fill='%233b30a8' fill-opacity='.22'/%3E%3Ccircle cx='20' cy='96' r='1.4' fill='%233b30a8' fill-opacity='.24'/%3E%3Ccircle cx='160' cy='100' r='1.6' fill='%233b30a8' fill-opacity='.2'/%3E%3Ccircle cx='50' cy='160' r='1.8' fill='%23e8b10c' fill-opacity='.35'/%3E%3Cg transform='translate(128 118)'%3E%3Ccircle r='8' fill='%23f0a020' fill-opacity='.24'/%3E%3Cellipse rx='14' ry='4' fill='none' stroke='%236668ea' stroke-opacity='.28' stroke-width='1.6' transform='rotate(-18)'/%3E%3C/g%3E%3C/svg%3E");
  --ink: #1f1d4d; --ink-2: #36346b; --ink-3: #48467e; --ink-4: #8b89b8; --ink-5: #b1afd3;
  --title: #3b30a8;
  --pink-50: #f1f2ff; --pink-100: #e2e5ff; --pink-200: #c7cdfd; --pink-400: #6668ea; --pink-800: #2f2a85;
  --amber-50: #fffdeb;
  --amber-100: #fff8c9; --amber-200: #fff09a; --amber-300: #ffe566; --amber-400: #fdd94a; --amber-500: #f0bf12; --amber-900: #1f1d4d;
  --shade: #2f2a85; --accent: #a78bfa; --focus: #3b30a8;
  --panel-bg: #f3f2ff; --panel-line: #b9bff9;
  --ava-ring: conic-gradient(from 90deg, #6668ea, #2f2a85, #a78bfa, #fdd94a, #6668ea);
  --tile-course: #e6e8ff; --tile-cloture: #fff7d1; --tile-tables: #e9e4ff;
  --tile-pommes: #ffeede; --tile-orchestre: #e2eaff; --tile-operations: #eee6ff;
}

/* ---------- OCÉAN : turquoise, bleu lagon et sable ; vagues et bulles ; boutons turquoise, bordures bleues ---------- */
[data-theme="ocean"] {
  --bg-1: #ecfbfd; --bg-2: #fdf8ec; --bg-3: #e8f7fb;
  --bg-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='140'%3E%3Cpath d='M0 34q12.5 -9 25 0t25 0t25 0t25 0t25 0t25 0t25 0t25 0' fill='none' stroke='%231fb3c4' stroke-opacity='.12' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M0 104q12.5 -9 25 0t25 0t25 0t25 0t25 0t25 0t25 0t25 0' fill='none' stroke='%231fb3c4' stroke-opacity='.08' stroke-width='2.2' stroke-linecap='round'/%3E%3Cg fill='none' stroke='%231fb3c4' stroke-opacity='.17' stroke-width='1.6'%3E%3Ccircle cx='40' cy='66' r='6'/%3E%3Ccircle cx='54' cy='55' r='3.6'/%3E%3Ccircle cx='152' cy='70' r='5'/%3E%3C/g%3E%3Ccircle cx='120' cy='126' r='2.4' fill='%23ff9563' fill-opacity='.22'/%3E%3Ccircle cx='176' cy='12' r='2' fill='%23ff9563' fill-opacity='.22'/%3E%3C/svg%3E");
  --ink: #123649; --ink-2: #24506a; --ink-3: #305e78; --ink-4: #7d9fb0; --ink-5: #a8c3cf;
  --title: #0c6283;
  --pink-50: #f0f7fc; --pink-100: #dcedf8; --pink-200: #b6d9f0; --pink-400: #2b83c0; --pink-800: #0b4a73;
  --amber-50: #ecfeff;
  --amber-100: #cdf9fd; --amber-200: #a2f0f9; --amber-300: #67e3f3; --amber-400: #2dd0e8; --amber-500: #0db3cc; --amber-900: #062f3d;
  --shade: #0b5866; --accent: #1fb3c4; --focus: #0c6283;
  --panel-bg: #effcfc; --panel-line: #8fdde6;
  --ava-ring: conic-gradient(#1fb3c4, #8fdde6, #ffd9a8, #ffb48c, #1fb3c4);
  --tile-course: #dcf5f7; --tile-cloture: #fdf3dc; --tile-tables: #e0f4ef;
  --tile-pommes: #ffe9e0; --tile-orchestre: #e2eefa; --tile-operations: #e3f7fa;
}

/* ============ SÉLECTEUR DE THÈME (js/ui/theme-picker.js) ============
   Chaque carte porte data-theme : ses couleurs sont celles de SON thème, quel que soit celui de la page. */
.tp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tp-card {
  position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 5px; min-width: 0;
  padding: 6px 6px 7px; border-radius: var(--r-m); text-align: center;
  background: var(--card); border: 3px solid var(--pink-200); box-shadow: var(--shadow-1); color: var(--title);
  transition: transform var(--dur-1) var(--ease-out), border-color var(--dur-2), box-shadow var(--dur-2);
}
.tp-card:active { transform: scale(.96); }
.tp-card[aria-checked="true"] {
  border-color: var(--title);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--title) 22%, transparent), var(--shadow-2);
}
.tp-swatch {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 6px;
  height: 62px; padding: 6px 9px 6px 8px; border-radius: 12px; overflow: hidden;
  background: var(--bg-pattern) 0 0 / 104px auto, linear-gradient(160deg, var(--bg-1) 0%, var(--bg-2) 62%, var(--bg-3) 100%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pink-200) 70%, transparent);
}
.tp-emoji { font-size: 2.05rem; line-height: 1; filter: drop-shadow(0 2px 2px color-mix(in srgb, var(--shade) 25%, transparent)); }
.tp-mock { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.tp-mock i { display: block; border-radius: var(--r-pill); }
.tp-mock-line { width: 34px; height: 6px; background: var(--title); opacity: .85; }
.tp-mock-chip { width: 28px; height: 11px; background: var(--pink-100); box-shadow: inset 0 0 0 2px var(--pink-400); }
.tp-mock-btn { width: 42px; height: 14px; background: var(--amber-400); box-shadow: 0 2px 0 var(--amber-500); }
.tp-name { font-weight: 700; font-size: 1rem; line-height: 1.15; color: var(--title); overflow-wrap: anywhere; }
.tp-check {
  position: absolute; top: -9px; right: -9px; width: 26px; height: 26px; border-radius: 50%;
  display: none; place-items: center; font-size: .85rem; font-weight: 700; line-height: 1;
  background: var(--title); color: #fff; border: 2px solid #fff; box-shadow: var(--shadow-1);
}
.tp-card[aria-checked="true"] .tp-check { display: grid; }
.tp-card:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
/* variante dense (espace parents) */
.tp-grid.is-compact { gap: 8px; }
.tp-grid.is-compact .tp-swatch { height: 50px; }
.tp-grid.is-compact .tp-emoji { font-size: 1.7rem; }
.tp-grid.is-compact .tp-name { font-size: .92rem; }
/* feuille « Choisis ton univers » */
.tp-sheet { display: grid; gap: 12px; }
.tp-sub { color: var(--ink-2); font-size: 1rem; line-height: 1.4; }
@media (min-width: 560px) {
  .tp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-height: 700px) and (max-width: 559px) {
  .tp-card { gap: 3px; padding: 5px 5px 6px; }
  .tp-swatch { height: 42px; }
  .tp-emoji { font-size: 1.55rem; }
  .tp-name { font-size: .92rem; }
}
@media (hover: hover) and (pointer: fine) {
  .tp-card:hover { border-color: var(--pink-400); box-shadow: var(--shadow-2); }
  .tp-card[aria-checked="true"]:hover { border-color: var(--title); }
}

/* ============ CHANGEMENT DE THÈME : fondu enchaîné de tout l'écran (transition de vue) ============
   (motion.css anime les transitions d'écran en glissé ; un changement de thème n'est qu'un fondu) */
html.theme-swap::view-transition-old(root) { animation: 300ms ease-in-out both tp-fade-out; }
html.theme-swap::view-transition-new(root) { animation: 300ms ease-in-out both tp-fade-in; }
@keyframes tp-fade-out { to { opacity: 0; } }
@keyframes tp-fade-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .tp-card { transition: none; }
}