/* ────────────────────────────────────────────────────────────────────
   city-detail.css — Styles spécifiques à la page City Detail.
   
   Précédemment dans <style> inline de core_city_detail.html (667 lignes).
   Extraction pour bénéficier du cache navigateur entre pages City Detail.
   
   Chargé via <link> dans le {% block extra_head %} de core_city_detail.html.
   ──────────────────────────────────────────────────────────────────── */

/* Hero header — layout centré aéré, inspiré de la page "La chasse aux blobs" :
   eyebrow + flag, gros titre serif au centre, sub centré, KPIs centrés et
   CTA pill centré. Watermark blob discret à droite. Tout sur fond gris cool.
   La mini-map en dessous reste dans le même bloc gris pour intégration. */
.cd-hero {
  position: relative;
  background: #F5F5F5;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-8);
  overflow: hidden;
}
.cd-hero-band {
  position: relative;
  padding: 64px var(--space-10) 48px;
  text-align: center;
}
.cd-hero-blob {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
.cd-hero-blob--1 {
  right: -40px; top: 50%;
  transform: translateY(-50%);
  opacity: .08;
}
.cd-hero-blob--2 {
  left: -50px;
  top: 30px;
  transform: rotate(-18deg);
  opacity: .06;
}
.cd-hero-blob--3 {
  left: 20%;
  bottom: -60px;
  transform: rotate(12deg);
  opacity: .05;
}
.cd-hero-blob--4 {
  right: 28%;
  top: -30px;
  transform: rotate(28deg);
  opacity: .05;
}
.cd-hero-main {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
}
.cd-hero-pays {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 14px;
}
.cd-hero-pays .eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--color-text-soft);
}
.cd-hero-name {
  font-family: var(--font-serif);
  font-size: clamp(40px, 6vw, 60px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.02em;
  margin: 0 0 12px;
}
.cd-hero-name em { font-style: italic; }

.cd-hero-stats {
  display: flex;
  justify-content: center;
  gap: var(--space-10);
  margin-top: 24px;
}
.cd-hero-stats .stat-n {
  font-family: var(--font-serif);
  font-size: 30px; font-weight: 700;
  line-height: 1;
}
.cd-hero-stats .stat-l {
  font-size: 11px; font-weight: 700;
  color: #BBB; text-transform: uppercase;
  letter-spacing: .08em;
  margin-top: 5px;
}

/* Sub + CTA centrés en colonne, juste sous les stats */
.cd-hero-meta {
  position: relative;
  z-index: 1;
  max-width: 540px;
  margin: 28px auto 0;
  text-align: center;
}
.cd-hero-sub {
  font-size: 17px;
  color: #333;
  font-weight: 450;
  line-height: 1.55;
  margin: 0 0 22px;
}
.cd-hero-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px 11px 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  background: #fff;
  border: 1.5px solid var(--color-text);
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s, color .15s, gap .15s;
}
.cd-hero-link svg {
  width: 14px; height: 14px;
  transition: transform .15s;
}
.cd-hero-link:hover {
  background: var(--color-text);
  color: #fff;
  gap: 12px;
}
.cd-hero-link:hover svg { transform: translateX(2px); }

/* Row qui groupe les 2 CTAs hero (Voir les parcours + La chasse aux blobs).
   Centré, gap confortable. Wrap sur petits écrans pour pas que les pills
   débordent (passage en colonne). */
.cd-hero-cta-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Variante "primaire" : fond noir plein. Pour l'action principale du hero
   (Voir les parcours) — La chasse aux blobs reste en outline secondary. */
.cd-hero-link--primary {
  background: var(--color-text);
  color: #fff;
}
.cd-hero-link--primary:hover {
  background: #000;
  color: #fff;
  border-color: #000;
}

