/* ═══ Les pages villes (gabarit page-ville, inc/ville.php) ═══
   Tout le reste vient des feuilles des sections reprises (Reformer, accueil,
   coachs, fiche du studio). Ici, seulement « Pourquoi venir de [ville] » :
   la mise en page de la section 2 de Reformer (pq--machine), sur le papier
   uni, sans les ressorts (ils disent le Reformer, la page parle des deux
   pratiques), et ses trois raisons. */
.pratique__corps > .pq--ville { background-image: none; }
.pq--ville .pq__machine-texte::after { content: none; }
.pq--ville .pq__machine-texte h2 { min-height: 0; padding-right: 0; }
/* La preuve locale sous les tuiles (« Des Paulettes viennent déjà de… ») : une ligne en Marcellus bordeaux. */
.pratique__corps .pq--ville .pq-ville__preuve { max-width: 34rem; margin: 1.25rem 0 0; font-family: "Marcellus", Georgia, serif; font-size: 1.1875rem; line-height: 1.35; color: var(--vin-800); }

/* Les quatre tuiles : le fait en titre, une ligne dessous, au style des
   repères de la fiche du studio (badge rosé, titre gras). Les pictos sont
   dessinés ici : le texte reste éditable dans le contenu de la page. */
.pratique__corps .pq-tuiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.625rem; max-width: 34rem; margin: 1.25rem 0 0; }
.pq-tuile { padding: 0.875rem 0.875rem 1rem; border: 1px solid rgb(94 32 40 / 0.08); border-radius: 0.75rem; background: rgb(255 252 248 / 0.72); }
.pq-tuile::before { content: ""; display: block; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: #F3E6E1 center / 1.125rem 1.125rem no-repeat; }
.pq-tuile--reformer::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E2028' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8.5' r='3'/%3E%3Cpath d='M3.5 19c.6-3 2.8-4.8 5.5-4.8s4.9 1.8 5.5 4.8'/%3E%3Ccircle cx='16.5' cy='9.5' r='2.4'/%3E%3Cpath d='M15.8 14.3c2.4.1 4.1 1.7 4.7 4.2'/%3E%3C/svg%3E"); }
.pq-tuile--heure::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E2028' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E"); }
.pq-tuile--bande::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E2028' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7.5-4.6-7.5-10A4.3 4.3 0 0 1 12 7.6 4.3 4.3 0 0 1 19.5 10c0 5.4-7.5 10-7.5 10Z'/%3E%3C/svg%3E"); }
.pq-tuile--parking::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E2028' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='17' height='17' rx='3.5'/%3E%3Cpath d='M10 16.5v-9h3a2.6 2.6 0 0 1 0 5.2h-3'/%3E%3C/svg%3E"); }
.pq-tuile--creneaux::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E2028' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='2'/%3E%3Cpath d='M3.5 9.5h17M8 3v4M16 3v4'/%3E%3C/svg%3E"); }
.pq-tuile--annuler::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E2028' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12a7.5 7.5 0 1 0 2.2-5.3'/%3E%3Cpath d='M4.5 4.5v3.2h3.2'/%3E%3C/svg%3E"); }
.pratique__corps .pq-tuile h3 { max-width: none; margin: 0.625rem 0 0.25rem; padding: 0; font: 700 0.9375rem/1.3 var(--font-body), sans-serif; letter-spacing: 0; color: var(--ink); }
.pratique__corps .pq-tuile p { max-width: none; margin: 0; padding: 0; font-size: 0.8125rem; line-height: 1.45; color: var(--gray-700); }

@media (min-width: 1024px) {
  .pq--ville .pq__machine-texte.wp-block-column { padding-right: 0; }
}

/* Le fil d'Ariane, au-dessus du surtitre du haut de page (Yoast, inc/ville.php). */
.ph__fil { margin: 0 0 1rem; font: 500 0.75rem/1.4 var(--font-body), sans-serif; color: var(--vin-700); }
.ph__fil a { color: inherit; text-decoration: underline; text-decoration-color: rgb(94 32 40 / 0.3); text-underline-offset: 0.18em; }
.ph__fil a:hover { text-decoration-color: currentColor; }
.ph__fil-sep { margin: 0 0.375rem; opacity: 0.6; }
.ph__fil .breadcrumb_last { opacity: 0.75; }
@media (max-width: 1023px) {   /* le haut de page est une grille (pratique-hero.css) : le fil tout en haut à gauche, sur la photo, loin de ce qu'on lit (Corentin, 26 octobre 2026 : il sert à Google, pas à elle) */
  .ph__fil { grid-column: 1; grid-row: 1; align-self: start; justify-self: start; position: relative; z-index: 1; margin: 0; padding: 0.75rem 1.25rem 0; text-align: left; font-size: 0.6875rem; }
}

/* La note Google sous les boutons du haut (pratique-hero, pages villes) : les
   étoiles des avis (l'or #D9A21B d'accueil-avis.css), un lien vers les avis. */
.ph__note { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--vin-800); font: 500 0.8125rem/1.3 var(--font-body), sans-serif; text-decoration: none; }
.ph__note > span:last-child { text-decoration: underline; text-decoration-color: rgb(94 32 40 / 0.3); text-underline-offset: 0.18em; }
.ph__note:hover > span:last-child { text-decoration-color: currentColor; }
.ph__etoiles { display: inline-flex; gap: 2px; }
.ph__etoiles svg { width: 15px; height: 15px; fill: #D9A21B; }
.ph__etoiles svg.is-vide { fill: rgb(94 32 40 / 0.16); }
.ville-ancre { scroll-margin-top: calc(var(--cp-nav-h, 5rem) + 1rem); }

/* ═══ Téléphone d'abord (26 octobre 2026 : plus de 9 visites sur 10) ═══ */
@media (max-width: 559px) {
  /* Le fil d'Ariane sur une ligne : le nom de la page est déjà le grand titre
     juste dessous (les données structurées, elles, gardent les trois étapes). */
  .ph__fil .breadcrumb_last, .ph__fil-sep:has(+ .breadcrumb_last) { display: none; }
  /* Les tuiles en rangées : le picto à gauche, le texte en pleine largeur et
     plus grand ; plus court à faire défiler que la grille de deux. */
  .pratique__corps .pq-tuiles { grid-template-columns: 1fr; gap: 0.5rem; }
  .pq-tuile { display: grid; grid-template-columns: auto 1fr; column-gap: 0.875rem; align-items: start; padding: 0.875rem; }
  .pq-tuile::before { grid-row: 1 / span 2; }
  .pratique__corps .pq-tuile h3 { margin: 0.125rem 0 0.25rem; font-size: 1rem; }
  .pratique__corps .pq-tuile p { font-size: 0.875rem; line-height: 1.5; }
  /* La photo de « Pourquoi venir » : retirée au téléphone (elle suivait la
     grande photo du haut et précédait les photos des cartes ; la réponse
     arrive tout de suite). Son texte alternatif reste dans la page. */
  .pq--ville .pq__machine-photo { display: none; }
}

/* « Sur tapis ou sur Reformer ? » (accueil-tapis-reformer) sur les pages
   villes : le prix du cours découverte sous la ligne de la pratique ; au
   téléphone, les deux cartes côte à côte, sans gros bouton (toute la carte
   est le lien) : le choix se fait d'un coup d'œil, en un demi-écran. */
.pratique .atr-carte__prix { display: block; margin: -0.375rem 0 1.125rem; font: 600 0.9375rem/1.3 var(--font-body), sans-serif; color: var(--vin-800); }
.pratique .atr-carte__prix strong { font-weight: inherit; }
@media (max-width: 899px) {
  .pratique .atr__cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 0.625rem; row-gap: 0; max-width: 40rem; }
  .pratique .atr__ou { display: none; }
  .pratique .atr-carte__photo { aspect-ratio: 4 / 3; }
  .pratique .atr-carte__corps { align-items: flex-start; text-align: left; padding: 0.875rem 0.875rem 1rem; }
  .pratique .atr-carte__lien { font-size: 1.625rem; }
  .pratique .atr-carte__sous-titre { margin-top: 0.375rem; font-size: 0.8125rem; letter-spacing: 0; text-transform: none; color: var(--gray-700); }
  .pratique .atr-carte__titre::after, .pratique .atr-carte__bouton { display: none; }
  .pratique .atr-carte__prix { margin: 0.75rem 0 0; font-weight: 500; font-size: 0.8125rem; color: var(--gray-700); }
  .pratique .atr-carte__sep { display: none; }
  .pratique .atr-carte__prix strong { display: block; font-weight: 700; font-size: 1.125rem; color: var(--vin-800); }
  .pratique .atr-carte__prix strong::after { content: " →"; }
}

