/* =====================================================================
My_IPFPS — 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.
===================================================================== */
/* =====================================================================
Typographie — pairing « crafted » : Fraunces (titres, serif optique) +
Public Sans (corps, sans humaniste civique). Polices VENDORISÉES en local
(public/assets/fonts/, woff2 variable subset latin, aucun CDN) → portable
et hors-ligne, dans l'esprit « PDF.js local ». Le subset latin couvre tout
le français (accents, œ, €, guillemets, tirets). Repli system-ui.
===================================================================== */
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 300 900;
font-display: swap;
src: url('../fonts/fraunces-latin-var.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Public Sans';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('../fonts/publicsans-latin-var.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
: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: #586575; /* slate assombri : ≥4.5 sur fonds clairs (bg/hover/th) — WCAG AA */
--border: #e4e9f2;
--hover: #f5f8fc;
--th-bg: #f1f5fb;
--primary: var(--primary-blue);
--primary-dark: var(--primary-blue-dark);
--primary-light: #dbe6ff;
--success: var(--primary-green-dark); /* vert TEXTE assombri (#15803d) — AA ; les remplissages de marque gardent --primary-green */
--success-bg: #e9faf0;
--danger: #b91c1c; /* rouge TEXTE assombri — AA sur blanc & --danger-bg */
--danger-bg: #fef2f2;
--warning: #f59e0b; /* conservé pour les REMPLISSAGES/bordures */
--warning-bg: #fff7e8;
--warning-text: #8a5a00; /* ambre TEXTE foncé — AA (le jaune vif #f59e0b échoue en texte) */
/* ----- Habillage ----- */
/* Sidebar théme-aware : clair en mode light, navy en mode dark (cf. [data-theme="dark"]). */
--sidebar-bg: #eef2f8;
--sidebar-text: #334155;
--sidebar-muted: #64748b;
--sidebar-section: #8a97ab; /* libellés de section (PILOTAGE…) */
--sidebar-brand: #1f2a44; /* texte du wordmark */
--sidebar-hover-bg: rgba(37, 99, 235, .08);
--sidebar-hover-text: var(--primary-blue);
--sidebar-border: rgba(15, 23, 42, .08);
--sidebar-chip: rgba(15, 23, 42, .05); /* fond role-tag */
--sidebar-glow: rgba(37, 99, 235, .07); /* halo radial du haut */
--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;
/* ----- Typographie (familles + échelle modulaire ~1.2) ----- */
--font-head: 'Fraunces', Georgia, 'Times New Roman', serif;
--font-body: 'Public Sans', 'Segoe UI', Roboto, system-ui, -apple-system, sans-serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
/* Échelle de tailles (px → rem-friendly via base 15px) */
--fs-xs: 12px;
--fs-sm: 13px;
--fs-base: 15px;
--fs-md: 16px;
--fs-lg: 18px;
--fs-xl: 21px;
--fs-2xl: clamp(22px, 1.1rem + 1vw, 26px);
--fs-3xl: clamp(26px, 1.2rem + 1.8vw, 34px);
/* Interlignes / graisses / interlettrage */
--lh-tight: 1.18;
--lh-snug: 1.32;
--lh-body: 1.6;
--tracking-tight: -.018em;
--tracking-wide: .06em;
}
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: #60a5fa; /* lien/accent clairci en sombre : ≥4.5 sur card/bg — WCAG AA */
--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);
--warning-text: #fbbf24; /* en sombre, l'ambre vif passe en texte (≥9:1 sur card) */
--sidebar-bg: #0a1424;
--sidebar-text: #c5d2e6;
--sidebar-muted: #8b9bb5;
--sidebar-section: #6b7d99;
--sidebar-brand: #ffffff;
--sidebar-hover-bg: rgba(255, 255, 255, .07);
--sidebar-hover-text: #ffffff;
--sidebar-border: rgba(255, 255, 255, .07);
--sidebar-chip: rgba(255, 255, 255, .06);
--sidebar-glow: rgba(37, 99, 235, .25);
--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; }
/* Fond thémé aussi sur : sinon l'overscroll iOS et la zone du
home-indicator (PWA standalone) laissent apparaître une bande blanche. */
html { background: var(--bg); }
body {
font-family: var(--font-body);
background: var(--bg);
color: var(--text);
min-height: 100vh; /* repli navigateurs sans dvh */
min-height: 100dvh;
touch-action: manipulation; /* pas de zoom double-tap (le pan/scroll reste normal) */
line-height: var(--lh-body);
font-size: var(--fs-base);
font-weight: 400;
letter-spacing: -.003em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-feature-settings: "kern" 1, "liga" 1;
transition: background .25s ease, color .25s ease;
}
/* ---------- Titres : Fraunces (serif optique) ---------- */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-head);
font-optical-sizing: auto;
font-weight: 600;
line-height: var(--lh-tight);
letter-spacing: var(--tracking-tight);
color: var(--text);
}
/* Petits titres « étiquette » (≤ section) : un cran moins serrés pour rester lisibles. */
h4, h5, h6 { letter-spacing: -.008em; line-height: var(--lh-snug); }
a { color: var(--primary); text-decoration: none; transition: color .15s; }
a:hover { text-decoration: underline; }
code {
font-family: var(--font-mono);
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