/* ========================================================================== linkinfo — Thème sombre -------------------------------------------------------------------------- Le site est construit avec les utilitaires Tailwind (CDN) en palette claire. Plutôt que d'ajouter une variante `dark:` sur chaque classe des ~45 gabarits, ce fichier redéfinit les utilitaires de couleur lorsque porte la classe `.dark`. Les règles utilisent `!important` : l'ordre d'injection de la feuille générée par le CDN Tailwind n'est pas garanti. Les blocs volontairement sombres en thème clair (héro, encart CTA) portent la classe `.theme-fixed` et sont réaffirmés en fin de fichier. ========================================================================== */ :root { /* Palette sombre : neutres teintés bleu marine, accordés à la charte */ --li-bg: #0b1220; /* fond de page */ --li-surface: #131d30; /* cartes opaques */ --li-surface-alt: #0f1727; /* bandeaux, en-têtes */ --li-field: #121b2c; /* champs de formulaire */ --li-border: #232e46; /* bordures standard */ --li-border-strong: #2c3853; /* bordures marquées */ --li-text: #eef3fa; /* texte principal */ --li-text-2: #dfe7f2; --li-text-3: #c2cddc; --li-text-4: #a3aec0; --li-text-5: #8894a6; /* texte secondaire / méta */ --li-text-6: #717d90; --li-text-7: #5d6879; /* texte très discret */ --li-brand: #4fb8ff; /* bleu de marque éclairci */ } /* Surface de page partagée (remplace les styles inline #e4e4e7) */ .page-surface { background-color: #e4e4e7; } html.dark .page-surface { background-color: var(--li-bg); } /* -------------------------------------------------------------------------- 1. Base -------------------------------------------------------------------------- */ html.dark { color-scheme: dark; } html.dark body { background-color: var(--li-bg); color: var(--li-text); } html.dark ::selection { background: rgba(79, 184, 255, .28); } html.dark ::-webkit-scrollbar { width: 12px; height: 12px; } html.dark ::-webkit-scrollbar-track { background: var(--li-surface-alt); } html.dark ::-webkit-scrollbar-thumb { background: #2a3752; border-radius: 8px; border: 3px solid var(--li-surface-alt); } html.dark ::-webkit-scrollbar-thumb:hover { background: #3a4a6b; } /* -------------------------------------------------------------------------- 2. Fonds neutres -------------------------------------------------------------------------- */ html.dark .bg-white { background-color: var(--li-surface) !important; } html.dark .bg-white\/70 { background-color: rgba(255,255,255,.060) !important; } html.dark .bg-white\/60 { background-color: rgba(255,255,255,.050) !important; } html.dark .bg-white\/50 { background-color: rgba(255,255,255,.045) !important; } html.dark .bg-white\/40 { background-color: rgba(255,255,255,.040) !important; } html.dark .bg-white\/30 { background-color: rgba(255,255,255,.032) !important; } html.dark .bg-white\/20 { background-color: rgba(255,255,255,.022) !important; } html.dark .bg-white\/10 { background-color: rgba(255,255,255,.014) !important; } html.dark .hover\:bg-white\/70:hover { background-color: rgba(255,255,255,.075) !important; } html.dark .hover\:bg-white\/60:hover { background-color: rgba(255,255,255,.065) !important; } html.dark .hover\:bg-white\/50:hover { background-color: rgba(255,255,255,.055) !important; } html.dark .hover\:bg-white\/40:hover { background-color: rgba(255,255,255,.048) !important; } html.dark .bg-zinc-50 { background-color: var(--li-field) !important; } html.dark .bg-zinc-50\/60 { background-color: rgba(255,255,255,.035) !important; } html.dark .hover\:bg-zinc-50:hover { background-color: rgba(255,255,255,.055) !important; } html.dark .bg-zinc-100 { background-color: var(--li-surface-alt) !important; } html.dark .bg-zinc-100\/80 { background-color: rgba(15,23,39,.80) !important; } html.dark .bg-zinc-100\/85 { background-color: rgba(11,18,32,.82) !important; } html.dark .bg-zinc-100\/95 { background-color: rgba(15,23,39,.96) !important; } html.dark .bg-zinc-200 { background-color: #232e46 !important; } html.dark .bg-zinc-300 { background-color: #3a4761 !important; } html.dark .bg-zinc-400 { background-color: #4d5b78 !important; } /* Dégradé de section clair (accueil) */ html.dark .bg-gradient-to-b.from-white.to-zinc-100 { background-image: linear-gradient(to bottom, #0d1526, var(--li-bg)) !important; } /* Les vignettes de logos clients gardent leur fond blanc : les logos importés sont majoritairement sombres. */ html.dark img.bg-white { background-color: #fff !important; } /* -------------------------------------------------------------------------- 3. Textes neutres -------------------------------------------------------------------------- */ html.dark .text-zinc-900 { color: var(--li-text) !important; } html.dark .text-zinc-800 { color: var(--li-text-2) !important; } html.dark .text-zinc-700 { color: var(--li-text-3) !important; } html.dark .text-zinc-600 { color: var(--li-text-4) !important; } html.dark .text-zinc-500 { color: var(--li-text-5) !important; } html.dark .text-zinc-400 { color: var(--li-text-6) !important; } html.dark .text-zinc-300 { color: var(--li-text-7) !important; } html.dark .text-zinc-300\/50 { color: rgba(93,104,121,.55) !important; } html.dark .hover\:text-zinc-900:hover { color: var(--li-text) !important; } html.dark .placeholder-zinc-400::placeholder, html.dark .placeholder\:text-zinc-400::placeholder { color: #6b7688 !important; } /* -------------------------------------------------------------------------- 4. Bordures, séparateurs, anneaux -------------------------------------------------------------------------- */ html.dark .border-zinc-200 { border-color: var(--li-border) !important; } html.dark .border-zinc-200\/60 { border-color: rgba(35,46,70,.75) !important; } html.dark .border-zinc-300 { border-color: var(--li-border-strong) !important; } html.dark .border-zinc-400 { border-color: #3a4864 !important; } html.dark .divide-zinc-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--li-border) !important; } html.dark .divide-zinc-100 > :not([hidden]) ~ :not([hidden]) { border-color: #1e2840 !important; } html.dark .ring-zinc-100 { --tw-ring-color: var(--li-surface-alt) !important; } /* -------------------------------------------------------------------------- 5. Couleur de marque -------------------------------------------------------------------------- */ html.dark .text-brand { color: var(--li-brand) !important; } html.dark .hover\:text-brand:hover { color: #7ccbff !important; } html.dark .hover\:text-brand-navy:hover { color: #9ed6ff !important; } html.dark .bg-brand\/5 { background-color: rgba(79,184,255,.07) !important; } html.dark .bg-brand\/10 { background-color: rgba(79,184,255,.13) !important; } html.dark .bg-brand\/15 { background-color: rgba(79,184,255,.17) !important; } html.dark .bg-brand\/20 { background-color: rgba(79,184,255,.22) !important; } html.dark .border-brand\/30 { border-color: rgba(79,184,255,.38) !important; } html.dark .border-brand\/40 { border-color: rgba(79,184,255,.45) !important; } html.dark .border-brand\/50 { border-color: rgba(79,184,255,.55) !important; } html.dark .border-brand\/60 { border-color: rgba(79,184,255,.62) !important; } html.dark .hover\:border-brand\/40:hover { border-color: rgba(79,184,255,.5) !important; } html.dark .hover\:border-brand\/60:hover { border-color: rgba(79,184,255,.68) !important; } html.dark .ring-brand\/20 { --tw-ring-color: rgba(79,184,255,.28) !important; } /* -------------------------------------------------------------------------- 6. Teintes de statut (pastilles, encarts, colonnes kanban) fonds -50/-100 → aplats translucides textes -600..-900 → tons clairs bordures -200/-300 → translucides -------------------------------------------------------------------------- */ /* — cyan (clients, contrats, factures) */ html.dark .bg-cyan-50, html.dark .bg-cyan-50\/40 { background-color: rgba(34,211,238,.07) !important; } html.dark .bg-cyan-100 { background-color: rgba(34,211,238,.15) !important; } html.dark .bg-cyan-500\/10 { background-color: rgba(34,211,238,.13) !important; } html.dark .hover\:bg-cyan-200:hover, html.dark .hover\:bg-cyan-500\/10:hover { background-color: rgba(34,211,238,.22) !important; } html.dark .hover\:bg-cyan-50:hover { background-color: rgba(34,211,238,.12) !important; } html.dark .text-cyan-600 { color: #4fd7ee !important; } html.dark .text-cyan-700 { color: #67e8f9 !important; } html.dark .text-cyan-800 { color: #8ff0fb !important; } html.dark .text-cyan-900 { color: #b6f5fd !important; } html.dark .hover\:text-cyan-800:hover, html.dark .hover\:text-cyan-900:hover { color: #cffafe !important; } html.dark .border-cyan-200 { border-color: rgba(34,211,238,.28) !important; } html.dark .border-cyan-300 { border-color: rgba(34,211,238,.38) !important; } html.dark .border-cyan-400 { border-color: rgba(34,211,238,.5) !important; } html.dark .ring-cyan-100 { --tw-ring-color: rgba(34,211,238,.3) !important; } html.dark .divide-cyan-200\/70 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(34,211,238,.22) !important; } /* — violet / purple / fuchsia (prospects) */ html.dark .bg-violet-50, html.dark .bg-violet-50\/40 { background-color: rgba(167,139,250,.08) !important; } html.dark .bg-violet-100 { background-color: rgba(167,139,250,.17) !important; } html.dark .bg-violet-400\/15 { background-color: rgba(167,139,250,.14) !important; } html.dark .bg-violet-400\/20 { background-color: rgba(167,139,250,.20) !important; } html.dark .hover\:bg-violet-200:hover, html.dark .hover\:bg-violet-400\/15:hover { background-color: rgba(167,139,250,.24) !important; } html.dark .hover\:bg-violet-50:hover { background-color: rgba(167,139,250,.13) !important; } html.dark .text-violet-400 { color: #c4b5fd !important; } html.dark .text-violet-500 { color: #b8a5fc !important; } html.dark .text-violet-600 { color: #b9a6fd !important; } html.dark .text-violet-700 { color: #c9bcfe !important; } html.dark .text-violet-800 { color: #d9d0fe !important; } html.dark .text-violet-900 { color: #e7e1ff !important; } html.dark .hover\:text-violet-800:hover { color: #ede9fe !important; } html.dark .border-violet-200 { border-color: rgba(167,139,250,.28) !important; } html.dark .border-violet-300 { border-color: rgba(167,139,250,.38) !important; } html.dark .border-violet-400 { border-color: rgba(167,139,250,.5) !important; } html.dark .ring-violet-100 { --tw-ring-color: rgba(167,139,250,.3) !important; } html.dark .divide-violet-200\/70 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(167,139,250,.22) !important; } html.dark .bg-purple-50 { background-color: rgba(192,132,252,.08) !important; } html.dark .bg-purple-100 { background-color: rgba(192,132,252,.17) !important; } html.dark .text-purple-700 { color: #d8b4fe !important; } html.dark .border-purple-200 { border-color: rgba(192,132,252,.28) !important; } html.dark .ring-purple-100 { --tw-ring-color: rgba(192,132,252,.3) !important; } html.dark .bg-fuchsia-50, html.dark .bg-fuchsia-50\/60 { background-color: rgba(232,121,249,.08) !important; } html.dark .hover\:bg-fuchsia-50:hover { background-color: rgba(232,121,249,.13) !important; } html.dark .border-fuchsia-300 { border-color: rgba(232,121,249,.38) !important; } html.dark .bg-fuchsia-100 { background-color: rgba(232,121,249,.17) !important; } html.dark .bg-fuchsia-400\/15 { background-color: rgba(232,121,249,.14) !important; } html.dark .bg-fuchsia-400\/20 { background-color: rgba(232,121,249,.20) !important; } html.dark .hover\:bg-fuchsia-400\/15:hover { background-color: rgba(232,121,249,.24) !important; } html.dark .text-fuchsia-500 { color: #f0abfc !important; } html.dark .text-fuchsia-600 { color: #edaefb !important; } html.dark .text-fuchsia-700 { color: #f5c2fd !important; } html.dark .border-fuchsia-200 { border-color: rgba(232,121,249,.28) !important; } html.dark .ring-fuchsia-100 { --tw-ring-color: rgba(232,121,249,.3) !important; } /* — vert / émeraude / lime (succès, contrats actifs) */ html.dark .bg-green-50, html.dark .bg-green-50\/50 { background-color: rgba(74,222,128,.08) !important; } html.dark .bg-green-100 { background-color: rgba(74,222,128,.16) !important; } html.dark .bg-green-500\/10, html.dark .bg-green-600\/10 { background-color: rgba(74,222,128,.13) !important; } html.dark .text-green-500 { color: #86efac !important; } html.dark .text-green-600 { color: #86efac !important; } html.dark .text-green-700 { color: #a7f3c0 !important; } html.dark .border-green-200 { border-color: rgba(74,222,128,.28) !important; } html.dark .border-green-300 { border-color: rgba(74,222,128,.38) !important; } html.dark .border-green-500\/40 { border-color: rgba(74,222,128,.42) !important; } html.dark .border-green-500\/60 { border-color: rgba(74,222,128,.6) !important; } html.dark .border-green-600\/50 { border-color: rgba(74,222,128,.5) !important; } html.dark .ring-green-200 { --tw-ring-color: rgba(74,222,128,.3) !important; } html.dark .bg-emerald-50 { background-color: rgba(52,211,153,.08) !important; } html.dark .bg-emerald-100 { background-color: rgba(52,211,153,.16) !important; } html.dark .text-emerald-500, html.dark .text-emerald-600 { color: #6ee7b7 !important; } html.dark .text-emerald-700 { color: #9df3d0 !important; } html.dark .border-emerald-200 { border-color: rgba(52,211,153,.28) !important; } html.dark .border-emerald-300 { border-color: rgba(52,211,153,.38) !important; } html.dark .ring-emerald-100 { --tw-ring-color: rgba(52,211,153,.3) !important; } html.dark .bg-lime-100 { background-color: rgba(163,230,53,.16) !important; } html.dark .text-lime-700 { color: #bef264 !important; } html.dark .ring-lime-100 { --tw-ring-color: rgba(163,230,53,.3) !important; } /* — ambre / jaune / orange (alertes douces, impayés) */ html.dark .bg-amber-50, html.dark .bg-amber-50\/60, html.dark .bg-amber-50\/70 { background-color: rgba(251,191,36,.09) !important; } html.dark .bg-amber-100 { background-color: rgba(251,191,36,.16) !important; } html.dark .bg-amber-500\/5 { background-color: rgba(251,191,36,.07) !important; } html.dark .bg-amber-500\/20 { background-color: rgba(251,191,36,.22) !important; } html.dark .bg-amber-400\/15 { background-color: rgba(251,191,36,.14) !important; } html.dark .bg-amber-400\/20 { background-color: rgba(251,191,36,.20) !important; } html.dark .hover\:bg-amber-400\/15:hover { background-color: rgba(251,191,36,.24) !important; } html.dark .bg-amber-100\/70 { background-color: rgba(251,191,36,.14) !important; } html.dark .hover\:bg-amber-100\/70:hover { background-color: rgba(251,191,36,.20) !important; } html.dark .hover\:bg-amber-50:hover { background-color: rgba(251,191,36,.14) !important; } html.dark .text-amber-500 { color: #fcd34d !important; } html.dark .text-amber-600 { color: #fcd34d !important; } html.dark .text-amber-700 { color: #fde08a !important; } html.dark .text-amber-800 { color: #fdeab0 !important; } html.dark .hover\:text-amber-800:hover { color: #fef3c7 !important; } html.dark .border-amber-200 { border-color: rgba(251,191,36,.28) !important; } html.dark .border-amber-300 { border-color: rgba(251,191,36,.38) !important; } html.dark .border-amber-400 { border-color: rgba(251,191,36,.48) !important; } html.dark .border-amber-500, html.dark .border-amber-500\/40 { border-color: rgba(251,191,36,.5) !important; } html.dark .border-amber-600, html.dark .border-amber-600\/50, html.dark .border-amber-700\/50 { border-color: rgba(251,191,36,.58) !important; } html.dark .hover\:border-amber-600:hover { border-color: rgba(251,191,36,.7) !important; } html.dark .ring-amber-100 { --tw-ring-color: rgba(251,191,36,.3) !important; } html.dark .bg-yellow-100 { background-color: rgba(250,204,21,.16) !important; } html.dark .border-yellow-200 { border-color: rgba(250,204,21,.28) !important; } html.dark .text-orange-500 { color: #fdba74 !important; } html.dark .ring-orange-100 { --tw-ring-color: rgba(251,146,60,.3) !important; } /* — rouge / rose (erreurs, suppressions, perdus) */ html.dark .bg-red-50 { background-color: rgba(248,113,113,.09) !important; } html.dark .bg-red-100 { background-color: rgba(248,113,113,.16) !important; } html.dark .bg-red-500\/5 { background-color: rgba(248,113,113,.08) !important; } html.dark .bg-red-500\/10 { background-color: rgba(248,113,113,.13) !important; } html.dark .bg-red-500\/15 { background-color: rgba(248,113,113,.18) !important; } html.dark .bg-red-500\/20 { background-color: rgba(248,113,113,.22) !important; } html.dark .hover\:bg-red-500\/10:hover { background-color: rgba(248,113,113,.18) !important; } html.dark .text-red-500, html.dark .text-red-600 { color: #fca5a5 !important; } html.dark .text-red-700 { color: #fecaca !important; } html.dark .hover\:text-red-500:hover { color: #fca5a5 !important; } html.dark .border-red-200 { border-color: rgba(248,113,113,.28) !important; } html.dark .border-red-300 { border-color: rgba(248,113,113,.38) !important; } html.dark .border-red-400 { border-color: rgba(248,113,113,.48) !important; } html.dark .border-red-500, html.dark .border-red-500\/40, html.dark .border-red-500\/50, html.dark .border-red-500\/60 { border-color: rgba(248,113,113,.55) !important; } html.dark .ring-red-200 { --tw-ring-color: rgba(248,113,113,.32) !important; } html.dark .bg-rose-50, html.dark .bg-rose-50\/50, html.dark .bg-rose-50\/60, html.dark .bg-rose-50\/70 { background-color: rgba(251,113,133,.09) !important; } html.dark .bg-rose-100 { background-color: rgba(251,113,133,.16) !important; } html.dark .text-rose-500, html.dark .text-rose-600 { color: #fda4af !important; } html.dark .text-rose-700 { color: #fecdd3 !important; } html.dark .border-rose-200 { border-color: rgba(251,113,133,.28) !important; } html.dark .border-rose-300 { border-color: rgba(251,113,133,.38) !important; } html.dark .border-rose-400\/40 { border-color: rgba(251,113,133,.45) !important; } /* — ciel / bleu / indigo / teal (informations) */ html.dark .bg-sky-50 { background-color: rgba(56,189,248,.08) !important; } html.dark .bg-sky-100 { background-color: rgba(56,189,248,.16) !important; } html.dark .hover\:bg-sky-200:hover { background-color: rgba(56,189,248,.24) !important; } html.dark .text-sky-500 { color: #7dd3fc !important; } html.dark .text-sky-700 { color: #a5e2fd !important; } html.dark .border-sky-300 { border-color: rgba(56,189,248,.38) !important; } html.dark .ring-sky-100 { --tw-ring-color: rgba(56,189,248,.3) !important; } html.dark .bg-blue-100 { background-color: rgba(96,165,250,.16) !important; } html.dark .text-blue-500 { color: #93c5fd !important; } html.dark .text-blue-700 { color: #bfdbfe !important; } html.dark .ring-blue-100 { --tw-ring-color: rgba(96,165,250,.3) !important; } html.dark .ring-indigo-100 { --tw-ring-color: rgba(129,140,248,.3) !important; } html.dark .ring-teal-100 { --tw-ring-color: rgba(45,212,191,.3) !important; } /* -------------------------------------------------------------------------- 7. Contrôles de formulaire -------------------------------------------------------------------------- */ html.dark input, html.dark textarea, html.dark select { color-scheme: dark; } html.dark input::file-selector-button { background-color: rgba(255,255,255,.06); color: var(--li-text-3); border: 0; } html.dark option { background-color: var(--li-surface); color: var(--li-text); } /* -------------------------------------------------------------------------- 8. Contenu d'article (news_detail.html) -------------------------------------------------------------------------- */ html.dark .article-content blockquote { border-left-color: #35507a !important; color: var(--li-text-4) !important; } html.dark .article-content pre { background: #060d1a !important; color: #dbe4f0 !important; } html.dark .article-content :not(pre) > code { background: rgba(79,184,255,.16) !important; color: #cfe9ff !important; } html.dark .article-content th, html.dark .article-content td { border-color: var(--li-border) !important; } html.dark .article-content th { background: rgba(255,255,255,.05) !important; } html.dark .article-content .admonition { background: rgba(79,184,255,.10) !important; border-color: var(--li-brand) !important; } html.dark .article-content .admonition-title { color: #a9dcff !important; } html.dark .article-content .footnote { color: var(--li-text-5) !important; border-top-color: var(--li-border) !important; } html.dark .article-content sup a { color: var(--li-brand) !important; } html.dark .article-content dl dt { color: var(--li-text) !important; } html.dark .article-content dl dd { color: var(--li-text-4) !important; } /* -------------------------------------------------------------------------- 9. Blocs volontairement sombres (héro, encart CTA) : on restaure la palette d'origine, ils sont déjà sur fond bleu nuit dans les deux thèmes. -------------------------------------------------------------------------- */ html.dark .theme-fixed .bg-white { background-color: #fff !important; } html.dark .theme-fixed .bg-white\/5 { background-color: rgba(255,255,255,.05) !important; } html.dark .theme-fixed .bg-white\/10 { background-color: rgba(255,255,255,.10) !important; } html.dark .theme-fixed .hover\:bg-white\/10:hover { background-color: rgba(255,255,255,.10) !important; } html.dark .theme-fixed .hover\:bg-brand-soft:hover { background-color: #5bc4f1 !important; } html.dark .theme-fixed .text-brand { color: #1a8fde !important; } /* -------------------------------------------------------------------------- 9 bis. Listes déroulantes alignées sur les champs texte Un : hauteur légèrement différente et flèche dessinée par le système. On neutralise le rendu natif et on redessine le chevron, pour que les deux contrôles s'alignent au pixel. -------------------------------------------------------------------------- */ .form-select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.65rem center; background-size: 1rem 1rem; padding-right: 2.25rem; } html.dark .form-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238894a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); } /* Le chevron natif de Firefox/IE persiste sinon. */ .form-select::-ms-expand { display: none; } /* -------------------------------------------------------------------------- 10. Sélecteur de thème (footer public + bas du menu admin) -------------------------------------------------------------------------- */ .theme-switch { position: relative; display: inline-flex; align-items: center; gap: 0; padding: 3px; border-radius: 9999px; background-color: rgba(255, 255, 255, .55); border: 1px solid #d4d4d8; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .04); } html.dark .theme-switch { background-color: rgba(255, 255, 255, .05); border-color: var(--li-border-strong); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25); } .theme-switch__thumb { position: absolute; top: 3px; left: 3px; width: 32px; height: 28px; border-radius: 9999px; background: linear-gradient(135deg, #0d2b6e, #1a8fde); box-shadow: 0 1px 3px rgba(10, 31, 82, .35); transition: transform .28s cubic-bezier(.4, 0, .2, 1); pointer-events: none; } html.dark .theme-switch__thumb { background: linear-gradient(135deg, #1a8fde, #38b6ff); box-shadow: 0 1px 8px rgba(56, 182, 255, .45); } .theme-switch[data-theme-pref="auto"] .theme-switch__thumb { transform: translateX(0); } .theme-switch[data-theme-pref="light"] .theme-switch__thumb { transform: translateX(32px); } .theme-switch[data-theme-pref="dark"] .theme-switch__thumb { transform: translateX(64px); } .theme-switch__btn { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 28px; border: 0; background: none; border-radius: 9999px; cursor: pointer; color: #52525b; transition: color .2s ease; } html.dark .theme-switch__btn { color: var(--li-text-5); } .theme-switch__btn:hover { color: #1a8fde; } html.dark .theme-switch__btn:hover { color: var(--li-brand); } .theme-switch__btn[aria-checked="true"], html.dark .theme-switch__btn[aria-checked="true"] { color: #fff; } .theme-switch__btn:focus-visible { outline: 2px solid #1a8fde; outline-offset: 2px; } .theme-switch__btn svg { width: 15px; height: 15px; } .theme-switch__label { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; } /* Tant que le JS n'a pas pris la main, le curseur ne doit pas s'animer. */ .theme-switch:not([data-ready]) .theme-switch__thumb { transition: none; } /* -------------------------------------------------------------------------- 11. Transition douce lors du basculement (posée par JS le temps du switch) -------------------------------------------------------------------------- */ html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after { transition: background-color .3s ease, border-color .3s ease, color .3s ease, fill .3s ease, stroke .3s ease, box-shadow .3s ease !important; } @media (prefers-reduced-motion: reduce) { html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after { transition: none !important; } .theme-switch__thumb { transition: none !important; } }