/*
 * Annuaire : fiche et archive.
 * Tout passe par les jetons de assets/css/jetons.css. Aucune couleur en dur ici :
 * c'est ce qui rend le theme sombre possible sans reecrire une regle.
 *
 * REPRISE DU THEME DE 2020, indispensable : trois regles du theme cassent ces
 * gabarits, et aucune n'est visible dans le code des gabarits eux-memes.
 *   header  position: fixed, min-height 89px  -> le H1 passait SOUS l'en-tete
 *   section margin: 60px 0 90px               -> s'ajoutait au padding, 310px de vide
 *   h1, h2  text-transform: uppercase         -> titres de fiches en capitales
 * Elles sont neutralisees ici, sur le perimetre de l'annuaire uniquement, tant que
 * style.css n'est pas refondu.
 *
 * Le perimetre tient a UNE classe de corps, `.hh-annuaire`, posee par
 * `huitreshossegor_classe_annuaire()` sous la meme condition qui enfile cette
 * feuille. Elle a remplace le trio `.post-type-archive-etablissements` /
 * `.tax-hh_region` / `.single-etablissements` recopie a la main : quand les
 * pages de type sont arrivees, `.tax-hh_type` n'a ete ajoute a aucune des
 * quinze listes, et ces pages ont servi le theme de 2020 nu -- H1 en capitales
 * sous l'en-tete fixe -- sans qu'aucun test ne le dise. Ne pas reintroduire de
 * classe de gabarit ici : ajouter la condition dans la fonction.
 */

/* --- reprise des regles du theme, perimetre annuaire --- */

.hh-annuaire section {
  margin: 0;
}

/* compensation de l'en-tete fixe */
.hh-annuaire .annuaire-entete,
.hh-annuaire .fiche {
  padding-top: calc(var(--header-h) + 2.5rem);
}

/* le fond du site reste en dur dans style.css : sans ca, le mode sombre servait
   des cartes sombres sur un fond blanc. */
.hh-annuaire {
  background: var(--ground);
}

.hh-annuaire .annuaire-entete h1,
.hh-annuaire .fiche-lieu h1,
.lieu-carte h2 {
  text-transform: none;
  text-align: left;
  font-weight: 600;
}


.fiche { padding-block: var(--section); }
.annuaire-liste { padding-block: 0 var(--section); }
.fiche .container { max-width: 960px; }

.fiche-fil {
  font-family: var(--font-data);
  font-size: var(--step--1);
  color: var(--ink-3);
  margin: 0 0 .75rem;
  letter-spacing: .02em;
}
.fiche-fil a { color: var(--ink-3); text-decoration: none; border-bottom: 1px solid var(--rule); }
.fiche-fil a:hover { color: var(--accent); border-color: var(--accent); }
.fiche-fil span { margin: 0 .4rem; color: var(--rule); }

.fiche-lieu h1 {
  font-family: var(--font-titre);
  font-size: var(--step-3);
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 .4rem;
  text-transform: none;
  text-align: left;
}

.fiche-lieu-dit {
  font-size: var(--step-1);
  color: var(--ink-2);
  margin: 0 0 1.5rem;
}
.fiche-dep {
  font-family: var(--font-data);
  font-size: .78rem;
  padding: .2rem .45rem;
  color: var(--ink-3);
  background: var(--surface);
  border-radius: 3px;
  vertical-align: .12em;
}

.fiche-verifiee {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--accent-2);
  background: var(--accent-soft);
  padding: .5rem .9rem;
  border-radius: var(--radius);
  margin: 0 0 1.5rem;
}

/* ---- actions ---- */

.fiche-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin: 0 0 2rem;
}
.bouton {
  display: inline-flex;
  align-items: center;
  font-size: var(--step-0);
  line-height: 1;
  padding: .8rem 1.3rem;
  border-radius: var(--radius);
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.bouton-plein { background: var(--accent); color: var(--on-accent); }
.bouton-plein:hover { background: var(--accent-hover); color: var(--on-accent); }
.bouton-contour { border-color: var(--rule); color: var(--accent-2); background: transparent; }
.bouton-contour:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

/* ---- donnees ---- */

.fiche-donnees {
  display: grid;
  grid-template-columns: minmax(7rem, 9.5rem) 1fr;
  gap: 0 1.5rem;
  margin: 0 0 2rem;
  border-top: 1px solid var(--rule-soft);
}
.fiche-donnees dt {
  font-family: var(--font-data);
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-3);
  padding: .85rem 0;
  border-bottom: 1px solid var(--rule-soft);
}
.fiche-donnees dd {
  margin: 0;
  padding: .85rem 0;
  color: var(--ink);
  border-bottom: 1px solid var(--rule-soft);
  overflow-wrap: anywhere;
}
.fiche-donnees a { color: var(--accent-2); text-decoration: none; border-bottom: 1px solid currentColor; }
.fiche-donnees a:hover { color: var(--accent-hover); }

