, affichage du ). */ :root { --fond: #0D1F15; --surface: #122A1A; --surface-2: #173020; --bord: rgba(46,204,113,0.12); --bord-fort: rgba(46,204,113,0.28); --texte: #D4EDD9; --dim: #6BA083; --faible: #3D6B4F; --jaune: #2ECC71; /* accent principal — vert émeraude */ --jaune-2: #27AE60; --jaune-doux: rgba(46,204,113,0.14); --bleu: #1A7A4A; --bleu-2: #239459; --rouge: #E05050; --rouge-fond: #7A1C1C; --vert: #2ECC71; --cyan: #00BFA5; --ambre: #D4AC0D; --rayon: 14px; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* Base du body : fond, typo, hauteur. L'affichage (flex/centrage) est fixé par chaque page car il diverge (login centré, pages applicatives en colonne). */ body { background: var(--fond); background-image: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(46,204,113,0.06), transparent); color: var(--texte); font-family: 'Inter', 'Segoe UI', system-ui, sans-serif; font-size: 14px; line-height: 1.55; min-height: 100vh; } button { font-family: inherit; cursor: pointer; } :focus-visible { outline: 2px solid var(--jaune); outline-offset: 2px; border-radius: 4px; } @keyframes apparaitre { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* ── Logo & marque (login + en-têtes applicatifs) ── */ .logo-carre { width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; box-shadow: 0 0 18px rgba(46,204,113,0.25); } .brand-name { font-size: 20px; font-weight: 800; color: var(--texte); letter-spacing: -0.5px; line-height: 1; } .brand-name .eclair { color: var(--dim); } .brand-sub { font-size: 11px; color: var(--faible); letter-spacing: 0.3px; } /* ── En-tête applicatif (admin + index) ── */ header { background: rgba(7,18,11,0.88); backdrop-filter: blur(8px); padding: 12px 24px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--bord); flex-shrink: 0; } .header-logo { display: flex; align-items: center; gap: 12px; } /* ── Mise en page : le max-width du

est fixé par chaque page ── */ main { width: 100%; margin: 0 auto; padding: 24px 20px; flex: 1; } /* ── Cartes / sections : mêmes règles, deux vocabulaires de classes ── */ .carte, .section { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); margin-bottom: 20px; animation: apparaitre .3s ease-out both; } .carte-titre, .section-title { display: flex; align-items: baseline; gap: 12px; font-size: 13.5px; font-weight: 600; color: var(--texte); padding: 14px 20px; border-bottom: 1px solid var(--bord); } .carte-titre .no, .section-title .no { font-family: 'Consolas', monospace; font-size: 12px; color: var(--jaune); font-weight: 700; } .carte-corps, .section-body { padding: 20px; } /* ── Formulaires : la largeur de la colonne label est fixée par chaque page ── */ .form-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .form-row label.required::after { content: " *"; color: var(--rouge); } .form-row input, .form-row select { flex: 1; background: var(--fond); border: 1px solid var(--bord-fort); border-radius: 10px; padding: 8px 12px; color: var(--texte); font-size: 13px; font-family: inherit; min-height: 36px; outline: none; transition: border-color 0.2s, box-shadow 0.2s, opacity 0.2s; } .form-row input:focus, .form-row select:focus { border-color: var(--jaune); box-shadow: 0 0 0 3px var(--jaune-doux); } .form-row input::placeholder { color: var(--faible); } /* ── Champ mot de passe avec œil (login + admin + index) ── */ .pass-wrap { position: relative; display: flex; flex: 1; } .pass-wrap input { flex: 1; padding-right: 38px; } .btn-eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); background: transparent; border: none; color: var(--dim); font-size: 16px; padding: 4px 8px; line-height: 1; cursor: pointer; transition: color 0.2s; } .btn-eye:hover { color: var(--jaune); } /* ── Bandeau du mode démonstration (common/demo.py) ── Injecté côté serveur en tête de sur l'instance publique, absent en interne. Volontairement sobre et non refermable : il doit rester visible pendant toute la visite, un visiteur ne devant jamais croire qu'une migration réelle vient de partir. */ .bandeau-demo { padding: 10px 18px; background: var(--jaune-doux); border-bottom: 1px solid var(--jaune); color: var(--txt); font-size: 13px; line-height: 1.5; text-align: center; } .bandeau-demo b { color: var(--jaune); letter-spacing: 0.04em; margin-right: 4px; } /* ── Encart des identifiants de démonstration (common/demo.py) ── Absent hors mode démonstration. */ .encart-demo { background: var(--jaune-doux); border: 1px solid var(--jaune); border-radius: 8px; padding: 9px 12px; margin-bottom: 16px; font-size: 12.5px; line-height: 1.5; } .encart-demo b { color: var(--jaune); font-weight: 700; }