/* La Criée — section « la commune en un coup d'œil ».
   Uniquement les jetons de assets/site.css : papier, encre, navy, un seul
   vermillon. Aucune couleur nouvelle, aucune police nouvelle. */

.cu-chapo {
  font-size: 17px;
  color: var(--ink-soft);
  margin: 0 0 22px;
  max-width: 70ch;
}

/* ── la scène : les couches à gauche, la carte à droite ──
   Sans JavaScript il n'y a pas de couches à allumer : la carte prend alors
   toute la largeur, au lieu de se réduire à la seconde colonne d'une grille
   dont la première serait vide. */
.cu-scene {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: start;
}
.cu-js .cu-scene { grid-template-columns: 268px 1fr; }
/* une piste de grille se dimensionne sur son contenu : sans min-width, une
   adresse un peu longue élargit la colonne et fait défiler la page. */
.cu-scene > * { min-width: 0; }
@media (max-width: 900px) { .cu-js .cu-scene { grid-template-columns: 1fr; } }

/* ── le cadre : relief, contour, canevas ── */
.cu-cadre {
  border: 1px solid var(--ink);
  background: var(--paper-hi);
}
/* SANS JAVASCRIPT, la vue prend la forme de l'image de relief : le contour en
   SVG est étiré sur la même boîte, il se superpose donc au pixel près. Un
   format imposé ici décalerait le trait de la commune de son propre relief.
   AVEC le canevas, c'est la transformation qui aligne tout, et la vue peut
   alors prendre le format du journal. */
.cu-vue { position: relative; overflow: hidden; }
.cu-monde { position: relative; transform-origin: 0 0; will-change: transform, opacity; }
.cu-fond { display: block; width: 100%; height: auto; }
.cu-trace {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.cu-trace .cu-voile { fill: var(--paper); opacity: .42; }
.cu-trace .cu-limite {
  fill: none;
  stroke: var(--navy);
  stroke-width: 1.7;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* entre le chargement du script et celui des données, la carte tient déjà sa
   place : image cadrée, contour caché — un trait mal aligné une demi-seconde
   se voit plus qu'une absence. */
.cu-js .cu-vue { aspect-ratio: 1.45; }
.cu-js .cu-monde { position: absolute; inset: 0; }
.cu-js .cu-fond { width: 100%; height: 100%; object-fit: contain; }
.cu-js .cu-trace { display: none; }

.cu-vivante .cu-monde { inset: auto; top: 0; left: 0; width: auto; height: auto; }
.cu-vivante .cu-fond { width: auto; height: auto; max-width: none; object-fit: fill; }
.cu-vivante .cu-trace { display: block; }

.cu-toile {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
  touch-action: pan-y;
}
.cu-toile:active { cursor: grabbing; }
.cu-toile:focus-visible { outline: 2px solid var(--wax); outline-offset: -3px; }

.cu-cadre figcaption {
  position: relative;
  font-family: var(--ui);
  font-size: 11.5px;
  letter-spacing: .02em;
  color: var(--muted);
  border-top: 1px solid var(--line);
  background: var(--paper-hi);
  padding: 8px 12px;
}

/* ── les boutons de cadrage ── */
.cu-zoom {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  flex-direction: column;
  z-index: 4;
  border: 1px solid var(--navy);
  background: var(--paper);
}
.cu-zoom button {
  width: 34px;
  height: 32px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--navy);
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.cu-zoom button:last-child { border-bottom: 0; font-size: 12px; }
.cu-zoom button:hover { background: var(--navy); color: var(--paper); }
.cu-zoom button:focus-visible { outline: 2px solid var(--wax); outline-offset: -2px; }

/* ── la fiche d'un lieu ── */
.cu-fiche {
  position: absolute;
  left: 10px;
  bottom: 46px;
  z-index: 5;
  width: min(320px, calc(100% - 20px));
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: 14px 16px 13px;
}
.cu-fermer {
  position: absolute;
  top: 4px;
  right: 6px;
  border: 0;
  background: transparent;
  font-size: 19px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 6px;
}
.cu-fermer:hover { color: var(--wax); }
.cu-fermer:focus-visible { outline: 2px solid var(--wax); }
.cu-f-quoi {
  font-family: var(--ui);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--wax);
  margin: 0 0 5px;
  max-width: none;
}
.cu-f-nom {
  font-family: var(--data);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.22;
  margin: 0 0 7px;
  max-width: none;
}
.cu-f-det {
  font-family: var(--ui);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 6px;
  max-width: none;
}
.cu-f-det b { color: var(--ink); font-weight: 600; }
.cu-f-det a { color: var(--navy); }
.cu-f-src {
  font-family: var(--ui);
  font-size: 11px;
  color: var(--muted);
  margin: 8px 0 0;
  padding-top: 7px;
  border-top: 1px solid var(--line-soft);
  max-width: none;
}

/* ── la colonne des couches ── */
.cu-outils { border: 1px solid var(--line); background: var(--paper-hi); padding: 15px 16px 12px; }
.cu-outils-titre {
  font-family: var(--ui);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px;
  max-width: none;
}
.cu-groupe { border: 0; margin: 0 0 13px; padding: 0; }
.cu-groupe legend {
  font-family: var(--data);
  font-size: 15.5px;
  font-weight: 600;
  padding: 0 0 4px;
  color: var(--ink);
}
.cu-groupe ul { list-style: none; margin: 0; padding: 0; }
.cu-groupe li { margin: 0; }
.cu-groupe input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cu-groupe label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 5px 4px 2px;
  font-family: var(--ui);
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 1px solid transparent;
}
.cu-groupe label:hover { color: var(--ink); }
.cu-groupe input:checked + label { color: var(--ink); }
.cu-groupe input:focus-visible + label { outline: 2px solid var(--wax); outline-offset: 1px; }
.cu-l-nom { flex: 1; min-width: 0; }
.cu-l-n {
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--muted);
}
.cu-glyphe {
  width: 15px;
  height: 15px;
  flex: none;
  fill: var(--line);
  stroke: var(--line);
}
.cu-groupe input:checked + label .cu-glyphe { fill: var(--navy); stroke: var(--navy); }
.cu-astuce {
  font-family: var(--ui);
  font-size: 11.5px;
  color: var(--muted);
  margin: 4px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  max-width: none;
}
.cu-astuce kbd {
  font-family: var(--ui);
  font-size: 10.5px;
  border: 1px solid var(--line);
  padding: 1px 4px;
  background: var(--paper);
}