/* Les petites cibles du haut (fil d'Ariane, note) : 44 px de zone de toucher
   au doigt, sans rien changer à l'œil. */
@media (max-width: 1023px) {
  .ph__fil a { display: inline-block; padding: 0.8125rem 0.25rem; margin: -0.8125rem -0.25rem; }
  .ph__note { padding-block: 0.8125rem; margin-block: -0.8125rem; }
}

/* La barre « Réserver » collée en bas, au téléphone et à la tablette (la barre
   du site n'y a pas de bouton). Elle glisse du bas ; jamais par-dessus le
   bandeau des cookies, le pop-up ou le menu. */
.ville-barre {
  position: fixed; inset: auto 0 0; z-index: 40; padding: 0.625rem 1rem calc(0.625rem + env(safe-area-inset-bottom));
  background: var(--cream); border-top: 1px solid rgb(94 32 40 / 0.1); box-shadow: 0 -10px 24px -18px rgb(94 32 40 / 0.35);
  transform: translateY(110%); transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1); visibility: hidden;
}
.ville-barre.is-visible { transform: none; visibility: visible; }
.ville-barre__bouton { width: 100%; max-width: 32rem; margin-inline: auto; }
body:has(.cmplz-cookiebanner:not(.cmplz-hidden)) .ville-barre,
body:has(dialog[open]) .ville-barre,
body:has(.cp-nav.is-ouvert) .ville-barre { display: none; }
@media (min-width: 1200px) { .ville-barre { display: none; } }
@media (prefers-reduced-motion: reduce) { .ville-barre { transition: none; } }

