/* === "Explorer par region" : parcours editorial au-dessus des filtres =====
   Reutilise la carte .place-rec-card existante (meme carrousel, memes liens),
   seulement rangee en lignes horizontales par grande zone geographique. Ne
   doit jamais etre confondue avec la grille filtree : voir le scoping de
   apply() dans place-recommendations-directory.js. */
.place-directory-regions[hidden] {
  display:none;
}
.place-directory-regions {
  display:flex;
  flex-direction:column;
  gap:clamp(22px,2.6vw,32px);
  margin:clamp(28px,3vw,40px) 0;
}
.place-directory-regions-head {
  display:flex;
  flex-direction:column;
  gap:6px;
}
.place-directory-regions-head h2 {
  margin:0;
  font-family:var(--font-ui);
  font-size:clamp(1.25rem,1.6vw,1.5rem);
  font-weight:800;
  color:var(--ink);
}
.place-directory-regions-head p {
  margin:0;
  color:var(--ink-soft);
  font-size:.92rem;
}
/* Cadre colore par region (maquette approuvee) : palette de 6 degrades qui
   tourne par index, pour que chaque nouvelle region (Europe, Amerique du
   Sud, etc. — voir REGION_BY_COUNTRY_CODE dans place-recommendations.ts)
   recoive automatiquement une teinte sans jamais y toucher a la main. */