/* ── ce qui est écrit en clair sous la carte ── */
.cu-apres { margin-top: 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start; }
.cu-apres > * { min-width: 0; }
@media (max-width: 900px) { .cu-apres { grid-template-columns: 1fr; } }

.cu-clair { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.cu-clair li {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  padding: 11px 0 10px;
  border-bottom: 1px solid var(--line-soft);
}
.cu-quoi {
  font-family: var(--ui);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--wax);
}
.cu-nom { font-family: var(--data); font-size: 17.5px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.cu-det { font-family: var(--ui); font-size: 12.5px; color: var(--ink-soft); line-height: 1.55; overflow-wrap: anywhere; }
.cu-lien { font-family: var(--ui); font-size: 12.5px; color: var(--navy); justify-self: start; overflow-wrap: anywhere; }

/* ── les risques ── */
.cu-risques { border: 1px solid var(--line); background: var(--paper-hi); padding: 20px 22px 16px; min-width: 0; }
@media (max-width: 560px) { .cu-risques { padding: 16px 14px 12px; } }
.cu-risques p { font-size: 15.5px; color: var(--ink-soft); margin: 0 0 11px; }
.cu-risques p b { color: var(--ink); font-weight: 600; }
.cu-risques .titre-encart { color: var(--ink); }
.cu-caption {
  font-family: var(--ui);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
  padding-bottom: 7px;
}
.cu-n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cu-d { white-space: nowrap; font-family: var(--ui); font-size: 12.5px; color: var(--ink-soft); }

/* ── l'inventaire des couches ── */
.cu-inventaire { margin-top: 30px; }
.cu-inventaire td, .cu-inventaire th { vertical-align: top; }
.cu-inventaire .cu-glyphe { fill: var(--navy); stroke: var(--navy); vertical-align: -3px; margin-right: 4px; }
.cu-grp {
  font-family: var(--data);
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  border-right: 1px solid var(--line-soft);
  padding-right: 14px;
}
.cu-src { font-family: var(--ui); font-size: 12px; color: var(--muted); }
.cu-liste, .cu-inventaire, .cu-liste-corps, .cu-det-corps { min-width: 0; }
.cu-manques { border-left: 2px solid var(--wax); padding-left: 14px; }

/* ── la liste équivalente ── */
.cu-liste { margin-top: 30px; border-top: 1px solid var(--ink); padding-top: 18px; }
.cu-liste-intro { margin-top: 0; }
.cu-liste-g {
  font-family: var(--ui);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 20px 0 6px;
  max-width: none;
}
.cu-det-c { border-bottom: 1px solid var(--line-soft); }
.cu-det-c summary {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 2px;
  cursor: pointer;
  font-family: var(--ui);
  font-size: 13.5px;
  color: var(--ink);
  list-style: none;
}
.cu-det-c summary::-webkit-details-marker { display: none; }
.cu-det-c summary::after {
  content: "+";
  margin-left: 4px;
  color: var(--muted);
  font-size: 15px;
}
.cu-det-c[open] summary::after { content: "−"; }
.cu-det-c summary span:not(.cu-l-n) { flex: 1; }
.cu-det-c summary:focus-visible { outline: 2px solid var(--wax); outline-offset: -2px; }
.cu-det-corps { padding: 4px 0 16px; }
.cu-filtre { display: block; margin: 4px 0 12px; }
.cu-filtre span {
  display: block;
  font-family: var(--ui);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 5px;
}
.cu-filtre input {
  width: min(340px, 100%);
  border: 1px solid var(--line);
  border-bottom-color: var(--navy);
  background: var(--paper-hi);
  padding: 8px 10px;
  font-family: var(--ui);
  font-size: 13.5px;
  color: var(--ink);
}
.cu-filtre input:focus-visible { outline: 2px solid var(--wax); outline-offset: 1px; }

.cu-lieux {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: 28px;
}
@media (max-width: 720px) { .cu-lieux { columns: 1; } }
.cu-lieux li { break-inside: avoid; }
.cu-lieux button {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  background: transparent;
  padding: 7px 4px;
  cursor: pointer;
  font-family: inherit;
}
.cu-lieux button:hover { background: var(--paper-deep); }
.cu-lieux button:focus-visible { outline: 2px solid var(--wax); outline-offset: -2px; }
.cu-li-nom { display: block; font-size: 15px; color: var(--ink); overflow-wrap: anywhere; }
.cu-li-det {
  display: block;
  overflow-wrap: anywhere;
  font-family: var(--ui);
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
  margin-top: 2px;
}

/* le sommaire de la liste : replié par défaut, la page garde son rythme */
.cu-liste > summary {
  display: flex;
  align-items: baseline;
  gap: 12px;
  cursor: pointer;
  list-style: none;
  font-family: var(--ui);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 4px 0 12px;
}
.cu-liste > summary::-webkit-details-marker { display: none; }
.cu-liste > summary span:first-child { flex: 1; }
.cu-liste > summary::after { content: "+"; font-size: 15px; letter-spacing: 0; }
.cu-liste[open] > summary::after { content: "−"; }
.cu-liste > summary:focus-visible { outline: 2px solid var(--wax); outline-offset: 2px; }

/* ── la situation : superficie et limites, sous la carte ── */
.cu-situation {
  font-family: var(--ui);
  font-size: 13px;
  color: var(--muted);
  margin: 12px 0 0;
  max-width: none;
  line-height: 1.75;
}
.cu-situation b {
  font-family: var(--data);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.cu-situation .cu-u { font-family: var(--text); font-size: 13px; color: var(--ink-soft); }
.cu-situation .cu-sep {
  display: inline-block;
  width: 1px;
  height: 11px;
  background: var(--line);
  margin: 0 9px 0 5px;
  vertical-align: -1px;
}
.cu-situation a { color: var(--navy); text-decoration-color: var(--line); }

/* ── sur téléphone, la carte passe devant ses réglages ── */
@media (max-width: 900px) {
  .cu-js .cu-cadre { order: 1; }
  .cu-js .cu-situation { order: 2; }
  .cu-js .cu-outils { order: 3; }
}
@media (max-width: 620px) {
  .cu-js .cu-vue { aspect-ratio: 1; }
  .cu-inventaire .cu-src { font-size: 11px; }
  .cu-inventaire .cu-grp { font-size: 12px; white-space: normal; padding-right: 9px; }
  .cu-outils { padding: 13px 13px 10px; }
}

/* un mot que seul le lecteur d'écran entend */
.cu-hors-ecran {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}