/* Le haut, au téléphone (26 octobre 2026, remarque de Corentin : « les
   couleurs ressortent de la mauvaise manière ») : le fil d'Ariane et la note
   font descendre le texte sous le voile crème, jusque sur la machine noire et
   les couleurs vives de la photo. Le voile descend plus bas (jusqu'aux
   étoiles), et la note prend le fond lin des repères : elle ne pose plus
   jamais sur la photo. Pages villes seulement. */
@media (max-width: 1023px) {
  .page-template-page-ville .ph__photo::after {
    background: linear-gradient(to bottom, rgb(245 240 235 / 0) 0%, rgb(245 240 235 / 0) 14%, rgb(245 240 235 / 0.82) 30%, rgb(245 240 235 / 0.82) 76%, rgb(245 240 235 / 0) 94%);
  }
  .page-template-page-ville .ph__note { padding: 0.5rem 0.875rem; margin-block: 0; border-radius: 6px; background: var(--linen-deep); }
}

/* ═══ « Ta première visite », version fiche (maquette de Corentin, 26 octobre
   2026) : fond crème, une carte par étape (numéro bordeaux relié par un
   pointillé, titre en Marcellus, picto rond), la vidéo de l'arrivée en bouton
   plein, la réservation en bouton contour. Décors découpés dans la maquette :
   la branche, l'ombre de feuillage, le tapis et la gourde. Téléphone d'abord :
   textes à 14 px au moins (la maquette, à l'échelle, en ferait 10). ═══ */
