/* ==========================================================================
   com_breizh — les pages /local
   ==========================================================================

   Les trois vues (index des départements, liste d'un département, commune)
   partageaient jusqu'ici trois apparences différentes : l'index chargeait
   l'ancien système « glassmorphism » de com_demat depuis un CDN (Bootstrap
   5.3.0, Bootstrap Icons, Inter, Playfair Display), les deux autres
   retombaient sur les styles Bootstrap par défaut. Aucune des trois
   n'utilisait les jetons du gabarit demat_desktop.

   Cette feuille les réunit sur ces jetons. Elle est volontairement écrite
   avec des valeurs de repli — var(--bleu-glaz, #0e7d8c) — pour que les pages
   restent présentables si elle est servie sans template.css (gabarit de
   secours, vue « component », impression, courriel).

   Bootstrap reste chargé par Joomla pour tout le site : les sélecteurs sont
   donc préfixés par .com-breizh-* afin de passer devant .table, .card et
   .btn sans recourir à !important.
   ========================================================================== */

.com-breizh-localite,
.com-breizh-localites,
.com-breizh-departments {
  /* Repli local des jetons : si template.css est présent, ses valeurs sur
     :root gagnent ; sinon ces définitions prennent le relais. */
  --bz-encre: var(--hermine, #12100e);
  --bz-fond: var(--blanc-ecume, #fbfaf7);
  --bz-nuit: var(--noir-goemon, #001e26);
  --bz-glaz: var(--bleu-glaz, #0e7d8c);
  --bz-glaz-fonce: var(--bleu-glaz-fonce, #0a5f6b);
  --bz-sable: var(--sable, #e8ddc8);
  --bz-granit: var(--granit, #5f6e73);
  --bz-ligne: var(--ligne, rgba(18, 16, 14, 0.12));
  --bz-titre: var(--police-titre, 'Bricolage Grotesque', system-ui, sans-serif);
  --bz-donnees: var(--police-donnees, ui-monospace, 'SF Mono', Menlo, monospace);
  --bz-rayon: var(--rayon, 10px);

  /* Largeur de lecture. Les pages commune faisaient courir leur prose sur
     les 1200px du conteneur, soit environ 150 caractères par ligne : l'œil
     perd la ligne suivante. 68ch les ramène dans la plage lisible. */
  --bz-mesure: 68ch;

  color: var(--bz-encre);
}

/* Les légendes de tableau masquées visuellement s'appuient sur .visually-hidden
   de Bootstrap. Redéclaré ici pour que la mise en page tienne aussi sans lui :
   sans cette règle, les <caption class="visually-hidden"> s'afficheraient. */
.com-breizh-localite .visually-hidden,
.com-breizh-localites .visually-hidden,
.com-breizh-departments .visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* --- Bandeau de titre ------------------------------------------------------ */

.com-breizh-localite .page-header,
.com-breizh-localites .page-header,
.com-breizh-departments .page-header {
  margin: 0 0 2rem;
  padding-bottom: 1.25rem;
  border-bottom: 2px solid var(--bz-encre);
}

/* Surtitre : le département sur une page commune, la région sur une page
   département. Reprend .eyebrow du gabarit sans en dépendre. */
.com-breizh-surtitre {
  display: block;
  margin-bottom: 0.6rem;
  font-family: var(--bz-donnees);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bz-granit);
}

.com-breizh-surtitre a { color: inherit; text-decoration: none; }
.com-breizh-surtitre a:hover { color: var(--bz-glaz); text-decoration: underline; }

.com-breizh-localite .page-header h1,
.com-breizh-localites .page-header h1,
.com-breizh-departments .page-header h1 {
  font-family: var(--bz-titre);
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 0.35em;
}

/* Le nom breton : la seule donnée que ce site publie et que les annuaires
   nationaux n'ont pas. Il est traité comme une accroche, pas comme une note. */
.com-breizh-brezhoneg {
  margin: 0;
  font-family: var(--bz-titre);
  font-size: clamp(1.05rem, 2vw, 1.4rem);
  font-weight: 500;
  color: var(--bz-glaz-fonce);
}

/* --- Description éditoriale ------------------------------------------------
   Le bloc que cette refonte ménage. La plupart des 186 communes n'en ont pas
   encore : le gabarit ne rend rien du tout dans ce cas, plutôt qu'un conteneur
   vide qui laisserait un trou. Rien ici ne réserve donc de hauteur. */

.com-breizh-description {
  max-width: var(--bz-mesure);
  margin: 0 0 2.5rem;
  padding-left: 1.25rem;
  border-left: 3px solid var(--bz-sable);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: color-mix(in srgb, var(--bz-encre) 88%, transparent);
}

/* color-mix est récent : repli pour les navigateurs qui l'ignorent. */
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
  .com-breizh-description { color: var(--bz-encre); }
}

.com-breizh-description > :first-child { margin-top: 0; }
.com-breizh-description > :last-child { margin-bottom: 0; }

.com-breizh-description p { margin: 0 0 0.9em; }

/* Une description peut contenir des intertitres : ils ne doivent pas
   concurrencer les H2 de la page, d'où une taille resserrée. */
.com-breizh-description h2,
.com-breizh-description h3,
.com-breizh-description h4 {
  font-family: var(--bz-titre);
  font-size: 1.1rem;
  margin: 1.4em 0 0.4em;
}

/* Sur la liste d'un département la description suit le bandeau : elle est
   décalée pour ne pas coller au filet. */
.com-breizh-localites .com-breizh-description,
.com-breizh-departments .com-breizh-description {
  margin-top: -0.5rem;
}

/* --- Page commune : prose à gauche, fiche à droite -------------------------

   La fiche est placée AVANT la prose dans le DOM et repositionnée en colonne 2
   par la grille. C'est délibéré : le tableau « En bref » est ce que Google
   remonte en extrait enrichi et ce que les modèles de langue extraient en
   premier, il doit donc rester haut dans le document. Sur écran étroit, la
   grille s'effondre et l'ordre du DOM s'applique — les données d'abord, ce qui
   est aussi le bon ordre pour un visiteur mobile. */

.commune-corps {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 21rem;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

.commune-prose {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  max-width: var(--bz-mesure);
}

.commune-fiche {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  position: sticky;
  top: 1.5rem;
}

@media (max-width: 900px) {
  .commune-corps { grid-template-columns: minmax(0, 1fr); }

  .commune-prose,
  .commune-fiche {
    grid-column: 1;
    grid-row: auto;
    max-width: none;
  }

  /* Collante sur une seule colonne, la fiche resterait plaquée à l'écran en
     masquant la prose. */
  .commune-fiche { position: static; }
}

/* --- La fiche « En bref » -------------------------------------------------- */

.commune-fiche-carte {
  background: #fff;
  border: 1px solid var(--bz-ligne);
  border-radius: var(--bz-rayon);
  padding: 1.25rem 1.35rem;
}

.com-breizh-localite table.commune-data {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

/* La légende reste une vraie <caption> — c'est ce qui donne son sens au
   tableau pour un lecteur d'écran comme pour un extracteur. */
.com-breizh-localite table.commune-data caption {
  caption-side: top;
  text-align: left;
  padding: 0 0 0.85rem;
  font-family: var(--bz-titre);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--bz-encre);
}

.com-breizh-localite table.commune-data th,
.com-breizh-localite table.commune-data td {
  padding: 0.5rem 0;
  border: 0;
  border-bottom: 1px solid var(--bz-ligne);
  vertical-align: baseline;
  background: none;
}

.com-breizh-localite table.commune-data tr:last-child th,
.com-breizh-localite table.commune-data tr:last-child td {
  border-bottom: 0;
}

.com-breizh-localite table.commune-data th[scope="row"] {
  width: 45%;
  padding-right: 0.75rem;
  font-weight: 500;
  color: var(--bz-granit);
  text-align: left;
}

.com-breizh-localite table.commune-data td {
  font-family: var(--bz-donnees);
  font-variant-numeric: tabular-nums;
  font-size: 0.9rem;
}

/* Le nom breton et l'intercommunalité sont du texte, pas des chiffres. */
.com-breizh-localite table.commune-data td[lang="br"],
.com-breizh-localite table.commune-data td.commune-data-texte {
  font-family: inherit;
  font-size: 0.9375rem;
}

.commune-source {
  margin: 0.9rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--bz-granit);
}

.commune-source a { color: var(--bz-granit); }
.commune-source a:hover { color: var(--bz-glaz); }

/* --- Prose : les blocs question/réponse ------------------------------------ */

.com-breizh-localite .commune-prose h2 {
  font-family: var(--bz-titre);
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  font-weight: 700;
  line-height: 1.2;
  margin: 2.25rem 0 0.6rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--bz-ligne);
}

.com-breizh-localite .commune-prose > h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.com-breizh-localite .commune-prose h3 {
  font-family: var(--bz-titre);
  font-size: 1.0625rem;
  font-weight: 700;
  margin: 1.5rem 0 0.5rem;
}

.com-breizh-localite .commune-prose p { margin: 0 0 1em; line-height: 1.7; }

/* --- Tableau de contact de la mairie --------------------------------------- */

.com-breizh-localite table.commune-mairie {
  width: 100%;
  margin: 0 0 1rem;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.com-breizh-localite table.commune-mairie th,
.com-breizh-localite table.commune-mairie td {
  padding: 0.55rem 0;
  border: 0;
  border-bottom: 1px solid var(--bz-ligne);
  background: none;
  text-align: left;
  vertical-align: baseline;
}

.com-breizh-localite table.commune-mairie th[scope="row"] {
  width: 9rem;
  font-weight: 500;
  color: var(--bz-granit);
}

/* --- Sections pleine largeur ---------------------------------------------- */

.commune-section {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 2px solid var(--bz-encre);
}

.com-breizh-localite .commune-section > h2 {
  font-family: var(--bz-titre);
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight: 700;
  margin: 0 0 0.5rem;
}

.commune-section > p { max-width: var(--bz-mesure); }

/* --- Tableaux de listes (communes voisines, liste d'un département) -------- */

.com-breizh-tableau-enveloppe {
  overflow-x: auto;
  /* Indique qu'il reste du contenu à droite quand le tableau déborde. */
  background:
    linear-gradient(to right, var(--bz-fond) 30%, rgba(251, 250, 247, 0)) left center / 2.5rem 100% no-repeat,
    linear-gradient(to left, var(--bz-fond) 30%, rgba(251, 250, 247, 0)) right center / 2.5rem 100% no-repeat;
}

.com-breizh-localite table.commune-neighbours,
.com-breizh-localites table.com-breizh-liste {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-size: 0.9375rem;
  background: none;
}

.com-breizh-localite table.commune-neighbours thead th,
.com-breizh-localites table.com-breizh-liste thead th {
  padding: 0.6rem 0.75rem;
  border: 0;
  border-bottom: 2px solid var(--bz-encre);
  background: none;
  font-family: var(--bz-donnees);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bz-granit);
  text-align: left;
  white-space: nowrap;
}

.com-breizh-localite table.commune-neighbours tbody th,
.com-breizh-localite table.commune-neighbours tbody td,
.com-breizh-localites table.com-breizh-liste tbody th,
.com-breizh-localites table.com-breizh-liste tbody td {
  padding: 0.6rem 0.75rem;
  border: 0;
  border-bottom: 1px solid var(--bz-ligne);
  background: none;
  vertical-align: baseline;
  text-align: left;
  font-weight: 400;
}

/* Bootstrap raye une ligne sur deux ; ici la lisibilité vient des filets. */
.com-breizh-localite table.commune-neighbours tbody tr:nth-child(odd) > *,
.com-breizh-localites table.com-breizh-liste tbody tr:nth-child(odd) > * {
  background: none;
}

.com-breizh-localite table.commune-neighbours tbody tr:hover > *,
.com-breizh-localites table.com-breizh-liste tbody tr:hover > * {
  background: rgba(14, 125, 140, 0.06);
}

/* Les colonnes chiffrées sont alignées à droite et tabulaires : c'est ce qui
   rend une colonne de nombres comparable d'un coup d'œil. */
.com-breizh-nombre {
  text-align: right !important;
  font-family: var(--bz-donnees);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.com-breizh-liste-nom { font-weight: 500; }
.com-breizh-liste-nom a { text-decoration: none; }
.com-breizh-liste-nom a:hover { text-decoration: underline; }

.com-breizh-liste-brezhoneg {
  display: block;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--bz-granit);
}

/* --- Recherche dans une liste --------------------------------------------- */

.com-breizh-recherche {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.5rem;
}

.com-breizh-recherche input[type="search"],
.com-breizh-recherche input[type="text"] {
  flex: 1 1 16rem;
  min-width: 0;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--bz-ligne);
  border-radius: var(--bz-rayon);
  background: #fff;
  font: inherit;
  color: inherit;
}

.com-breizh-recherche input:focus {
  outline: 2px solid var(--bz-glaz);
  outline-offset: 1px;
  border-color: var(--bz-glaz);
}

/* --- Boutons -------------------------------------------------------------- */

.com-breizh-bouton {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--bz-glaz);
  border-radius: 999px;
  background: var(--bz-glaz);
  color: #fff;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}

.com-breizh-bouton:hover {
  background: var(--bz-glaz-fonce);
  border-color: var(--bz-glaz-fonce);
  color: #fff;
}

.com-breizh-bouton--fantome {
  background: transparent;
  color: var(--bz-glaz-fonce);
}

.com-breizh-bouton--fantome:hover {
  background: var(--bz-glaz);
  color: #fff;
}

.com-breizh-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1.5rem 0 0;
}

@media (prefers-reduced-motion: reduce) {
  .com-breizh-bouton { transition: none; }
}

/* --- Cartes d'entreprises ------------------------------------------------- */

.com-breizh-cartes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.com-breizh-carte {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.1rem;
  background: #fff;
  border: 1px solid var(--bz-ligne);
  border-radius: var(--bz-rayon);
}

.com-breizh-localite .com-breizh-carte h3 {
  font-family: var(--bz-titre);
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
}

.com-breizh-carte-activite {
  align-self: flex-start;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: var(--bz-sable);
  color: var(--bz-nuit);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.com-breizh-carte-adresse {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--bz-granit);
}

.com-breizh-carte .com-breizh-bouton { margin-top: auto; align-self: flex-start; }

/* --- Encart d'information (remplace .alert de Bootstrap) ------------------ */

.com-breizh-encart {
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--bz-ligne);
  border-left: 3px solid var(--bz-glaz);
  border-radius: var(--bz-rayon);
  background: rgba(14, 125, 140, 0.05);
}

.com-breizh-encart > :first-child { margin-top: 0; }
.com-breizh-encart > :last-child { margin-bottom: 0; }

/* --- FAQ ------------------------------------------------------------------ */

/* Les réponses restent visibles : un balisage FAQPage dont les réponses sont
   masquées est ignoré par Google, et peut être pénalisé. Pas d'accordéon. */
.commune-faq { max-width: var(--bz-mesure); }

.commune-faq-entree {
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--bz-ligne);
}

