/* ===================================================== BASE.CSS — Foundation partagée pour toutes les pages. Dark mode via classe .dark (sur ou ). ORDRE DE CHARGEMENT : 1. base.css ← ce fichier 2. layout.css ← tokens avancés + composants existants 3. [page].css ← styles spécifiques à la page SECTIONS : ① Tokens light (défaut) ② Tokens dark (.dark) ③ Reset & HTML base ④ Typographie ⑤ Layout & containers (.auth-wrapper, .auth-card, .lgi-*, .rgi-*, page namespaces) ⑥ Composants UI (.lgi-section, field-wrap, hints, form-group, spinner-wrap) ⑦ Utilitaires ⑧ Animations globales (base-* + btn-* keyframes) ⑨ Spinners (.spinner--sweep/flower/dash/dual/tail/…) ⑩ Responsive (breakpoints base + auth fusionnés) ===================================================== */ /* ───────────────────────────────────────────────────── ① TOKENS LIGHT (défaut / mode clair) ───────────────────────────────────────────────────── */ :root { /* ── Palette primitive ── */ --green-50: #ecfdf5; --green-100: #d1fae5; --green-200: #a7f3d0; --green-400: #34d399; --green-500: #22c55e; --green-600: #059669; --green-700: #047857; --green-800: #065f46; --green-900: #064e3b; --red-50: #fef2f2; --red-100: #fee2e2; --red-400: #f87171; --red-500: #ef4444; --red-600: #dc2626; --neutral-50: #f8fafc; --neutral-100: #f1f5f9; --neutral-150: #e1e2e3; --neutral-200: #d1d5db; --neutral-300: #9ca3af; --neutral-400: #6b7280; --neutral-500: #4b5563; --neutral-600: #283249; --neutral-700: #1f2937; --neutral-800: #111827; --neutral-900: #0b1220; /* ── Accent (brand vert) ── */ --accent: #4d7c0f; --accent-light: #65a30d; --accent-dark: #3f6710; --accent-bg: #f7fee7; /* ── Surfaces ── */ --bg: #faf8f2; --card: #ede8d8; --card-2: #f5f1e6; /* ── Texte ── */ --text: #141208; --muted: #5c6614; --muted-2: #8a9428; /* ── Statuts ── */ --success: #4d7c0f; --success-bg: #f7fee7; --warning: #e7a019; --warning-bg: #fff8e6; --danger: #f25a55; --danger-bg: #fff2ef; --info: #2563eb; --info-bg: #f1f8fc; /* ── Inputs ── */ --input-bg: #ffffff; --input-bg-autofill: #ffffff; --input-text: #1a1a08; --input-placeholder: #a0a860; --input-border: #cfd4a0; --input-border-hover: color-mix(in srgb, #6b7280 70%, #111827); --input-border-focus: var(--accent); --input-disabled-bg: color-mix(in srgb, var(--card) 85%, transparent); --input-disabled-text: var(--muted); --input-disabled-border: #b7b7b7; --input-ring-focus: rgba(101, 163, 13, 0.24); --input-ring-danger: rgba(242, 90, 85, 0.25); --input-ring-warning: rgba(231, 160, 25, 0.25); --input-ring-success: rgba(0, 153, 69, 0.25); /* ── Radii ── */ --radius-1: 0.35em; --radius-2: 0.5em; --radius-3: 0.8em; --radius-4: 1.1em; --radius-5: 1.3em; --radius-6: 1.6em; --radius-xl: 1.8em; --radius-pill: 999px; /* input-radius pointe sur l'échelle — changer --radius-3 suffit pour toutes les pages */ --input-radius: var(--radius-3); /* ── Ombres ── */ --shadow-1: 0 1px 8px rgba(0, 0, 0, 0.03); --shadow-2: 0 2px 14px rgba(0, 0, 0, 0.06); --shadow-3: 0 4px 24px rgba(0, 0, 0, 0.08); --shadow-4: 0 10px 44px rgba(0, 0, 0, 0.12); --shadow-accent: 0 8px 30px rgba(77, 124, 15, 0.24); --shadow-accent-sm: 0 4px 14px rgba(77, 124, 15, 0.16); --shadow-accent-glow: 0 2px 18px rgba(77, 124, 15, 0.20); --shadow-danger-glow: 0 2px 22px rgba(242, 90, 85, 0.28); /* ── Spacing ── */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; /* ── Motion ── */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --duration-1: 120ms; --duration-2: 180ms; --duration-3: 260ms; /* ── Layout ── */ --header-height: 60px; --container-max: 1200px; --container-pad: clamp(1.2rem, 4vw, 2.5rem); --page-top: 1.6rem; /* espacement haut — identique sur toutes les pages */ --page-bottom: 2.4rem; /* espacement bas — identique sur toutes les pages */ --auth-card-max-width: 460px; /* login, register, forgot, reset… */ /* ── Typographie ── */ --font-sans: 'Chivo', 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace; /* ── Buttons (tokens composants) ── */ --btn-bg: var(--accent); --btn-bg-hover: var(--accent-dark); /* fix: était #4d7c0f = identique à --accent, donc aucun hover visible */ --btn-fg: #ffffff; --btn-radius: var(--radius-pill); --btn-secondary-bg: #1a2a04; --btn-secondary-bg-hover: #2c4a08; --btn-secondary-fg: #f7fee7; --btn-danger-bg: var(--danger); --btn-danger-bg-hover: #cc2f2f; --btn-ghost-bg: rgba(0, 0, 0, 0.04); --btn-ghost-bg-hover: rgba(0, 0, 0, 0.08); --btn-disabled-bg: color-mix(in srgb, var(--card) 85%, white 15%); --btn-disabled-fg: var(--muted); --btn-primary-disabled-bg: color-mix(in srgb, var(--btn-bg) 40%, white 60%); --btn-primary-disabled-fg: color-mix(in srgb, var(--btn-fg) 40%, black 60%); --btn-secondary-disabled-bg: color-mix(in srgb, var(--btn-secondary-bg) 35%, white 65%); --btn-secondary-disabled-fg: #5c6614; /* texte olive sombre sur fond olive pâle ~4.1:1 */ --btn-danger-disabled-bg: color-mix(in srgb, var(--btn-danger-bg) 40%, white 60%); --btn-danger-disabled-fg: #6b2020; /* bordeaux sombre sur rouge pâle ~6.0:1 */ --btn-ghost-disabled-bg: rgba(0, 0, 0, 0.02); --btn-ghost-disabled-fg: color-mix(in srgb, var(--text) 40%, transparent); /* ── Cards ── */ --card-bg: var(--card); --card-radius: var(--radius-4); --card-shadow: var(--shadow-2); --card-padding: 1.6rem; /* ── Modals ── */ --modal-backdrop-bg: rgba(0, 0, 0, 0.40); --modal-bg: var(--card); --modal-text: var(--text); --modal-radius: var(--radius-4); /* 1.1em — utilise l'échelle */ --modal-shadow: 0 18px 40px rgba(0, 0, 0, 0.14); --modal-border: 1px solid color-mix(in srgb, var(--muted) 28%, transparent); --modal-padding: 1.1rem 1.2rem; --modal-max-width: 560px; /* ── On-color text (toasts, boutons colorés) ── */ --on-accent: #ffffff; --on-danger: #ffeaea; --on-warning: #2a2200; --on-success: #073b2a; --on-info: #eaf3ff; /* ── Misc ── */ --underline-height: 2px; --underline-offset: -2px; } /* ───────────────────────────────────────────────────── ② TOKENS DARK (.dark sur ou ) ───────────────────────────────────────────────────── */ .dark { /* ── Accent ── */ --accent: #a3e635; --accent-light: #bef264; --accent-dark: #84cc16; --accent-bg: #0d1400; /* ── Surfaces ── */ --bg: #0e100a; --card: #181c0e; --card-2: #202614; /* ── Texte ── */ --text: #f4f8e8; --muted: #a8bc48; --muted-2: #728028; /* ── Statuts ── */ --success: #a3e635; --success-bg: #0d1400; --warning: #e7a019; --warning-bg: #2d2311; --danger: #ff8383; --danger-bg: #2a1111; --info: #60a5fa; --info-bg: #192c33; /* ── Inputs ── */ --input-bg: #121508; --input-bg-autofill: #121508; --input-text: #eaf5d0; --input-placeholder: #607030; --input-border: #252e10; --input-border-hover: color-mix(in srgb, #9ca3af 70%, #f9fafc); --input-border-focus: var(--accent); --input-disabled-bg: color-mix(in srgb, var(--card) 85%, transparent); --input-disabled-text: var(--muted); --input-disabled-border: #5d5959; --input-ring-focus: rgba(163, 230, 53, 0.24); /* rings adaptés aux couleurs dark (--danger passe à #ff8383) */ --input-ring-danger: rgba(255, 131, 131, 0.28); --input-ring-warning: rgba(231, 160, 25, 0.28); --input-ring-success: rgba(0, 153, 69, 0.28); /* ── Ombres (renforcées sur fond sombre) ── */ --shadow-1: 0 1px 8px rgba(0, 0, 0, 0.18); --shadow-2: 0 2px 16px rgba(0, 0, 0, 0.28); --shadow-3: 0 6px 28px rgba(0, 0, 0, 0.38); --shadow-4: 0 12px 50px rgba(0, 0, 0, 0.50); --shadow-accent: 0 8px 30px rgba(101, 163, 13, 0.28); --shadow-accent-sm: 0 4px 14px rgba(101, 163, 13, 0.18); --shadow-accent-glow: 0 2px 18px rgba(101, 163, 13, 0.24); --shadow-danger-glow: 0 2px 22px rgba(255, 131, 131, 0.22); /* ── Buttons ── */ --btn-bg: var(--accent); --btn-fg: #111108; /* lime clair → texte sombre obligatoire */ --btn-bg-hover: #84cc16; /* lime moyen, reste lisible */ --btn-secondary-bg: #2c4a08; --btn-secondary-bg-hover: #3d6610; --btn-secondary-fg: #f7fee7; --btn-danger-bg: var(--danger); --btn-danger-bg-hover: #cc2f2f; --btn-ghost-bg: rgba(255, 255, 255, 0.06); --btn-ghost-bg-hover: rgba(255, 255, 255, 0.12); --btn-disabled-bg: color-mix(in srgb, var(--card) 85%, black 15%); --btn-disabled-fg: var(--muted); --btn-primary-disabled-bg: color-mix(in srgb, var(--btn-bg) 35%, var(--card)); --btn-primary-disabled-fg: #c6e87a; /* lime pâle sur fond olive sombre ~5.8:1 */ --btn-secondary-disabled-bg: color-mix(in srgb, var(--btn-secondary-bg) 35%, var(--card)); --btn-secondary-disabled-fg: var(--btn-secondary-fg); --btn-danger-disabled-bg: color-mix(in srgb, var(--btn-danger-bg) 35%, var(--card)); --btn-danger-disabled-fg: #ffb3b3; /* rose clair sur rouge sombre ~4.7:1 */ --btn-ghost-disabled-bg: rgba(255, 255, 255, 0.02); --btn-ghost-disabled-fg: color-mix(in srgb, var(--text) 30%, transparent); /* ── Modals ── */ --modal-backdrop-bg: rgba(0, 0, 0, 0.60); --modal-shadow: 0 20px 60px rgba(0, 0, 0, 0.50); --modal-border: 1px solid color-mix(in srgb, var(--muted) 22%, transparent); /* ── On-color text (toasts dark) ── */ --on-accent: #111108; /* lime clair → texte sombre */ --on-danger: #1a0000; --on-warning: #fff2cc; --on-success: #eaffea; --on-info: #0b1f3a; } /* ───────────────────────────────────────────────────── ③ RESET & HTML BASE ───────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-sans); background: var(--bg); color: var(--text); line-height: 1.6; min-height: 100dvh; padding-top: var(--header-height); display: flex; flex-direction: column; width: 100%; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Transition douce lors du toggle de thème */ transition: background-color var(--duration-3) var(--ease-out), color var(--duration-3) var(--ease-out); } main { flex: 1 0 auto; width: 100%; } img, video, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } button, input, select, textarea { font: inherit; } button { cursor: pointer; } [x-cloak] { display: none !important; } /* ── Autofill — corrige le fond bleu Chrome en light ET dark ── */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 1000px var(--input-bg-autofill) inset !important; -webkit-text-fill-color: var(--input-text) !important; caret-color: var(--input-text) !important; transition: background-color 5000s ease-in-out 0s; } /* Surfaces qui transitionnent lors du toggle de thème */ .base-card, .auth-card, .ui-alert, .navbar { transition: background-color var(--duration-3) var(--ease-out), border-color var(--duration-2) var(--ease-out), color var(--duration-3) var(--ease-out); } /* ───────────────────────────────────────────────────── ④ TYPOGRAPHIE ───────────────────────────────────────────────────── */ h1, h2, h3, h4, h5, h6 { color: var(--text); line-height: 1.15; font-weight: 900; letter-spacing: -.02em; } h1 { font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 950; } h2 { font-size: clamp(1.55rem, 3vw, 2.4rem); } h3 { font-size: clamp(1.2rem, 2vw, 1.75rem); } h4 { font-size: 1.15rem; } h5 { font-size: 1rem; } h6 { font-size: .88rem; font-weight: 800; letter-spacing: .01em; } p { color: var(--muted); line-height: 1.7; } strong, b { font-weight: 900; color: var(--text); } code { font-family: var(--font-mono); font-size: .88em; padding: .18em .45em; border-radius: var(--radius-2); background: var(--accent-bg); color: var(--accent); } /* Helpers texte */ .text-accent { color: var(--accent) !important; } .text-muted { color: var(--muted) !important; } .text-danger { color: var(--danger) !important; } .text-warning { color: var(--warning) !important; } .text-success { color: var(--success) !important; } .text-mono { font-family: var(--font-mono); } .font-bold { font-weight: 900; } .uppercase { text-transform: uppercase; letter-spacing: .07em; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ───────────────────────────────────────────────────── ⑤ LAYOUT & CONTAINERS ───────────────────────────────────────────────────── */ .page-wrapper { position: relative; min-height: 100dvh; display: flex; flex-direction: column; } .container { box-sizing: border-box; width: 100%; max-width: var(--container-max); margin-left: auto; margin-right: auto; padding-left: var(--container-pad); padding-right: var(--container-pad); } /* ── Auth wrapper (login / register / forgot) ── */ .auth-wrapper { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--page-top) var(--container-pad) var(--page-bottom); gap: 1.5rem; } /* ── Auth card ── */ .auth-card { width: 100%; max-width: var(--auth-card-max-width); position: relative; overflow: hidden; border-radius: var(--radius-xl); padding: 2.4em 2em; background: radial-gradient(circle at 15% 0%, color-mix(in srgb, var(--accent-bg) 70%, transparent), transparent 55%), radial-gradient(circle at 88% 40%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%), var(--card); border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent); box-shadow: var(--shadow-accent); } .auth-card::before { content: ""; position: absolute; inset: -2px; background: radial-gradient(circle at 30% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 55%), radial-gradient(circle at 85% 15%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 60%); pointer-events: none; opacity: .6; } .auth-card > * { position: relative; z-index: 1; } /* Logo auth */ .auth-logo { display: flex; flex-direction: column; align-items: center; gap: .6em; margin-bottom: 1.8rem; text-align: center; } .auth-logo-icon { width: 52px; height: 52px; border-radius: 1.2em; background: var(--accent-bg); border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-accent-sm); } .auth-logo-name { font-size: 1.35em; font-weight: 950; letter-spacing: -.025em; color: var(--text); } .auth-logo-name span { color: var(--accent); } .auth-logo-sub { font-size: .9em; color: var(--muted); font-weight: 700; } /* ── Auth form layout (lgi-form) ── */ .lgi-form { display: flex; flex-direction: column; gap: 1.2rem; } /* ── Titre + eyebrow centré ── */ .lgi-eyebrow { display: flex; align-items: center; justify-content: center; gap: .55rem; margin-top: .35rem; } .lgi-title-block { text-align: center; } .lgi-title { font-size: clamp(1.45rem, 3.5vw, 1.85rem) !important; line-height: 1.15; } .lgi-sub { margin-top: .35em; font-size: .92em; } /* ── Banner session compact ── BUG FIX : db-info-banner a margin-bottom:1.2rem intégré. Dans lgi-form (gap:1.2rem) ça créait un double espacement. */ .lgi-banner { flex-direction: column; gap: .45rem; margin-bottom: 0; } .lgi-banner-body { display: flex; flex-direction: column; gap: .28rem; font-size: .85rem; color: var(--muted); } .lgi-banner-tips, .lgi-banner-text { font-size: .8rem; opacity: .8; } /* ── Page namespaces (erreurs, confirmation, 2FA…) ── Identique à .dashboard { gap:1.4rem } (dashboard.css). */ .register-request, .reset-request, .reset-password-already, .reset-password-invalid, .reset-password-success, .activate-already, .activate-invalid, .activate-verified, .not-found, .forbidden, .too-many-requests, .server-error { display: flex; flex-direction: column; gap: 1.4rem; } /* Wrapper boutons dans db-section */ .db-section-actions { display: flex; flex-direction: column; gap: .75rem; margin-top: 1rem; } /* ── Register-specific (rgi-*) ── */ /* rgi-form redéclarait flex+gap déjà dans lgi-form, ici on ne déclare que ce qui est propre à register. */ .rgi-form { max-width: 580px; } .rpr-form { max-width: 460px; } .rgi-grid { display: flex; flex-direction: column; gap: 1rem; } .rgi-name-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; } .rgi-optional { font-weight: 600; font-size: .82em; color: var(--muted); margin-left: .2em; } .rgi-section-sub { font-size: .82rem; color: var(--muted); font-weight: 600; margin-left: auto; } /* Password checklist */ .rgi-pwd-hints { display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin-top: -0.5rem; padding: 0; list-style: none; opacity: 0; pointer-events: none; transition: opacity 200ms var(--ease-out); /* Hauteur fixe = 2 lignes max — empêche le layout shift même sur mobile */ height: calc(2 * (0.78rem * 1.5) + .3rem); overflow: hidden; } .rgi-pwd-hints.rgi-pwd-hints--visible { opacity: 1; pointer-events: auto; } .rgi-pwd-hints li { display: flex; align-items: center; gap: .35em; font-size: .78rem; font-weight: 700; color: var(--muted); transition: color var(--duration-2) var(--ease-out); } .rgi-pwd-hints li.rgi-pwd-hint--ok { color: var(--accent); } .rgi-pwd-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; transition: background var(--duration-2) var(--ease-out); } /* Match feedback (confirm password) */ .rgi-match-hint { font-size: .82rem; font-weight: 700; margin-top: .1rem; min-height: 1.6em; line-height: 1.6; opacity: 0; transition: opacity var(--duration-2) var(--ease-out); pointer-events: none; } .rgi-match-hint.rgi-match-hint--visible { opacity: 1; } .rgi-match-hint.rgi-match-hint--ok { color: var(--accent); } .rgi-match-hint.rgi-match-hint--error { color: var(--danger); } .rgi-consent-section { gap: .7rem; } .rgi-consent-text { font-size: .9rem; line-height: 1.5; } /* ── Grilles ── */ .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; } /* ── Flex helpers ── */ .flex { display: flex; } .flex-center { display: flex; align-items: center; justify-content: center; } .flex-between { display: flex; align-items: center; justify-content: space-between; } .flex-col { display: flex; flex-direction: column; } .gap-1 { gap: .5rem; } .gap-2 { gap: 1rem; } .gap-3 { gap: 1.5rem; } /* ───────────────────────────────────────────────────── ⑥ COMPOSANTS UI ───────────────────────────────────────────────────── */ /* ══════════════════════════════ NAVBAR ══════════════════════════════ */ .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 200; height: var(--header-height); border-bottom: 1px solid color-mix(in srgb, var(--muted) 15%, transparent); background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .navbar-inner { display: flex; align-items: center; justify-content: space-between; height: 100%; gap: 1rem; } .navbar-brand { display: flex; align-items: center; gap: .55em; font-weight: 950; font-size: 1.15em; letter-spacing: -.022em; color: var(--text); flex: 0 0 auto; } .navbar-brand span { color: var(--accent); } .navbar-nav { display: flex; align-items: center; gap: .2em; } .nav-link { display: inline-flex; align-items: center; gap: .45em; padding: .44em .85em; border-radius: var(--radius-4); font-size: .92em; font-weight: 700; color: var(--muted); transition: color var(--duration-2) var(--ease-out), background var(--duration-2) var(--ease-out); } .nav-link:hover, .nav-link.active { color: var(--text); background: color-mix(in srgb, var(--accent) 8%, transparent); } .nav-link.active { color: var(--accent); } /* Bouton dark/light toggle */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-3); border: 1px solid color-mix(in srgb, var(--muted) 22%, transparent); background: transparent; color: var(--muted); cursor: pointer; transition: background var(--duration-2) var(--ease-out), color var(--duration-2) var(--ease-out), border-color var(--duration-2) var(--ease-out); } .theme-toggle:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 22%, transparent); } /* Masquer/afficher selon le mode actif */ .icon-sun { display: none; } .icon-moon { display: block; } .dark .icon-sun { display: block; } .dark .icon-moon { display: none; } /* ══════════════════════════════ BUTTONS — .ui-btn ══════════════════════════════ */ .ui-btn { --_bg: var(--btn-bg); --_fg: var(--btn-fg, #fff); --_bd: transparent; --_ring: var(--input-ring-focus); --_shadow: var(--shadow-accent); --_pad-y: .72em; --_pad-x: 1.1em; display: inline-flex; align-items: center; justify-content: center; gap: .5em; padding: var(--_pad-y) var(--_pad-x); border-radius: var(--btn-radius, var(--radius-pill)); border: 1px solid var(--_bd); background: var(--_bg); color: var(--_fg); font-weight: 700; font-size: 1rem; line-height: 1; cursor: pointer; user-select: none; white-space: nowrap; text-align: center; text-decoration: none; box-shadow: var(--_shadow); transition: background-color var(--duration-2) var(--ease-out), color var(--duration-2) var(--ease-out), box-shadow var(--duration-2) var(--ease-out), transform 60ms ease, opacity var(--duration-2) var(--ease-out); } /* Tailles */ .ui-btn--xs { font-size: .82rem; --_pad-y: .38em; --_pad-x: .70em; border-radius: .6em; } .ui-btn--sm { font-size: .9rem; --_pad-y: .54em; --_pad-x: .90em; border-radius: .78em; } .ui-btn--md { font-size: 1rem; } .ui-btn--lg { font-size: 1.08rem; --_pad-y: .86em; --_pad-x: 1.20em; border-radius: 1.05em; } .ui-btn--block { width: 100%; } /* Variantes */ .ui-btn--primary { --_bg: var(--btn-bg); --_fg: var(--btn-fg, #fff); --_shadow: var(--shadow-accent); } .ui-btn--secondary { --_bg: var(--btn-secondary-bg); --_fg: var(--btn-secondary-fg); --_shadow: none; } .ui-btn--danger { --_bg: var(--btn-danger-bg); --_fg: var(--on-danger, #fff); --_ring: var(--input-ring-danger); --_shadow: var(--shadow-danger-glow); } .ui-btn--warning, .ui-btn.ui-btn--warning { --_bg: var(--btn-warning-bg, #e7a019); --_fg: var(--on-warning, #2a2200); --_ring: rgba(231,160,25,.35); --_shadow: 0 8px 30px rgba(231,160,25,.25); } .ui-btn--ghost { --_bg: var(--btn-ghost-bg); --_fg: var(--text); --_shadow: none; } .ui-btn--link { --_bg: transparent; --_fg: var(--accent); --_shadow: none; padding-inline: 0; } /* Hover */ .ui-btn:hover:not([disabled]) { transform: translateY(-.5px); } .ui-btn:active:not([disabled]) { transform: translateY(0); filter: brightness(.92); } .ui-btn:focus-visible { outline: 0; box-shadow: 0 0 0 4px var(--_ring); } .ui-btn--primary:hover:not([disabled]) { background: var(--btn-bg-hover); } .ui-btn--secondary:hover:not([disabled]) { background: var(--btn-secondary-bg-hover); } .ui-btn--danger:hover:not([disabled]) { background: var(--btn-danger-bg-hover); } .ui-btn--warning:hover:not([disabled]) { background: var(--btn-warning-bg-hover, #c47e10); color: var(--on-warning, #2a2200); } .ui-btn--ghost:hover:not([disabled]) { background: var(--btn-ghost-bg-hover); } .ui-btn--link:hover:not([disabled]) { text-decoration: underline; text-underline-offset: .22em; } /* Disabled */ .ui-btn[disabled] { cursor: not-allowed !important; } .ui-btn--loading { cursor: wait !important; } .ui-btn--primary[disabled]:not(.ui-btn--loading) { background: var(--btn-primary-disabled-bg); color: var(--btn-primary-disabled-fg); box-shadow: none; } .ui-btn--secondary[disabled]:not(.ui-btn--loading) { background: var(--btn-secondary-disabled-bg); color: var(--btn-secondary-disabled-fg); box-shadow: none; } .ui-btn--danger[disabled]:not(.ui-btn--loading) { background: var(--btn-danger-disabled-bg); color: var(--btn-danger-disabled-fg); box-shadow: none; } .ui-btn--warning[disabled]:not(.ui-btn--loading) { background: var(--btn-warning-disabled-bg, color-mix(in srgb, #e7a019 40%, white 60%)); color: var(--btn-warning-disabled-fg, var(--on-warning, #2a2200)); box-shadow: none; } .ui-btn--ghost[disabled]:not(.ui-btn--loading) { background: var(--btn-ghost-disabled-bg); color: var(--btn-ghost-disabled-fg); box-shadow: none; } .ui-btn--link[disabled]:not(.ui-btn--loading) { color: color-mix(in srgb, var(--accent) 40%, transparent); text-decoration: none; } /* ── ui-inner — centred icon/label/icon grid (pour ui-button.ejs) ── */ .ui-inner { --_gap: .2em; --_slot: var(--spinner-size, 1.2em); display: inline-grid; grid-auto-flow: column; grid-template-columns: var(--_slot) auto var(--_slot); align-items: center; justify-content: center; justify-items: center; column-gap: var(--_gap); margin: 0 auto; } .ui-btn--loading .ui-inner { column-gap: var(--_gap); } .ui-btn--no-icons .ui-inner { grid-template-columns: auto; } .ui-btn--no-icons .ui-left-slot, .ui-btn--no-icons .ui-right-slot { display: none; } .ui-left-slot, .ui-right-slot { inline-size: var(--_slot); block-size: var(--_slot); display: grid; place-items: center; } .ui-left-slot { padding-right: var(--left-slot-pad, 0); } .ui-right-slot { padding-left: var(--svg-right-gap, 0); } .ui-btn:not(.ui-btn--loading) .ui-left-slot { --left-slot-pad: var(--svg-left-gap, 0); } .ui-icon-left svg { width: var(--svg-left-size, 1em); height: var(--svg-left-size, 1em); color: var(--svg-left-color, currentColor); display: block; } .ui-icon-right svg { width: var(--svg-right-size, 1em); height: var(--svg-right-size, 1em); color: var(--svg-right-color, currentColor); display: block; } .ui-label { display: flex; align-items: center; } /* Spinner intégré */ .ui-spinner { display: inline-block; width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: base-spin .75s linear infinite; flex: 0 0 auto; } /* ══════════════════════════════ INPUTS — .input-field ══════════════════════════════ */ .input-field { width: 100%; padding: 0.7em 0.97em !important; border: 1.5px solid var(--input-border) !important; border-radius: var(--input-radius) !important; font-size: 1em; font-family: inherit; background: var(--input-bg) !important; color: var(--input-text) !important; outline: none; box-sizing: border-box; min-width: 0; transition: border-color var(--duration-2) var(--ease-out), box-shadow var(--duration-2) var(--ease-out), background-color var(--duration-2) var(--ease-out); } .input-field::placeholder { color: var(--input-placeholder); } .input-field:hover:not([disabled]):not([readonly]) { border-color: var(--input-border-hover) !important; } .input-field:focus:not([disabled]) { border-color: var(--input-border-focus) !important; box-shadow: 0 0 0 3px var(--input-ring-focus) !important; } .input-field[disabled], .input-field[readonly] { background: var(--input-disabled-bg) !important; color: var(--input-disabled-text) !important; border: 0.5px solid var(--input-disabled-border) !important; cursor: not-allowed !important; opacity: 1 !important; } /* Variantes sémantiques */ .input-field.input-danger { border-color: var(--input-border) !important; } .input-field.input-warning { border-color: var(--input-border) !important; } .input-field.input-success { border-color: var(--input-border) !important; } .input-field.input-danger:focus { border-color: var(--danger) !important; box-shadow: 0 0 0 3px var(--input-ring-danger) !important; } .input-field.input-warning:focus { border-color: var(--warning) !important; box-shadow: 0 0 0 3px var(--input-ring-warning) !important; } .input-field.input-success:focus { border-color: var(--success) !important; box-shadow: 0 0 0 3px var(--input-ring-success) !important; } /* Input avec icône préfixe */ .input-wrap { position: relative; } .input-wrap .input-field { padding-left: 2.55em !important; } .input-icon { position: absolute; left: .85em; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; display: flex; } /* Label */ .form-label { display: block; font-size: .88em; font-weight: 800; color: var(--text); letter-spacing: .01em; margin-bottom: .22em; } .form-label .req { color: var(--danger); margin-left: .2em; } /* Groupe label + input */ .form-group { display: flex; flex-direction: column; gap: var(--space-2); } /* Feedback texte */ .form-hint { font-size: .82em; color: var(--muted); font-weight: 600; } .form-error { font-size: .82em; color: var(--danger); font-weight: 700; display: flex; align-items: center; gap: .4em; } /* Feedback animé → défini dans layout.css (version complète avec icônes) */ /* Divider "ou" entre deux blocs de form */ .form-divider { display: flex; align-items: center; gap: 1em; color: var(--muted); font-size: .88em; font-weight: 700; } .form-divider::before, .form-divider::after { content: ""; flex: 1; height: 1px; background: color-mix(in srgb, var(--muted) 25%, transparent); } /* Checkbox */ .form-check { display: flex; align-items: flex-start; gap: .65em; cursor: pointer; } .form-check-input { width: 18px; height: 18px; border-radius: .5em; border: 2px solid color-mix(in srgb, var(--accent) 28%, transparent); background: var(--input-bg); flex: 0 0 18px; margin-top: .12em; appearance: none; -webkit-appearance: none; cursor: pointer; transition: background var(--duration-2), border-color var(--duration-2), box-shadow var(--duration-2); } .form-check-input:checked { background: var(--accent); border-color: var(--accent); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3E%3C/svg%3E"); background-size: 12px; background-position: center; background-repeat: no-repeat; box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 30%, transparent); } .form-check-label { font-size: .9em; color: var(--muted); font-weight: 700; line-height: 1.5; } .form-check-label a { color: var(--accent); text-decoration: underline; text-underline-offset: .2em; } /* ══════════════════════════════ BASE CARD — .base-card ══════════════════════════════ */ .base-card { position: relative; overflow: hidden; border-radius: var(--radius-xl); padding: var(--card-padding, 1.6em); background: radial-gradient(circle at 14% 0%, color-mix(in srgb, var(--accent-bg) 80%, transparent), transparent 52%), radial-gradient(circle at 88% 40%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 58%), var(--card); border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent); box-shadow: var(--shadow-3); } .base-card::before { content: ""; position: absolute; inset: -2px; background: radial-gradient(circle at 22% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 50%), radial-gradient(circle at 85% 14%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 55%); pointer-events: none; opacity: .6; } .base-card > * { position: relative; z-index: 1; } /* Variantes */ .base-card--flat { background: var(--card); box-shadow: var(--shadow-2); } .base-card--highlight { border-color: var(--accent); box-shadow: var(--shadow-accent); } .base-card--danger { border-color: color-mix(in srgb, var(--danger) 30%, transparent); background: radial-gradient(circle at 14% 0%, color-mix(in srgb, var(--danger-bg) 55%, transparent), transparent 50%), var(--card); } .base-card--hover { transition: transform var(--duration-2) var(--ease-out), box-shadow var(--duration-2) var(--ease-out), border-color var(--duration-2) var(--ease-out); } .base-card--hover:hover { transform: translateY(-3px); box-shadow: var(--shadow-accent); border-color: color-mix(in srgb, var(--accent) 35%, transparent); } /* ══════════════════════════════ KICKERS — .ui-kicker ══════════════════════════════ */ .ui-kicker { display: inline-flex; align-items: center; gap: .5em; font-size: .78em; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); background: var(--accent-bg); padding: .35em .85em; border-radius: var(--radius-pill); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); } .ui-kicker--muted { color: var(--muted); background: color-mix(in srgb, var(--card) 88%, transparent); border-color: color-mix(in srgb, var(--muted) 18%, transparent); } .ui-kicker--danger { color: var(--danger); background: var(--danger-bg); border-color: color-mix(in srgb, var(--danger) 22%, transparent); } .ui-kicker--warn { color: var(--warning); background: var(--warning-bg); border-color: color-mix(in srgb, var(--warning) 22%, transparent); } /* ══════════════════════════════ PILLS — .ui-pill ══════════════════════════════ */ .ui-pill { display: inline-flex; align-items: center; gap: .45em; padding: .35em .8em; border-radius: var(--radius-pill); font-size: .82em; font-weight: 800; border: 1px solid transparent; } .ui-pill--accent { background: var(--accent-bg); border-color: color-mix(in srgb, var(--accent) 28%, transparent); color: var(--accent); } .ui-pill--muted { background: color-mix(in srgb, var(--card) 85%, transparent); border-color: color-mix(in srgb, var(--muted) 18%, transparent); color: var(--muted); } .ui-pill--danger { background: var(--danger-bg); border-color: color-mix(in srgb, var(--danger) 28%, transparent); color: var(--danger); } .ui-pill--warning { background: var(--warning-bg); border-color: color-mix(in srgb, var(--warning) 28%, transparent); color: var(--warning); } .ui-pill--success { background: var(--success-bg); border-color: color-mix(in srgb, var(--success) 28%, transparent); color: var(--success); } .ui-pill-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 auto; } /* ══════════════════════════════ ICON BOX — .ui-icon-box ══════════════════════════════ */ .ui-icon-box { display: inline-flex; align-items: center; justify-content: center; background: var(--accent-bg); border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent); border-radius: var(--radius-3); flex: 0 0 auto; } .ui-icon-box--sm { width: 28px; height: 28px; } .ui-icon-box--md { width: 36px; height: 36px; } .ui-icon-box--lg { width: 48px; height: 48px; border-radius: var(--radius-4); box-shadow: var(--shadow-accent-sm); } .ui-icon-box--xl { width: 60px; height: 60px; border-radius: var(--radius-5); box-shadow: var(--shadow-accent-sm); } .ui-icon-box--danger { background: var(--danger-bg); border-color: color-mix(in srgb, var(--danger) 22%, transparent); } .ui-icon-box--warning { background: var(--warning-bg); border-color: color-mix(in srgb, var(--warning) 22%, transparent); } .ui-icon-box--success { background: var(--success-bg); border-color: color-mix(in srgb, var(--success) 22%, transparent); } /* ══════════════════════════════ ALERTS — .ui-alert ══════════════════════════════ */ .ui-alert { display: flex; align-items: flex-start; gap: .75em; padding: .9em 1.1em; border-radius: var(--radius-4); border: 1px solid transparent; font-size: .9em; font-weight: 700; line-height: 1.55; } .ui-alert--accent { background: var(--accent-bg); border-color: color-mix(in srgb, var(--accent) 22%, transparent); color: color-mix(in srgb, var(--accent) 90%, var(--text)); } .ui-alert--danger { background: var(--danger-bg); border-color: color-mix(in srgb, var(--danger) 28%, transparent); color: var(--danger); } .ui-alert--warning { background: var(--warning-bg); border-color: color-mix(in srgb, var(--warning) 28%, transparent); color: var(--warning); } .ui-alert--success { background: var(--success-bg); border-color: color-mix(in srgb, var(--success) 28%, transparent); color: var(--success); } .ui-alert--info { background: var(--info-bg); border-color: color-mix(in srgb, var(--info) 22%, transparent); color: var(--info); } .ui-alert b { font-weight: 900; color: var(--text); } /* ══════════════════════════════ MODALS ══════════════════════════════ */ .modal-container { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 9999; padding: 1rem; } .modal-backdrop { position: fixed; inset: 0; z-index: 9999; background: var(--modal-backdrop-bg); } .modal-card { position: relative; z-index: 10000; background: var(--modal-bg); color: var(--modal-text); border-radius: var(--modal-radius); box-shadow: var(--modal-shadow); border: var(--modal-border); max-width: var(--modal-max-width); width: 100%; margin: 0 auto; padding: var(--modal-padding); transition: transform var(--duration-3) ease, opacity var(--duration-3) ease; } .modal-title { display: flex; align-items: center; gap: .6em; font-size: 1.05rem; font-weight: 800; color: var(--text); margin: 0 0 .8rem; } .modal-title--accent { color: var(--accent); } .modal-title--danger { color: var(--danger); } .modal-title--warning { color: var(--warning); } .modal-title--success { color: var(--success); } .modal-footer { display: flex; flex-direction: row; justify-content: flex-end; gap: .85rem; margin-top: 1rem; padding-top: .85rem; border-top: 1px solid color-mix(in srgb, var(--muted) 18%, transparent); } /* Glows variantes */ .modal-card[data-variant="accent"] { box-shadow: var(--shadow-accent-glow); } .modal-card[data-variant="danger"] { box-shadow: var(--shadow-danger-glow); } /* ══════════════════════════════ MISC ══════════════════════════════ */ /* Dividers */ .ui-divider { height: 1px; background: color-mix(in srgb, var(--muted) 18%, transparent); border: none; } .ui-divider--accent{ background: color-mix(in srgb, var(--accent) 14%, transparent); } .ui-divider--danger{ background: color-mix(in srgb, var(--danger) 30%, transparent); } /* Live dot pulsé */ .ui-live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); flex: 0 0 auto; animation: base-pulse 2s infinite; } .ui-live-dot--danger { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-bg); animation: base-pulse-danger 2s infinite; } .ui-live-dot--warning { background: var(--warning); box-shadow: 0 0 0 3px var(--warning-bg); } /* Avatar */ .ui-avatar { border-radius: 50%; background: var(--accent-bg); border: 2px solid color-mix(in srgb, var(--accent) 30%, transparent); display: flex; align-items: center; justify-content: center; font-weight: 900; color: var(--accent); overflow: hidden; flex: 0 0 auto; } .ui-avatar--sm { width: 32px; height: 32px; font-size: .8em; } .ui-avatar--md { width: 42px; height: 42px; font-size: 1em; } .ui-avatar--lg { width: 56px; height: 56px; font-size: 1.3em; } /* Progress bar */ .ui-progress-track { width: 100%; height: 10px; background: color-mix(in srgb, var(--muted) 18%, transparent); border-radius: var(--radius-pill); overflow: hidden; } .ui-progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-light)); border-radius: var(--radius-pill); transition: width .4s ease; } .ui-progress-fill--warning { background: linear-gradient(90deg, var(--warning), #fbbf24); } .ui-progress-fill--danger { background: linear-gradient(90deg, var(--danger), var(--red-400, #f87171)); } /* Lien */ .ui-link { color: var(--accent); font-weight: 800; text-decoration: underline; text-underline-offset: .22em; transition: opacity var(--duration-2); } .ui-link:hover { opacity: .75; } /* Section head */ .section-head { margin-bottom: 1.6rem; } .section-head--center { text-align: center; max-width: 760px; margin-inline: auto; margin-bottom: 2rem; } .section-title { font-size: clamp(1.35rem, 2.2vw, 1.85rem); font-weight: 950; color: var(--text); margin-block: .5em .22em; } .section-sub { color: var(--muted); font-size: 1em; line-height: 1.65; } /* Skeleton loader */ .skeleton { border-radius: var(--radius-3); background: linear-gradient(90deg, color-mix(in srgb, var(--card) 80%, transparent) 25%, color-mix(in srgb, var(--accent) 7%, transparent) 50%, color-mix(in srgb, var(--card) 80%, transparent) 75% ); background-size: 200% 100%; animation: base-shimmer 1.6s infinite; } /* ── Auth section card (lgi-section) ── */ .lgi-section { display: flex; flex-direction: column; gap: .95rem; padding: 1.2rem 1.4rem; border-radius: var(--radius-5); background: color-mix(in srgb, var(--accent-bg) 35%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 14%, transparent); } .lgi-section-head { display: flex; align-items: center; gap: .6rem; } .lgi-section-title { font-size: .95rem; font-weight: 900; color: var(--text); letter-spacing: -.01em; } /* ── Field wrap + valid-check ── */ .lgi-field-wrap { position: relative; } .lgi-field-wrap .input-field { padding-right: 2.4em !important; } .lgi-field-wrap .lgi-password-input { padding-right: 4.2em !important; } .lgi-valid-check { position: absolute; right: .85em; top: 50%; transform: translateY(-50%); color: var(--accent); display: flex; align-items: center; pointer-events: none; opacity: 0; transition: opacity var(--duration-2) var(--ease-out); } .lgi-valid-check--password { right: 2.8em; } .lgi-valid-check--show { opacity: 1; } /* ── Hints — espace réservé, pas de layout shift ── */ .lgi-section .form-hint, .lgi-hint { color: var(--danger); font-size: .82rem; font-weight: 700; line-height: 1.6; margin-top: -.15rem; min-height: 1.6em; opacity: 0; transition: opacity var(--duration-2) var(--ease-out); pointer-events: none; } .lgi-section .form-hint.lgi-hint--visible, .lgi-hint.lgi-hint--visible { opacity: 1; } /* Hints register — spécificité 0,3,0 > 0,2,0 */ .lgi-section .form-hint.rgi-hint, .lgi-hint.rgi-hint { min-height: 1.6em; margin-top: -.1rem; } /* ── Input-danger blur fix ── BUG FIX CRITIQUE : base.css ne montre input-danger que sur :focus. On force la bordure danger même sans focus pour les pages auth. */ .lgi-section .input-field.input-danger, .lgi-field-wrap .input-field.input-danger { border-color: var(--danger) !important; box-shadow: none !important; } .lgi-section .input-field.input-danger:focus, .lgi-field-wrap .input-field.input-danger:focus { border-color: var(--danger) !important; box-shadow: none !important; } /* ── 2FA form groups ── */ /* Wrapper multi-méthodes (sms / email / app) */ .lgi-fields { display: flex; flex-direction: column; gap: 1.6rem; } /* Wrapper une méthode */ .form-group { display: flex; flex-direction: column; gap: .5rem; } /* Label : icône + texte inline */ .form-label { display: flex; align-items: center; gap: .4em; font-size: .88rem; font-weight: 600; color: var(--text); line-height: 1.3; } .form-label svg { flex-shrink: 0; } .form-label-sub { font-weight: 400; color: var(--muted); font-size: .85em; } /* Field error — hauteur fixe, pas de layout shift */ .form-error { color: var(--danger); font-size: .82rem; font-weight: 700; height: 1.15em; line-height: 1.15em; display: block; overflow: hidden; white-space: nowrap; margin-top: -.1rem; opacity: 0; pointer-events: none; transition: opacity .15s ease; } .form-error.is-visible { opacity: 1; pointer-events: auto; } /* ── Spinner wrapper ── Wrapper neutre — pas d'animation ni de border intégrés (évite le double-spinner avec .ui-spinner de base.css). */ .ui-spinner-wrap { display: inline-block; flex: 0 0 auto; width: var(--spinner-size, 1.2em); height: var(--spinner-size, 1.2em); line-height: 1; vertical-align: middle; } /* ───────────────────────────────────────────────────── ⑦ UTILITAIRES ───────────────────────────────────────────────────── */ .mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } .mt-1 { margin-top: .5rem; } .mb-1 { margin-bottom: .5rem; } .mt-2 { margin-top: 1rem; } .mb-2 { margin-bottom: 1rem; } .mt-3 { margin-top: 1.5rem; } .mb-3 { margin-bottom: 1.5rem; } .mt-4 { margin-top: 2rem; } .mb-4 { margin-bottom: 2rem; } .w-full { width: 100%; } .w-fit { width: fit-content; } .max-w-sm { max-width: 480px; } .max-w-md { max-width: 640px; } .max-w-lg { max-width: 800px; } .text-center { text-align: center; } .text-right { text-align: right; } .hidden { display: none !important; } .invisible { visibility: hidden; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; } /* Surfaces rapides */ .surface-accent { background: var(--accent-bg); color: var(--accent); } .surface-danger { background: var(--danger-bg); color: var(--danger); } .surface-warning { background: var(--warning-bg); color: var(--warning); } .surface-success { background: var(--success-bg); color: var(--success); } /* Scroll horizontal masqué */ .scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .scroll-x::-webkit-scrollbar { display: none; } /* Glassmorphism */ .glass { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } /* Z-index */ .z-0 { z-index: 0; } .z-1 { z-index: 1; } .z-10 { z-index: 10; } .z-modal { z-index: 9999; } /* ───────────────────────────────────────────────────── ⑧ ANIMATIONS GLOBALES ───────────────────────────────────────────────────── */ @keyframes base-spin { to { transform: rotate(360deg); } } @keyframes base-pulse { 0%, 100% { box-shadow: 0 0 0 3px var(--accent-bg); } 50% { box-shadow: 0 0 0 5px var(--accent-bg); } } @keyframes base-pulse-danger { 0%, 100% { box-shadow: 0 0 0 3px var(--danger-bg); } 50% { box-shadow: 0 0 0 5px var(--danger-bg); } } @keyframes base-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes base-slide-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } @keyframes base-shimmer { from { background-position: -200% 0; } to { background-position: 200% 0; } } .anim-fade-in { animation: base-fade-in .30s var(--ease-out) forwards; } .anim-slide-up { animation: base-slide-up .40s var(--ease-out) forwards; } .anim-spin { animation: base-spin 1.2s linear infinite; } /* btn-* keyframes — utilisés par les spinner variants (.spinner--*) */ @keyframes btn-spin { to { transform: rotate(360deg); } } @keyframes btn-ripple { to { transform: scale(1); opacity: 0; } } @keyframes btn-pulse { 0%, 100% { transform: scale(.6); opacity: .55; } 50% { transform: scale(1); opacity: 1; } } @keyframes btn-beat { 0%, 100% { transform: scale(1); } 30% { transform: scale(.88); } 60% { transform: scale(1.06); } } @keyframes btn-flip3d { 0% { transform: rotateY(0deg); } 50% { transform: rotateY(180deg); } 100% { transform: rotateY(360deg); } } @keyframes btn-orbit { to { transform: translate(-50%,-50%) rotate(1turn) translate(calc(var(--spinner-size, 1.2em) / 2.1)); } } /* ───────────────────────────────────────────────────── ⑨ SPINNERS Appliqués directement sur l'élément dans ui-button.ejs. Les CSS variables sont héritées depuis .ui-btn parent. ───────────────────────────────────────────────────── */ /* ── Sweep (conic gradient ring) ── */ .spinner--sweep { width: var(--spinner-size, 1.2em); height: var(--spinner-size, 1.2em); border-radius: 50%; background: conic-gradient( from 0turn, var(--spinner-color, currentColor) 12%, rgba(255,255,255,.22) 0 100% ); -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - var(--spinner-stroke, 2.5px)), #000 0); mask: radial-gradient(farthest-side, #0000 calc(100% - var(--spinner-stroke, 2.5px)), #000 0); animation: btn-spin var(--spinner-speed, .8s) cubic-bezier(.6,.2,.3,.8) infinite; will-change: transform; } /* ── Flower (petal steps ring) ── */ .spinner--flower { width: var(--spinner-size, 1.2em); height: var(--spinner-size, 1.2em); border-radius: 50%; background: repeating-conic-gradient( var(--spinner-color, currentColor) 0 8%, rgba(255,255,255,.18) 8% 16% ); -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - var(--spinner-stroke, 2.5px)), #000 0); mask: radial-gradient(farthest-side, #0000 calc(100% - var(--spinner-stroke, 2.5px)), #000 0); animation: btn-spin calc(var(--spinner-speed, .8s) + .15s) steps(12) infinite; will-change: transform; } /* ── Dash (segmented steps ring) ── */ .spinner--dash { width: var(--spinner-size, 1.2em); height: var(--spinner-size, 1.2em); border-radius: 50%; background: repeating-conic-gradient( from 0turn, var(--spinner-color, currentColor) 0 12%, rgba(255,255,255,.12) 12% 20% ); -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - var(--spinner-stroke, 2.5px)), #000 0); mask: radial-gradient(farthest-side, #0000 calc(100% - var(--spinner-stroke, 2.5px)), #000 0); animation: btn-spin calc(var(--spinner-speed, .8s) + .2s) steps(12) infinite; will-change: transform; } /* ── Dual (double arc) ── */ .spinner--dual { width: var(--spinner-size, 1.2em); height: var(--spinner-size, 1.2em); box-sizing: border-box; border-radius: 50%; border: var(--spinner-stroke, 2.5px) solid rgba(255,255,255,.28); border-top-color: var(--spinner-color, currentColor); border-right-color: var(--spinner-color, currentColor); animation: btn-spin var(--spinner-speed, .8s) linear infinite; will-change: transform; } /* ── Tail (comet arc) ── */ .spinner--tail { width: var(--spinner-size, 1.2em); height: var(--spinner-size, 1.2em); border-radius: 50%; background: conic-gradient( from 0turn, var(--spinner-color, currentColor) 0 18%, rgba(255,255,255,0) 19% 100% ); -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - var(--spinner-stroke, 2.5px)), #000 0); mask: radial-gradient(farthest-side, #0000 calc(100% - var(--spinner-stroke, 2.5px)), #000 0); animation: btn-spin calc(var(--spinner-speed, .8s) * .8) linear infinite; filter: drop-shadow(0 0 .06em rgba(255,255,255,.6)); } /* ── Hourglass (opposed arcs) ── */ .spinner--hourglass { width: var(--spinner-size, 1.2em); height: var(--spinner-size, 1.2em); border-radius: 50%; background: conic-gradient(from 45deg, var(--spinner-color, currentColor) 0 90deg, transparent 90deg 180deg, var(--spinner-color, currentColor) 180deg 270deg, transparent 270deg 360deg); -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - var(--spinner-stroke, 2.5px)), #000 0); mask: radial-gradient(farthest-side, #0000 calc(100% - var(--spinner-stroke, 2.5px)), #000 0); animation: btn-spin calc(var(--spinner-speed, .8s) * .9) linear infinite; will-change: transform; } /* ── Pulse (dot breathing) ── */ .spinner--pulse { width: var(--spinner-size, 1.2em); height: var(--spinner-size, 1.2em); border-radius: 50%; background: var(--spinner-color, currentColor); animation: btn-pulse calc(var(--spinner-speed, .8s) * .9) ease-in-out infinite; will-change: transform, opacity; } /* ── Ripple (expanding rings) ── */ .spinner--ripple { position: relative; width: var(--spinner-size, 1.2em); height: var(--spinner-size, 1.2em); } .spinner--ripple::before, .spinner--ripple::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: var(--spinner-stroke, 2.5px) solid var(--spinner-color, currentColor); transform: scale(.2); opacity: 1; animation: btn-ripple var(--spinner-speed, .8s) ease-out infinite; } .spinner--ripple::after { animation-delay: calc(var(--spinner-speed, .8s) / 2); } /* ── Heartbeat (pulsing ring) ── */ .spinner--heartbeat { width: var(--spinner-size, 1.2em); height: var(--spinner-size, 1.2em); border-radius: 50%; box-shadow: inset 0 0 0 var(--spinner-stroke, 2.5px) var(--spinner-color, currentColor); animation: btn-beat 1.15s ease-in-out infinite; will-change: transform, box-shadow; } /* ── Flip (3D card) ── */ .spinner--flip { width: var(--spinner-size, 1.2em); height: var(--spinner-size, 1.2em); background: var(--spinner-color, currentColor); border-radius: .25em; animation: btn-flip3d var(--spinner-speed, .8s) cubic-bezier(.4,.2,.2,1) infinite; will-change: transform; } /* ── Orbit (orbiting dot) ── */ .spinner--orbit { position: relative; width: var(--spinner-size, 1.2em); height: var(--spinner-size, 1.2em); } .spinner--orbit::after { content: ''; position: absolute; left: 50%; top: 50%; width: .38em; height: .38em; border-radius: 50%; background: var(--spinner-color, currentColor); transform: translate(-50%,-50%) rotate(0turn) translate(calc(var(--spinner-size, 1.2em) / 2.1)); transform-origin: 50% 50%; animation: btn-orbit var(--spinner-speed, .8s) linear infinite; } /* ───────────────────────────────────────────────────── ⑩ RESPONSIVE ───────────────────────────────────────────────────── */ @media (max-width: 1100px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 900px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .auth-card { padding: 2em 1.4em; } .navbar-nav { display: none; } .section-head--center { text-align: left; } .modal-footer { justify-content: center; } .rgi-name-grid { grid-template-columns: 1fr; } .rgi-form { max-width: 100%; } .rpr-form { max-width: 100%; } .rgi-section-sub { display: none; } } @media (max-width: 600px) { body { padding-top: var(--header-height) !important; } .auth-card { padding: 1.7em 1.15em; } .modal-footer { flex-direction: column-reverse; } .modal-footer .ui-btn { width: 100%; } .lgi-section { padding: 1rem; } .lgi-title { font-size: 1.4rem !important; } .lgi-banner-tips { display: none; } } @media (max-width: 480px) { :root { --container-pad: 1rem; } .ui-btn--lg { font-size: .95em; } .grid-2 { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .lgi-valid-check, .lgi-hint, .lgi-section .form-hint, .rgi-pwd-hints li, .rgi-pwd-dot, .rgi-match-hint { transition: none; } }