@media (max-width: 768px) {
  .cd-hero { padding-bottom: 20px; }
  .cd-hero-band { padding: 40px var(--space-4) 28px; }
  .cd-hero-name { font-size: 32px; }
  .cd-hero-blob--1 { width: 160px !important; height: 150px !important; right: -30px; opacity: .06; }
  .cd-hero-blob--2,
  .cd-hero-blob--3,
  .cd-hero-blob--4 { display: none; }
  .cd-hero-stats { gap: var(--space-6); margin-top: 18px; }
  .cd-hero-stats .stat-n { font-size: 22px; }
  .cd-hero-meta { margin-top: 22px; }
  .cd-hero-sub { font-size: 15px; margin-bottom: 18px; }
  .cd-hero-link { padding: 9px 16px; font-size: 13px; }
}

/* MINI-CARTE PREVIEW — Real Leaflet interactive : drag/zoom/pinch ok,
   pins SVG style beboun (teardrop colorés). Info-bar dessous avec un
   seul CTA "Ouvrir l'explorer →". Pas de <a> qui wrap toute la section
   (sinon dragging la map déclencherait la navigation).
   Intégrée DANS le hero beige : margin top 0 (puisque déjà sous le band),
   margin latéral aligné sur le padding du band. */
.cd-mapview {
  margin: 0 var(--space-10);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.04);
  position: relative;
  z-index: 1;
}
.cd-mapview-map {
  width: 100%;
  height: 360px;
  background: #F5F4F0;
}
.cd-mapview-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 22px;
  background: #fff;
  border-top: 1px solid var(--color-border);
}
.cd-mapview-info-text { min-width: 0; }
.cd-mapview-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-text-soft);
  margin-bottom: 4px;
}
.cd-mapview-eyebrow-blob {
  width: 22px;
  height: 20px;
  flex-shrink: 0;
}
.cd-mapview-title {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  color: var(--color-text);
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Wrapper relative autour du div Leaflet : permet de poser le CTA en
   overlay en position absolute (style Google Maps "Directions"). */
.cd-mapview-mapwrap { position: relative; }

.cd-mapview-cta {
  /* Overlay sur la map, coin bas-droite. z-index sous les controls Leaflet
     mais au-dessus de la tile layer et des markers. */
  position: absolute;
  bottom: 16px;
  right: 16px;
  z-index: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 18px;
  background: var(--color-text);
  color: #fff;
  text-decoration: none;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
  transition: background .15s, transform .15s, box-shadow .15s;
}
.cd-mapview-cta:hover {
  background: #000;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
}

/* Popup Leaflet stylé beboun : fond blanc, ombre douce, contenu sobre.
   S'ouvre au click sur un marker ou via les chips de la liste sous la map. */
/* ─── Pill custom remplaçant le popup Leaflet ──────────────────────
   Preview au hover d'un marker (pas au click — le click va sur la fiche).
   Rond photo + nom + catégorie. Positionnée en overlay bas-centre de la
   map. Animation fade+up. */
.cd-mapview-mapwrap { position: relative; }
.cd-pill {
  position: absolute;
  bottom: 16px;
  left: 16px;
  right: 16px;
  transform: translateY(8px);
  z-index: 720;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 22px;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: 16px;
  box-shadow: 0 2px 6px rgba(0,0,0,.08), 0 12px 28px rgba(0,0,0,.16);
  border: 1px solid rgba(0,0,0,.05);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.cd-pill.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.cd-pill-photo {
  display: none;
}
.cd-pill-photo-img {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
}
.cd-pill-photo-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  padding: 6px;
  box-sizing: border-box;
}
.cd-pill-photo-badge {
  position: absolute;
  bottom: -3px;
  right: -3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,.12);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cd-pill-photo-badge svg { width: 70%; height: 70%; display: block; }

.cd-pill-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cd-pill-cat {
  display: none;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-faint, #999);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cd-pill-name {
  font-family: var(--font-serif, Georgia, serif);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--color-text, #111);
  line-height: 1.2;
}
/* ─── Champs enrichis de la pill (ce qui la différencie de la vignette) ─── */
.cd-pill-rating {
  display: none;
  font-size: 12px;
  font-weight: 600;
  color: #B45309;
  margin-top: 3px;
}
.cd-pill-desc {
  font-size: 12px;
  color: var(--color-muted, #666);
  line-height: 1.4;
  margin-top: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cd-pill-addr {
  font-size: 11px;
  color: var(--color-faint, #999);
  margin-top: 4px;
  line-height: 1.3;
}
.cd-pill-link {
  flex-shrink: 0;
  align-self: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text, #111);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity .15s;
}
.cd-pill-link:hover { opacity: .6; }

@media (max-width: 600px) {
  .cd-pill { padding: 10px 14px; gap: 12px; }
  .cd-pill-name { font-size: 14px; }
}

/* Anciens styles cd-popup-* gardés mais inutilisés (bindPopup retiré).
   À nettoyer plus tard.
   ============================================================= */
.cd-popup-wrapper .leaflet-popup-content-wrapper {
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,.12);
  border: 1px solid var(--color-border);
  padding: 0;
}
.cd-popup-wrapper .leaflet-popup-content {
  margin: 0;
  padding: 14px 16px 12px;
  font-family: 'DM Sans', system-ui, sans-serif;
}
.cd-popup-wrapper .leaflet-popup-tip { background: #fff; }
.cd-popup-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.25;
  margin-bottom: 2px;
}
.cd-popup-cat {
  font-size: 12px;
  color: var(--color-text-soft);
  margin-bottom: 8px;
}
.cd-popup-wrapper .cd-popup-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  color: #111;
  text-decoration: none;
  margin-top: 4px;
  transition: opacity .15s;
}
.cd-popup-wrapper .cd-popup-link:hover { opacity: 0.65; color: #111; }
.cd-popup-wrapper .cd-popup-link svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  fill: currentColor;
}

/* Liste compacte des lieux sous la map. Grille 2 colonnes (1 sur mobile)
   avec pour chaque entrée : pastille colorée catégorie + nom + catégorie.
   Beaucoup plus sobre que l'ancienne ligne horizontale de gros markers. */
/* Liste des lieux en chips blanches (style coming-soon) : rond coloré + nom
   dans une pastille blanche avec ombre légère. Alignées à GAUCHE pour
   matcher l'axe du titre "Une sélection à découvrir" au-dessus. Padding
   latéral cohérent (22px) avec l'info-bar pour que tout soit sur le même
   axe vertical visuel. */
/* ── Grille de lieux : ronds photo type avatars ────────────────────
   Photo Google dans un rond (style "avatar de lieu"). Préserve l'identité
   beboun (le rond fait écho au blob) tout en gardant un aperçu visuel.
   Mini-blob beboun couleur catégorie collé en bas-droite du rond = signal
   catégorie. Note Google en haut-droite si dispo.

   Grille auto-fit : plein de petits items côte à côte, comme une story-row
   Instagram. */
.cd-mapview-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 22px 16px;
  padding: 12px 22px 28px;
  background: transparent;
  border-top: none;
}

.cd-mapview-thumb {
  /* Reset bouton */
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  text-align: center;

  /* Layout vertical : rond photo en haut, texte en dessous */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transition: transform .18s cubic-bezier(.22, 1.4, .36, 1);
}
.cd-mapview-thumb:hover {
  transform: translateY(-3px);
}
.cd-mapview-thumb:hover .cd-thumb-photo {
  border-color: var(--color-text);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .12);
}
.cd-mapview-thumb.is-active .cd-thumb-photo {
  border-color: var(--color-text);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .14);
}

