/* Carte de la métropole (accueil, communes, quartiers) : bloc écrit par tools/carte.js, comportement dans /assets/js/carte.js.
   Deux niveaux (Bordeaux et ses communes voisines, puis les quartiers de Bordeaux), chacun avec le plan à gauche et la liste à droite. */
.carte { text-align: left; }
.carte-niveau { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.carte-niveau[hidden] { display: none; }
.carte-plan { width: 100%; height: auto; display: block; filter: drop-shadow(0 10px 24px rgba(28, 28, 28, .08)); }
.carte-niveau-quartiers .carte-plan { max-width: 390px; margin: 0 auto; }

/* Plan */
.carte-zone { fill: #f5f0ea; stroke: #c9c2ba; stroke-width: 1.2; stroke-linejoin: round; transition: fill .2s; }
.carte-zone.is-active { fill: #b89660; }
.carte a .carte-zone { cursor: pointer; }
.carte a.is-hl .carte-zone { fill: #dcc8a4; }
.carte a.is-hl .carte-zone.is-active, .carte-zone.is-active.is-hl { fill: #a3854f; }
.carte-plan a:focus-visible { outline: none !important; box-shadow: none !important; }
.carte-plan a:focus-visible .carte-zone { stroke: #1c1c1c; stroke-width: 2.5; }
.carte-contour { fill: #ede9e4; stroke: #c9c2ba; stroke-width: 1.2; }
.carte-garonne { fill: none; stroke: #a9d1e8; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.carte-rocade { fill: none; stroke: #8fb4d0; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.carte-eau { fill: #a9d1e8; opacity: .85; }
.carte-nom { fill: #1c1c1c; font-weight: 700; }
.carte-nom.is-active { fill: #fff; }
/* Les noms, la Garonne, la rocade et l'eau laissent passer le clic vers la zone située dessous */
.carte-garonne, .carte-rocade, .carte-eau, .carte-nom { pointer-events: none; }

/* Liste */
.carte-liste-titre { margin: 18px 0 4px; font: 700 10.5px/1.3 'Raleway', sans-serif; letter-spacing: .18em; text-transform: uppercase; color: #6f6862; }
.carte-items { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 32px; }
.carte-items li { break-inside: avoid; }
.carte-item { display: block; padding: 9px 2px; border-bottom: 1px solid #deded8; font-family: 'Cormorant Garamond', serif; font-size: 20px; font-weight: 600; line-height: 1.25; color: #1c1c1c; text-decoration: none; transition: color .2s, padding-left .2s; }
a.carte-item.is-hl { color: #7f6030; padding-left: 8px; }
.carte-item.is-active { color: #7f6030; font-weight: 700; }
.carte-item.is-active::before { content: ''; display: inline-block; width: 7px; height: 7px; margin: 0 8px 2px 0; border-radius: 50%; background: #b89660; vertical-align: middle; }
.carte-item-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: 28px; border-bottom: 1px solid #b89660; }
.carte-item-plus { font: 700 10.5px/1.2 'Raleway', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #7f6030; white-space: nowrap; }
.carte-retour { background: none; border: 0; padding: 4px 0; font: 700 11px/1.2 'Raleway', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #6f6862; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.carte-retour:hover { color: #1c1c1c; }
.carte-source { margin: 22px 0 0; font-size: 10.5px; line-height: 1.5; color: #5a544f; text-align: center; }

@media (max-width: 900px) {
  .carte-niveau { grid-template-columns: 1fr; gap: 28px; }
  .carte-plan { max-width: 460px; margin: 0 auto; }
  .carte-niveau-quartiers .carte-plan { max-width: 300px; }
  .carte-item { font-size: 18px; padding: 8px 2px; }
  .carte-item-tete { font-size: 24px; }
}
@media (max-width: 380px) {
  .carte-items { column-gap: 18px; }
  .carte-item { font-size: 16.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .carte-zone, .carte-item { transition: none; }
}