/* ========================================================================== css/jour.css — LE MODE JOUR -------------------------------------------------------------------------- POURQUOI CE FICHIER EXISTE Le bouton « thème clair » existait, mais le thème, lui, n'existait plus. styles.css le définissait du temps de l'ancienne peau ; trois couches sont arrivées depuis — systeme.css, identite.css, liquide.css — et toutes ont peint du noir en dur, aux deux thèmes. Basculer en jour donnait donc un hybride : le fond restait noir, mais styles.css passait les titres et `.text-white` à l'encre NOIRE. Titres invisibles, listes déroulantes blanches sur blanc, boutons principaux noirs sur noir. ON NE RÉÉCRIT PAS LES COUCHES, ON LES RETOURNE. Les trois peaux tiennent presque tout par leurs variables (--i-*, --l-*, --sol, --surface-*…). La section 1 les redéfinit pour le jour : c'est elle qui fait l'essentiel du travail. Le reste du fichier ne rattrape que ce qui a été écrit EN DUR — un #000, un rgba(255, 255, 255, …) — relevé règle par règle dans les trois fichiers. L'IDENTITÉ NE CHANGE PAS, ELLE S'INVERSE. • le sol devient un blanc à peine gris — sur du blanc pur, une carte blanche n'a plus de bord • l'encre devient noire — et l'action principale, qui était un aplat blanc, devient un aplat noir • le verre devient du verre dépoli — blanc laiteux, arête claire en haut, ombre douce en bas • le tricolore reste — sa bande blanche passe au gris clair, sinon elle disparaît ⚠️ TOUT EST SOUS `html[data-theme="light"]`, sauf la section 0 — une ligne, l'icône du bouton de thème. Le mode nuit ne lit rien d'autre de ce fichier. Le préfixe pèse (0,1,1) : c'est ce qui lui permet de passer devant les `!important` des couches précédentes, qui pèsent (0,1,0), sans avoir à les récrire. ⚠️ CHARGÉ EN DERNIER, APRÈS liquide.css. Comme mobile.css et liquide.css, il ne touche à AUCUNE mesure : rien que de la couleur, de l'ombre et de la lumière. Le thème choisi est relu AVANT la première peinture (script en tête d'index.html) : sans ça, l'app s'ouvrait en noir à chaque lancement et le choix ne tenait que jusqu'au rechargement. ========================================================================== */ /* -------------------------------------------------------------------------- 0. LE BOUTON DE THÈME MONTRE OÙ IL MÈNE -------------------------------------------------------------------------- Il porte les deux icônes. En nuit, le soleil : on passe en jour. En jour, la lune. Avant, la lune restait affichée dans les deux thèmes, et rien à l'écran ne disait lequel était actif. -------------------------------------------------------------------------- */ [data-icone-theme="nuit"] { display: none; } html[data-theme="light"] [data-icone-theme="jour"] { display: none; } html[data-theme="light"] [data-icone-theme="nuit"] { display: block; } /* -------------------------------------------------------------------------- 1. LES VALEURS -------------------------------------------------------------------------- Les contrastes sont mesurés sur le sol (#F3F3F5), qui est le pire cas — une carte blanche les améliore toujours : encre #0B0B0D 17,7:1 encre-2 #45454D 8,6:1 texte secondaire encre-3 #64646E 5,3:1 labels, unités — au-dessus de 4,5:1 rouge #C8231E 5,1:1 le rouge de nuit (#E5322D) tombait à 3,9:1 bleu #1D4ED8 6,1:1 -------------------------------------------------------------------------- */ html[data-theme="light"] { color-scheme: light; /* --- identite.css ---------------------------------------------------- */ --i-sol: #F3F3F5; --i-surface: #FFFFFF; --i-creux: #FFFFFF; --i-trait: #E4E4E8; --i-trait-fort: #C8C8CF; --i-encre: #0B0B0D; --i-encre-2: #45454D; --i-encre-3: #64646E; --i-rouge: #C8231E; --i-rouge-sourd:#F2B8B5; /* une bordure d'alerte : un rouge qu'on voit sans qu'il crie */ --i-bleu: #2563EB; --i-bleu-texte: #1D4ED8; --i-bleu-sourd: #BFD3FB; --i-tricolore: linear-gradient(to right, var(--i-bleu) 0 33.33%, #D6D6DC 33.33% 66.66%, var(--i-rouge) 66.66% 100%); /* --- systeme.css ----------------------------------------------------- */ --sol: #F3F3F5; --surface-1: #FFFFFF; --surface-2: #F7F7F9; --trait: #E4E4E8; --trait-fort: #C8C8CF; --controle: #ECECEF; --plein: #0B0B0D; /* --- styles.css ------------------------------------------------------ */ --color-bg-main: #F3F3F5; --color-bg-nav: rgba(255, 255, 255, 0.9); --color-bg-card: #FFFFFF; --color-bg-input: #FFFFFF; --color-border: #E4E4E8; --color-text-main: #0B0B0D; /* Gris neutre : l'ancien #64748b était un gris BLEU, le seul de l'app, et il donnait aux paragraphes une teinte de lien. */ --color-text-muted: #45454D; --color-accent-emerald: #0B0B0D; --color-accent-blue: #1D4ED8; /* --- liquide.css ---------------------------------------------------- Le verre de nuit est un BLANC transparent posé sur du noir. Le verre de jour est l'inverse exact : un blanc presque opaque posé sur un sol gris très clair — c'est l'écart entre les deux qui dessine la carte, et l'ombre qui la décolle. */ --l-verre-1: rgba(255, 255, 255, 0.82); /* une carte */ --l-verre-2: rgba(240, 240, 244, 0.85); /* un creux dans la carte */ --l-verre-3: rgba(12, 12, 20, 0.055); /* un contrôle posé sur la carte */ --l-arete: rgba(255, 255, 255, 0.95); --l-arete-fine: rgba(12, 12, 20, 0.09); --l-fond-arete: rgba(12, 12, 20, 0.05); --l-ombre: 0 10px 28px -16px rgba(20, 20, 45, 0.30); --l-ombre-haute:0 24px 60px -22px rgba(20, 20, 45, 0.40); /* La lumière de la marque, en aquarelle : sur un fond clair, la même intensité qu'en nuit ferait une tache. */ --l-lueur-bleue: rgba(37, 99, 235, 0.10); --l-lueur-rouge: rgba(229, 50, 45, 0.07); --l-lueur-blanche: rgba(255, 255, 255, 0.70); } /* -------------------------------------------------------------------------- 2. LE SOL ET LES VOILES -------------------------------------------------------------------------- */ /* liquide.css pose `html { background-color: #000 }` : c'est la peinture du qui fait le fond de la page, le étant transparent. */ html[data-theme="light"] { background-color: var(--i-sol) !important; } /* Les écrans pleins — connexion, questionnaire d'arrivée, détail de séance — ne sont pas du verre : ils REMPLACENT l'app. Ils prennent le sol. */ html[data-theme="light"] :is(.bg-black, #auth-screen, .fixed.inset-0.bg-zinc-950, .fixed.inset-0.bg-zinc-900) { background-color: var(--i-sol) !important; } html[data-theme="light"] #auth-screen { background-image: radial-gradient(48% 32% at 14% 4%, rgba(37, 99, 235, 0.13), transparent 70%), radial-gradient(52% 34% at 90% 72%, rgba(229, 50, 45, 0.08), transparent 72%), radial-gradient(60% 40% at 50% 42%, rgba(255, 255, 255, 0.60), transparent 70%); } /* Un voile de modale assombrit ce qui est derrière — en jour aussi, mais sans éteindre l'écran : à 80 % de noir, une app claire devient une app sombre le temps d'une question. */ html[data-theme="light"] :is( .fixed.inset-0.bg-black\/95, .fixed.inset-0.bg-black\/90, .fixed.inset-0.bg-black\/85, .fixed.inset-0.bg-black\/80, .fixed.inset-0.bg-black\/70, .fixed.inset-0.bg-black\/60) { background-color: rgba(24, 24, 32, 0.42) !important; } /* Les fines ombres portées DANS une carte (une pastille posée sur une photo, un encart) : en noir à 20 %, elles faisaient des trous gris. */ html[data-theme="light"] :is(.bg-black\/20, .bg-black\/25) { background-color: rgba(12, 12, 20, 0.05) !important; } /* Le verrou premium floute l'exemple et le recouvre d'un voile : un voile noir sur une app claire ressemble à une panne d'écran. */ html[data-theme="light"] .sl-voile { background: radial-gradient(120% 70% at 50% 30%, rgba(243, 243, 245, 0.10), rgba(243, 243, 245, 0.70)); } /* -------------------------------------------------------------------------- 3. LE VERRE -------------------------------------------------------------------------- Les couleurs passent par les variables. Restent les ombres écrites en dur pour la nuit : des noirs à 55 %, 60 %, 90 %. Sur un fond clair elles salissent, il faut les adoucir une à une. -------------------------------------------------------------------------- */ /* Le creux : une ombre intérieure à peine marquée suffit à l'enfoncer. */ html[data-theme="light"] :is(.bg-zinc-950, .bg-zinc-950\/30, .bg-zinc-950\/40, .bg-zinc-950\/50, .bg-zinc-950\/80) { box-shadow: inset 0 1px 2px 0 rgba(12, 12, 20, 0.07), inset 0 -1px 0 0 var(--l-arete) !important; } /* Le contrôle : posé sur la carte, il garde une arête claire et une ombre courte. */ html[data-theme="light"] :is(.bg-zinc-600, .bg-zinc-700, .bg-zinc-800) { box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.7), 0 1px 3px -1px rgba(12, 12, 20, 0.18) !important; } /* Les champs. */ html[data-theme="light"] :is( input:not([type="range"]):not([type="checkbox"]):not([type="radio"]), select, textarea) { background-color: #FFFFFF !important; border-color: var(--i-trait-fort) !important; box-shadow: inset 0 1px 2px 0 rgba(12, 12, 20, 0.06) !important; } html[data-theme="light"] :is(input, select, textarea):focus { border-color: rgba(11, 11, 13, 0.55) !important; box-shadow: inset 0 1px 2px 0 rgba(12, 12, 20, 0.06), 0 0 0 4px rgba(11, 11, 13, 0.07) !important; } /* La liste déroulante, dessinée par le système : en jour, elle s'ouvre en clair, avec l'encre du champ. */ html[data-theme="light"] select { color-scheme: light; } /* Le reflet sous le doigt : une lumière blanche ne se voit pas sur du blanc. En jour, l'appui se marque par une ombre légère au même endroit. */ html[data-theme="light"] :is(button, [role="button"], [onclick], .pro-card, .exo-block) { background-image: radial-gradient( circle 120px at var(--l-x, 50%) var(--l-y, 50%), rgb(12 12 20 / calc(var(--l-eclat) * 6%)), transparent 100% ) !important; } /* Les surfaces de signal (rouge, orange, ambre pleins) gardent leur arête, avec une ombre de jour. */ html[data-theme="light"] :is(.bg-red-500, .bg-red-600, .bg-orange-500, .bg-amber-400, .bg-amber-500, .bg-amber-600) { box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.30), 0 6px 16px -10px rgba(12, 12, 20, 0.45) !important; } /* Les feuilles de modale. */ html[data-theme="light"] :is(.fixed.inset-0 > .bg-zinc-900, .fixed.inset-0 > .bg-zinc-950, .fixed.inset-0 > div > .bg-zinc-900) { background-color: #FFFFFF !important; } /* -------------------------------------------------------------------------- 4. L'ACTION PRINCIPALE DEVIENT UN APLAT NOIR -------------------------------------------------------------------------- En nuit, l'action principale est blanche sur noir — identite.css y ramène même toutes les surfaces émeraude. En jour, c'est le négatif : noire, texte blanc. Les trois façons d'écrire un bouton plein doivent donner le même objet, comme en nuit (voir liquide.css, section 6). Les petits repères pleins — un point, un segment de progression, le curseur d'un interrupteur — suivent la même règle : en nuit ils sont à l'encre blanche, en jour à l'encre noire. -------------------------------------------------------------------------- */ html[data-theme="light"] :is(.bg-white, .bg-zinc-100, .bg-emerald-400, .bg-emerald-500, .bg-emerald-600, .bg-emerald-500\/10, .bg-emerald-500\/20, .bg-emerald-600\/20) { background-color: var(--i-encre) !important; border-color: var(--i-encre) !important; background-image: radial-gradient( circle 100px at var(--l-x, 50%) var(--l-y, 50%), rgb(255 255 255 / calc(var(--l-eclat) * 22%)), transparent 100% ), linear-gradient( to bottom, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 55% ) !important; box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.22), 0 8px 20px -10px rgba(12, 12, 20, 0.55) !important; } html[data-theme="light"] :is(.bg-white, .bg-zinc-100, .bg-emerald-400, .bg-emerald-500, .bg-emerald-600, .bg-emerald-500\/10, .bg-emerald-500\/20, .bg-emerald-600\/20):active { box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.22), 0 3px 8px -5px rgba(12, 12, 20, 0.55) !important; } /* DEUX BLANCS QUI DOIVENT RESTER BLANCS. Le fond d'un QR code — un lecteur ne décode pas un QR code inversé — et le cadre du logo d'une salle, dessiné pour être posé sur du blanc. */ html[data-theme="light"] :is(.bg-white[data-qr], .bg-white:has(> img)) { background-color: #FFFFFF !important; background-image: none !important; border-color: var(--i-trait) !important; box-shadow: inset 0 0 0 1px var(--i-trait) !important; } html[data-theme="light"] .bg-white[data-qr] * { color: var(--i-encre-2) !important; } html[data-theme="light"] :is(button.bg-emerald-600, button.bg-emerald-500, .bg-emerald-600, .bg-emerald-500, .bg-white, .bg-zinc-100):hover { background-color: #2A2A30 !important; } /* Les demi-teintes de blanc : un repère posé sur une photo, une jauge. */ html[data-theme="light"] .bg-white\/50 { background-color: rgba(11, 11, 13, 0.45) !important; } html[data-theme="light"] .bg-white\/60 { background-color: rgba(11, 11, 13, 0.55) !important; } /* -------------------------------------------------------------------------- 5. L'ENCRE -------------------------------------------------------------------------- Les nuances de texte prévues pour un fond noir — zinc-100 à 300, les couleurs en 300 et 400 — sont des teintes CLAIRES. Sur du blanc, elles tombent sous 2:1. On les ramène à leur équivalent foncé : même famille, même sens, lisible. -------------------------------------------------------------------------- */ html[data-theme="light"] :is(.text-white, .text-zinc-100, .text-zinc-200) { color: var(--i-encre) !important; } html[data-theme="light"] :is(.text-zinc-300, .text-white\/80, .text-white\/70) { color: var(--i-encre-2) !important; } html[data-theme="light"] .text-white\/60 { color: var(--i-encre-3) !important; } /* Les survols qui « allumaient » un texte en blanc l'allument en noir. */ html[data-theme="light"] :is(.hover\:text-white:hover, .group:hover .group-hover\:text-white, .hover\:text-zinc-300:hover) { color: var(--i-encre) !important; } html[data-theme="light"] :is(.text-blue-300, .text-blue-400, .text-blue-500) { color: var(--i-bleu-texte) !important; } html[data-theme="light"] :is(.text-orange-300, .text-orange-400, .text-orange-500) { color: #C2410C !important; } html[data-theme="light"] .text-orange-500\/50 { color: rgba(194, 65, 12, 0.6) !important; } html[data-theme="light"] :is(.text-purple-300, .text-purple-400, .text-purple-500) { color: #7E22CE !important; } html[data-theme="light"] :is(.text-indigo-300, .text-indigo-400, .text-indigo-500) { color: #4338CA !important; } html[data-theme="light"] :is(.text-teal-300, .text-teal-400, .text-teal-500) { color: #0F766E !important; } html[data-theme="light"] :is(.text-green-300, .text-green-400, .text-green-500) { color: #15803D !important; } html[data-theme="light"] .text-red-300 { color: var(--i-rouge) !important; } html[data-theme="light"] .hover\:text-red-300:hover { color: #A51C18 !important; } /* L'aplat d'ambre (« Premium », une alerte douce) porte du texte noir : il reste lisible tel quel. Mais l'ambre en TEXTE était une teinte claire, déjà ramenée à l'encre par identite.css — rien à faire. */ /* --- L'ENCRE DES PLEINS PASSE APRÈS L'ENCRE GÉNÉRALE ------------------- Même piège que dans identite.css, section 3 : un bouton plein porte souvent `text-white` en plus de son fond. À poids égal, c'est la dernière règle écrite qui gagne — la règle des pleins doit donc venir APRÈS celle qui ramène `.text-white` à l'encre, sinon « Choisir une séance » s'écrit en noir sur son aplat noir. */ /* Le texte d'un plein, et tout ce qu'il contient. identite.css le force au noir (`.bg-emerald-600 * { color: #000 }`) et styles.css au fond de page : les deux donneraient du noir sur noir. */ html[data-theme="light"] :is(.bg-white, .bg-zinc-100, .bg-emerald-400, .bg-emerald-500, .bg-emerald-600, .bg-emerald-500\/10, .bg-emerald-500\/20, .bg-emerald-600\/20), html[data-theme="light"] :is(.bg-white, .bg-zinc-100, .bg-emerald-400, .bg-emerald-500, .bg-emerald-600, .bg-emerald-500\/10, .bg-emerald-500\/20, .bg-emerald-600\/20) * { color: #FFFFFF !important; } /* Le texte secondaire d'un plein — le sous-titre d'une option choisie — reste en retrait, en blanc atténué. */ html[data-theme="light"] :is(.bg-white, .bg-zinc-100, .bg-emerald-400, .bg-emerald-500, .bg-emerald-600, .bg-emerald-500\/10, .bg-emerald-500\/20, .bg-emerald-600\/20) :is(.text-zinc-500, .text-zinc-600, .text-zinc-700) { color: rgba(255, 255, 255, 0.72) !important; } /* Les pleins de couleur — rouge de suppression, bleu, orange — gardent leur texte blanc. styles.css passe `.text-white` à l'encre du thème, ce qui est juste partout sauf ici. */ html[data-theme="light"] :is(.bg-red-500, .bg-red-600, .bg-blue-500, .bg-blue-600, .bg-orange-500, .bg-orange-600, .bg-green-500, .bg-green-600, .bg-indigo-500, .bg-indigo-600, .bg-purple-500, .bg-purple-600, .bg-teal-500, .bg-teal-600).text-white, html[data-theme="light"] :is(.bg-red-500, .bg-red-600, .bg-blue-500, .bg-blue-600, .bg-orange-500, .bg-orange-600, .bg-green-500, .bg-green-600, .bg-indigo-500, .bg-indigo-600, .bg-purple-500, .bg-purple-600, .bg-teal-500, .bg-teal-600) .text-white { color: #FFFFFF !important; } /* -------------------------------------------------------------------------- 6. LES TRAITS -------------------------------------------------------------------------- */ /* Un trait blanc marquait une sélection (la réponse choisie, le jour courant) : en jour, c'est un trait d'encre. */ html[data-theme="light"] :is(.border-white, .focus\:border-white:focus, .hover\:border-white:hover) { border-color: var(--i-encre) !important; } html[data-theme="light"] .border-white\/10 { border-color: rgba(12, 12, 20, 0.08) !important; } html[data-theme="light"] .border-white\/20 { border-color: rgba(12, 12, 20, 0.14) !important; } html[data-theme="light"] .ring-white\/40 { --tw-ring-color: rgba(11, 11, 13, 0.35); } html[data-theme="light"] .ring-white\/60 { --tw-ring-color: rgba(11, 11, 13, 0.5); } /* Les bordures de teinte foncée (900) faisaient des cadres sourds sur le noir ; sur le blanc, ce sont des traits lourds. Même teinte, en clair. */ html[data-theme="light"] :is(.border-red-900\/40, .border-red-900\/50) { border-color: var(--i-rouge-sourd) !important; } html[data-theme="light"] :is(.border-orange-900\/40, .border-orange-900\/50) { border-color: #F5C9A8 !important; } html[data-theme="light"] .border-blue-900\/40 { border-color: var(--i-bleu-sourd) !important; } html[data-theme="light"] .border-purple-900\/40 { border-color: #DCC4F5 !important; } html[data-theme="light"] :is(.border-emerald-900\/40, .border-emerald-900\/50) { border-color: var(--i-trait-fort) !important; } /* Les traits que systeme.css n'a jamais redirigés — la colonne de la liste des clients sur ordinateur, quelques séparations. En nuit, ce sont des gris presque noirs qui se fondent ; en jour, des traits noirs. */ html[data-theme="light"] :is(.border-zinc-900, .border-zinc-700\/30, .md\:border-zinc-800, .md\:border-zinc-800\/50) { border-color: var(--i-trait) !important; } html[data-theme="light"] .divide-zinc-800 > :not([hidden]) ~ :not([hidden]) { border-color: var(--i-trait) !important; } /* -------------------------------------------------------------------------- 7. CE QUI FLOTTE : BARRE, EN-TÊTE, CHRONO, MESSAGE -------------------------------------------------------------------------- Même logique qu'en nuit — presque opaque sans flou, plus ouvert là où le flou existe —, avec du blanc à la place du noir. -------------------------------------------------------------------------- */ html[data-theme="light"] :is(nav, header, .bg-zinc-950\/95, .bg-zinc-900\/95, .bg-zinc-950\/90) { background-color: rgba(250, 250, 251, 0.96) !important; } @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { html[data-theme="light"] :is(nav, header) { background-color: rgba(250, 250, 251, 0.74) !important; } html[data-theme="light"] :is(.bg-zinc-950\/95, .bg-zinc-900\/95, .bg-zinc-950\/90) { background-color: rgba(250, 250, 251, 0.78) !important; } } @media (max-width: 767px) { html[data-theme="light"] nav { box-shadow: inset 0 1px 0 0 var(--l-arete-fine), 0 -14px 36px -24px rgba(20, 20, 45, 0.35); } } /* La pastille qui glisse sous l'onglet ouvert : en nuit, une lueur blanche la soulève ; en jour, une ombre. */ html[data-theme="light"][data-liquide] .l-pastille { background-color: rgba(12, 12, 20, 0.06); box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.8), 0 4px 12px -8px rgba(12, 12, 20, 0.35); } html[data-theme="light"] #floating-timer { background-color: rgba(255, 255, 255, 0.97) !important; } html[data-theme="light"] #toast-container > div { background-color: #FFFFFF !important; } @media (prefers-reduced-motion: reduce) { html[data-theme="light"] :is(nav, header, .bg-zinc-950\/95, .bg-zinc-900\/95, .bg-zinc-950\/90, #toast-container > div) { background-color: rgba(250, 250, 251, 0.97) !important; } } @media (prefers-reduced-data: reduce) { html[data-theme="light"] :is(nav, header, .bg-zinc-950\/95, .bg-zinc-900\/95, .bg-zinc-950\/90) { background-color: rgba(250, 250, 251, 0.97) !important; } } /* -------------------------------------------------------------------------- 8. LES JAUGES -------------------------------------------------------------------------- Le rail va du bleu au rouge en passant par le blanc : sur un fond clair, le milieu du rail disparaissait et la jauge se lisait en deux morceaux. -------------------------------------------------------------------------- */ html[data-theme="light"] input[type="range"]::-webkit-slider-runnable-track { background: linear-gradient(to right, var(--i-bleu) 0%, #D6D6DC 50%, var(--i-rouge) 100%); } html[data-theme="light"] input[type="range"]::-moz-range-track { background: linear-gradient(to right, var(--i-bleu) 0%, #D6D6DC 50%, var(--i-rouge) 100%); } /* Le curseur : un carré d'encre cerclé de blanc. */ html[data-theme="light"] input[type="range"]::-webkit-slider-thumb { border-color: #FFFFFF; } html[data-theme="light"] input[type="range"]::-moz-range-thumb { border-color: #FFFFFF; } /* -------------------------------------------------------------------------- 9. LA CÉLÉBRATION -------------------------------------------------------------------------- L'écran de fin de séance reste plein — rien ne doit traverser — mais prend le sol du jour, et son chiffre passe à l'encre. -------------------------------------------------------------------------- */ html[data-theme="light"] #volume-celebration-modal { background-color: var(--i-sol) !important; } html[data-theme="light"] #volume-celebration-modal::before { background: radial-gradient(60% 40% at 50% 0%, rgba(37, 99, 235, 0.14), transparent 70%), radial-gradient(70% 45% at 50% 100%, rgba(229, 50, 45, 0.09), transparent 72%); } html[data-theme="light"] #volume-celebration-modal [data-chiffre] { background-image: linear-gradient( 100deg, #0B0B0D 0%, #0B0B0D 40%, rgba(11, 11, 13, 0.45) 50%, #0B0B0D 60%, #0B0B0D 100% ); } @media (prefers-reduced-motion: reduce) { html[data-theme="light"] #volume-celebration-modal [data-chiffre] { -webkit-text-fill-color: #0B0B0D; } }