/* Le rond photo : 90px, fond catégorie pâle si pas de photo */
.cd-thumb-photo {
  position: relative;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background-color: var(--cat-bg, #F5F4F0);
  background-size: cover;
  background-position: center;
  border: 2px solid var(--color-border);
  flex-shrink: 0;
  overflow: visible;  /* pour que le blob badge dépasse en bas */
  transition: border-color .18s, box-shadow .18s;
}

/* Le marker SVG du lieu (gros pin) est SUPPRIMÉ : on garde juste le mini-blob
   en bas-droite comme signal catégorie. Si pas de photo, on remplit le centre
   du rond avec un blob couleur cat plus visible. */
.cd-thumb-marker {
  display: none;  /* on n'utilise plus le gros pin */
}

/* Mini-blob beboun en bas-droite : signal catégorie discret. Le rond
   blanc autour le détache du fond et de la photo. */
.cd-thumb-cat-blob {
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
  z-index: 2;
}
.cd-thumb-cat-blob svg {
  width: 70%;
  height: 70%;
  display: block;
}

/* Note Google en haut-droite */
.cd-thumb-rating {
  position: absolute;
  top: -4px;
  right: -4px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 7px;
  background: #fff;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  color: var(--color-text);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
  line-height: 1;
}
.cd-thumb-rating svg {
  width: 9px;
  height: 9px;
  color: #F59E0B;
}

/* Si pas de photo Google → on affiche un gros blob coloré qui remplit le rond */
.cd-thumb-photo[data-no-photo] {
  display: flex;
  align-items: center;
  justify-content: center;
}
.cd-thumb-fallback-blob {
  width: 70%;
  height: 70%;
  display: block;
}

/* Bloc info (cat + nom) sous le rond. Compact, lisible. */
.cd-thumb-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  padding: 0 4px;
  max-width: 100%;
}
.cd-thumb-cat {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cat-color, var(--color-faint));
}
.cd-thumb-name {
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--color-text);
  max-width: 100%;
  /* Garde 2 lignes max */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 480px) {
  .cd-mapview-thumbs {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 20px 12px;
    padding: 8px 16px 24px;
  }
  .cd-thumb-photo { width: 72px; height: 72px; }
  .cd-thumb-cat-blob { width: 24px; height: 24px; bottom: -3px; right: -3px; }
  .cd-thumb-rating { font-size: 9px; padding: 2px 6px; }
  .cd-thumb-name { font-size: 12px; }
  .cd-thumb-cat { font-size: 8px; }
}

