/* =====================================================================
IPFPS_apps — Thème UI Branding & Dark Mode
Charte : bleu électrique + vert école. Clair par défaut, sombre via
[data-theme="dark"] sur . Toutes les classes historiques sont
conservées et thémées via variables.
===================================================================== */
:root {
/* ----- Charte école ----- */
--primary-blue: #2563eb;
--primary-blue-dark: #1d4ed8;
--primary-green: #16a34a;
--primary-green-dark: #15803d;
/* ----- Fonds / cartes / textes (clair & sombre) ----- */
--bg-light: #f5f8fe;
--bg-dark: #0b1220;
--card-light: #ffffff;
--card-dark: #141f38;
--text-light: #1e293b;
--text-dark: #e6edf7;
/* ----- Tokens actifs (mode clair par défaut) ----- */
--bg: var(--bg-light);
--surface: var(--card-light);
--text: var(--text-light);
--muted: #64748b;
--border: #e4e9f2;
--hover: #f5f8fc;
--th-bg: #f1f5fb;
--primary: var(--primary-blue);
--primary-dark: var(--primary-blue-dark);
--primary-light: #dbe6ff;
--success: var(--primary-green);
--success-bg: #e9faf0;
--danger: #dc2626;
--danger-bg: #fef2f2;
--warning: #f59e0b;
--warning-bg: #fff7e8;
/* ----- Habillage ----- */
--sidebar-bg: #0c1730;
--sidebar-text: #c5d2e6;
--sidebar-muted: #8b9bb5;
--glass: rgba(255, 255, 255, .72);
--ring: rgba(37, 99, 235, .28);
--radius: 14px;
--radius-sm: 9px;
--shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 10px 28px rgba(15, 23, 42, .07);
--shadow-hover: 0 6px 14px rgba(15, 23, 42, .10), 0 18px 40px rgba(15, 23, 42, .12);
--sidebar-w: 252px;
/* ----- Phase 1 — tokens additifs (aucun renommage) ----- */
--radius-lg: 20px;
--ring-success: rgba(22, 163, 74, .26);
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--content-max: 1480px;
}
html[data-theme="dark"] {
--bg: var(--bg-dark);
--surface: var(--card-dark);
--text: var(--text-dark);
--muted: #93a3bd;
--border: #243450;
--hover: #1a2742;
--th-bg: #172339;
--primary: #3b82f6;
--primary-dark: #2563eb;
--primary-light: rgba(59, 130, 246, .20);
--success: #34d399;
--success-bg: rgba(16, 185, 129, .16);
--danger: #f87171;
--danger-bg: rgba(239, 68, 68, .16);
--warning: #fbbf24;
--warning-bg: rgba(245, 158, 11, .16);
--sidebar-bg: #0a1424;
--glass: rgba(16, 25, 45, .62);
--ring: rgba(59, 130, 246, .35);
--shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 30px rgba(0, 0, 0, .45);
--shadow-hover: 0 8px 18px rgba(0, 0, 0, .5), 0 22px 46px rgba(0, 0, 0, .55);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: 'Segoe UI', Roboto, system-ui, -apple-system, sans-serif;
background: var(--bg);
color: var(--text);
line-height: 1.5;
font-size: 15px;
transition: background .25s ease, color .25s ease;
}
a { color: var(--primary); text-decoration: none; transition: color .15s; }
a:hover { text-decoration: underline; }
code {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: .9em; background: var(--hover);
padding: 1px 6px; border-radius: 6px;
}
/* ---------- Auth layout (aligné sur le login clair ; theme-aware) ---------- */
.auth-wrap {
position: relative;
overflow: hidden;
min-height: 100vh;
display: flex; align-items: center; justify-content: center;
padding: 24px;
/* Base sombre par défaut (dark mode) ; surchargée en clair ci-dessous */
background:
radial-gradient(1100px 600px at 12% -10%, rgba(37, 99, 235, .28), transparent 60%),
radial-gradient(900px 500px at 110% 110%, rgba(22, 163, 74, .22), transparent 55%),
linear-gradient(135deg, #0c1730 0%, #122544 100%);
}
/* Mode clair : fond blanc + lavis bleu/vert doux (comme .login-page) */
html:not([data-theme="dark"]) .auth-wrap {
background:
radial-gradient(900px 600px at 12% 8%, rgba(37, 99, 235, .10), transparent 55%),
radial-gradient(820px 560px at 92% 96%, rgba(22, 163, 74, .10), transparent 55%),
#ffffff;
}
/* Orbes flous flottants (clair uniquement, derrière la carte) */
html:not([data-theme="dark"]) .auth-wrap::before,
html:not([data-theme="dark"]) .auth-wrap::after {
content: ""; position: absolute; border-radius: 50%;
filter: blur(60px); pointer-events: none; z-index: 0;
}
html:not([data-theme="dark"]) .auth-wrap::before {
width: 340px; height: 340px; left: -90px; top: -70px;
background: radial-gradient(circle, rgba(37, 99, 235, .22), transparent 70%);
animation: loginFloat 9s ease-in-out infinite;
}
html:not([data-theme="dark"]) .auth-wrap::after {
width: 300px; height: 300px; right: -80px; bottom: -80px;
background: radial-gradient(circle, rgba(22, 163, 74, .20), transparent 70%);
animation: loginFloat 11s ease-in-out infinite reverse;
}
.auth-card {
position: relative; z-index: 2;
width: 100%; max-width: 420px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: 0 20px 60px rgba(2, 8, 23, .35);
padding: 40px 36px;
animation: loginUp .5s ease both;
}
/* Carte glassmorphism en clair (comme .login-card) */
html:not([data-theme="dark"]) .auth-card {
background: rgba(255, 255, 255, .80);
-webkit-backdrop-filter: blur(14px) saturate(140%);
backdrop-filter: blur(14px) saturate(140%);
border: 1px solid rgba(37, 99, 235, .14);
box-shadow: 0 24px 60px rgba(15, 23, 42, .12), 0 2px 6px rgba(15, 23, 42, .05);
}
.auth-brand { text-align: center; margin-bottom: 28px; }
.auth-brand .logo {
width: 72px; height: 72px; margin: 0 auto 14px;
border-radius: 18px; overflow: hidden;
background: linear-gradient(135deg, var(--primary-blue), var(--primary-green));
color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 26px; font-weight: 800;
box-shadow: 0 10px 24px rgba(37, 99, 235, .35);
}
.auth-brand .logo img { width: 100%; height: 100%; object-fit: contain; }
.auth-brand h1 { font-size: 21px; font-weight: 800; letter-spacing: -.01em; }
.auth-brand p { color: var(--muted); font-size: 13px; margin-top: 4px; }
/* ---------- Forms ---------- */
.form-group { margin-bottom: 18px; }
.form-group label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 6px; color: var(--text); }
.form-control {
width: 100%;
padding: 11px 13px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-size: 15px;
color: var(--text);
background: var(--surface);
transition: border-color .15s, box-shadow .15s, background .25s;
}
.form-control::placeholder { color: var(--muted); }
.form-control:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px var(--ring);
}
/* Affordance survol (bordure seule → conserve la flèche custom du select) */
.form-control:hover:not(:disabled):not(:focus) {
border-color: color-mix(in srgb, var(--primary) 30%, var(--border));
}
/* État désactivé lisible (background-color : ne réinitialise pas la flèche du select) */
.form-control:disabled {
background-color: var(--hover);
color: var(--muted);
cursor: not-allowed;
}
select.form-control { background: var(--surface); appearance: none;
background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%;
background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 34px;
}
textarea.form-control { resize: vertical; min-height: 80px; }
input[type="file"].form-control { padding: 8px 10px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 18px; }
@media (max-width: 640px){ .form-row, .form-row-3 { grid-template-columns: 1fr; } }
.form-actions { margin-top: 12px; display: flex; gap: 10px; }
.req { color: var(--danger); }
/* Bouton du sélecteur de fichier (look bouton léger, sans toucher au markup) */
input[type="file"].form-control::-webkit-file-upload-button {
margin-right: 12px; padding: 7px 12px;
border: 1px solid var(--border); border-radius: var(--radius-sm);
background: var(--hover); color: var(--text);
font-size: 13px; font-weight: 600; cursor: pointer;
transition: background .15s, border-color .15s;
-webkit-appearance: none;
}
input[type="file"].form-control::file-selector-button {
margin-right: 12px; padding: 7px 12px;
border: 1px solid var(--border); border-radius: var(--radius-sm);
background: var(--hover); color: var(--text);
font-size: 13px; font-weight: 600; cursor: pointer;
transition: background .15s, border-color .15s;
appearance: none;
}
input[type="file"].form-control:hover::-webkit-file-upload-button {
border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
}
input[type="file"].form-control:hover::file-selector-button {
border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
}
/* Cases à cocher / radios aux couleurs de la charte (markup inchangé) */
input[type="checkbox"], input[type="radio"] { accent-color: var(--primary); cursor: pointer; }
/* Séparateurs de sections dans un formulaire (h3 à l'intérieur d'un