/* ══════════════════════════════════════════════════════════ SND GROUPE — Mode sombre ────────────────────────────────────────────────────────── Ce fichier contient UNIQUEMENT les overrides pour le mode sombre. Activé quand a l'attribut data-theme="dark". ══════════════════════════════════════════════════════════ */ html[data-theme="dark"] { --bg: #0a0e1a; --bg-2: #0d1421; --surf: #111827; --surf-2: #1a2235; --bdr: #1e2d45; --bdr-2: #2a3a56; --txt: #e8edf5; --ink: #e8edf5; --ink-2: #c8cdd5; --muted: #8a96b0; --muted-2: #a0acc4; /* Accents ajustés pour fond sombre */ --teal: #00e5c3; --teal-2: #00b89a; --amber: #f59e0b; --amber-2: #d97706; --purple: #a78bfa; --purple-2: #8b6cf0; --blue: #3b82f6; --red: #ef4444; --green: #22c55e; } /* Halos du body en mode sombre */ html[data-theme="dark"] body::before { background: radial-gradient(ellipse 800px 500px at 15% 10%, rgba(0,229,195,.06), transparent 60%), radial-gradient(ellipse 700px 600px at 85% 85%, rgba(167,139,250,.05), transparent 60%), radial-gradient(ellipse 600px 400px at 50% 50%, rgba(245,158,11,.03), transparent 60%); } /* Headers et surfaces semi-transparentes */ html[data-theme="dark"] .snd-header, html[data-theme="dark"] .header, html[data-theme="dark"] .footer, html[data-theme="dark"] .snd-footer { background: rgba(10,14,26,.72); } /* Logos : en mode sombre, mettre un pad blanc autour du logo SND sinon il est illisible */ html[data-theme="dark"] .snd-logo-pad, html[data-theme="dark"] .logo { background: #fff; border-radius: 8px; padding: 6px 10px; } html[data-theme="dark"] .snd-logo-division { background: #fff; } /* Page d'accueil : logo dans le header principal */ html[data-theme="dark"] .header .logo img { background: #fff; padding: 4px 8px; border-radius: 6px; } /* Monogramme géant en fond — contraste adapté */ html[data-theme="dark"] .home-mono, html[data-theme="dark"] body::before + .monogramme { -webkit-text-stroke: 1px rgba(255, 255, 255, .05); } /* Cartes, blocs, tools — adapter les fonds */ html[data-theme="dark"] .card, html[data-theme="dark"] .snd-block, html[data-theme="dark"] .snd-tool { background: linear-gradient(135deg, var(--surf) 0%, rgba(17,24,39,.4) 100%); } /* Tags colorés : réajuster les alphas pour fond sombre */ html[data-theme="dark"] .snd-tag.amber { background: rgba(245,158,11,.08); border-color: rgba(245,158,11,.25); } html[data-theme="dark"] .snd-tag.purple { background: rgba(167,139,250,.08); border-color: rgba(167,139,250,.25); } html[data-theme="dark"] .snd-tag.blue { background: rgba(59,130,246,.08); border-color: rgba(59,130,246,.25); } html[data-theme="dark"] .snd-tag, html[data-theme="dark"] .snd-tag.teal { background: rgba(0,229,195,.08); border-color: rgba(0,229,195,.25); } /* Numéros en filigrane sur les cartes */ html[data-theme="dark"] .card-num, html[data-theme="dark"] .home-card-num { -webkit-text-stroke: 1px rgba(255, 255, 255, .08); } /* User chip / badges */ html[data-theme="dark"] .user-chip { background: rgba(0,229,195,.06); border-color: rgba(0,229,195,.15); } /* Boutons back, logout, admin */ html[data-theme="dark"] .btn-logout, html[data-theme="dark"] .snd-back { background: var(--surf-2); border-color: var(--bdr); color: var(--txt); } /* Modal de changement de mdp / login */ html[data-theme="dark"] .login-card, html[data-theme="dark"] .card { background: var(--surf); border-color: var(--bdr); } /* Inputs */ html[data-theme="dark"] input, html[data-theme="dark"] .field input, html[data-theme="dark"] .tool-card input, html[data-theme="dark"] .tool-card select { background: var(--surf-2); border-color: var(--bdr); color: var(--txt); } /* Monogramme accueil */ html[data-theme="dark"] .home-mono { -webkit-text-stroke: 1px rgba(255, 255, 255, .04); } /* ══════════════════════════════════════════════════════════ TOGGLE BOUTON LUI-MÊME ══════════════════════════════════════════════════════════ */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; background: transparent; border: 1px solid var(--bdr-2, #d6d3cc); color: var(--ink-2, #3b3f48); cursor: pointer; transition: all .2s ease; padding: 0; flex-shrink: 0; } .theme-toggle:hover { border-color: var(--ink, #16181d); color: var(--ink, #16181d); transform: translateY(-1px); } .theme-toggle svg { width: 16px; height: 16px; } /* En mode sombre, le bouton est plus clair */ html[data-theme="dark"] .theme-toggle { border-color: var(--bdr-2); color: var(--ink-2); } html[data-theme="dark"] .theme-toggle:hover { border-color: var(--txt); color: var(--txt); } /* L'icône affichée change selon le mode */ .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } html[data-theme="dark"] .theme-toggle .icon-sun { display: block; } html[data-theme="dark"] .theme-toggle .icon-moon { display: none; }