/* ── Google Maps attribution (conforme aux guidelines GMP) ────────
   Cf. https://developers.google.com/maps/documentation/places/web-service/policies
   On utilise la variante texte (taille interface compacte) avec la CSS
   officielle Google Maps Platform : Roboto 400, #5e5e5e, pas de traduction. */
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

.GMP-attribution {
  font-family: Roboto, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: normal;
  white-space: nowrap;
  color: #5e5e5e;
}

/* Petite mention "via Google" sous les notes Google. Discret mais lisible. */
.cd-thumb-rating-source {
  font-family: Roboto, sans-serif;
  font-size: 9px;
  font-weight: 400;
  color: #5e5e5e;
  margin-left: 4px;
}

/* Footer global d'attribution sous la mosaïque — visible pour conformité.
   Discret mais lisible. */
.cd-attribution-footer {
  padding: 0 22px 28px;
  text-align: right;
}
.cd-attribution-footer .GMP-attribution::before {
  content: 'Photos et avis fournis par ';
  color: #888;
  font-weight: 400;
}

@media (max-width: 700px) {
  .cd-attribution-footer { padding: 0 16px 24px; text-align: left; }
}

/* Marqueur blob beboun discret : opacity baissée + drop-shadow douce pour
   ne pas dominer la map. Le stroke blanc dans le SVG (pas le filter
   here) assure la lisibilité sur n'importe quelle tile. */
.mapview-marker {
  background: none;
  border: none;
  opacity: .7;
  transition: opacity .15s, transform .15s;
  cursor: pointer;
}
.mapview-marker svg {
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.15));
}
/* Transitions douces pour les changements de focus/dim */
.leaflet-marker-icon.mapview-marker {
  transition: opacity .2s, transform .2s, filter .2s;
}
/* Hover/active : le marqueur sélectionné grossit nettement et passe au-dessus
   des autres, pour qu'on l'identifie d'un coup d'œil. On NE dim PLUS les
   autres (la pill est déplacée en coin, donc la carte reste lisible et on
   veut voir tous les markers). */
.leaflet-marker-icon.mapview-marker:hover,
.leaflet-marker-icon.mapview-marker.is-active {
  opacity: 1;
  transform: scale(1.5);
  transform-origin: 50% 100%;
  z-index: 1000 !important;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.3));
}
/* (plus de règle .is-dimmed : tous les markers restent pleinement visibles) */

/* Pill au-dessus du marqueur (bindTooltip Leaflet) — sans-serif cohérent
   avec le reste de l'UI (les chips, le sub-titre, etc.). Le serif Playfair
   est réservé aux gros titres. */
