:root{
  --bg:#F5F3F1;
  --surface:#FFFFFF;
  --surface-2:#EFEAE6;
  --ink:#221C24;
  --ink-muted:#6C6270;
  --border:#DDD5D9;
  --accent:#6B3F63;
  --accent-soft:#F0E1EC;
  --found:#2E7D53;
  --found-soft:#E1F0E7;
  --unsure:#B4650A;
  --unsure-soft:#FBEBD6;
  --missing:#B3261E;
  --missing-soft:#FBE4E2;
  --shadow:0 1px 2px rgba(34,28,36,.05), 0 8px 20px -12px rgba(34,28,36,.18);
}
*{box-sizing:border-box;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  padding:0 16px;
}
.wrap{max-width:920px; margin:0 auto; padding-block:32px 60px;}
header{margin-bottom:28px;}
h1{font-size:1.7rem; margin:0 0 6px;}
.subtitle{color:var(--ink-muted); margin:0; max-width:65ch;}

.step{
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  box-shadow:var(--shadow); padding:20px 22px; margin-bottom:20px;
}
.step[hidden]{display:none !important;}
.step-head{display:flex; align-items:center; gap:10px; margin-bottom:14px;}
.step-num{
  width:26px; height:26px; border-radius:50%; background:var(--accent); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:.85rem; font-weight:700; flex:0 0 auto;
}
.step-head h2{font-size:1.15rem; margin:0;}

.dropzones{display:flex; gap:16px; flex-wrap:wrap;}
.dropzone{
  flex:1 1 260px; border:1.5px dashed var(--border); border-radius:10px; background:var(--surface-2);
  padding:18px; text-align:center; cursor:pointer;
}
.dropzone.filled{border-style:solid; border-color:var(--accent);}
.dropzone h3{margin:0 0 6px; font-size:.95rem;}
.dropzone p{margin:0; font-size:.82rem; color:var(--ink-muted);}
.dropzone input{display:none;}
.dropzone .filelist{margin-top:8px; font-size:.78rem; color:var(--accent); font-weight:600;}

button{
  font:inherit; border:none; border-radius:8px; padding:10px 18px; cursor:pointer;
  background:var(--accent); color:#fff; font-weight:600; font-size:.92rem;
}
button:disabled{opacity:.45; cursor:not-allowed;}
button.secondary{background:var(--surface-2); color:var(--ink);}
.actions{margin-top:16px; display:flex; gap:10px; flex-wrap:wrap;}

table{width:100%; border-collapse:collapse; font-size:.86rem;}
th,td{text-align:left; padding:8px 10px; border-bottom:1px solid var(--border); vertical-align:top;}
th{font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-muted); background:var(--surface-2);}
td input{width:100%; border:1px solid transparent; background:transparent; font:inherit; color:inherit; padding:4px; border-radius:5px;}
td input:focus{border-color:var(--accent); background:var(--surface);}
tr.removed{opacity:.35; text-decoration:line-through;}
.row-actions button{padding:4px 8px; font-size:.75rem;}

.badge{display:inline-block; padding:3px 9px; border-radius:20px; font-size:.75rem; font-weight:700;}
.badge.trouve{background:var(--found-soft); color:var(--found);}
.badge.a_confirmer{background:var(--unsure-soft); color:var(--unsure);}
.badge.manquant{background:var(--missing-soft); color:var(--missing);}

/* Une pièce manquante ou à confirmer doit sauter aux yeux directement sur
   le relevé, pas seulement via la petite pastille de statut. */
tr.statut-manquant{background:var(--missing-soft);}
tr.statut-a_confirmer{background:var(--unsure-soft);}
tr.statut-trouve{background:var(--found-soft);}

tr.group-row td{
  background:var(--surface-2); color:var(--accent); font-weight:700;
  font-size:.78rem; text-transform:uppercase; letter-spacing:.03em;
  padding-top:10px; border-bottom:1px solid var(--border);
}
.group-row-inner{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap;}
.group-toggle button{text-transform:none; letter-spacing:normal; font-weight:600;}
tr.row-manquant{background:var(--missing-soft);}
tr.row-trouve{background:var(--found-soft);}

.candidates{display:flex; flex-direction:column; gap:6px; margin-top:6px;}
.candidate-row{display:flex; align-items:center; gap:8px; font-size:.82rem;}
.candidate-row button{padding:4px 10px; font-size:.76rem;}
.candidate-row.selected{font-weight:700;}
.candidate-row button.ok-active{background:var(--found); color:#fff;}
.piece-vide{font-size:.82rem; color:var(--missing); font-style:italic;}
.piece-validee{display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:.85rem; color:var(--found); font-weight:600;}
.piece-validee button{padding:3px 9px; font-size:.72rem; font-weight:600;}

.btn-manquant{background:var(--surface-2); color:var(--missing);}
.btn-manquant.manquant-active{background:var(--missing); color:#fff;}

.fourni-toggle{display:flex; gap:6px;}
.fourni-toggle button{
  padding:4px 12px; font-size:.78rem; font-weight:600; border-radius:20px;
  background:var(--surface-2); color:var(--ink-muted);
}
.fourni-toggle button.toggle-oui.active{background:var(--found-soft); color:var(--found);}
.fourni-toggle button.toggle-non.active{background:var(--missing-soft); color:var(--missing);}

/* Pointages sauvegardés (reprise d'un travail commencé) */
.sauvegarde{
  margin-left:auto; font-size:.75rem; color:var(--found); font-weight:600;
  background:var(--found-soft); padding:3px 10px; border-radius:20px; white-space:nowrap;
}
.discret{font-size:.75rem; color:var(--ink-muted);}
.actions-pointage{display:flex; gap:6px; flex-wrap:wrap;}
.actions-pointage button{padding:5px 12px; font-size:.78rem;}
#pointages-table td{vertical-align:middle;}

#non-rapproches-table select{
  font:inherit; padding:5px 8px; border-radius:6px; border:1px solid var(--border);
  background:var(--surface); color:var(--ink); max-width:100%;
}

.summary{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:16px;}
.stat{flex:1 1 140px; border:1px solid var(--border); border-radius:10px; padding:12px 14px; background:var(--surface-2);}
.stat .n{font-size:1.5rem; font-weight:700;}
.stat .l{font-size:.78rem; color:var(--ink-muted); text-transform:uppercase; letter-spacing:.04em;}

/* Bandeau flottant : toujours visible, même en bas d'un long relevé — sinon
   un message d'erreur affiché en haut de page passe inaperçu et on croit que
   l'application ne répond plus. */
#message-zone:empty{display:none;}
#message-zone{
  position:fixed; left:50%; transform:translateX(-50%); bottom:18px; z-index:100;
  width:min(680px, calc(100% - 32px));
}
.message{
  padding:12px 16px; border-radius:10px; font-size:.85rem; line-height:1.45;
  box-shadow:0 6px 24px -6px rgba(34,28,36,.35); border:1px solid transparent;
}
.message.warn{background:var(--unsure-soft); color:var(--unsure); border-color:var(--unsure);}
.message.error{background:var(--missing-soft); color:var(--missing); border-color:var(--missing);}
.message.ok{background:var(--found-soft); color:var(--found); border-color:var(--found);}

.spinner{display:inline-block; width:14px; height:14px; border:2px solid rgba(255,255,255,.4);
  border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; margin-right:6px;}
@keyframes spin{to{transform:rotate(360deg);}}

footer{color:var(--ink-muted); font-size:.78rem; text-align:center; margin-top:8px;}