:root {
  --rouge: #c8102e; --rouge-fonce: #9d0b23; --noir: #111; --gris: #6b6b6b;
  --ligne: #e3e3e3; --fond: #fafafa; --blanc: #fff;
}
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.45 system-ui, "Segoe UI", Roboto, sans-serif; color: var(--noir); background: var(--fond); }
.haut { background: var(--noir); color: var(--blanc); display: flex; flex-wrap: wrap; align-items: center;
        justify-content: space-between; gap: 8px 24px; padding: 10px 20px; border-bottom: 4px solid var(--rouge); }
.marque { font-size: 20px; font-weight: 300; letter-spacing: .5px; }
.marque b { font-weight: 800; color: var(--rouge); }
.marque span { font-size: 14px; color: #bbb; margin-left: 10px; }
nav { display: flex; gap: 4px; flex-wrap: wrap; }
nav button { background: transparent; color: #ddd; border: 0; padding: 8px 14px; border-radius: 4px; cursor: pointer; font: inherit; }
nav button:hover { background: #2a2a2a; }
nav button[aria-current="page"] { background: var(--rouge); color: var(--blanc); }
main { max-width: 1150px; margin: 0 auto; padding: 20px; }
h2 { margin: 0 0 14px; font-size: 22px; }
h3 { margin: 0 0 8px; font-size: 17px; }
.barre { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-bottom: 14px; }
.barre .espace { flex: 1; }
.cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-bottom: 18px; }
.carte, .bloc { background: var(--blanc); border: 1px solid var(--ligne); border-radius: 8px; padding: 14px 16px; }
.carte .val { font-size: 26px; font-weight: 700; }
.carte .val.rouge { color: var(--rouge); }
.carte .lib { color: var(--gris); font-size: 13px; }
.bloc { margin-bottom: 14px; }
.bloc-tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 10px; }
.bloc-tete .total { font-size: 22px; font-weight: 700; }
.gris { color: var(--gris); }
.petit { font-size: 13px; }
.rouge { color: var(--rouge); }
button, .bouton { font: inherit; border: 1px solid var(--noir); background: var(--blanc); color: var(--noir);
                  padding: 7px 13px; border-radius: 5px; cursor: pointer; text-decoration: none; display: inline-block; }
button:hover, .bouton:hover { background: #f0f0f0; }
button.principal, .bouton.principal { background: var(--rouge); border-color: var(--rouge); color: var(--blanc); }
button.principal:hover, .bouton.principal:hover { background: var(--rouge-fonce); }
button.danger { border-color: var(--rouge); color: var(--rouge); }
button.mini { padding: 3px 9px; font-size: 13px; }
button:disabled { opacity: .5; cursor: default; }
label { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--gris); }
input, select, textarea { font: inherit; padding: 7px 9px; border: 1px solid #bbb; border-radius: 5px; background: var(--blanc); color: var(--noir); min-width: 0; }
input:focus, select:focus, textarea:focus, button:focus-visible { outline: 2px solid var(--rouge); outline-offset: 1px; }
label.case { flex-direction: row; align-items: center; gap: 8px; font-size: 14px; color: var(--noir); }
table { width: 100%; border-collapse: collapse; background: var(--blanc); }
th, td { padding: 7px 9px; text-align: left; border-bottom: 1px solid var(--ligne); vertical-align: top; }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--gris); background: #f3f3f3; position: sticky; top: 0; }
td.num, th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
tr:hover td { background: #fcf3f4; }
.defil { overflow-x: auto; border: 1px solid var(--ligne); border-radius: 8px; max-height: 68vh; overflow-y: auto; }
.defil table { border: 0; }
.pastille { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; background: #eee; }
.pastille.oui { background: #e5f4e8; color: #1c6b2f; }
.pastille.non { background: #fde8eb; color: var(--rouge-fonce); }
.barres { display: grid; grid-template-columns: minmax(120px, 220px) 1fr auto; gap: 4px 12px; align-items: center; }
.piste { background: #eee; border-radius: 4px; height: 10px; overflow: hidden; }
.piste > i { display: block; height: 100%; background: var(--rouge); }
.depot { border: 2px dashed #bbb; border-radius: 10px; padding: 28px; text-align: center; background: var(--blanc); }
.depot.survol { border-color: var(--rouge); background: #fcf3f4; }
.grille-map { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; margin: 10px 0; }
.alerte { background: #fff6e0; border: 1px solid #f0d98c; border-radius: 6px; padding: 8px 12px; margin: 8px 0; font-size: 14px; }
.ok { background: #e8f5ea; border: 1px solid #a9d7b1; border-radius: 6px; padding: 10px 14px; margin: 10px 0; }
dialog { border: 0; border-radius: 10px; padding: 20px; width: min(560px, 94vw); box-shadow: 0 10px 40px rgba(0,0,0,.35); }
dialog::backdrop { background: rgba(0,0,0,.5); }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form .large { grid-column: 1 / -1; }
.actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap; }
#toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: var(--noir); color: var(--blanc);
         padding: 10px 18px; border-radius: 6px; opacity: 0; pointer-events: none; transition: opacity .2s; max-width: 90vw; z-index: 10; }
#toast.visible { opacity: 1; }
#toast.erreur { background: var(--rouge); }
.vide { text-align: center; padding: 40px 10px; color: var(--gris); }
h3.espace-haut { margin-top: 24px; }
details summary { cursor: pointer; color: var(--gris); font-size: 13px; }
@media (max-width: 600px) { .form { grid-template-columns: 1fr; } main { padding: 12px; } }

.vignettes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 10px 0; }
.vignette { margin: 0; background: var(--blanc); border: 1px solid var(--ligne); border-radius: 8px; padding: 8px; }
.vignette img { width: 100%; height: 150px; object-fit: cover; border-radius: 4px; display: block; background: #eee; }
.vignette figcaption { margin: 6px 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vignette .actions { margin-top: 6px; justify-content: flex-start; }
.apercu-justif { max-width: 100%; max-height: 220px; border-radius: 6px; display: block; margin: 0 auto 12px; }
.choix { display: flex; flex-direction: column; gap: 6px; max-height: 40vh; overflow-y: auto; margin-top: 10px; }
.choix-ligne { text-align: left; width: 100%; }
.ligne-feuille { padding: 8px 14px; }
.badge-justif { white-space: nowrap; }

body:not(.admin) .admin-seul { display: none !important; }
body.lecture .ecriture { display: none !important; }
body.deconnecte nav, body.deconnecte #compte { display: none; }
nav button[hidden], #compte[hidden] { display: none; }
#compte { display: flex; align-items: center; gap: 8px; color: #ccc; font-size: 13px; }
#compte button { background: transparent; color: #ddd; border-color: #555; padding: 4px 10px; font-size: 13px; }
#compte button:hover { background: #2a2a2a; }
.connexion { max-width: 380px; margin: 40px auto; background: var(--blanc); border: 1px solid var(--ligne);
             border-radius: 10px; padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.connexion h2 { margin: 0; }
.connexion .actions { margin-top: 4px; }
.gros-bouton { font-size: 17px; padding: 14px 20px; }
@media (max-width: 700px) {
  nav { overflow-x: auto; flex-wrap: nowrap; max-width: 100%; }
  nav button { white-space: nowrap; }
  button, .bouton { min-height: 44px; }
  button.mini { min-height: 36px; }
  input, select, textarea { min-height: 44px; font-size: 16px; }
  input[type="checkbox"] { min-height: 0; }
  .bloc-tete .total { font-size: 19px; }
}