/* ===== D/CREATORS — SETTINGS WIDGET & DARK MODE ===== */ /* ------------------------------------------------- 1) MODE SOMBRE — override des variables globales Activé via l'attribut [data-theme="dark"] sur ------------------------------------------------- */ html[data-theme="dark"] { --bg: #14101F; --bg-section: #191327; --bg-card: #1D1730; --bg-card-alt: #241D3A; --text: #F1EDFF; --text-muted: #B4A9DE; --text-light: #9186BE; --border: rgba(167, 139, 250, 0.18); --border-strong: rgba(167, 139, 250, 0.32); --shadow: 0 8px 32px rgba(0, 0, 0, 0.45); --shadow-card: 0 2px 16px rgba(0, 0, 0, 0.35); --shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.5); } /* Éléments à fond blanc codé en dur (non liés aux variables) */ html[data-theme="dark"] nav { background: rgba(20, 16, 31, 0.86); } /* Le grain de fond garde une opacité discrète dans les deux thèmes */ html[data-theme="dark"] body::before { opacity: 0.04; } /* Transition douce lors du changement de thème */ html.theme-transition, html.theme-transition body, html.theme-transition * { transition: background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease, box-shadow 0.35s ease !important; } /* ------------------------------------------------- 2) BOUTON FLOTTANT (écrou / mascotte) ------------------------------------------------- */ .settings-toggle { position: fixed; bottom: 24px; right: 24px; width: 72px; height: 72px; border-radius: 50%; background: var(--bg-card); border: 1px solid var(--border); box-shadow: var(--shadow-card); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 5000; padding: 0; transition: box-shadow 0.25s, transform 0.25s, background 0.25s; } .settings-toggle:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); } .settings-toggle img { width: 64px; height: 64px; display: block; pointer-events: none; } /* ------------------------------------------------- 3) PANNEAU DE PARAMÈTRES ------------------------------------------------- */ .settings-panel { position: fixed; bottom: 108px; right: 24px; width: 260px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-hover); z-index: 5000; padding: 18px; opacity: 0; transform: translateY(12px) scale(0.97); pointer-events: none; transition: opacity 0.22s ease, transform 0.22s ease; } .settings-panel.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .settings-panel-title { font-family: 'Space Grotesk', sans-serif; font-size: 0.92rem; font-weight: 700; color: var(--text); margin: 0 0 4px; } .settings-panel-sub { font-size: 0.78rem; color: var(--text-muted); margin: 0 0 14px; } .settings-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; } .settings-group:last-of-type { margin-bottom: 0; } .settings-group-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-light); margin-bottom: 2px; } .settings-option { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-card-alt); cursor: pointer; font-size: 0.85rem; color: var(--text); transition: border-color 0.2s, background 0.2s; } .settings-option:hover { border-color: var(--border-strong); } .settings-option input { accent-color: var(--violet); width: 16px; height: 16px; flex-shrink: 0; } .settings-option.active { border-color: var(--violet); background: var(--violet-glow); } /* ------------------------------------------------- 3bis) OPTIONS "DRAPEAU" (langue) — affichage compact en une seule rangée horizontale, sous le libellé "Langue" qui reste sur sa propre ligne au-dessus. ------------------------------------------------- */ .settings-options-row { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 8px; } .settings-option-flag { position: relative; flex: 1 1 0; width: auto; height: 40px; padding: 6px 0; gap: 0; justify-content: center; } .settings-option-flag svg { width: 26px; height: auto; display: block; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12); flex-shrink: 0; } .settings-option-flag input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; } @media (max-width: 640px) { .settings-panel { right: 16px; left: 16px; width: auto; bottom: 80px; } .settings-toggle { right: 14px; bottom: 14px; width: 50px; height: 50px; } .settings-toggle img { width: 38px; height: 38px; } } /* Sur très petits écrans, 8 drapeaux sur une seule ligne en nowrap peuvent dépasser la largeur du panneau (icônes tassées / débordement horizontal). On passe alors sur 2 lignes de 4 drapeaux. */ @media (max-width: 400px) { .settings-options-row { flex-wrap: wrap; row-gap: 8px; } .settings-option-flag { flex: 1 1 calc(25% - 6px); } .settings-option-flag svg { width: 22px; } }