Toutes les palettes passent.
marvel 5.55 · minecraft 5.02 · fortnite 6.32 · cyberpunk 5.36 · dragonball 5.18 · sonic 5.93 · halloween 5.18 · mario 4.83 · dc 5.93 · pokemon 4.92 · zelda 4.92 · naruto 5.18 · onepiece 7.10 · roblox 4.88 · amongus 5.36 · frozen 5.36 · stranger 6.47 · printemps 5.02 · noel 6.47 · licorne 5.38 · bubbletea 6.98 · dinosaure 5.02 · steampunk 6.85 · cafe 5.02 · chocolat 8.02 · arcenciel 4.92 · tropical 5.47 · ninja 5.58 · pirate 7.96 · defaut 4.82
/* ═══════════════════════════════════════════════════════════════════════════
   THÈMES DE L'ESPACE ÉLÈVE — une palette par thème de la liste unique
   (apps/shared/habillages.js). 02/10/2026.

   POURQUOI CE FICHIER
   Les dix-huit palettes vivaient au milieu de dashboard.css, et onze thèmes
   vendus (Noël, Licorne, Tropical…) n'en avaient aucune : la boutique les
   rabattait sur un autre thème. Chaque thème de la liste a désormais SA
   palette ici, et seulement ici ; scripts/test-themes-eleve.js refuse une
   palette sans thème, un thème sans palette, et toute palette illisible.

   LES QUATRE RÈGLES QUE CHAQUE PALETTE RESPECTE (vérifiées par calcul WCAG)
   ① texte blanc sur --primary et sur --secondary ≥ 4,5:1 — une quinzaine de
     règles et de styles en ligne posent « color: white » sur ces couleurs
     (boutons, menu actif, bandeau de titre, onglets) ;
   ② --text-primary et --text-secondary ≥ 4,5:1 sur --bg-card et
     --bg-card-hover, que la carte soit posée sur un fond NOIR ou BLANC :
     l'élève peut choisir n'importe quel fond d'écran, la carte doit rester
     lisible dessus ;
   ③ --accent-texte (grands chiffres, pseudo en évidence) ≥ 3:1 sur la carte,
     dans les mêmes deux cas — texte de grande taille ;
   ④ --shadow est une COULEUR : toutes les règles l'emploient ainsi
     (« box-shadow: 0 10px 30px var(--shadow) »). Une ombre complète posée
     ici rendait la déclaration invalide, et l'ombre disparaissait.

   Les thèmes clairs (Glace, Printemps) sont dessinés en version sombre : le
   fond de l'espace élève est sombre (#0f0e17) ou un fond d'écran, et leur
   texte foncé y devenait invisible (2,4:1 mesuré sur Glace le 02/10).
   --bg-main reste le fond d'origine : c'est lui qu'habille le tableau de
   bord du professeur (scripts/build-habillages-prof.js).

   « .theme-apercu.theme-<cle> » sert à l'aperçu de la boutique : on montre
   le thème dans un cadre, sans toucher au corps de la page.

   Jamais de « filter » sur body : il fait de body le repère des éléments
   « position: fixed » (fenêtres, boutons flottants, lecteurs vidéo), qui
   suivent alors le défilement. Le thème Rouge sombre en portait un.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 🟦 Rouge & bleu — Bleu nuit et rouge vif */
