.carte-intro h1 { margin: 0 0 8px; font-size: 26px; }
.carte-intro p { margin: 0; max-width: 70ch; }
.hint { font-weight: 400; font-size: 13px; color: var(--muted); }
[hidden] { display: none !important; }

/* Teintes de la carte : une seule teinte, du clair au foncé, selon le nombre de fiches. */
:root {
  --m0: #ece7dc; --m1: #cfe2f3; --m2: #9cc4e8; --m3: #5f9dd6; --m4: #2b73b8; --m5: #0d4b85;
  --m-line: #ffffff; --m-hover: #1d1b16;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --m0: #2c2922; --m1: #1d3a57; --m2: #24527e; --m3: #2f6fa8; --m4: #4f95d6; --m5: #8cc2f2;
    --m-line: #15140f; --m-hover: #f3efe4;
  }
}

.carte-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.carte-filters button { border: 1px solid var(--line); background: var(--surface); border-radius: 99px; padding: 6px 14px; cursor: pointer; font: inherit; color: inherit; }
.carte-filters button.on { background: var(--text); color: var(--bg); }

.carte-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(280px, 2fr); gap: 16px; align-items: start; }
.carte-map, .carte-list, .carte-add { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px; }
.carte-map { position: relative; }
.map-box svg { display: block; width: 100%; height: auto; }
.map-box path { stroke: var(--m-line); stroke-width: .8; cursor: pointer; transition: fill .15s; }
.map-box path:hover, .map-box path:focus { stroke: var(--m-hover); stroke-width: 2; outline: none; }
.map-box path.sel { stroke: var(--red); stroke-width: 2.5; }
.map-foot { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.legend { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.legend i { width: 18px; height: 12px; border-radius: 3px; display: inline-block; }
.dom { display: flex; gap: 6px; flex-wrap: wrap; }
.dom button { border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; font: inherit; font-size: 12px; cursor: pointer; color: var(--text); }
.dom button.sel { outline: 2px solid var(--red); }
.dep-select { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); margin-top: 10px; }
.dep-select select { font: inherit; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); }
.tip { position: absolute; pointer-events: none; background: var(--text); color: var(--bg); border-radius: 8px; padding: 6px 9px; font-size: 12px; white-space: nowrap; transform: translate(-50%, -120%); z-index: 2; }

.list-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; }
.list-head h2 { margin: 0; font-size: 18px; }
.entries { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 620px; overflow: auto; }
.entries li { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.entries .kind { font-size: 12px; font-weight: 700; color: var(--muted); }
.entries b { font-size: 15px; }
.entries p { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.entries a { font-size: 14px; overflow-wrap: anywhere; }
.entries .empty { color: var(--muted); border-style: dashed; }

.carte-add summary { list-style: none; cursor: pointer; }
.carte-add summary::-webkit-details-marker { display: none; }
.carte-add[open] summary { margin-bottom: 12px; }
.add-form { display: flex; flex-direction: column; gap: 12px; max-width: 640px; }
.add-form fieldset { border: 0; margin: 0; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.add-form legend { font-weight: 700; margin-bottom: 6px; }
.add-form .types label { display: flex; gap: 6px; align-items: center; padding: 7px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); cursor: pointer; }
.add-form .types label:has(input:checked) { border-color: var(--blue); background: var(--surface); }
.field { display: flex; flex-direction: column; gap: 5px; font-weight: 600; }
.field input, .field select, .field textarea {
  font: inherit; font-weight: 400; padding: 10px 12px; border: 2px solid var(--line); border-radius: 10px; background: var(--surface-2); color: var(--text); width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue); }
.dates { display: flex; gap: 10px; flex-wrap: wrap; }
.dates .field { flex: 1 1 160px; }
.check { display: flex; gap: 8px; align-items: flex-start; }
.check input { margin-top: 4px; }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.result { margin: 0; font-weight: 600; }
.result.ok { color: var(--green); }
.result.err { color: var(--red-ink); }

@media (max-width: 800px) {
  .carte-grid { grid-template-columns: 1fr; }
  .entries { max-height: none; }
}