@charset "UTF-8"; /* ══════════════════════════════════════════════════════════════════════════ MSP — Feuille de style unique de la plateforme « Gestion globale MSP » Lycée Professionnel du Vexin — Métiers de la sécurité ───────────────────────────────────────────────────────────────────────── Deux thèmes cohabitent, sélectionnés par une classe sur : .theme-prof → espace professeur (bleu #0b57d0, cartes arrondies) .theme-eleve → espace élève / simulateurs (bleu marine #002654) La charte graphique d'origine est conservée à l'identique ; seule la mécanique CSS est modernisée (jetons, grilles, accessibilité). ══════════════════════════════════════════════════════════════════════════ */ /* ═══ 1. JETONS DE CONCEPTION ═══════════════════════════════════════════ */ :root { /* Palette institutionnelle */ --msp-marine: #002654; /* bleu France — titres élève, overlays */ --msp-marine-dark: #001534; --msp-bleu: #0b57d0; /* bleu action — espace professeur */ --msp-bleu-dark: #0842a0; --msp-or: #b8860b; /* doré — navigation et outils élève */ --msp-or-dark: #8f6a08; --msp-bordeaux: #7f1d1d; --msp-bordeaux-dark: #5f1515; /* États */ --msp-danger: #dc2626; --msp-danger-dark: #b91c1c; --msp-danger-bg: #fef2f2; --msp-danger-border: #fecaca; --msp-success: #059669; --msp-success-strong: #15803d; --msp-success-bg: #f0fdf4; --msp-success-border: #bbf7d0; --msp-warning: #d97706; --msp-warning-bg: #fffbeb; --msp-warning-border: #fde68a; --msp-info-bg: #eff6ff; --msp-info-border: #bfdbfe; --msp-info-text: #1d4ed8; /* Typographie */ --msp-font: Aptos, "Segoe UI", system-ui, -apple-system, Arial, sans-serif; --msp-font-mono: ui-monospace, "Cascadia Mono", "Courier New", monospace; /* Rythme */ --msp-space-1: 0.25rem; --msp-space-2: 0.5rem; --msp-space-3: 0.75rem; --msp-space-4: 1rem; --msp-space-5: 1.5rem; --msp-space-6: 2rem; --msp-space-7: 2.5rem; /* Transitions et focus */ --msp-transition: 0.2s ease; --msp-focus-ring: 0 0 0 3px rgb(11 87 208 / 0.35); } /* ── Thème professeur ── */ .theme-prof { --bg: #f4f6f9; --card: #ffffff; --border: #d9e2ec; --text: #1f2937; --muted: #6b7280; --primary: var(--msp-bleu); --primary-dark: var(--msp-bleu-dark); --radius: 18px; --radius-sm: 12px; --radius-xs: 10px; --shadow: 0 10px 25px rgb(15 23 42 / 0.08); --shadow-lg: 0 18px 40px rgb(15 23 42 / 0.14); --focus-ring: var(--msp-focus-ring); } /* Variante « tableaux » (pages consulter / modifier / visualiser) */ .theme-prof.theme-wide { --bg: #f6f8fb; --border: #d9e1ec; --radius: 16px; --shadow: 0 8px 24px rgb(15 23 42 / 0.08); } /* ── Thème élève ── */ .theme-eleve { --bg: #e9ecef; --card: #ffffff; --border: #ced4da; --border-soft: #dee2e6; --surface: #f8f9fa; --text: #212529; --muted: #495057; --primary: var(--msp-marine); --primary-dark: var(--msp-marine-dark); --radius: 8px; --radius-sm: 5px; --radius-xs: 4px; --shadow: 0 4px 10px rgb(0 0 0 / 0.15); --shadow-lg: 0 10px 30px rgb(0 0 0 / 0.2); --focus-ring: 0 0 0 3px rgb(0 38 84 / 0.3); } /* ═══ 2. RÉINITIALISATION ET SOCLE ══════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } :where(h1, h2, h3, h4, p, figure, blockquote, dl, dd, ol, ul) { margin: 0; } :where(ol, ul)[class] { padding-inline-start: 0; list-style: none; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-block-size: 100vh; font-family: var(--msp-font); font-size: 12pt; line-height: 1.55; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; } img { max-inline-size: 100%; block-size: auto; } :where(input, select, textarea, button) { font: inherit; color: inherit; } table { border-collapse: collapse; } /* Accessibilité : anneau de focus visible et homogène */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); border-radius: var(--radius-xs); } /* Lien d'évitement */ .msp-skip { position: absolute; inset-inline-start: var(--msp-space-4); inset-block-start: -100px; z-index: 10000; padding: var(--msp-space-3) var(--msp-space-4); background: var(--msp-marine); color: #fff; font-weight: 700; border-radius: var(--radius-xs); text-decoration: none; transition: inset-block-start var(--msp-transition); } .msp-skip:focus { inset-block-start: var(--msp-space-4); } .msp-visually-hidden { position: absolute !important; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .hidden { display: none !important; } /* L'attribut `hidden` doit l'emporter sur toute règle de mise en page : sans cela, un sélecteur de classe (ex. .msp-tool { display:flex }) prime sur la feuille de style du navigateur et l'élément reste visible. */ [hidden] { display: none !important; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ═══ 3. GABARITS ═══════════════════════════════════════════════════════ */ .msp-page { inline-size: 100%; max-inline-size: 1100px; margin-inline: auto; padding-block: var(--msp-space-6) var(--msp-space-7); padding-inline: var(--msp-space-4); } .msp-page--wide { max-inline-size: 1200px; } .msp-page--table { max-inline-size: 1700px; } .msp-page--xtable { max-inline-size: 1800px; } .msp-page--narrow { max-inline-size: 900px; } .msp-page--form { max-inline-size: 580px; } .msp-page--auth { max-inline-size: 500px; } .msp-page--centered { min-block-size: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; } .msp-logo { text-align: center; margin-block-end: var(--msp-space-5); } .msp-logo img { inline-size: 300px; border-radius: var(--radius); } .msp-logo--sm img { inline-size: 260px; } .msp-footer-note { margin-block-start: var(--msp-space-6); text-align: center; color: var(--muted); font-size: 0.9rem; line-height: 1.6; } .theme-eleve .msp-footer-note { color: var(--muted); } /* ═══ 4. BARRE DE NAVIGATION (espace professeur) ════════════════════════ */ .msp-navbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--msp-space-3); margin-block-end: var(--msp-space-5); } .msp-back { display: inline-block; padding: var(--msp-space-3) var(--msp-space-4); border-radius: var(--radius-sm); background: var(--msp-or); color: #fff; font-size: 0.875rem; font-weight: 700; text-decoration: none; transition: background var(--msp-transition); } .msp-back:hover { background: var(--msp-or-dark); } .msp-session { display: inline-flex; align-items: center; gap: var(--msp-space-3); padding: var(--msp-space-3) var(--msp-space-4); border-radius: var(--radius-sm); background: var(--msp-bleu); color: #fff; font-size: 0.875rem; font-weight: 700; white-space: nowrap; } .msp-session__logout { padding: 2px 10px; border: none; border-radius: 6px; background: rgb(255 255 255 / 0.2); color: #fff; font-size: 0.75rem; font-weight: 700; cursor: pointer; transition: background var(--msp-transition); } .msp-session__logout:hover { background: rgb(255 255 255 / 0.35); } /* ═══ 5. EN-TÊTES ═══════════════════════════════════════════════════════ */ .msp-header { text-align: center; margin-block-end: var(--msp-space-6); } .msp-header h1 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2rem); font-weight: 700; line-height: 1.2; } .msp-header p { margin-block-start: var(--msp-space-3); color: var(--muted); font-size: 1rem; } .msp-header--card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--msp-space-5); } .msp-header--card h1 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.75rem); } .msp-header--card p { font-size: 0.875rem; } .msp-header__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--msp-space-4); } .msp-section-title { margin-block: var(--msp-space-6) var(--msp-space-5); text-align: center; font-size: 1.5rem; font-weight: 700; } /* ═══ 6. CARTES ═════════════════════════════════════════════════════════ */ .msp-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--msp-space-5); } .msp-card--pad { padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); } .msp-card__title { font-size: 1.05rem; font-weight: 700; padding-block-end: var(--msp-space-3); margin-block-end: var(--msp-space-5); border-block-end: 1px solid var(--border); } /* Grille de cartes de l'accueil professeur */ .msp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: var(--msp-space-5); } .msp-tool { display: flex; flex-direction: column; gap: var(--msp-space-3); background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--msp-space-6) var(--msp-space-5); transition: box-shadow var(--msp-transition), transform var(--msp-transition); } .msp-tool:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); } .msp-tool h2 { font-size: 1.2rem; line-height: 1.3; } .msp-tool p { flex: 1 1 auto; color: var(--muted); font-size: 0.95rem; } .msp-tool__actions { display: flex; flex-direction: column; gap: var(--msp-space-3); } /* ═══ 7. BOUTONS ════════════════════════════════════════════════════════ */ .msp-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--msp-space-2); padding: var(--msp-space-3) var(--msp-space-5); border: 1px solid transparent; border-radius: var(--radius-sm); font-size: 0.95rem; font-weight: 700; text-align: center; text-decoration: none; cursor: pointer; transition: background var(--msp-transition), transform 0.1s ease; background: var(--primary); color: #fff; } .msp-btn:hover { background: var(--primary-dark); } .msp-btn:active { transform: scale(0.985); } .msp-btn[disabled], .msp-btn:disabled { background: #9ca3af; color: #fff; cursor: not-allowed; transform: none; } .msp-btn--block { display: flex; inline-size: 100%; } .msp-btn--sm { padding: var(--msp-space-2) var(--msp-space-4); font-size: 0.85rem; } .msp-btn--gold { background: var(--msp-or); } .msp-btn--gold:hover{ background: var(--msp-or-dark); } .msp-btn--share { background: var(--msp-bordeaux); } .msp-btn--share:hover { background: var(--msp-bordeaux-dark); } .msp-btn--danger { background: var(--msp-danger); } .msp-btn--danger:hover { background: var(--msp-danger-dark); } .msp-btn--success { background: var(--msp-success-strong); } .msp-btn--success:hover { background: #166534; } .msp-btn--violet { background: #7c3aed; } .msp-btn--violet:hover { background: #6d28d9; } .msp-btn--neutral { background: #e5e7eb; color: var(--text); } .msp-btn--neutral:hover { background: #d1d5db; } .msp-btn--ghost { background: var(--card); color: var(--text); border-color: var(--border); } .msp-btn--ghost:hover { background: var(--bg); } .msp-btn--ghost-danger { background: var(--card); color: var(--msp-danger-dark); border-color: #f5c2c7; } .msp-btn--ghost-danger:hover { background: var(--msp-danger-bg); } .msp-link-btn { background: none; border: none; padding: 0; color: var(--primary); font-size: 0.9rem; text-decoration: underline; cursor: pointer; } .msp-link-btn:hover { color: var(--primary-dark); } /* ═══ 8. FORMULAIRES ════════════════════════════════════════════════════ */ .msp-field { margin-block-end: var(--msp-space-4); } .msp-field:last-child { margin-block-end: 0; } .msp-label { display: block; margin-block-end: var(--msp-space-2); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); } .theme-eleve .msp-label { font-size: 0.9rem; letter-spacing: 0; text-transform: none; color: var(--muted); } .msp-input, .msp-select, .msp-textarea { inline-size: 100%; padding: var(--msp-space-3) var(--msp-space-4); border: 1.5px solid var(--border); border-radius: var(--radius-xs); background: #f8fafc; color: var(--text); transition: border-color var(--msp-transition), background var(--msp-transition); } .msp-input:focus, .msp-select:focus, .msp-textarea:focus { border-color: var(--primary); background: #fff; outline: none; } .msp-input[readonly] { background: #f1f5f9; color: #64748b; } .msp-input:disabled, .msp-select:disabled { background: #e9ecef; color: #6c757d; cursor: not-allowed; } .msp-textarea { min-block-size: 96px; resize: vertical; } .theme-eleve .msp-input, .theme-eleve .msp-select, .theme-eleve .msp-textarea { border-width: 1px; background: #fff; padding: var(--msp-space-2) var(--msp-space-3); } /* Champ mot de passe avec bouton « afficher » */ .msp-password { position: relative; display: block; } .msp-password > .msp-input { padding-inline-end: 3rem; } .msp-password__toggle { position: absolute; inset-inline-end: var(--msp-space-2); inset-block-start: 50%; translate: 0 -50%; display: inline-flex; align-items: center; justify-content: center; inline-size: 2.25rem; block-size: 2.25rem; padding: 0; border: none; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; transition: background var(--msp-transition), color var(--msp-transition); } .msp-password__toggle:hover { background: rgb(15 23 42 / 0.06); color: var(--text); } .msp-password__toggle svg { inline-size: 20px; block-size: 20px; display: block; } .msp-password__toggle .msp-eye-off { display: none; } .msp-password__toggle[aria-pressed="true"] .msp-eye-on { display: none; } .msp-password__toggle[aria-pressed="true"] .msp-eye-off { display: block; } /* Neutralise l'œil natif d'Edge/IE pour éviter le doublon */ .msp-password > .msp-input::-ms-reveal, .msp-password > .msp-input::-ms-clear { display: none; } /* Grilles de formulaire */ .msp-grid { display: grid; gap: var(--msp-space-4); } .msp-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); } .msp-grid--full { grid-column: 1 / -1; } /* Jauge de robustesse du mot de passe */ .msp-strength { margin-block-start: var(--msp-space-2); } .msp-strength__bar { block-size: 5px; border-radius: 3px; background: var(--border); overflow: hidden; } .msp-strength__fill { block-size: 100%; inline-size: 0; border-radius: 3px; background: var(--msp-danger); transition: inline-size 0.3s ease, background 0.3s ease; } .msp-strength__text { margin-block-start: var(--msp-space-1); font-size: 0.78rem; font-weight: 600; color: var(--muted); } .msp-req { margin-block-start: var(--msp-space-2); font-size: 0.8rem; line-height: 1.9; color: var(--muted); } .msp-req__ok { color: var(--msp-success); } .msp-req__ko { color: var(--msp-danger); } /* ═══ 9. MESSAGES ═══════════════════════════════════════════════════════ */ .msp-msg { padding: var(--msp-space-3) var(--msp-space-4); border: 1px solid transparent; border-radius: var(--radius-xs); font-size: 0.9rem; line-height: 1.55; } .msp-msg--error { background: var(--msp-danger-bg); border-color: var(--msp-danger-border); color: var(--msp-danger-dark); } .msp-msg--success { background: var(--msp-success-bg); border-color: var(--msp-success-border); color: var(--msp-success); } .msp-msg--warning { background: var(--msp-warning-bg); border-color: var(--msp-warning-border); color: var(--msp-warning); } .msp-msg--info { background: var(--msp-info-bg); border-color: var(--msp-info-border); color: var(--msp-info-text); } .msp-msg[hidden] { display: none !important; } .msp-alert { display: flex; align-items: center; gap: var(--msp-space-3); padding: var(--msp-space-3) var(--msp-space-5); border: 2px solid var(--msp-danger-border); border-radius: var(--radius-sm); background: var(--msp-danger-bg); color: #991b1b; font-size: 0.9rem; font-weight: 600; } .msp-notice { padding: var(--msp-space-4); border: 1px solid var(--msp-warning-border); border-radius: var(--radius-xs); background: var(--msp-warning-bg); color: var(--msp-warning); font-size: 0.85rem; line-height: 1.8; } .msp-notice strong { display: block; margin-block-end: var(--msp-space-1); } .msp-warning-line { font-size: 0.9rem; font-weight: 700; color: var(--msp-danger); } /* Bandeau RGPD / données fictives (espace élève) */ .msp-rgpd { margin-block-end: var(--msp-space-5); text-align: center; font-size: 0.83rem; font-style: italic; font-weight: 700; color: #dc3545; } /* ═══ 10. CHARGEURS ═════════════════════════════════════════════════════ */ .msp-spinner { display: inline-block; inline-size: 14px; block-size: 14px; border: 2px solid rgb(255 255 255 / 0.4); border-block-start-color: #fff; border-radius: 50%; animation: msp-spin 0.7s linear infinite; vertical-align: middle; } .msp-spinner--lg { inline-size: 28px; block-size: 28px; border-width: 3px; border-color: #e5e7eb; border-block-start-color: var(--primary); } @keyframes msp-spin { to { rotate: 360deg; } } .msp-state { padding: var(--msp-space-6) var(--msp-space-5); text-align: center; color: var(--muted); } .msp-state--loading { color: var(--primary); } .msp-state--error { color: var(--msp-danger-dark); font-weight: 600; } /* ═══ 11. TABLEAUX ══════════════════════════════════════════════════════ */ .msp-table-wrap { inline-size: 100%; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); -webkit-overflow-scrolling: touch; } .msp-table { inline-size: 100%; font-size: 0.86rem; } .msp-table thead th { padding: var(--msp-space-3) var(--msp-space-4); background: var(--msp-info-bg); color: #1e3a8a; text-align: start; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; border-block-end: 1px solid var(--border); position: sticky; inset-block-start: 0; z-index: 1; } .msp-table tbody td { padding: var(--msp-space-3) var(--msp-space-4); border-block-end: 1px solid #e5e7eb; vertical-align: top; } .msp-table tbody tr:nth-child(even) { background: #fafcff; } .msp-table tbody tr:hover td { background: #f1f6fe; } .msp-table--pre tbody td { white-space: pre-wrap; } .msp-table__count { margin-block-start: var(--msp-space-2); font-size: 0.78rem; color: #9ca3af; } /* En-tête de colonne cliquable : bouton rendu visuellement identique au texte de l'en-tête, pour rester accessible au clavier sans alourdir la présentation du tableau. */ .msp-sort { inline-size: 100%; padding: 0; background: none; border: 0; font: inherit; color: inherit; text-align: start; cursor: pointer; } .msp-sort:hover { color: var(--primary); } .msp-sort:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 3px; } .msp-table th:has(.msp-sort) { padding-block: var(--msp-space-2); } /* Colonne d'action (bouton rond révélé au survol) */ .msp-table th.msp-cell-action, .msp-table td.msp-cell-action { inline-size: 38px; min-inline-size: 38px; padding: var(--msp-space-1) var(--msp-space-1); text-align: center; } .msp-row-btn { inline-size: 28px; block-size: 28px; padding: 0; border: none; border-radius: 50%; color: #fff; font-size: 0.75rem; font-weight: 700; line-height: 1; cursor: pointer; opacity: 0; transition: opacity 0.15s ease, background var(--msp-transition); display: inline-flex; align-items: center; justify-content: center; } .msp-row-btn--edit { background: #7c3aed; } .msp-row-btn--edit:hover { background: #6d28d9; } .msp-row-btn--valid { background: #16a34a; } .msp-row-btn--valid:hover { background: #15803d; } .msp-row-btn--copy { background: #ea580c; } .msp-row-btn--copy:hover { background: #c2410c; } tr:hover .msp-row-btn, .msp-row-btn:focus-visible { opacity: 1; } @media (hover: none) { .msp-row-btn { opacity: 0.55; } } tr.msp-editing td { background: #fefce8 !important; } .msp-cell-input { inline-size: 100%; min-inline-size: 60px; padding: 3px 6px; border: 1px solid #7c3aed; border-radius: 6px; background: #fff; font-size: 0.82rem; } /* Tri des colonnes */ .msp-table th[data-sort] { cursor: pointer; user-select: none; } .msp-table th[data-sort]:hover { color: var(--primary); } .msp-table th[aria-sort="ascending"]::after { content: " ▲"; } .msp-table th[aria-sort="descending"]::after { content: " ▼"; } /* ═══ 12. STATISTIQUES / PASTILLES ══════════════════════════════════════ */ .msp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: var(--msp-space-4); } .msp-stat { display: flex; flex-direction: column; gap: var(--msp-space-1); padding: var(--msp-space-4) var(--msp-space-5); background: var(--card); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); } .msp-stat__label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); } .msp-stat__value { font-size: 1.8rem; font-weight: 700; color: var(--primary); } .msp-stat__value--sm { font-size: 1rem; margin-block-start: var(--msp-space-1); } .msp-stat__sub { font-size: 0.8rem; color: var(--muted); } .msp-badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 0.78rem; font-weight: 700; white-space: nowrap; } .msp-badge--cr { background: #dbeafe; color: #1d4ed8; } .msp-badge--pve { background: #fef3c7; color: #92400e; } .msp-badge--police { background: #f3e8ff; color: #7c3aed; } .msp-badge--auth { background: #dcfce7; color: #166534; } .msp-badge--autre { background: #f1f5f9; color: var(--muted); } .msp-badge--count { background: var(--bg); border: 1px solid var(--border); color: var(--muted); padding: 4px 14px; font-size: 0.85rem; } .msp-pill { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 0.78rem; font-weight: 700; } .msp-pill--CREATE { background: #dcfce7; color: #166534; } .msp-pill--UPDATE { background: #fef3c7; color: #92400e; } .msp-pill--DELETE { background: #fee2e2; color: #991b1b; } .msp-pill--LOGIN { background: #dbeafe; color: #1d4ed8; } .msp-pill--READ { background: #f1f5f9; color: var(--muted); } .msp-chip { display: inline-flex; align-items: center; gap: var(--msp-space-2); padding: 3px 10px; border: 1px solid #bae6fd; border-radius: 20px; background: #f0f9ff; color: #0369a1; font-size: 0.85rem; font-weight: 600; } .msp-chip__avatar { inline-size: 22px; block-size: 22px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 0.65rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } /* ═══ 13. PAGINATION ════════════════════════════════════════════════════ */ .msp-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--msp-space-2); padding: var(--msp-space-4) var(--msp-space-5); border-block-start: 1px solid var(--border); } .msp-page-btn { padding: var(--msp-space-2) var(--msp-space-4); border: 1px solid var(--border); border-radius: 8px; background: var(--card); font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: all 0.15s ease; } .msp-page-btn:hover:not(:disabled) { background: var(--bg); border-color: var(--primary); color: var(--primary); } .msp-page-btn[aria-current="page"] { background: var(--primary); border-color: var(--primary); color: #fff; } .msp-page-btn:disabled { opacity: 0.4; cursor: default; } /* ═══ 14. BARRE D'OUTILS / FILTRES ══════════════════════════════════════ */ .msp-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--msp-space-3); padding: var(--msp-space-5); background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); } /* Zone de recherche occupant l'espace restant de la barre d'outils */ .msp-toolbar__search { flex: 1 1 280px; min-inline-size: 220px; } .msp-toolbar__search .msp-input { inline-size: 100%; } .msp-filter { display: flex; flex-direction: column; gap: var(--msp-space-1); flex: 1 1 160px; min-inline-size: 160px; } .msp-filter label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); } .msp-filter :is(input, select) { padding: var(--msp-space-2) var(--msp-space-3); border: 1px solid var(--border); border-radius: var(--radius-xs); background: var(--bg); color: var(--text); font-size: 0.95rem; } .msp-filter :is(input, select):focus { border-color: var(--primary); outline: none; } /* ═══ 15. SECTIONS DÉPLIABLES ═══════════════════════════════════════════ */ .msp-block { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; } .msp-block__header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--msp-space-3); padding: var(--msp-space-4) var(--msp-space-5); border-block-end: 1px solid var(--border); } .msp-block__header h2 { font-size: 1.25rem; color: #1e3a8a; } .msp-block__header p { margin-block-start: var(--msp-space-1); font-size: 0.83rem; color: var(--muted); } .msp-block__body { padding: var(--msp-space-4); } .msp-block__body[hidden] { display: none !important; } .msp-stack { display: flex; flex-direction: column; gap: var(--msp-space-5); } .msp-row-actions { display: flex; flex-wrap: wrap; gap: var(--msp-space-3); } .msp-center { display: flex; justify-content: center; } /* ═══ 16. MODALES ═══════════════════════════════════════════════════════ */ .msp-overlay { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: var(--msp-space-5); background: rgb(0 0 0 / 0.45); } .msp-overlay[hidden] { display: none !important; } .msp-overlay--auth { z-index: 9000; background: rgb(0 26 77 / 0.92); } .msp-modal { inline-size: 100%; max-inline-size: 420px; max-block-size: calc(100vh - 2 * var(--msp-space-5)); overflow-y: auto; padding: var(--msp-space-6); border-radius: 12px; background: #fff; box-shadow: 0 8px 40px rgb(0 0 0 / 0.4); text-align: center; } .msp-modal--sm { max-inline-size: 360px; padding: var(--msp-space-6) var(--msp-space-7); } .msp-modal--lg { max-inline-size: 760px; text-align: start; box-shadow: var(--shadow-lg); } .msp-modal h2 { color: var(--msp-marine); font-size: 1.25rem; } .msp-modal__sub { margin-block: var(--msp-space-1) var(--msp-space-4); font-size: 0.83rem; color: #555; } .msp-modal__logo { inline-size: 180px; margin-block-end: var(--msp-space-4); border-radius: 8px; } .msp-modal__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--msp-space-3); margin-block-start: var(--msp-space-5); } /* Formulaire de connexion embarqué dans l'overlay */ .msp-auth-form { text-align: start; } .msp-auth-form .msp-label { font-size: 0.75rem; color: #333; } .msp-auth-form .msp-input { background: #fff; border: 1px solid #ccc; border-radius: 6px; } .msp-auth-form .msp-btn { background: var(--msp-marine); } .msp-auth-form .msp-btn:hover { background: var(--msp-marine-dark); } .msp-auth-contact { padding: var(--msp-space-2); margin-block-end: var(--msp-space-5); border-radius: 6px; background: var(--msp-danger-bg); color: var(--msp-danger-dark); font-size: 0.75rem; font-weight: 700; } /* ═══ 17. NOTIFICATION ÉPHÉMÈRE ═════════════════════════════════════════ */ .msp-toast { position: fixed; inset-block-end: var(--msp-space-6); inset-inline-start: 50%; translate: -50% 0; z-index: 3000; padding: var(--msp-space-3) var(--msp-space-5); border-radius: var(--radius-sm); background: #1e3a8a; color: #fff; font-size: 0.9rem; font-weight: 600; box-shadow: 0 4px 12px rgb(0 0 0 / 0.2); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .msp-toast.is-visible { opacity: 1; } /* ═══ 18. FICHIERS DE POLICE — SAISIE (modifier) ════════════════════════ */ .msp-file-row { display: flex; align-items: stretch; gap: var(--msp-space-5); } .msp-file-card { flex: 0 0 290px; display: flex; flex-direction: column; gap: var(--msp-space-3); padding: var(--msp-space-5); background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); } .msp-file-card h2 { font-size: 1.2rem; } .msp-file-card p { color: var(--muted); font-size: 0.9rem; flex: 1 1 auto; } .msp-panel-holder { flex: 1 1 auto; min-inline-size: 0; } .msp-panel { padding: var(--msp-space-4); background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); } .msp-panel[hidden] { display: none !important; } .msp-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: var(--msp-space-4); } .msp-fieldbox { padding: var(--msp-space-3); border: 2px solid #ef4444; border-radius: 14px; background: #fff5f5; } .msp-fieldbox.is-valid { border-color: #22c55e; background: var(--msp-success-bg); } .msp-fieldbox.is-auto { border-color: #94a3b8; background: #f8fafc; } .msp-fieldbox__head { display: flex; align-items: center; justify-content: space-between; gap: var(--msp-space-2); margin-block-end: var(--msp-space-2); } .msp-fieldbox__label { font-size: 0.95rem; font-weight: 700; } .msp-tag { padding: 2px 8px; border-radius: 10px; background: #fee2e2; color: var(--msp-danger-dark); font-size: 0.7rem; font-weight: 700; } .msp-tag.is-ok { background: #dcfce7; color: var(--msp-success-strong); } .msp-tag.is-auto { background: #e2e8f0; color: #475569; } .msp-fieldbox :is(input, select) { inline-size: 100%; padding: var(--msp-space-2) var(--msp-space-3); border: 1px solid #cbd5e1; border-radius: var(--radius-xs); font-size: 0.85rem; background: #fff; } .msp-fieldbox input[readonly] { background: #f1f5f9; color: #64748b; } @media (max-width: 900px) { .msp-file-row { flex-direction: column; } .msp-file-card { flex-basis: auto; } } /* ═══ 19. ESPACE ÉLÈVE ══════════════════════════════════════════════════ */ .theme-eleve body, body.theme-eleve { padding: var(--msp-space-5); } .eleve-shell { max-inline-size: 900px; margin-inline: auto; } .eleve-menu { position: relative; margin-block-end: var(--msp-space-4); display: inline-block; } .eleve-menu__btn { padding: var(--msp-space-3) var(--msp-space-4); border: none; border-radius: var(--radius-xs); background: var(--msp-or); color: #fff; font-weight: 700; cursor: pointer; transition: background var(--msp-transition); } .eleve-menu__btn:hover { background: var(--msp-or-dark); } .eleve-menu__list { position: absolute; inset-block-start: calc(100% + 5px); inset-inline-start: 0; min-inline-size: 240px; z-index: 1000; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-xs); box-shadow: var(--shadow); overflow: hidden; } .eleve-menu__list[hidden] { display: none !important; } .eleve-menu__list a { display: block; padding: var(--msp-space-3) var(--msp-space-4); color: var(--text); font-weight: 700; text-decoration: none; } .eleve-menu__list a:hover { background: var(--surface); color: var(--msp-marine); } .eleve-card { padding: clamp(1.25rem, 1rem + 1.5vw, 1.875rem); background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); margin-block-end: var(--msp-space-5); } .eleve-title { margin-block: 0 var(--msp-space-5); padding-block-end: var(--msp-space-3); border-block-end: 3px solid var(--msp-marine); color: var(--msp-marine); font-size: clamp(1.1rem, 0.9rem + 1vw, 1.5rem); text-align: center; text-transform: uppercase; } .eleve-h2 { margin-block: var(--msp-space-6) var(--msp-space-4); padding-block-end: var(--msp-space-2); border-block-end: 1px solid var(--border); color: var(--msp-marine); font-size: 1.2rem; } .eleve-h2:first-child { margin-block-start: 0; } .eleve-h3 { margin-block: 0 var(--msp-space-3); color: var(--msp-marine); font-size: 1.05rem; } .eleve-section { padding: var(--msp-space-4); margin-block-end: var(--msp-space-4); background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); } .eleve-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: var(--msp-space-4); } .eleve-grid > .full-width { grid-column: 1 / -1; } .eleve-btn { padding: var(--msp-space-3) var(--msp-space-5); /* 44 px : taille minimale d'une zone tactile confortable sur téléphone */ min-block-size: 44px; border: none; border-radius: var(--radius-xs); background: var(--msp-marine); color: #fff; font-weight: 700; text-transform: uppercase; cursor: pointer; transition: background var(--msp-transition); } .eleve-btn:hover { background: var(--msp-marine-dark); } .eleve-btn:disabled { background: #6c757d; cursor: not-allowed; } .eleve-btn--secondary { background: #6c757d; } .eleve-btn--secondary:hover { background: #565e64; } .eleve-btn--add { background: #00509e; padding: var(--msp-space-2) var(--msp-space-4); font-size: 0.9rem; text-transform: none; } .eleve-btn--add:hover { background: #003366; } .eleve-btn--delete { background: #dc3545; padding: var(--msp-space-2) var(--msp-space-4); font-size: 0.9rem; text-transform: none; } .eleve-btn--delete:hover { background: #b02a37; } .eleve-btn--copy { background: #495057; text-transform: none; } .eleve-btn--copy:hover { background: #343a40; } .eleve-btn--danger { background: #dc3545; } .eleve-btn--danger:hover { background: #b02a37; } .eleve-btn--success { background: #198754; } .eleve-btn--success:hover { background: #146c43; } .eleve-btn[disabled] { opacity: 0.65; } .eleve-actions { display: flex; flex-wrap: wrap; gap: var(--msp-space-3); margin-block-start: var(--msp-space-5); } .eleve-actions--split { justify-content: space-between; } .eleve-actions--grow > .eleve-btn { flex: 1 1 180px; } .eleve-menu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: var(--msp-space-4); margin-block-end: var(--msp-space-5); } .eleve-menu-card { min-block-size: 80px; padding: var(--msp-space-4) var(--msp-space-3); border: none; border-radius: var(--radius-xs); background: var(--msp-marine); color: #fff; font-weight: 700; text-transform: uppercase; cursor: pointer; transition: background var(--msp-transition), transform var(--msp-transition); } .eleve-menu-card:hover { background: var(--msp-marine-dark); transform: translateY(-2px); } .eleve-intro { padding: var(--msp-space-4); margin-block-end: var(--msp-space-5); background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); text-align: center; } .eleve-note { margin-block-start: var(--msp-space-5); text-align: center; font-style: italic; font-weight: 700; color: #dc3545; } /* Consigne de saisie : discrète mais visible, à distinguer de .eleve-note qui sert aux avertissements réglementaires. */ .eleve-consigne { margin-block: var(--msp-space-3) 0; padding: var(--msp-space-2) var(--msp-space-3); border-inline-start: 3px solid var(--msp-or, #b8860b); background: rgba(184, 134, 11, 0.07); font-size: 0.88rem; line-height: 1.5; } .eleve-box { padding: var(--msp-space-4); margin-block-end: var(--msp-space-5); background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); line-height: 1.6; } .eleve-box--status { color: var(--msp-marine); font-weight: 700; } .eleve-box--warning { color: #b26a00; font-weight: 700; } .eleve-box--error { background: #fff5f5; border-color: #dc3545; color: #dc3545; font-weight: 700; } .eleve-result { padding: var(--msp-space-4); margin-block-start: var(--msp-space-5); background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); } .eleve-result p { margin-block: var(--msp-space-1); } .eleve-result__title { margin-block-end: var(--msp-space-3); color: var(--msp-marine); font-weight: 700; text-transform: uppercase; } .eleve-data-row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--msp-space-4); padding-block: var(--msp-space-2); border-block-end: 1px solid #e5e7eb; } .eleve-data-row:last-child { border-block-end: none; } .eleve-data-row dt { min-inline-size: 260px; font-weight: 700; color: var(--muted); } .eleve-data-row dd { flex: 1 1 auto; margin: 0; text-align: end; word-break: break-word; } .eleve-pre { margin: 0; padding: var(--msp-space-5); background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-xs); color: #000; font-family: var(--msp-font); white-space: pre-wrap; } .eleve-table { inline-size: 100%; min-inline-size: 420px; margin-block-start: var(--msp-space-3); background: #fff; } .eleve-table :is(th, td) { padding: var(--msp-space-3) var(--msp-space-4); border: 1px solid var(--border-soft); text-align: start; vertical-align: top; } .eleve-table th { background: var(--surface); color: var(--msp-marine); font-weight: 700; } .eleve-suggestions { position: absolute; inset-block-start: calc(100% + 4px); inset-inline: 0; z-index: 20; max-block-size: 240px; overflow-y: auto; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-xs); box-shadow: var(--shadow); } .eleve-suggestions[hidden] { display: none !important; } .eleve-suggestion { padding: var(--msp-space-3); border-block-end: 1px solid #e5e7eb; cursor: pointer; } .eleve-suggestion:last-child { border-block-end: none; } .eleve-suggestion:hover, .eleve-suggestion.is-active { background: var(--surface); color: var(--msp-marine); } .eleve-field { position: relative; display: flex; flex-direction: column; gap: var(--msp-space-2); } /* Validation visuelle des champs obligatoires (Logiciel métier) */ .champ-obligatoire.champ-invalide { border: 2px solid #dc3545 !important; background: #fff5f5; } .champ-obligatoire.champ-valide { border: 2px solid #198754 !important; background: #f3fff7; } /* ═══ 20. IMPRESSION ════════════════════════════════════════════════════ */ @media print { body { background: #fff; } .msp-navbar, .msp-back, .msp-session, .msp-toolbar, .msp-pagination, .eleve-menu, .msp-btn, .eleve-btn, .msp-row-btn { display: none !important; } .msp-card, .msp-block, .eleve-card { box-shadow: none; border-color: #999; } } /* ═══ 21. ADMINISTRATION (générateur de comptes) ════════════════════════ */ .msp-mode { display: flex; flex-wrap: wrap; gap: var(--msp-space-2); } .msp-mode__btn { flex: 1 1 200px; padding: var(--msp-space-3) var(--msp-space-4); border: 1.5px solid var(--border); border-radius: var(--radius-xs); background: #f8fafc; color: var(--muted); font-size: 0.9rem; font-weight: 700; cursor: pointer; transition: all var(--msp-transition); } .msp-mode__btn:hover { border-color: var(--primary); color: var(--primary); } .msp-mode__btn.is-active { background: var(--primary); border-color: var(--primary); color: #fff; } .msp-inline { display: flex; flex-wrap: wrap; gap: var(--msp-space-2); align-items: stretch; } .msp-inline > .msp-input { flex: 1 1 200px; } .msp-inline > .msp-btn { white-space: nowrap; } .msp-result { margin-block-start: var(--msp-space-4); padding: var(--msp-space-5); border: 1px solid var(--msp-success-border); border-radius: var(--radius); background: var(--msp-success-bg); } .msp-result[hidden] { display: none !important; } .msp-result__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--msp-space-3); margin-block-end: var(--msp-space-3); } .msp-result__row:last-of-type { margin-block-end: 0; } .msp-result__row[hidden] { display: none !important; } .msp-result__label { flex: 0 0 110px; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; color: var(--muted); } .msp-result__value { flex: 1 1 180px; min-inline-size: 0; font-family: var(--msp-font-mono); font-size: 0.86rem; color: var(--msp-success); word-break: break-all; } .msp-steps { padding-inline-start: 1.25rem; list-style: decimal; color: var(--muted); font-size: 0.9rem; line-height: 1.9; } .msp-steps code { padding: 1px 7px; border-radius: 5px; background: #f1f5f9; color: var(--primary); font-family: var(--msp-font-mono); font-size: 0.85rem; }