.fiche-texte { color: var(--ink); line-height: 1.7; margin: 0 0 2rem; }

/* ---- carte, en facade : rien n'est charge avant le clic ---- */

.fiche-carte { margin: 0; }
.fiche-carte figcaption {
  font-size: var(--step--1);
  color: var(--ink-3);
  margin-top: .6rem;
}
.carte-cadre {
  position: relative;
  aspect-ratio: 16 / 9;
  max-width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--surface);
  z-index: 0;                 /* Leaflet pose ses calques en z-index eleve */
}
.carte-source { display: block; color: var(--ink-3); font-size: .78rem; margin-top: .15rem; }

/* La carte est un bloc a part entiere : elle a son titre et sa respiration,
   elle ne se colle pas au tableau des horaires. */
.fiche-bloc-carte { margin-top: 3.25rem; }
.fiche-bloc h2 { text-indent: 0; padding-left: 0; }
.fiche-bloc + .fiche-bloc { margin-top: 3.25rem; }

/* --- habillage de Leaflet aux jetons du site --- */

.carte-cadre.leaflet-container {
  font-family: var(--font-texte);
  background: var(--surface);
}
.carte-marqueur { background: none; border: 0; filter: drop-shadow(0 2px 3px rgba(0, 35, 61, .35)); }

/* Le STYLE de la carte.
   Les tuiles OpenStreetMap sont vives et chargees. Le filtre les ramene a un
   gris-beige neutre : la carte devient un FOND, le marqueur bleu du site
   redevient le seul element qui accroche l'oeil. Le premier reglage essaye
   (saturate .62) etait applique mais invisible : trop timide pour se voir.
   Le filtre ne touche QUE le calque de tuiles ; marqueur, commandes et
   attribution gardent leurs couleurs. */
.carte-cadre .leaflet-tile-pane {
  filter: grayscale(.70) saturate(.55) brightness(1.08) contrast(.88);
}

.carte-cadre .leaflet-control-zoom {
  border: 0;
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  overflow: hidden;
}
.carte-cadre .leaflet-control-zoom a {
  color: var(--ink-2);
  background: var(--ground);
  border-color: var(--rule-soft);
  font-weight: 400;
  width: 30px;
  height: 30px;
  line-height: 30px;
}
.carte-cadre .leaflet-control-zoom a:hover { color: var(--accent); background: var(--surface-2); }
.carte-cadre .leaflet-control-attribution {
  font-size: .68rem;
  color: var(--ink-3);
  background: rgba(255, 255, 255, .82);
}
.carte-cadre .leaflet-control-attribution a { color: var(--ink-2); }

/* ---- archive ---- */

.annuaire-entete { padding-block: var(--section) 0; }
.annuaire-entete .container { max-width: var(--wrap); }
.annuaire-entete h1 { font-family: var(--font-titre); font-size: var(--step-4); color: var(--ink); margin: 0 0 .5rem; }
.annuaire-intro { font-size: var(--step-1); color: var(--ink-2); max-width: var(--wrap-narrow); line-height: 1.5; margin: 0 0 .75rem; }
.annuaire-compte { font-family: var(--font-data); font-size: var(--step--1); color: var(--ink-3); margin: 0; }

.annuaire-regions { padding-block: 1.25rem 1.75rem; }
.annuaire-regions .container { max-width: var(--wrap); }
.annuaire-regions ul { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 0; }
.annuaire-regions a {
  display: inline-block;
  font-size: var(--step--1);
  padding: .4rem .85rem;
  color: var(--ink-2);
  background: var(--surface);
  border-radius: var(--radius);
  text-decoration: none;
}
.annuaire-regions a:hover { background: var(--accent); color: var(--on-accent); }

.annuaire-liste .container { max-width: var(--wrap); }
.annuaire-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr));
  gap: 1.25rem;
}

