body {
  font-family: var(--font-sans);
  color: var(--text);
  background-color: var(--bg);
}


/* Masque le titre technique du node sur la page d'accueil uniquement —
   c'est le titre du Hero (H1) qui sert de vrai titre visible. */
.path-frontpage .page-title {
  display: none;
}


/* pastilles de quartiers — purement décoratif, aria-hidden */

/* ---------- Icônes SVG inline — règle de base MANQUANTE ----------
   Sans ceci, toutes les icônes du sprite (#i-star, #i-pin, #i-trophy...)
   restent noires par défaut (comportement natif SVG), quelle que soit
   la couleur appliquée par ailleurs sur .pin, .stat-card, etc.
   À ajouter dans base.css ou components.css. */
.icon{
  width:1em; height:1em;
  fill:none; stroke:currentColor;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
  vertical-align:-0.15em;
}
/* pour les icônes dessinées "pleines" dans le sprite (étoile, cochon,
   trophée, coeur du calendrier — celles dont un <path>/<circle> porte
   déjà class="icon-fill" dans le SVG) */
.icon-fill{ fill:currentColor; stroke:none; }

/* le pin (marqueur de carte) est un pictogramme plein, pas un contour :
   on force fill:currentColor spécifiquement pour lui, sans toucher au
   style des autres icônes du site qui restent en contour */
.pin-cluster .pin svg{ fill:currentColor; stroke:none; }


.pin-cluster{ position:relative; height:340px; }
.pin-cluster .pin{
  position:absolute; display:flex; align-items:center; gap:.45rem;
  background:var(--surface); border:1.5px solid transparent;
  color:var(--text); font-size:.74rem; font-weight:800; white-space:nowrap;
  padding:.3rem .7rem .3rem .3rem; border-radius:999px;
  box-shadow:0 5px 14px rgba(0,60,121,.14);
}
.pin-cluster .pin svg{
  width:1.5em; height:1.5em; flex-shrink:0; padding:.32em;
  border-radius:50%; box-sizing:content-box;
}

/* 4 familles de couleurs qui tournent — icône + bulle teintée + liseré assorti
   (sélecteur renforcé avec .pin-cluster pour gagner sur toute règle .pin svg
   plus générique, quel que soit son ordre de chargement) */
.pin-cluster .pin:nth-of-type(4n+1){ border-color:rgba(30,142,90,.25); }
.pin-cluster .pin:nth-of-type(4n+1) svg{ color:var(--accent); background:rgba(30,142,90,.12); }

.pin-cluster .pin:nth-of-type(4n+2){ border-color:rgba(201,74,46,.25); }
.pin-cluster .pin:nth-of-type(4n+2) svg{ color:#C94A2E; background:rgba(201,74,46,.12); }

.pin-cluster .pin:nth-of-type(4n+3){ border-color:rgba(0,60,121,.2); }
.pin-cluster .pin:nth-of-type(4n+3) svg{ color:var(--primary); background:rgba(0,60,121,.1); }

.pin-cluster .pin:nth-of-type(4n+4){ border-color:rgba(201,122,0,.25); }
.pin-cluster .pin:nth-of-type(4n+4) svg{ color:#C97A00; background:rgba(201,122,0,.12); }

/* légère rotation alternée façon petites étiquettes posées à la main */


.pin-cluster .pin.p1{ top:1%;  left:8%; }
.pin-cluster .pin.p2{ top:16%; left:52%; }
.pin-cluster .pin.p3{ top:4%;  left:76%; }
.pin-cluster .pin.p4{ top:30%; left:24%; }
.pin-cluster .pin.p5{ top:40%; left:66%; }
.pin-cluster .pin.p6{ top:52%; left:4%; }
.pin-cluster .pin.p7{ top:58%; left:40%; }
.pin-cluster .pin.p8{ top:72%; left:60%; }
.pin-cluster .pin.p9{ top:14%; left:34%; }
.pin-cluster .pin.p10{ top:46%; left:86%; }
.pin-cluster .pin.p11{ top:80%; left:14%; }
.pin-cluster .pin.p12{ top:92%; left:38%; }

@media (prefers-reduced-motion: no-preference){
  .pin-cluster .pin{ animation:bob 3.6s ease-in-out infinite; }
  .pin-cluster .pin:nth-of-type(odd){ animation-name:bob-left; }
  .pin-cluster .pin:nth-of-type(even){ animation-name:bob-right; }
  .pin-cluster .pin:nth-of-type(3n+1){ animation-delay:.3s; }
  .pin-cluster .pin:nth-of-type(3n+2){ animation-delay:.9s; }
  .pin-cluster .pin:nth-of-type(3n+3){ animation-delay:1.4s; }
  @keyframes bob-left{ 0%,100%{ transform:rotate(-2deg) translateY(0); } 50%{ transform:rotate(-2deg) translateY(-6px); } }
  @keyframes bob-right{ 0%,100%{ transform:rotate(2deg) translateY(0); } 50%{ transform:rotate(2deg) translateY(-6px); } }
}


/* Drupal entoure les valeurs insérées (%email…) de <em class="placeholder"> ;
   Bootstrap 5 utilise .placeholder pour ses squelettes de chargement. */
em.placeholder{
  display:inline;
  min-height:0;
  vertical-align:baseline;
  cursor:auto;
  background:none;
  opacity:1;
  color:var(--text);
  font-weight:600;
}
/* Pages de confirmation Drupal / Simplenews : boutons alignés,
   « Annuler » (lien) en style secondaire. */
form[id^="simplenews-confirm"] .form-actions{
  display:flex;
  align-items: flex-end;
  gap:1rem;
  flex-wrap:wrap;
}
form[id^="simplenews-confirm"] .form-actions a{
  color:var(--primary);
  background:transparent;
  border:1px solid var(--primary);
  border-radius:var(--radius-sm);
  font-weight:600;
}
form[id^="simplenews-confirm"] .form-actions a:hover,
form[id^="simplenews-confirm"] .form-actions a:focus-visible{
  background:var(--primary);
  border-color:var(--primary);
  color:#fff;
}