/* NAOTY — feuille partagee par les quatre ecrans.
   Palette tiree des materiaux du sujet : papier de formulaire, stylo bille
   bleu, tampon encreur rouge. */
:root{
  --paper:#FBFBFA; --panel:#F1F2F0; --ink:#15171D; --muted:#5B6373;
  --ballpoint:#23457E; --ballpoint-soft:#EAEFF7;
  --stamp:#9B2F28; --stamp-soft:#F7EDEC;
  --ok:#2C6E49; --ok-soft:#E9F2EC;
  --rule:#D9DDE4;
  --sans:"Carlito","Calibri","Liberation Sans",system-ui,sans-serif;
  --mono:"Source Code Pro","Liberation Mono",ui-monospace,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#14161B; --panel:#1C1F26; --ink:#E7E9ED; --muted:#98A0AE;
    --ballpoint:#8FADDE; --ballpoint-soft:#1B2432;
    --stamp:#DE8B82; --stamp-soft:#2A1E1D;
    --ok:#7BBF95; --ok-soft:#17241C;
    --rule:#2B3038;
  }
}
*{box-sizing:border-box}
[hidden]{display:none !important}

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:15px; line-height:1.5;
  display:flex; flex-direction:column; min-height:100vh;
}

/* ---- barre d'etapes ---- */
header{
  border-bottom:1px solid var(--rule); padding:9px 20px;
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
}
.marque{font-weight:700; letter-spacing:.14em; font-size:.76rem; color:var(--ballpoint)}
.marque small{font-family:var(--mono); letter-spacing:0; opacity:.65; font-weight:400}
nav{display:flex; gap:4px}
nav a{
  font-size:.82rem; text-decoration:none; color:var(--muted);
  padding:4px 11px; border-radius:3px; border:1px solid transparent;
}
nav a:hover{background:var(--panel); color:var(--ink)}
nav a.actif{background:var(--ballpoint-soft); color:var(--ballpoint); font-weight:700}
nav a[aria-disabled="true"]{opacity:.38; pointer-events:none}
.qui{margin-left:auto; font-size:.8rem; color:var(--muted); font-family:var(--mono)}
/* Discret : on quitte rarement, et le bouton ne doit pas concurrencer la
   barre d'etapes. Mais toujours au meme endroit, sur tous les ecrans. */
.quitter{
  font-size:.76rem; font-weight:600; padding:4px 10px;
  background:transparent; border-color:var(--rule); color:var(--muted);
}
.quitter:hover{border-color:var(--stamp); color:var(--stamp)}

/* ---- contenu ---- */
main{flex:1; padding:20px; display:flex; flex-direction:column; gap:14px}
h1{font-size:1.12rem; margin:0; font-weight:700}
.sous{font-size:.85rem; color:var(--muted); margin:0}

.stat{font-size:.82rem; color:var(--muted); font-variant-numeric:tabular-nums}
.stat b{color:var(--ink); font-weight:700}
.jauge{flex:1; min-width:100px; height:5px; background:var(--panel); border-radius:3px; overflow:hidden}
.jauge i{display:block; height:100%; background:var(--ballpoint); width:0; transition:width .18s}

/* ---- boutons ---- */
button{
  font-family:var(--sans); font-size:.88rem; font-weight:600;
  padding:7px 15px; border-radius:3px; border:1px solid var(--rule);
  background:var(--panel); color:var(--ink); cursor:pointer;
}
button:hover{border-color:var(--ballpoint)}
/* --paper et non #fff : en theme sombre le bleu s'eclaircit, et du blanc
   dessus devient illisible. Le fond de page fait un texte contraste dans les
   deux themes. */
button.primaire{background:var(--ballpoint); border-color:var(--ballpoint); color:var(--paper)}
button.danger{color:var(--stamp); border-color:var(--stamp-soft)}
button:disabled{opacity:.45; cursor:default}
button:focus-visible, a:focus-visible, input:focus-visible{outline:2px solid var(--ballpoint); outline-offset:2px}

/* ---- champs ---- */
input[type=text], input[type=file]{
  font-family:var(--mono); font-size:1rem; padding:9px 11px;
  border:2px solid var(--rule); border-radius:3px;
  background:var(--paper); color:var(--ink); width:100%;
}
input:focus{outline:none; border-color:var(--ballpoint)}
label{font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ballpoint)}