/* La carte entiere est cliquable, sans imbriquer de lien dans un lien :
   une zone en pseudo-element couvre la carte, le titre reste le lien reel. */
.lieu-carte {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface-2);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  padding: 1.15rem 1.25rem 1rem;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.lieu-carte:hover,
.lieu-carte:focus-within {
  border-color: var(--accent);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.lieu-lien { text-decoration: none; }
.lieu-lien-zone { position: absolute; inset: 0; border-radius: var(--radius); }
.lieu-lien:focus-visible .lieu-lien-zone { outline: 2px solid var(--accent); outline-offset: 2px; }

.lieu-carte h2 {
  text-indent: 0;
  padding-left: 0;
  font-family: var(--font-titre);
  font-size: var(--step-0);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  margin: 0 0 .3rem;
  text-transform: none;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.lieu-carte:hover h2 { color: var(--accent); }

.lieu-commune {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--step--1);
  color: var(--ink-2);
  margin: 0 0 1rem;
}
.lieu-dep {
  font-family: var(--font-data);
  font-size: .72rem;
  line-height: 1;
  padding: .25rem .4rem;
  color: var(--ink-3);
  background: var(--surface);
  border-radius: 3px;
  letter-spacing: .03em;
}

/* Le pied reste colle en bas : les cartes d'une meme rangee s'alignent
   quel que soit le nombre de lignes du titre. */
.lieu-pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: auto;
  padding-top: .8rem;
  border-top: 1px solid var(--rule-soft);
}

.lieu-note {
  display: flex;
  align-items: baseline;
  gap: .4rem;
  margin: 0;
  font-size: var(--step--1);
  color: var(--ink-2);
}
.lieu-note strong { font-size: var(--step-0); color: var(--ink); font-weight: 600; }
.lieu-etoile { color: var(--etoile); font-size: var(--step-0); line-height: 1; }
.lieu-avis { color: var(--ink-3); }

.lieu-verifie {
  margin: 0;
  font-size: .78rem;
  font-weight: 600;
  color: var(--accent-2);
  white-space: nowrap;
}

.annuaire-vide { color: var(--ink-2); font-size: var(--step-0); }

@media (max-width: 640px) {
  .fiche-donnees { grid-template-columns: 1fr; gap: 0; }
  .fiche-donnees dt { padding-bottom: 0; border-bottom: 0; }
}

/* L'en-tete et le pied du theme portent leurs couleurs en dur dans style.css.
   Tant que style.css n'est pas refondu, on les accorde au moins sur l'annuaire,
   sans quoi le mode sombre sert une bande blanche au-dessus d'une page sombre,
   puis un menu gris fonce sur bleu nuit, illisible. */
.hh-annuaire .header-main {
  background: var(--surface);
  border-bottom: 1px solid var(--rule-soft);
}
.hh-annuaire .header-main a,
.hh-annuaire .header-main li a,
.hh-annuaire .header-main .menu-item a {
  color: var(--ink);
}
.hh-annuaire .header-main a:hover { color: var(--accent); }

/* ---- pagination ----
   Celle du theme deborde a 400 px : 410 px de large dans 400 px de visible,
   parce que la liste ne passe jamais a la ligne. */
.hh-annuaire .page-numbers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .4rem;
  list-style: none;
  max-width: 100%;
  margin: 2.5rem 0 0;
  padding: 0;
}
.hh-annuaire .page-numbers li { margin: 0; }
.hh-annuaire .page-numbers a,
.hh-annuaire .page-numbers span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.4rem;
  height: 2.4rem;
  padding: 0 .55rem;
  font-family: var(--font-data);
  font-size: var(--step--1);
  color: var(--ink-2);
  background: var(--surface-2);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  text-decoration: none;
}
.hh-annuaire .page-numbers a:hover {
  color: var(--accent);
  border-color: var(--accent);
}
.hh-annuaire .page-numbers .current {
  color: var(--on-accent);
  background: var(--accent);
  border-color: var(--accent);
  font-weight: 600;
}

/* ---- etiquettes de type et de prix ---- */

.fiche-etiquettes {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 0 0 1.5rem;
}
.etiquette {
  font-size: var(--step--1);
  line-height: 1;
  padding: .4rem .7rem;
  color: var(--ink-2);
  background: var(--surface);
  border-radius: 999px;
}
.etiquette-type { color: var(--on-accent); background: var(--accent); font-weight: 600; }
.etiquette-prix { font-family: var(--font-data); color: var(--ink); background: var(--surface-2); border: 1px solid var(--rule); }

