, affichage du ). */ :root { --fond: #0A1C12; --surface: #0F2418; --surface-2: #142D1E; --bord: rgba(46,204,113,0.12); --bord-fort: rgba(46,204,113,0.28); --texte: #D4EDD9; --dim: #6BA083; --faible: #3D6B4F; --orange: #2ECC71; --orange-2: #27AE60; --orange-doux: rgba(46,204,113,0.14); --vert: #2ECC71; --rouge: #E05050; --rayon: 14px; } * { box-sizing: border-box; margin: 0; } /* Base du body : l'affichage (centrage login / colonne app) est fixé par chaque page. */ body { background: var(--fond); background-image: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(46,204,113,0.05), transparent); color: var(--texte); font: 14px/1.6 "Inter", "Segoe UI", system-ui, sans-serif; min-height: 100vh; } button { cursor: pointer; font-family: inherit; } :focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 4px; } @keyframes apparaitre { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* ── Logo & marque (la taille du carré est fixée par chaque page) ── */ .logo-eclair { border-radius: 10px; display: grid; place-items: center; background: linear-gradient(135deg, #4A4A4A, #2A2A2A); box-shadow: 0 0 18px rgba(122,122,122,0.25); } .logo-eclair svg { display: block; } .marque { font-weight: 800; letter-spacing: -0.3px; } .marque em { font-style: normal; color: var(--orange); } .sous-marque { color: var(--faible); font-size: 11px; letter-spacing: 0.3px; } /* ── En-tête applicatif (admin + chat) ── */ header { display: flex; align-items: center; gap: 12px; padding: 12px 20px; background: rgba(5,15,9,0.90); border-bottom: 1px solid var(--bord); backdrop-filter: blur(8px); } .titre { color: var(--faible); font-size: 12.5px; } /* ── Mise en page : le max-width du

est fixé par chaque page ── */ main { width: 100%; margin: 0 auto; padding: 24px 20px; flex: 1; } /* ── Cartes ── */ .carte { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); margin-bottom: 20px; animation: apparaitre .25s ease-out both; } .carte-titre { display: flex; align-items: baseline; gap: 10px; font-size: 13.5px; font-weight: 600; padding: 14px 20px; border-bottom: 1px solid var(--bord); } .carte-titre .accent { color: var(--orange); } .carte-corps { 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[type="text"], .form-row input[type="password"] { flex: 1; background: var(--fond); color: var(--texte); border: 1px solid var(--bord-fort); border-radius: 10px; padding: 8px 12px; font: inherit; font-size: 13px; min-height: 36px; outline: none; transition: border-color .2s; } .form-row input:focus { border-color: var(--orange); } /* ── Champ mot de passe avec œil ── */ .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; transition: color 0.2s; } .btn-eye:hover { color: var(--orange); } /* ── 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(--orange-doux); border-bottom: 1px solid var(--orange); color: var(--txt); font-size: 13px; line-height: 1.5; text-align: center; } .bandeau-demo b { color: var(--orange); 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(--orange-doux); border: 1px solid var(--orange); border-radius: 8px; padding: 9px 12px; margin-bottom: 16px; font-size: 12.5px; line-height: 1.5; } .encart-demo b { color: var(--orange); font-weight: 700; }