.commune-faq-entree:first-child { border-top: 1px solid var(--bz-ligne); }

.com-breizh-localite .commune-faq h3 {
  font-family: var(--bz-titre);
  font-size: 1.0625rem;
  font-weight: 700;
  margin: 0 0 0.4rem;
}

.commune-faq p { margin: 0; line-height: 1.7; }

/* --- Fil d'Ariane --------------------------------------------------------- */

.com-breizh-fil {
  margin: 0 0 1.25rem;
  font-size: 0.875rem;
}

.com-breizh-fil ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
  background: none;
}

.com-breizh-fil li { display: flex; align-items: center; gap: 0.4rem; }

.com-breizh-fil li + li::before {
  content: "/";
  color: var(--bz-granit);
}

.com-breizh-fil [aria-current="page"] { color: var(--bz-granit); }

/* --- Index : les cinq départements ---------------------------------------- */

.com-breizh-departements {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.com-breizh-departement {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--bz-rayon);
  background: var(--bz-nuit);
  color: #fff;
  text-decoration: none;
  isolation: isolate;
}

.com-breizh-departement img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  opacity: 0.55;
  transition: transform 400ms ease, opacity 400ms ease;
}

.com-breizh-departement:hover img { transform: scale(1.04); opacity: 0.42; }

/* Voile : garantit le contraste du texte quelle que soit la photo. */
.com-breizh-departement::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 30, 38, 0.92) 12%, rgba(0, 30, 38, 0.15) 75%);
  z-index: 1;
}

