:root{--bleu:#0b5cab;--bleu-f:#084581;--texte:#1f2937;--gris:#6b7280;--bord:#d9dee5;--fond:#f4f6f9;--carte:#fff;--vert:#15803d;--rouge:#b91c1c}
@media (prefers-color-scheme:dark){:root{--texte:#e5e7eb;--gris:#9ca3af;--bord:#374151;--fond:#111827;--carte:#1f2937;--bleu:#4a9de8;--bleu-f:#7ab8f0}}
*{box-sizing:border-box}
body{margin:0;font:15px/1.5 "Segoe UI",system-ui,sans-serif;color:var(--texte);background:var(--fond);min-height:100vh;display:flex;flex-direction:column}
a{color:var(--bleu)}
.entete{display:flex;align-items:center;gap:24px;padding:12px 24px;background:var(--carte);border-bottom:1px solid var(--bord)}
.marque{display:flex;align-items:center;gap:12px;font-weight:700;font-size:20px;text-decoration:none;color:var(--bleu)}
.logo{height:32px;width:auto;display:block}
.entete nav{display:flex;gap:16px;flex:1}
.deconnexion{display:flex;gap:12px;align-items:center;margin:0}
.contenu{flex:1;width:100%;max-width:960px;margin:0 auto;padding:24px 16px}
.pied{text-align:center;color:var(--gris);font-size:13px;padding:16px}
h1{font-size:24px;margin:0 0 16px}h2{font-size:17px;margin:0 0 12px}
.barre{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px}
.carte{background:var(--carte);border:1px solid var(--bord);border-radius:10px;padding:20px;margin-bottom:16px}
.etroite{max-width:420px;margin:48px auto}
label{display:block;font-weight:600;margin-bottom:14px}
label small,.aide{display:block;font-weight:400;color:var(--gris);font-size:13px}
input,textarea,select{display:block;width:100%;margin-top:4px;padding:9px 10px;font:inherit;color:inherit;background:var(--fond);border:1px solid var(--bord);border-radius:6px}
input:focus,textarea:focus,select:focus,.zone:focus{outline:2px solid var(--bleu);outline-offset:1px}
.ligne{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:640px){.ligne{grid-template-columns:1fr}.entete{flex-wrap:wrap}}
.bouton{display:inline-block;background:var(--bleu);color:#fff;border:0;border-radius:6px;padding:9px 18px;font:inherit;font-weight:600;text-decoration:none;cursor:pointer}
.bouton:hover{background:var(--bleu-f)}
.bouton[disabled]{opacity:.5;cursor:default}
.secondaire{background:transparent;color:var(--bleu);border:1px solid var(--bleu)}
.secondaire:hover{background:var(--fond)}
.danger{background:var(--rouge)}
.lien{background:none;border:0;color:var(--bleu);cursor:pointer;font:inherit;padding:0;text-decoration:underline;display:inline;font-weight:400}
.erreur{color:var(--rouge);background:rgba(185,28,28,.08);border:1px solid var(--rouge);border-radius:6px;padding:8px 12px}
.vide{color:var(--gris)}
.tableau{width:100%;border-collapse:collapse;background:var(--carte);border:1px solid var(--bord);border-radius:8px}
.tableau th,.tableau td{text-align:left;padding:8px 12px;border-bottom:1px solid var(--bord)}
.tableau th{font-size:13px;color:var(--gris)}
.etiquette{display:inline-block;border-radius:99px;padding:1px 10px;font-size:12px;font-weight:600}
.vert{background:rgba(21,128,61,.15);color:var(--vert)}.gris{background:rgba(107,114,128,.18);color:var(--gris)}.rouge{background:rgba(185,28,28,.15);color:var(--rouge)}
.zone{border:2px dashed var(--bord);border-radius:10px;padding:24px;text-align:center;margin-bottom:12px}
.zone.survol{border-color:var(--bleu);background:rgba(11,92,171,.07)}
.zone label{display:inline;margin:0}
.liste-fichiers{list-style:none;padding:0;margin:0 0 8px}
.liste-fichiers li{display:flex;gap:10px;align-items:center;padding:4px 0}
.liste-fichiers button{margin-left:auto}
.copie{display:flex;gap:8px}.copie input{margin:0}
.champ-mdp{display:flex;gap:8px;align-items:center}
.description{white-space:pre-wrap}
progress{width:100%;margin:8px 0}