/* Plan : barre latérale marine fixe, zone de travail claire, liste à gauche et fiche à droite. Accent or réservé aux actions et à l'élément sélectionné. */
:root{
  --marine:#14233b; --marine-2:#1e3354; --or:#b08a3c; --or-doux:#f3ead6;
  --fond:#f4f5f7; --surface:#ffffff; --trait:#dfe3ea; --texte:#1a2333; --texte-2:#5c6779;
  --ok:#2f7d57; --alerte:#b5651d; --critique:#b23a3a; --ok-fond:#e3f1ea; --alerte-fond:#f8ead9; --critique-fond:#f6e1e1;
  --display:"Newsreader",Georgia,serif; --corps:"IBM Plex Sans",system-ui,Segoe UI,Arial,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --marine:#0c1524; --marine-2:#172740; --or:#d1ab5c; --or-doux:#3a3220;
    --fond:#121a27; --surface:#1a2434; --trait:#2c3a50; --texte:#e7ebf2; --texte-2:#9aa6b8;
    --ok:#6fc49a; --alerte:#e0a25e; --critique:#e58484; --ok-fond:#1c3a2e; --alerte-fond:#40301c; --critique-fond:#452424;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --marine:#0c1524; --marine-2:#172740; --or:#d1ab5c; --or-doux:#3a3220;
  --fond:#121a27; --surface:#1a2434; --trait:#2c3a50; --texte:#e7ebf2; --texte-2:#9aa6b8;
  --ok:#6fc49a; --alerte:#e0a25e; --critique:#e58484; --ok-fond:#1c3a2e; --alerte-fond:#40301c; --critique-fond:#452424;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--fond);color:var(--texte);font-family:var(--corps);font-size:14px;line-height:1.45}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--or);outline-offset:2px}
.app{display:grid;grid-template-columns:220px 1fr;height:100%}
.nav{background:var(--marine);color:#e9edf4;display:flex;flex-direction:column;gap:4px;padding:18px 12px}
.marque{font-family:var(--display);font-size:20px;font-weight:600;padding:0 8px 2px;color:#fff}
.sous-marque{padding:0 8px 14px;font-size:12px;color:#aab6c9}
.nav a{display:flex;justify-content:space-between;align-items:center;padding:9px 10px;border-radius:6px;color:#d5dce8;text-decoration:none;font-weight:500}
.nav a:hover{background:var(--marine-2)}
.nav a.actif{background:var(--marine-2);color:#fff;box-shadow:inset 3px 0 0 var(--or)}
.nav a span{font-size:12px;color:#aab6c9;font-variant-numeric:tabular-nums}
.fictif{margin-top:auto;font-size:12px;background:var(--marine-2);border-left:3px solid var(--or);padding:10px;border-radius:4px;color:#d5dce8}
main{overflow:auto;padding:22px 24px 40px;min-width:0}
h1{font-family:var(--display);font-size:28px;font-weight:600;margin:0;text-wrap:balance}
h2{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--texte-2);margin:0 0 10px;font-weight:600}
.entete{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:16px}
.outils{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
input[type=search],input[type=text],input[type=date],select{background:var(--surface);border:1px solid var(--trait);border-radius:6px;padding:7px 10px;min-width:0}
input[type=search]{width:260px;max-width:100%}
.btn{background:var(--surface);border:1px solid var(--trait);border-radius:6px;padding:7px 12px;cursor:pointer;font-weight:500}
.btn:hover{border-color:var(--or)}
.btn.principal{background:var(--or);border-color:var(--or);color:#14233b}
.seg{display:inline-flex;border:1px solid var(--trait);border-radius:6px;overflow:hidden;background:var(--surface)}
.seg button{border:0;background:none;padding:7px 11px;cursor:pointer}
.seg button[aria-pressed=true]{background:var(--marine);color:#fff}
.carte{background:var(--surface);border:1px solid var(--trait);border-radius:8px;padding:16px;min-width:0}
.grille{display:grid;gap:16px}
.tuiles{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));margin-bottom:16px}
.tuile b{display:block;font-family:var(--display);font-size:30px;font-weight:600;font-variant-numeric:tabular-nums}
.tuile small{color:var(--texte-2)}
.deux{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:16px;align-items:start}
.table-wrap{overflow-x:auto}
table{border-collapse:collapse;width:100%}
th{text-align:left;font-size:12px;color:var(--texte-2);font-weight:600;padding:8px 10px;border-bottom:1px solid var(--trait);white-space:nowrap}
td{padding:9px 10px;border-bottom:1px solid var(--trait);vertical-align:top}
tr:last-child td{border-bottom:0}
tbody tr.clic{cursor:pointer}
tbody tr.clic:hover{background:var(--fond)}
tbody tr.sel{background:var(--or-doux);box-shadow:inset 3px 0 0 var(--or)}
.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.droite{text-align:right}
.pastille{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:500;white-space:nowrap}
.p-ok{background:var(--ok-fond);color:var(--ok)} .p-alerte{background:var(--alerte-fond);color:var(--alerte)} .p-critique{background:var(--critique-fond);color:var(--critique)} .p-neutre{background:var(--fond);color:var(--texte-2);border:1px solid var(--trait)}
.ini{display:inline-block;font-size:11px;font-weight:600;border:1px solid var(--trait);border-radius:4px;padding:1px 5px;margin-right:3px}
.onglets{display:flex;flex-wrap:wrap;gap:4px;border-bottom:1px solid var(--trait);margin:12px 0 14px}
.onglets button{border:0;background:none;padding:8px 10px;cursor:pointer;color:var(--texte-2);border-bottom:2px solid transparent;font-weight:500}
.onglets button[aria-selected=true]{color:var(--texte);border-bottom-color:var(--or)}
dl{display:grid;grid-template-columns:150px 1fr;gap:8px 12px;margin:0}
dt{color:var(--texte-2)} dd{margin:0}
.fiche h3{font-family:var(--display);font-size:22px;margin:0;font-weight:600;text-wrap:balance}
.vide{color:var(--texte-2);padding:10px 0}
dialog{border:1px solid var(--trait);border-radius:10px;background:var(--surface);color:var(--texte);padding:20px;width:min(480px,92vw)}
dialog::backdrop{background:rgba(10,18,32,.55)}
.champs{display:grid;gap:10px;margin:14px 0}
.champs label{display:grid;gap:4px;font-size:12px;color:var(--texte-2)}
.champs input,.champs select{width:100%;color:var(--texte);font-size:14px}
.actions{display:flex;justify-content:flex-end;gap:8px}
.alerte-bloc{border-left:4px solid var(--critique);margin-bottom:16px}
.apercu{white-space:pre-wrap;background:var(--fond);border:1px solid var(--trait);border-radius:6px;padding:12px;max-height:42vh;overflow:auto;font-size:13px;margin:0 0 12px}
.note{font-size:12px;color:var(--texte-2);margin:6px 0 0}
tr.nonlu td{font-weight:600}
dialog.large{width:min(640px,94vw)}
.barre{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
@media (max-width:900px){.split{grid-template-columns:1fr}}
@media (max-width:700px){
  .app{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .nav{flex-direction:row;flex-wrap:wrap;align-items:center;padding:10px}
  .marque{font-size:17px;padding:0 6px}.sous-marque,.fictif{display:none}
  main{padding:16px}
  dl{grid-template-columns:1fr}
}

/* Compléments du logiciel : formulaires, messages, pagination */
.nav form{margin-top:auto}.nav .compte{font-size:12px;color:#aab6c9;padding:10px 8px 6px}
.nav button.lien{background:none;border:0;color:#d5dce8;padding:9px 10px;cursor:pointer;font-weight:500;width:100%;text-align:left;border-radius:6px}
.nav button.lien:hover{background:var(--marine-2)}
.messages{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:6px}
.messages li{padding:9px 12px;border-radius:6px;background:var(--ok-fond);color:var(--ok);border:1px solid var(--trait)}
.messages li.error{background:var(--critique-fond);color:var(--critique)}
form.fiche-form{max-width:640px;display:grid;gap:12px}
form.fiche-form p{margin:0;display:grid;gap:4px}
form.fiche-form label{font-size:12px;color:var(--texte-2)}
form.fiche-form input[type=text],form.fiche-form input[type=email],form.fiche-form input[type=date],form.fiche-form input[type=time],form.fiche-form input[type=password],form.fiche-form select,form.fiche-form textarea{width:100%;background:var(--surface);border:1px solid var(--trait);border-radius:6px;padding:8px 10px;font:inherit;color:var(--texte)}
form.fiche-form .helptext{font-size:12px;color:var(--texte-2)}
form.fiche-form ul.errorlist{list-style:none;margin:0;padding:0;color:var(--critique);font-size:13px}
form.fiche-form div[id^=id_]{display:flex;gap:14px;flex-wrap:wrap}
form.fiche-form div[id^=id_] label{font-size:14px;color:var(--texte)}
form.en-ligne{display:inline}
.pagination{display:flex;gap:10px;align-items:center;margin-top:12px;color:var(--texte-2)}
a.btn{text-decoration:none;display:inline-block;color:var(--texte)}a.btn.principal{color:#14233b}
a.discret{color:inherit}
.traitee td{color:var(--texte-2);text-decoration:line-through}
.connexion{max-width:380px;margin:12vh auto;padding:0 16px}
.nav a{gap:8px}
.note{font-size:12px;color:var(--texte-2);margin:8px 0 0}