/* Karka — styles propres à templates/commune/show.html.twig.
 * Sortis du gabarit le 11/09/2026 (audit SEO) : servis par AssetMapper avec
 * empreinte et cache long, au lieu d'être réinjectés dans chaque réponse. Le
 * <link> reste à la place exacte de l'ancien <style> : même ordre de cascade. */

/* Chapô sous le H1. Le gras se distingue par la COULEUR autant que par la graisse :
   sur un paragraphe en --ink-60, passer les termes clés en --ink pleine densité les
   détache nettement sans alourdir le bloc avec du 700. */
.commune-lead { font-size: 17px; color: var(--ink-60); line-height: 1.7; max-width: 700px; }
.commune-lead strong { color: var(--v-txt); font-weight: 600; }
.commune-lead + .commune-lead { margin-top: 14px; }
.commune-lead-suite { font-size: 15.5px; line-height: 1.75; }
@media (max-width: 640px) {
    .commune-lead { font-size: 15.5px; }
    .commune-lead-suite { font-size: 14.5px; }
}

/* Zones : deux piles côte à côte. `align-items: start` est essentiel — sans lui les
   deux colonnes s'étireraient à la hauteur de la plus longue, ce qui rendrait le
   rééquilibrage invisible. */
.zones-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.zones-colonne { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (max-width: 860px) {
    /* Une seule colonne : les deux piles s'enchaînent, plus aucun vide possible. */
    .zones-colonnes { grid-template-columns: 1fr; }
}

/* ── Carte de zone ──
   En-tête code + badge, libellé en titre, puis un bloc par secteur séparé d'un filet.
   Pas de soulèvement au survol : sur une carte de sept secteurs, le décalage se voit
   comme un saut de la page. La barre dégradée de .step-card reste. */
.zone-card { padding: 20px 20px 14px; }
.zone-card:hover { transform: none; }
.zone-card-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.zone-code { font-family: var(--font-mono); font-size: 14px; font-weight: 700; color: var(--v); background: var(--v-pale); padding: 4px 12px; border-radius: 9px; letter-spacing: .3px; }
.zone-badge { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; }
.zone-lib { font-size: 14.5px; font-weight: 650; color: var(--ink); line-height: 1.4; margin: 10px 0 12px; }
.zone-heter { font-size: 12.5px; line-height: 1.55; color: var(--ink-60); background: var(--amber-bg); border: 1px solid rgba(217,119,6,0.2); border-radius: 10px; padding: 8px 12px; margin: 0 0 4px; }
.zone-heter strong { color: var(--amber); }
.zone-secteur { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.zone-secteur.is-seul { margin-top: 0; padding-top: 0; border-top: 0; }
.zone-secteur-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.zone-secteur-n { font-size: 12px; font-weight: 700; color: var(--ink); }
.zone-secteur-code { font-family: var(--font-mono); font-size: 10px; color: var(--ink-35); background: var(--off); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; cursor: help; }
.zone-texte { margin-top: 6px; }
.zone-texte summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--v); list-style: none; }
.zone-texte summary::-webkit-details-marker { display: none; }
.zone-texte summary::before { content: ''; width: 6px; height: 6px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(-45deg); transition: transform .15s; }
.zone-texte[open] summary::before { transform: rotate(45deg); }
.zone-cite { margin-top: 8px; }
.zone-cite-l { font-size: 11.5px; color: var(--ink-35); }
.zone-cite-i { font-family: var(--font-mono); }
.zone-cite blockquote { margin: 4px 0 0; padding: 7px 11px; border-left: 2px solid var(--v); background: var(--off); border-radius: 0 8px 8px 0; font-size: 12.5px; font-style: italic; line-height: 1.55; color: var(--ink-60); }
.zone-tags { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.zone-tag { font-size: 11px; font-weight: 600; color: var(--amber); background: var(--amber-bg); border: 1px solid rgba(217,119,6,0.18); padding: 2px 10px; border-radius: 100px; }

/* ── « Les règles de {commune}, zone par zone, en une phrase » ──
   Une carte par zone, en colonnes façon mosaïque : `columns` + `break-inside: avoid`
   garde chaque carte entière (une grille alignerait les rangées sur la plus haute). */
.zp { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--border); }
.zp-h { font-family: var(--font-head); font-size: 18px; letter-spacing: -.4px; margin: 0 0 16px; }
.zp-grid { columns: 2; column-gap: 14px; }
.zp-zone { break-inside: avoid; margin: 0 0 14px; border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; background: var(--white); }
.zp-zone-h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.zp-zone-h .zone-code { font-size: 12.5px; padding: 3px 10px; }
.zp-n { font-size: 11.5px; color: var(--ink-35); }
.zp-list { list-style: none; margin: 0; padding: 0; }
.zp-item { font-size: 14px; line-height: 1.6; color: var(--ink-60); padding: 8px 0; border-top: 1px dashed var(--border); }
.zp-item:first-child { border-top: 0; padding-top: 0; }
.zp-item:last-child { padding-bottom: 0; }
.zp-item strong { color: var(--ink); }
.zp-secteur { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-35); background: var(--off); border: 1px solid var(--border); border-radius: 5px; padding: 0 5px; white-space: nowrap; }
.zp-note { font-size: 12px; color: var(--ink-35); margin: 4px 0 0; }
@media (max-width: 860px) { .zp-grid { columns: 1; } }