/* decouverte.css — refonte-decouverte-20261012
   Feuille dédiée aux pages quartier / découvrez-bordeaux / quel-studio-choisir.
   Classes préfixées .dec- uniquement (même patron que balades.css/.bal-).
   Ne modifie jamais site.css. Variables de couleur reprises de site.css (--bordeaux,
   --bordeaux-deep, --or, --or-deep, --pierre, --pierre-2) — aucune nouvelle couleur. */

/* ── 1. Bloc carte 3D d'entrée (clone visuel de .map-hero du guide de séjour) ── */
/* MARK-refonte-decouverte-passe3-20261012 - defaut passe2 : ".content-zone a" (specificite
   0,1,1) battait ".dec-map-hero" (0,1,0) -> le lien entier (titre, sous-titre, bouton) heritait
   la couleur bordeaux soulignee du site, illisible sur l'image de la carte (piege connu skill
   §7). Correction : tous les selecteurs de ce bloc sont prefixes ".content-zone" (specificite
   0,2,0+, bat 0,1,1), couleur/decoration explicites sur CHAQUE enfant texte, :hover/:visited
   couverts. */
.dec-map-wrap { margin: 0 0 1.5rem; }
.content-zone .dec-map-hero,
.content-zone .dec-map-hero:hover,
.content-zone .dec-map-hero:visited,
.content-zone .dec-map-hero:focus {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-decoration: none !important;
  color: #fff !important;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  min-height: 220px;
  padding: 24px;
  background:
    linear-gradient(180deg, rgba(70,16,31,0) 0%, rgba(70,16,31,.15) 35%, rgba(70,16,31,.88) 80%, rgba(70,16,31,.95) 100%),
    var(--dec-map-img, url('/assets/img/carte/carte-apercu.jpg')) center/cover,
    linear-gradient(135deg, #2f6f8f, var(--bordeaux));
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
.content-zone .dec-map-hero__t,
.content-zone .dec-map-hero__s {
  color: #fff !important;
  text-decoration: none !important;
  text-shadow: 0 1px 8px rgba(40,8,18,.75);
}
.content-zone .dec-map-hero__t { font-family: 'Fraunces', serif; font-size: clamp(20px, 2.4vw, 26px); font-weight: 600; line-height: 1.25; margin: 0; }
.content-zone .dec-map-hero__s { font-size: 14px; opacity: .9; margin: 6px 0 0; max-width: 46em; }
.content-zone .dec-map-hero .dec-btn,
.content-zone .dec-map-hero .dec-btn:hover,
.content-zone .dec-map-hero .dec-btn:visited {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--or);
  color: var(--bordeaux-deep) !important;
  border: 0;
  border-radius: 12px;
  padding: 11px 18px;
  font: 600 14px/1.2 'Inter', sans-serif;
  text-decoration: none !important;
  margin-top: 14px;
}
@media (max-width: 640px) {
  .content-zone .dec-map-hero { min-height: 190px; padding: 18px; }
}

/* ── 2. Vignettes des lieux phares (remplace la liste intro sans photo) ──────── */
.dec-lieu-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
}
@media (max-width: 900px) { .dec-lieu-grid { grid-template-columns: repeat(2, 1fr); } }
.dec-lieu-card {
  position: relative;
  display: block;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
}
/* MARK-refonte-decouverte-passe3-20261012 - defaut passe2 : une bande blanche ~20px
   apparaissait au-dessus de chaque photo (img en flux normal, marge/espace de ligne herite
   malgre display:block). Image sortie du flux (position absolue, cadre plein) : ne depend
   plus du box model du conteneur. */
.dec-lieu-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
  border: 0;
}
.dec-lieu-card__name {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 10px 12px 9px;
  background: linear-gradient(180deg, rgba(70,16,31,0) 0%, rgba(70,16,31,.82) 100%);
  color: #fff !important;
  font-weight: 600;
  font-size: 13.5px;
  text-shadow: 0 1px 6px rgba(0,0,0,.4);
  z-index: 1;
}

/* ── 3. Onglets pastille (CSS pur, radio caché — fonctionne sans JS) ─────────── */
.dec-tabs { margin: 1rem 0; }
.dec-tabs__nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 1rem; list-style: none; padding: 0; }
.dec-tabs input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dec-tabs__label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--pierre-2);
  color: var(--bordeaux);
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
  border: 1.5px solid transparent;
}
.dec-tabs input[type="radio"]:checked + .dec-tabs__label {
  background: var(--bordeaux);
  color: #fff;
  border-color: var(--bordeaux);
}
.dec-tabs__panel { display: none; }
/* Sans JS/CSS avancé : tout reste visible par défaut (voir noscript ci-dessous). */
.dec-tabs input[type="radio"]:checked ~ .dec-tabs__panels .dec-tabs__panel[data-panel].is-hidden-by-css { display: none; }
/* Affichage piloté par :target-like via classes posées en CSS pur ci-dessous */
#dec-tab-restaurants:checked ~ .dec-tabs__panels #dec-panel-restaurants,
#dec-tab-shops:checked       ~ .dec-tabs__panels #dec-panel-shops,
#dec-tab-bars:checked        ~ .dec-tabs__panels #dec-panel-bars,
#dec-tab-further:checked     ~ .dec-tabs__panels #dec-panel-further {
  display: block;
}

