/* ═══ « Venir au studio » (gabarit page-venir) ═══
   Refaite le 26 octobre 2026 (inc/venir.php). En haut, la fiche du studio
   (pratique-sections.css) ; ici, « Tu viens d'où ? » (les villes en tuiles
   photo) ; les cartes du bas viennent de pratique-sections.css. Les règles `.vn`,
   `.vn__titre` et `.vn-visite` servent aussi à « Ta première visite », sur
   les pages villes et ici (version fiche : ville.css). */
.venir { background: #FCFAF7; }   /* le blanc chaud des pages Reformer et Mat, jamais #fff */
.vn {
  --fiche-bord: rgb(94 32 40 / 0.08);
  --fiche-badge: #F3E6E1;
  --fiche-ombre: 0 18px 44px -28px rgb(94 32 40 / 0.28), 0 2px 6px rgb(94 32 40 / 0.04);
  --vn-gouttiere: max(1.25rem, 4.2vw);
  box-sizing: border-box; max-width: calc(var(--container) + 2 * var(--vn-gouttiere)); margin: 0 auto; padding: clamp(3rem, 8vw, 5rem) var(--vn-gouttiere); color: var(--ink);
}
.vn *, .vn *::before, .vn *::after { box-sizing: border-box; }
.vn__titre { margin: 0; font-family: "Marcellus", Georgia, serif; font-weight: 400; font-size: clamp(1.75rem, 6.4vw, 2.5rem); line-height: 1.1; letter-spacing: -0.01em; text-wrap: balance; color: var(--vin-800); }
.vn__intro { max-width: 40rem; margin: 0.625rem 0 0; font-size: clamp(1rem, 2vw, 1.0625rem); line-height: 1.5; color: var(--gray-700); }

/* ── Le haut (motif venir-haut), d'après la maquette de Corentin (26 octobre 2026) ──
   Le titre, l'adresse sur deux lignes avec une grande épingle, le bouton sur
   sa ligne, les trois pastilles sur une rangée ; puis les villes et la carte.
   Les décors sont découpés dans la maquette (fond blanc, posés en
   « multiply » : le blanc disparaît sur le crème) : la forme rosée et la
   silhouette au trait en haut à droite, des feuillages autour des villes.
   Les tailles suivent la maquette, sauf les textes, gardés à 12 px au moins
   (à l'échelle, la maquette en ferait 9 à 10). */
.vnh { --vnh-gouttiere: max(1.25rem, 4.2vw); position: relative; isolation: isolate; overflow-x: clip; box-sizing: border-box; background: #FCFAF7; max-width: calc(var(--container) + 2 * var(--vnh-gouttiere)); margin: 0 auto; padding: 2rem var(--vnh-gouttiere) 0; color: var(--ink); }
.vnh *, .vnh *::before, .vnh *::after { box-sizing: border-box; }
.vnh__bandeau { position: relative; }
.vnh__bandeau::before {   /* la forme rosée et la silhouette au trait */
  content: ""; position: absolute; z-index: -1; top: -2rem; right: calc(-1 * var(--vnh-gouttiere)); width: min(46vw, 22rem); aspect-ratio: 368 / 505;
  background: url("../images/venir-decor-haut.webp") right top / contain no-repeat; mix-blend-mode: multiply; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent); mask-image: linear-gradient(to bottom, #000 72%, transparent);   /* la forme se fond vers le bas, sans coupure nette */
}
/* Centré, d'après la seconde maquette de Corentin (27 octobre 2026) : le
   surtitre entre deux filets, le titre, l'adresse dans un cartouche lin,
   le bouton large, les trois repères en colonnes séparées par un filet. */
.vnh__bandeau { display: flex; flex-direction: column; align-items: center; text-align: center; }
.vnh .pqs-fiche__surtitre { margin-bottom: 0.875rem; }
.vnh__bandeau .pqs-fiche__surtitre { justify-content: center; }
.vnh__bandeau .pqs-fiche__surtitre::before { content: ""; width: 4rem; height: 1px; background: rgb(117 61 64 / 0.45); }
.vnh__titre { margin: 0; font-family: "Marcellus", Georgia, serif; font-weight: 400; font-size: clamp(2.125rem, 9vw, 3.25rem); line-height: 1.08; letter-spacing: -0.01em; text-wrap: balance; color: var(--vin-800); }   /* « Venir chez Paulette, » puis « à Sartrouville » */
.vnh__lieu { display: flex; flex-direction: column; align-items: center; width: 100%; margin-top: 1.25rem; }
.vnh__adresse { display: inline-flex; align-items: center; gap: 0.875rem; margin: 0; padding: 0.75rem 1.375rem 0.75rem 1.125rem; border-radius: 1rem; background: rgb(244 229 223 / 0.78); text-align: left; font: normal 400 0.9375rem/1.45 var(--font-body), sans-serif; color: var(--ink); }
.vnh__epingle { flex: none; width: 1.875rem; height: 1.875rem; color: var(--vin-700); }
.vnh .vnh__itineraire {
  width: 100%; max-width: 34rem; margin-top: 1.125rem; min-height: 3.25rem; padding: 0 1.5rem;
  font: 400 1.0625rem/1.2 "Marcellus", Georgia, serif;
  background: linear-gradient(180deg, #74202F 0%, #5E2028 55%, #561A23 100%); box-shadow: 0 14px 28px -14px rgb(94 32 40 / 0.65);
}
.vnh .vnh__itineraire:hover { background: var(--vin-800); }
.vnh__pastilles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; max-width: 34rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.vnh__pastilles li { display: flex; align-items: center; justify-content: center; gap: 0.375rem; min-width: 0; padding: 0.25rem 0.25rem; text-align: left; font-size: 0.8125rem; line-height: 1.3; color: var(--ink); }
.vnh__pastilles li + li { border-left: 1px solid rgb(94 32 40 / 0.16); }
.vnh__pastilles li > span { text-wrap: balance; min-width: 0; }
.vnh__picto { flex: none; box-sizing: content-box; width: 1.25rem; height: 1.25rem; padding: 0.5rem; border-radius: 50%; background: rgb(244 229 223 / 0.9); color: var(--vin-800); }
/* « Tu viens d'où ? » centré, comme le haut, au téléphone et à la tablette. */
@media (max-width: 1023px) {
  .vnh .vn-tuiles > .pqs-fiche__surtitre { justify-content: center; }
  .vnh .vn-tuiles > .pqs-fiche__surtitre::before { content: ""; width: 4rem; height: 1px; background: rgb(117 61 64 / 0.45); }
  .vnh .vn-tuiles__titre, .vnh .vn-tuiles__intro { text-align: center; }
}
.vnh__villes { position: relative; display: grid; gap: 1rem; margin-top: 2.25rem; }
.vnh__villes::before, .vnh__villes::after { content: ""; position: absolute; z-index: -1; mix-blend-mode: multiply; pointer-events: none; background: center / contain no-repeat; }
.vnh__villes::before { top: 0.75rem; right: calc(-1 * var(--vnh-gouttiere)); width: 2.75rem; aspect-ratio: 101 / 320; background-image: url("../images/venir-feuilles-droite.webp"); }   /* les feuillages à droite, à côté du titre */
.vnh__villes::after { bottom: 0; left: calc(-1 * var(--vnh-gouttiere)); width: 1.5rem; aspect-ratio: 56 / 492; background-image: url("../images/venir-feuilles-gauche.webp"); }   /* et à gauche, le long de la carte */
.vnh__carte { overflow: hidden; aspect-ratio: 4 / 3; border: 1px solid rgb(94 32 40 / 0.08); border-radius: var(--radius-lg, 1rem); background: var(--linen-deep); box-shadow: 0 18px 44px -28px rgb(94 32 40 / 0.28), 0 2px 6px rgb(94 32 40 / 0.04); }
.vnh__carte iframe { display: block; width: 100%; height: 100%; border: 0; filter: sepia(0.16) saturate(0.9); }   /* la carte un peu réchauffée, comme la maquette */
@media (min-width: 640px) {
  .vnh__adresse { font-size: 1.0625rem; }
  .vnh__pastilles li { font-size: 0.875rem; }
}

/* ── Tu viens d'où ? Les villes en tuiles photo (cp_venir_tuiles) ──
   Le langage des tuiles de la boutique et des tuiles de villes de Booking :
   la photo de la ville, son nom en Marcellus ivoire sur un dégradé bordeaux
   (jamais une ombre grise), le temps en voiture en pastille crème, une ligne
   de transport. La première (la plus proche) prend toute la largeur ; toutes
   visibles d'un coup, jamais en carrousel (le carrousel perd chez Booking).
   Les photos, d'où qu'elles viennent, sont un peu réchauffées pour la charte. */
.vn-tuiles__titre { margin: 0; font-family: "Marcellus", Georgia, serif; font-weight: 400; font-size: clamp(2rem, 8vw, 2.75rem); line-height: 1.05; letter-spacing: -0.01em; color: var(--vin-800); }
.vn-tuiles__intro { margin: 0.5rem 0 0; font-size: 1rem; line-height: 1.5; color: var(--gray-700); }
.vn-tuiles__liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.vn-tuile--grande { grid-column: 1 / -1; }
.vn-tuile__cadre {
  position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--radius-lg, 1rem);
  background: var(--linen-deep); color: var(--ivory); text-decoration: none;
}
.vn-tuile--grande .vn-tuile__cadre { aspect-ratio: 8 / 5; }   /* la même hauteur que deux petites côte à côte */
.vn-tuile__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.86) sepia(0.1); transition: transform var(--dur-slow) var(--ease-out-expo); }
.vn-tuile__cadre::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgb(46 13 19 / 0.86) 0%, rgb(46 13 19 / 0.5) 34%, rgb(46 13 19 / 0) 62%); }
.vn-tuile__temps {
  position: absolute; top: 0.625rem; left: 0.625rem; display: inline-flex; align-items: center; gap: 0.3125rem; padding: 0.3125rem 0.625rem 0.3125rem 0.5rem; border-radius: 999px;
  background: rgb(247 241 232 / 0.94); color: var(--vin-800); font: 700 0.8125rem/1 var(--font-body), sans-serif;
}
.vn-tuile__picto { flex: none; width: 0.9375rem; height: 0.9375rem; }
.vn-tuile__texte { display: grid; gap: 0.25rem; padding: 0.75rem 0.75rem 0.8125rem; }   /* dans le flux, calé en bas (le lien couvre toute la tuile) */
.vn-tuile__nom { font-family: "Marcellus", Georgia, serif; font-size: 1.25rem; line-height: 1.08; overflow-wrap: anywhere; color: var(--ivory); }
.vn-tuile--grande .vn-tuile__nom { font-size: 1.75rem; }
/* La ville qui a sa page : une flèche dans un rond ivoire, en haut à droite (le rond fléché des cartes du site). */
.vn-tuile__suite { position: absolute; top: 0.5rem; right: 0.5rem; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: rgb(247 241 232 / 0.94); color: var(--vin-800); }
.vn-tuile__fleche { width: 0.9375rem; height: 0.9375rem; transition: transform var(--dur-base) var(--ease-out-expo); }
.vn-tuile__trajet { font-size: 0.75rem; line-height: 1.3; color: rgb(247 241 232 / 0.9); }
.vn-tuile--grande .vn-tuile__trajet { font-size: 0.8125rem; }
.vn-tuile__lien { color: inherit; text-decoration: none; }
.vn-tuile__lien::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }   /* toute la tuile mène à la page de la ville */
.vn-tuile__lien:focus-visible { outline: none; }
.vn-tuile__cadre--lien:focus-within { outline: 2px solid var(--vin-700); outline-offset: 3px; }
.vn-tuile__cadre--lien:hover .vn-tuile__img { transform: scale(1.04); }
.vn-tuile__cadre--lien:hover .vn-tuile__fleche { transform: translateX(3px); }
.vn-tuiles__note { margin: 0.75rem 0 0; font-size: 0.75rem; line-height: 1.45; color: var(--ink-2); }
.vn-tuiles__credits { display: block; margin-top: 0.25rem; font-size: 0.6875rem; opacity: 0.8; }
@media (prefers-reduced-motion: reduce) { .vn-tuile__img, .vn-tuile__fleche { transition: none; } }