/* ---- tuiles / listes ---- */
.grille{display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:12px}
.tuile{
  border:1px solid var(--rule); border-radius:3px; overflow:hidden;
  background:var(--panel); display:flex; flex-direction:column;
}
.tuile img{width:100%; height:118px; object-fit:cover; display:block; background:var(--paper)}
.tuile .corps{padding:9px 11px; font-size:.8rem; display:flex; flex-direction:column; gap:4px}
.tuile .nom{font-family:var(--mono); font-size:.74rem; word-break:break-all}
.tuile.selectionnee{border-color:var(--ballpoint); box-shadow:0 0 0 1px var(--ballpoint)}

.etiq{
  font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:2px 7px; border-radius:3px; align-self:flex-start;
}
.etiq.attente{background:var(--stamp-soft); color:var(--stamp)}
.etiq.fait{background:var(--ok-soft); color:var(--ok)}
.etiq.cours{background:var(--ballpoint-soft); color:var(--ballpoint)}

/* ---- tableaux ---- */
.cadre{border:1px solid var(--rule); border-radius:3px; overflow-x:auto}
table{border-collapse:collapse; width:100%; font-size:.82rem}
th, td{
  text-align:left; padding:7px 11px; border-bottom:1px solid var(--rule);
  white-space:nowrap; vertical-align:baseline;
}
thead th{
  font-size:.68rem; letter-spacing:.07em; text-transform:uppercase;
  color:var(--muted); font-weight:700; background:var(--panel);
  position:sticky; top:0;
}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--panel)}
td.n, th.n{text-align:right; font-variant-numeric:tabular-nums}
td.n b{font-weight:700}
td.zero{color:var(--muted)}
.qui-cel{font-weight:700}
.date{font-family:var(--mono); font-size:.72rem; color:var(--muted)}
.ident{font-family:var(--mono); font-size:.72rem}

/* ---- espace d'administration ---- */
.sous-nav{
  display:flex; gap:4px; flex-wrap:wrap; align-items:center;
  border-bottom:1px solid var(--rule); padding:0 0 10px; margin-bottom:4px;
}
.sous-nav a{
  font-size:.84rem; text-decoration:none; color:var(--muted);
  padding:5px 12px; border-radius:3px; border:1px solid transparent;
}
.sous-nav a:hover{background:var(--panel); color:var(--ink)}
.sous-nav a.actif{background:var(--ballpoint); border-color:var(--ballpoint);
  color:var(--paper); font-weight:700}
.sous-nav .fin{margin-left:auto; font-size:.78rem; color:var(--muted)}

/* En-tete de groupe : « Découpe » chapeaute ses quatre colonnes. Sans lui,
   quinze colonnes de chiffres ne se lisent pas. */
thead tr.groupes th{
  border-bottom:1px solid var(--rule); padding-bottom:5px;
  font-size:.66rem; letter-spacing:.1em; color:var(--ballpoint);
}
thead tr.groupes th.sep{border-left:1px solid var(--rule)}
td.sep, th.sep{border-left:1px solid var(--rule)}

.chip{
  display:inline-block; font-size:.68rem; font-weight:700; letter-spacing:.05em;
  padding:1px 7px; border-radius:3px; margin-right:3px;
  background:var(--ballpoint-soft); color:var(--ballpoint);
}
.chip.sup{background:var(--stamp-soft); color:var(--stamp)}
.chip.mort{background:var(--panel); color:var(--muted)}
.qui-lien{color:inherit; text-decoration:none; border-bottom:1px dotted var(--muted)}
.qui-lien:hover{color:var(--ballpoint); border-bottom-color:var(--ballpoint)}

.pagination{display:flex; align-items:center; gap:9px; flex-wrap:wrap; font-size:.82rem}
.pagination .compte{color:var(--muted); font-variant-numeric:tabular-nums}
.pagination .separateur{flex:1}

/* ---- messages ---- */
.etat{font-size:.82rem; min-height:1.2em}
.etat.ok{color:var(--ok)} .etat.err{color:var(--stamp)}
.vide{color:var(--muted); font-size:.88rem; padding:26px 0; text-align:center}

kbd{
  font-family:var(--mono); font-size:.72rem; background:var(--panel);
  border:1px solid var(--rule); border-bottom-width:2px;
  padding:1px 5px; border-radius:3px; color:var(--ink);
}
footer{
  border-top:1px solid var(--rule); margin-top:auto; padding:9px 20px;
  display:flex; gap:18px; flex-wrap:wrap; font-size:.78rem; color:var(--muted);
}