:root {
  --fond: #f4f6f9; --carte: #ffffff; --texte: #1d2733; --doux: #5d6b7a; --bord: #dde3ea;
  --accent: #1f5fa8; --accent-texte: #ffffff; --danger: #b3261e; --ok: #1e7b45; --attention: #8a5a00;
  --ok-fond: #e5f4ea; --att-fond: #fff4dc; --err-fond: #fde8e6; --info-fond: #e7eff9;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #12161c; --carte: #1b212a; --texte: #e4e9ef; --doux: #9aa7b5; --bord: #2c3542;
    --accent: #5b9be0; --accent-texte: #0d1117; --danger: #f08a80; --ok: #6fcf97; --attention: #f2c14e;
    --ok-fond: #17301f; --att-fond: #33290f; --err-fond: #3a1c1a; --info-fond: #172739;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fond); color: var(--texte); line-height: 1.45; }
a { color: var(--accent); }
h1 { font-size: 1.5rem; margin: 0 0 1rem; }
h2 { font-size: 1.1rem; margin: 0 0 .6rem; }
small { color: var(--doux); }
code, .mono { font-family: ui-monospace, Consolas, monospace; }

.entete { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; padding: .7rem 1.2rem;
  background: var(--carte); border-bottom: 1px solid var(--bord); }
.marque { font-weight: 700; text-decoration: none; color: var(--texte); }
.entete nav { display: flex; flex-wrap: wrap; gap: .3rem; flex: 1; }
.entete nav a { text-decoration: none; padding: .35rem .7rem; border-radius: 6px; color: var(--texte); }
.entete nav a.actif { background: var(--info-fond); color: var(--accent); }
.entete nav a.bouton-nav { background: var(--accent); color: var(--accent-texte); }
.compte { display: flex; gap: .8rem; align-items: center; font-size: .9rem; }
.compte form { margin: 0; }

.page { max-width: 1150px; margin: 1.5rem auto; padding: 0 1rem; }
.pied { text-align: center; color: var(--doux); font-size: .8rem; padding: 2rem 1rem; }

.carte { background: var(--carte); border: 1px solid var(--bord); border-radius: 10px; padding: 1.2rem; }
.carte.etroite { max-width: 440px; margin: 2rem auto; }
.carte section { padding-bottom: 1.2rem; margin-bottom: 1.2rem; border-bottom: 1px solid var(--bord); }
.grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; align-items: start; }

label { display: block; margin: .5rem 0; }
input[type=text], input[type=password], input[type=email], input[type=search], select, textarea {
  display: block; width: 100%; margin-top: .25rem; padding: .5rem .6rem; font: inherit; color: var(--texte);
  background: var(--fond); border: 1px solid var(--bord); border-radius: 6px; }
textarea { resize: vertical; }
.ligne-champs { display: flex; flex-wrap: wrap; gap: .6rem; align-items: end; }
.ligne-champs > * { flex: 1 1 180px; margin: 0; }
.ligne-champs > button { flex: 0 0 auto; }
.formulaire label { margin-bottom: .8rem; }
.erreur { color: var(--danger); display: block; font-size: .9rem; }
.ok { color: var(--ok); }
.attente { color: var(--doux); }

.bouton { display: inline-block; padding: .45rem .9rem; border-radius: 6px; border: 1px solid var(--bord);
  background: var(--carte); color: var(--texte); font: inherit; cursor: pointer; text-decoration: none; }
.bouton.principal { background: var(--accent); border-color: var(--accent); color: var(--accent-texte); font-weight: 600; }
.bouton.danger { color: var(--danger); border-color: var(--danger); }
.bouton:disabled { opacity: .5; cursor: wait; }
.bouton.desactive { opacity: .5; pointer-events: none; }
button.lien { background: none; border: none; color: var(--accent); cursor: pointer; padding: 0; font: inherit; text-decoration: underline; }
.actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }

.alerte { padding: .7rem .9rem; border-radius: 8px; margin: .6rem 0; background: var(--info-fond); }
.alerte.success { background: var(--ok-fond); }
.alerte.error { background: var(--err-fond); color: var(--danger); }
.alerte.avertissement, .alerte.warning { background: var(--att-fond); color: var(--attention); }

.table-defile { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; background: var(--carte); border: 1px solid var(--bord); border-radius: 10px; }
.table th, .table td { text-align: left; padding: .6rem .7rem; border-bottom: 1px solid var(--bord); vertical-align: top; }
.table th { font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--doux); }
.table.compacte td { font-size: .85rem; padding: .35rem .6rem; }
.table tr.inactif td { opacity: .55; }
.badge { display: inline-block; font-size: .78rem; padding: .1rem .5rem; border-radius: 99px; background: var(--info-fond); white-space: nowrap; }
.badge.disponible { background: var(--ok-fond); color: var(--ok); }
.badge.expiré, .badge.révoqué { background: var(--att-fond); color: var(--attention); }
.badge.neutre { color: var(--doux); }
.badge.sgl { background: var(--accent); color: var(--accent-texte); }
.vide { color: var(--doux); padding: 1rem 0; }

.zone-depot { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: 1.6rem;
  border: 2px dashed var(--bord); border-radius: 10px; cursor: pointer; text-align: center; }
.zone-depot.survol { border-color: var(--accent); background: var(--info-fond); }
.zone-depot input { display: none; }
.liste-fichiers { margin: .6rem 0 0; padding-left: 1.2rem; }
.liste-dest { max-height: 260px; overflow-y: auto; border: 1px solid var(--bord); border-radius: 8px; margin-top: .5rem; }
.choix { display: flex; gap: .6rem; align-items: flex-start; margin: .4rem 0; }
.choix input { margin-top: .25rem; }
.choix.dest { padding: .45rem .7rem; margin: 0; border-bottom: 1px solid var(--bord); align-items: center; }
.choix.dest span:first-of-type { flex: 1; }
.sous-bloc { margin: .2rem 0 .8rem 1.6rem; }
progress { width: 100%; height: .6rem; margin-top: 1rem; }

.infos { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0 0 1rem; }
.infos dt { color: var(--doux); }
.infos dd { margin: 0; }
.empreinte { word-break: break-all; font-size: .85rem; }
.aide li { margin-bottom: .4rem; }
.apercu { margin-top: 1rem; }
.apercu iframe { width: 100%; height: 70vh; border: 1px solid var(--bord); border-radius: 8px; background: #fff; }
.apercu img, .apercu video { max-width: 100%; border-radius: 8px; }
.apercu pre { max-height: 60vh; overflow: auto; background: var(--fond); padding: .8rem; border-radius: 8px; white-space: pre-wrap; }

@media (max-width: 640px) {
  .entete { padding: .6rem 1rem; }
  .compte span { display: none; }
}