/* ── Ta première visite (pages villes, version fiche dans ville.css) ── */
.vn-visite { max-width: none; padding-inline: max(var(--vn-gouttiere), calc((100% - var(--container)) / 2)); background: var(--vin-700); color: var(--ivory); }
.vn-visite .vn__titre { color: var(--ivory); }

/* ═══ PC : les villes à gauche (trois colonnes, la première en bandeau), la carte à droite ═══ */
@media (min-width: 1024px) {
  .vnh { padding-top: 2.5rem; }
  .vnh .vnh__itineraire { max-width: 26rem; }
  .vnh__villes { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); column-gap: 1.75rem; align-items: stretch; margin-top: 2.25rem; }
  .vnh__carte { position: sticky; top: calc(var(--cp-nav-h, 5rem) + 1.5rem); align-self: start; aspect-ratio: 4 / 5; margin-top: 4.25rem; }   /* à la hauteur des tuiles, et elle suit le défilement */
  /* Le détail de l'arrivée : la fiche sur toute la largeur (pas de carte à côté ici), ses repères sur une rangée. */
  .venir .pqs--fiche { grid-template-columns: minmax(0, 1fr); grid-template-areas: "texte"; }
  .venir .pqs-fiche { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 3fr); gap: 1.5rem; align-items: center; }
  .venir .pqs-fiche__reperes { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 0; }
  .venir .pqs-fiche__repere--large { grid-column: auto; }
  .vn-tuiles__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
  .vn-tuile--grande .vn-tuile__cadre { aspect-ratio: 12 / 5; }   /* toute la rangée, à la hauteur des petites */
  .vn-tuile__nom { font-size: 1.5rem; }
  .vn-tuile--grande .vn-tuile__nom { font-size: 2rem; }
  .vn-tuile__trajet { font-size: 0.8125rem; }
}

/* Les titres de la page en Manrope (Corentin, 27 octobre 2026) : le H1 et
   tous les H2, sur cette page seulement ; en gras, comme les titres de la
   boutique en Manrope. */
.venir :is(h1, h2) { font-family: var(--font-body), sans-serif !important; font-weight: 700 !important; letter-spacing: -0.02em !important; }