.com-breizh-departement-numero {
  position: absolute;
  top: 0.5rem;
  right: 0.9rem;
  z-index: 2;
  font-family: var(--bz-titre);
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1;
  color: rgba(255, 255, 255, 0.16);
  pointer-events: none;
}

.com-breizh-departement-texte {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: 1.1rem 1.2rem;
}

.com-breizh-departement-nom {
  display: block;
  font-family: var(--bz-titre);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
}

.com-breizh-departement-chiffres {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin: 0.4rem 0 0;
  font-family: var(--bz-donnees);
  font-size: 0.8125rem;
  color: var(--bz-sable);
}

.com-breizh-departement:hover .com-breizh-departement-nom { text-decoration: underline; }

.com-breizh-departement:focus-visible {
  outline: 3px solid var(--bz-glaz);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .com-breizh-departement img { transition: none; }
  .com-breizh-departement:hover img { transform: none; }
}

/* --- Bandeau de totaux régionaux ----------------------------------------- */

.com-breizh-totaux {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1px;
  margin: 2.5rem 0 0;
  padding: 0;
  background: var(--bz-ligne);
  border: 1px solid var(--bz-ligne);
  border-radius: var(--bz-rayon);
  overflow: hidden;
}

.com-breizh-totaux > div {
  margin: 0;
  padding: 1.25rem;
  background: #fff;
  text-align: center;
}

.com-breizh-totaux dt {
  font-family: var(--bz-donnees);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bz-granit);
}

.com-breizh-totaux dd {
  margin: 0.3rem 0 0;
  font-family: var(--bz-titre);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--bz-encre);
}

/* --- Pagination ---------------------------------------------------------- */

.com-breizh-pagination { margin: 2rem 0 0; }

.com-breizh-pagination ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.com-breizh-pagination a,
.com-breizh-pagination span {
  display: inline-block;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--bz-ligne);
  border-radius: 6px;
  text-decoration: none;
  font-size: 0.875rem;
}

.com-breizh-pagination a:hover { border-color: var(--bz-glaz); color: var(--bz-glaz-fonce); }

/* --- Impression ---------------------------------------------------------- */

@media print {
  .commune-corps { display: block; }
  .commune-fiche { position: static; margin-bottom: 1.5rem; }
  .commune-fiche-carte { border: 1px solid #999; }
  .com-breizh-actions,
  .com-breizh-recherche,
  .com-breizh-cartes { display: none; }
  .com-breizh-description { border-left-color: #999; }
}