/* ---- blocs de la fiche ---- */

.fiche-bloc { margin: 0 0 2rem; }
.fiche-bloc h2 {
  font-family: var(--font-titre);
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--ink);
  text-transform: none;
  text-align: left;
  margin: 0 0 .85rem;
}
.fiche-note-source {
  font-size: var(--step--1);
  color: var(--ink-3);
  line-height: 1.5;
  margin: .7rem 0 0;
}

/* ---- horaires ---- */

.fiche-horaires {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step-0);
}
.fiche-horaires th,
.fiche-horaires td {
  padding: .55rem 0;
  border-bottom: 1px solid var(--rule-soft);
  text-align: left;
  vertical-align: baseline;
}
.fiche-horaires th {
  width: 9rem;
  font-weight: 400;
  color: var(--ink-2);
}
.fiche-horaires td { font-family: var(--font-data); font-size: var(--step--1); color: var(--ink); }
.fiche-horaires .ferme { color: var(--ink-3); font-family: var(--font-texte); font-size: var(--step-0); }
.fiche-horaires .sep { color: var(--rule); }
.fiche-horaires .jour-courant th { font-weight: 600; color: var(--accent); }
.fiche-horaires .jour-courant td { font-weight: 600; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

@media (max-width: 480px) {
  .fiche-horaires th { width: 6.5rem; }
}

/* ---- fiche : mise en page en sections ---- */

.fiche-chapeau {
  font-size: var(--step-1);
  color: var(--ink-2);
  margin: 0 0 1rem;
}

.fiche-entete .fiche-etiquettes { margin-bottom: 1.25rem; }
.etiquette-note {
  display: inline-flex;
  align-items: baseline;
  gap: .35rem;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--rule);
  font-weight: 600;
}
.etiquette-note .lieu-avis { font-weight: 400; color: var(--ink-3); }

/* Coordonnees et horaires cote a cote sur large, empiles sous 860 px.
   Les deux blocs sont courts : les mettre l'un sous l'autre etirait la page
   sans rien apporter. */
.fiche-colonnes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem 3rem;
  align-items: start;
  margin: 2.5rem 0 0;
}
.fiche-colonnes .fiche-bloc { margin: 0; }

.fiche-donnees { margin-bottom: 0; }

/* ---- voisins : le maillage du 8.1, pose dans le GABARIT ---- */

.voisins-liste {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: .6rem;
  padding: 0;
  margin: 0;
}
.voisins-liste a {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: .7rem .9rem;
  background: var(--surface-2);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  text-decoration: none;
  transition: border-color .15s ease;
}
.voisins-liste a:hover { border-color: var(--accent); }
.voisin-nom { color: var(--ink); font-weight: 600; font-size: var(--step-0); line-height: 1.3; }
.voisins-liste a:hover .voisin-nom { color: var(--accent); }
.voisin-meta { color: var(--ink-3); font-size: var(--step--1); }

.fiche-note-source a { color: var(--accent-2); }

@media (max-width: 860px) {
  .fiche-colonnes { grid-template-columns: 1fr; gap: 2.25rem; }
}

/* Repli de carte : visible tant que Leaflet n'a pas pris la main.
   Un cadre vide ne dit rien ; ici le visiteur a toujours l'adresse et deux liens. */
