/* ============================================================================= PDS auth — base partagée entre login et account Contient : tokens, reset, animations, utils, boutons, alerte (toasts) Tokens copiés du brandguide (https://brandguide.pdesouza.fr) ============================================================================= */ :root { /* --- couleurs marque --- */ --primary: #00FF41; --primary-dim: #00CC33; --primary-glow: rgba(0, 255, 65, 0.35); --primary-soft: rgba(0, 255, 65, 0.08); --amber: #FFD700; --cyan: #00D4FF; --red: #FF4444; --orange: #FF8800; /* --- arrière-plans --- */ --bg: #000000; --bg-2: #080D16; --bg-3: #0F1A2A; --bg-card: rgba(8, 13, 22, 0.92); /* --- texte --- */ --fg: #D8E2EC; --fg-dim: #8899AA; --fg-strong: #FFFFFF; /* --- bordures --- */ --border: rgba(0, 255, 65, 0.18); --border-soft: #1E3044; /* --- ombres --- */ --shadow: 0 0 24px rgba(0, 255, 65, 0.06); --shadow-strong: 0 0 48px rgba(0, 255, 65, 0.18); /* --- typographies (Google Fonts chargées dans ) --- */ --font-mono: 'JetBrains Mono', ui-monospace, monospace; --font-display: 'Space Grotesk', system-ui, sans-serif; /* --- échelle d'espacement (multiples de 0.25rem ≈ 4px) --- */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; /* --- rayons de courbure --- */ --radius-sm: 3px; --radius-md: 6px; --radius-lg: 8px; /* --- durées de transition --- */ --t-instant: 80ms; --t-quick: 160ms; --t-base: 300ms; --ease: cubic-bezier(0.2, 0.8, 0.2, 1); } /* ============================================================================= Reset minimal ============================================================================= */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body, h1, h2, h3, p, form, label, dl, dt, dd, ul, table { margin: 0; padding: 0; } html, body { min-height: 100%; background: var(--bg); color: var(--fg); font-family: var(--font-display); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: var(--primary); text-decoration: none; } a:hover { color: var(--primary-dim); } button { font: inherit; cursor: pointer; } input, select, textarea { font: inherit; } /* ============================================================================= Arrière-plan : gradient subtil + ligne de balayage CRT ============================================================================= */ body { background: radial-gradient(ellipse at top, rgba(0,255,65,0.06), transparent 60%), radial-gradient(ellipse at bottom, rgba(0,212,255,0.04), transparent 60%), var(--bg); position: relative; overflow-x: hidden; } /* Lignes horizontales très fines pour le rendu vintage CRT */ .scanline { position: fixed; inset: 0; pointer-events: none; z-index: 1; background: repeating-linear-gradient( to bottom, transparent 0, transparent 3px, rgba(255,255,255,0.012) 3px, rgba(255,255,255,0.012) 4px ); } /* ============================================================================= Animations partagées ============================================================================= */ @keyframes blink { 50% { opacity: 0; } } @keyframes spin { to { transform: rotate(360deg); } } @keyframes enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } @keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ============================================================================= Spinner (loader circulaire vert) ============================================================================= */ .spinner { width: 32px; height: 32px; border: 2px solid var(--border-soft); border-top-color: var(--primary); border-radius: 50%; animation: spin 0.8s linear infinite; } /* ============================================================================= Boutons (variantes : primary, ghost, danger ; modificateur : --sm) ============================================================================= */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); padding: var(--s-3) var(--s-5); font-family: var(--font-mono); font-size: 0.9rem; font-weight: 500; letter-spacing: 0.04em; border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: transparent; color: var(--fg); text-decoration: none; position: relative; white-space: nowrap; transition: all var(--t-quick) var(--ease); } .btn:hover { border-color: var(--primary); color: var(--primary); } .btn:active { transform: translateY(1px); } .btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; } /* Variantes */ .btn--primary { background: var(--primary); color: var(--bg); border-color: var(--primary); font-weight: 700; } .btn--primary:hover { background: var(--primary-dim); color: var(--bg); box-shadow: 0 0 24px var(--primary-glow); } .btn--ghost { background: transparent; color: var(--fg-dim); } .btn--ghost:hover { color: var(--fg); border-color: var(--border-soft); } .btn--danger { color: var(--red); border-color: rgba(255,68,68,0.3); } .btn--danger:hover { background: rgba(255,68,68,0.08); border-color: var(--red); color: var(--red); } .btn--sm { padding: var(--s-2) var(--s-3); font-size: 0.8rem; } /* Flèche animée à droite (utilisée dans .btn--primary "continue →") */ .btn__arrow { transition: transform var(--t-quick) var(--ease); } .btn:hover .btn__arrow { transform: translateX(3px); } /* État busy (aria-busy="true") : le label disparaît, un spinner apparaît */ .btn[aria-busy="true"] { pointer-events: none; color: transparent !important; } .btn[aria-busy="true"]::after { content: ''; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; border: 2px solid currentColor; border-color: var(--bg) transparent var(--bg) transparent; border-radius: 50%; animation: spin 0.8s linear infinite; } .btn--ghost[aria-busy="true"]::after, .btn--danger[aria-busy="true"]::after { border-color: var(--fg) transparent var(--fg) transparent; } /* ============================================================================= Système d'alerte (toast) — référencée par #alert dans le HTML Variantes : alert (erreur, rouge) / alert--ok (succès, vert) ============================================================================= */ .alert { font-family: var(--font-mono); font-size: 0.8125rem; padding: var(--s-3) var(--s-4); background: rgba(255, 68, 68, 0.08); color: var(--red); border: 1px solid rgba(255, 68, 68, 0.3); border-left: 3px solid var(--red); border-radius: var(--radius-md); animation: shake 0.4s var(--ease); } .alert--ok { background: var(--primary-soft); color: var(--primary); border-color: var(--border); border-left-color: var(--primary); } /* ============================================================================= Champs de formulaire (input, label) — partagés ============================================================================= */ .field { display: flex; flex-direction: column; gap: var(--s-2); } .field__label { font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-dim); } .field__hint { font-family: var(--font-mono); } .field__input { width: 100%; padding: var(--s-3) var(--s-4); font-family: var(--font-mono); font-size: 0.95rem; color: var(--fg-strong); background: rgba(0,0,0,0.4); border: 1px solid var(--border-soft); border-radius: var(--radius-md); outline: none; transition: border-color var(--t-quick) var(--ease), box-shadow var(--t-quick) var(--ease), background var(--t-quick) var(--ease); } .field__input:hover { border-color: var(--border); } .field__input:focus { border-color: var(--primary); background: rgba(0,255,65,0.03); box-shadow: 0 0 0 3px var(--primary-soft); } .field__input::placeholder { color: var(--fg-dim); opacity: 0.5; } /* ============================================================================= Utils typographiques ============================================================================= */ .mono { font-family: var(--font-mono); } .muted { color: var(--fg-dim); } .small { font-size: 0.8125rem; } /* ============================================================================= Vues animées (shared par .view) — chaque page a ses propres vues mais l'effet d'apparition est commun ============================================================================= */ .view { animation: enter var(--t-base) var(--ease); } .view[hidden] { display: none; }