/* ═══════════════════════════════════════════════════════════
DESIGN SYSTEM — Aura Focus
───────────────────────────────────────────────────────────
Ce fichier contient TOUT le design system :
1. Tokens structurels — géométrie, durées, typo, mise en page
2. Tokens boutons — style unique utilisé sur tout le site
3. Tokens navigation — sidebar + menu paramètres partagent les mêmes
4. Règles CSS boutons — les classes .btn, .mj-btn etc. pointent ici
5. Thème défaut
5bis. Thème Méroé
6. Thème Ocean
7. Thème Violet
8. Thème Rose
9. Thème Ardoise
═══════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════
0. ICÔNES — Material Symbols (ligatures)
Chaque icône est une variable CSS.
Usage HTML : var(--icon-delete)
→ mais on écrit le contenu littéral de la ligature,
donc en JS : icon('delete') → delete
Usage CSS : content: var(--icon-delete); (sur un ::before / ::after)
═══════════════════════════════════════════════════════════ */
:root {
/* ── Icônes d'action ── */
--icon-delete: "delete"; /* poubelle */
--icon-edit: "edit"; /* crayon / modifier */
--icon-close: "close"; /* × fermer */
--icon-add: "add"; /* + ajouter */
--icon-check: "check"; /* ✓ valider */
--icon-save: "save"; /* disquette sauvegarder */
/* ── Navigation / UI ── */
--icon-chevron-down: "expand_more"; /* chevron bas (replier) */
--icon-chevron-left: "chevron_left"; /* flèche gauche */
--icon-chevron-right: "chevron_right";/* flèche droite */
--icon-arrow-back: "arrow_back"; /* retour */
--icon-drag: "drag_indicator";/* poignée drag & drop */
/* ── Timer / session ── */
--icon-play: "play_arrow"; /* lecture */
--icon-pause: "pause"; /* pause */
--icon-stop: "stop"; /* arrêt */
--icon-reset: "replay"; /* réinitialiser */
/* ── Contenu ── */
--icon-star: "star"; /* étoile (focus) */
--icon-settings:"settings"; /* engrenage paramètres */
--icon-home: "home"; /* maison accueil */
--icon-history: "history"; /* historique */
--icon-bolt: "bolt"; /* éclair deep work */
--icon-lightbulb: "lightbulb"; /* ampoule brain dump */
--icon-target: "target"; /* cible objectifs */
--icon-calendar: "calendar_today"; /* calendrier J0 */
--icon-move: "drive_file_move"; /* déplacer vers matière */
/* ── Paramètres / compte ── */
--icon-person: "person"; /* utilisateur / profil */
--icon-palette: "palette"; /* thème / couleurs */
--icon-bar-chart: "bar_chart"; /* statistiques */
--icon-menu-book: "toc"; /* méthode des J */
--icon-manage-accounts:"manage_accounts";/* gestion du compte */
--icon-lock: "lock"; /* identifiants */
--icon-language: "language"; /* localisation */
--icon-translate: "translate"; /* langue */
--icon-mail: "mail"; /* contact / email */
--icon-send: "send"; /* envoyer message */
--icon-logout: "logout"; /* déconnexion */
--icon-warning: "warning"; /* zone danger */
/* ── Sync / Cloud (indicateur sidebar) ── */
--icon-cloud-done: "cloud_done"; /* sync OK */
--icon-cloud-sync: "cloud_sync"; /* sync en cours */
--icon-cloud-download: "cloud_download"; /* migration en cours */
--icon-cloud-off: "cloud_off"; /* hors ligne */
--icon-cloud-alert: "cloud_alert"; /* erreur de sync */
/* ── Timer / Deep Work ── */
--icon-schedule: "schedule"; /* horloge / temps travaillé */
--icon-fire: "local_fire_department"; /* flamme */
--icon-psychology: "psychology"; /* cerveau / focus moyen */
--icon-volume: "volume_up"; /* volume sons ambiance */
--icon-visibility: "visibility"; /* afficher / œil secondes */
--icon-fullscreen: "fullscreen"; /* plein écran */
--icon-fullscreen-exit:"fullscreen_exit";/* quitter plein écran */
/* ── Taille de police Material Symbols par défaut ── */
--icon-size: 20px;
--icon-weight: 400;
--icon-fill: 0;
--icon-grade: 0;
--icon-optical-size: 20;
}
/* Classe utilitaire pour afficher une icône Material Symbols */
.icon {
font-family: "Material Symbols Outlined" !important;
font-size: var(--icon-size, 20px);
font-weight: normal !important;
font-style: normal !important;
line-height: 1;
letter-spacing: normal !important;
text-transform: none !important;
display: inline-flex;
align-items: center;
justify-content: center;
white-space: nowrap;
word-wrap: normal;
word-break: keep-all;
direction: ltr;
-webkit-font-smoothing: antialiased;
font-variation-settings:
'FILL' var(--icon-fill, 0),
'wght' var(--icon-weight, 400),
'GRAD' var(--icon-grade, 0),
'opsz' var(--icon-optical-size, 20);
user-select: none;
vertical-align: middle;
flex-shrink: 0;
}
/* Variantes de taille */
.icon--sm { --icon-size: 16px; --icon-optical-size: 16; }
.icon--md { --icon-size: 20px; --icon-optical-size: 20; }
.icon--lg { --icon-size: 24px; --icon-optical-size: 24; }
/* Variante remplie */
.icon--filled { --icon-fill: 1; }
/* Icônes dans la sidebar — taille spécifique */
.sidebar__icon {
--icon-size: 21px;
--icon-optical-size: 24;
}
/* ───────────────────────────────────────────────────────────
1. TOKENS STRUCTURELS
Valeurs fixes, indépendantes du thème.
─────────────────────────────────────────────────────────── */
:root {
/* ── Rayons ── */
--r-xl: 24px; /* ─── Modifier rayon des bords des éléments dans les paramètres ─── */
--r-lg: 20px; /* ─── Modifier rayon des bords des éléments dans Méthode des J ─── */
--r-md: 20px; /* ─── Modifier rayon des bords des éléments dans Acceuil ─── */
--r-mid: 10px;
--r-sm: 8px;
--r-xs: 6px;
--r-pill: 999px;
/* ── Ombres ── */
--shadow: 0 20px 60px rgba(0, 0, 0, 0.38);
--shadow-soft: 0 10px 28px rgba(0, 0, 0, 0.24);
--shadow-tight: 0 4px 16px rgba(0, 0, 0, 0.18);
/* ── Durées ── */
--dur-fast: 0.14s; /* micro-interactions immédiates : hover boutons, changement de couleur */
--dur-base: 0.26s; /* interactions standard : ombres, bordures, petits éléments */
--dur-smooth: 0.55s; /* pour les pop-up */
--dur-reveal: 0.60s; /* apparition des grands blocs de page au chargement */
/* ── Dépliés : UNE valeur pour tout le site ──────────────────
(compositeur d'objectifs, groupes repliables, formulaires du compte…)
Changer ici = changer tous les dépliés en même temps. */
--dur-unfold: 0.75s; /* hauteur du déplié */
--dur-unfold-fade: 0.40s; /* fondu / glissé du contenu déplié */
/* ── Courbes ── */
--ease: cubic-bezier(0.25, 0.8, 0.25, 1);
--ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
/* ── Transitions nommées ── */
--t-btn: background var(--dur-fast) var(--ease), /* ─── Transitions des boutons / éléments cliquables ─── */
color var(--dur-fast) var(--ease),
border-color var(--dur-fast) var(--ease),
box-shadow var(--dur-base) var(--ease),
transform 0.12s var(--ease);
--t-popup: opacity var(--dur-smooth) var(--ease), /* ─── Transitions des pop-up ─── */
transform var(--dur-smooth) var(--ease);
--t-reveal: opacity var(--dur-reveal) var(--ease), /* ─── Pour l'affichage initial des gros blocs de la page ─── */
transform var(--dur-reveal) var(--ease);
--t-sidebar: width 0.42s var(--ease),
opacity 0.42s var(--ease);
/* ── Reveal en cascade (utilisé par window.auraCascadeReveal) ── */
--reveal-stagger: 60ms; /* délai entre 2 blocs de la cascade */
--reveal-distance: 16px; /* amplitude du translateY initial */
/* ── Typographie ── */
--font-texte: "Inter", system-ui, -apple-system, sans-serif;
--font-titre: "Lora", serif;
/* Toujours typographie : aliases pour le reste du système */
--font-sans: var(--font-texte);
--font-serif: var(--font-titre);
--font: var(--font-texte);
/* ── Tailles de police — à utiliser sur TOUTES les pages pour la cohérence ── */
/* ── Corps de texte ── */
--page-font-size: 14.5px; /* taille de base du corps de texte */
--placeholder-size: 13px; /* texte placeholder / hint */
/* ── Titres principaux de page (h1) ── */
--page-title-size: 29px; /* référence = "Bonjour toi" page Accueil */
--page-title-weight: 800;
--page-title-spacing: -0.025em;
--page-title-family: var(--font-titre); /* Lora serif */
/* ── Date / sous-titre de page ── */
--page-date-size: 15px;
--page-date-weight: 400;
--page-date-color: rgba(255, 255, 255, 0.68);
/* ── Titres de sections (h2 dans les cards) ── */
--section-title-size: 15px;
--section-title-weight: 700;
--section-title-spacing: -0.01em;
/* ── Titres de panneaux latéraux ── */
--panel-title-size: 13.5px;
--panel-title-weight: 700;
--panel-title-spacing: -0.01em;
/* ── Titres de modaux ── */
--modal-title-size: 18px;
--modal-title-weight: 800;
--modal-title-spacing: -0.02em;
/* ── Étiquettes / labels secondaires ── */
--label-size: 12.5px;
--label-weight: 500;
--label-muted-color: var(--ui-text-2);
/* ── Valeurs numériques proéminentes (ex: temps travaillé) ── */
--stat-value-size: 24px;
--stat-value-weight: 650;
--stat-value-spacing: -0.02em;
/* ── Mise en page ── */
--sidebar-w: 130px;
--container: 1320px;
--pad: clamp(16px, 3.2vw, 32px);
--gap: clamp(12px, 2vw, 20px);
/* ── Texte (opacités fixes, valables pour tous les thèmes) ── */
--ui-text-1: rgba(255, 255, 255, 0.92);
--ui-text-2: rgba(255, 255, 255, 0.58);
--ui-text-3: rgba(255, 255, 255, 0.34);
--ui-text-4: rgba(255, 255, 255, 0.18);
/* ── Divers ── */
--popup-radius: 24px;
--popup-shadow: 0 28px 80px rgba(0, 0, 0, 0.65);
--popup-bg: var(--ui-surface);
--popup-border: var(--ui-border);
--popup-overlay-bg: rgba(0, 0, 0, 0.55); /* fond de tous les overlays */
--popup-overlay-blur: blur(8px); /* flou de tous les overlays */
/* Token partagé input */
--input-radius: var(--btn-radius);
/* Placeholder — uniforme sur tout le site */
--placeholder-color: rgba(255, 255, 255, 0.35);
--placeholder-size: 13px;
--ui-block-border: rgba(255, 255, 255, 0.12);
--ui-row-border: rgba(255, 255, 255, 0.05);
--glass: rgba(255, 255, 255, 0.03);
/* ── Aliases legacy (pour ne pas casser l'existant) ── */
--r-lg-old: var(--r-lg);
--transition-douce: var(--t-btn);
--transition: var(--t-btn);
--dur: var(--dur-reveal);
--pop-dur: var(--dur-smooth);
--pop-ease: var(--ease-pop);
--text-1: var(--ui-text-1);
--text-2: var(--ui-text-2);
--text-3: var(--ui-text-3);
--ink-on-dark: var(--ui-text-1);
}
/* ───────────────────────────────────────────────────────────
2. TOKENS BOUTONS
Style unique inspiré de .mj-btn (Méthode des J) :
fond semi-transparent, bordure subtile, font-weight 500.
Les valeurs colorées (bg, border, text) sont écrasées
par chaque thème ci-dessous pour s'adapter à l'accent.
─────────────────────────────────────────────────────────── */
:root {
/* ── Géométrie & typographie des boutons ── */
--btn-radius: var(--r-sm); /* bords légèrement arrondis, look moderne */
--btn-radius-sm: var(--r-xs);
--btn-radius-lg: var(--r-md);
--btn-radius-pill: var(--r-pill);
--btn-font-size: 13.5px;
--btn-font-size-sm: 12px;
--btn-font-size-lg: 14.5px;
--btn-font-weight: 500; /* ← même graisse que .mj-btn (référence Méthode des J) */
--btn-letter-spacing: 0em;
--btn-pad: 8px 16px;
--btn-pad-sm: 5px 11px;
--btn-pad-lg: 10px 22px;
/* ── Ghost / défaut — fond transparent, bordure subtile ── */
--btn-ghost-bg: rgba(255, 255, 255, 0.05);
--btn-ghost-bg-h: rgba(255, 255, 255, 0.10);
--btn-ghost-bg-a: rgba(255, 255, 255, 0.03);
--btn-ghost-border: rgba(255, 255, 255, 0.12);
--btn-ghost-border-h: rgba(255, 255, 255, 0.20);
--btn-ghost-text: var(--ui-text-1);
/* ── Primary — accent coloré ; valeurs remplacées par le thème ── */
--btn-primary-text: #fff;
--btn-primary-bg: #c2623e; /* remplacé par chaque thème */
--btn-primary-bg-h: #d0714d;
--btn-primary-bg-a: #b55535;
--btn-primary-border: transparent;
--btn-primary-shadow: rgba(194, 98, 62, 0.28);
--btn-primary-shadow-h: rgba(194, 98, 62, 0.48);
/* ── Tint — accent semi-transparent ; valeurs remplacées par le thème ── */
--btn-tint-bg: rgba(194, 98, 62, 0.13);
--btn-tint-bg-h: rgba(194, 98, 62, 0.22);
--btn-tint-bg-a: rgba(194, 98, 62, 0.08);
--btn-tint-border: rgba(194, 98, 62, 0.26);
--btn-tint-text: #c8902f;
/* ── Danger — rouge fixe, identique pour tous les thèmes ── */
--btn-danger-bg: rgba(239, 68, 68, 0.09);
--btn-danger-bg-h: rgba(239, 68, 68, 0.18);
--btn-danger-bg-a: rgba(239, 68, 68, 0.06);
--btn-danger-text: rgba(252, 129, 129, 0.92);
--btn-danger-border: rgba(239, 68, 68, 0.18);
--btn-danger-border-h: rgba(239, 68, 68, 0.36);
}
/* ───────────────────────────────────────────────────────────
3. TOKENS NAVIGATION
Sidebar ET menu paramètres utilisent EXACTEMENT ces vars.
Modifier ici = changer les deux en même temps.
─────────────────────────────────────────────────────────── */
:root {
--nav-item-radius: var(--r-sm);
--nav-item-padding: 10px 14px;
--nav-item-font-size: 14px;
--nav-item-font-weight: 500;
/* Hover — fond visible + texte blanc */
--nav-hover-bg: rgba(255, 255, 255, 0.068);
--nav-hover-text: var(--ui-text-1);
/* Actif */
--nav-active-bg: var(--c-accent-1-light);
--nav-active-text: var(--c-accent-3);
--nav-active-weight: 500;
/* Largeur du menu paramètres */
--smenu-width: 210px;
}
/* ───────────────────────────────────────────────────────────
4. RÈGLES CSS BOUTONS
Centralisées ici — plus besoin de buttons.css.
Style de référence : .mj-btn dans methode.css
(fond ghost, border subtile, font-weight 500).
─────────────────────────────────────────────────────────── */
/* ── Base commune ── */
button {
cursor: pointer;
font-family: var(--font);
-webkit-font-smoothing: antialiased;
}
/* ── .btn — bouton rectangulaire, style ghost ── */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: var(--btn-pad);
border-radius: var(--btn-radius);
border: 1px solid var(--btn-ghost-border);
background: var(--btn-ghost-bg);
color: var(--btn-ghost-text);
font: inherit;
font-size: var(--btn-font-size);
font-weight: var(--btn-font-weight); /* 500 — pas gras */
letter-spacing: var(--btn-letter-spacing);
white-space: nowrap;
user-select: none;
text-decoration: none;
transition: background var(--dur-base) var(--ease),
border-color var(--dur-base) var(--ease),
transform 0.12s var(--ease),
box-shadow var(--dur-base) var(--ease);
}
.btn:hover { background: var(--btn-ghost-bg-h); border-color: var(--btn-ghost-border-h); transform: translateY(-2px); filter: brightness(1.12); }
.btn:active { background: var(--btn-ghost-bg-a); transform: translateY(1px) scale(0.97); }
/* ── btn--ghost — alias explicite du style ghost (base .btn).
Existe pour uniformiser les boutons secondaires (ex: "Remettre par défaut",
"Réinitialiser", "Nouvelle page") sur la même base que la référence MJ. ── */
.btn--ghost {
background: var(--btn-ghost-bg);
border-color: var(--btn-ghost-border);
color: var(--btn-ghost-text);
}
.btn--ghost:hover { background: var(--btn-ghost-bg-h); border-color: var(--btn-ghost-border-h); transform: translateY(-2px); filter: brightness(1.12); }
.btn--ghost:active { background: var(--btn-ghost-bg-a); transform: translateY(1px) scale(0.97); }
/* Modificateurs de taille */
.btn--sm { padding: var(--btn-pad-sm); font-size: var(--btn-font-size-sm); border-radius: var(--btn-radius-sm); }
.btn--lg { padding: var(--btn-pad-lg); font-size: var(--btn-font-size-lg); border-radius: var(--btn-radius-lg); }
.btn--full { width: 100%; }
/* ── btn--primary — accent teinté (style .mj-btn--primary) ── */
/* Note : on choisit le look tint (semi-transparent) plutôt que plein opaque
pour que le bouton reste cohérent avec le reste du site. */
.btn--primary {
background: var(--btn-tint-bg);
border-color: var(--btn-tint-border);
color: var(--btn-tint-text);
}
.btn--primary:hover { background: var(--btn-tint-bg-h); transform: translateY(-2px); filter: brightness(1.12); }
.btn--primary:active { background: var(--btn-tint-bg-a); transform: translateY(1px) scale(0.97); }
/* ── btn--tint — alias explicite du tint ── */
.btn--tint {
background: var(--btn-tint-bg);
border-color: var(--btn-tint-border);
color: var(--btn-tint-text);
}
.btn--tint:hover { background: var(--btn-tint-bg-h); transform: translateY(-2px); filter: brightness(1.12); }
.btn--tint:active { background: var(--btn-tint-bg-a); transform: translateY(1px) scale(0.97); }
/* ── btn--danger — rouge, identique pour tous les thèmes ── */
.btn--danger {
background: var(--btn-danger-bg);
border-color: var(--btn-danger-border);
color: var(--btn-danger-text);
}
.btn--danger:hover { background: var(--btn-danger-bg-h); border-color: var(--btn-danger-border-h); transform: translateY(-2px); filter: brightness(1.12); }
.btn--danger:active { background: var(--btn-danger-bg-a); transform: translateY(1px) scale(0.97); }
/* ── btn--save — animation texte "Sauvegardé" ── */
/* Le JS ajoute .saved qui fait glisser le label vers le haut
et affiche le texte de data-saved via ::after. */
.btn--save {
overflow: hidden;
position: relative;
}
.btn--save .btn-label {
display: block;
transition: transform 0.26s var(--ease), opacity 0.20s var(--ease);
}
.btn--save.saved .btn-label {
transform: translateY(-130%);
opacity: 0;
}
.btn--save::after {
content: attr(data-saved);
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
transform: translateY(130%);
opacity: 0;
font-size: var(--btn-font-size);
font-weight: var(--btn-font-weight);
transition: transform 0.26s var(--ease), opacity 0.20s var(--ease);
pointer-events: none;
}
.btn--save.saved::after {
transform: translateY(0);
opacity: 1;
}
/* ── pillButton — bords pill, même style ghost ── */
.pillButton {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: var(--btn-pad);
border-radius: var(--btn-radius-pill);
border: 1px solid var(--btn-ghost-border);
background: var(--btn-ghost-bg);
color: var(--btn-ghost-text);
font: inherit;
font-size: var(--btn-font-size);
font-weight: var(--btn-font-weight);
white-space: nowrap;
user-select: none;
transition: background var(--dur-base) var(--ease),
border-color var(--dur-base) var(--ease),
transform 0.12s var(--ease);
}
.pillButton:hover { background: var(--btn-ghost-bg-h); border-color: var(--btn-ghost-border-h); transform: translateY(-1px); }
.pillButton:active { background: var(--btn-ghost-bg-a); transform: translateY(1px) scale(0.97); }
.pillButton--primary { background: var(--btn-tint-bg); border-color: var(--btn-tint-border); color: var(--btn-tint-text); }
.pillButton--primary:hover { background: var(--btn-tint-bg-h); }
.pillButton--primary:active { background: var(--btn-tint-bg-a); }
/* ── iconButton — bouton icône rond ── */
.iconButton {
width: 40px;
height: 40px;
border-radius: var(--btn-radius-pill);
border: 1px solid var(--btn-ghost-border);
background: var(--btn-ghost-bg);
display: grid;
place-items: center;
color: var(--ui-text-1);
transition: background var(--dur-base) var(--ease),
border-color var(--dur-base) var(--ease),
transform 0.12s var(--ease);
}
.iconButton:hover { background: var(--btn-ghost-bg-h); border-color: var(--btn-ghost-border-h); transform: scale(1.06); }
.iconButton:active { background: var(--btn-ghost-bg-a); transform: scale(0.95); }
.iconButton svg { width: 18px; height: 18px; display: block; }
/* Variante sans fond */
.iconButton--plain { border: none; background: transparent; }
.iconButton--plain:hover { background: var(--btn-ghost-bg-h); transform: scale(1.08); }
.iconButton--plain:active { background: var(--btn-ghost-bg-a); transform: scale(0.94); }
/* ── iconMini — petit bouton icône inline ── */
.iconMini {
width: 28px;
height: 28px;
padding: 0;
border-radius: var(--btn-radius-sm);
border: none;
background: transparent;
color: rgba(255, 255, 255, 0.90);
font: inherit;
font-weight: 700;
font-size: 18px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background var(--dur-base) var(--ease),
transform 0.12s var(--ease);
}
.iconMini:hover { background: var(--btn-ghost-bg-h); transform: scale(1.10); }
.iconMini:active { transform: scale(0.93); }
/* ── Palette phare Méroé : orange, bleu, violet, rose (+ verts de touches).
Source unique — landing, auth et app réutilisent ces mêmes tokens. ── */
:root {
--flag-orange: #c2623e;
--flag-orange-lt: #e0a44c;
--flag-blue: #2d7dd2;
--flag-blue-lt: #5cc0f0;
--flag-violet: #9c3aed;
--flag-violet-lt: #d3a6fa;
--flag-rose: #e0457b;
--flag-rose-lt: #f4a0bc;
--flag-green: #22c55e;
--flag-green-lt: #7ee2a8;
}
/* ───────────────────────────────────────────────────────────
4bis. BOUTON PHARE — verre dégradé 4 couleurs (Méroé)
Classe .btn--flag, utilisée par la landing et l'auth.
Le .btn--primary global (tint) reste inchangé pour l'app.
─────────────────────────────────────────────────────────── */
:root {
--btn-flag-bg: radial-gradient(ellipse 90% 130% at 12% 18%, color-mix(in srgb, var(--flag-violet) 50%, transparent), transparent 65%),
radial-gradient(ellipse 90% 130% at 88% 82%, color-mix(in srgb, var(--flag-blue) 50%, transparent), transparent 65%),
radial-gradient(ellipse 110% 140% at 88% 8%, color-mix(in srgb, var(--flag-rose) 32%, transparent), transparent 65%),
radial-gradient(ellipse 110% 140% at 8% 92%, color-mix(in srgb, var(--flag-orange) 42%, transparent), transparent 65%),
rgba(24, 20, 18, 0.66);
--btn-flag-text: #fff;
--btn-flag-border: transparent;
--btn-flag-shadow: inset 0 -10px 18px rgba(0, 0, 0, 0.16),
0 6px 18px rgba(0, 0, 0, 0.35);
--btn-flag-shadow-h: inset 0 -10px 18px rgba(0, 0, 0, 0.10),
0 8px 24px rgba(0, 0, 0, 0.45);
}
/* ── .btn--flag — verre + aurore floutée (comme la carte CTA) ;
au survol, les couleurs dérivent doucement ── */
.btn--flag {
position: relative;
overflow: hidden;
background: var(--btn-flag-bg);
background-size: 220% 220%, 220% 220%, 220% 220%, 220% 220%, auto;
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
border: 1px solid var(--btn-flag-border);
color: var(--btn-flag-text);
font-weight: 600;
box-shadow: var(--btn-flag-shadow);
transition: transform 0.16s var(--ease),
box-shadow var(--dur-base) var(--ease),
filter var(--dur-base) var(--ease),
border-color var(--dur-base) var(--ease);
}
.btn--flag:hover {
transform: translateY(-2px);
border-color: transparent;
box-shadow: var(--btn-flag-shadow-h);
filter: brightness(1.12);
animation: btn-flag-drift 7s ease-in-out infinite alternate;
}
.btn--flag:active { transform: translateY(1px) scale(0.98); animation: none; }
.btn--flag:disabled { opacity: 0.55; filter: none; cursor: wait; transform: none; animation: none; }
@keyframes btn-flag-drift {
0% { background-position: 0% 0%, 100% 100%, 100% 0%, 0% 100%, 0 0; }
50% { background-position: 20% 15%, 80% 85%, 75% 20%, 25% 80%, 0 0; }
100% { background-position: 40% 0%, 60% 100%, 50% 0%, 50% 100%, 0 0; }
}
/* ── Focus visible (accessibilité) ── */
.btn:focus-visible,
.btn--flag:focus-visible,
.pillButton:focus-visible,
.iconButton:focus-visible,
.iconMini:focus-visible {
outline: none;
box-shadow: 0 0 0 3px var(--ui-border-focus, var(--c-accent-1-light));
}
/* ── Inputs universels ── */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
select, textarea {
border-radius: var(--input-radius);
}
input::placeholder,
textarea::placeholder {
color: var(--placeholder-color);
font-size: var(--placeholder-size);
}
/* ── btn--save — animation glissante ──────────────────────────
CLIC : label glisse ↑ disparaît
"Sauvegardé !" arrive depuis le bas, glisse ↑ en place
RESET : "Sauvegardé !" glisse ↑ disparaît
label repositionné en bas (sans transition) puis glisse ↑ en place
────────────────────────────────────────────────────────────── */
.btn--save {
overflow: hidden;
position: relative;
}
/* 1. LABEL : "Sauvegarder" */
.btn--save .btn-label {
display: flex;
align-items: center;
gap: 6px;
transform: translateY(0);
opacity: 1;
transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
/* CLIC : Le label part vers le HAUT */
.btn--save.saved .btn-label {
transform: translateY(-110%);
opacity: 0;
}
/* 2. AFTER : "Sauvegardé !" */
.btn--save::after {
content: attr(data-saved);
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
/* DÉPART : Il attend en BAS */
transform: translateY(110%);
opacity: 0;
font-size: var(--btn-font-size);
font-weight: var(--btn-font-weight);
color: var(--btn-tint-text);
transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none;
white-space: nowrap;
}
/* CLIC : "Sauvegardé !" monte depuis le bas vers sa place */
.btn--save.saved::after {
transform: translateY(0);
opacity: 1;
}
/* 3. RESET : La boucle continue vers le haut */
/* "Sauvegardé !" continue sa route vers le HAUT pour disparaître */
.btn--save.reset-prep::after {
transform: translateY(-110%);
opacity: 0;
}
/* "Sauvegarder" se téléporte en BAS (sans transition) pour remonter ensuite */
.btn--save.reset-prep .btn-label {
transform: translateY(110%);
opacity: 0;
transition: none;
}
/* ───────────────────────────────────────────────────────────
5. THÈME PAR DÉFAUT — Terracotta / Ocre (Amber, conservé)
5bis. THÈME MÉROÉ — multicolore chaleureux (sombre, épuré)
─────────────────────────────────────────────────────────── */
[data-theme="default"], :root {
/* Accents */
--c-accent-1: #c2623e;
--c-accent-2: #e4a633;
--c-accent-3: #ebb65a; /* change entre autre la couleur de la police d'écriture de la side barre */
--c-accent-1-light: rgba(190, 108, 0, 0.2);
--c-accent-1-mid: rgba(194, 98, 62, 0.34);
--c-accent-2-light: rgba( 26, 74, 63, 0.16);
--c-accent-3-light: rgba(200, 144, 47, 0.15);
--c-accent-3-mid: rgba(200, 144, 47, 0.32);
--c-accent-1-hover: #d0714d;
/* Dégradés */
--c-grad: linear-gradient( 90deg, #c2623e, #c8902f);
--c-grad-v: linear-gradient(135deg, #c2623e, #c8902f);
--grad-stop-1: #c2623e;
--grad-stop-2: #c8902f;
/* Citation */
--quote-grad-1: rgba(241, 107, 44, 0.205);
--quote-grad-2: rgba(204, 116, 0, 0.219);
--quote-grad-3: rgba(119, 93, 47, 0.233);
/* Surfaces */
--ui-bg: #111110;
--ui-surface: #1c1917;
--ui-surface-2: #221e1b;
--ui-surface-3: #2a2521;
/* Bordures */
--ui-border: rgba(255, 255, 255, 0.12);
--ui-border-soft: rgba(255, 255, 255, 0.08);
--ui-border-focus: rgba(194, 98, 62, 0.55);
/* Tokens boutons — accent */
--btn-primary-bg: #c2623e;
--btn-primary-bg-h: #d0714d;
--btn-primary-bg-a: #b55535;
--btn-primary-shadow: rgba(194, 98, 62, 0.28);
--btn-primary-shadow-h: rgba(194, 98, 62, 0.50);
--btn-tint-bg: rgba(194, 98, 62, 0.13);
--btn-tint-bg-h: rgba(194, 98, 62, 0.22);
--btn-tint-bg-a: rgba(194, 98, 62, 0.08);
--btn-tint-border: rgba(194, 98, 62, 0.26);
--btn-tint-text: #dba445; /* Changer de couleur l'écriture dans les bouttons */
/* Aliases legacy */
--terracotta: var(--c-accent-1);
--forest: var(--c-accent-2);
--ochre: var(--c-accent-3);
--grad-warm: var(--c-grad);
--bg-dark: var(--ui-bg);
--surface: var(--ui-surface);
--app-bg: var(--ui-bg);
--app-surface: var(--ui-surface);
--border: var(--ui-border);
--border-soft: var(--ui-border-soft);
}
/* ───────────────────────────────────────────────────────────
5bis. THÈME MÉROÉ — multicolore chaleureux (sombre, épuré)
Base chaude ; voile multicolore translucide (orange dominant)
sur tout ce qui dépend du thème : boutons, sidebar, onglets.
─────────────────────────────────────────────────────────── */
[data-theme="meroe"] {
/* Accents — ancre chaude */
--c-accent-1: #c2623e;
--c-accent-2: var(--flag-violet);
--c-accent-3: #ebb65a;
--c-accent-1-light: color-mix(in srgb, var(--flag-orange) 20%, transparent);
--c-accent-1-mid: color-mix(in srgb, var(--flag-orange) 34%, transparent);
--c-accent-2-light: color-mix(in srgb, var(--flag-violet) 16%, transparent);
--c-accent-3-light: rgba(200, 144, 47, 0.15);
--c-accent-3-mid: rgba(200, 144, 47, 0.32);
--c-accent-1-hover: #d0714d;
/* Dégradés — terracotta, pont mauve, miel */
--c-grad: linear-gradient( 90deg, var(--flag-orange) 0%, color-mix(in srgb, var(--flag-violet) 55%, var(--flag-orange)) 52%, var(--flag-orange-lt) 100%);
--c-grad-v: linear-gradient(135deg, var(--flag-orange) 0%, color-mix(in srgb, var(--flag-violet) 55%, var(--flag-orange)) 52%, var(--flag-orange-lt) 100%);
--grad-stop-1: #c2623e;
--grad-stop-2: var(--flag-violet);
/* Citation — teintée violet/rose, toujours douce */
--quote-grad-1: rgba(156, 58, 237, 0.20);
--quote-grad-2: rgba(224, 69, 123, 0.16);
--quote-grad-3: rgba(200, 144, 47, 0.20);
/* Surfaces — noir chaud inchangé */
--ui-bg: #111110;
--ui-surface: #1c1917;
--ui-surface-2: #221e1b;
--ui-surface-3: #2a2521;
/* Bordures */
--ui-border: rgba(255, 255, 255, 0.12);
--ui-border-soft: rgba(255, 255, 255, 0.08);
--ui-border-focus: color-mix(in srgb, var(--flag-violet) 55%, transparent);
/* Tokens boutons */
--btn-primary-bg: #c2623e;
--btn-primary-bg-h: #d0714d;
--btn-primary-bg-a: #b55535;
--btn-primary-shadow: rgba(194, 98, 62, 0.28);
--btn-primary-shadow-h: rgba(194, 98, 62, 0.50);
/* Voile multicolore — orange dominant, sombre et chaud */
--m-wash: radial-gradient(ellipse 90% 130% at 12% 18%, color-mix(in srgb, var(--flag-orange) 30%, transparent), transparent 65%),
radial-gradient(ellipse 90% 130% at 88% 82%, color-mix(in srgb, var(--flag-violet) 22%, transparent), transparent 65%),
radial-gradient(ellipse 110% 140% at 88% 8%, color-mix(in srgb, var(--flag-blue) 18%, transparent), transparent 65%),
radial-gradient(ellipse 110% 140% at 8% 92%, color-mix(in srgb, var(--flag-rose) 18%, transparent), transparent 65%);
/* Boutons principaux : voile translucide, texte miel chaud */
--btn-tint-bg: var(--m-wash);
--btn-tint-bg-h: var(--m-wash);
--btn-tint-bg-a: var(--m-wash);
--btn-tint-border: color-mix(in srgb, var(--flag-rose) 45%, black); /* rose foncé assorti aux tons profonds */
--btn-tint-text: var(--c-accent-3);
/* Sidebar / menus — actif en voile multicolore */
--nav-active-bg: var(--m-wash);
--nav-active-text: var(--c-accent-3);
/* Aliases legacy */
--terracotta: var(--c-accent-1);
--forest: var(--c-accent-2);
--ochre: var(--c-accent-3);
--grad-warm: var(--c-grad);
--bg-dark: var(--ui-bg);
--surface: var(--ui-surface);
--app-bg: var(--ui-bg);
--app-surface: var(--ui-surface);
--border: var(--ui-border);
--border-soft: var(--ui-border-soft);
}
/* Sidebar Méroé : l'onglet actif prend la couleur de sa vue */
[data-theme="meroe"] .sidebar__link--active[data-route="deep-work"] .sidebar__icon,
[data-theme="meroe"] .sidebar__link--active[data-route="deep-work"] .sidebar__label { color: var(--flag-rose-lt); }
[data-theme="meroe"] .sidebar__link--active[data-route="methode-des-j"] .sidebar__icon,
[data-theme="meroe"] .sidebar__link--active[data-route="methode-des-j"] .sidebar__label { color: var(--flag-violet-lt); }
[data-theme="meroe"] .sidebar__link--active[data-route="calendrier"] .sidebar__icon,
[data-theme="meroe"] .sidebar__link--active[data-route="calendrier"] .sidebar__label { color: var(--flag-blue-lt); }
[data-theme="meroe"] .sidebar__link--active[data-route="statistiques"] .sidebar__icon,
[data-theme="meroe"] .sidebar__link--active[data-route="statistiques"] .sidebar__label { color: var(--flag-green-lt); }
/* Méroé : icônes des blocs paramètres teintées par section */
[data-theme="meroe"] .scard__icon {
background: color-mix(in srgb, var(--flag-violet) 16%, transparent);
color: var(--flag-violet-lt);
}
[data-theme="meroe"] #settings-section-calendrier .scard__icon {
background: color-mix(in srgb, var(--flag-blue) 16%, transparent);
color: var(--flag-blue-lt);
}
[data-theme="meroe"] #settings-section-statistiques .scard__icon {
background: color-mix(in srgb, var(--flag-green) 16%, transparent);
color: var(--flag-green-lt);
}
[data-theme="meroe"] #settings-section-methode-des-j .scard__icon {
background: color-mix(in srgb, var(--flag-violet) 22%, transparent);
color: var(--flag-violet-lt);
}
[data-theme="meroe"] #settings-section-deep-work .scard__icon {
background: color-mix(in srgb, var(--flag-orange) 16%, transparent);
color: var(--flag-orange-lt);
}
/* Méroé : verre dépoli sur les ONGLETS actifs uniquement.
Les BOUTONS (.btn--primary / .btn--tint comme .mj-btn--primary, la référence
"Nouvelle matière") gardent le voile statique — sans blur, sans drift. */
[data-theme="meroe"] .dw-mode-tab--active,
[data-theme="meroe"] .stats-tab--active {
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
background-size: 220% 220%, 220% 220%, 220% 220%, 220% 220%;
}
[data-theme="meroe"] .dw-mode-tab--active,
[data-theme="meroe"] .stats-tab--active {
background: var(--m-wash);
color: var(--c-accent-3);
}
/* Méroé : PAS de dérive sur les boutons — la référence "Nouvelle matière"
(.mj-btn--primary) a un voile statique avec hover brightness(1.12) hérité
des règles de base ; .btn--primary / .btn--tint rendent désormais
exactement pareil, sans animation ni blur. */
/* Méroé : hover unique — celui des boutons paramètres (fond + liseré
éclaircis, lift, brightness). Les .mj-btn partagent exactement le même
(voir methode.css), donc aucune surcharge nécessaire ici. */
/* Méroé : onglets des vues Méthode des J au voile, comme les autres onglets */
[data-theme="meroe"] .mj-tab--active {
background: var(--m-wash);
color: var(--c-accent-3);
}
/* Méroé : boutons de polices actifs au voile, comme les autres onglets */
[data-theme="meroe"] .dw-appear-font-btn--active {
background: var(--m-wash);
border-color: transparent;
color: var(--c-accent-3);
}
/* Méroé : aucun onglet actif ne perd sa couleur au survol — il s'éclaire
(la couleur explicite bat les :hover gris des règles de base). */
[data-theme="meroe"] .mj-tab--active:hover,
[data-theme="meroe"] .stats-tab--active:hover,
[data-theme="meroe"] .dw-mode-tab--active:hover,
[data-theme="meroe"] .dw-appear-font-btn--active:hover {
background: var(--m-wash);
color: var(--c-accent-3);
filter: brightness(1.15);
}
/* Méroé : pas de contour sur l'onglet stats actif */
[data-theme="meroe"] .stats-tab--active { box-shadow: none; }
/* Méroé : dégradé franc multicolore, assombri aux tons de la timeline —
légèrement éclairci pour la barre d'avancement du haut */
[data-theme="meroe"] {
--m-grad: linear-gradient(90deg,
color-mix(in srgb, var(--flag-orange) 69%, black),
color-mix(in srgb, var(--flag-violet) 68%, black) 35%,
color-mix(in srgb, var(--flag-blue) 65%, black) 65%,
color-mix(in srgb, var(--flag-rose) 68%, black));
}
[data-theme="meroe"] .card--quote { background: var(--m-wash); background-color: var(--ui-surface); }
[data-theme="meroe"] .progressBar__fill { background: var(--m-grad); }
[data-theme="meroe"] .cal-now-line { background: var(--m-grad); }
[data-theme="meroe"] .tl-now__line { background: var(--flag-orange); opacity: 1; }
[data-theme="meroe"] .cal-week__head-cell--today .cal-week__head-day { background: color-mix(in srgb, var(--flag-orange) 28%, transparent); border-radius: 50%; }
[data-theme="meroe"] .cal-day-col--today { background: rgba(255, 255, 255, 0.025); } /* couleur de la bande aujourd'hui dans le calendrier */
/* Méroé : rond Accueil façon timeline (terracotta / sable) avec orange renforcé.
Dégradé chaud 3 stops : orange profond → terracotta → sable.
Un peu plus foncé pour s'aligner sur la barre du haut. */
[data-theme="meroe"] #ringGradStop1,
[data-theme="meroe"] #dwRingStop1 { stop-color: color-mix(in srgb, var(--flag-orange) 62%, black); }
[data-theme="meroe"] #ringGradStop2,
[data-theme="meroe"] #dwRingStop2 { stop-color: color-mix(in srgb, #c4a35a 68%, black); }
/* Stop médian du rond d'accueil : terracotta timeline.
(!important requis : le stop porte un style inline par défaut.) */
[data-theme="meroe"] #ringGradStopMid { stop-color: color-mix(in srgb, #b8614e 70%, black) !important; }
/* Méroé : blocs de chronologie assombris (teintes sémantiques gardées) —
remonté à .86 pour être juste un peu moins transparent */
[data-theme="meroe"] .tl-block { filter: brightness(.8); }
/* Méroé : heatmap d'activité en violet */
[data-theme="meroe"] .heatmap__cell--1 { --hm-color: color-mix(in srgb, var(--flag-violet) 22%, transparent); }
[data-theme="meroe"] .heatmap__cell--2 { --hm-color: color-mix(in srgb, var(--flag-violet) 42%, transparent); }
[data-theme="meroe"] .heatmap__cell--3 { --hm-color: color-mix(in srgb, var(--flag-violet) 65%, transparent); }
[data-theme="meroe"] .heatmap__cell--4 { --hm-color: var(--flag-violet); }
/* ───────────────────────────────────────────────────────────
6. THÈME : Ocean
─────────────────────────────────────────────────────────── */
[data-theme="ocean"] {
--c-accent-1: #2d7dd2;
--c-accent-2: #1a4a6b;
--c-accent-3: #37c3ff;
--c-accent-1-light: rgba( 45, 125, 210, 0.2);
--c-accent-1-mid: rgba( 45, 125, 210, 0.34);
--c-accent-2-light: rgba( 26, 74, 107, 0.16);
--c-accent-3-light: rgba( 56, 178, 232, 0.13);
--c-accent-3-mid: rgba( 56, 178, 232, 0.28);
--c-accent-1-hover: #3d8de0;
--c-grad: linear-gradient( 90deg, #2d7dd2, #38b2e8);
--c-grad-v: linear-gradient(135deg, #2d7dd2, #38b2e8);
--grad-stop-1: #2d7dd2;
--grad-stop-2: #38b2e8;
--quote-grad-1: rgba( 20, 60, 130, 0.22);
--quote-grad-2: rgba( 45, 125, 210, 0.18);
--quote-grad-3: rgba( 56, 178, 232, 0.08);
--ui-bg: #111110;
--ui-surface: #1c1917;
--ui-surface-2: #221e1a;
--ui-surface-3: #2a2520;
--ui-border: rgba(255, 255, 255, 0.12);
--ui-border-soft: rgba(255, 255, 255, 0.08);
--ui-border-focus: rgba(45, 125, 210, 0.55);
--btn-primary-bg: #2d7dd2;
--btn-primary-bg-h: #3d8de0;
--btn-primary-bg-a: #2470c0;
--btn-primary-shadow: rgba( 45, 125, 210, 0.28);
--btn-primary-shadow-h: rgba( 45, 125, 210, 0.50);
--btn-tint-bg: rgba( 45, 125, 210, 0.13);
--btn-tint-bg-h: rgba( 45, 125, 210, 0.22);
--btn-tint-bg-a: rgba( 45, 125, 210, 0.08);
--btn-tint-border: rgba( 45, 125, 210, 0.26);
--btn-tint-text: #38b2e8;
--terracotta: var(--c-accent-1);
--grad-warm: var(--c-grad);
--bg-dark: var(--ui-bg);
--surface: var(--ui-surface);
--app-bg: var(--ui-bg);
--app-surface: var(--ui-surface);
--border: var(--ui-border);
--border-soft: var(--ui-border-soft);
}
/* ───────────────────────────────────────────────────────────
7. THÈME : Violet
─────────────────────────────────────────────────────────── */
[data-theme="violet"] {
--c-accent-1: #be81d6;
--c-accent-2: #894aad;
--c-accent-3: #e1a1ff;
--c-accent-1-light: rgba(124, 58, 237, 0.2);
--c-accent-1-mid: rgba(124, 58, 237, 0.34);
--c-accent-2-light: rgba( 76, 29, 149, 0.16);
--c-accent-3-light: rgba(167, 139, 250, 0.13);
--c-accent-3-mid: rgba(171, 147, 243, 0.28);
--c-accent-1-hover: #b14cf5;
--c-grad: linear-gradient( 90deg, #9c3aed, #da8bfa);
--c-grad-v: linear-gradient(135deg, #b43aed, #ed8bfa);
--grad-stop-1: #7c3e99;
--grad-stop-2: #c393f0;
--quote-grad-1: rgba(101, 36, 138, 0.22);
--quote-grad-2: rgba(180, 58, 237, 0.18);
--quote-grad-3: rgba(215, 139, 250, 0.08);
--ui-bg: #111110;
--ui-surface: #1c1917;
--ui-surface-2: #251f1b;
--ui-surface-3: #2e2620;
--ui-border: rgba(255, 255, 255, 0.12);
--ui-border-soft: rgba(255, 255, 255, 0.08);
--ui-border-focus: rgba(171, 58, 237, 0.55);
--btn-primary-bg: #b43aed;
--btn-primary-bg-h: #c04ff7;
--btn-primary-bg-a: #a030d8;
--btn-primary-shadow: rgba(150, 58, 237, 0.28);
--btn-primary-shadow-h: rgba(150, 58, 237, 0.50);
--btn-tint-bg: rgba(165, 58, 237, 0.13);
--btn-tint-bg-h: rgba(180, 58, 237, 0.22);
--btn-tint-bg-a: rgba(165, 58, 237, 0.08);
--btn-tint-border: rgba(171, 58, 237, 0.26);
--btn-tint-text: #c48bfa;
--terracotta: var(--c-accent-1);
--grad-warm: var(--c-grad);
--bg-dark: var(--ui-bg);
--surface: var(--ui-surface);
--app-bg: var(--ui-bg);
--app-surface: var(--ui-surface);
--border: var(--ui-border);
--border-soft: var(--ui-border-soft);
}
/* ───────────────────────────────────────────────────────────
8. THÈME : Rose
─────────────────────────────────────────────────────────── */
[data-theme="rose"] {
--c-accent-1: #e0457b;
--c-accent-2: #6b1f3a;
--c-accent-3: #ff90b5;
--c-accent-1-light: rgba(224, 69, 123, 0.2);
--c-accent-1-mid: rgba(224, 69, 123, 0.32);
--c-accent-2-light: rgba(107, 31, 58, 0.16);
--c-accent-3-light: rgba(244, 160, 188, 0.13);
--c-accent-3-mid: rgba(244, 160, 188, 0.26);
--c-accent-1-hover: #ec5588;
--c-grad: linear-gradient( 90deg, #e0457b, #f4a0bc);
--c-grad-v: linear-gradient(135deg, #e0457b, #f4a0bc);
--grad-stop-1: #e0457b;
--grad-stop-2: #f4a0bc;
--quote-grad-1: rgba(150, 37, 78, 0.274);
--quote-grad-2: rgba(224, 69, 123, 0.18);
--quote-grad-3: rgba(244, 160, 188, 0.08);
--ui-bg: #111110;
--ui-surface: #1c1917;
--ui-surface-2: #271f19;
--ui-surface-3: #2f251e;
--ui-border: rgba(255, 255, 255, 0.12);
--ui-border-soft: rgba(255, 255, 255, 0.08);
--ui-border-focus: rgba(224, 69, 123, 0.55);
--btn-primary-bg: #e0457b;
--btn-primary-bg-h: #ec5588;
--btn-primary-bg-a: #d03870;
--btn-primary-shadow: rgba(224, 69, 123, 0.26);
--btn-primary-shadow-h: rgba(224, 69, 123, 0.48);
--btn-tint-bg: rgba(224, 69, 123, 0.13);
--btn-tint-bg-h: rgba(224, 69, 123, 0.22);
--btn-tint-bg-a: rgba(224, 69, 123, 0.08);
--btn-tint-border: rgba(224, 69, 123, 0.26);
--btn-tint-text: #f4a0bc;
--terracotta: var(--c-accent-1);
--grad-warm: var(--c-grad);
--bg-dark: var(--ui-bg);
--surface: var(--ui-surface);
--app-bg: var(--ui-bg);
--app-surface: var(--ui-surface);
--border: var(--ui-border);
--border-soft: var(--ui-border-soft);
}
/* ───────────────────────────────────────────────────────────
9. THÈME : Ardoise
─────────────────────────────────────────────────────────── */
[data-theme="slate"] {
--c-accent-1: #59606b;
--c-accent-2: #374252;
--c-accent-3: #a5adb8;
--c-accent-1-light: rgba(100, 116, 139, 0.2);
--c-accent-1-mid: rgba(112, 118, 128, 0.34);
--c-accent-2-light: rgba( 61, 66, 75, 0.16);
--c-accent-3-light: rgba(148, 163, 184, 0.13);
--c-accent-3-mid: rgba(148, 163, 184, 0.26);
--c-accent-1-hover: #858d99;
--c-grad: linear-gradient( 90deg, #6d737a, #9fa6af);
--c-grad-v: linear-gradient(135deg, #7a7f86, #a1a4a8);
--grad-stop-1: #646668;
--grad-stop-2: #9d9fa1;
--quote-grad-1: rgba(62, 71, 83, 0.22);
--quote-grad-2: rgba(112, 121, 134, 0.18);
--quote-grad-3: rgba(155, 165, 179, 0.08);
--ui-bg: #111110;
--ui-surface: #1a1917;
--ui-surface-2: #231f1b;
--ui-surface-3: #2b2720;
--ui-border: rgba(255, 255, 255, 0.12);
--ui-border-soft: rgba(255, 255, 255, 0.08);
--ui-border-focus: rgba(110, 114, 119, 0.55);
--btn-primary-bg: #747b85;
--btn-primary-bg-h: #82898f;
--btn-primary-bg-a: #676d76;
--btn-primary-shadow: rgba(100, 116, 139, 0.24);
--btn-primary-shadow-h: rgba(100, 116, 139, 0.44);
--btn-tint-bg: rgba(100, 116, 139, 0.13);
--btn-tint-bg-h: rgba(100, 116, 139, 0.22);
--btn-tint-bg-a: rgba(100, 116, 139, 0.08);
--btn-tint-border: rgba(100, 108, 119, 0.26);
--btn-tint-text: #94a3b8;
--terracotta: var(--c-accent-1);
--grad-warm: var(--c-grad);
--bg-dark: var(--ui-bg);
--surface: var(--ui-surface);
--app-bg: var(--ui-bg);
--app-surface: var(--ui-surface);
--border: var(--ui-border);
--border-soft: var(--ui-border-soft);
}