.place-directory-region {
  --region-pad:clamp(22px,2.6vw,32px);
  display:flex;
  flex-direction:column;
  gap:18px;
  padding:var(--region-pad);
  border-radius:24px;
  background:linear-gradient(135deg,var(--region-grad-start),var(--region-grad-end));
}
.place-directory-region[data-region-palette="0"] { --region-grad-start:#0d1b36; --region-grad-end:#1a3a7a; }
.place-directory-region[data-region-palette="1"] { --region-grad-start:#6a2a0d; --region-grad-end:#b8831f; }
.place-directory-region[data-region-palette="2"] { --region-grad-start:#0d3a36; --region-grad-end:#1a7a5e; }
.place-directory-region[data-region-palette="3"] { --region-grad-start:#3a0d36; --region-grad-end:#7a1a5e; }
.place-directory-region[data-region-palette="4"] { --region-grad-start:#1b1b1f; --region-grad-end:#7a2d2d; }
.place-directory-region[data-region-palette="5"] { --region-grad-start:#1f0d3a; --region-grad-end:#4a1a7a; }
.place-directory-region-head {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:flex-start;
  gap:16px;
  width:100%;
}
.place-directory-region-head-text {
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
  width:100%;
}
.place-directory-region-tag {
  font-family:var(--font-ui);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#ffffffc2;
}
.place-directory-region-countries {
  display:flex;
  flex-wrap:wrap;
  column-gap:.3em;
  row-gap:.08em;
  margin:0;
  font-family:var(--font-ui);
  font-size:clamp(1.15rem,1.6vw,1.4rem);
  font-weight:800;
  color:#fff;
}
.place-directory-region-country {
  white-space:nowrap;
}
.place-directory-region-count {
  flex:none;
  color:#ffffffb3;
  font-size:.82rem;
  font-weight:700;
  white-space:nowrap;
}
.place-directory-region-row-wrap {
  position:relative;
  /* Les cartes suivantes restent visibles au bord du cadre colore. */
  margin-inline:calc(-1 * var(--region-pad));
}
.place-directory-region-row {
  display:flex;
  gap:16px;
  overflow-x:auto;
  padding-inline:var(--region-pad);
  scroll-padding-inline:var(--region-pad);
  padding-bottom:6px;
  scroll-behavior:smooth;
  scroll-snap-type:x proximity;
  /* Barre native masquee : son rendu (couleur, epaisseur, pleine largeur du
     cadre y compris le debordement du wrap ci-dessus, parfois visible au
     survol seulement) depend du navigateur/OS et ne peut pas etre calee sur
     les memes marges que le texte. Le fondu + chevron ci-dessous signalent
     deja qu'on peut glisser : la barre native etait redondante en plus d'etre
     incoherente. Le defilement tactile/trackpad/fleches reste inchange. */
  scrollbar-width:none;
}
.place-directory-region-row::-webkit-scrollbar {
  display:none;
}
/* Carte compacte (photo + categorie + nom) : le detail (texte, adresse,
   liens) vit sur la fiche dediee, pas ici — evite de repeter deux fois le
   meme long texte sur la page repertoire (grille filtree + "Explorer par
   region"). Fond vitre : lisible sur n'importe laquelle des 6 teintes de
   cadre ci-dessus, sans avoir besoin d'une variante par palette. */
.place-directory-region-item {
  flex:0 0 clamp(170px,19vw,210px);
  scroll-snap-align:start;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:10px 10px 12px;
  border-radius:16px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  text-decoration:none;
  color:#fff;
  transition:background-color .18s ease,border-color .18s ease;
}
.place-directory-region-item:hover {
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.3);
}
/* .ms-responsive-picture a une regle globale (img{width:100%} sans hauteur) de
   specificite (0,2,4) : la comparaison CSS departage d'abord sur le nombre de
   CLASSES (peu importe le nombre d'elements ensuite), donc il faut au moins 3
   classes ici pour gagner sans surcharge forcee — d'ou le double prefixe body
   repris de ce gabarit. Sans ca, le ratio de chaque vignette retombe sur les
   dimensions intrinseques de sa photo source (donc une hauteur differente par
   lieu selon la photo). */
body.index2-page.page-template .place-directory-region-item picture,
body.index2-page.page-template .place-directory-region-item img,
body.index2-home .home-place-regions .place-directory-region-item picture,
body.index2-home .home-place-regions .place-directory-region-item img {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:4/3;
  border-radius:14px;
  object-fit:cover;
}
.place-directory-region-item-category {
  font-family:var(--font-ui);
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:#ffd98a;
}
.place-directory-region-item-name {
  font-weight:700;
  font-size:.92rem;
  line-height:1.3;
  color:#fff;
}
.place-directory-region-item:hover .place-directory-region-item-name {
  text-decoration:underline;
}
/* Les chevrons suffisent a indiquer le defilement. Les anciens fondus noirs
   masquaient les photos et salissaient les bords du cadre sur ordinateur. */
.place-directory-region-fade {
  display:none;
}
.place-directory-region-next {
  position:absolute;
  top:calc(50% - 14px);
  width:30px;
  height:30px;
  border-radius:999px;
  background:rgba(255,255,255,.95);
  border:1px solid rgba(255,255,255,.6);
  padding:0;
  appearance:none;
  /* Ombre portee : sans elle, le bouton restait plat sur la photo, sans
     aucune impression de profondeur au-dessus du fondu. */
  box-shadow:0 4px 14px rgba(0,0,0,.45);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  pointer-events:auto;
  transition:opacity .15s ease;
}
.place-directory-region-next:not(.place-directory-region-prev) { right:10px; }
.place-directory-region-prev { left:10px; }
.place-directory-region-next:focus-visible {
  outline:2px solid #fff;
  outline-offset:3px;
}
.place-directory-region-next i {
  display:block;
  width:7px;
  height:7px;
  border-top:1.8px solid var(--accent);
  border-right:1.8px solid var(--accent);
  transform:rotate(45deg);
}
.place-directory-region-prev i {
  transform:rotate(-135deg);
}
/* display:flex ci-dessus l'emporterait sinon sur la regle UA [hidden]. */
.place-directory-region-next[hidden] {
  display:none;
}
@media (max-width:760px) {
  .place-directory-region {
    --region-pad:clamp(18px,5.2vw,24px);
  }
  .place-directory-region-head {
    column-gap:10px;
  }
  .place-directory-region-countries {
    font-size:clamp(1.12rem,5vw,1.35rem);
    line-height:1.2;
  }
  .place-directory-region-count {
    font-size:.78rem;
  }
  .place-directory-region-item { flex-basis:40vw; }
  body.index2-home .home-place-regions,
  body.index2-home .home-place-regions .place-directory-region,
  body.index2-home .home-place-regions .place-directory-region-head,
  body.index2-home .home-place-regions .place-directory-region-head-text {
    width:100%;
    max-width:none;
    min-width:0;
  }
  body.index2-home .home-place-regions .place-directory-region-head {
    grid-template-columns:minmax(0,1fr);
  }
  body.index2-home .home-place-regions .place-directory-region-count {
    justify-self:start;
  }
  body.index2-home .home-place-regions .place-directory-region-fade {
    display:none;
  }
  body.index2-home .home-place-regions .place-directory-region-next {
    box-shadow:none;
  }
}