/* ==========================================================================
HORAE Design System v2 (preview)
Tokens issus de la charte Horae (Mai 2026)
========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
/* When TT Firs Neue license acquired, self-host and expose here:
@font-face {
font-family: 'TT Firs Neue';
src: url('/static/brand/tt-firs-neue-regular.woff2') format('woff2');
font-weight: 400; font-style: normal; font-display: swap;
}
(repeat for 500, 600, 700)
*/
/* ==========================================================================
TOKENS
========================================================================== */
:root {
/* ===== PRIMITIVES - charte Horae (4 couleurs x 100/80/50/30) ===== */
/* Prussian Blue - #0E1F33 (bleu Feel's) */
--prussian: #0E1F33;
--prussian-80: #3E4C60;
--prussian-50: #868FA0;
--prussian-30: #B8BDC7;
/* Dusty Denim - #5D88DE (accent brand) */
--denim: #5D88DE;
--denim-80: #7DA0E5;
--denim-50: #AEC4EF;
--denim-30: #CEDBF4;
/* Lavender - #C5D1E9 (accent doux) */
--lavender: #C5D1E9;
--lavender-80: #D0DAEE;
--lavender-50: #E2E8F4;
--lavender-30: #EEF2F8;
/* Platinum - #F5F7FA (fond app) */
--platinum: #F5F7FA;
--platinum-50: #FAFBFD;
/* ===== ALIAS SÉMANTIQUES ===== */
--brand: var(--denim);
--brand-hover: var(--denim-80);
--brand-strong: var(--prussian);
--brand-soft: var(--lavender);
--brand-tint: var(--lavender-50);
--brand-mist: var(--lavender-30);
--brand-shade: var(--prussian-80);
--brand-gradient: linear-gradient(135deg, var(--denim) 0%, var(--lavender) 100%);
--brand-gradient-deep: linear-gradient(135deg, var(--prussian) 0%, var(--denim) 100%);
/* Tenant - surchargeable par établissement */
--tenant-accent: var(--brand);
/* États (extension hors charte, palette sobre) */
--success: #0D9488;
--success-soft: #CCFBF1;
--success-tint: #F0FDFA;
--warning: #B45309;
--warning-soft: #FEF3C7;
--warning-tint: #FFFBEB;
--danger: #DC2626;
--danger-soft: #FEE2E2;
--danger-tint: #FEF2F2;
/* Neutres (mappés sur les primitives) */
--bg: var(--platinum);
--surface: #FFFFFF;
--surface-alt: var(--platinum-50);
--border: #E4E9F2;
--border-strong: var(--prussian-30);
--text: var(--prussian);
--text-muted: var(--prussian-80);
--text-secondary: var(--prussian-80);
--text-subtle: var(--prussian-50);
--text-inverse: #FFFFFF;
/* ===== LEGACY ALIASES (form.js/dashboard.js/admin.js/edt.js) =====
Le code JS legacy utilise --red, --blue, --orange, --grey-* etc.
Mappage vers les nouveaux tokens du design system Horae. */
--blue: var(--brand);
--blue-light: var(--brand-tint);
--blue-hover: var(--brand-hover);
--red: var(--danger);
--red-light: var(--danger-tint);
--red-hover: #B91C1C;
--green: var(--success);
--green-hover: #0F766E;
--orange: var(--warning);
--orange-light: var(--warning-tint);
--grey-bg: var(--platinum);
--grey-border: var(--border);
--grey-text: var(--text-muted);
--white: #FFFFFF;
/* Badge type colors legacy (types de cours - couleurs par défaut si non set en base) */
--badge-cm: var(--denim);
--badge-td: #7C3AED;
--badge-tp: var(--success);
--badge-ds: var(--warning);
/* Typo */
--font-sans: 'TT Firs Neue', 'Inter', system-ui, -apple-system, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
--fs-xs: 12px;
--fs-sm: 13px;
--fs-base: 15px;
--fs-md: 16px;
--fs-lg: 18px;
--fs-xl: 22px;
--fs-2xl: 28px;
--fs-3xl: 36px;
--lh-tight: 1.2;
--lh-snug: 1.35;
--lh-normal: 1.55;
--fw-regular: 400;
--fw-medium: 500;
--fw-semibold: 600;
--fw-bold: 700;
/* Rythme (échelle 4pt) */
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-5: 20px;
--sp-6: 24px;
--sp-8: 32px;
--sp-10: 40px;
--sp-12: 48px;
--sp-16: 64px;
/* Formes */
--radius-xs: 6px;
--radius-sm: 8px;
--radius: 10px;
--radius-lg: 14px;
--radius-xl: 20px;
--radius-pill: 999px;
/* Ombres (teinte Prussian pour cohérence) */
--shadow-xs: 0 1px 2px rgba(14,31,51,.05);
--shadow-sm: 0 2px 4px rgba(14,31,51,.06), 0 1px 2px rgba(14,31,51,.04);
--shadow-md: 0 6px 16px rgba(14,31,51,.08), 0 2px 4px rgba(14,31,51,.05);
--shadow-lg: 0 16px 32px rgba(14,31,51,.12), 0 4px 8px rgba(14,31,51,.06);
--shadow-focus: 0 0 0 3px rgba(93,136,222,.25);
--shadow-focus-danger: 0 0 0 3px rgba(220,38,38,.22);
/* Motion */
--ease: cubic-bezier(.2, .8, .2, 1);
--duration-fast: 120ms;
--duration: 200ms;
--duration-slow: 320ms;
/* Layout */
--container-max: 1400px;
--topbar-h: 64px;
}
/* ==========================================================================
RESET
========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
min-height: 100vh;
font-family: var(--font-sans);
font-size: var(--fs-base);
line-height: var(--lh-normal);
color: var(--text);
background: var(--bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
a { color: var(--brand-strong); text-decoration: none; transition: color var(--duration-fast) var(--ease); }
a:hover { color: var(--brand); }
:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
::selection { background: var(--brand-soft); color: var(--brand-strong); }
/* ==========================================================================
TYPOGRAPHY
========================================================================== */
h1, h2, h3, h4, h5, h6 {
font-weight: var(--fw-semibold);
line-height: var(--lh-tight);
color: var(--text);
letter-spacing: -0.01em;
}
h1 { font-size: var(--fs-3xl); letter-spacing: -0.02em; }
h2 { font-size: var(--fs-2xl); letter-spacing: -0.015em; }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
h5 { font-size: var(--fs-md); }
h6 { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
p { line-height: var(--lh-normal); color: var(--text); }
small { font-size: var(--fs-xs); }
.text-muted { color: var(--text-muted); }
.text-subtle { color: var(--text-subtle); }
.text-inverse { color: var(--text-inverse); }
.text-brand { color: var(--brand); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-danger { color: var(--danger); }
.text-mono { font-family: var(--font-mono); font-size: var(--fs-sm); }
.text-strong { font-weight: var(--fw-semibold); }
.text-caps { text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-muted); }
.eyebrow {
display: inline-block;
font-size: var(--fs-xs);
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: var(--fw-semibold);
color: var(--brand);
}
/* ==========================================================================
LAYOUT
========================================================================== */
.container {
max-width: var(--container-max);
margin: 0 auto;
padding: 0 var(--sp-6);
}
.container--narrow { max-width: 760px; }
.stack > * + * { margin-top: var(--sp-4); }
.stack-sm > * + * { margin-top: var(--sp-2); }
.stack-lg > * + * { margin-top: var(--sp-6); }
.stack-xl > * + * { margin-top: var(--sp-10); }
.row {
display: flex;
gap: var(--sp-3);
align-items: center;
flex-wrap: wrap;
}
.row--between { justify-content: space-between; }
.row--end { justify-content: flex-end; }
.row--top { align-items: flex-start; }
.row--gap-2 { gap: var(--sp-2); }
.row--gap-6 { gap: var(--sp-6); }
.spacer { flex: 1; }
/* ==========================================================================
TOPBAR / HEADER
========================================================================== */
.topbar {
background: var(--surface);
border-bottom: 1px solid var(--border);
box-shadow: var(--shadow-xs);
position: sticky;
top: 0;
z-index: 40;
}
.topbar__inner {
min-height: var(--topbar-h);
display: flex;
align-items: center;
gap: var(--sp-6);
padding: var(--sp-3) var(--sp-6);
max-width: var(--container-max);
margin: 0 auto;
}
.brand-lockup {
display: flex;
align-items: center;
gap: var(--sp-3);
color: var(--brand-strong);
}
.brand-lockup__mark {
width: 32px;
height: 32px;
border-radius: var(--radius-sm);
background: var(--brand-gradient);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.brand-lockup__mark img { width: 22px; height: 22px; }
.brand-lockup__title {
font-size: var(--fs-lg);
font-weight: var(--fw-semibold);
letter-spacing: -0.02em;
}
.brand-lockup__wordmark {
height: 28px;
width: auto;
max-width: 140px;
display: block;
}
.brand-lockup__sub {
color: var(--text-subtle);
font-size: var(--fs-sm);
padding-left: var(--sp-3);
border-left: 1px solid var(--border);
}
.user-menu {
display: flex;
align-items: center;
gap: var(--sp-3);
font-size: var(--fs-sm);
color: var(--text-muted);
}
.user-menu strong { color: var(--text); font-weight: var(--fw-medium); }
.tenant-strip {
background: var(--brand-tint);
border-bottom: 1px solid var(--border);
padding: var(--sp-2) var(--sp-6);
font-size: var(--fs-sm);
color: var(--brand-strong);
}
.tenant-strip .container { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
/* ==========================================================================
AUTH SHELL (login, reset, register) - fond Prussian + blobs charte
========================================================================== */
.auth-shell {
min-height: 100vh;
background: var(--prussian);
color: var(--text-inverse);
display: flex;
align-items: center;
justify-content: center;
padding: var(--sp-6);
position: relative;
overflow: hidden;
}
/* Blob organique haut-droite avec border-radius inversé (V9) */
.auth-shell::before {
content: "";
position: absolute;
right: -22%;
top: -25%;
width: 62vw;
min-width: 520px;
height: 62vw;
min-height: 520px;
background:
radial-gradient(ellipse 55% 60% at 45% 60%, rgba(93,136,222,.28), transparent 70%),
radial-gradient(ellipse 45% 50% at 70% 35%, rgba(93,136,222,.16), transparent 70%);
border-radius: 60% 40% 55% 45% / 40% 55% 45% 60%;
filter: blur(4px);
pointer-events: none;
}
.auth-shell::after {
content: "";
position: absolute;
left: -22%;
bottom: -25%;
width: 62vw;
min-width: 520px;
height: 62vw;
min-height: 520px;
background:
radial-gradient(ellipse 55% 60% at 55% 40%, rgba(93,136,222,.28), transparent 70%),
radial-gradient(ellipse 45% 50% at 30% 65%, rgba(93,136,222,.16), transparent 70%);
border-radius: 50% 60% 45% 55% / 60% 45% 55% 40%;
filter: blur(4px);
pointer-events: none;
}
/* Icône Horae en fond (V9) - gradient doux non-inversé, aligné sur le halo bas-gauche */
.auth-shell__logo-bg {
position: absolute;
top: 50%;
left: 72%;
transform: translate(-50%, -50%);
width: 154vh;
height: 154vh;
min-width: 990px;
min-height: 990px;
pointer-events: none;
z-index: 0;
}
.auth-shell__logo-bg::after {
content: "";
position: absolute;
inset: 10%;
-webkit-mask: url('/static/brand/icon-horae-blanc.svg') no-repeat center / contain;
mask: url('/static/brand/icon-horae-blanc.svg') no-repeat center / contain;
background:
radial-gradient(ellipse 55% 60% at 55% 40%, rgba(93,136,222,.28), transparent 70%),
radial-gradient(ellipse 45% 50% at 30% 65%, rgba(93,136,222,.16), transparent 70%);
filter: blur(4px);
}
.auth-shell__inner {
position: relative;
z-index: 1;
width: 100%;
max-width: 440px;
}
.auth-shell__brand {
display: block;
text-align: center;
margin-bottom: var(--sp-8);
}
.auth-shell__brand img { height: 76px; width: auto; margin: 0 auto; }
.auth-card {
background: var(--surface);
color: var(--text);
border-radius: var(--radius-lg);
padding: var(--sp-8);
box-shadow: var(--shadow-lg);
border: 1px solid var(--border);
}
.auth-card__header { text-align: center; margin-bottom: var(--sp-6); }
.auth-card__header h1 { font-size: var(--fs-xl); margin-bottom: 6px; }
.auth-card__header p { color: var(--text-muted); font-size: var(--fs-sm); }
.auth-card__error {
padding: var(--sp-3) var(--sp-4);
background: var(--danger-tint);
border: 1px solid var(--danger-soft);
color: var(--danger);
border-radius: var(--radius);
font-size: var(--fs-sm);
margin-bottom: var(--sp-4);
display: none;
}
.auth-card__error[data-visible="true"],
.auth-card__error.show { display: block; }
.auth-card__footer {
margin-top: var(--sp-6);
padding-top: var(--sp-5);
border-top: 1px solid var(--border);
font-size: var(--fs-sm);
color: var(--text-muted);
text-align: center;
}
.auth-card__footer a { color: var(--brand); font-weight: var(--fw-medium); text-decoration: none; }
.auth-card__footer a:hover { color: var(--brand-strong); }
/* Form top banner (public form for teachers) - surface expressive Prussian avec blobs charte */
.form-topbar {
background: var(--prussian);
color: var(--text-inverse);
padding: var(--sp-8) 0 var(--sp-10);
position: relative;
overflow: hidden;
margin-bottom: var(--sp-8);
}
/* Blob organique haut-droite */
.form-topbar::before {
content: "";
position: absolute;
right: -10%;
top: -80%;
width: 55vh;
height: 55vh;
min-width: 420px;
min-height: 420px;
background:
radial-gradient(ellipse 55% 60% at 32% 38%, rgba(93,136,222,.32), transparent 68%),
radial-gradient(ellipse 45% 50% at 72% 68%, rgba(197,209,233,.14), transparent 60%);
border-radius: 55% 45% 60% 40% / 50% 55% 45% 50%;
filter: blur(4px);
pointer-events: none;
}
/* Icône Horae très diluée en fond à droite */
.form-topbar::after {
content: "";
position: absolute;
right: -4%;
top: -30%;
width: 55vh;
height: 55vh;
min-width: 440px;
min-height: 440px;
background: url('/static/brand/icon-horae-blanc.svg') no-repeat center / contain;
opacity: 0.04;
filter: blur(10px);
pointer-events: none;
}
.form-topbar__inner {
position: relative;
z-index: 1;
max-width: none;
margin: 0;
padding: 0 5%;
}
.form-topbar__brand {
display: block;
height: 44px !important;
width: auto !important;
margin: 0 0 var(--sp-6) 0;
}
.form-topbar h1 {
color: var(--text-inverse);
font-size: var(--fs-2xl);
font-weight: var(--fw-bold);
letter-spacing: -0.02em;
line-height: 1.15;
margin: 0 0 var(--sp-2);
text-align: left;
}
.form-topbar__sub {
color: var(--brand-soft);
font-size: var(--fs-md);
font-weight: var(--fw-medium);
margin: 0;
text-align: left;
}
@media (max-width: 640px) {
.form-topbar { padding: var(--sp-6) 0 var(--sp-7); }
.form-topbar__brand { height: 34px !important; margin-bottom: var(--sp-4); }
.form-topbar h1 { font-size: var(--fs-xl); }
.form-topbar__sub { font-size: var(--fs-sm); }
}
/* ==========================================================================
CARDS
========================================================================== */
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-xs);
padding: var(--sp-6);
}
.card--flat { box-shadow: none; }
.card--muted { background: var(--surface-alt); }
.card--accent { border-left: 4px solid var(--brand); padding-left: calc(var(--sp-6) - 4px); }
.card--warning { border-left: 4px solid var(--warning); background: var(--warning-tint); }
.card--danger { border-left: 4px solid var(--danger); background: var(--danger-tint); }
.card--success { border-left: 4px solid var(--success); background: var(--success-tint); }
.card__header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: var(--sp-4);
margin-bottom: var(--sp-5);
}
.card__title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
.card__sub { color: var(--text-muted); font-size: var(--fs-sm); margin-top: 2px; }
.card__actions { display: flex; gap: var(--sp-2); flex-shrink: 0; }
.card__footer {
margin-top: var(--sp-5);
padding-top: var(--sp-4);
border-top: 1px solid var(--border);
display: flex;
justify-content: flex-end;
gap: var(--sp-2);
}
/* ==========================================================================
BUTTONS
========================================================================== */
.btn {
--btn-bg: var(--surface);
--btn-fg: var(--text);
--btn-bd: var(--border);
--btn-bg-hover: var(--surface-alt);
--btn-bd-hover: var(--border-strong);
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--sp-2);
padding: 10px 18px;
border-radius: var(--radius);
border: 1px solid var(--btn-bd);
background: var(--btn-bg);
color: var(--btn-fg);
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
letter-spacing: 0.01em;
cursor: pointer;
transition: background var(--duration-fast) var(--ease),
border-color var(--duration-fast) var(--ease),
color var(--duration-fast) var(--ease),
transform var(--duration-fast) var(--ease),
box-shadow var(--duration-fast) var(--ease);
white-space: nowrap;
text-decoration: none;
}
.btn:hover:not(:disabled) { background: var(--btn-bg-hover); border-color: var(--btn-bd-hover); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn:focus-visible { box-shadow: var(--shadow-focus); }
.btn--sm { padding: 6px 12px; font-size: var(--fs-xs); border-radius: var(--radius-sm); }
.btn--lg { padding: 14px 22px; font-size: var(--fs-md); }
.btn--block { width: 100%; }
/* CTA signature - style pill (charte Horae : boutons ronds pour actions marquantes) */
.btn--pill { border-radius: var(--radius-pill); padding-left: 22px; padding-right: 22px; }
.btn--pill.btn--lg { padding-left: 28px; padding-right: 28px; }
.btn--pill.btn--sm { padding-left: 14px; padding-right: 14px; }
.btn--primary {
--btn-bg: var(--brand);
--btn-fg: var(--text-inverse);
--btn-bd: var(--brand);
--btn-bg-hover: #4B75CB;
--btn-bd-hover: #4B75CB;
}
.btn--primary:hover:not(:disabled) { box-shadow: var(--shadow-md); }
.btn--gradient {
--btn-fg: var(--text-inverse);
background: linear-gradient(135deg, var(--prussian) 0%, var(--denim) 100%);
border-color: transparent;
color: var(--text-inverse);
font-weight: var(--fw-bold);
box-shadow: 0 4px 14px rgba(14,31,51,.28);
}
.btn--gradient svg,
.btn--gradient .btn__icon {
transition: transform var(--duration) var(--ease);
will-change: transform;
}
.btn--gradient:hover:not(:disabled) {
background: linear-gradient(135deg, #1A3352 0%, #4B75CB 100%);
box-shadow: 0 10px 26px rgba(14,31,51,.45);
transform: translateY(-1px);
}
.btn--gradient:hover:not(:disabled) svg,
.btn--gradient:hover:not(:disabled) .btn__icon {
transform: translateX(6px);
}
.btn--gradient:active:not(:disabled) { transform: translateY(0); }
.btn--strong {
--btn-bg: var(--brand-strong);
--btn-fg: var(--text-inverse);
--btn-bd: var(--brand-strong);
--btn-bg-hover: #1A3352;
--btn-bd-hover: #1A3352;
}
.btn--ghost {
--btn-bg: transparent;
--btn-bd: transparent;
--btn-fg: var(--brand-strong);
--btn-bg-hover: var(--brand-tint);
--btn-bd-hover: transparent;
}
.btn--danger {
--btn-bg: var(--surface);
--btn-bd: var(--danger-soft);
--btn-fg: var(--danger);
--btn-bg-hover: var(--danger-tint);
--btn-bd-hover: var(--danger);
}
.btn--danger-solid {
--btn-bg: var(--danger);
--btn-fg: var(--text-inverse);
--btn-bd: var(--danger);
--btn-bg-hover: #B91C1C;
--btn-bd-hover: #B91C1C;
}
.btn--success {
--btn-bg: var(--success);
--btn-fg: var(--text-inverse);
--btn-bd: var(--success);
--btn-bg-hover: #0F766E;
--btn-bd-hover: #0F766E;
}
.btn--dashed {
border-style: dashed;
color: var(--brand);
--btn-bd: var(--border-strong);
--btn-bg-hover: var(--brand-tint);
--btn-bd-hover: var(--brand);
width: 100%;
}
.btn__icon { width: 16px; height: 16px; display: inline-flex; }
.btn--icon-only { padding: 8px; width: 36px; height: 36px; }
/* ==========================================================================
FIELDS
========================================================================== */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field__label {
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
color: var(--text);
display: flex;
gap: 4px;
align-items: baseline;
}
.field__label--required::after {
content: "*";
color: var(--danger);
font-weight: var(--fw-bold);
}
.field__optional {
font-size: var(--fs-xs);
color: var(--text-subtle);
font-weight: var(--fw-regular);
}
.field__control {
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--surface);
color: var(--text);
font-size: var(--fs-sm);
transition: border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);
width: 100%;
}
.field__control::placeholder { color: var(--text-subtle); }
.field__control:hover:not(:disabled) { border-color: var(--border-strong); }
.field__control:focus-visible { outline: none; border-color: var(--brand); box-shadow: var(--shadow-focus); }
.field__control:disabled { background: var(--surface-alt); color: var(--text-subtle); cursor: not-allowed; }
textarea.field__control { min-height: 88px; resize: vertical; line-height: 1.45; }
select.field__control {
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 34px;
}
.field__hint {
font-size: var(--fs-xs);
color: var(--text-subtle);
line-height: 1.45;
}
.field__error {
font-size: var(--fs-xs);
color: var(--danger);
display: flex;
align-items: center;
gap: 4px;
}
.field--error .field__control { border-color: var(--danger); }
.field--error .field__control:focus-visible { box-shadow: var(--shadow-focus-danger); }
.field-group { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-4); }
/* Checkbox / Radio */
.check {
display: inline-flex;
align-items: flex-start;
gap: var(--sp-2);
cursor: pointer;
font-size: var(--fs-sm);
color: var(--text);
line-height: 1.4;
padding: 6px 0;
}
.check input {
appearance: none;
-webkit-appearance: none;
width: 18px;
height: 18px;
border-radius: 4px;
border: 1.5px solid var(--border-strong);
background: var(--surface);
cursor: pointer;
flex-shrink: 0;
position: relative;
transition: border-color var(--duration-fast) var(--ease), background var(--duration-fast) var(--ease);
margin-top: 1px;
}
.check input[type="radio"] { border-radius: 50%; }
.check input:hover { border-color: var(--brand); }
.check input:checked {
background: var(--brand);
border-color: var(--brand);
}
.check input[type="checkbox"]:checked::after {
content: "";
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
}
.check input[type="radio"]:checked::after {
content: "";
position: absolute;
top: 3px; left: 3px; right: 3px; bottom: 3px;
border-radius: 50%;
background: white;
}
.check input:focus-visible { box-shadow: var(--shadow-focus); }
.switch {
--sw-w: 40px; --sw-h: 22px;
display: inline-block;
position: relative;
width: var(--sw-w);
height: var(--sw-h);
}
.switch input { opacity: 0; width: 0; height: 0; }
.switch__slider {
position: absolute;
inset: 0;
background: var(--border-strong);
border-radius: var(--radius-pill);
transition: background var(--duration) var(--ease);
cursor: pointer;
}
.switch__slider::after {
content: "";
position: absolute;
top: 3px; left: 3px;
width: 16px; height: 16px;
background: white;
border-radius: 50%;
transition: transform var(--duration) var(--ease);
box-shadow: var(--shadow-xs);
}
.switch input:checked + .switch__slider { background: var(--brand); }
.switch input:checked + .switch__slider::after { transform: translateX(18px); }
/* ==========================================================================
BADGES
========================================================================== */
.badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 10px;
border-radius: var(--radius-pill);
font-size: var(--fs-xs);
font-weight: var(--fw-semibold);
letter-spacing: 0.02em;
line-height: 1.4;
background: var(--brand-tint);
color: var(--brand-strong);
border: 1px solid transparent;
white-space: nowrap;
}
.badge--brand { background: var(--brand-tint); color: var(--brand); }
.badge--success { background: var(--success-soft); color: var(--success); }
.badge--warning { background: var(--warning-soft); color: var(--warning); }
.badge--danger { background: var(--danger-soft); color: var(--danger); }
.badge--neutral { background: var(--surface-alt); color: var(--text-muted); border-color: var(--border); }
.badge--outline { background: transparent; border-color: currentColor; }
.badge--solid { background: var(--brand); color: var(--text-inverse); }
.badge--sm { padding: 1px 7px; font-size: 10px; }
/* Status dot (used with .badge or standalone) */
.status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--text-subtle);
display: inline-block;
flex-shrink: 0;
}
.status-dot--success { background: var(--success); }
.status-dot--warning { background: var(--warning); }
.status-dot--danger { background: var(--danger); }
.status-dot--pending { background: var(--brand-soft); animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
/* ==========================================================================
CHIPS
========================================================================== */
.chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 5px 10px;
border-radius: var(--radius-pill);
font-size: var(--fs-xs);
font-weight: var(--fw-medium);
background: var(--surface-alt);
color: var(--text-muted);
border: 1px solid var(--border);
cursor: pointer;
transition: all var(--duration-fast) var(--ease);
user-select: none;
}
.chip:hover { border-color: var(--border-strong); color: var(--text); }
.chip[data-active="true"], .chip--active {
background: var(--brand-tint);
color: var(--brand);
border-color: var(--brand-soft);
}
.chip__remove {
margin-left: 2px;
color: currentColor;
opacity: 0.5;
cursor: pointer;
}
.chip__remove:hover { opacity: 1; }
/* ==========================================================================
ALERT / CALLOUT
========================================================================== */
.alert {
display: flex;
gap: var(--sp-3);
padding: var(--sp-4);
border-radius: var(--radius);
border: 1px solid var(--border);
background: var(--surface-alt);
align-items: flex-start;
}
.alert__icon {
width: 20px;
height: 20px;
flex-shrink: 0;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: var(--fw-bold);
color: white;
background: var(--text-muted);
}
.alert__body { flex: 1; min-width: 0; }
.alert__title { font-weight: var(--fw-semibold); margin-bottom: 2px; font-size: var(--fs-sm); }
.alert__text { color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.5; }
.alert--info { background: var(--brand-tint); border-color: var(--brand-soft); }
.alert--info .alert__icon { background: var(--brand); }
.alert--info .alert__title { color: var(--brand-strong); }
.alert--success { background: var(--success-tint); border-color: var(--success-soft); }
.alert--success .alert__icon { background: var(--success); }
.alert--success .alert__title { color: var(--success); }
.alert--warning { background: var(--warning-tint); border-color: var(--warning-soft); }
.alert--warning .alert__icon { background: var(--warning); }
.alert--warning .alert__title { color: var(--warning); }
.alert--danger { background: var(--danger-tint); border-color: var(--danger-soft); }
.alert--danger .alert__icon { background: var(--danger); }
.alert--danger .alert__title { color: var(--danger); }
/* ==========================================================================
EMPTY STATE
========================================================================== */
.empty {
padding: var(--sp-10) var(--sp-6);
text-align: center;
color: var(--text-muted);
}
.empty__icon {
width: 56px; height: 56px;
margin: 0 auto var(--sp-4);
border-radius: var(--radius-lg);
background: var(--brand-tint);
color: var(--brand);
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
}
.empty__title { font-size: var(--fs-lg); color: var(--text); margin-bottom: 4px; }
.empty__body { max-width: 380px; margin: 0 auto var(--sp-4); line-height: 1.5; font-size: var(--fs-sm); }
/* ==========================================================================
PROGRESS
========================================================================== */
.progress {
height: 8px;
background: var(--brand-tint);
border-radius: var(--radius-pill);
overflow: hidden;
position: relative;
}
.progress__bar {
height: 100%;
background: var(--brand);
border-radius: inherit;
transition: width var(--duration-slow) var(--ease);
}
.progress--sm { height: 4px; }
.progress--gradient .progress__bar { background: var(--brand-gradient); }
/* ==========================================================================
STATS / KPI
========================================================================== */
.stat-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: var(--sp-4);
}
.stat {
background: var(--surface);
border: 1px solid var(--border);
border-left: 4px solid var(--brand);
border-radius: var(--radius);
padding: var(--sp-4) var(--sp-5);
position: relative;
overflow: hidden;
}
.stat__label {
font-size: var(--fs-xs);
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: var(--fw-semibold);
color: var(--text-muted);
margin-bottom: 4px;
}
.stat__value {
font-size: var(--fs-2xl);
font-weight: var(--fw-bold);
line-height: 1;
letter-spacing: -0.02em;
color: var(--text);
}
.stat__delta {
margin-top: 4px;
font-size: var(--fs-xs);
color: var(--text-muted);
display: flex;
align-items: center;
gap: 4px;
}
.stat__foot { margin-top: var(--sp-3); }
.stat--success { border-left-color: var(--success); }
.stat--success .stat__value { color: var(--success); }
.stat--warning { border-left-color: var(--warning); }
.stat--warning .stat__value { color: var(--warning); }
.stat--danger { border-left-color: var(--danger); }
.stat--danger .stat__value { color: var(--danger); }
/* ==========================================================================
TABLE
========================================================================== */
.data-table-wrapper {
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
background: var(--surface);
}
.data-table {
width: 100%;
border-collapse: collapse;
font-size: var(--fs-sm);
}
.data-table thead th {
background: var(--surface-alt);
padding: var(--sp-3) var(--sp-4);
text-align: left;
font-size: var(--fs-xs);
font-weight: var(--fw-semibold);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-muted);
border-bottom: 1px solid var(--border);
white-space: nowrap;
}
.data-table tbody td {
padding: var(--sp-3) var(--sp-4);
border-bottom: 1px solid var(--border);
vertical-align: middle;
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover td { background: var(--surface-alt); }
.data-table td.data-table__num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table td.data-table__actions { text-align: right; white-space: nowrap; }
/* ==========================================================================
MODAL
========================================================================== */
.modal-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(14, 31, 51, 0.55);
backdrop-filter: blur(4px);
z-index: 1000;
padding: var(--sp-8) var(--sp-4);
overflow-y: auto;
}
.modal-overlay.active,
.modal-overlay[data-open="true"] {
display: flex;
align-items: flex-start;
justify-content: center;
animation: fadeIn var(--duration) var(--ease);
}
.modal {
background: var(--surface);
border-radius: var(--radius-lg);
max-width: 640px;
width: 100%;
padding: var(--sp-8);
position: relative;
box-shadow: var(--shadow-lg);
animation: modalIn var(--duration-slow) var(--ease);
}
.modal--wide { max-width: 880px; }
.modal__close {
position: absolute;
top: var(--sp-4);
right: var(--sp-4);
width: 36px; height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
font-size: 20px;
line-height: 1;
transition: background var(--duration-fast) var(--ease);
}
.modal__close:hover { background: var(--surface-alt); color: var(--text); }
.modal__header { margin-bottom: var(--sp-5); padding-right: var(--sp-8); }
.modal__title { font-size: var(--fs-xl); font-weight: var(--fw-semibold); }
.modal__sub { color: var(--text-muted); margin-top: 4px; font-size: var(--fs-sm); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalIn { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
/* ==========================================================================
TOAST
========================================================================== */
.toast {
position: fixed;
bottom: var(--sp-6);
right: var(--sp-6);
background: var(--brand-strong);
color: var(--text-inverse);
padding: var(--sp-3) var(--sp-5);
border-radius: var(--radius);
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
z-index: 2000;
opacity: 0;
transform: translateY(6px);
transition: opacity var(--duration) var(--ease), transform var(--duration) var(--ease);
pointer-events: none;
box-shadow: var(--shadow-lg);
max-width: 400px;
}
.toast.show,
.toast[data-visible="true"] { opacity: 1; transform: none; pointer-events: auto; }
.toast--success { background: var(--success); }
.toast--warning { background: var(--warning); }
.toast--danger { background: var(--danger); }
/* ==========================================================================
STEPPER (multi-step formulaire prof)
========================================================================== */
.stepper {
display: flex;
gap: var(--sp-2);
padding: var(--sp-4) 0;
overflow-x: auto;
}
.stepper__item {
flex: 1;
min-width: 140px;
display: flex;
align-items: center;
gap: var(--sp-3);
padding: var(--sp-3);
border-radius: var(--radius);
background: var(--surface-alt);
border: 1px solid var(--border);
color: var(--text-muted);
transition: all var(--duration) var(--ease);
}
.stepper__index {
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--surface);
border: 1.5px solid var(--border-strong);
display: flex;
align-items: center;
justify-content: center;
font-weight: var(--fw-semibold);
font-size: var(--fs-sm);
flex-shrink: 0;
}
.stepper__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stepper__label { font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.stepper__hint { font-size: var(--fs-xs); color: var(--text-subtle); }
.stepper__item[data-state="current"] {
background: var(--brand-tint);
border-color: var(--brand-soft);
color: var(--brand-strong);
}
.stepper__item[data-state="current"] .stepper__index { background: var(--brand); border-color: var(--brand); color: var(--text-inverse); }
.stepper__item[data-state="current"] .stepper__label { color: var(--brand-strong); }
.stepper__item[data-state="done"] {
background: var(--success-tint);
border-color: var(--success-soft);
color: var(--success);
}
.stepper__item[data-state="done"] .stepper__index {
background: var(--success);
border-color: var(--success);
color: var(--text-inverse);
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
background-size: 60% 60%;
color: transparent;
}
/* ==========================================================================
TABS
========================================================================== */
.tabs {
display: flex;
gap: 4px;
border-bottom: 1px solid var(--border);
overflow-x: auto;
padding-bottom: 0;
}
.tab {
padding: var(--sp-3) var(--sp-4);
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
color: var(--text-muted);
border-bottom: 2px solid transparent;
margin-bottom: -1px;
transition: color var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease);
white-space: nowrap;
}
.tab:hover { color: var(--text); }
.tab.active, .tab[aria-selected="true"] {
color: var(--brand);
border-bottom-color: var(--brand);
font-weight: var(--fw-semibold);
}
/* ==========================================================================
ACCORDION
========================================================================== */
.accordion { display: flex; flex-direction: column; gap: var(--sp-2); }
.accordion__item {
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--surface);
overflow: hidden;
}
.accordion__trigger {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--sp-3);
padding: var(--sp-4) var(--sp-5);
font-size: var(--fs-md);
font-weight: var(--fw-semibold);
color: var(--text);
text-align: left;
cursor: pointer;
}
.accordion__trigger:hover { background: var(--surface-alt); }
.accordion__trigger::after {
content: "";
width: 12px; height: 12px;
background-image: url("data:image/svg+xml;utf8,");
transition: transform var(--duration) var(--ease);
flex-shrink: 0;
}
.accordion__item[data-open="true"] .accordion__trigger::after,
.accordion__item.open .accordion__trigger::after { transform: rotate(180deg); }
.accordion__panel {
display: none;
padding: 0 var(--sp-5) var(--sp-5);
border-top: 1px solid var(--border);
padding-top: var(--sp-4);
}
.accordion__item[data-open="true"] .accordion__panel,
.accordion__item.open .accordion__panel { display: block; }
/* ==========================================================================
SKELETON
========================================================================== */
.skel {
background: linear-gradient(90deg, #EDF1F8 0%, #F5F7FA 50%, #EDF1F8 100%);
background-size: 200% 100%;
border-radius: var(--radius-sm);
animation: shimmer 1.6s linear infinite;
height: 12px;
}
.skel--sm { height: 8px; }
.skel--lg { height: 20px; }
.skel--card { height: 96px; border-radius: var(--radius); }
@keyframes shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* ==========================================================================
HORAE SPECIFIC - Dispo grid (form prof)
========================================================================== */
.dispo-grid,
.dispo {
display: grid;
grid-template-columns: 100px repeat(5, 1fr);
gap: 6px;
}
.dispo-header,
.dispo__head {
padding: var(--sp-2);
text-align: center;
font-size: var(--fs-xs);
font-weight: var(--fw-semibold);
color: var(--brand-strong);
background: var(--brand-tint);
border-radius: var(--radius-sm);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.dispo-label,
.dispo__label {
padding: var(--sp-3) var(--sp-2);
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
color: var(--text-muted);
background: var(--surface-alt);
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
}
.dispo-cell,
.dispo__cell {
min-height: 52px;
border-radius: var(--radius-sm);
border: 1.5px solid var(--border);
background: var(--surface);
color: var(--text-subtle);
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all var(--duration-fast) var(--ease);
user-select: none;
}
.dispo-cell:hover:not(.active):not([data-active="true"]),
.dispo__cell:hover:not(.active):not([data-active="true"]) { border-color: var(--border-strong); background: var(--surface-alt); }
.dispo-cell.active,
.dispo__cell[data-active="true"],
.dispo-cell[data-active="true"] {
background: var(--success-tint);
border-color: var(--success);
color: var(--success);
}
/* Fallback quand JS n'a pas set textContent - montre "Oui/Non" */
.dispo__cell:empty::before { content: "Non"; }
.dispo__cell.active:empty::before,
.dispo__cell[data-active="true"]:empty::before { content: "Oui"; }
/* ==========================================================================
HORAE SPECIFIC - Planning grid (form prof - placement des séances)
========================================================================== */
.planning-section {
margin-top: var(--sp-5);
padding-top: var(--sp-4);
border-top: 1px solid var(--border);
}
.planning-title {
font-size: var(--fs-md);
font-weight: var(--fw-semibold);
color: var(--text);
margin-bottom: 4px;
}
.planning-explainer {
font-size: var(--fs-sm);
color: var(--text-muted);
margin-bottom: var(--sp-4);
line-height: 1.5;
}
.planning-grid-wrapper {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding: var(--sp-2) 0;
}
.planning-grid {
display: grid;
gap: 4px;
min-width: max-content;
}
.planning-corner {
min-width: 96px;
}
.planning-col-header {
text-align: center;
font-size: var(--fs-xs);
font-weight: var(--fw-semibold);
color: var(--text-muted);
padding: var(--sp-2) 0;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.planning-row-label,
.planning__row-label {
padding: var(--sp-2);
border-radius: var(--radius-sm);
min-width: 96px;
background: var(--surface-alt);
display: flex;
flex-direction: column;
gap: 4px;
align-items: center;
justify-content: center;
text-align: center;
}
.planning-badge {
display: inline-flex;
align-items: center;
padding: 3px 10px;
border-radius: var(--radius-sm);
font-size: var(--fs-xs);
font-weight: var(--fw-bold);
color: white;
letter-spacing: 0.04em;
cursor: pointer;
user-select: none;
}
.planning-counter {
font-size: 11px;
color: var(--text-muted);
font-weight: var(--fw-medium);
}
.planning-counter.done { color: var(--success); }
.planning-cell,
.planning__cell {
position: relative;
min-width: 64px;
min-height: 60px;
max-width: 100%;
border-radius: var(--radius-sm);
background: var(--surface-alt);
border: 1px solid transparent;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform var(--duration-fast) var(--ease), background var(--duration-fast) var(--ease);
color: white;
font-weight: var(--fw-semibold);
font-size: var(--fs-sm);
padding: 4px;
overflow: hidden;
}
.planning-cell > * {
max-width: 100%;
min-width: 0;
}
.planning-cell:hover:not(.selected):not(.disabled),
.planning__cell:hover:not(.selected):not(.disabled) {
background: var(--brand-tint);
transform: translateY(-1px);
}
.planning-cell.selected,
.planning__cell.selected { color: white; }
.planning-cell.disabled,
.planning__cell.disabled {
opacity: 0.35;
cursor: not-allowed;
background: var(--surface-alt);
}
.planning-cell-type {
font-size: var(--fs-sm);
font-weight: var(--fw-bold);
}
.planning-cell-dur {
font-size: 10px;
opacity: 0.9;
}
.planning-cell-salle {
font-size: 9px;
opacity: 0.85;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.planning-cell-rem {
font-size: 9px;
opacity: 0.9;
font-style: italic;
line-height: 1.2;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
padding: 0 2px;
text-align: center;
}
.planning-cell-assign {
font-size: 9px;
opacity: 0.95;
cursor: pointer;
padding: 1px 4px;
border-radius: 3px;
background: rgba(255,255,255,0.18);
margin-top: 1px;
}
.planning-cell-assign:hover { background: rgba(255,255,255,0.28); }
.planning-gear-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
font-size: 18px;
line-height: 1;
cursor: pointer;
color: rgba(255,255,255,0.85);
background: rgba(0,0,0,0.15);
border-radius: 50%;
transition: background var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease), transform var(--duration-fast) var(--ease);
user-select: none;
flex: 0 0 auto;
}
.planning-gear-btn:hover {
background: rgba(255,255,255,0.28);
color: #fff;
transform: rotate(45deg);
}
.planning-gear-btn.has-options {
background: #FFD700;
color: #1a1a1a;
}
@media (max-width: 720px) {
.planning-gear-btn { width: 28px; height: 28px; font-size: 20px; }
}
.planning-done-msg {
margin-top: var(--sp-3);
padding: var(--sp-3) var(--sp-4);
background: var(--success-tint);
border: 1px solid var(--success-soft);
border-radius: var(--radius);
color: var(--success);
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
}
/* Options panel (floating drawer sur cellule) */
.planning-opt-panel {
position: fixed;
z-index: 9999;
background: var(--surface);
color: var(--text);
border: 1px solid var(--border);
border-left: 3px solid var(--brand);
border-radius: var(--radius);
padding: var(--sp-4);
box-shadow: 0 12px 32px rgba(0, 34, 89, 0.18), 0 2px 6px rgba(0, 0, 0, 0.06);
min-width: 280px;
max-width: 340px;
animation: opt-panel-in 160ms var(--ease);
}
@keyframes opt-panel-in {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
.planning-cell.has-open-panel {
outline: 3px solid var(--brand);
outline-offset: 2px;
z-index: 2;
}
.planning-opt-title {
font-weight: var(--fw-semibold);
font-size: var(--fs-sm);
margin-bottom: var(--sp-3);
color: var(--text);
}
.planning-opt-body {
display: flex;
flex-direction: column;
gap: var(--sp-2);
}
.planning-opt-row {
display: flex;
align-items: center;
gap: var(--sp-2);
font-size: var(--fs-sm);
cursor: pointer;
color: var(--text);
}
.planning-opt-hint {
font-size: var(--fs-xs);
color: var(--text-subtle);
line-height: 1.4;
padding-left: 26px;
}
.planning-opt-select {
padding: 6px 10px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-size: var(--fs-sm);
font-family: inherit;
color: var(--text);
background: var(--surface);
width: 100%;
margin-left: 0;
}
.planning-opt-row-label {
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
color: var(--text);
margin-top: var(--sp-2);
}
.planning-opt-remarque {
padding: 6px 10px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-size: var(--fs-sm);
font-family: inherit;
color: var(--text);
background: var(--surface);
width: 100%;
}
/* Assign dropdown intervenants (SAÉ collaboratif) */
.assign-dropdown-fixed {
position: fixed;
z-index: 9999;
background: var(--surface);
color: var(--text);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: var(--sp-3);
box-shadow: var(--shadow-lg);
min-width: 220px;
max-width: 300px;
max-height: 320px;
overflow-y: auto;
}
.assign-dropdown-fixed input[type="text"] {
width: 100%;
padding: 6px 8px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-size: var(--fs-sm);
margin-bottom: var(--sp-2);
font-family: inherit;
}
.assign-dropdown-fixed label {
display: flex;
align-items: center;
gap: 6px;
padding: 4px 6px;
font-size: var(--fs-sm);
cursor: pointer;
border-radius: var(--radius-sm);
}
.assign-dropdown-fixed label:hover { background: var(--brand-tint); }
/* ==========================================================================
HORAE SPECIFIC - EDT week (grille finale)
========================================================================== */
.edt-week {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--sp-5);
box-shadow: var(--shadow-xs);
}
.edt-week__head {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: var(--sp-4);
}
.edt-week__title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
.edt-week__meta { color: var(--text-muted); font-size: var(--fs-sm); }
.edt-grid {
display: grid;
grid-template-columns: 64px repeat(5, 1fr);
gap: 2px;
position: relative;
min-height: 300px;
background: var(--surface-alt);
border-radius: var(--radius);
padding: 4px;
}
.edt-grid__col-head {
text-align: center;
font-size: var(--fs-xs);
font-weight: var(--fw-semibold);
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
padding: var(--sp-2) 0;
background: transparent;
}
.edt-grid__hour {
text-align: right;
padding-right: 8px;
font-size: 11px;
color: var(--text-subtle);
border-top: 1px solid var(--border);
}
.edt-grid__col {
position: relative;
background: var(--surface);
border-radius: var(--radius-sm);
min-height: 260px;
}
.edt-slot {
position: absolute;
left: 4px;
right: 4px;
border-radius: 6px;
padding: 8px 10px;
color: white;
font-size: var(--fs-xs);
line-height: 1.35;
overflow: hidden;
cursor: pointer;
transition: box-shadow var(--duration-fast) var(--ease), transform var(--duration-fast) var(--ease);
}
.edt-slot:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); z-index: 2; }
.edt-slot__type { font-weight: var(--fw-bold); letter-spacing: 0.06em; }
.edt-slot__title { font-weight: var(--fw-semibold); }
.edt-slot__meta { opacity: 0.85; font-size: 10px; }
/* ==========================================================================
HORAE SPECIFIC - Enseignement card (form prof)
========================================================================== */
.ens-card,
.ens {
background: var(--surface);
border: 1px solid var(--border);
border-left: 4px solid var(--brand);
border-radius: var(--radius-lg);
padding: var(--sp-5) var(--sp-6);
box-shadow: var(--shadow-xs);
margin-bottom: var(--sp-4);
}
.ens-card.ens-readonly,
.ens--readonly {
border-left-color: var(--warning);
background: var(--warning-tint);
}
.ens-card.ens-readonly input,
.ens-card.ens-readonly select,
.ens-card.ens-readonly textarea {
background: rgba(255,255,255,0.6);
cursor: not-allowed;
}
.ens__head {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: var(--sp-3);
margin-bottom: var(--sp-3);
flex-wrap: wrap;
}
.ens__title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
.ens-ref,
.ens__ref {
color: var(--text-muted);
font-size: var(--fs-sm);
padding: var(--sp-2) var(--sp-3);
background: var(--surface-alt);
border-radius: var(--radius-sm);
margin-bottom: var(--sp-3);
font-family: var(--font-mono);
font-size: 12px;
border: 1px solid var(--border);
}
.ens-row,
.ens__row {
display: flex;
align-items: flex-start;
gap: var(--sp-3);
padding: var(--sp-3) 0;
border-bottom: 1px solid var(--border);
flex-wrap: wrap;
}
.ens-row:last-child,
.ens__row:last-child { border-bottom: none; }
.ens-row-label,
.ens__row-label {
min-width: 80px;
padding: 6px 12px;
border-radius: var(--radius-sm);
color: white;
font-size: var(--fs-xs);
font-weight: var(--fw-bold);
letter-spacing: 0.05em;
text-align: center;
flex-shrink: 0;
}
.ens-row-fields,
.ens__row-fields {
display: flex;
gap: var(--sp-3);
flex-wrap: wrap;
flex: 1;
align-items: flex-end;
}
.ens-labeled-field {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 130px;
}
.ens-field-label {
font-size: var(--fs-xs);
font-weight: var(--fw-medium);
color: var(--text-muted);
}
.ens-field-label.ens-field-error { color: var(--danger); }
.ens-labeled-field input,
.ens-labeled-field select,
.ens-date-debut-matiere {
padding: 8px 10px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-size: var(--fs-sm);
font-family: inherit;
background: var(--surface);
color: var(--text);
transition: border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);
}
.ens-labeled-field input:focus,
.ens-labeled-field select:focus,
.ens-date-debut-matiere:focus {
outline: none;
border-color: var(--brand);
box-shadow: var(--shadow-focus);
}
.ens-field-error,
input.ens-field-error,
select.ens-field-error {
border-color: var(--danger) !important;
}
.ens-help-text {
font-size: var(--fs-xs);
color: var(--text-subtle);
font-style: italic;
margin-top: 2px;
}
.ens-total-display {
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
color: var(--success);
padding: 8px 0;
align-self: flex-end;
white-space: nowrap;
}
/* Type-specific colors (fallback: BDD peut override en inline) */
.type-cm { background: #5D88DE; }
.type-td { background: #7C3AED; }
.type-tp { background: #0D9488; }
.type-ds { background: #B45309; }
/* ==========================================================================
HORAE SPECIFIC - Récapitulatif (form prof)
========================================================================== */
.recap-ens-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: var(--sp-4);
margin-bottom: var(--sp-3);
}
.recap-ens-title {
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
color: var(--text);
margin-bottom: var(--sp-2);
}
.recap-table {
width: 100%;
border-collapse: collapse;
font-size: var(--fs-xs);
}
.recap-table th {
text-align: left;
padding: 6px 8px;
color: var(--text-muted);
font-weight: var(--fw-semibold);
text-transform: uppercase;
letter-spacing: 0.04em;
border-bottom: 1px solid var(--border);
font-size: 11px;
}
.recap-table td {
padding: 6px 8px;
border-bottom: 1px solid var(--border);
vertical-align: middle;
color: var(--text);
}
.recap-table tr:last-child td { border-bottom: none; }
.recap-type-badge {
display: inline-flex;
padding: 2px 8px;
border-radius: var(--radius-sm);
color: white;
font-size: 11px;
font-weight: var(--fw-bold);
letter-spacing: 0.04em;
}
.recap-total-row td {
font-weight: var(--fw-bold);
color: var(--text);
background: var(--surface-alt);
}
.recap-variable-note {
font-size: var(--fs-xs);
color: var(--text-subtle);
font-style: italic;
margin-top: var(--sp-2);
}
.recap-grand-total {
background: var(--brand-tint);
border: 1px solid var(--brand-soft);
border-radius: var(--radius);
padding: var(--sp-4);
margin-top: var(--sp-4);
}
.recap-grand-title {
font-size: var(--fs-md);
font-weight: var(--fw-semibold);
color: var(--brand-strong);
margin-bottom: var(--sp-2);
}
/* ==========================================================================
HORAE SPECIFIC - Indispo ponctuelles row (form prof)
========================================================================== */
.date-indispo-row {
display: flex;
gap: var(--sp-2);
align-items: center;
margin-bottom: var(--sp-2);
padding: var(--sp-2);
background: var(--surface-alt);
border-radius: var(--radius-sm);
flex-wrap: wrap;
}
.date-indispo-row select,
.date-indispo-row input {
padding: 6px 10px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-size: var(--fs-sm);
font-family: inherit;
background: var(--surface);
color: var(--text);
}
.date-indispo-row input[type="text"] { flex: 1; min-width: 120px; }
/* ==========================================================================
HORAE SPECIFIC - Confirmation box (loading / erreur / succès)
========================================================================== */
.confirmation-box {
text-align: center;
padding: var(--sp-12) var(--sp-6);
max-width: 560px;
margin: 0 auto;
}
.confirmation-box h2 {
font-size: var(--fs-2xl);
color: var(--success);
margin-bottom: var(--sp-3);
}
.confirmation-box p {
color: var(--text-muted);
margin-bottom: var(--sp-4);
line-height: 1.6;
}
/* ==========================================================================
HORAE SPECIFIC - App Shell (sidebar + main) - direction cockpit SaaS
========================================================================== */
.app-shell {
display: grid;
grid-template-columns: 260px 1fr;
min-height: 100vh;
background: var(--bg);
}
.side-nav {
background: var(--prussian);
color: var(--brand-soft);
padding: var(--sp-6) var(--sp-5);
display: flex;
flex-direction: column;
gap: var(--sp-6);
position: sticky;
top: 0;
height: 100vh;
overflow-y: auto;
overflow-x: hidden;
align-self: start;
}
/* Blob décoratif discret dans la sidebar */
.side-nav::before {
content: "";
position: absolute;
right: -60%;
top: 20%;
width: 320px;
height: 320px;
background: radial-gradient(circle at center, rgba(93,136,222,.22) 0%, transparent 65%);
border-radius: 50%;
filter: blur(30px);
pointer-events: none;
z-index: 0;
}
.side-nav > * { position: relative; z-index: 1; }
.side-nav__brand {
display: block;
padding: 0 var(--sp-2);
}
.side-nav__brand img { height: 52px; width: auto; }
.side-nav__section {
display: flex;
flex-direction: column;
gap: 2px;
}
.side-nav__section-title {
font-size: 11px;
font-weight: var(--fw-semibold);
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--prussian-30);
padding: 0 var(--sp-3);
margin-bottom: var(--sp-2);
}
.side-nav__item {
display: flex;
align-items: center;
gap: var(--sp-3);
padding: 10px var(--sp-3);
border-radius: var(--radius-sm);
color: var(--surface);
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
text-decoration: none;
transition: background var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
cursor: pointer;
border: none;
background: transparent;
font-family: inherit;
text-align: left;
width: 100%;
}
.side-nav__item:hover {
background: rgba(93,136,222,0.14);
color: var(--surface);
}
.side-nav__item--active,
.side-nav__item.active {
background: rgba(93,136,222,0.28);
color: var(--surface);
font-weight: var(--fw-semibold);
}
.side-nav__item svg {
width: 18px;
height: 18px;
flex-shrink: 0;
opacity: 0.85;
}
.side-nav__item--active svg,
.side-nav__item.active svg { opacity: 1; }
.side-nav__item-label { flex: 1; }
.side-nav__count {
font-size: 11px;
font-weight: var(--fw-semibold);
padding: 2px 8px;
border-radius: var(--radius-pill);
background: rgba(93,136,222,0.24);
color: var(--brand-soft);
min-width: 26px;
text-align: center;
}
.side-nav__item--active .side-nav__count,
.side-nav__item.active .side-nav__count {
background: var(--brand);
color: var(--surface);
}
.side-nav__user {
margin-top: auto;
display: flex;
align-items: center;
gap: var(--sp-3);
padding: var(--sp-3);
border-radius: var(--radius);
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
}
.side-nav__avatar {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--brand-gradient);
display: flex;
align-items: center;
justify-content: center;
color: var(--surface);
font-size: var(--fs-sm);
font-weight: var(--fw-bold);
flex-shrink: 0;
}
.side-nav__user-info { flex: 1; min-width: 0; }
.side-nav__user-name {
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
color: var(--surface);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.side-nav__user-role {
font-size: 11px;
color: var(--prussian-30);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.side-nav__user-logout {
background: transparent;
border: none;
color: var(--brand-soft);
cursor: pointer;
padding: 4px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
transition: background var(--duration-fast) var(--ease);
}
.side-nav__user-logout:hover { background: rgba(255,255,255,0.08); color: var(--surface); }
.side-nav__user-logout svg { width: 16px; height: 16px; }
/* Main content area */
.app-main {
min-width: 0;
display: flex;
flex-direction: column;
}
.app-hero {
padding: var(--sp-8) var(--sp-8) var(--sp-6);
background: var(--surface);
border-bottom: 1px solid var(--border);
position: relative;
overflow: hidden;
}
.app-hero::after {
content: "";
position: absolute;
right: -80px;
top: -80px;
width: 320px;
height: 320px;
background: radial-gradient(circle at center, rgba(93,136,222,.10) 0%, transparent 65%);
border-radius: 50%;
filter: blur(20px);
pointer-events: none;
}
.app-hero__inner {
position: relative;
z-index: 1;
max-width: 1200px;
margin: 0 auto;
}
.app-hero__breadcrumb {
font-size: var(--fs-xs);
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-muted);
font-weight: var(--fw-semibold);
margin-bottom: var(--sp-2);
}
.app-hero__title {
font-size: var(--fs-3xl);
font-weight: var(--fw-bold);
color: var(--brand-strong);
letter-spacing: -0.02em;
margin-bottom: var(--sp-2);
line-height: 1.1;
}
.app-hero__sub {
font-size: var(--fs-md);
color: var(--text-muted);
max-width: 640px;
margin-bottom: var(--sp-4);
}
.app-hero__actions {
display: flex;
gap: var(--sp-2);
align-items: center;
}
.app-content {
padding: var(--sp-6) var(--sp-8);
max-width: 1200px;
margin: 0 auto;
width: 100%;
}
/* Bento grid pour les stats importantes */
.bento-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: var(--sp-4);
margin-bottom: var(--sp-6);
}
.bento {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--sp-5);
transition: transform var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);
position: relative;
overflow: hidden;
}
.bento:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.bento--span-2 { grid-column: span 2; }
.bento--span-3 { grid-column: span 3; }
.bento--span-4 { grid-column: span 4; }
.bento--span-6 { grid-column: span 6; }
.bento--hero {
background: var(--brand-strong);
color: var(--surface);
border-color: transparent;
padding: var(--sp-6);
position: relative;
overflow: hidden;
}
.bento--hero::after {
content: "";
position: absolute;
right: -120px;
bottom: -120px;
width: 420px;
height: 420px;
background: radial-gradient(circle at center,
rgba(93,136,222,.28) 0%,
rgba(93,136,222,.14) 35%,
transparent 75%);
filter: blur(30px);
pointer-events: none;
}
.bento--hero > * { position: relative; z-index: 1; }
.bento__label {
font-size: var(--fs-xs);
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-muted);
font-weight: var(--fw-semibold);
margin-bottom: 6px;
}
.bento--hero .bento__label { color: var(--brand-soft); }
.bento__value {
font-size: var(--fs-3xl);
font-weight: var(--fw-bold);
color: var(--text);
letter-spacing: -0.02em;
line-height: 1;
margin-bottom: 6px;
}
.bento--hero .bento__value { color: var(--surface); font-size: 44px; }
.bento__delta {
font-size: var(--fs-xs);
color: var(--text-muted);
display: flex;
align-items: center;
gap: 4px;
}
.bento--hero .bento__delta { color: var(--brand-soft); }
.bento__body { color: var(--text-muted); font-size: var(--fs-sm); margin-top: var(--sp-2); }
/* Bento icon (SVG) */
.bento__icon {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-sm);
background: var(--brand-tint);
color: var(--brand);
margin-bottom: var(--sp-3);
}
.bento__icon svg { width: 18px; height: 18px; }
.bento--hero .bento__icon { background: rgba(255,255,255,0.14); color: var(--brand-soft); }
/* ==========================================================================
HORAE SPECIFIC - Admin (admin.html - super admin, legacy)
========================================================================== */
/* Aliases badges & status legacy (dashboard.js hérité v1) → tokens v2 colorés */
.badge-matiere { background: var(--brand-tint); color: var(--brand); border-color: transparent; }
.badge-complete { background: var(--success-tint); color: var(--success); border-color: transparent; }
.badge-attente { background: var(--warning-tint); color: var(--warning); border-color: transparent; }
.badge-en-cours { background: var(--denim-30); color: var(--brand); border-color: transparent; }
.badge-error { background: var(--danger-tint); color: var(--danger); border-color: transparent; }
.status-complete { background: var(--success); }
.status-attente { background: var(--warning); }
.status-en-cours { background: var(--brand); }
.status-error { background: var(--danger); }
/* Modale détail intervenant : respiration entre sections + h3 titres */
#modal-content > * + * { margin-top: var(--sp-5); }
#modal-content h3 {
margin-top: var(--sp-6);
margin-bottom: var(--sp-2);
font-size: var(--fs-lg);
font-weight: var(--fw-semibold);
color: var(--text);
padding-bottom: var(--sp-2);
border-bottom: 1px solid var(--border);
}
#modal-content .dispo-grid { max-width: none !important; }
/* Sur écrans larges, Dispos + Indispos côte à côte */
@media (min-width: 780px) {
#modal-content .modal-two-col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-6);
align-items: start;
}
}
/* Cluster de boutons compacts dans une cellule de table */
.row-actions {
display: inline-flex;
align-items: center;
gap: 6px;
flex-wrap: nowrap;
}
.row-actions .btn {
padding: 5px 10px;
font-size: 12px;
line-height: 1.2;
min-height: 0;
white-space: nowrap;
gap: 5px;
}
.row-actions .btn svg {
width: 12px;
height: 12px;
display: block;
}
.btn.is-copied {
background: var(--success-tint) !important;
color: var(--success) !important;
border-color: var(--success-soft) !important;
}
.data-table td { vertical-align: middle; }
.data-table td.actions,
.data-table td.data-table__actions { white-space: nowrap; }
/* Champs enseignement groupés par type de cours (CM / TD / TP / DS) */
.ens-type-groups {
display: flex;
flex-direction: column;
gap: var(--sp-3);
margin-top: var(--sp-4);
}
.ens-type-block {
--type-color: var(--brand);
--type-tint: var(--brand-tint);
border: 1px solid var(--border);
border-left: 3px solid var(--type-color);
border-radius: var(--radius);
padding: var(--sp-3) var(--sp-4);
background: var(--surface);
}
.ens-type-block--cm { --type-color: #2563EB; --type-tint: #DBEAFE; }
.ens-type-block--td { --type-color: #7C3AED; --type-tint: #EDE9FE; }
.ens-type-block--tp { --type-color: #059669; --type-tint: #D1FAE5; }
.ens-type-block--ds { --type-color: #DC2626; --type-tint: #FEE2E2; }
/* Bloc "vide" : type de cours non renseigné → grisé pour signaler l'absence */
.ens-type-block.is-empty {
--type-color: var(--text-subtle);
background: var(--surface-alt);
opacity: 0.72;
}
.ens-type-block.is-empty .ens-type-block__badge {
background: var(--text-subtle);
}
.ens-type-block.is-empty .ens-type-block__title {
color: var(--text-muted);
font-weight: var(--fw-regular);
font-style: italic;
}
.ens-type-block.is-empty .ens-type-block__title::after {
content: " · non renseigné";
color: var(--text-subtle);
font-size: 11px;
}
.ens-type-block__head {
display: flex;
align-items: center;
gap: var(--sp-2);
margin-bottom: var(--sp-3);
}
.ens-type-block__badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 32px;
height: 22px;
padding: 0 8px;
background: var(--type-color);
color: #fff;
border-radius: 5px;
font-size: 11px;
font-weight: var(--fw-bold);
letter-spacing: 0.06em;
}
.ens-type-block__title {
color: var(--text);
font-weight: var(--fw-semibold);
font-size: var(--fs-sm);
}
.ens-type-block__fields {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: var(--sp-2) var(--sp-3);
}
.ens-type-block__fields .form-group {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.ens-type-block__fields .form-group label {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-muted);
font-weight: var(--fw-semibold);
}
.ens-type-block__fields .form-group input,
.ens-type-block__fields .form-group select {
width: 100%;
padding: 6px 10px;
font-size: 13px;
font-family: inherit;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--surface);
color: var(--text);
transition: border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);
}
.ens-type-block__fields .form-group input:focus-visible,
.ens-type-block__fields .form-group select:focus-visible {
outline: none;
border-color: var(--type-color);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--type-color) 20%, transparent);
}
.form-group__hint {
font-size: 10px;
color: var(--text-subtle);
font-style: italic;
}
/* Bandeau super-admin (impersonation) : sticky en haut de .app-main */
.impersonation-banner {
position: sticky;
top: 0;
z-index: 30;
display: flex;
align-items: center;
gap: var(--sp-4);
padding: 12px var(--sp-8);
background: var(--warning-tint);
border-bottom: 1px solid var(--warning-soft);
color: var(--warning);
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
min-height: 44px;
}
.impersonation-banner__icon {
width: 16px;
height: 16px;
flex: 0 0 auto;
color: var(--warning);
}
.impersonation-banner__text {
flex: 1;
min-width: 0;
color: var(--text);
font-weight: var(--fw-regular);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.impersonation-banner__text strong {
color: var(--brand-strong);
font-weight: var(--fw-semibold);
}
.impersonation-banner__exit {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
border-radius: var(--radius-pill);
background: var(--surface);
color: var(--brand-strong);
font-size: var(--fs-xs);
font-weight: var(--fw-semibold);
text-decoration: none;
border: 1px solid var(--border);
flex: 0 0 auto;
transition: background var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease);
}
.impersonation-banner__exit:hover {
background: var(--warning);
color: var(--surface);
border-color: var(--warning);
}
.impersonation-banner__exit svg { width: 12px; height: 12px; }
@media (max-width: 560px) {
.impersonation-banner { padding: 8px var(--sp-4); gap: var(--sp-2); }
.impersonation-banner__text { white-space: normal; font-size: 12px; }
.impersonation-banner__exit { padding: 4px 10px; }
.impersonation-banner__exit span { display: none; }
}
/* Sections admin, département & établissement (routeur onglets sidebar) */
.admin-section,
.dept-section,
.etab-section {
display: none;
animation: fadeIn var(--duration) var(--ease);
}
.admin-section.active,
.dept-section.active,
.etab-section.active { display: block; }
/* Select filtre admin */
.admin-filter-select {
padding: 8px 12px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-size: var(--fs-sm);
font-family: inherit;
background: var(--surface);
color: var(--text);
cursor: pointer;
transition: border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 10px center;
padding-right: 30px;
}
.admin-filter-select:hover { border-color: var(--border-strong); }
.admin-filter-select:focus-visible { outline: none; border-color: var(--brand); box-shadow: var(--shadow-focus); }
/* Nom cliquable dans les tables admin */
.clickable-name {
color: var(--brand-strong);
font-weight: var(--fw-medium);
cursor: pointer;
transition: color var(--duration-fast) var(--ease);
border-bottom: 1px dashed transparent;
}
.clickable-name:hover { color: var(--brand); border-bottom-color: var(--brand); }
/* Badges rôles utilisateurs */
.badge-role {
display: inline-flex;
padding: 3px 10px;
border-radius: var(--radius-pill);
font-size: var(--fs-xs);
font-weight: var(--fw-semibold);
letter-spacing: 0.02em;
line-height: 1.4;
white-space: nowrap;
}
.badge-super_admin {
background: var(--danger-tint);
color: var(--danger);
}
.badge-admin_etablissement {
background: var(--brand-tint);
color: var(--brand);
}
.badge-responsable_edt {
background: var(--success-tint);
color: var(--success);
}
/* User bar (Connecté en tant que + Déconnexion) */
#user-bar {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--sp-3);
font-size: var(--fs-sm);
color: var(--text-muted);
margin-top: var(--sp-2);
}
#user-bar strong { color: var(--text); font-weight: var(--fw-semibold); }
/* Header legacy (.header wrapper - dashboard/admin/edt shell) */
.header {
background: var(--surface);
border-bottom: 1px solid var(--border);
box-shadow: var(--shadow-xs);
margin-bottom: var(--sp-5);
}
.header .container {
padding-top: var(--sp-4);
padding-bottom: var(--sp-4);
}
.header-top {
display: flex;
align-items: center;
gap: var(--sp-4);
}
.header-logo {
height: 34px;
width: auto;
}
.header h1 {
font-size: var(--fs-xl);
font-weight: var(--fw-semibold);
color: var(--brand-strong);
margin: 0;
flex: 1;
}
/* ==========================================================================
BUTTON LEGACY ALIASES (matcher form.js/dashboard.js/admin.js/edt.js)
Le vieux code utilise .btn-primary etc (sans double dash BEM)
========================================================================== */
.btn-primary {
--btn-bg: var(--brand);
--btn-fg: var(--text-inverse);
--btn-bd: var(--brand);
--btn-bg-hover: #4B75CB;
--btn-bd-hover: #4B75CB;
background: var(--btn-bg);
color: var(--btn-fg);
border-color: var(--btn-bd);
}
.btn-primary:hover:not(:disabled) { background: var(--btn-bg-hover); border-color: var(--btn-bd-hover); box-shadow: var(--shadow-md); }
.btn-success {
--btn-bg: var(--success);
--btn-fg: var(--text-inverse);
--btn-bd: var(--success);
background: var(--btn-bg);
color: var(--btn-fg);
border-color: var(--btn-bd);
}
.btn-success:hover:not(:disabled) { background: #0F766E; border-color: #0F766E; }
.btn-danger {
--btn-bg: var(--surface);
--btn-fg: var(--danger);
--btn-bd: var(--danger-soft);
background: var(--btn-bg);
color: var(--btn-fg);
border-color: var(--btn-bd);
}
.btn-danger:hover:not(:disabled) { background: var(--danger-tint); border-color: var(--danger); }
.btn-outline {
--btn-bg: transparent;
--btn-fg: var(--brand-strong);
--btn-bd: var(--border);
background: transparent;
color: var(--btn-fg);
border-color: var(--btn-bd);
}
.btn-outline:hover:not(:disabled) { background: var(--brand-tint); border-color: var(--brand-soft); }
.btn-sm { padding: 6px 12px; font-size: var(--fs-xs); border-radius: var(--radius-sm); }
.btn-copy {
background: var(--brand-tint);
color: var(--brand);
border-color: var(--brand-soft);
}
.btn-copy:hover:not(:disabled) { background: var(--brand-soft); }
.btn-add-dashed {
background: transparent;
border: 2px dashed var(--border-strong);
color: var(--brand);
width: 100%;
padding: var(--sp-4);
font-weight: var(--fw-semibold);
border-radius: var(--radius);
}
.btn-add-dashed:hover:not(:disabled) { border-color: var(--brand); background: var(--brand-tint); }
/* ==========================================================================
RESPONSIVE
========================================================================== */
@media (max-width: 1024px) {
.container { padding: 0 var(--sp-4); }
}
/* App shell : passer en layout empilé sous 960px (sidebar devient top bar). */
@media (max-width: 960px) {
.app-shell {
grid-template-columns: 1fr;
grid-template-rows: auto 1fr;
}
.side-nav {
position: sticky;
top: 0;
z-index: 30;
flex-direction: row;
align-items: center;
height: auto;
padding: var(--sp-3) var(--sp-4);
gap: var(--sp-3);
overflow-x: auto;
overflow-y: visible;
flex-wrap: nowrap;
}
.side-nav__brand { flex: 0 0 auto; }
.side-nav__brand img { height: 32px; }
.side-nav__section {
display: flex;
flex-direction: row;
gap: 4px;
flex: 1 1 auto;
align-items: center;
min-width: 0;
}
.side-nav__section-title { display: none; }
.side-nav__item {
padding: 8px 10px;
justify-content: center;
gap: 6px;
flex: 0 0 auto;
width: auto;
}
.side-nav__item-label { display: none; }
.side-nav__count { position: static; }
.side-nav__user {
margin: 0;
padding: 6px 8px;
flex: 0 0 auto;
gap: 6px;
}
.side-nav__user-info { display: none; }
/* Contexte département (semester-selector) : réduit ou masqué en top bar. */
.side-nav > div:not(.side-nav__section):not(.side-nav__user) {
display: none;
}
.app-hero { padding-top: var(--sp-6); padding-bottom: var(--sp-5); }
.app-hero__title { font-size: 26px; }
}
@media (max-width: 720px) {
.bento-grid { grid-template-columns: repeat(2, 1fr); }
.bento--span-2,
.bento--span-3,
.bento--span-4,
.bento--span-6 { grid-column: span 2; }
}
@media (max-width: 560px) {
.app-hero__actions { flex-direction: column; align-items: stretch; }
.app-hero__actions .btn { justify-content: center; }
.card__header {
flex-direction: column;
align-items: stretch;
gap: var(--sp-3);
}
.card__actions { justify-content: flex-start; }
.bento-grid { grid-template-columns: 1fr; gap: var(--sp-3); }
.bento--span-2,
.bento--span-3,
.bento--span-4,
.bento--span-6 { grid-column: span 1; }
/* Bento et grid Progression : passer en 1 colonne */
.app-content .card > div[style*="grid-template-columns: 1fr 2fr"],
.app-content .card > div[style*="grid-template-columns:1fr 2fr"] {
grid-template-columns: 1fr !important;
gap: var(--sp-5) !important;
}
.app-content .card > div > div[style*="repeat(3, 1fr)"],
.app-content .card > div > div[style*="repeat(3,1fr)"] {
grid-template-columns: repeat(3, 1fr) !important;
gap: var(--sp-2) !important;
}
}
@media (max-width: 768px) {
:root { --fs-3xl: 28px; --fs-2xl: 22px; --fs-xl: 18px; }
.container { padding: 0 var(--sp-3); }
.card { padding: var(--sp-4); }
.dispo-grid, .dispo { grid-template-columns: 80px repeat(5, 1fr); gap: 4px; }
.dispo-cell, .dispo__cell { min-height: 44px; font-size: var(--fs-xs); }
.stepper { padding: var(--sp-3) 0; }
.stepper__item { min-width: 60px; padding: var(--sp-2); }
.stepper__body { display: none; }
.modal { padding: var(--sp-5); }
.form-topbar { padding: var(--sp-8) 0; }
.ens-card, .ens { padding: var(--sp-4); }
.ens-row, .ens__row { flex-direction: column; align-items: stretch; }
.ens-labeled-field { min-width: 100%; }
.planning-cell, .planning__cell { min-width: 52px; min-height: 52px; }
.date-indispo-row { flex-direction: column; align-items: stretch; }
.date-indispo-row input, .date-indispo-row select { width: 100%; }
}
@media (max-width: 480px) {
.stat-grid { grid-template-columns: 1fr 1fr; }
.row { gap: var(--sp-2); }
}
/* ==========================================================================
UTILITIES
========================================================================== */
.u-hidden { display: none !important; }
/* L'attribut [hidden] doit toujours battre les display:flex/grid/etc. */
[hidden] { display: none !important; }
.u-sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.u-mt-0 { margin-top: 0 !important; }
.u-mt-2 { margin-top: var(--sp-2); }
.u-mt-4 { margin-top: var(--sp-4); }
.u-mt-6 { margin-top: var(--sp-6); }
.u-mt-8 { margin-top: var(--sp-8); }
.u-nowrap { white-space: nowrap; }
.u-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ==========================================================================
HORAE - FORM PROF POLISH V2
Fiche prof : dispos, enseignements, planning, récap, confirmation
========================================================================== */
/* Dispos : grille responsive avec header lisible en mobile */
@media (max-width: 560px) {
.dispo-grid,
.dispo {
grid-template-columns: 56px repeat(5, 1fr);
gap: 4px;
}
.dispo-header,
.dispo__head {
padding: 4px 2px;
font-size: 10px;
letter-spacing: 0.02em;
overflow: hidden;
white-space: nowrap;
}
.dispo-label,
.dispo__label {
padding: 4px 2px;
font-size: 11px;
text-align: center;
}
.dispo-cell,
.dispo__cell {
min-height: 44px;
font-size: 12px;
}
}
/* Textarea remarques disponibilités : hauteur suffisante pour voir le contenu */
#remarques-dispo {
min-height: 72px;
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-family: inherit;
font-size: var(--fs-sm);
color: var(--text);
background: var(--surface);
width: 100%;
resize: vertical;
line-height: 1.5;
transition: border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);
}
#remarques-dispo:focus {
outline: none;
border-color: var(--brand);
box-shadow: var(--shadow-focus);
}
/* Titres numérotés des 3 sections (h2 = "1. …", h3 = sous-blocs) */
/* Container fiche prof : prend toute la largeur, aligné sur le bandeau (5% de chaque côté) */
.form-container {
max-width: none !important;
padding-left: 5% !important;
padding-right: 5% !important;
}
.form-container > .card {
margin-bottom: var(--sp-8);
padding: var(--sp-8) var(--sp-10);
}
@media (max-width: 960px) {
.form-container > .card { padding: var(--sp-7) var(--sp-7); }
}
@media (max-width: 640px) {
.form-container {
padding-left: var(--sp-4) !important;
padding-right: var(--sp-4) !important;
}
.form-container > .card {
padding: var(--sp-5) var(--sp-5);
margin-bottom: var(--sp-5);
}
}
.form-container > .card > h2:first-child,
main > .container > .card > h2:first-child {
font-size: var(--fs-2xl);
color: var(--brand-strong);
margin: 0 0 var(--sp-5);
padding-bottom: var(--sp-4);
border-bottom: 2px solid var(--brand-tint);
font-weight: var(--fw-bold);
line-height: 1.15;
}
main > .container > .card h3,
.form-container > .card h3 {
color: var(--brand);
font-size: var(--fs-md);
font-weight: var(--fw-semibold);
margin: var(--sp-7) 0 var(--sp-2);
line-height: 1.3;
}
main > .container > .card h3:first-of-type,
.form-container > .card h3:first-of-type { margin-top: var(--sp-3); }
.form-container > .card > p,
main > .container > .card > p {
color: var(--text-muted);
font-size: var(--fs-sm);
line-height: 1.55;
margin: 0 0 var(--sp-4);
}
main > .container > .card {
padding: var(--sp-6);
margin-bottom: var(--sp-5);
}
/* Row indispo : grid responsive au lieu de flex hasardeux */
.date-indispo-row {
display: grid;
grid-template-columns: minmax(140px, 170px) minmax(140px, 170px) minmax(140px, 170px) 1fr auto;
gap: var(--sp-3);
align-items: center;
padding: var(--sp-3);
background: var(--surface-alt);
border-radius: var(--radius-sm);
margin-bottom: var(--sp-2);
}
.date-indispo-row .indispo-type,
.date-indispo-row .indispo-date-debut,
.date-indispo-row .indispo-date-fin,
.date-indispo-row .indispo-motif {
padding: 8px 10px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-family: inherit;
font-size: var(--fs-sm);
background: var(--surface);
color: var(--text);
width: 100%;
min-width: 0;
}
.date-indispo-row .indispo-type:focus,
.date-indispo-row .indispo-date-debut:focus,
.date-indispo-row .indispo-date-fin:focus,
.date-indispo-row .indispo-motif:focus {
outline: none;
border-color: var(--brand);
box-shadow: var(--shadow-focus);
}
@media (max-width: 720px) {
.date-indispo-row {
grid-template-columns: 1fr 1fr;
gap: var(--sp-2);
}
.date-indispo-row .indispo-motif { grid-column: 1 / -1; }
.date-indispo-row > button { grid-column: 1 / -1; justify-self: end; }
}
/* Ens-row : polish sur label (badge type de cours) + respiration fields */
.ens-row {
padding: var(--sp-4) 0;
border-bottom: 1px solid var(--border);
}
.ens-row:first-of-type { padding-top: var(--sp-2); }
.ens-row-label {
min-width: 96px;
box-shadow: 0 1px 2px rgba(0,0,0,0.08);
align-self: flex-start;
margin-top: 6px;
}
.ens-row-fields {
gap: var(--sp-4);
padding: 4px 0;
}
.ens-labeled-field {
min-width: 130px;
}
.ens-labeled-field input[type="number"] {
max-width: 110px;
}
.ens-total-display {
padding: 6px 12px;
background: var(--success-tint);
color: var(--success);
border-radius: var(--radius-pill);
font-size: 12px;
font-weight: var(--fw-semibold);
border: 1px solid var(--success-soft);
}
/* Ens-date-debut-matiere : input date en ligne */
.ens-date-debut-matiere {
padding: 8px 12px;
max-width: 200px;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
}
/* Récapitulatif : styles visuels pour tables + grand total */
.recap-ens-card {
padding: var(--sp-4);
background: var(--surface-alt);
border: 1px solid var(--border);
border-radius: var(--radius);
margin-bottom: var(--sp-3);
}
.recap-ens-title {
font-size: var(--fs-md);
font-weight: var(--fw-semibold);
color: var(--brand-strong);
margin: 0 0 var(--sp-2);
}
.recap-table {
width: 100%;
border-collapse: collapse;
font-size: var(--fs-sm);
background: var(--surface);
border-radius: var(--radius-sm);
overflow: hidden;
}
.recap-table th {
text-align: left;
padding: 8px 12px;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-muted);
font-weight: var(--fw-semibold);
border-bottom: 1px solid var(--border);
background: var(--surface-alt);
}
.recap-table td {
padding: 8px 12px;
border-bottom: 1px solid var(--border);
color: var(--text);
}
.recap-table tr:last-child td { border-bottom: none; }
.recap-total-row td {
font-weight: var(--fw-bold);
background: var(--surface-alt);
border-top: 2px solid var(--border);
}
.recap-type-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 32px;
padding: 3px 10px;
color: #fff;
border-radius: var(--radius-pill);
font-size: 11px;
font-weight: var(--fw-bold);
letter-spacing: 0.04em;
}
.recap-grand-total {
margin-top: var(--sp-5);
padding: var(--sp-4);
background: var(--brand-tint);
border: 1px solid var(--brand-soft);
border-radius: var(--radius);
}
.recap-grand-title {
font-size: var(--fs-md);
font-weight: var(--fw-semibold);
color: var(--brand-strong);
margin: 0 0 var(--sp-3);
}
.recap-grand-total .recap-table {
background: transparent;
}
.recap-variable-note {
font-size: var(--fs-xs);
color: var(--text-subtle);
font-style: italic;
margin-top: var(--sp-2);
}
/* Écran de confirmation "Merci" / "Lien invalide" : mise en scène */
.confirmation-box {
max-width: 520px;
margin: var(--sp-16) auto 0;
padding: var(--sp-8) var(--sp-6);
background: var(--surface);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
text-align: center;
}
.confirmation-box h2 {
font-size: var(--fs-2xl);
color: var(--success);
margin: 0 0 var(--sp-3);
font-weight: var(--fw-bold);
}
.confirmation-box p {
color: var(--text-muted);
margin: 0 0 var(--sp-5);
line-height: 1.5;
}
/* Le bouton "Modifier ma fiche" est stylé inline par form.js (cssText) ;
on override en ciblant l'enfant direct.
!important nécessaire pour battre cssText. */
.confirmation-box > button,
.confirmation-box > button:hover {
padding: 10px 20px !important;
border-radius: var(--radius-pill) !important;
background: var(--surface) !important;
color: var(--brand-strong) !important;
border: 1px solid var(--border-strong) !important;
font-weight: var(--fw-semibold) !important;
font-family: inherit !important;
font-size: var(--fs-sm) !important;
cursor: pointer;
transition: background var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}
.confirmation-box > button:hover {
background: var(--brand-tint) !important;
border-color: var(--brand) !important;
color: var(--brand) !important;
}
/* ==========================================================================
HORAE - Onglet Configuration (Paramètres semestre + Indispos globales)
========================================================================== */
/* Groupes de paramètres : icône + titre/hint à gauche, inputs à droite */
.config-group {
display: grid;
grid-template-columns: 260px 1fr;
gap: var(--sp-6);
padding: var(--sp-5) 0;
align-items: start;
}
.config-group + .config-group { border-top: 1px solid var(--border); }
.config-group:first-of-type { padding-top: var(--sp-4); }
.config-group__head {
display: flex;
gap: var(--sp-3);
align-items: flex-start;
}
.config-group__icon {
flex: 0 0 auto;
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-sm);
}
.config-group__title {
font-size: var(--fs-md);
font-weight: var(--fw-semibold);
color: var(--text);
line-height: 1.3;
}
.config-group__hint {
font-size: 12px;
color: var(--text-muted);
line-height: 1.45;
margin-top: 2px;
}
.config-group__body {
display: flex;
flex-direction: column;
gap: var(--sp-3);
}
.config-group__body--2col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-3);
}
@media (max-width: 720px) {
.config-group { grid-template-columns: 1fr; gap: var(--sp-3); }
.config-group__body--2col { grid-template-columns: 1fr; }
}
/* Ligne horaire "Amplitude / Pause / Intercours" — label à gauche, inputs à droite */
.config-timeslot {
display: grid;
grid-template-columns: 130px 1fr;
gap: var(--sp-3);
align-items: center;
padding: var(--sp-3) var(--sp-4);
background: var(--surface-alt);
border-radius: var(--radius-sm);
}
.config-timeslot__label {
font-size: 12px;
font-weight: var(--fw-semibold);
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.config-timeslot__inputs {
display: flex;
align-items: center;
gap: var(--sp-2);
flex-wrap: wrap;
}
.config-timeslot__dash {
color: var(--text-subtle);
font-weight: var(--fw-semibold);
padding: 0 4px;
}
.field--inline {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
min-width: 0;
}
.field--inline .field__label {
margin-bottom: 0;
font-size: 12px;
font-weight: var(--fw-medium);
color: var(--text-muted);
white-space: nowrap;
}
.field--inline .field__control { width: auto; }
.field__with-suffix {
display: inline-flex;
align-items: stretch;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
overflow: hidden;
background: var(--surface);
}
.field__with-suffix:focus-within {
border-color: var(--brand);
box-shadow: var(--shadow-focus);
}
.field__with-suffix .field__control {
border: none;
box-shadow: none;
width: 70px;
padding-right: 4px;
border-radius: 0;
}
.field__with-suffix .field__control:focus-visible {
box-shadow: none;
}
.field__suffix {
display: flex;
align-items: center;
padding: 0 10px;
font-size: 12px;
color: var(--text-muted);
background: var(--surface-alt);
border-left: 1px solid var(--border);
}
/* Indispos globales : cards par entrée */
.indispo-list {
display: flex;
flex-direction: column;
gap: var(--sp-2);
margin-bottom: var(--sp-4);
}
.indispo-empty {
padding: var(--sp-6);
background: var(--surface-alt);
border-radius: var(--radius-sm);
border: 1px dashed var(--border);
color: var(--text-muted);
font-size: var(--fs-sm);
text-align: center;
font-style: italic;
}
.indispo-card {
display: grid;
grid-template-columns: auto 1fr auto;
gap: var(--sp-4);
align-items: center;
padding: var(--sp-3) var(--sp-4);
background: var(--warning-tint);
border-left: 3px solid var(--warning);
border-radius: var(--radius-sm);
transition: background var(--duration-fast) var(--ease);
}
.indispo-card:hover { background: #FEF6DC; }
.indispo-card__date {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
}
.indispo-card__date-piece {
display: inline-flex;
align-items: baseline;
gap: 6px;
padding: 4px 10px;
background: var(--surface);
border-radius: var(--radius-sm);
border: 1px solid var(--warning-soft);
}
.indispo-card__date-label {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--warning);
font-weight: var(--fw-bold);
}
.indispo-card__date-val {
font-family: var(--font-mono);
font-size: 13px;
font-weight: var(--fw-semibold);
color: var(--text);
}
.indispo-card__date-arrow {
color: var(--warning);
font-weight: var(--fw-bold);
}
.indispo-card__motif {
color: var(--text);
font-weight: var(--fw-medium);
}
.indispo-card__motif.is-empty {
color: var(--text-subtle);
font-style: italic;
font-weight: var(--fw-regular);
}
.indispo-card__delete {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
background: transparent;
border: 1px solid transparent;
border-radius: var(--radius-sm);
color: var(--text-muted);
cursor: pointer;
transition: all var(--duration-fast) var(--ease);
}
.indispo-card__delete:hover {
background: var(--danger);
color: #fff;
border-color: var(--danger);
}
/* Form d'ajout d'une indispo */
.indispo-form {
display: grid;
grid-template-columns: 150px auto 1fr auto;
gap: var(--sp-3);
align-items: center;
padding: var(--sp-3);
background: var(--surface-alt);
border-radius: var(--radius-sm);
border: 1px dashed var(--border);
}
.indispo-form__type .field__control { width: 100%; }
.indispo-form__dates {
display: flex;
align-items: center;
gap: 6px;
}
.indispo-form__dates .field__control {
min-width: 140px;
max-width: 160px;
}
.indispo-form__sep {
color: var(--text-subtle);
font-weight: var(--fw-semibold);
}
.indispo-form__motif { min-width: 180px; }
@media (max-width: 720px) {
.indispo-form {
grid-template-columns: 1fr;
gap: var(--sp-2);
}
.indispo-form__dates { flex-wrap: wrap; }
.indispo-form__dates .field__control { flex: 1; }
.indispo-card { grid-template-columns: 1fr auto; grid-template-areas: "date del" "motif del"; gap: var(--sp-2) var(--sp-3); }
.indispo-card__date { grid-area: date; flex-wrap: wrap; }
.indispo-card__motif { grid-area: motif; }
.indispo-card__delete { grid-area: del; align-self: center; }
}
/* ==========================================================================
HORAE - Référentiel matières (onglet Enseignements)
Rows en lignes propres, avec chips CM/TD/TP colorés + toggle collab
========================================================================== */
.ref-row {
display: grid;
grid-template-columns: 88px 1fr auto auto auto;
align-items: center;
gap: var(--sp-4);
padding: 12px 16px;
border-radius: var(--radius-sm);
transition: background var(--duration-fast) var(--ease);
}
.ref-row + .ref-row { border-top: 1px solid var(--border); }
.ref-row:hover { background: var(--surface-alt); }
.ref-row__code {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px 10px;
background: var(--brand-tint);
color: var(--brand-strong);
border-radius: var(--radius-pill);
font-family: var(--font-mono);
font-size: 11px;
font-weight: var(--fw-bold);
letter-spacing: 0.04em;
white-space: nowrap;
}
.ref-row__nom {
color: var(--text);
font-weight: var(--fw-medium);
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ref-row__hours {
display: grid;
grid-template-columns: repeat(3, 64px);
gap: 4px;
align-items: center;
}
.ref-hours-chip {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
padding: 3px 6px;
border-radius: var(--radius-sm);
font-family: var(--font-mono);
font-size: 12px;
font-weight: var(--fw-semibold);
border: 1px solid transparent;
width: 100%;
}
.ref-hours-chip__key {
font-size: 10px;
letter-spacing: 0.06em;
font-weight: var(--fw-bold);
opacity: 0.7;
}
.ref-hours-chip--cm { background: #DBEAFE; color: #1E40AF; }
.ref-hours-chip--td { background: #EDE9FE; color: #5B21B6; }
.ref-hours-chip--tp { background: #D1FAE5; color: #065F46; }
.ref-hours-chip.is-zero {
background: transparent;
color: var(--text-subtle);
border: 1px dashed var(--border);
}
.ref-hours-chip.is-zero .ref-hours-chip__key { opacity: 0.5; }
.ref-hours-chip.is-zero .ref-hours-chip__val { opacity: 0.7; }
/* Toggle switch pour "Collaboratif" */
.ref-row__collab {
display: inline-flex;
align-items: center;
gap: 6px;
cursor: pointer;
user-select: none;
font-size: 12px;
color: var(--text-muted);
white-space: nowrap;
}
.ref-row__collab-input {
position: absolute;
opacity: 0;
pointer-events: none;
width: 0;
height: 0;
}
.ref-row__collab-track {
position: relative;
display: inline-block;
width: 28px;
height: 16px;
background: var(--border-strong);
border-radius: 999px;
transition: background var(--duration-fast) var(--ease);
flex: 0 0 auto;
}
.ref-row__collab-track::after {
content: "";
position: absolute;
top: 2px;
left: 2px;
width: 12px;
height: 12px;
background: #fff;
border-radius: 50%;
transition: transform var(--duration-fast) var(--ease);
box-shadow: 0 1px 2px rgba(0,0,0,0.18);
}
.ref-row__collab-input:checked ~ .ref-row__collab-track {
background: var(--brand);
}
.ref-row__collab-input:checked ~ .ref-row__collab-track::after {
transform: translateX(12px);
}
.ref-row__collab-input:focus-visible ~ .ref-row__collab-track {
box-shadow: 0 0 0 3px var(--brand-tint);
}
.ref-row__collab:hover .ref-row__collab-track { background: var(--text-subtle); }
.ref-row__collab-input:checked ~ .ref-row__collab-label { color: var(--brand-strong); font-weight: var(--fw-semibold); }
.ref-actions {
display: inline-flex;
gap: 4px;
}
.ref-actions .btn {
padding: 5px 10px;
font-size: 12px;
font-weight: var(--fw-semibold);
border-radius: var(--radius-sm);
min-height: 0;
white-space: nowrap;
}
@media (max-width: 900px) {
.ref-row {
grid-template-columns: auto 1fr;
grid-template-areas:
"code nom"
"hours hours"
"collab actions";
gap: var(--sp-2);
}
.ref-row__code { grid-area: code; }
.ref-row__nom { grid-area: nom; white-space: normal; }
.ref-row__hours { grid-area: hours; flex-wrap: wrap; }
.ref-row__collab { grid-area: collab; }
.ref-actions { grid-area: actions; justify-self: end; }
}
/* ==========================================================================
HORAE - Vue Réponses (dashboard responsable EDT)
3 sous-vues : par intervenant, par enseignement, pré-planning + résumé stats
========================================================================== */
.reponses-summary {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-4);
margin-bottom: var(--sp-5);
}
.reponses-summary__group {
display: flex;
flex-direction: column;
gap: var(--sp-2);
padding: var(--sp-3);
background: var(--surface-alt);
border: 1px solid var(--border);
border-radius: var(--radius);
}
.reponses-summary__title {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-muted);
font-weight: var(--fw-bold);
padding: 0 var(--sp-2);
}
.reponses-summary__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: var(--sp-2);
}
@media (max-width: 900px) {
.reponses-summary { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
.reponses-summary__grid { grid-template-columns: 1fr; }
}
.reponses-stat {
padding: var(--sp-3) var(--sp-4);
background: var(--surface);
border: 1px solid var(--border);
border-left: 3px solid var(--text-subtle);
border-radius: var(--radius);
}
.reponses-stat--success { border-left-color: var(--success); background: var(--success-tint); }
.reponses-stat--warning { border-left-color: var(--warning); background: var(--warning-tint); }
.reponses-stat--danger { border-left-color: var(--danger); background: var(--danger-tint); }
.reponses-stat--brand { border-left-color: var(--brand); background: var(--brand-tint); }
.reponses-stat--neutral { border-left-color: var(--text-subtle); background: var(--surface-alt); }
.reponses-stat__value {
font-size: 22px;
font-weight: var(--fw-bold);
line-height: 1.1;
color: var(--text);
margin-bottom: 2px;
}
.reponses-stat--success .reponses-stat__value { color: var(--success); }
.reponses-stat--warning .reponses-stat__value { color: var(--warning); }
.reponses-stat--danger .reponses-stat__value { color: var(--danger); }
.reponses-stat--brand .reponses-stat__value { color: var(--brand); }
.reponses-stat__label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: var(--fw-semibold);
color: var(--text-muted);
}
.reponses-panel {
display: flex;
flex-direction: column;
gap: var(--sp-4);
}
.reponses-toolbar {
display: flex;
align-items: center;
gap: var(--sp-3);
flex-wrap: wrap;
}
.reponses-toolbar__filters {
display: flex;
gap: 4px;
padding: 4px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-pill);
}
.reponses-toolbar__btn {
padding: 6px 14px;
background: transparent;
color: var(--text-muted);
border: none;
border-radius: 999px;
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
font-family: inherit;
cursor: pointer;
transition: background var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
white-space: nowrap;
}
.reponses-toolbar__btn:hover { background: var(--surface-alt); color: var(--text); }
.reponses-toolbar__btn.is-active { background: var(--brand); color: var(--surface); font-weight: var(--fw-semibold); }
.reponses-toolbar__search {
flex: 1;
min-width: 180px;
max-width: 320px;
margin-left: auto;
padding: 8px 12px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-size: var(--fs-sm);
font-family: inherit;
background: var(--surface);
color: var(--text);
}
.reponses-toolbar__search:focus-visible {
outline: none;
border-color: var(--brand);
box-shadow: var(--shadow-focus);
}
.reponses-toolbar__count {
font-size: var(--fs-sm);
color: var(--text-muted);
font-weight: var(--fw-medium);
}
.reponses-table .is-center { text-align: center; }
.reponses-table td.is-center { vertical-align: middle; }
.reponses-table th, .reponses-table td {
padding: 10px 14px;
font-variant-numeric: tabular-nums;
}
.reponses-table tbody tr {
border-top: 1px solid var(--border);
transition: background var(--duration-fast) var(--ease);
}
.reponses-table tbody tr:hover td { background: var(--surface-alt); }
.reponses-table td.reponses-total {
font-weight: var(--fw-bold);
color: var(--brand-strong);
}
.reponses-table--iv td.is-center { min-width: 60px; }
.reponses-hours-value { color: var(--text); font-weight: var(--fw-semibold); }
.reponses-dispos-count { font-weight: var(--fw-semibold); color: var(--text); }
.reponses-maquette { color: var(--text-muted); }
/* Volume/Écart en pile : une ligne "= 12h TD" par type */
.reponses-vol-stack {
display: inline-flex;
flex-direction: column;
gap: 3px;
align-items: center;
font-family: var(--font-mono);
font-size: 12px;
line-height: 1.2;
}
.reponses-vol-line {
display: inline-flex;
align-items: baseline;
gap: 4px;
color: var(--text);
font-weight: var(--fw-semibold);
}
.reponses-vol-key {
font-size: 10px;
font-weight: var(--fw-semibold);
color: var(--text-subtle);
letter-spacing: 0.06em;
}
.reponses-vol-val {
font-variant-numeric: tabular-nums;
}
.reponses-ecart-stack .is-plus { color: var(--warning); }
.reponses-ecart-stack .is-minus { color: var(--danger); }
.reponses-ecart-stack .is-plus .reponses-vol-key,
.reponses-ecart-stack .is-minus .reponses-vol-key { color: inherit; opacity: 0.7; }
.reponses-ecart-ok {
color: var(--success);
font-size: 12px;
font-weight: var(--fw-semibold);
}
.reponses-code {
font-size: 12px;
color: var(--text-subtle);
}
.reponses-matiere {
font-weight: var(--fw-semibold);
color: var(--text);
margin-top: 2px;
}
.reponses-matiere-inline { font-size: 12px; }
.reponses-cat {
margin-top: 4px;
font-size: 10px;
font-weight: var(--fw-semibold);
}
.reponses-name strong { font-weight: var(--fw-semibold); color: var(--text); }
.reponses-email { font-size: 12px; margin-top: 2px; }
.reponses-dispos { min-width: 120px; font-size: var(--fs-sm); }
.reponses-vol { font-family: var(--font-mono); font-size: 12px; color: var(--text); }
.reponses-ecart { color: var(--warning); font-weight: var(--fw-semibold); }
.reponses-empty {
padding: var(--sp-8);
text-align: center;
background: var(--surface-alt);
border-radius: var(--radius);
}
.reponses-loading {
padding: var(--sp-8);
text-align: center;
color: var(--text-muted);
}
@media (max-width: 640px) {
.reponses-toolbar { gap: var(--sp-2); }
.reponses-toolbar__search { min-width: 140px; }
.reponses-summary { grid-template-columns: 1fr 1fr; }
}
/* Bulle d'info cliquable : petit "i" qui révèle une aide contextuelle sous le label.
Utilise natif — accessible, keyboard-friendly, pas de JS. */
.info-bubble {
display: inline-block;
vertical-align: middle;
margin-left: 6px;
position: relative;
}
.info-bubble__trigger {
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--brand-tint);
color: var(--brand-strong);
font-family: Georgia, serif;
font-style: italic;
font-size: 12px;
font-weight: var(--fw-bold);
line-height: 1;
list-style: none;
border: 1px solid transparent;
transition: background var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
user-select: none;
}
.info-bubble__trigger::-webkit-details-marker { display: none; }
.info-bubble__trigger::marker { content: ""; }
.info-bubble__trigger:hover { background: var(--brand); color: #fff; }
.info-bubble[open] > .info-bubble__trigger {
background: var(--brand);
color: #fff;
}
.info-bubble__content {
position: absolute;
top: calc(100% + 8px);
left: -8px;
z-index: 40;
min-width: 240px;
max-width: 320px;
padding: 10px 14px;
background: var(--text);
color: var(--surface);
border-radius: var(--radius-sm);
font-size: 12px;
line-height: 1.5;
font-weight: var(--fw-regular);
font-style: normal;
box-shadow: 0 6px 16px rgba(0,0,0,0.18);
white-space: normal;
text-transform: none;
letter-spacing: normal;
}
.info-bubble__content::before {
content: "";
position: absolute;
top: -5px;
left: 12px;
width: 10px;
height: 10px;
background: var(--text);
transform: rotate(45deg);
}
@media (max-width: 640px) {
.info-bubble__content {
position: fixed;
left: 16px;
right: 16px;
top: auto;
max-width: none;
min-width: 0;
box-shadow: 0 -4px 16px rgba(0,0,0,0.24);
}
.info-bubble__content::before { display: none; }
}
/* Wizard 3 étapes : stepper + navigation + panneau contextuel */
.wizard-stepper {
background: var(--surface);
border-bottom: 1px solid var(--border);
padding: var(--sp-5) 0;
margin-bottom: var(--sp-6);
}
.wizard-stepper__inner {
max-width: none;
margin: 0;
padding: 0 5%;
display: flex;
align-items: stretch;
gap: var(--sp-3);
}
.wizard-stepper__connector {
flex: 1;
height: 2px;
background: var(--border);
align-self: center;
border-radius: 2px;
}
.wizard-step {
display: flex;
align-items: center;
gap: var(--sp-3);
padding: var(--sp-2) var(--sp-3);
background: transparent;
border: none;
cursor: pointer;
font-family: inherit;
text-align: left;
border-radius: var(--radius-sm);
transition: background var(--duration-fast) var(--ease);
min-width: 0;
}
.wizard-step:hover { background: var(--surface-alt); }
.wizard-step__badge {
flex: 0 0 auto;
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--surface-alt);
color: var(--text-muted);
display: flex;
align-items: center;
justify-content: center;
font-weight: var(--fw-bold);
font-size: var(--fs-sm);
border: 2px solid var(--border);
transition: background var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease);
}
.wizard-step__body {
display: flex;
flex-direction: column;
min-width: 0;
}
.wizard-step__label {
font-weight: var(--fw-semibold);
font-size: var(--fs-sm);
color: var(--text);
line-height: 1.2;
}
.wizard-step__hint {
font-size: 11px;
color: var(--text-subtle);
line-height: 1.2;
margin-top: 2px;
}
.wizard-step.is-active .wizard-step__badge {
background: var(--brand);
color: #fff;
border-color: var(--brand);
box-shadow: 0 0 0 4px var(--brand-tint);
}
.wizard-step.is-active .wizard-step__label { color: var(--brand-strong); }
.wizard-step.is-done .wizard-step__badge {
background: var(--success);
color: transparent;
font-size: 0;
border-color: var(--success);
position: relative;
}
.wizard-step.is-done .wizard-step__badge::before {
content: "✓";
color: #fff;
font-size: 16px;
font-weight: var(--fw-bold);
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
}
.wizard-step.is-done + .wizard-stepper__connector { background: var(--success); }
@media (max-width: 720px) {
.wizard-stepper { padding: var(--sp-4) 0; margin-bottom: var(--sp-5); }
.wizard-stepper__inner { gap: var(--sp-2); padding: 0 var(--sp-4); }
.wizard-step__hint { display: none; }
.wizard-step { padding: var(--sp-1) var(--sp-2); }
.wizard-step__label { font-size: 12px; }
.wizard-stepper__connector { min-width: 12px; }
}
@media (max-width: 480px) {
.wizard-step__label { display: none; }
.wizard-step__badge { width: 28px; height: 28px; font-size: 13px; }
}
/* Panneau contextuel : "Étape X sur 3" + description + durée estimée */
.wizard-context {
display: flex;
flex-direction: column;
gap: var(--sp-2);
padding: var(--sp-4) var(--sp-5);
background: var(--brand-tint);
border-left: 4px solid var(--brand);
border-radius: var(--radius-sm);
margin: 0 0 var(--sp-6);
}
.wizard-context__meta {
display: flex;
align-items: center;
gap: var(--sp-3);
flex-wrap: wrap;
}
.wizard-context__step {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--brand-strong);
font-weight: var(--fw-bold);
padding: 3px 10px;
background: var(--surface);
border-radius: var(--radius-pill);
}
.wizard-context__duree {
font-size: 11px;
color: var(--text-muted);
font-style: italic;
}
.wizard-context__desc {
color: var(--text);
font-size: var(--fs-sm);
line-height: 1.5;
margin: 0;
}
/* Navigation en bas de chaque étape */
.wizard-nav {
display: flex;
align-items: center;
gap: var(--sp-3);
margin-top: var(--sp-6);
padding-top: var(--sp-5);
border-top: 1px solid var(--border);
}
.wizard-nav__spacer { flex: 1; }
.wizard-nav__prev,
.wizard-nav__next {
padding: 10px 20px;
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
border-radius: var(--radius-pill);
}
.wizard-nav__next {
background: var(--brand);
color: #fff;
border: 1px solid var(--brand);
}
.wizard-nav__next:hover { background: var(--brand-strong); border-color: var(--brand-strong); }
@media (max-width: 560px) {
.wizard-nav { flex-direction: column; align-items: stretch; }
.wizard-nav__spacer { display: none; }
.wizard-nav__prev, .wizard-nav__next { width: 100%; }
}
/* Planning cellule : polish légère (les backgrounds sont inline, on ne touche pas) */
.planning-grid-wrapper { padding: var(--sp-3) 0; }
.planning-col-header {
padding: 6px 8px;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-muted);
text-align: center;
font-weight: var(--fw-semibold);
}
.planning-row-label,
.planning__row-label {
padding: 4px 0;
}
.planning-badge {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 3px 10px;
color: #fff;
border-radius: var(--radius-pill);
font-size: 11px;
font-weight: var(--fw-bold);
letter-spacing: 0.04em;
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.planning-counter {
font-size: 10px;
color: var(--text-muted);
font-weight: var(--fw-medium);
}
.planning-done-msg {
margin-top: var(--sp-3);
padding: 10px 14px;
background: var(--success-tint);
color: var(--success);
border-radius: var(--radius-sm);
border-left: 3px solid var(--success);
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
}