/* Veille du territoire — feuille de style unique.
   Parti pris : l'outil emprunte au vocabulaire du plan cadastral. Fond papier,
   encre vert-noir, filets fins, et references cadastrales en chasse fixe
   parce que ce sont des codes, pas de la prose. Aucune fonte distante :
   l'outil doit s'ouvrir vite sur un poste de mairie. */

:root {
  --encre: #1b2a22;
  --papier: #fbfbf9;
  --papier-creuse: #f2f4ef;
  --filet: #d5d9d0;
  --vert: #24503c;
  --n1: #a6321e;
  --n2: #b07a12;
  --n3: #5f7166;
  --sourdine: #6d7a70;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font: 15px/1.5 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-variant-numeric: tabular-nums;
}

a { color: var(--vert); }

code, .ref {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.92em;
  letter-spacing: -0.01em;
}

/* --- Ossature ----------------------------------------------------------- */

.bandeau {
  background: var(--vert);
  color: #fff;
  padding: 10px 22px;
  display: flex;
  align-items: baseline;
  gap: 18px;
  flex-wrap: wrap;
}
.bandeau .marque {
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 12px;
}
.bandeau .espace { flex: 1; }
.bandeau a { color: #cfe0d6; text-decoration: none; font-size: 13px; }
.bandeau a:hover { color: #fff; text-decoration: underline; }

main { max-width: 1120px; margin: 0 auto; padding: 26px 22px 60px; }

h1 { font-size: 22px; margin: 0 0 4px; letter-spacing: -0.01em; }
h2 { font-size: 15px; margin: 26px 0 10px; letter-spacing: 0.02em; }

.surtitre {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--sourdine);
  margin-bottom: 6px;
}

.sourdine { color: var(--sourdine); font-size: 13px; }

/* --- Barre de filtres --------------------------------------------------- */

.filtres {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  padding: 12px 0 16px;
  border-bottom: 1px solid var(--filet);
  margin-bottom: 18px;
}
.filtres select, .filtres button {
  font: inherit;
  padding: 6px 10px;
  border: 1px solid var(--filet);
  background: #fff;
  color: var(--encre);
  border-radius: 2px;
}
.filtres button { background: var(--vert); color: #fff; border-color: var(--vert); cursor: pointer; }

.onglets { display: flex; gap: 2px; flex-wrap: wrap; }
.onglet {
  padding: 6px 12px;
  border: 1px solid var(--filet);
  border-bottom: none;
  background: var(--papier-creuse);
  text-decoration: none;
  color: var(--sourdine);
  font-size: 13px;
}
.onglet.actif { background: #fff; color: var(--encre); font-weight: 600; }
.onglet .compte { color: var(--sourdine); font-weight: 400; }

/* --- Liste des ecarts --------------------------------------------------- */

.ecarts { border-top: 1px solid var(--filet); }

.ecart {
  display: grid;
  grid-template-columns: 6px 132px 1fr 150px;
  gap: 16px;
  align-items: start;
  padding: 14px 0;
  border-bottom: 1px solid var(--filet);
  text-decoration: none;
  color: inherit;
}
.ecart:hover { background: var(--papier-creuse); }

.jauge { align-self: stretch; border-radius: 1px; }
.n1 .jauge { background: var(--n1); }
.n2 .jauge { background: var(--n2); }
.n3 .jauge { background: var(--n3); }

.vignette {
  width: 132px; height: 88px;
  object-fit: cover;
  border: 1px solid var(--filet);
  background: var(--papier-creuse);
  display: block;
}
.vignette-absente {
  width: 132px; height: 88px;
  border: 1px dashed var(--filet);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--sourdine); text-align: center; padding: 6px;
}

.ecart .titre { font-weight: 600; margin-bottom: 3px; }
.ecart .motif { font-size: 13px; color: var(--sourdine); }
.ecart .meta { font-size: 12px; color: var(--sourdine); text-align: right; }

.pastille {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 7px;
  color: #fff;
  border-radius: 2px;
}
.n1 .pastille { background: var(--n1); }
.n2 .pastille { background: var(--n2); }
.n3 .pastille { background: var(--n3); }

/* --- Detail : la planche avant / apres est le coeur de la page ---------- */

.planche {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 16px 0 8px;
}
.planche figure { margin: 0; }
.planche img { width: 100%; border: 1px solid var(--filet); display: block; }
.planche figcaption {
  font-size: 12px; color: var(--sourdine); padding-top: 6px;
  border-top: 1px solid var(--filet); margin-top: 6px;
}

.fiche-infos { width: 100%; border-collapse: collapse; margin-top: 8px; }
.fiche-infos th, .fiche-infos td {
  text-align: left; padding: 7px 0; border-bottom: 1px solid var(--filet);
  vertical-align: top; font-size: 14px;
}
.fiche-infos th { width: 250px; font-weight: 600; color: var(--sourdine); font-size: 12.5px; }

.encadre {
  background: var(--papier-creuse);
  border: 1px solid var(--filet);
  padding: 16px 18px;
  margin: 22px 0;
}

.actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0; }
.bouton {
  display: inline-block;
  padding: 9px 16px;
  background: var(--vert); color: #fff;
  text-decoration: none; border: 1px solid var(--vert);
  font-size: 14px; border-radius: 2px; cursor: pointer;
}
.bouton.secondaire { background: #fff; color: var(--vert); }

textarea, select {
  font: inherit; width: 100%; padding: 8px;
  border: 1px solid var(--filet); border-radius: 2px; background: #fff;
}

/* --- Provenance : toujours visible, c'est le socle de credibilite ------- */

.provenance {
  border-top: 2px solid var(--encre);
  margin-top: 40px;
  padding-top: 12px;
  font-size: 11.5px;
  color: var(--sourdine);
  line-height: 1.6;
}

.message { padding: 10px 14px; margin-bottom: 16px; border-left: 3px solid; }
.message.ok { border-color: var(--vert); background: var(--papier-creuse); }
.message.erreur { border-color: var(--n1); background: #fbeeea; }

.vide { padding: 46px 0; text-align: center; color: var(--sourdine); }

/* --- Connexion ---------------------------------------------------------- */

.connexion { max-width: 340px; margin: 90px auto; }
.connexion label { display: block; font-size: 13px; margin: 14px 0 4px; }
.connexion input {
  width: 100%; padding: 9px; font: inherit;
  border: 1px solid var(--filet); border-radius: 2px;
}
.connexion .bouton { width: 100%; margin-top: 18px; text-align: center; border: none; }

@media (max-width: 720px) {
  .ecart { grid-template-columns: 4px 1fr; }
  .ecart .vignette, .ecart .vignette-absente, .ecart .meta { display: none; }
  .planche { grid-template-columns: 1fr; }
}

@media print {
  .bandeau, .filtres, .actions, .onglets { display: none; }
  body { background: #fff; }
}

:focus-visible { outline: 2px solid var(--vert); outline-offset: 2px; }

/* --- Ecran de controle -------------------------------------------------- */

.constats { margin: 18px 0 8px; }

.constat {
  border-left: 3px solid var(--n2);
  background: var(--papier-creuse);
  padding: 12px 16px;
  margin-bottom: 10px;
}
.constat.grave { border-left-color: var(--n1); background: #fbeeea; }

.constat-tete { margin: 0 0 6px; display: flex; align-items: center; gap: 10px; }
.constat-message { margin: 0 0 6px; }
.constat-action {
  margin: 0;
  font-size: 13px;
  color: var(--sourdine);
  border-top: 1px solid var(--filet);
  padding-top: 6px;
}

.tableau-controle { margin-bottom: 8px; }
.tableau-controle thead th {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--sourdine);
  border-bottom: 1.5px solid var(--encre);
  padding-bottom: 6px;
  width: auto;
}
.tableau-controle td { font-size: 13.5px; padding: 9px 10px 9px 0; }

@media (max-width: 720px) {
  .tableau-controle { display: block; overflow-x: auto; white-space: nowrap; }
}

/* Bloc de tracabilite : d'ou vient l'alerte. Filet epais a gauche, comme une
   citation : c'est une reference, pas une conclusion. */
.provenance-bloc {
  border-left: 3px solid var(--encre);
  background: var(--papier-creuse);
  padding: 12px 16px;
  margin: 16px 0 4px;
}
.provenance-bloc p:last-child { margin: 0; font-size: 13px; line-height: 1.55; }

/* --- Version 1.2 : gravite et administration --------------------------- */
:root {
  --g1: #f0a13a;
  --g2: #df6f22;
  --g3: #d1492e;
  --g4: #991f1f;
  --g5: #111111;
}
.compte-admin { font-size: 13px; color: #cfe0d6; }
.g1 .jauge, .case.g1 { background: var(--g1); }
.g2 .jauge, .case.g2 { background: var(--g2); }
.g3 .jauge, .case.g3 { background: var(--g3); }
.g4 .jauge, .case.g4 { background: var(--g4); }
.g5 .jauge, .case.g5 { background: var(--g5); }
.g1 .pastille, .g1-fond { background: var(--g1); color: #2a1a08; }
.g2 .pastille, .g2-fond { background: var(--g2); }
.g3 .pastille, .g3-fond { background: var(--g3); }
.g4 .pastille, .g4-fond { background: var(--g4); }
.g5 .pastille, .g5-fond { background: var(--g5); }
.ligne-badges { display:flex; gap:7px; flex-wrap:wrap; align-items:center; margin-bottom:6px; }
.badge-neutre {
  display:inline-block; border:1px solid var(--filet); background:#fff;
  color:var(--sourdine); border-radius:2px; padding:2px 7px;
  font-size:10.5px; letter-spacing:.04em;
}
.ecart .titre { display:block; }
.ecart .motif { display:block; }
.gravite-ligne { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:12px 0; }
.echelle-gravite { display:inline-flex; gap:3px; align-items:center; }
.echelle-gravite .case { width:18px; height:13px; display:inline-block; border:1px solid rgba(0,0,0,.14); opacity:.45; }
.echelle-gravite .case.active { opacity:1; outline:2px solid var(--encre); outline-offset:2px; }
.motif-principal { margin-top:12px; font-size:16px; line-height:1.55; }
.vignette-absente.grande { width:100%; height:220px; }
.grille-formulaire { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.grille-formulaire label, .label-note { display:block; font-size:13px; margin:0 0 4px; }
.label-note { margin-top:12px; }
.historique th { width:auto; }
@media (max-width: 800px) { .grille-formulaire { grid-template-columns:1fr; } }

/* v1.4.2 - file de traitements */
.tableau { width:100%; border-collapse:collapse; font-size:.92rem; }
.tableau th,.tableau td { padding:.55rem .65rem; border-bottom:1px solid #ddd; vertical-align:top; text-align:left; }
.tableau pre { white-space:pre-wrap; max-width:70rem; max-height:18rem; overflow:auto; }

/* v1.5 - registre communal, documentation, sources */
.bloc { border:1px solid var(--filet); background:#fff; padding:16px 18px; margin:18px 0; }
.formulaire { display:grid; gap:12px; }
.formulaire.compact { grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); align-items:end; }
.formulaire input, .formulaire select, .form-inline input, .filtres input {
  font:inherit; padding:8px; border:1px solid var(--filet); border-radius:2px; background:#fff;
}
.formulaire label { display:grid; gap:5px; font-size:13px; }
.form-inline { display:flex; gap:10px; flex-wrap:wrap; align-items:end; margin:10px 0; }
.form-inline label { display:grid; gap:4px; font-size:13px; }
button { font:inherit; padding:8px 13px; border:1px solid var(--vert); background:var(--vert); color:#fff; border-radius:2px; cursor:pointer; }
.chips { display:flex; flex-wrap:wrap; gap:7px; margin:8px 0 12px; }
.chip { display:inline-flex; align-items:center; gap:5px; border:1px solid var(--filet); background:var(--papier-creuse); padding:4px 7px; font-size:12px; }
.chip form { margin:0; display:inline; }.chip button { padding:0 4px; border:0; background:transparent; color:#7c2323; font-weight:700; }
.commune-card { display:grid; grid-template-columns:minmax(230px,.8fr) minmax(420px,2fr); gap:20px; }
.commune-form { grid-template-columns:repeat(4,minmax(120px,1fr)); align-items:end; }
.commune-form .large { grid-column:span 2; }
.doc-head { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; }
.documentation { max-width:980px; line-height:1.62; }
.documentation h2 { margin-top:30px; border-bottom:1px solid var(--filet); padding-bottom:5px; }
.documentation p { margin:8px 0; }
.sources-complementaires { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; margin:14px 0; }
.source-card { margin:0; border:1px solid var(--filet); padding:8px; background:#fff; }
.source-card img { width:100%; aspect-ratio:1/1; object-fit:cover; display:block; }
.source-card figcaption { font-size:11.5px; line-height:1.45; color:var(--sourdine); margin-top:6px; }
@media (max-width:900px){ .commune-card{grid-template-columns:1fr}.commune-form{grid-template-columns:1fr 1fr}.commune-form .large{grid-column:span 2}.bandeau{overflow-x:auto} }

/* v1.5.1 - aide contextuelle */
.aide-contextuelle {
  border-left: 3px solid var(--vert);
  background: var(--papier-creuse);
  padding: 10px 14px;
  margin: 14px 0 18px;
}
.aide-contextuelle summary { cursor: pointer; font-weight: 700; color: var(--encre); }
.aide-contextuelle p, .aide-contextuelle li { font-size: 13px; line-height: 1.55; }
.aide-contextuelle ul { margin: 8px 0 2px 20px; padding: 0; }

/* v1.6 - repere de navigation et chronologie photo */
.bandeau a.actif-page {
  color:#fff;
  font-weight:700;
  border-bottom:2px solid #fff;
  padding-bottom:3px;
}
.sous-bloc { border-top:1px solid var(--filet); margin-top:14px; padding-top:12px; }
.auto-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:8px 12px; margin:8px 0 4px; }
.auto-grid label { font-size:12.5px; display:flex; gap:6px; align-items:flex-start; }
.liste-sources { margin:0; padding-left:18px; }
.liste-sources li { margin:2px 0; }
.details-techniques { margin-top:10px; }
.details-techniques code { word-break:break-all; }
.chronologie-photo { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin:12px 0; }
.photo-chrono { border:1px solid var(--filet); background:#fff; padding:7px; }
.photo-chrono img { width:100%; aspect-ratio:1/1; object-fit:cover; display:block; }
.photo-chrono figcaption { font-size:11.5px; color:var(--sourdine); line-height:1.45; margin-top:6px; }
.liens-photo { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:8px; }
.lien-photo { border:1px solid var(--filet); padding:9px 10px; background:var(--papier-creuse); font-size:12.5px; }
.page-intro { margin-bottom:16px; }


/* ---- v1.7.0 : constats, gras, glossaire ---- */
.constats-bloc{margin:.6rem 0 .8rem;padding:.6rem .9rem;border-left:3px solid #1B2A22;background:#F7F8F5}
.constats{margin:.3rem 0 0;padding-left:1.2rem}
.constats li{margin:.25rem 0;line-height:1.4}
.constats .source{color:#667069;font-size:.92em}
.explication{margin:.2rem 0 .6rem;color:#2A3630;line-height:1.45}
.provenance-bloc b,.explication b{color:#1B2A22}
details.technique{margin:.6rem 0;padding:.4rem .8rem;border:1px solid #C8CEC4;border-radius:4px;background:#FBFBFA}
details.technique summary{cursor:pointer;color:#4C544F;font-size:.92em}
.glossaire dt{font-weight:bold;margin-top:.4rem}
.glossaire dd{margin:0 0 .2rem 1rem;color:#3A443E}


/* ---- v1.7.1 : pastilles, plan de situation, chronologie ---- */
.legende-pastilles{font-weight:normal;color:#667069;font-size:.85em;margin-left:.6rem}
.pastille-c{display:inline-block;width:.7em;height:.7em;border-radius:50%;margin:0 .2em 0 .5em;vertical-align:middle}
.pastille-c.rouge,.constats li.c-rouge::before{background:#C8281A}
.pastille-c.vert,.constats li.c-vert::before{background:#2E8B57}
.pastille-c.orange,.constats li.c-orange::before{background:#E0891A}
.constats{list-style:none;padding-left:0}
.constats li{position:relative;padding-left:1.5rem}
.constats li::before{content:"";position:absolute;left:.15rem;top:.42em;width:.75em;height:.75em;border-radius:50%;background:#E0891A}
.constats li.c-date::before{background:none;width:1em;height:1em;top:.25em;left:0;border-radius:2px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><rect x='2' y='6' width='35' height='31' rx='4' fill='white' stroke='%231B2A22' stroke-width='3'/><rect x='2' y='6' width='35' height='9' fill='%231B2A22'/><rect x='8' y='1' width='4' height='9' fill='%231B2A22'/><rect x='28' y='1' width='4' height='9' fill='%231B2A22'/><g fill='%231B2A22'><rect x='7' y='19' width='4' height='4'/><rect x='15' y='19' width='4' height='4'/><rect x='23' y='19' width='4' height='4'/><rect x='31' y='19' width='4' height='4'/><rect x='7' y='27' width='4' height='4'/><rect x='15' y='27' width='4' height='4'/><rect x='23' y='27' width='4' height='4'/></g></svg>");background-size:contain;background-repeat:no-repeat}
.planche.trois{display:grid;grid-template-columns:0.9fr 1fr 1fr;gap:1rem;align-items:start}
.planche.trois figure{margin:0}
.planche.trois img{width:100%;height:auto;border:1px solid #C8CEC4}
.planche.trois figcaption.haut{margin-bottom:.35rem;display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;justify-content:space-between}
.planche.trois figure.plan img{width:90%}
.boutons-plan .bouton.petit{padding:.15rem .5rem;font-size:.8em}
.chronologie-photo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem}
.chronologie-photo figure{margin:0;min-width:0}
.chronologie-photo img{width:100%;height:auto;border:1px solid #C8CEC4}
.chronologie-photo figcaption{font-size:.85em;line-height:1.35;overflow-wrap:anywhere;word-break:break-word}
.chronologie-photo .ref{font-size:.85em;color:#667069}
.liens-photo{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.6rem;margin-top:.8rem}
.liens-photo .lien-photo{border:1px solid #C8CEC4;border-radius:4px;padding:.5rem .7rem;font-size:.9em;overflow-wrap:anywhere}
@media (max-width:900px){.planche.trois,.chronologie-photo{grid-template-columns:1fr}}