/* ══════════════════════════════════════════════════════════════════
* Agenda. — Design tokens & composants de base
* ─────────────────────────────────────────────
* Charte extraite de l'application Agenda. (v1.9.18 — mai 2026).
* À inclure tel quel dans un projet pour repartir sur le même
* univers visuel. Voir AGENDA_DESIGN_SYSTEM.md pour la doc.
*
* Import polices (à ajouter au du HTML) :
*
*
* ══════════════════════════════════════════════════════════════════ */
/* ── 1. THÈMES ADAPTATIFS (optionnel) ──────────────────────────────
* Le body peut recevoir l'une de ces classes pour basculer entre
* cinq palettes liées au moment de la journée. Si vous n'en voulez
* qu'une, gardez seulement le bloc `:root` plus bas.
* ───────────────────────────────────────────────────────────────── */
:root {
--theme-transition: background 90s linear, color 90s linear, border-color 90s linear;
}
/* Nuit (22h–05h) — défaut, fond sombre */
body.theme-night {
--bg: #0f0f11;
--surface: #17171a;
--surface2: #1e1e22;
--surface3: #26262c;
--border: #2e2e35;
--border2: #3a3a44;
--text: #e8e8ef;
--text2: #9898a8;
--text3: #5a5a6e;
--accent: #7c6af7;
--accent2: #a594ff;
--accent-soft: rgba(124, 106, 247, 0.12);
--hour-line: rgba(255, 255, 255, 0.04);
}
/* Aube (05h–07h30) — violet/prune sombre */
body.theme-dawn {
--bg: #1a1320;
--surface: #221929;
--surface2: #2c2135;
--surface3: #372a42;
--border: #3d2f4a;
--border2: #503e5e;
--text: #ede0f5;
--text2: #b39cc8;
--text3: #7a6090;
--accent: #c084fc;
--accent2: #e0aaff;
--accent-soft: rgba(192,132,252,0.12);
--hour-line: rgba(255, 255, 255, 0.05);
}
/* Matin (07h30–12h) — cream clair */
body.theme-morning {
--bg: #f5f3ee;
--surface: #fdfcf9;
--surface2: #f0ede6;
--surface3: #e8e3d8;
--border: #d8d2c4;
--border2: #c4bdb0;
--text: #2a2520;
--text2: #6b6258;
--text3: #a09488;
--accent: #5b4fcf;
--accent2: #7c6af7;
--accent-soft: rgba(91,79,207,0.10);
--hour-line: rgba(0, 0, 0, 0.06);
}
/* Après-midi (12h–17h30) — gris-bleu clair */
body.theme-afternoon {
--bg: #eef2f7;
--surface: #f8fafd;
--surface2: #e6edf5;
--surface3: #d8e4f0;
--border: #c8d8e8;
--border2: #b0c8de;
--text: #1a2535;
--text2: #526070;
--text3: #8898a8;
--accent: #2563eb;
--accent2: #4f86f7;
--accent-soft: rgba(37,99,235,0.10);
--hour-line: rgba(0, 0, 0, 0.05);
}
/* Crépuscule (17h30–20h) — brun-ambré sombre */
body.theme-dusk {
--bg: #1c1510;
--surface: #241c15;
--surface2: #2e231a;
--surface3: #3a2d22;
--border: #4a3828;
--border2: #5e4a36;
--text: #f0e4d0;
--text2: #c0a882;
--text3: #80684a;
--accent: #f59e0b;
--accent2: #fbbf24;
--accent-soft: rgba(245,158,11,0.12);
--hour-line: rgba(255, 255, 255, 0.04);
}
/* ── 2. THÈME PAR DÉFAUT (Nuit) + tokens partagés ───────────────── */
:root {
/* Surfaces */
--bg: #0f0f11;
--surface: #17171a;
--surface2: #1e1e22;
--surface3: #26262c;
--border: #2e2e35;
--border2: #3a3a44;
/* Texte */
--text: #e8e8ef;
--text2: #9898a8;
--text3: #5a5a6e;
/* Accent */
--accent: #7c6af7;
--accent2: #a594ff;
/* Sémantiques */
--color-success: #4ade80;
--color-error: #e05252;
--color-warning: #f59e0b;
--color-flex: #34d399;
/* Catégories (8 + gris) */
--cat-blue: #3b7dd8;
--cat-green: #3d9e6e;
--cat-orange: #c97a2f;
--cat-red: #c75151;
--cat-purple: #8b5cf6;
--cat-teal: #2f9fa8;
--cat-pink: #c45c8a;
--cat-yellow: #a89030;
--cat-grey: #5a5a6e;
/* Forme */
--radius: 6px;
--radius-sm: 4px;
/* Typographie */
--font-display: 'Playfair Display', Georgia, serif;
--font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-mono: 'DM Mono', ui-monospace, monospace;
/* Détails */
--hour-line: rgba(255, 255, 255, 0.04);
}
/* ── 3. RESET MINIMAL ──────────────────────────────────────────── */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: var(--surface);
color: var(--text);
font-family: var(--font-body);
font-size: 13px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transition: background 1s ease, color 1s ease;
touch-action: manipulation;
}
/* ── 4. WORDMARK ──────────────────────────────────────────────── */
.logo {
font-family: var(--font-display);
font-size: 18px;
color: var(--text);
letter-spacing: -0.3px;
white-space: nowrap;
}
.logo span { color: var(--accent2); }
.logo-large {
font-family: var(--font-display);
font-size: 28px;
color: var(--text);
text-align: center;
}
.logo-large span { color: var(--accent2); }
/* ── 5. BOUTONS ────────────────────────────────────────────────── */
.btn {
padding: 5px 12px;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
background: transparent;
color: var(--text2);
font-family: var(--font-body);
font-size: 12px;
cursor: pointer;
transition: all 0.15s;
display: inline-flex;
align-items: center;
gap: 5px;
white-space: nowrap;
}
.btn:hover {
background: var(--surface2);
color: var(--text);
border-color: var(--border2);
}
.btn.primary {
background: var(--accent);
color: #fff;
border-color: var(--accent);
}
.btn.primary:hover {
background: var(--accent2);
border-color: var(--accent2);
}
.btn-delete {
color: var(--color-error);
border-color: var(--color-error);
}
.btn-delete:hover {
background: rgba(224, 82, 82, 0.12);
}
.btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* ── 6. CHAMPS DE FORMULAIRE ─────────────────────────────────── */
.field {
margin-bottom: 14px;
}
.field-row > .field { margin-bottom: 0; }
.field-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 14px;
}
.field label {
display: block;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text3);
margin-bottom: 5px;
font-weight: 600;
}
.field input,
.field select,
.field textarea {
width: 100%;
background: var(--surface2);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
color: var(--text);
font-family: var(--font-body);
font-size: 13px;
padding: 7px 10px;
transition: border-color 0.15s;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
outline: none;
border-color: var(--accent);
}
.field textarea {
resize: vertical;
min-height: 60px;
}
.field select option {
background: var(--surface2);
}
/* ── 7. MODALE ────────────────────────────────────────────────── */
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.6);
z-index: 1200;
display: none;
align-items: center;
justify-content: center;
backdrop-filter: blur(4px);
}
.modal-overlay.open {
display: flex;
}
.modal {
background: var(--surface);
border: 1px solid var(--border2);
border-radius: 10px;
padding: 24px;
width: 520px;
max-width: 92vw;
max-height: 92vh;
overflow-y: auto;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
animation: modal-in 0.18s ease;
}
.modal-title {
display: flex;
align-items: center;
justify-content: space-between;
font-family: var(--font-display);
font-size: 18px;
margin-bottom: 18px;
color: var(--text);
}
.modal-title-text { flex: 1; }
.modal-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
margin-top: 20px;
}
@keyframes modal-in {
from { opacity: 0; transform: scale(0.96) translateY(6px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
/* ── 8. BOTTOM SHEET (mobile) ──────────────────────────────────── */
.sheet-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.55);
z-index: 500;
display: none;
align-items: flex-end;
}
.sheet-overlay.open { display: flex; }
.sheet {
width: 100%;
background: var(--surface);
border-radius: 20px 20px 0 0;
border-top: 1px solid var(--border2);
max-height: 92vh;
display: flex;
flex-direction: column;
overflow: hidden;
animation: sheet-in 0.28s cubic-bezier(0.25, 0, 0.2, 1);
}
.sheet-handle {
width: 36px;
height: 4px;
background: var(--border2);
border-radius: 2px;
margin: 10px auto 0;
flex-shrink: 0;
cursor: pointer;
}
.sheet-header {
display: flex;
align-items: center;
padding: 10px 14px 12px;
border-bottom: 1px solid var(--border);
gap: 8px;
flex-shrink: 0;
}
.sheet-nav {
background: var(--surface2);
border: 1px solid var(--border2);
color: var(--text);
border-radius: var(--radius-sm);
width: 36px;
height: 36px;
font-size: 20px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.12s;
flex-shrink: 0;
}
.sheet-nav:active { background: var(--surface3); }
.sheet-nav:disabled { opacity: 0.3; cursor: default; }
.sheet-title {
flex: 1;
text-align: center;
font-family: var(--font-display);
font-size: 16px;
color: var(--text);
line-height: 1.2;
}
.sheet-body {
flex: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}
@keyframes sheet-in {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
/* ── 9. ONGLETS ────────────────────────────────────────────────── */
.tabs-row {
display: flex;
align-items: center;
gap: 0;
border-bottom: 1px solid var(--border);
}
.tab-item {
position: relative;
display: flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
font-size: 12px;
color: var(--text3);
background: transparent;
border: none;
cursor: pointer;
font-family: var(--font-body);
transition: color 0.12s, background 0.12s;
}
.tab-item:hover {
background: var(--surface2);
color: var(--text2);
}
.tab-item.active {
color: var(--text);
font-weight: 500;
}
.tab-item.active::after {
content: '';
position: absolute;
left: 8px;
right: 8px;
bottom: -1px;
height: 2px;
background: var(--accent);
border-radius: 2px 2px 0 0;
}
.tab-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--cat-color, var(--accent));
flex-shrink: 0;
}
/* ── 10. SAVE STATUS ──────────────────────────────────────────── */
.save-status {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 11px;
color: var(--text3);
white-space: nowrap;
transition: opacity 0.4s;
}
.save-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--text3);
transition: background 0.3s;
flex-shrink: 0;
}
.save-status.saved .save-dot { background: var(--color-success); }
.save-status.saving .save-dot { background: var(--accent2); animation: pulse 0.6s infinite; }
.save-status.unsaved .save-dot { background: var(--color-warning); }
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
/* ── 11. CHIPS / PILLS ─────────────────────────────────────────── */
.chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
border-radius: 20px;
border: 1.5px solid var(--border);
background: var(--surface2);
color: var(--text2);
font-family: var(--font-body);
font-size: 12px;
cursor: pointer;
transition: all 0.12s;
white-space: nowrap;
}
.chip:hover { border-color: var(--accent); }
.chip.active {
color: #fff;
border-color: transparent;
background: var(--cat-color, var(--accent));
}
/* ── 12. CHAMP CODE / OTP ─────────────────────────────────────── */
.otp-row {
display: flex;
justify-content: center;
gap: 8px;
}
.otp-digit {
width: 44px;
height: 54px;
background: var(--surface2);
border: 1px solid var(--border2);
border-radius: var(--radius-sm);
color: var(--text);
font-family: var(--font-mono);
font-size: 24px;
font-weight: 600;
text-align: center;
caret-color: var(--accent);
transition: border-color 0.15s;
}
.otp-digit:focus {
outline: none;
border-color: var(--accent);
}
/* ── 13. NOTICE / CALLOUT ─────────────────────────────────────── */
.notice {
padding: 14px 16px;
border-radius: 8px;
background: var(--surface2);
border: 1px solid var(--border);
color: var(--text2);
font-size: 14px;
line-height: 1.5;
margin: 0 0 18px;
}
.notice.ok { border-color: #3aa15f; color: #3aa15f; }
.notice.err { border-color: #c95a4a; color: #c95a4a; }
.callout {
margin: 18px 0;
padding: 14px 18px;
background: var(--surface2);
border-left: 3px solid var(--accent);
border-radius: 4px;
color: var(--text);
font-size: 14px;
line-height: 1.6;
}
/* ── 14. HEADER APP ──────────────────────────────────────────── */
.app-header {
display: flex;
align-items: center;
gap: 14px;
padding: 8px 16px;
background: var(--surface);
border-bottom: 1px solid var(--border);
flex-shrink: 0;
z-index: 10;
}
.nav-separator {
width: 1px;
height: 20px;
background: var(--border);
flex-shrink: 0;
}
/* ── 15. CARTE DE LOGIN ──────────────────────────────────────── */
.login-card {
background: var(--surface);
border: 1px solid var(--border2);
border-radius: 16px;
padding: 40px 36px;
width: min(380px, 90vw);
display: flex;
flex-direction: column;
gap: 20px;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.login-subtitle {
font-size: 12px;
color: var(--text3);
text-align: center;
margin-top: -12px;
}
.login-error {
font-size: 12px;
color: var(--color-error);
text-align: center;
min-height: 16px;
}
/* ── 16. SCROLLBARS DISCRÈTES ─────────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
background: var(--border2);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: var(--text3); }
/* ── 17. UTILITAIRES ────────────────────────────────────────── */
.text-display { font-family: var(--font-display); }
.text-body { font-family: var(--font-body); }
.text-mono { font-family: var(--font-mono); }
.text-secondary { color: var(--text2); }
.text-muted { color: var(--text3); }
.label-cap {
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text3);
}
/* ── 18. PILL TOGGLE BUTTON ──────────────────────────────────── *
* Bouton bascule rond façon « pill » (capsule). Utilisé pour les
* options optionnelles d'un événement (Flexible, Récurrence, Échéance).
* S'allume avec une couleur thématique passée en var --pill-color. */
.pill-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
border-radius: 20px;
border: 1.5px solid var(--border2);
background: transparent;
color: var(--text2);
font-family: var(--font-body);
font-size: 13px;
cursor: pointer;
transition: all 0.15s;
outline: none;
}
.pill-btn:hover { border-color: var(--border); color: var(--text); }
.pill-btn.active {
border-color: var(--pill-color, var(--accent));
background: color-mix(in srgb, var(--pill-color, var(--accent)) 12%, transparent);
color: var(--pill-color, var(--accent));
}
/* ── 19. CHECKBOX / RADIO ──────────────────────────────────── *
* Checkbox natif customisé via accent-color (la voie simple et
* compatible). Pas de fake checkbox via div + ::before. */
.checkbox-row {
display: flex;
align-items: center;
gap: 8px;
}
.checkbox-row input[type="checkbox"],
.checkbox-row input[type="radio"] {
width: 15px;
height: 15px;
accent-color: var(--accent);
cursor: pointer;
flex-shrink: 0;
}
.checkbox-row label {
font-size: 12px;
color: var(--text2);
cursor: pointer;
user-select: none;
}
/* ── 20. DONE-TOGGLE (cible large « Terminé ») ──────────────── *
* Variante de toggle avec libellé pleine largeur, pour boutons
* type « Marquer comme terminé », « Validé », « Vu », etc. */
.done-toggle {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
padding: 11px 14px;
border-radius: var(--radius);
border: 1.5px solid var(--border2);
background: var(--surface2);
cursor: pointer;
transition: background 0.15s, border-color 0.15s;
user-select: none;
}
.done-toggle:hover { border-color: var(--accent); }
.done-toggle.is-done {
background: rgba(61, 158, 110, 0.12);
border-color: #3d9e6e;
}
.done-toggle-icon {
width: 24px;
height: 24px;
border-radius: 50%;
border: 2px solid var(--border2);
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
flex-shrink: 0;
transition: background 0.15s, border-color 0.15s;
color: transparent;
}
.done-toggle.is-done .done-toggle-icon {
background: #3d9e6e;
border-color: #3d9e6e;
color: #fff;
}
.done-toggle-label {
font-size: 13px;
font-weight: 500;
color: var(--text2);
transition: color 0.15s;
}
.done-toggle.is-done .done-toggle-label { color: #3d9e6e; }
/* ── 21. DROPDOWN MENU (popover) ────────────────────────────── *
* Menu contextuel ouvert par un bouton (sélecteur de vue, etc.).
* Compatible mobile : sur mobile, on bascule vers .sheet plutôt
* que d'utiliser ce dropdown. */
.dropdown-menu {
position: absolute;
top: calc(100% + 4px);
left: 0;
background: var(--surface2);
border: 1px solid var(--border2);
border-radius: var(--radius-sm);
overflow: hidden;
z-index: 200;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
display: none;
flex-direction: column;
min-width: 200px;
}
.dropdown-menu.open { display: flex; }
.dropdown-item {
display: flex;
align-items: center;
width: 100%;
padding: 7px 14px;
background: transparent;
border: none;
color: var(--text2);
font-family: var(--font-body);
font-size: 13px;
text-align: left;
cursor: pointer;
transition: background 0.1s, color 0.1s;
gap: 6px;
}
.dropdown-item:hover {
background: var(--surface3);
color: var(--text);
}
.dropdown-item.active {
color: var(--accent);
font-weight: 500;
}
.dropdown-divider {
height: 1px;
background: var(--border);
margin: 4px 0;
}
.dropdown-section-title {
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text3);
padding: 8px 14px 4px;
}
/* ── 22. TOAST (notification éphémère) ───────────────────────── *
* Apparaît en bas à droite, ~3s. Optionnellement avec un bouton
* "Annuler" séparé par une barre verticale. */
.toast {
position: fixed;
bottom: 20px;
right: 20px;
background: var(--surface2);
border: 1px solid var(--border2);
border-radius: var(--radius);
padding: 10px 16px;
font-size: 12px;
color: var(--text2);
z-index: 9999;
opacity: 0;
transform: translateY(10px);
transition: all 0.2s;
pointer-events: none;
display: flex;
align-items: center;
gap: 10px;
}
.toast.show {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.toast-undo {
color: var(--accent2);
cursor: pointer;
font-size: 11px;
white-space: nowrap;
opacity: 0.9;
border-left: 1px solid var(--border2);
padding-left: 10px;
background: none;
border-top: 0;
border-right: 0;
border-bottom: 0;
font-family: var(--font-body);
}
.toast-undo:hover {
opacity: 1;
text-decoration: underline;
}
/* ── 23. WELCOME / EMPTY STATE ───────────────────────────────── *
* Centré verticalement et horizontalement. Icône grosse et
* désaturée, titre Playfair, paragraphe texte tertiaire. */
.welcome {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
color: var(--text3);
text-align: center;
padding: 40px 20px;
}
.welcome-icon {
font-size: 52px;
opacity: 0.3;
}
.welcome h2 {
font-family: var(--font-display);
font-size: 22px;
color: var(--text2);
font-weight: 400;
margin: 0;
}
.welcome p {
font-size: 12px;
line-height: 1.7;
max-width: 340px;
margin: 0;
}
.welcome-drop-area {
margin-top: 8px;
border: 2px dashed var(--border2);
border-radius: 10px;
padding: 24px 40px;
cursor: pointer;
transition: all 0.2s;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.welcome-drop-area:hover {
border-color: var(--accent);
background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.welcome-drop-area span {
font-size: 12px;
color: var(--text2);
}
/* ── 24. TOOLTIP (HTML pur, pas d'attribut title) ───────────── *
* Un wrapper .has-tooltip + un .tooltip enfant (initial display:none).
* Pas de positioning auto-magique : on assume top:100% par défaut. */
.has-tooltip {
position: relative;
display: inline-flex;
}
.tooltip {
position: absolute;
top: calc(100% + 6px);
left: 50%;
transform: translateX(-50%);
background: var(--surface3);
border: 1px solid var(--border2);
color: var(--text);
font-family: var(--font-body);
font-size: 11px;
padding: 5px 9px;
border-radius: var(--radius-sm);
white-space: nowrap;
pointer-events: none;
opacity: 0;
transition: opacity 0.15s;
z-index: 1000;
}
.has-tooltip:hover .tooltip { opacity: 1; }
/* ── 25. TABLEAU LISTE ──────────────────────────────────────── *
* Header sticky en haut, étiquettes 10px UPPERCASE, bordure double
* en bas du header. Pour vues type liste / tableau de tâches. */
.list-table {
width: 100%;
border-collapse: collapse;
}
.list-table thead th {
position: sticky;
top: 0;
background: var(--surface);
padding: 9px 8px;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--text3);
text-align: left;
border-bottom: 2px solid var(--border2);
}
.list-table tbody tr {
border-bottom: 1px solid var(--border);
transition: background 0.1s;
}
.list-table tbody tr:hover { background: var(--surface2); }
.list-table tbody td {
padding: 10px 8px;
font-size: 13px;
color: var(--text);
}
/* ── 26. BADGE (compteur) ──────────────────────────────────── */
.badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 6px;
border-radius: 10px;
background: var(--accent);
color: #fff;
font-family: var(--font-body);
font-size: 11px;
font-weight: 600;
line-height: 1;
}
.badge.muted {
background: var(--surface3);
color: var(--text2);
border: 1px solid var(--border2);
}
.badge.warn { background: var(--color-warning); }
.badge.error { background: var(--color-error); }
/* ── 27. THEME SWITCHER ─────────────────────────────────────── *
* Bouton flottant ou inline qui ouvre un menu listant les 6 options
* (Auto + 5 thèmes). Icône SVG du thème actif sur le bouton, cercle
* pointillé autour si mode Auto. */
.theme-switcher {
position: fixed;
top: 14px;
right: 16px;
z-index: 9999;
}
.theme-switcher.inline {
position: relative;
top: auto;
right: auto;
display: inline-flex;
align-items: center;
}
.theme-btn {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 9px;
padding: 6px 8px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--text3);
transition: background 0.12s, border-color 0.12s, color 0.12s;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.theme-switcher.inline .theme-btn { box-shadow: none; }
.theme-btn:hover {
background: var(--surface2);
border-color: var(--border2);
color: var(--text);
}
.theme-btn svg { display: block; }
.theme-menu {
position: absolute;
top: calc(100% + 6px);
right: 0;
background: var(--surface);
border: 1px solid var(--border2);
border-radius: 10px;
padding: 6px;
min-width: 162px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
display: none;
z-index: 9999;
}
.theme-menu.open { display: block; }
.theme-menu-title {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--text3);
padding: 4px 8px 8px;
border-bottom: 1px solid var(--border);
margin-bottom: 4px;
}
.theme-opt {
display: flex;
align-items: center;
gap: 9px;
width: 100%;
padding: 7px 8px;
background: none;
border: none;
border-radius: 6px;
cursor: pointer;
font-family: var(--font-body);
font-size: 13px;
color: var(--text2);
transition: background 0.1s, color 0.1s;
}
.theme-opt:hover {
background: var(--surface2);
color: var(--text);
}
.theme-opt.active {
color: var(--accent);
font-weight: 500;
}
.theme-icon-wrap {
display: flex;
align-items: center;
flex-shrink: 0;
color: var(--text3);
}
.theme-opt:hover .theme-icon-wrap { color: var(--text); }
.theme-opt.active .theme-icon-wrap { color: var(--accent); }
.theme-opt-label { flex: 1; text-align: left; }
.theme-opt-check {
font-size: 11px;
color: var(--accent);
}
/* ── 28. OTP CARD ─────────────────────────────────────────── *
* Carte centrée pour la saisie d'un code à 6 chiffres. À utiliser
* avec le countdown circulaire (.otp-countdown) ci-dessous. */
.otp-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 16px;
width: 100%;
max-width: 420px;
padding: 44px 40px 40px;
margin: 0 auto;
}
.otp-title {
font-family: var(--font-display);
font-size: 20px;
color: var(--text);
margin-bottom: 8px;
}
.otp-subtitle {
font-size: 13px;
color: var(--text3);
margin-bottom: 8px;
font-weight: 300;
line-height: 1.6;
}
.otp-email {
font-size: 13px;
color: var(--text2);
font-weight: 500;
margin-bottom: 28px;
font-family: var(--font-mono);
}
/* Cases code (variante de .otp-digit, plus grandes) */
.otp-row.otp-row-large {
display: flex;
gap: 10px;
justify-content: center;
margin-bottom: 24px;
}
.otp-row.otp-row-large .otp-digit {
width: 52px;
height: 64px;
background: var(--surface2);
border: 2px solid var(--border);
border-radius: 10px;
font-family: var(--font-body);
font-size: 28px;
font-weight: 500;
color: var(--text);
text-align: center;
outline: none;
transition: border-color 0.15s, background 0.15s;
-webkit-appearance: none;
caret-color: var(--accent);
}
.otp-row.otp-row-large .otp-digit:focus {
border-color: var(--accent);
background: var(--surface3);
}
.otp-row.otp-row-large .otp-digit.filled { border-color: var(--border2); }
@media (max-width: 480px) {
.otp-card { padding: 32px 20px 28px; }
.otp-row.otp-row-large .otp-digit { width: 44px; height: 56px; font-size: 22px; }
.otp-row.otp-row-large { gap: 7px; }
}
.otp-submit {
width: 100%;
background: var(--accent);
color: #fff;
border: none;
border-radius: 8px;
padding: 12px;
font-family: var(--font-body);
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: opacity 0.15s;
letter-spacing: 0.01em;
justify-content: center;
}
.otp-submit:hover { opacity: 0.88; }
.otp-submit:disabled {
opacity: 0.35;
cursor: not-allowed;
}
.otp-footer {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 20px;
padding-top: 18px;
border-top: 1px solid var(--border);
}
.otp-back {
font-size: 12px;
color: var(--text3);
text-decoration: none;
transition: color 0.12s;
}
.otp-back:hover { color: var(--text); }
.otp-resend {
background: none;
border: none;
font-family: var(--font-body);
font-size: 13px;
color: var(--accent);
cursor: pointer;
padding: 0;
transition: opacity 0.15s;
}
.otp-resend:hover { opacity: 0.7; }
.otp-resend:disabled {
color: var(--text3);
cursor: default;
}
/* ── 29. COUNTDOWN CIRCULAIRE ────────────────────────────────── *
* Cercle SVG dont l'arc décroît proportionnellement au temps restant.
* Utiliser avec stroke-dasharray=119.38 (= 2π × 19, le rayon).
* Le JS calcule stroke-dashoffset = 119.38 × (1 - pct). */
.otp-countdown {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-bottom: 20px;
font-size: 13px;
color: var(--text3);
}
.otp-countdown-circle {
width: 44px;
height: 44px;
position: relative;
flex-shrink: 0;
}
.otp-countdown-circle svg {
display: block;
}
.otp-countdown-circle circle {
fill: none;
stroke-width: 3;
stroke-linecap: round;
transition: stroke-dashoffset 0.5s linear;
}
.otp-countdown-text {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 500;
color: var(--text2);
/* hérite de DM Sans — plus compact que mono, tient dans le cercle de 36px */
font-variant-numeric: tabular-nums;
}
.otp-countdown-text.expired { color: #c75151; }
/* ── 30. TIME BADGE ────────────────────────────────────────── *
* Petit pill capsule avec un point coloré et une heure HH:MM.
* À mettre à jour en JS toutes les ~30s. */
.time-badge {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 11px;
color: var(--text3);
background: var(--surface2);
border: 1px solid var(--border);
border-radius: 20px;
padding: 3px 10px;
letter-spacing: 0.03em;
font-family: var(--font-mono);
}
.time-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--accent);
flex-shrink: 0;
}
/* ── 31. TOPBAR ──────────────────────────────────────────── *
* Barre supérieure fixe (sticky), wordmark à gauche, actions à
* droite. Pour pages applicatives type dashboard. */
.topbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 32px;
height: 58px;
background: var(--surface);
border-bottom: 1px solid var(--border);
position: sticky;
top: 0;
z-index: 10;
}
.topbar-logo {
font-family: var(--font-display);
font-size: 19px;
font-weight: 400;
color: var(--text);
letter-spacing: -0.02em;
}
.topbar-logo span { color: var(--accent); }
.topbar-actions {
display: flex;
align-items: center;
gap: 12px;
}
@media (max-width: 600px) {
.topbar { padding: 0 16px; height: 52px; }
.topbar-logo { font-size: 17px; }
}
/* ── 32. PAGE TITLE ───────────────────────────────────────── *
* Titre de page principal — Playfair Display 28px, couleur text,
* letter-spacing serré. Utilisé sous la topbar dans les vues. */
.page-title {
font-family: var(--font-display);
font-size: 28px;
font-weight: 400;
color: var(--text);
letter-spacing: -0.02em;
margin-bottom: 6px;
}
.page-subtitle {
font-size: 14px;
color: var(--text3);
margin-bottom: 28px;
line-height: 1.5;
}
/* ── 33. ICON CARD ────────────────────────────────────────── *
* Card avec icône carrée colorée à gauche. Pattern très versatile
* (formation, note, document, projet, événement…). L'icône utilise
* --accent-soft comme fond, ce qui s'adapte au thème actif. */
.icon-card {
display: flex;
align-items: center;
gap: 24px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 14px;
padding: 24px 26px;
transition: border-color 0.15s, transform 0.12s;
cursor: pointer;
}
.icon-card:hover { border-color: var(--accent); }
.icon-card:active { transform: scale(0.997); }
.icon-card-icon {
width: 52px;
height: 52px;
border-radius: 12px;
background: var(--accent-soft);
border: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
color: var(--accent);
flex-shrink: 0;
}
.icon-card-icon.small {
width: 42px;
height: 42px;
border-radius: 10px;
font-size: 18px;
}
.icon-card-body {
flex: 1;
min-width: 0;
}
.icon-card-title {
font-family: var(--font-display);
font-size: 17px;
font-weight: 400;
color: var(--text);
margin-bottom: 4px;
letter-spacing: -0.01em;
}
.icon-card-meta {
font-size: 12px;
color: var(--text3);
display: flex;
align-items: center;
gap: 10px;
}
.icon-card-action {
flex-shrink: 0;
}
/* ── 34. PROGRESS BAR ─────────────────────────────────────── *
* Barre de progression minimaliste : 5px de haut, surface3 en
* fond, accent en remplissage. Toujours discret, jamais de gradient. */
.prog-bar {
flex: 1;
height: 5px;
background: var(--surface3);
border-radius: 5px;
overflow: hidden;
}
.prog-fill {
height: 100%;
background: var(--accent);
border-radius: 5px;
transition: width 0.4s ease;
}
.prog-bar.thick {
height: 8px;
border-radius: 8px;
}
.prog-bar.thick .prog-fill { border-radius: 8px; }
/* Variante avec libellé pourcentage à droite */
.prog-row {
display: flex;
align-items: center;
gap: 10px;
font-size: 12px;
color: var(--text3);
}
.prog-row .prog-pct {
flex-shrink: 0;
font-family: var(--font-mono);
min-width: 36px;
text-align: right;
}
/* ── 35. STATUS BADGE (variantes colorées) ───────────────── *
* Badge "fait" / "en cours" / "à faire" avec teinte sémantique.
* À utiliser dans les listes, dashboards, fiches de tâches. */
.status-badge {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 11px;
font-weight: 500;
border-radius: 20px;
padding: 3px 10px;
border: 1px solid transparent;
white-space: nowrap;
}
.status-badge.done {
color: #3d9e6e;
background: rgba(61, 158, 110, 0.12);
border-color: rgba(61, 158, 110, 0.25);
}
.status-badge.progress {
color: var(--accent);
background: var(--accent-soft);
border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}
.status-badge.todo {
color: var(--text3);
background: var(--surface2);
border-color: var(--border);
}
.status-badge.warn {
color: #c97a2f;
background: rgba(201, 122, 47, 0.12);
border-color: rgba(201, 122, 47, 0.25);
}
.status-badge.error {
color: #c75151;
background: rgba(199, 81, 81, 0.12);
border-color: rgba(199, 81, 81, 0.25);
}