/* ===================================================================== theme.css — thème clair « Néon » (indigo & magenta) ===================================================================== ARCHITECTURE Le site a été écrit avec les classes utilitaires Tailwind écrites en dur dans le balisage : 119 « bg-slate-900 », 163 « text-slate-500 », etc., réparties entre index.html ET les gabarits générés par app.js. Réécrire ces 500 occurrences à la main serait long, risqué dans les chaînes JS, et surtout irréversible. On procède donc par une couche de thème : une poignée de jetons de design (les variables ci-dessous) pilote l'apparence, et un bloc de correspondances redéfinit ce que peignent les classes Tailwind lorsque la racine porte data-theme="clair". Deux propriétés rendent l'approche sûre : 1. Rien n'est modifié dans le balisage. Aucun risque de casser un gabarit. 2. Toutes les règles sont préfixées par [data-theme="clair"], de spécificité (0,2,0) contre (0,1,0) pour une classe utilitaire seule. Elles l'emportent sans !important, et le thème sombre d'origine reste intact, octet pour octet, quand l'attribut est absent. PRINCIPE VISUEL Le néon ne remplit jamais une grande surface : il souligne. Un liseré de 2 px, une bordure au survol, une alvéole de carte possédée. C'est ce qui permet d'avoir des couleurs vives sans fatiguer l'œil sur un outil qu'on garde ouvert. ACCESSIBILITÉ Les teintes « -400 » de Tailwind (emerald-400, rose-400, blue-400) sont pensées pour un fond sombre. Sur blanc, elles tombent sous 2:1 de contraste et deviennent illisibles. Chaque couleur sémantique a donc une contrepartie choisie pour le fond clair, et non une simple inversion. Les rapports de contraste sont notés en commentaire à côté de chacune. ===================================================================== */ /* --------------------------------------------------------------------- 1. JETONS --------------------------------------------------------------------- */ :root[data-theme="clair"] { color-scheme: light; /* barres de défilement et contrôles natifs clairs */ /* Surfaces, du plus clair au plus marqué. La rampe slate d'origine est inversée : ce qui était le plus sombre (slate-900, la surface de fond des champs) devient le plus clair. */ --fond: #ffffff; --surface: #ffffff; --surface-creux: #f7f5ff; /* champs de saisie, vignettes */ --surface-2: #efebfe; --surface-3: #e3dcfb; --bord: #eae6fb; --bord-fort: #d6ceff; --bord-marque: #bdb1f7; /* Textes, du plus fort au plus discret. contraste sur #fff */ --texte: #120f2b; /* 16.8:1 AAA */ --texte-2: #3a3363; /* 9.7:1 AAA */ --texte-3: #5b5386; /* 6.3:1 AA */ --texte-4: #7d75a3; /* 4.6:1 AA */ /* Couleurs sémantiques, réaccordées pour le fond clair. */ --primaire: #5b3df5; /* 7.1:1 AAA — indigo */ --primaire-vif: #4a2ae8; --primaire-doux: #ede9ff; /* fond teinté */ --accent: #d6197d; /* 5.2:1 AA — magenta lisible */ --accent-vif: #ff3ea5; /* réservé aux aplats et dégradés */ --accent-doux: #ffe9f5; --succes: #047857; /* 5.5:1 AA */ --succes-doux: #e3f7ef; --danger: #c81e4a; /* 5.6:1 AA */ --danger-doux: #ffe8ee; --alerte: #a45509; /* 4.8:1 AA */ --alerte-doux: #fff2e0; --lueur: 0 0 0 1px rgba(91, 61, 245, .28), 0 8px 26px -10px rgba(91, 61, 245, .45); --lueur-accent: 0 0 0 1px rgba(214, 25, 125, .25), 0 8px 26px -10px rgba(214, 25, 125, .40); --degrade: linear-gradient(90deg, var(--primaire), var(--accent-vif)); } /* --------------------------------------------------------------------- 2. FOND GÉNÉRAL --------------------------------------------------------------------- */ :root[data-theme="clair"] body { background-color: var(--fond); color: var(--texte); } /* Voile très léger en haut de page : évite le blanc d'imprimante plat, sans introduire de couleur franche. */ :root[data-theme="clair"] body::before { content: ''; position: fixed; inset: 0 0 auto 0; height: 420px; background: linear-gradient(180deg, rgba(91, 61, 245, .05), transparent 70%); pointer-events: none; z-index: 0; } /* --------------------------------------------------------------------- 3. SURFACES --------------------------------------------------------------------- */ /* .glass reposait sur un flou translucide sombre : en clair il devient invisible. On le remplace par une surface opaque tenue par sa bordure. */ :root[data-theme="clair"] .glass { background: var(--surface); backdrop-filter: none; border: 1px solid var(--bord); box-shadow: 0 1px 2px rgba(18, 15, 43, .04), 0 8px 24px -16px rgba(18, 15, 43, .12); } :root[data-theme="clair"] .bg-slate-900, :root[data-theme="clair"] .bg-slate-900\/80 { background-color: var(--surface-creux); } :root[data-theme="clair"] .bg-slate-900\/50 { background-color: var(--surface-creux); } :root[data-theme="clair"] .bg-slate-800, :root[data-theme="clair"] .bg-slate-800\/80 { background-color: var(--surface-2); } :root[data-theme="clair"] .bg-slate-800\/50 { background-color: var(--surface-2); } :root[data-theme="clair"] .bg-slate-700 { background-color: var(--surface-3); } :root[data-theme="clair"] .bg-white\/5 { background-color: var(--surface-creux); } :root[data-theme="clair"] .bg-slate-950 { background-color: var(--fond); } /* --------------------------------------------------------------------- 4. TEXTES --------------------------------------------------------------------- */ :root[data-theme="clair"] .text-white { color: var(--texte); } :root[data-theme="clair"] .text-slate-300 { color: var(--texte-2); } :root[data-theme="clair"] .text-slate-400 { color: var(--texte-3); } :root[data-theme="clair"] .text-slate-500 { color: var(--texte-3); } :root[data-theme="clair"] .text-slate-600 { color: var(--texte-4); } :root[data-theme="clair"] .text-slate-700 { color: var(--texte-4); } /* Couleurs sémantiques : réaccordées, pas inversées. */ :root[data-theme="clair"] .text-blue-400, :root[data-theme="clair"] .text-blue-300, :root[data-theme="clair"] .text-blue-500 { color: var(--primaire); } :root[data-theme="clair"] .text-emerald-400, :root[data-theme="clair"] .text-emerald-300, :root[data-theme="clair"] .text-emerald-500 { color: var(--succes); } :root[data-theme="clair"] .text-rose-400, :root[data-theme="clair"] .text-rose-500, :root[data-theme="clair"] .text-red-400, :root[data-theme="clair"] .text-red-500 { color: var(--danger); } :root[data-theme="clair"] .text-yellow-400, :root[data-theme="clair"] .text-amber-400, :root[data-theme="clair"] .text-orange-400, :root[data-theme="clair"] .text-orange-500, :root[data-theme="clair"] .text-orange-500\/80 { color: var(--alerte); } :root[data-theme="clair"] .text-purple-400, :root[data-theme="clair"] .text-violet-400, :root[data-theme="clair"] .text-fuchsia-400, :root[data-theme="clair"] .text-pink-400 { color: var(--accent); } :root[data-theme="clair"] .text-cyan-400, :root[data-theme="clair"] .text-sky-400 { color: var(--primaire); } /* --------------------------------------------------------------------- 5. BORDURES --------------------------------------------------------------------- */ :root[data-theme="clair"] .border-white\/5, :root[data-theme="clair"] .border-white\/10 { border-color: var(--bord); } :root[data-theme="clair"] .border-slate-700, :root[data-theme="clair"] .border-slate-700\/50, :root[data-theme="clair"] .border-slate-600 { border-color: var(--bord-fort); } :root[data-theme="clair"] .border-blue-500, :root[data-theme="clair"] .border-blue-500\/50, :root[data-theme="clair"] .border-blue-500\/30, :root[data-theme="clair"] .border-blue-500\/20 { border-color: var(--bord-marque); } :root[data-theme="clair"] .border-emerald-500, :root[data-theme="clair"] .border-emerald-500\/50, :root[data-theme="clair"] .border-emerald-500\/30, :root[data-theme="clair"] .border-emerald-500\/20 { border-color: #7fd6b8; } :root[data-theme="clair"] .border-rose-500\/30, :root[data-theme="clair"] .border-rose-500\/20 { border-color: #f4b3c4; } :root[data-theme="clair"] .border-orange-500\/30 { border-color: #f0c491; } /* --------------------------------------------------------------------- 6. BOUTONS ET APLATS Seuls endroits où la couleur remplit : le texte y passe en blanc, donc le contraste est porté par la couleur de fond elle-même. --------------------------------------------------------------------- */ :root[data-theme="clair"] .bg-blue-600, :root[data-theme="clair"] .bg-blue-500 { background-color: var(--primaire); } :root[data-theme="clair"] .hover\:bg-blue-500:hover, :root[data-theme="clair"] .hover\:bg-blue-600:hover { background-color: var(--primaire-vif); } :root[data-theme="clair"] .bg-emerald-600, :root[data-theme="clair"] .bg-emerald-500 { background-color: var(--succes); } :root[data-theme="clair"] .hover\:bg-emerald-500:hover { background-color: #036b4e; } :root[data-theme="clair"] .bg-rose-600, :root[data-theme="clair"] .bg-rose-500, :root[data-theme="clair"] .bg-red-600, :root[data-theme="clair"] .bg-red-500 { background-color: var(--danger); } /* Aplats teintés : sur fond sombre ils éclaircissaient, ici ils doivent assombrir légèrement, sinon ils disparaissent dans le blanc. */ :root[data-theme="clair"] .bg-blue-600\/20, :root[data-theme="clair"] .bg-blue-600\/30, :root[data-theme="clair"] .bg-blue-500\/20 { background-color: var(--primaire-doux); } :root[data-theme="clair"] .bg-emerald-600\/20, :root[data-theme="clair"] .bg-emerald-500\/20 { background-color: var(--succes-doux); } :root[data-theme="clair"] .bg-rose-600\/20, :root[data-theme="clair"] .bg-rose-500\/20, :root[data-theme="clair"] .bg-red-600\/20 { background-color: var(--danger-doux); } :root[data-theme="clair"] .bg-orange-500\/20, :root[data-theme="clair"] .bg-amber-500\/20 { background-color: var(--alerte-doux); } /* --------------------------------------------------------------------- 7. DÉGRADÉS L'ancien bleu → vert devient indigo → magenta : c'est la signature du thème, présente sur le logo et les titres. --------------------------------------------------------------------- */ :root[data-theme="clair"] .from-blue-400, :root[data-theme="clair"] .from-blue-500, :root[data-theme="clair"] .from-blue-600 { --tw-gradient-from: var(--primaire); } :root[data-theme="clair"] .to-emerald-400, :root[data-theme="clair"] .to-emerald-500, :root[data-theme="clair"] .to-emerald-600 { --tw-gradient-to: var(--accent-vif); } /* Repli : si les variables internes de Tailwind ne prennent pas (build figé, syntaxe d'une version différente), on force le dégradé entier. */ :root[data-theme="clair"] .bg-gradient-to-r.from-blue-400, :root[data-theme="clair"] .bg-gradient-to-r.from-blue-600 { background-image: var(--degrade); } /* --------------------------------------------------------------------- 8. COMPOSANTS PROPRES AU SITE --------------------------------------------------------------------- */ :root[data-theme="clair"] .tab-active { border-bottom-color: var(--primaire); color: var(--primaire); } :root[data-theme="clair"] .admin-tab-active { border-bottom-color: var(--accent); color: var(--accent) !important; /* la règle d'origine est !important */ } /* Le voile de fenêtre modale passe du noir à 90 % à un violet très pâle : un noir opaque sur une interface claire est brutal. */ :root[data-theme="clair"] .modal { background: rgba(18, 15, 43, .45); backdrop-filter: blur(3px); } :root[data-theme="clair"] .card-pokemon:hover { border-color: var(--primaire); box-shadow: var(--lueur); } :root[data-theme="clair"] ::-webkit-scrollbar-thumb { background: var(--bord-marque); } :root[data-theme="clair"] ::-webkit-scrollbar-thumb:hover { background: var(--primaire); } :root[data-theme="clair"] .img-secours { background: var(--surface-creux); color: var(--texte-4); border: 1px solid var(--bord); } /* Cartes de statistiques. Elles portent déjà une arête colorée à gauche (border-l-4) : on l'accorde au thème plutôt que d'ajouter un second liseré qui entrerait en concurrence avec elle. Les quatre teintes restent distinctes, pour qu'on continue de repérer chaque indicateur au coup d'œil. */ :root[data-theme="clair"] .border-l-4.border-emerald-500 { border-left-color: var(--succes); } :root[data-theme="clair"] .border-l-4.border-blue-500 { border-left-color: var(--primaire); } :root[data-theme="clair"] .border-l-4.border-orange-500 { border-left-color: var(--alerte); } :root[data-theme="clair"] .border-l-4.border-purple-500 { border-left-color: var(--accent); } /* --------------------------------------------------------------------- 9. CLASSEUR Ici la couleur porte une information — possédée ou non — et non une décoration : c'est ce qui justifie qu'elle soit vive. --------------------------------------------------------------------- */ /* CHOIX ASSUMÉ : la coque du classeur reste sombre en thème clair. Ce n'est pas un oubli. Le classeur imite un objet physique posé sur la page ; le blanchir le ferait disparaître dans le fond et on perdrait la métaphore. Un classeur sombre sur un bureau clair est d'ailleurs ce qu'on voit dans la réalité — et surtout, les visuels de cartes, souvent clairs et bordés de blanc, se découpent bien mieux sur lui. On se contente donc de faire glisser son similicuir du bleu marine vers un indigo profond, pour l'accorder au reste du thème. */ :root[data-theme="clair"] .binder-cover { box-shadow: 0 24px 60px -24px rgba(91, 61, 245, .45), 0 2px 6px rgba(18, 15, 43, .10); border: 1px solid var(--bord-marque); } :root[data-theme="clair"] .binder-page { background: linear-gradient(158deg, rgba(49, 36, 112, .55), rgba(18, 15, 43, .78)); } :root[data-theme="clair"] .binder-slot { background: rgba(18, 15, 43, .62); } /* La pastille de possession prend le magenta : c'est LA couleur signature du thème, et elle porte ici l'information la plus consultée du classeur. */ :root[data-theme="clair"] .binder-check { background: var(--accent-vif); } :root[data-theme="clair"] .binder-card.is-owned, :root[data-theme="clair"] .binder-cell.is-owned { box-shadow: var(--lueur-accent); } /* Les couleurs de prix ne sont PAS retouchées : elles s'affichent sur les alvéoles du classeur, resté sombre. Les assombrir pour le fond clair les rendrait illisibles là où elles sont réellement lues. */ /* --------------------------------------------------------------------- 10. BOUTON DE BASCULE --------------------------------------------------------------------- */ .theme-bascule { display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; border-radius: .65rem; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .04); color: #94a3b8; cursor: pointer; transition: color .18s, border-color .18s, background .18s; } .theme-bascule:hover { color: #fff; border-color: rgba(255, 255, 255, .28); } :root[data-theme="clair"] .theme-bascule { border-color: var(--bord-fort); background: var(--surface-creux); color: var(--primaire); } :root[data-theme="clair"] .theme-bascule:hover { background: var(--primaire-doux); border-color: var(--primaire); } /* Transition douce au basculement, mais jamais imposée à qui a demandé à réduire les animations. */ @media (prefers-reduced-motion: no-preference) { body, .glass, .modal { transition: background-color .25s ease, color .25s ease; } } /* ===================================================================== 11. VARIANTES RESPONSIVES — À GARDER EN DERNIER DANS CE FICHIER ===================================================================== Le problème que cette section répare : Une media query n'ajoute AUCUNE spécificité. Or nos correspondances sont écrites « [data-theme="clair"] .bg-slate-800 », de spécificité (0,2,0), alors qu'une variante responsive de Tailwind comme « .md\:bg-transparent » ne pèse que (0,1,0), même à l'intérieur de son @media. Résultat : nos règles battaient les variantes responsives. Le menu principal, écrit « bg-slate-800 md:bg-transparent » — fond plein en version mobile déroulante, transparent en version onglets sur ordinateur — se retrouvait peint en lavande sur grand écran, formant une bande sans séparation avec l'en-tête au-dessus. On redéclare donc ces variantes à la même spécificité que nos correspondances, mais PLUS BAS dans le fichier : à égalité, la dernière règle l'emporte, et l'intention d'origine du balisage est rétablie. Toute nouvelle correspondance ajoutée plus haut doit vérifier qu'elle ne masque pas une variante responsive ; si c'est le cas, l'ajouter ici. ===================================================================== */ @media (min-width: 640px) { :root[data-theme="clair"] .sm\:bg-transparent { background-color: transparent; } } @media (min-width: 768px) { /* Le menu principal et les barres d'onglets : transparents sur ordinateur, ils doivent reposer sur le fond de la page. */ :root[data-theme="clair"] .md\:bg-transparent { background-color: transparent; } /* Le filet de base sous les onglets. */ :root[data-theme="clair"] .md\:border-white\/5 { border-color: var(--bord); } /* Libellés d'onglets : même valeur que text-slate-400, mais redéclarée pour que la variante reste maîtresse de son point de rupture. */ :root[data-theme="clair"] .md\:text-slate-500 { color: var(--texte-3); } } @media (min-width: 1024px) { :root[data-theme="clair"] .lg\:bg-transparent { background-color: transparent; } }