.vn-visite.vn-visite--fiche {
  position: relative; isolation: isolate; overflow: hidden; max-width: none;
  padding: 3rem 1.25rem calc(min(100vw, 60rem) * 0.14 + 0.75rem);
  background: linear-gradient(#F1E7DE, #EEE2D8);
  color: var(--ink);
}
.vn-visite--fiche::before { content: ""; position: absolute; z-index: -1; top: 0.75rem; right: 0.25rem; width: 4.5rem; aspect-ratio: 158 / 256; background: url("../images/visite-feuille.webp") center / contain no-repeat; pointer-events: none; }
.vn-visite--fiche::after { content: ""; position: absolute; z-index: -1; left: 0; bottom: calc(min(100vw, 60rem) * 0.14 + 3rem); width: 2.75rem; height: 12rem; background: url("../images/visite-ombre.webp") right center / cover no-repeat; pointer-events: none; }
.vn-visite--fiche > * { max-width: 40rem; margin-inline: auto; }
.vn-visite--fiche .pqs-fiche__surtitre { margin-bottom: 0.5rem; }
.vn-visite--fiche .vn__titre { font-size: clamp(2.25rem, 10vw, 3rem); color: var(--vin-800); }
.vn-visite--fiche .vn__intro { margin-top: 0.5rem; padding-right: 3.5rem; color: var(--gray-700); }

.vn-cartes { display: grid; gap: 0.75rem; margin-top: 1.5rem; padding: 0; list-style: none; }
.vn-carte {
  position: relative; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) 3.875rem; column-gap: 0.875rem; align-items: start;
  padding: 1rem 0.875rem; border-radius: 1rem; background: rgb(247 238 231 / 0.94); box-shadow: 0 12px 26px -22px rgb(94 32 40 / 0.4);
}
.vn-carte::before { content: ""; position: absolute; left: calc(0.875rem + 1.125rem - 1px); top: calc(1rem + 2.25rem + 0.375rem); bottom: 0.75rem; border-left: 2px dotted rgb(94 32 40 / 0.28); }   /* le pointillé sous le numéro */
.vn-carte__numero { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--vin-700); color: var(--ivory); font: 400 1.125rem/1 "Marcellus", Georgia, serif; }
.vn-carte__texte { display: grid; gap: 0.3125rem; padding-top: 0.125rem; }
.vn-carte__texte strong { font: 400 1.25rem/1.15 "Marcellus", Georgia, serif; color: var(--vin-800); }
.vn-carte__texte span { font-size: 0.875rem; line-height: 1.5; color: var(--gray-700); }
.vn-carte__picto { align-self: center; width: 3.875rem; height: 3.875rem; border-radius: 50%; object-fit: cover; }