.carte-repli {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: 1.5rem;
  text-align: center;
  background: repeating-linear-gradient(45deg, var(--surface) 0 14px, var(--surface-2) 14px 28px);
}
.carte-repli-adresse { margin: 0; color: var(--ink); font-size: var(--step-0); }
.carte-repli-liens { margin: 0; display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }
.carte-repli-liens a {
  color: var(--accent-2);
  font-size: var(--step--1);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.carte-repli-liens a:hover { color: var(--accent-hover); }

/* ---- carte de region ---- */

.annuaire-carte { padding-block: 0 1.75rem; }
.annuaire-carte .container { max-width: var(--wrap); }
.carte-region {
  aspect-ratio: 21 / 9;
  min-height: 320px;
}

/* Le format du cadre decide du zoom : fitBounds cadre sur la dimension la plus
   contraignante. La France metropolitaine est plus HAUTE que large une fois
   projetee (environ 920 km sur 1 110 km). Plutot que de retrecir le cadre, ce
   qui laissait du vide de chaque cote, la carte prend toute la largeur et le
   cote droit recoit la repartition par region : la France se cadre a gauche,
   l'espace restant sert a quelque chose. */
.carte-region-france { aspect-ratio: 16 / 9; }

.carte-enveloppe { position: relative; }

.carte-repartition {
  position: absolute;
  top: 1rem;
  right: 1rem;
  bottom: auto;              /* la liste fait sa hauteur, elle ne s'etire pas */
  max-height: calc(100% - 2rem);
  width: 16.5rem;
  display: flex;
  flex-direction: column;
  padding: .9rem;
  background: color-mix(in srgb, var(--ground) 92%, transparent);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  z-index: 500;              /* au-dessus des calques Leaflet */
}
.repartition-titre {
  margin: 0 0 .5rem;
  font-family: var(--font-data);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-3);
}
.carte-repartition ul {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  flex: 1;
}
.repartition-ligne {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  width: 100%;
  padding: .4rem .45rem;
  border: 0;
  border-radius: 3px;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--step--1);
  color: var(--ink-2);
  text-align: left;
}
.repartition-ligne:hover { background: var(--surface); color: var(--accent); }
.repartition-ligne:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.repartition-ligne.est-active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.repartition-nombre { font-family: var(--font-data); color: var(--ink-3); }
.repartition-ligne.est-active .repartition-nombre { color: var(--accent); }

/* Sous 900 px le panneau ne peut plus flotter : il passe sous la carte,
   et le cadrage retire sa marge (voir data-marge-droite dans carte-region.js). */
@media (max-width: 900px) {
  .carte-repartition {
    position: static;
    width: auto;
    margin-top: .75rem;
    box-shadow: none;
  }
  .carte-repartition ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: .15rem .5rem;
    overflow: visible;
  }
}
.carte-region .leaflet-tile-pane {
  filter: grayscale(.70) saturate(.55) brightness(1.08) contrast(.88);
}
.carte-bulle .leaflet-popup-content-wrapper {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: var(--ground);
}
.carte-bulle .leaflet-popup-content { margin: .7rem .9rem; line-height: 1.4; }
.carte-bulle .leaflet-popup-tip { background: var(--ground); }
.bulle-nom {
  display: block;
  font-family: var(--font-titre);
  font-size: var(--step-0);
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}
.bulle-nom:hover { text-decoration: underline; }
.bulle-com { display: block; color: var(--ink-2); font-size: var(--step--1); }
.bulle-note { display: block; color: var(--ink-3); font-size: var(--step--1); font-family: var(--font-data); }

/* ---- filtre de liste ---- */

