:root {
  --papier: #faf8f4;
  --papier-carte: #ffffff;
  --encre: #1e2126;
  --encre-douce: #6b7280;
  --trait: #e4e0d8;
  --vert: #1f4b3f;
  --vert-clair: #eef3f0;
  --rouge: #b83c29;
  --orange: #d98c14;
  --violet: #7349a6;
  --bleu: #33669f;
  --sarcelle: #1a8c8c;
  --rayon: 12px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --papier: #16181c;
    --papier-carte: #1e2126;
    --encre: #eceae5;
    --encre-douce: #9ca3af;
    --trait: #2f333a;
    --vert: #7cc0a8;
    --vert-clair: #1d2a26;
    --rouge: #e2725c;
    --orange: #e5a33c;
    --violet: #a98ad0;
    --bleu: #7aa5d8;
    --sarcelle: #52b8b8;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.contenu { max-width: 940px; margin: 0 auto; padding: 0 24px; }

/* ---------- en-tête ---------- */
.bandeau {
  background: linear-gradient(180deg, var(--vert-clair), transparent);
  border-bottom: 1px solid var(--trait);
  padding: 34px 0 26px;
  margin-bottom: 32px;
}
h1 {
  margin: 0;
  font-size: clamp(1.7rem, 4vw, 2.3rem);
  letter-spacing: -0.02em;
}

/* ---------- zone de dépôt ---------- */
.depot {
  border: 2px dashed var(--trait);
  border-radius: var(--rayon);
  background: var(--papier-carte);
  padding: 44px 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .15s;
}
.depot:hover, .depot:focus-visible { border-color: var(--vert); outline: none; }
.depot.survol { border-color: var(--vert); background: var(--vert-clair); transform: scale(1.01); }
.depot.inactif { opacity: .55; pointer-events: none; }
.icone { width: 40px; height: 40px; color: var(--vert); margin-bottom: 8px; }
.depot-titre { margin: 0; font-size: 1.15rem; font-weight: 600; }
.depot-sous { margin: 4px 0 0; color: var(--encre-douce); font-size: .9rem; }

.moteur {
  margin: 14px 0 0; padding: 10px 14px;
  background: var(--vert-clair); border-radius: 8px;
  color: var(--encre-douce); font-size: .88rem;
}

/* ---------- options ---------- */
.options {
  margin-top: 18px; border: 1px solid var(--trait);
  border-radius: var(--rayon); background: var(--papier-carte);
}
.options > summary {
  padding: 14px 18px; cursor: pointer; font-weight: 600; font-size: .95rem;
  list-style: none;
}
.options > summary::-webkit-details-marker { display: none; }
.options > summary::before { content: "▸ "; color: var(--encre-douce); }
.options[open] > summary::before { content: "▾ "; }
.grille-options {
  display: grid; gap: 14px; padding: 0 18px 18px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.grille-options label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.grille-options input { margin-top: 4px; accent-color: var(--vert); flex: none; }
.grille-options span { display: block; font-size: .9rem; }
.grille-options em { display: block; color: var(--encre-douce); font-style: normal; font-size: .84rem; }
.titre-groupe {
  margin: 0; padding: 14px 18px 10px;
  font-size: .8rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--vert);
  border-top: 1px solid var(--trait);
}
.reglages { padding-top: 4px; }
.reglage { flex-direction: column; gap: 6px; font-size: .88rem; font-weight: 600; }
.reglage select, .reglage input[type="text"] {
  font: inherit; font-weight: 400; padding: 7px 10px;
  border: 1px solid var(--trait); border-radius: 8px;
  background: var(--papier); color: var(--encre); width: 100%;
}
.reglage .aide {
  display: block; font-weight: 400; font-style: normal;
  color: var(--encre-douce); font-size: .8rem;
}

/* ---------- résultats ---------- */
.resultats { margin-top: 26px; display: grid; gap: 16px; }
.carte {
  border: 1px solid var(--trait); border-radius: var(--rayon);
  background: var(--papier-carte); padding: 18px 20px;
}
.carte h3 { margin: 0 0 4px; font-size: 1rem; overflow-wrap: anywhere; }
.carte .adresse { margin: 0 0 12px; color: var(--encre-douce); font-size: .88rem; }
.carte.echec { border-color: var(--rouge); }
.carte.echec .message { color: var(--rouge); font-size: .92rem; margin: 0; }

.barre { height: 6px; background: var(--trait); border-radius: 99px; overflow: hidden; }
.barre > div { height: 100%; width: 0; background: var(--vert); transition: width .25s; }
.etape { margin: 8px 0 0; color: var(--encre-douce); font-size: .85rem; }

.chiffres {
  display: grid; gap: 10px; margin: 4px 0 14px;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
.chiffre { background: var(--papier); border-radius: 8px; padding: 10px 12px; }
.chiffre b { display: block; font-size: 1.35rem; line-height: 1.2; }
.chiffre span { color: var(--encre-douce); font-size: .78rem; }

.actions { display: flex; gap: 10px; flex-wrap: wrap; }
.bouton {
  display: inline-block; padding: 9px 16px; border-radius: 8px;
  background: var(--vert); color: var(--papier-carte);
  font-size: .92rem; font-weight: 600; text-decoration: none; border: 0;
  cursor: pointer; font-family: inherit;
}
@media (prefers-color-scheme: dark) { .bouton { color: #16181c; } }
.bouton.secondaire { background: transparent; color: var(--vert); border: 1px solid var(--trait); }
.bouton:hover { filter: brightness(1.08); }

.notes { margin: 14px 0 0; padding: 0; list-style: none; }
.notes li {
  font-size: .85rem; color: var(--encre-douce);
  padding: 4px 0 4px 16px; position: relative;
}
.notes li::before { content: "•"; position: absolute; left: 4px; }

.apercu { margin-top: 14px; border-top: 1px solid var(--trait); padding-top: 12px; }
.apercu summary { cursor: pointer; font-size: .88rem; font-weight: 600; }
.liste-elements { margin: 10px 0 0; padding: 0; list-style: none; max-height: 320px; overflow: auto; }
.liste-elements li {
  display: flex; gap: 10px; align-items: baseline;
  padding: 5px 0; border-bottom: 1px solid var(--trait); font-size: .86rem;
}
.liste-elements li:last-child { border-bottom: 0; }
.pastille { width: 9px; height: 9px; border-radius: 2px; flex: none; align-self: center; }
.nom-element { flex: 1; overflow-wrap: anywhere; }
.nom-element small { color: var(--encre-douce); }
.etat-element { font-weight: 600; white-space: nowrap; }
.nb-photos { color: var(--encre-douce); white-space: nowrap; font-size: .8rem; }

.g-mauvais, .g-hors_service { color: var(--rouge); }
.g-moyen { color: var(--orange); }
.g-inconnu { color: var(--violet); }
.g-non_teste { color: var(--bleu); }
.g-proprete, .g-observation { color: var(--sarcelle); }
.p-mauvais, .p-hors_service { background: var(--rouge); }
.p-moyen { background: var(--orange); }
.p-inconnu { background: var(--violet); }
.p-non_teste { background: var(--bleu); }
.p-proprete, .p-observation { background: var(--sarcelle); }

main { padding-bottom: 48px; }