.dec-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }

.dec-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; list-style: none; margin: 0; padding: 0; }
@media (max-width: 720px) { .dec-card-grid { grid-template-columns: 1fr; } }
.dec-card {
  background: #fff;
  border: 1px solid var(--pierre-2);
  border-radius: 14px;
  padding: 14px 16px;
}
.dec-card__name { font-weight: 700; }
.dec-card__name a { color: var(--bordeaux); }
.dec-card__addr { display: block; color: var(--mute, #7a7570); font-size: 12.5px; margin: 2px 0 6px; }
.dec-card__desc { font-size: 14px; margin: 0; }
.dec-card .lien-carte { margin-left: 4px; }

/* ── 4. Section pratique : parking + transport côte à côte ───────────────────── */
/* MARK-refonte-decouverte-passe2-20261012 - defaut passe1 : Parking (3 lignes) a cote de
   Se deplacer (5 paragraphes + logos) laissait un grand vide sous Parking. Choix retenu
   (option A du cadrage) : empile, Parking en haut, Se deplacer dessous, pleine largeur. */
.dec-practical { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 1.5rem 0; }
.dec-practical__card {
  background: var(--pierre);
  border-radius: 16px;
  padding: 18px 20px;
}
.dec-practical__card h2 { margin-top: 0; }

/* ── 5. Quel studio choisir : cartes modernisées avec miniature ──────────────── */
.dec-studio-card {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 18px;
  align-items: start;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
  padding: 18px 20px;
  margin: 0 0 1.25rem;
}
@media (max-width: 640px) { .dec-studio-card { grid-template-columns: 1fr; } }
.dec-studio-card__thumb { border-radius: 12px; overflow: hidden; aspect-ratio: 4/3; }
.dec-studio-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dec-studio-card h2 { margin-top: 0; line-height: 1.35; }
.dec-studio-card h2 .dec-dot { width: 12px; height: 12px; display: inline-block; margin-right: 8px; vertical-align: middle; }

/* MARK-refonte-decouverte-20261012 — correctif rendu : .transport-logos (grid 2 col,
   prevue pour la largeur pleine du content-zone) se casse en texte vertical squeeze
   quand elle est nichee dans une des 2 colonnes de .dec-practical (largeur moitie).
   Force 1 colonne dans ce contexte, comme le fait deja site.css en dessous de 720px. */
.dec-practical__card .transport-logos { grid-template-columns: 1fr; }


/* MARK-refonte-decouverte-passe2-20261012 - tuile typographique pour les vignettes
   sans photo disponible (sections s3..s6 de decouvrez-bordeaux). */
.dec-lieu-card--tile {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px;
  color: #fff !important;
}
/* MARK-refonte-decouverte-passe3-20261012 - defaut passe2 : noms longs ("Le Night Beach de
   l'Hotel Intercontinental") debordaient de la tuile, coupes au milieu des mots. Cesure
   normale (jamais de coupe mi-mot), cesure typographique si le mot seul ne tient pas,
   padding lateral 10px, classe --long (ecrite par le generateur, seuil 25 caracteres) pour
   une taille de texte plus petite sur les noms longs. */
.dec-lieu-card__name--tile {
  position: static;
  background: none;
  font-size: 15px;
  line-height: 1.3;
  text-shadow: 0 1px 4px rgba(0,0,0,.25);
  overflow-wrap: normal;
  word-break: normal;
  /* MARK-refonte-decouverte-finition2-20261012 - hyphens:manual (pas de cesure auto du navigateur, qui coupait "Bordeaux" en "Bor-deaux" ; la classe --long gere deja les noms longs via font-size reduit) */
  hyphens: manual;
  padding: 0 4px;
}
.dec-lieu-card__name--tile.dec-lieu-card__name--long {
  font-size: 12px;
  line-height: 1.25;
}
/* MARK-refonte-decouverte-passe3-20261012 - grille dense (decouvrez s3-s6) : 3 colonnes des 640px au lieu de 2, pour reduire la hauteur mobile. Ne touche pas .dec-lieu-grid seul (4 lieux phares de quartier, inchange). */
.dec-lieu-grid.dec-lieu-grid--dense { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .dec-lieu-grid.dec-lieu-grid--dense { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .dec-lieu-grid.dec-lieu-grid--dense { grid-template-columns: repeat(2, 1fr); } }

/* MARK-refonte-decouverte-photos-20261012 - bloc discret credits photos vignettes */
.dec-credits {
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(0,0,0,.08);
  font-size: .8rem;
  color: #6b6b6b;
}
.dec-credits summary {
  cursor: pointer;
  font-weight: 600;
  color: #6b6b6b;
}
.dec-credits__list {
  margin: .6rem 0 0;
  padding-left: 1.2rem;
  line-height: 1.5;
}
.dec-credits__list a {
  color: inherit;
  text-decoration: underline;
}