.mapview-tooltip.leaflet-tooltip {
  background: #fff;
  color: var(--color-text);
  border: 1px solid #EFEEEC;
  border-radius: 999px;
  padding: 6px 14px;
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
  white-space: nowrap;
  line-height: 1.2;
}
/* Flèche pointer en bas — couleur claire pour matcher le fond blanc */
.mapview-tooltip.leaflet-tooltip-top::before {
  border-top-color: #fff;
}

/* Boutons de zoom Leaflet — style cohérent beboun */
.cd-mapview .leaflet-bar a {
  background-color: #fff;
  color: var(--color-text);
  border-color: var(--color-border);
}
.cd-mapview .leaflet-bar a:hover {
  background-color: #F5F4F0;
}

/* ── MOSAIQUE DE TUILES — feed visuel post-vedette ─────────────────── */
.cd-mosaic {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 24px 32px 8px;
}
@media (min-width: 800px)  { .cd-mosaic { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .cd-mosaic { grid-template-columns: repeat(4, 1fr); } }

.cd-tile {
  aspect-ratio: 1;
  border-radius: 16px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.cd-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
.cd-tile:active { transform: translateY(-1px); }

.cd-tile-bottom { margin-top: auto; }
.cd-tile-name {
  font-family: var(--font-serif);
  font-size: 15px; font-weight: 700;
  line-height: 1.15;
  color: var(--color-text);
  display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.cd-tile-meta {
  font-size: 11px;
  color: var(--color-text-soft);
  margin-top: 4px;
}

/* Tuile MOMENT — gradient coloré + emoji XL */
.cd-tile--moment { color: #fff; }
.cd-tile--moment .cd-tile-name {
  color: #fff;
  font-style: italic;
}
.cd-tile--moment .cd-tile-meta { color: rgba(255,255,255,.85); }
.cd-tile-emoji {
  font-size: 52px;
  line-height: 1;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.18));
  margin-top: 4px;
  align-self: flex-start;
}

/* Tuile PLACE — fond pastel + blob centré */
.cd-tile-blob {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  margin: 4px 0 8px;
}

/* Tuile "Tout voir" — variante outline */
.cd-tile--more {
  background: #fff;
  border: 1.5px dashed var(--color-border);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 8px;
}
.cd-tile--more:hover {
  border-color: var(--color-text);
  background: #fafafa;
}
.cd-tile-arrow {
  font-size: 32px;
  color: var(--color-text);
  font-weight: 300;
  line-height: 1;
}

.cd-today {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 32px;
  align-items: center;
  margin: 40px 32px 8px;
  padding: 28px;
  background: var(--color-bg-soft, #FAFAF7);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  position: relative;
}
.cd-today-image {
  aspect-ratio: 1;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--color-border);
}
.cd-today-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.cd-today-blob-fallback {
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FAFAF7;
}
.cd-today-blob-fallback svg {
  width: 65%; height: 65%;
}
.cd-today-content { min-width: 0; }
.cd-today-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--color-text-soft);
  margin-bottom: 14px;
}
.cd-today-title {
  font-family: var(--font-serif); font-size: 32px; font-weight: 700;
  letter-spacing: -.01em; line-height: 1.1; color: var(--color-text);
  margin: 0 0 14px;
}
.cd-today-desc {
  font-size: 15px; color: var(--color-text-light);
  line-height: 1.55; margin: 0 0 16px;
}
.cd-today-meta {
  display: inline-flex; gap: 14px;
  font-size: 13px; color: var(--color-text-soft);
  margin-bottom: 18px;
}
.cd-today-cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--color-text); color: #fff;
  padding: 13px 24px; border-radius: 999px;
  font-size: 13px; font-weight: 600;
  text-decoration: none;
  transition: transform .15s, background .15s;
}
.cd-today-cta:hover { background: #000; transform: translateX(2px); }

/* ── Section villes voisines : rendre visible et donner envie de cliquer.
   Anciennement trop discret (head 11px gris + cards blanches plates), on
   passe à un vrai titre éditorial + cards qui décollent au hover et qui
   ont une vraie présence visuelle. */
.cd-section { padding: 48px 32px 60px; }
.cd-section-head {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: 6px;
}
.cd-section-title {
  font-family: var(--font-serif);
  font-size: clamp(24px, 4vw, 34px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--color-text);
  margin-bottom: 28px;
}
.cd-section-title em {
  font-style: italic;
  color: var(--color-text);
}

.cd-border-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.cd-border-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 22px 22px 20px;
  text-decoration: none;
  color: inherit;
  transition: transform .18s cubic-bezier(.22, 1.4, .36, 1),
              box-shadow .18s, border-color .18s;
  position: relative;
  overflow: hidden;
}
.cd-border-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--color-text);
  opacity: 0;
  transition: opacity .18s;
}
.cd-border-card:hover {
  border-color: var(--color-text);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
}
.cd-border-card:hover::before { opacity: 1; }
.cd-border-name {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--color-text);
  line-height: 1.15;
  margin-bottom: 6px;
}
.cd-border-meta {
  font-size: 12px;
  color: var(--color-faint);
  font-weight: 500;
}
.cd-border-arrow {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-faint);
  transition: color .18s, transform .18s;
}
.cd-border-arrow svg { width: 14px; height: 14px; }
.cd-border-card:hover .cd-border-arrow {
  color: var(--color-text);
  transform: translateX(2px);
}