body.theme-marvel,
.theme-apercu.theme-marvel {
  --primary: #c8102e;
  --secondary: #1d4ed8;
  --accent-texte: #ff7a85;
  --bg-main: linear-gradient(135deg, #1a1a2e 0%, #0f0f1e 50%, #ed1d24 100%);
  --bg-card: rgba(22, 18, 40, 0.9);
  --bg-card-hover: rgba(34, 28, 60, 0.92);
  --text-primary: #ffffff;
  --text-secondary: #ffd166;
  --border: #ed1d24;
  --shadow: rgba(237, 29, 36, 0.45);
}

/* 🟩 Vert pixel — Blocs et pixels verts */
body.theme-minecraft,
.theme-apercu.theme-minecraft {
  --primary: #15803d;
  --secondary: #8b5a2b;
  --accent-texte: #4ade80;
  --bg-main: linear-gradient(135deg, #1a4d1a 0%, #0d260d 50%, #003300 100%);
  --bg-card: rgba(12, 28, 14, 0.9);
  --bg-card-hover: rgba(20, 42, 22, 0.92);
  --text-primary: #f0fdf4;
  --text-secondary: #86efac;
  --border: #22c55e;
  --shadow: rgba(34, 197, 94, 0.4);
}

/* 🪂 Violet arène — Violet profond et couleurs vives */
body.theme-fortnite,
.theme-apercu.theme-fortnite {
  --primary: #7e22ce;
  --secondary: #a21caf;
  --accent-texte: #5eead4;
  --bg-main: linear-gradient(135deg, #1a0033 0%, #330066 50%, #00001a 100%);
  --bg-card: rgba(24, 10, 46, 0.9);
  --bg-card-hover: rgba(36, 16, 66, 0.92);
  --text-primary: #faf5ff;
  --text-secondary: #67e8f9;
  --border: #00d9ff;
  --shadow: rgba(0, 217, 255, 0.4);
}

/* 🌃 Néon urbain — Néons et nuit urbaine */
body.theme-cyberpunk,
.theme-apercu.theme-cyberpunk {
  --primary: #be185d;
  --secondary: #0e7490;
  --accent-texte: #22d3ee;
  --bg-main: linear-gradient(135deg, #1a0033 0%, #0d1117 50%, #000000 100%);
  --bg-card: rgba(16, 8, 30, 0.9);
  --bg-card-hover: rgba(28, 12, 48, 0.92);
  --text-primary: #e0fbff;
  --text-secondary: #ff7ab6;
  --border: #ff006e;
  --shadow: rgba(255, 0, 110, 0.45);
}

/* ☄️ Orange feu — Orange et rouge énergiques */
body.theme-dragonball,
.theme-apercu.theme-dragonball {
  --primary: #c2410c;
  --secondary: #b91c1c;
  --accent-texte: #fb923c;
  --bg-main: linear-gradient(135deg, #ff8c00 0%, #ff4500 50%, #8b0000 100%);
  --bg-card: rgba(36, 14, 6, 0.9);
  --bg-card-hover: rgba(54, 22, 10, 0.92);
  --text-primary: #fff7ed;
  --text-secondary: #fdba74;
  --border: #ff8c00;
  --shadow: rgba(255, 140, 0, 0.45);
}

/* 💨 Bleu éclair — Bleu profond, effet vitesse */
body.theme-sonic,
.theme-apercu.theme-sonic {
  --primary: #1d4ed8;
  --secondary: #0369a1;
  --accent-texte: #38bdf8;
  --bg-main: linear-gradient(135deg, #0066cc 0%, #003d7a 50%, #001f3d 100%);
  --bg-card: rgba(8, 20, 44, 0.9);
  --bg-card-hover: rgba(14, 32, 66, 0.92);
  --text-primary: #eff6ff;
  --text-secondary: #bae6fd;
  --border: #3b82f6;
  --shadow: rgba(59, 130, 246, 0.45);
}

/* 🎃 Halloween — Citrouilles et nuit */
body.theme-halloween,
.theme-apercu.theme-halloween {
  --primary: #c2410c;
  --secondary: #7e22ce;
  --accent-texte: #fb923c;
  --bg-main: linear-gradient(135deg, #0a0a0a 0%, #1a0f0a 50%, #2d1b00 100%);
  --bg-card: rgba(20, 12, 8, 0.9);
  --bg-card-hover: rgba(34, 20, 12, 0.92);
  --text-primary: #fff7ed;
  --text-secondary: #d8b4fe;
  --border: #ff6600;
  --shadow: rgba(255, 102, 0, 0.45);
}

/* 🟥 Rouge ciel — Rouge vif et ciel bleu */
body.theme-mario,
.theme-apercu.theme-mario {
  --primary: #dc2626;
  --secondary: #1d4ed8;
  --accent-texte: #f87171;
  --bg-main: linear-gradient(135deg, #4ec8f5 0%, #99d9f5 50%, #0066cc 100%);
  --bg-card: rgba(14, 24, 46, 0.9);
  --bg-card-hover: rgba(22, 36, 66, 0.92);
  --text-primary: #ffffff;
  --text-secondary: #93c5fd;
  --border: #e52521;
  --shadow: rgba(229, 37, 33, 0.4);
}

/* 🦇 Noir nuit — Noir profond et nuit */
body.theme-dc,
.theme-apercu.theme-dc {
  --primary: #854d0e;
  --secondary: #0369a1;
  --accent-texte: #ffde00;
  --bg-main: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #000000 100%);
  --bg-card: rgba(8, 8, 10, 0.9);
  --bg-card-hover: rgba(22, 22, 26, 0.92);
  --text-primary: #fde68a;
  --text-secondary: #d4d4d8;
  --border: #ffde00;
  --shadow: rgba(255, 222, 0, 0.35);
}

/* 🟡 Bleu & jaune — Bleu océan et jaune solaire */
body.theme-pokemon,
.theme-apercu.theme-pokemon {
  --primary: #2563eb;
  --secondary: #a16207;
  --accent-texte: #facc15;
  --bg-main: linear-gradient(135deg, #0075be 0%, #003a70 50%, #ffcb05 100%);
  --bg-card: rgba(10, 26, 52, 0.9);
  --bg-card-hover: rgba(16, 40, 78, 0.92);
  --text-primary: #ffffff;
  --text-secondary: #fde047;
  --border: #ffcb05;
  --shadow: rgba(255, 203, 5, 0.4);
}

/* 🗡️ Vert forêt — Vert forêt et lueur dorée */
body.theme-zelda,
.theme-apercu.theme-zelda {
  --primary: #166534;
  --secondary: #a16207;
  --accent-texte: #fcd34d;
  --bg-main: linear-gradient(135deg, #004d00 0%, #002200 50%, #1a3300 100%);
  --bg-card: rgba(10, 26, 14, 0.9);
  --bg-card-hover: rgba(16, 40, 22, 0.92);
  --text-primary: #f0fdf4;
  --text-secondary: #fde68a;
  --border: #00a651;
  --shadow: rgba(0, 166, 81, 0.4);
}

/* 🍜 Orange spirale — Orange et bleu, motif spirale */
body.theme-naruto,
.theme-apercu.theme-naruto {
  --primary: #c2410c;
  --secondary: #1d4ed8;
  --accent-texte: #fb923c;
  --bg-main: linear-gradient(135deg, #ff6600 0%, #cc5200 50%, #0066cc 100%);
  --bg-card: rgba(14, 20, 40, 0.9);
  --bg-card-hover: rgba(22, 32, 60, 0.92);
  --text-primary: #fff7ed;
  --text-secondary: #fdba74;
  --border: #ff6600;
  --shadow: rgba(255, 102, 0, 0.45);
}

/* ⚓ Bleu large — Bleu marine et violet */
body.theme-onepiece,
.theme-apercu.theme-onepiece {
  --primary: #1e3a8a;
  --secondary: #6d28d9;
  --accent-texte: #a5b4fc;
  --bg-main: linear-gradient(135deg, #000080 0%, #00008b 50%, #4c1d95 100%);
  --bg-card: rgba(10, 16, 44, 0.9);
  --bg-card-hover: rgba(18, 26, 66, 0.92);
  --text-primary: #eef2ff;
  --text-secondary: #c4b5fd;
  --border: #6366f1;
  --shadow: rgba(99, 102, 241, 0.4);
}

/* 🧱 Briques vives — Briques et couleurs vives */
body.theme-roblox,
.theme-apercu.theme-roblox {
  --primary: #c81e1e;
  --secondary: #0369a1;
  --accent-texte: #f87171;
  --bg-main: linear-gradient(135deg, #1a1a2e 0%, #0a4d68 50%, #000000 100%);
  --bg-card: rgba(26, 22, 30, 0.9);
  --bg-card-hover: rgba(40, 34, 46, 0.92);
  --text-primary: #ffffff;
  --text-secondary: #7dd3fc;
  --border: #e03131;
  --shadow: rgba(224, 49, 49, 0.4);
}

/* 🛸 Noir cosmos — Noir spatial et soucoupe */
body.theme-amongus,
.theme-apercu.theme-amongus {
  --primary: #b91c1c;
  --secondary: #0e7490;
  --accent-texte: #67e8f9;
  --bg-main: linear-gradient(135deg, #1a1a2e 0%, #0a0a14 50%, #000000 100%);
  --bg-card: rgba(8, 10, 18, 0.9);
  --bg-card-hover: rgba(16, 20, 34, 0.92);
  --text-primary: #f8fafc;
  --text-secondary: #67e8f9;
  --border: #ee1c24;
  --shadow: rgba(0, 255, 255, 0.3);
}

/* 🧊 Glace — Bleu glacier et ciel clair */
body.theme-frozen,
.theme-apercu.theme-frozen {
  --primary: #0369a1;
  --secondary: #0e7490;
  --accent-texte: #7dd3fc;
  --bg-main: linear-gradient(135deg, #e0f7ff 0%, #b8e6ff 50%, #80d8ff 100%);
  --bg-card: rgba(8, 28, 46, 0.9);
  --bg-card-hover: rgba(14, 42, 66, 0.92);
  --text-primary: #f0f9ff;
  --text-secondary: #bae6fd;
  --border: #7dd3fc;
  --shadow: rgba(125, 211, 252, 0.35);
}

/* 🔦 Rouge sombre — Rouge sombre et lampe torche */
body.theme-stranger,
.theme-apercu.theme-stranger {
  --primary: #b91c1c;
  --secondary: #9a3412;
  --accent-texte: #fdba74;
  --bg-main: linear-gradient(135deg, #1a0000 0%, #0a0a0a 50%, #4a0000 100%);
  --bg-card: rgba(22, 6, 6, 0.9);
  --bg-card-hover: rgba(38, 10, 10, 0.92);
  --text-primary: #fff1f2;
  --text-secondary: #fdba74;
  --border: #d32f2f;
  --shadow: rgba(211, 47, 47, 0.45);
}

/* 🌷 Printemps — Habillage pastel et fleurs */
body.theme-printemps,
.theme-apercu.theme-printemps {
  --primary: #be185d;
  --secondary: #15803d;
  --accent-texte: #f9a8d4;
  --bg-main: linear-gradient(135deg, #fff5f7 0%, #ffe4ec 50%, #ffd6e3 100%);
  --bg-card: rgba(40, 14, 34, 0.9);
  --bg-card-hover: rgba(58, 22, 50, 0.92);
  --text-primary: #fff1f7;
  --text-secondary: #fbcfe8;
  --border: #ff6b9d;
  --shadow: rgba(255, 107, 157, 0.35);
}

/* 🎄 Noël — Rouge Noël, vert sapin et or */
body.theme-noel,
.theme-apercu.theme-noel {
  --primary: #b91c1c;
  --secondary: #166534;
  --accent-texte: #fcd34d;
  --bg-main: linear-gradient(135deg, #0b3d2e 0%, #14532d 45%, #7f1d1d 100%);
  --bg-card: rgba(10, 26, 18, 0.9);
  --bg-card-hover: rgba(16, 40, 28, 0.92);
  --text-primary: #fffbeb;
  --text-secondary: #fde68a;
  --border: #d4af37;
  --shadow: rgba(212, 175, 55, 0.4);
}

/* 🦄 Licorne — Violet magique et reflets pastel */
body.theme-licorne,
.theme-apercu.theme-licorne {
  --primary: #9333ea;
  --secondary: #be185d;
  --accent-texte: #f0abfc;
  --bg-main: linear-gradient(135deg, #2e1065 0%, #6b21a8 50%, #db2777 100%);
  --bg-card: rgba(30, 16, 48, 0.9);
  --bg-card-hover: rgba(44, 24, 70, 0.92);
  --text-primary: #fdf4ff;
  --text-secondary: #a7f3d0;
  --border: #e879f9;
  --shadow: rgba(232, 121, 249, 0.4);
}

/* 🧋 Bubble Tea — Thé au lait, perles et taro */
body.theme-bubbletea,
.theme-apercu.theme-bubbletea {
  --primary: #92400e;
  --secondary: #7e22ce;
  --accent-texte: #f5c69a;
  --bg-main: linear-gradient(135deg, #3b2418 0%, #6b4226 50%, #7e22ce 100%);
  --bg-card: rgba(36, 24, 18, 0.9);
  --bg-card-hover: rgba(52, 36, 28, 0.92);
  --text-primary: #fff7ed;
  --text-secondary: #e9d5ff;
  --border: #d6a77a;
  --shadow: rgba(214, 167, 122, 0.35);
}

/* 🦖 Dinosaure — Jungle préhistorique et ambre */
body.theme-dinosaure,
.theme-apercu.theme-dinosaure {
  --primary: #3f6212;
  --secondary: #b45309;
  --accent-texte: #a3e635;
  --bg-main: linear-gradient(135deg, #1a2e05 0%, #365314 50%, #78350f 100%);
  --bg-card: rgba(18, 24, 10, 0.9);
  --bg-card-hover: rgba(28, 36, 16, 0.92);
  --text-primary: #f7fee7;
  --text-secondary: #fcd34d;
  --border: #84cc16;
  --shadow: rgba(132, 204, 22, 0.35);
}

/* ⚙️ Steampunk — Cuivre, laiton et engrenages */
body.theme-steampunk,
.theme-apercu.theme-steampunk {
  --primary: #9a3412;
  --secondary: #854d0e;
  --accent-texte: #fbbf24;
  --bg-main: linear-gradient(135deg, #1c1410 0%, #3d2b1f 50%, #7c4a1e 100%);
  --bg-card: rgba(28, 20, 14, 0.9);
  --bg-card-hover: rgba(42, 30, 20, 0.92);
  --text-primary: #fef3c7;
  --text-secondary: #fcd34d;
  --border: #b87333;
  --shadow: rgba(184, 115, 51, 0.4);
}

/* ☕ Café — Espresso, crème et caramel */
body.theme-cafe,
.theme-apercu.theme-cafe {
  --primary: #78350f;
  --secondary: #b45309;
  --accent-texte: #e7c9a9;
  --bg-main: linear-gradient(135deg, #1b120c 0%, #3b2416 50%, #8b5a2b 100%);
  --bg-card: rgba(30, 20, 14, 0.9);
  --bg-card-hover: rgba(46, 32, 22, 0.92);
  --text-primary: #fdf6ec;
  --text-secondary: #e7c9a9;
  --border: #c08552;
  --shadow: rgba(192, 133, 82, 0.35);
}

/* 🍫 Chocolat — Chocolat noir et praliné */
body.theme-chocolat,
.theme-apercu.theme-chocolat {
  --primary: #7c2d12;
  --secondary: #9f1239;
  --accent-texte: #f5c08a;
  --bg-main: linear-gradient(135deg, #1a0f0a 0%, #3e2017 50%, #6b3a22 100%);
  --bg-card: rgba(26, 14, 10, 0.9);
  --bg-card-hover: rgba(42, 22, 16, 0.92);
  --text-primary: #fff5eb;
  --text-secondary: #fbcfe8;
  --border: #a0522d;
  --shadow: rgba(160, 82, 45, 0.4);
}

/* 🌈 Arc-en-ciel — Toutes les couleurs du spectre */
body.theme-arcenciel,
.theme-apercu.theme-arcenciel {
  --primary: #6d28d9;
  --secondary: #1d4ed8;
  --accent-texte: #fde047;
  --bg-main: linear-gradient(135deg, #7f1d1d 0%, #9a3412 20%, #854d0e 40%, #14532d 60%, #1e3a8a 80%, #4c1d95 100%);
  --bg-card: rgba(20, 16, 32, 0.9);
  --bg-card-hover: rgba(32, 26, 50, 0.92);
  --text-primary: #ffffff;
  --text-secondary: #fde68a;
  --border: #f472b6;
  --shadow: rgba(167, 139, 250, 0.4);
  --degrade-bandeau: linear-gradient(90deg, #b91c1c 0%, #c2410c 20%, #a16207 40%, #15803d 60%, #1d4ed8 80%, #6d28d9 100%);
}

/* 🌺 Tropical — Lagon turquoise et hibiscus */
body.theme-tropical,
.theme-apercu.theme-tropical {
  --primary: #0f766e;
  --secondary: #be185d;
  --accent-texte: #5eead4;
  --bg-main: linear-gradient(135deg, #064e3b 0%, #0f766e 50%, #be185d 100%);
  --bg-card: rgba(6, 30, 28, 0.9);
  --bg-card-hover: rgba(10, 46, 42, 0.92);
  --text-primary: #f0fdfa;
  --text-secondary: #fcd34d;
  --border: #2dd4bf;
  --shadow: rgba(45, 212, 191, 0.35);
}

/* 🥷 Ninja — Noir d’encre, acier et rouge vif */
body.theme-ninja,
.theme-apercu.theme-ninja {
  --primary: #b91c1c;
  --secondary: #334155;
  --accent-texte: #f87171;
  --bg-main: linear-gradient(135deg, #0a0a0a 0%, #18181b 55%, #7f1d1d 100%);
  --bg-card: rgba(10, 10, 12, 0.9);
  --bg-card-hover: rgba(24, 24, 28, 0.92);
  --text-primary: #f4f4f5;
  --text-secondary: #a1a1aa;
  --border: #dc2626;
  --shadow: rgba(220, 38, 38, 0.4);
}

/* 🏴‍☠️ Pirate — Bois de navire, or et océan */
body.theme-pirate,
.theme-apercu.theme-pirate {
  --primary: #7c2d12;
  --secondary: #1e3a8a;
  --accent-texte: #fbbf24;
  --bg-main: linear-gradient(135deg, #1c1917 0%, #422006 50%, #1e3a8a 100%);
  --bg-card: rgba(24, 18, 12, 0.9);
  --bg-card-hover: rgba(38, 28, 18, 0.92);
  --text-primary: #fef3c7;
  --text-secondary: #fbbf24;
  --border: #d4a017;
  --shadow: rgba(212, 160, 23, 0.4);
}

/* ── « Mon Profil » : le contraste renforcé met le thème en pause ──────────
   Le contraste renforcé impose ses propres couleurs (cartes noires, texte
   blanc et jaune) par-dessus le thème. Sans un mot, l'élève croyait son thème
   cassé. L'avis ne s'affiche que lorsque le mode est actif : CSS seule, donc
   toujours juste, sans état à tenir à jour. */
.theme-contraste-avis {
  display: none;
  margin: 10px 0 0;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--text-primary);
}
body.accessibility-contrast .theme-contraste-avis { display: block; }

/* ── Boutique : « Essayer » un thème (apps/student/core/apercu-boutique.js) ─
   Maquette de l'espace élève peinte avec la palette du thème : en-tête,
   menu actif, bandeau, cartes, bouton — les mêmes variables, aux mêmes
   endroits, que dans dashboard.css. */
.theme-apercu-ecran {
  width: min(560px, 100%);
  border-radius: 18px;
  overflow: hidden;
  background: #0f0e17;
  border: 2px solid var(--border);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: var(--text-primary);
}
.theme-apercu-ecran .ta-entete {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 12px 14px; font-size: 0.9rem;
  background: var(--bg-card); border-bottom: 2px solid var(--border);
}
.theme-apercu-ecran .ta-entete strong { margin-right: auto; }
.theme-apercu-ecran .ta-menu { display: flex; gap: 8px; flex-wrap: wrap; padding: 10px 14px 0; }
.theme-apercu-ecran .ta-menu span {
  padding: 8px 12px; border-radius: 10px; font-size: 0.85rem; font-weight: 600;
  background: var(--bg-card-hover);
}
.theme-apercu-ecran .ta-menu .ta-menu-actif { background: var(--primary); color: #fff; }
.theme-apercu-ecran .ta-bandeau {
  display: flex; flex-direction: column; gap: 4px;
  margin: 12px 14px; padding: 18px; border-radius: 14px; text-align: center; color: #fff;
  background: var(--degrade-bandeau, linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%));
  box-shadow: 0 10px 30px var(--shadow);
}
.theme-apercu-ecran .ta-bandeau strong { font-size: 1.3rem; }
.theme-apercu-ecran .ta-cartes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 14px; }
.theme-apercu-ecran .ta-carte {
  padding: 12px; border-radius: 14px; text-align: center;
  background: var(--bg-card); border: 2px solid var(--border);
}
.theme-apercu-ecran .ta-carte b {
  display: block; font-size: 1.8rem; font-weight: 900;
  color: var(--accent-texte, var(--primary));
}
.theme-apercu-ecran .ta-carte small { display: block; font-weight: 600; color: var(--text-secondary); }
.theme-apercu-ecran .ta-carte p { margin: 6px 0 0; font-size: 0.8rem; color: var(--text-primary); }
.theme-apercu-ecran .ta-bouton {
  display: block; margin: 12px 14px 16px; padding: 10px; border-radius: 10px;
  background: var(--primary); color: #fff; font-weight: 700; text-align: center;
}