/* ============================================================= PRONOSPORTS — thème clair ------------------------------------------------------------ Chargé APRÈS `pronosports.css` et `scene.css`, dont il retourne l'éclairage : fond blanc cassé, texte noir, cartes posées sur la page par une ombre douce plutôt que par un verre sombre. Deux principes, qui ne sont pas symétriques : 1. **Sur fond sombre on AJOUTE de la lumière ; sur fond clair on en RETIRE.** Un `screen` sur du blanc ne produit rien. Tout ce qui était halo lumineux devient donc lavis coloré ou ombre. 2. **Une seule couleur de marque, et elle est chaude.** Le rouge porte l'action — bouton, lien actif, accent de titre. Le vert ne sert qu'à une chose : ce qui est gagné ou juste. Les confondre ferait d'un bilan une décoration. Le thème sombre reste accessible : `` désactive tout ce fichier d'un coup. C'est la raison de la garde `html:not([data-theme="sombre"])` en tête de chaque bloc. ============================================================= */ html:not([data-theme="sombre"]) { /* ---------------------------------------------------------- */ /* Jetons de base */ /* ---------------------------------------------------------- */ /* Fonds : jamais de blanc pur pour la page, sinon les cartes blanches ne se détachent plus de rien. */ --ink: #FBFBFC; --surface: #FFFFFF; --surface-2: #F4F4F6; --surface-3: #EAEAEE; --line: #E4E4E9; --line-soft: #F0F0F3; --text: #16161A; --muted: #5C5F6B; --faint: #8A8D98; /* Marque. `--brass` s'écrit, `--brass-fill` se remplit — le rouge d'un bouton et le rouge d'un mot n'ont pas besoin de la même saturation pour porter le même sens. */ --brass: #D2102B; --brass-fill: #F5253C; --brass-hi: #FF3B50; --brass-soft: rgba(245, 37, 60, .10); --brass-line: rgba(245, 37, 60, .30); /* * Le bouton d'action s'inverse sur fond clair : encre blanche, aplat foncé. * * Les deux valeurs sortent de la mesure, pas du goût. Sur fond clair, l'encre * sombre du thème nocturne tombe à 3,6 sur le rouge et 3,5 sur l'ardoise — * sous le seuil. Le blanc remonte, mais pas assez sur `--brass-fill`, qui est * le ton VIF de la marque : 4,03 en clair, 4,10 en sable, toujours sous 4,5. * * On descend donc d'un ton et on remplit avec `--brass`, celui du mot : * 5,46 en clair, 5,51 en sable, 6,09 en ardoise. * * Et les deux bornes sont ÉGALES, donc l'aplat est plat. Ce qui compte dans * un dégradé, pour la lisibilité, c'est son point le plus clair : y laisser * `--brass-fill` ramènerait le bouton à 4,03. C'est d'ailleurs le premier * principe de cette feuille — sur fond clair on RETIRE de la lumière au lieu * d'en ajouter. Le relief vient ici de l'ombre portée, pas du dégradé. */ --btn-fill: var(--brass); --btn-hi: var(--brass); --btn-ink: #FFFFFF; /* Camps. Le vert marque celui que le modèle donne devant, le gris ardoise l'autre. C'est la lecture d'un pronostic : il y a un favori, pas deux équipes de couleurs différentes. */ --home: #12A150; --away: #6B7280; --draw: #C7CAD1; /* Signaux. Le vert de résultat est le MÊME que celui du favori : un pronostic juste et une équipe donnée gagnante, c'est la même information à deux moments. */ --good: #12A150; --warn: #C2790B; --bad: #D2102B; /* Accents de sport. Le thème sombre les avait ramenés à des gris, qui sur blanc deviennent invisibles — c'est ce qu'on voyait sur la grille des compétitions, où le nom du sport disparaissait. Six teintes franches, assez foncées pour se lire sur du blanc. */ --foot: #D2102B; --basket: #C2620A; --tennis: #0E8A45; --nfl: #B23A2E; --hockey: #1B6FA8; --mma: #6D3FB0; --accent: var(--brass); /* Ombres : courtes et douces. Une ombre noire profonde, sur blanc, se lit comme une salissure. */ --shadow: 0 1px 2px rgba(16, 16, 24, .05), 0 10px 28px -14px rgba(16, 16, 24, .14); --shadow-lg: 0 2px 4px rgba(16, 16, 24, .05), 0 30px 70px -28px rgba(16, 16, 24, .20); /* ---------------------------------------------------------- */ /* Jetons de la couche scénique */ /* ---------------------------------------------------------- */ --deep: #F6F8F3; --deep-2: #EFF3EA; --glass: rgba(255, 255, 255, .92); --glass-hi: #FFFFFF; --glass-line: rgba(18, 26, 10, .10); --glow: #12A150; --glow-2: #0E8A98; --glow-3: #8E22B4; --pitch: #CFE0BE; color-scheme: light; /* ---------------------------------------------------------- */ /* Corrections : les valeurs codées en dur */ /* ---------------------------------------------------------- */ & body { background: var(--ink); color: var(--text); } & ::selection { background: var(--brass-fill); color: #FFFFFF; } /* Les boutons de marque gardent l'aplat lime : c'est là que l'identité survit, et du noir dessus donne 15:1. `.analyze-btn` ne figure plus dans cette liste : il porte désormais son aplat en permanence, via `--btn-fill`, et cette règle lui rendait au survol l'encre sombre que les mesures de contraste écartent sur fond clair. */ & .btn-brass, & .ask-cta:hover, & .price-badge { background: var(--brass-fill); color: #16200A; } & .btn-brass:hover:not(:disabled) { background: #D6FF74; } & .btn-outline { background: var(--surface); border-color: var(--line); } & .btn-outline:hover { border-color: var(--brass-line); color: var(--brass); } /* --- décor --- */ /* Les trois taches de l'aurore étaient des lumières ; elles deviennent des lavis, à peine perceptibles. */ & .aurora { background: radial-gradient(38vw 38vw at 18% 12%, rgba(150, 210, 40, .13), transparent 62%), radial-gradient(42vw 42vw at 82% 8%, rgba(70, 170, 210, .11), transparent 64%), radial-gradient(46vw 46vw at 50% 96%, rgba(150, 110, 220, .07), transparent 66%); } /* Le grain en `overlay` sur du blanc vire au gris sale. */ & .grain { opacity: .16; mix-blend-mode: multiply; } /* Le stade nocturne laisse place à la nappe de lumière claire. Ni masque ni fondu : l'image est déjà presque blanche, elle se raccorde d'elle-même au fond de la page. */ & .stade { background-image: url('/assets/scene/champ-clair.webp'); opacity: 1; -webkit-mask-image: none; mask-image: none; } & .hero-video { display: none; } /* Faisceaux : des voiles de lumière chaude, pas des projecteurs. */ & .beam { background: linear-gradient(180deg, rgba(160, 215, 60, .16), transparent 66%); filter: blur(40px); } & .beam-r { background: linear-gradient(180deg, rgba(70, 175, 215, .14), transparent 66%); } /* La pelouse en perspective : des lignes sombres sur clair. */ & .pitch, & .cta-pitch, & .auth-wrap::before, & .leagues-pitch { background-image: linear-gradient(rgba(60, 110, 20, .16) 1px, transparent 1px), linear-gradient(90deg, rgba(60, 110, 20, .16) 1px, transparent 1px); } & .scan { opacity: .3; } /* --- barres et surfaces --- */ & .nav.compact, & .appbar { background: rgba(255, 255, 255, .82); border-bottom-color: var(--line); box-shadow: 0 10px 30px -26px rgba(18, 26, 10, .8); } & .sport-card, & .price-card, & .proof-card, & .steps li, & .faq details, & .match, & .auth-card, & .preview, & .sheet { background: var(--surface); border-color: var(--line); box-shadow: var(--shadow); } & .sport-card:hover, & .price-card:hover, & .proof-card:hover, & .match:hover { border-color: var(--brass-line); box-shadow: var(--shadow-lg); } /* Les titres : un dégradé qui descend vers le clair rendrait la deuxième ligne illisible. Il monte donc vers le sombre. */ /* `background-image`, surtout pas `background` : la forme courte remet `background-clip` à `border-box`, et le dégradé cesse d'être découpé par le texte pour redevenir un rectangle plein — un pavé noir à la place du titre. */ & .hero h1 .rise > * { background-image: linear-gradient(96deg, #12160E 8%, var(--brass) 46%, #12160E 78%); } & .sec-head h2 { background-image: linear-gradient(180deg, #12160E 40%, #38402E); } & .cta-in h2 { background-image: linear-gradient(180deg, #12160E 35%, #2F5C00); } & .price-amt b { background-image: linear-gradient(180deg, #16161A, #D2102B); } & .steps li > .step-ghost { color: rgba(18, 26, 10, .055); } & .foot-word { background-image: linear-gradient(180deg, rgba(18, 26, 10, .09), transparent 78%); } /* --- bandeau final : un vert très pâle, pas un vert profond --- */ & .cta-band { background: radial-gradient(70% 120% at 50% 0%, rgba(150, 210, 40, .18), transparent 64%), linear-gradient(180deg, #F0F7E6, #E7F2DA); border-top: 1px solid var(--line); } /* La boucle animée s'ajoutait en lumière : sur clair, elle se dépose en teinte. */ & .cta-boucle { mix-blend-mode: multiply; opacity: .3; } & .cta-halo { background: radial-gradient(50% 50% at 50% 50%, rgba(150, 210, 40, .3), transparent 68%); } /* --- écussons et bandes --- */ & .orbit-crest, & .crest-tile { background: var(--surface); border-color: var(--line); box-shadow: var(--shadow); } & .league-item { color: var(--muted); opacity: 1; } & .league-item:hover { color: var(--text); } & .league-mark { border-color: var(--line); background: var(--surface-2); color: var(--text); } & .leagues { background: var(--surface-2); } & .leagues-h { color: var(--text); } & .ticker { background: var(--surface); border-color: var(--line); } & .ticker-flag { background: linear-gradient(90deg, var(--surface) 0%, var(--surface) 58%, color-mix(in srgb, var(--surface) 0%, transparent) 100%); } /* --- panneau d'analyse --- */ & .sheet-overlay { background: rgba(240, 243, 236, .8); } & .sheet-close:hover { color: var(--text); border-color: var(--faint); } /* `scene.css` cale le voile du verrou sur le verre sombre de la fiche. Sur fond clair, ce vert-noir dessinerait une bande sale au bas de la zone floutée : on rend le fondu à la couleur réelle du panneau. */ & .verrou { --verrou-fond: var(--surface); } & .verrou-appel { background: var(--surface); border-color: var(--brass-line); box-shadow: 0 30px 70px -40px rgba(18, 26, 10, .45); } /* --- formulaires --- */ & .field input, & .field select, & .capture input { background: var(--surface); border-color: var(--line); color: var(--text); } & .field input:focus, & .field select:focus, & .capture input:focus { background: var(--surface); border-color: var(--brass-line); box-shadow: 0 0 0 3px var(--brass-soft); } /* --- divers --- */ & .kicker { background: var(--surface); border-color: var(--line); color: var(--muted); } & .rail a { background: var(--surface); border-color: var(--line); color: var(--muted); } & .hero-scroll { background: var(--surface); border-color: var(--line); } & .progress { box-shadow: 0 0 12px rgba(92, 158, 0, .5); } & .match.live { animation: none; border-color: color-mix(in srgb, var(--bad) 45%, var(--line)); } & .step-n { background: var(--brass-soft); border-color: var(--brass-line); color: var(--brass); } & .steps li:hover .step-n { background: var(--brass-fill); color: #16200A; box-shadow: none; } & .price-list li::before { background: var(--brass-soft); border-color: var(--brass-line); color: var(--brass); } & .sport-orb { background: color-mix(in oklab, var(--sc) 12%, white); } /* Les auras des cartes de sport ont leur pendant clair : un lavis très pâle au lieu d'un champ lumineux. `app.js` pose les deux ; c'est ici qu'on choisit celui qui correspond au thème. */ & .sport-card { background-image: var(--aura-clair, none), linear-gradient(168deg, #fff, #fff); } & .mono-badge { color: #fff; } } /* ------------------------------------------------------------------ */ /* Logos de compétition */ /* ------------------------------------------------------------------ */ /* Même gabarit que la pastille de texte qu'ils remplacent : le logo arrive après le premier rendu, et si la boîte changeait de taille en l'accueillant, toute la bande se décalerait sous les yeux du visiteur. */ .league-crest { width: 34px; height: 34px; flex-shrink: 0; display: grid; place-items: center; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; } .league-crest img { width: 24px; height: 24px; object-fit: contain; } /* Dans le tableau de bord, la pastille de compétition porte aussi son logo — en plus petit, devant le nom. */ .league-chip { display: inline-flex; align-items: center; gap: 7px; } .league-chip img { width: 16px; height: 16px; object-fit: contain; flex-shrink: 0; } /* ================================================================== */ /* Signature : barre flottante et sections alternées */ /* ================================================================== */ html:not([data-theme="sombre"]) { /* --- La barre de navigation devient une pastille posée sur la page --- Une barre pleine largeur colle le contenu au bord supérieur ; une pastille flottante laisse voir le fond passer dessous et dessus, ce qui donne tout de suite la profondeur d'une application. */ & .nav { top: 14px; padding-inline: 16px; background: none; border-bottom: none; box-shadow: none; backdrop-filter: none; } & .nav-in { background: rgba(255, 255, 255, .82); backdrop-filter: blur(18px) saturate(1.4); border: 1px solid var(--line); border-radius: 100px; padding: 10px 12px 10px 22px; box-shadow: 0 1px 2px rgba(16, 16, 24, .04), 0 18px 40px -22px rgba(16, 16, 24, .3); transition: box-shadow var(--t) var(--ease), background var(--t) var(--ease); } & .nav.compact .nav-in { background: rgba(255, 255, 255, .94); box-shadow: 0 1px 2px rgba(16, 16, 24, .05), 0 22px 50px -24px rgba(16, 16, 24, .38); } /* --- Alternance clair / noir --- Le rythme d'une page ne vient pas des marges mais des respirations : deux blocs noirs pleine largeur découpent la lecture en trois temps et donnent aux chiffres du palmarès un fond qui les fait ressortir. */ & .sec-noir { background: #0B0B0D; color: #F4F4F6; --text: #F4F4F6; --muted: #9C9FA9; --faint: #6E7079; --surface: #17171A; --surface-2: #1E1E22; --line: #2A2A30; --line-soft: #1F1F24; --ink: #0B0B0D; --brass: #FF3B50; --shadow: 0 18px 50px -22px rgba(0, 0, 0, .8); } /* Les cartes d'une section noire ne peuvent pas rester blanches : elles y feraient des trous de lumière. */ & .sec-noir .proof-card, & .sec-noir .price-card, & .sec-noir .steps li { background: #17171A; border-color: #2A2A30; box-shadow: none; } & .sec-noir .sec-head h2 { color: #F4F4F6; } & .sec-noir .eyebrow { color: #FF3B50; } & .sec-noir .btn-outline { background: #17171A; border-color: #2A2A30; color: #F4F4F6; } /* Le bandeau final reprend le noir, pour fermer sur la même matière. */ & .cta-band { background: #0B0B0D; border-top: none; } & .cta-in h2 { color: #F4F4F6; -webkit-text-fill-color: #F4F4F6; } & .cta-in p { color: #9C9FA9; } } /* ================================================================== */ /* La scène du héros en thème clair */ /* ================================================================== */ /* * Ce bloc a été ajouté après coup : la vidéo de stade et le voile de la * colonne de texte sont arrivés dans `scene.css` alors que ce fichier * existait déjà. Sans lui, le héros restait nocturne sous un thème clair — * titre sombre sur fond sombre, donc illisible. */ html:not([data-theme="sombre"]) { /* Le stade de nuit et sa vidéo n'ont pas d'équivalent clair, et il ne faut pas en chercher un : une photo de stade en plein jour est grise et salit tout ce qu'on pose dessus. On les retire et on met à la place la nappe de lumière claire, calculée pour ça. */ & video.stade, & .stade, & .stade-fixe { display: none; } & .stage { background: url('/assets/scene/champ-clair.webp') center/cover no-repeat; } /* Le voile servait à éteindre l'image derrière le texte. Sur fond clair il n'y a plus rien à éteindre, et un voile noir ferait une tache. */ & .stage::after { background: linear-gradient(96deg, rgba(251, 251, 252, .92) 0%, rgba(251, 251, 252, .70) 34%, rgba(251, 251, 252, .20) 56%, transparent 72%); } /* Projecteurs, pelouse et ligne de balayage sont des lumières : elles n'existent pas sur du blanc. La pelouse survit en trait très pâle, parce qu'elle ancre le bas du héros ; le reste s'efface. */ & .beam, & .scan { display: none; } & .pitch { background-image: linear-gradient(rgba(22, 22, 26, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(22, 22, 26, .07) 1px, transparent 1px); } /* Le titre : noir franc, pas de dégradé. Le dégradé blanc du thème sombre rendait le titre invisible ici — c'est ce qu'on voyait. */ & .hero h1 .rise > * { background: none; -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: var(--text); color: var(--text); animation: leve .95s var(--ease-out) forwards; } /* Les écussons en orbite reposaient sur un verre sombre. */ & .orbit-crest { background: rgba(255, 255, 255, .82); border-color: var(--line); box-shadow: 0 10px 30px -14px rgba(16, 16, 24, .3); } /* La pastille du haut du héros. */ & .kicker { background: rgba(255, 255, 255, .9); border-color: var(--line); color: var(--muted); box-shadow: 0 1px 2px rgba(16, 16, 24, .04); } } /* ================================================================== */ /* La section « aperçu » : un bloc noir au milieu du blanc */ /* ================================================================== */ /* * Elle héritait du fond sombre de la feuille de base, mêlé aux lavis clairs * de la scène : le résultat était un gris verdâtre, et le titre par-dessus * devenait illisible. Plutôt que de la blanchir, on l'assume en noir — c'est * la respiration dont la page a besoin, et la carte blanche qu'elle contient * y gagne tout son relief. */ html:not([data-theme="sombre"]) .sec-dark { background: #0B0B0D; color: #F4F4F6; --text: #F4F4F6; --muted: #9C9FA9; --faint: #6E7079; --line: #2A2A30; --line-soft: #1F1F24; } html:not([data-theme="sombre"]) .sec-dark .sec-head h2 { color: #F4F4F6; } html:not([data-theme="sombre"]) .sec-dark .sec-head p { color: #9C9FA9; } html:not([data-theme="sombre"]) .sec-dark .eyebrow { color: #FF3B50; } /* Le halo lumineux du thème sombre reprend du service ici, puisque le fond est redevenu noir. */ html:not([data-theme="sombre"]) .sec-dark::before { background: radial-gradient(60% 100% at 50% 0, rgba(245, 37, 60, .16), transparent 70%); } /* La carte, elle, reste blanche : c'est le produit qu'on montre. */ html:not([data-theme="sombre"]) .sec-dark .preview { background: #FFFFFF; border-color: rgba(255, 255, 255, .12); --text: #16161A; --muted: #5C5F6B; --faint: #8A8D98; --line: #E4E4E9; --line-soft: #F0F0F3; --surface: #FFFFFF; --surface-2: #F4F4F6; } /* ================================================================== */ /* Bandeau des compétitions, et retour de la vidéo */ /* ================================================================== */ html:not([data-theme="sombre"]) { /* --- La vidéo revient, dans le bandeau final --- Elle est nocturne : sur un fond blanc elle jurerait, sur le bloc noir de fin elle est chez elle. C'est aussi le bon endroit — la dernière image avant le bouton d'inscription. */ & .cta-band { position: relative; overflow: clip; } & .cta-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .40; z-index: 0; -webkit-mask-image: radial-gradient(78% 100% at 50% 50%, #000 20%, transparent 78%); mask-image: radial-gradient(78% 100% at 50% 50%, #000 20%, transparent 78%); } & .cta-in { position: relative; z-index: 2; } /* --- Le héros garde une trace de stade --- Très effacée : assez pour qu'on sente un lieu, assez peu pour qu'un titre noir garde tout son contraste. */ & .stage::before { content: ''; position: absolute; inset: 0; background: url('/assets/scene/stade-jour.webp') center/cover no-repeat; opacity: .16; -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 62%, transparent 92%); mask-image: linear-gradient(180deg, transparent, #000 30%, #000 62%, transparent 92%); animation: travelling 48s ease-in-out infinite alternate; } } @media (prefers-reduced-motion: reduce) { html:not([data-theme="sombre"]) .cta-video { display: none; } html:not([data-theme="sombre"]) .stage::before { animation: none; } } /* ------------------------------------------------------------------ */ /* Les barres se remplissent */ /* ------------------------------------------------------------------ */ /* * L'animation qui manquait le plus, et la seule qui porte du sens : une barre * de probabilité qui se remplit montre qu'un calcul vient d'aboutir. Un * pourcentage posé d'un coup ressemble à une valeur codée en dur. * * Le remplissage passe par `scaleX` et non par `width` : la largeur est * écrite en ligne par le rendu, l'animer demanderait de la reprendre en * JavaScript. `transform` la laisse tranquille et ne coûte rien au * navigateur — pas de recalcul de mise en page, juste une composition. */ .pbar i, .cmp-bar i, .pv-bar i { transform-origin: left center; animation: remplit .85s cubic-bezier(.16, 1, .3, 1) both; } /* Les segments partent l'un après l'autre : la barre se construit de gauche à droite au lieu de se gonfler d'un bloc. */ .pbar i:nth-child(2), .cmp-bar i:nth-child(2), .pv-bar i:nth-child(2) { animation-delay: .10s; } .pbar i:nth-child(3), .cmp-bar i:nth-child(3), .pv-bar i:nth-child(3) { animation-delay: .20s; } @keyframes remplit { from { transform: scaleX(0); } to { transform: scaleX(1); } } @media (prefers-reduced-motion: reduce) { .pbar i, .cmp-bar i, .pv-bar i { animation: none; transform: none; } html:not([data-theme="sombre"]) .stage::before { animation: none; } html:not([data-theme="sombre"]) .beam, html:not([data-theme="sombre"]) .scan { display: none; } } /* ================================================================== */ /* Le bandeau des compétitions, et les portraits */ /* ================================================================== */ html:not([data-theme="sombre"]) { /* --- Bandeau blanc, emblèmes seuls --- Une bande claire posée entre deux sections, où ne défilent que les logos. C'est la forme la plus courte pour dire « voici ce qu'on couvre » : un emblème se reconnaît sans se lire. */ & .leagues { background: #FFFFFF; border-block: 1px solid var(--line); } & .leagues-pitch { display: none; } & .leagues-h { color: var(--text); } & .leagues-marquee { background: none; border: none; padding-block: 6px; /* Les bords s'effacent : la bande n'a ni début ni fin visibles, ce qui est exactement ce qu'on veut d'un défilement continu. */ -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } & .league-item { display: inline-flex; align-items: center; justify-content: center; min-width: 148px; height: 76px; opacity: 1; filter: none; } & .league-item .league-crest img { width: auto; height: 46px; max-width: 110px; object-fit: contain; } /* La pastille de texte prend la place du logo quand il n'arrive pas — ATP, WTA et UFC ne sont pas servis de façon fiable. Elle est dessinée pour tenir la même hauteur, sinon la bande ondulerait. */ & .league-item .league-mark { display: inline-grid; place-items: center; height: 46px; padding: 0 18px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); font: 800 17px/1 var(--display); letter-spacing: .04em; color: var(--text); } & .league-sep { display: none; } /* --- Portrait rond, pour le tennis et le MMA --- */ & .crest-badge.crest-rond, & .crest-badge.crest-rond img { border-radius: 50%; overflow: hidden; } /* Une photo de visage se cadre, elle ne se contient pas : `cover` remplit le disque quitte à rogner, là où `contain` laisserait des bandes. */ & .crest-badge.crest-rond img { object-fit: cover; width: 100%; height: 100%; } } /* ================================================================== */ /* Déclinaisons claires */ /* ================================================================== */ /* * Elles vivent à la FIN de ce fichier, et c'est nécessaire : les jetons du * thème clair sont posés plus haut sous la même spécificité. Une variante * déclarée ailleurs — dans `pronosports.css`, par exemple — serait écrasée par * la charte claire au lieu de la surcharger. Les thèmes nocturnes n'ont pas ce * problème : `data-theme="sombre"` annule tout ce fichier d'un coup. */ /* Sable — encre chaude sur papier. Le registre d'un rapport imprimé plutôt que d'une application : moins de contraste, plus de tenue. */ html:not([data-theme="sombre"]):root[data-variant="sable"] { --ink: #FAF7F1; --surface: #FFFFFF; --surface-2: #F3EFE6; --surface-3: #E9E3D6; --line: #E2DACB; --line-soft: #EFEAE0; --text: #1E1A14; --muted: #6B6153; --faint: #9A8F7D; --brass: #B4451F; --brass-fill: #D4551F; --brass-hi: #E86A32; --brass-soft: rgba(212, 85, 31, .10); --brass-line: rgba(212, 85, 31, .30); --home: #2E7D52; --away: #8C8274; --draw: #D6CEBF; --good: #2E7D52; --warn: #B07A0C; --bad: #B4451F; --foot: #B4451F; --basket: #A66A0C; --tennis: #2E7D52; --nfl: #98452F; --hockey: #2A6D8C; --mma: #6B4B9E; } /* Ardoise — gris froid et bleu d'encre. Le registre d'un outil de travail : rien n'attire l'œil sauf ce qui compte. */ html:not([data-theme="sombre"]):root[data-variant="ardoise"] { --ink: #F5F7FA; --surface: #FFFFFF; --surface-2: #EDF1F6; --surface-3: #E1E7EF; --line: #DCE3EC; --line-soft: #EBEFF5; --text: #12171F; --muted: #56606E; --faint: #8A94A3; --brass: #1F5FBF; --brass-fill: #2670D8; --brass-hi: #3D86EC; --brass-soft: rgba(38, 112, 216, .10); --brass-line: rgba(38, 112, 216, .30); --home: #0E7C66; --away: #77828F; --draw: #CFD7E1; --good: #0E7C66; --warn: #9A6B00; --bad: #C0392B; --foot: #1F5FBF; --basket: #9A6B00; --tennis: #0E7C66; --nfl: #B4523A; --hockey: #2A7FA8; --mma: #6D4BA8; } /* Le bandeau des disciplines, en clair : papier plutôt que verre. */ html:not([data-theme="sombre"]) .sportband-tuile { background: #FFFFFF; border-color: var(--line); border-left: 3px solid var(--sc, var(--brass)); box-shadow: var(--shadow); }