.vn-visite__bas { position: absolute; z-index: -1; left: 50%; bottom: 0; width: min(100%, 60rem); aspect-ratio: 941 / 132; transform: translateX(-50%); background: url("../images/visite-bas.webp") center / 100% 100% no-repeat; pointer-events: none; -webkit-mask-image: linear-gradient(transparent, #000 30%); mask-image: linear-gradient(transparent, #000 30%); }   /* le haut fondu : pas de ligne avec le fond */
.vn-visite__boutons { display: grid; gap: 0.75rem; margin-top: 1.5rem; }
.vn-bouton { display: flex; align-items: center; justify-content: center; gap: 0.75rem; min-height: 3.5rem; padding: 0 1.5rem; border-radius: 999px; text-decoration: none; transition: background-color var(--dur-base) var(--ease-out-expo), color var(--dur-base) var(--ease-out-expo); }
.vn-bouton svg { flex: none; width: 1.5rem; height: 1.5rem; }
.vn-bouton--contour { border: 1.5px solid var(--vin-700); background: rgb(250 245 240 / 0.7); color: var(--vin-800); font: 400 1.125rem/1.2 "Marcellus", Georgia, serif; }
.vn-bouton--contour svg { width: 1.125rem; height: 1.125rem; }
.vn-bouton--contour:hover { background: var(--vin-700); color: var(--ivory); }
.vn-bouton:focus-visible { outline: 2px solid var(--vin-700); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .vn-bouton { transition: none; } }

/* ═══ « Ta première visite » sur ordinateur : le parcours devient un chemin
   horizontal de cinq cartes, le pointillé d'un numéro au suivant (comme le
   chemin des tarifs de Reformer) ; le titre à gauche, les boutons côte à côte. ═══ */
@media (min-width: 1024px) {
  .vn-visite.vn-visite--fiche { padding: 5rem max(4.2vw, calc((100% - 74rem) / 2)) 10.5rem; }
  .vn-visite--fiche > * { max-width: none; margin-inline: 0; }
  .vn-visite--fiche::before { top: 2rem; right: max(2rem, calc((100% - 80rem) / 2)); width: 7rem; }
  .vn-visite--fiche::after { bottom: 9rem; width: 4.5rem; height: 20rem; }
  .vn-visite--fiche .vn__titre { font-size: 3.25rem; }
  .vn-visite--fiche .vn__intro { max-width: 36rem; padding-right: 0; }
  .vn-cartes { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; margin-top: 2.5rem; }
  .vn-carte { grid-template-columns: 2.5rem 1fr; grid-template-rows: auto 1fr; row-gap: 1rem; padding: 1.25rem 1.125rem 1.5rem; }
  .vn-carte__numero { width: 2.5rem; height: 2.5rem; font-size: 1.25rem; }
  .vn-carte__picto { grid-column: 2; grid-row: 1; justify-self: end; width: 4.25rem; height: 4.25rem; }
  .vn-carte__texte { grid-column: 1 / -1; grid-row: 2; align-self: start; }
  .vn-carte__texte strong { font-size: 1.3125rem; }
  /* le pointillé : du numéro vers la carte suivante, à l'horizontale */
  .vn-carte::before { left: calc(1.125rem + 2.5rem + 0.375rem); right: calc(-1rem - 0.5rem); top: calc(1.25rem + 1.25rem - 1px); bottom: auto; border-left: 0; border-top: 2px dotted rgb(94 32 40 / 0.28); }
  .vn-carte:last-child::before { right: 5.75rem; }
  .vn-carte__picto { position: relative; z-index: 1; }
  .vn-visite__boutons { grid-template-columns: repeat(2, auto); justify-content: center; gap: 1rem; margin-top: 2.5rem; }
  .vn-bouton { padding-inline: 2rem; }
  .vn-visite__bas { width: min(100%, 72rem); -webkit-mask-image: linear-gradient(transparent, #000 30%), linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(transparent, #000 30%), linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); mask-composite: intersect; }
}

/* « Ta première visite » au téléphone, avec la photo de fond de la page
   (champ « Photo de fond (téléphone) », maquette de Corentin du 26 octobre
   2026) : la photo calée en bas, pleine largeur, son haut fondu dans le mur ;
   les petits décors s'effacent (la photo a déjà sa branche, ses ombres, son
   tapis et sa gourde). Sur ordinateur, rien ne change. */
@media (max-width: 1023px) {
  .vn-visite--fiche.a-fond { padding-bottom: 6rem; background: #EBCFB5; }   /* le mur de la photo */
  .vn-visite--fiche.a-fond::before, .vn-visite--fiche.a-fond::after { content: none; }
  .vn-visite--fiche.a-fond .vn-visite__bas {
    left: 0; width: 100%; aspect-ratio: 941 / 1672; transform: none;
    background: var(--vn-fond) center bottom / 100% auto no-repeat;
    -webkit-mask-image: linear-gradient(transparent, #000 22%); mask-image: linear-gradient(transparent, #000 22%);
  }
}

/* Les deux boutons de « Ta première visite » (26 octobre 2026, Corentin) :
   la réservation en bouton plein, celui du haut de page ; la vidéo en
   contour, centrée à sa largeur au téléphone. */
.vn-visite__boutons { justify-items: center; }
.vn-visite__reserver { width: 100%; max-width: 32rem; }
.vn-bouton--video { justify-self: center; }
@media (min-width: 1024px) {
  .vn-visite__boutons { grid-template-columns: repeat(2, auto); align-items: center; }
  .vn-visite__reserver { order: 2; width: auto; }
}

/* Les coachs au téléphone (26 octobre 2026) : les quatre portraits en deux
   colonnes, le « portrait de famille » ; 3,6 écrans → 1,6, rien de retiré.
   Le script garde sa mécanique (la fiche s'ouvre au fil du défilement). */
@media (max-width: 639px) {
  .page-template-page-ville .cr__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.125rem; max-width: 24rem; }
  .page-template-page-ville .cr__nom { min-width: 0; max-width: 100%; padding-inline: 0.875rem; font-size: 1.25rem; }   /* la plaque à la largeur de la colonne (11,75 rem au départ : elles se touchaient) */
}

/* Les autres pages villes, sous les cartes « À découvrir aussi » (le maillage
   entre villes). Des liens texte, à 44 px de haut pour le doigt. */
.rd__villes { max-width: calc(var(--container) + 2 * max(1.25rem, 4.2vw)); margin: 0.5rem auto 0; padding: 0 max(1.25rem, 4.2vw); text-align: center; font-size: 0.9375rem; line-height: 1.6; color: var(--gray-700); }
.rd__villes > span:first-child { font-weight: 600; color: var(--ink); }
.rd__villes a { display: inline-block; padding: 0.625rem 0.125rem; color: var(--vin-800); text-decoration: underline; text-decoration-color: rgb(94 32 40 / 0.35); text-underline-offset: 0.18em; }
.rd__villes a:hover { text-decoration-color: currentColor; }

/* ═══ « Ton trajet », les deux chemins (pratique-studio, pages villes, 27 octobre 2026) ═══
   La réponse en titre (« À 7 minutes de chez toi »), puis deux cartes au
   style de la fiche du studio : en voiture (temps en grand, route, parking,
   bouton plein) et en RER et en bus (les étapes numérotées, bouton contour).
   L'adresse en cartouche sous le titre, les horaires en petit en bas ; la carte Google à côté sur
   ordinateur, dessous au téléphone. */
@media (max-width: 1023px) { .pqs--routes { grid-template-columns: minmax(0, 1fr); } }   /* une colonne qui ne s'élargit pas au-delà de l'écran */
.pqs--routes .pqs__titre { margin-top: 0; }
.pqs-routes { display: grid; gap: 0.75rem; margin-top: 1.25rem; }
.pqs-route { padding: 1rem 1rem 1.125rem; border: 1px solid var(--fiche-bord); border-radius: 1rem; background: var(--fiche-fond); box-shadow: var(--fiche-ombre); }
.pqs-route__tete { display: flex; align-items: center; gap: 0.75rem; margin: 0; }
.pqs-route__tete strong { flex: 1; font: 700 1rem/1.25 var(--font-body), sans-serif; color: var(--ink); }
.pqs-route__temps { font-family: "Marcellus", Georgia, serif; font-size: 1.75rem; line-height: 1; color: var(--vin-800); white-space: nowrap; }
.pqs-route__detail { margin: 0.75rem 0 0; font-size: 0.9375rem; line-height: 1.5; color: var(--gray-700); }
.pqs-route__parking { display: flex; align-items: center; gap: 0.5rem; margin: 0.5rem 0 0; font-size: 0.9375rem; line-height: 1.4; font-weight: 600; color: var(--ink); }
.pqs-route__picto { flex: none; width: 1.25rem; height: 1.25rem; color: var(--vin-700); }
.pqs-route__etapes { display: grid; gap: 0.5rem; margin: 0.875rem 0 0; padding: 0; list-style: none; counter-reset: etape; }
.pqs-route__etapes li { position: relative; padding-left: 2.25rem; min-height: 1.625rem; font-size: 0.9375rem; line-height: 1.45; color: var(--ink); counter-increment: etape; }
.pqs-route__etapes li::before {   /* le numéro rond bordeaux de « Ta première visite » */
  content: counter(etape); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 1.625rem; height: 1.625rem; border-radius: 50%;
  background: var(--vin-700); color: var(--ivory); font: 400 0.875rem/1 "Marcellus", Georgia, serif;
}
.pqs-route__etapes li:not(:last-child)::after { content: ""; position: absolute; left: 0.78rem; top: 1.75rem; bottom: -0.5rem; border-left: 1px dashed rgb(94 32 40 / 0.3); }
.pqs-route__bouton { margin-top: 1rem; }
.pqs-route__bouton--contour {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem; min-height: 2.75rem; padding: 0 1.375rem; border: 1.5px solid var(--vin-700); border-radius: 999px;
  color: var(--vin-800); font: 500 0.9375rem/1.2 var(--font-body), sans-serif; text-decoration: none; white-space: nowrap;
  transition: background-color var(--dur-base) var(--ease-out-expo), color var(--dur-base) var(--ease-out-expo);
}
.pqs-route__bouton--contour .ph-fleche { flex: none; width: 1.125rem; height: 1.125rem; }
.pqs-route__bouton--contour:hover { background: var(--vin-700); color: var(--ivory); }
.pqs-route__bouton--contour:focus-visible { outline: 2px solid var(--vin-700); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .pqs-route__bouton--contour { transition: none; } }
@media (min-width: 640px) {
  .pqs-routes { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
@media (min-width: 1024px) {
  .pqs--routes { grid-template-areas: "texte carte"; }
  .pqs--routes .pqs-studio__carte { min-height: 26rem; }
}

/* L'adresse sous « À 7 minutes de chez toi » : le cartouche lin de « Venir au studio » (venir.css, .vnh__adresse). */
.pqs-routes__lieu { margin: 1rem 0 0; }
.pqs-routes__adresse { display: inline-flex; align-items: center; gap: 0.875rem; padding: 0.75rem 1.375rem 0.75rem 1.125rem; border-radius: 1rem; background: rgb(244 229 223 / 0.85); text-align: left; }
.pqs-routes__adresse address { margin: 0; font: normal 400 0.9375rem/1.45 var(--font-body), sans-serif; color: var(--ink); }
.pqs-routes__epingle { flex: none; width: 1.875rem; height: 1.875rem; color: var(--vin-700); }
.pqs-routes__horaires { display: flex; align-items: center; gap: 0.5rem; margin: 1rem 0 0; font-size: 0.875rem; line-height: 1.5; color: var(--gray-700); }
@media (min-width: 640px) { .pqs-routes__adresse br { display: none; } }

/* Téléphone et tablette (27 octobre 2026, Corentin) : les en-têtes de section
   centrés sur les pages villes, le surtitre entre deux filets. Les cartes et
   les tuiles gardent leur texte à gauche. */
@media (max-width: 1023px) {
  .page-template-page-ville :is(.pqs--routes .pqs-studio__texte > .pqs-fiche__surtitre, .vn-visite--fiche > .pqs-fiche__surtitre) { justify-content: center; white-space: nowrap; }
  .page-template-page-ville :is(.pqs--routes .pqs-studio__texte > .pqs-fiche__surtitre, .vn-visite--fiche > .pqs-fiche__surtitre)::after { flex: 0 1 4rem; min-width: 1.25rem; }
  .page-template-page-ville :is(.pqs--routes .pqs-studio__texte > .pqs-fiche__surtitre, .vn-visite--fiche > .pqs-fiche__surtitre)::before { content: ""; flex: 0 1 4rem; min-width: 1.25rem; height: 1px; background: rgb(117 61 64 / 0.45); }
  .page-template-page-ville .pqs--routes .pqs__titre,
  .page-template-page-ville .pqs-routes__lieu,
  .page-template-page-ville .pq--ville .pq__machine-texte > h2,
  .page-template-page-ville .pq--ville .pq__machine-texte > p,
  .page-template-page-ville .vn-visite--fiche .vn__titre,
  .page-template-page-ville .vn-visite--fiche .vn__intro { text-align: center; }
  .page-template-page-ville .pq--ville .pq__machine-texte > p { margin-inline: auto; }
  .page-template-page-ville .vn-visite--fiche .vn__intro { padding-inline: 1.5rem; }
  .page-template-page-ville .pqs-routes__horaires { justify-content: center; }
}

/* La voiture d'abord (Cormeilles, 27 octobre 2026 : la plupart des Paulettes
   viennent en voiture) : le temps par quartier, une ligne chacun, le temps en
   gras à droite. Et les transports en choix (deux bus possibles), sans
   numéros, plus discrets. */
.pqs-route__quartiers { display: grid; gap: 0; margin: 0.875rem 0 0; padding: 0; list-style: none; }
.pqs-route__quartiers li { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; border-top: 1px dashed rgb(94 32 40 / 0.16); font-size: 0.9375rem; line-height: 1.35; color: var(--ink); }
.pqs-route__quartiers li:first-child { border-top: 0; }
.pqs-route__quartiers strong { font-family: "Marcellus", Georgia, serif; font-weight: 400; font-size: 1.25rem; line-height: 1; color: var(--vin-800); white-space: nowrap; }
.pqs-route__choix { display: grid; gap: 0.625rem; margin: 0.875rem 0 0; padding: 0; list-style: none; }
.pqs-route__choix li { display: grid; gap: 0.125rem; font-size: 0.9375rem; line-height: 1.45; color: var(--gray-700); }
.pqs-route__choix strong { font-weight: 600; color: var(--ink); }
.pqs-route--choix { background: rgb(253 249 245 / 0.6); box-shadow: none; }