.annuaire-filtre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem 1rem;
  margin: 0 0 1.75rem;
}
.annuaire-filtre label {
  font-size: var(--step--1);
  color: var(--ink-2);
}
.annuaire-filtre input[type="search"] {
  flex: 1 1 18rem;
  max-width: 26rem;
  font-family: inherit;
  font-size: var(--step-0);
  padding: .65rem .9rem;
  color: var(--ink);
  background: var(--ground);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.annuaire-filtre input[type="search"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
.filtre-compte {
  margin: 0;
  font-family: var(--font-data);
  font-size: var(--step--1);
  color: var(--ink-3);
}

@media (max-width: 640px) {
  .carte-region { aspect-ratio: 4 / 3; }
}

/* Le nom dans une bulle de carte est un BOUTON, pas un lien : il ne doit pas
   en avoir l'air moins pour autant. */
button.bulle-nom {
  display: block;
  width: 100%;
  padding: 0;
  text-align: left;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--font-titre);
  font-size: var(--step-0);
  font-weight: 600;
  color: var(--accent);
}
button.bulle-nom:hover { text-decoration: underline; }
button.bulle-nom:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- filtre : recherche + type ---- */

.annuaire-filtre {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .75rem 1.5rem;
}
.filtre-champ { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }

.filtre-types {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  border: 0;
  margin: 0;
  padding: 0;
}
.filtre-types legend {
  float: left;
  width: 100%;
  font-size: var(--step--1);
  color: var(--ink-2);
  padding: 0;
  margin: 0 0 .35rem;
}
.filtre-types label {
  font-size: var(--step--1);
  line-height: 1;
  padding: .45rem .8rem;
  color: var(--ink-2);
  background: var(--surface-2);
  border: 1px solid var(--rule-soft);
  border-radius: 999px;
  cursor: pointer;
}
.filtre-types label:hover { border-color: var(--accent); color: var(--accent); }
.filtre-types input { position: absolute; opacity: 0; width: 0; height: 0; }
.filtre-types label:has(input:checked) {
  color: var(--on-accent);
  background: var(--accent);
  border-color: var(--accent);
  font-weight: 600;
}
.filtre-types label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- regroupement de marqueurs ---- */

/* `.leaflet-marker-icon` porte `display: block` et leaflet.css est charge APRES
   cette feuille : a specificite egale, c'est lui qui gagnait et le nombre se
   collait en haut du disque. On monte d'un cran en accolant les deux classes. */
.leaflet-marker-icon.carte-amas {
  display: flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  font-family: var(--font-data);
  font-size: .78rem;
  font-weight: 600;
  color: var(--on-accent);
  border-radius: 50%;
  border: 2px solid var(--ground);
  box-shadow: 0 1px 4px rgba(0, 35, 61, .35);
  transition: transform .12s ease;
}
.leaflet-marker-icon.carte-amas:hover { transform: scale(1.08); }
.leaflet-marker-icon.carte-amas-petit { background: var(--accent-2); }
.leaflet-marker-icon.carte-amas-moyen { background: var(--accent); }
.leaflet-marker-icon.carte-amas-grand { background: var(--accent-hover); font-size: .84rem; }

/* le halo par defaut de la bibliotheque jure avec la charte */
.marker-cluster,
.marker-cluster div { background: none !important; }

/* --- navigation par bassin --- */

/* Le bassin est la maille de la recherche : « Bouzigues » se cherche 2 900 fois
   par mois, « huitres Occitanie » jamais. Cette barre descend d'un cran depuis
   une region, et se deplace lateralement depuis un bassin. */
.annuaire-bassins {
  padding-block: 1rem 0;
}
.annuaire-bassins-titre {
  margin: 0 0 .6rem;
  font-family: var(--font-data);
  font-size: var(--step--1);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.annuaire-bassins ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.annuaire-bassins a {
  display: inline-flex;
  align-items: baseline;
  gap: .5rem;
  padding: .45rem .8rem;
  border: 1px solid var(--rule-soft);
  border-radius: 999px;
  background: var(--ground);
  color: var(--ink-2);
  font-size: var(--step--1);
  text-decoration: none;
}
.annuaire-bassins a:hover,
.annuaire-bassins a:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}
.bassin-nombre {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--ink-3);
}
.annuaire-bassins a:hover .bassin-nombre { color: var(--accent); }

/* La region d'ou vient le bassin, reperee dans la barre des regions. */
.annuaire-regions a.region-du-bassin {
  border-color: var(--accent);
  color: var(--accent);
}

/* --- provenance d'une fiche --- */

/* Un annuaire qui affirme une note, des horaires et une adresse doit dire ou
   il les a prises. Le bloc est discret -- ce n'est pas le sujet de la page --
   mais il est la sur chacune des 1 914 fiches. */
.fiche-provenance {
  margin-top: 2rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.fiche-provenance h2 {
  margin: 0 0 .5rem;
  font-size: var(--step-0);
  color: var(--ink-2);
}
.fiche-provenance p {
  margin: 0 0 .4rem;
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--ink-3);
}
.fiche-provenance p:last-child { margin-bottom: 0; }
.fiche-provenance a { color: var(--accent-2); }

/* --- horaires du jour sur une carte --- */

/* Mesure Search Console d'aout 2026 : « cabanes a huitres hossegor horaires »
   fait 195 impressions par mois a la position 9,42, avec 1 % de clics. Les
   gens veulent savoir quand c'est ouvert, et le site ne le disait nulle part
   avant d'ouvrir une fiche.

   La ligne est ECRITE PAR LE NAVIGATEUR : la page est en cache, le serveur ne
   sait pas quel jour on est au moment de la visite. */
.lieu-horaires {
  margin: .4rem 0 0;
  font-size: var(--step--1);
  line-height: 1.4;
  color: var(--ink-3);
}

.lieu-horaires-jour {
  font-family: var(--font-data);
  font-size: .8em;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Ouvert a l'instant : le seul endroit du site ou le vert sert a quelque
   chose. Le point precede le texte pour que l'information ne tienne pas
   uniquement a la couleur. */
.lieu-ouvert {
  color: var(--ink-2);
}

.lieu-ouvert .lieu-horaires-jour::after {
  content: ' • ouvert';
  color: #1a7f4f;
  font-weight: 600;
}