/* Footer minimaliste : copyright + contact. Texte fin, gris, centré. */
.cd-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 32px;
  padding: 32px 0 36px;
  border-top: 1px solid var(--color-border);
  font-size: 12px;
  color: var(--color-text-soft);
  letter-spacing: -.005em;
}
.cd-footer-sep { opacity: .5; }
.cd-footer-link {
  color: var(--color-text-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(0, 0, 0, .25);
  transition: text-decoration-color .15s, color .15s;
}
.cd-footer-link:hover {
  color: var(--color-text);
  text-decoration-color: var(--color-text);
}

@media (max-width: 700px) {
  /* HERO mobile (les overrides principaux sont dans le bloc @media 768 plus
     haut près des règles .cd-hero). Ici on ne touche plus au header. */

  .cd-section { padding: 28px 20px; }
  .cd-today {
    grid-template-columns: 1fr;
    gap: 18px;
    margin: 24px 20px 0;
    padding: 20px;
    border-radius: 16px;
  }
  .cd-today-image { max-width: 200px; margin: 0 auto; }
  .cd-today-title { font-size: 26px; }
  .cd-today-desc { font-size: 14px; }
  .cd-mapview { margin: 0 var(--space-4); }
  .cd-mapview-map { height: 220px; }
  .cd-mapview-info { padding: 12px 16px; flex-wrap: wrap; gap: 10px; }
  .cd-mapview-title { font-size: 16px; }
  .cd-mapview-cta { bottom: 12px; right: 12px; padding: 9px 14px; font-size: 12px; }
  .cd-mosaic { padding: 20px 20px 8px; gap: 10px; }
  .cd-tile { padding: 12px; border-radius: 14px; }
  .cd-tile-emoji { font-size: 44px; }
  .cd-tile-name { font-size: 14px; }
  .cd-border-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .cd-border-grid { grid-template-columns: 1fr; }
}

/* Lien discret "Comment ça marche ?" sous la cd-hero-cta-row.
   Remplace l'ancien bouton "La chasse aux blobs" qui faisait trop CTA fort
   à côté de "Voir les parcours". */
.cd-hero-howto {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 14px;
  font-size: 13px;
  font-weight: 500;
  color: #666;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(0,0,0,.2);
  transition: color .12s, text-decoration-color .12s;
}
.cd-hero-howto:hover {
  color: #111;
  text-decoration-color: #111;
}

/* cd-hero-cta-row : 2 CTAs primary côte à côte au lieu de primary + link */
.cd-hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
@media (max-width: 600px) {
  .cd-hero-cta-row { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  /* Bouton en taille auto sur mobile (pas pleine largeur).
     Padding horizontal généreux pour la tap target. */
  .cd-hero-cta-row .cd-hero-link {
    width: auto;
    padding: 11px 22px;
    align-self: flex-start;
  }
}