/* Briques de l'option audacieuse (refonte 2026-10-18, retenue par Jorge), communes à Chambres d'hôtes et Villa entière.
   Sorties de pages/chambres.css le 2026-10-19 ; chargées par les vues qui utilisent les modèles app/Views/blocks/audace/. */

/* =========================================================================
   Refonte, option audacieuse retenue par Jorge (2026-10-18), intégrée hors maquette.
   Modèles : app/Views/blocks/audace/*.php ; mouvement : js/blocks/audace.js.
   ========================================================================= */

/* Entête : titre en escalier, photo qui part d'un rond et s'ouvre au défilement (référence : Masia Mont Rural) */
.page-hero.is-audace .page-hero-inner { row-gap: clamp(32px, 5vw, 64px); }
.page-hero.is-audace .page-hero-inner > * { grid-column: 1 / -1; }
.page-hero.is-audace h1 { font-size: clamp(52px, 9vw, 150px); line-height: 0.9; }
.page-hero.is-audace .ep-line { display: block; }
.page-hero.is-audace .ep-line:nth-child(2) { padding-left: 12%; }
.page-hero.is-audace .ep-line:nth-child(3) { text-align: right; }
.page-hero.is-audace .ep-photo { margin: 0 calc(var(--gutter) * -1); aspect-ratio: 3 / 2; overflow: hidden; background: var(--linen-200); }
.page-hero.is-audace .ep-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.page-hero.is-audace .ep-text { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px clamp(32px, 5vw, 80px); align-items: end; }
.page-hero.is-audace .ep-text .lede { margin: 0; }
@media (max-width: 720px) {
  .page-hero.is-audace .page-hero-inner { padding-top: 40px; }
  .page-hero.is-audace .ep-photo { aspect-ratio: 4 / 5; }
  .page-hero.is-audace .ep-text { grid-template-columns: 1fr; }
}

/* Section 2, intro : titre en escalier, chiffres en grandes lignes (référence : Masia Mont Rural « Who our retreat is for ») */
.s2a-intro .s2a-title {
  margin: 0 0 clamp(40px, 6vw, 72px);
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(32px, 7.4vw, 104px); line-height: 0.98; letter-spacing: -0.01em; color: var(--ink-900);
}
.s2a-intro .s2a-title em { font-style: italic; color: var(--sage-700); }
/* Lignes posées par js/blocks/audace.js (découpage selon la largeur mesurée ; sans script, titre normal) */
[data-stair] .s2a-line { display: block; }
[data-stair] .s2a-in { white-space: nowrap; }
[data-stair] .s2a-in.is-long { white-space: normal; overflow-wrap: anywhere; } /* mot plus large que l'écran (js/blocks/audace.js) */
[data-stair] .s2a-line:nth-child(2) { padding-left: 10%; }
[data-stair] .s2a-line:nth-child(n+3) { padding-left: 20%; }
[data-stair] .s2a-line:last-child { text-align: right; padding-left: 0; }
/* Titre qui tient sur une seule ligne : pas d'escalier, il reste à gauche */
[data-stair] .s2a-line:only-child { text-align: left; }
.s2a-intro .s2a-body { display: grid; gap: clamp(40px, 5vw, 72px); }
.s2a-intro .s2a-text { margin: 0; max-width: 62ch; font-size: 15.5px; line-height: 1.6; color: var(--ink-700); }
.s2a-intro .s2a-text + .s2a-text { margin-top: 16px; }
.s2a-intro .s2a-facts { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink-900); }
.s2a-intro .s2a-fact { border-bottom: var(--hairline-strong); }
.s2a-intro .s2a-fact > a, .s2a-intro .s2a-fact > div { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 18px 0 20px; color: inherit; text-decoration: none; }
.s2a-intro .s2a-fact-label { font-family: var(--font-mono); font-weight: 500; font-size: 11.5px; letter-spacing: 0; text-transform: uppercase; color: var(--stone-500); }
.s2a-intro .s2a-fact-value { font-family: var(--font-display); font-size: clamp(26px, 3vw, 36px); line-height: 1.1; color: var(--ink-900); }
.s2a-intro .s2a-fact > a .s2a-fact-value::after { content: " →"; font-family: var(--font-sans); font-size: 0.6em; color: var(--sage-700); }
@media (hover: hover) and (pointer: fine) {
  .s2a-intro .s2a-fact > a .s2a-fact-value { transition: color .2s ease; }
  .s2a-intro .s2a-fact > a:hover .s2a-fact-value { color: var(--sage-700); }
}
@media (min-width: 900px) {
  .s2a-intro .s2a-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .s2a-intro .s2a-fact > a, .s2a-intro .s2a-fact > div { grid-template-columns: 11rem 1fr; align-items: baseline; gap: 24px; }
}

/* Section 2, séjours : aplat olive, cartes lin qui s'empilent (référence : Masia Mont Rural « Rental formats ») */
.s2a-stays { background: var(--olive-900); color: var(--linen-50); position: relative; overflow: clip; }
.s2a-stays .s2a-wrap { display: grid; gap: clamp(40px, 6vw, 96px); }
.s2a-stays .s2a-head h2 { margin: 0; font-family: var(--font-display); font-weight: 400; color: var(--linen-50); font-size: clamp(36px, 5.2vw, 72px); line-height: 1.02; max-width: 16ch; }
.s2a-stays .s2a-head h2 em { color: var(--sage-200); }
.s2a-stays .s2a-head p { margin: 20px 0 0; max-width: 54ch; font-size: 15.5px; line-height: 1.6; color: color-mix(in oklab, var(--linen-50) 86%, var(--olive-900)); }
.s2a-stays .s2a-head p + p { margin-top: 14px; }
.s2a-stays .s2a-cards { display: grid; gap: 20px; padding-bottom: 8vh; }
.s2a-stays .s2a-card {
  position: sticky; top: calc(var(--vp-nav-h, 101px) + 16px + var(--i, 0) * 14px);
  background: var(--linen-50); color: var(--ink-700); padding: clamp(24px, 3vw, 40px);
  transform-origin: 50% 0; box-shadow: 0 -1px 0 color-mix(in oklab, var(--ink-900) 14%, transparent);
}
.s2a-stays .s2a-card h3 { margin: 0; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(32px, 4vw, 52px); line-height: 1.02; color: var(--ink-900); }
.s2a-stays .s2a-card .s2a-sub { display: block; margin: 12px 0 0; font-family: var(--font-mono); font-weight: 500; font-size: 11.5px; letter-spacing: 0; text-transform: uppercase; color: var(--terra-600); }
.s2a-stays .s2a-card .s2a-card-text { margin: 20px 0 0; padding-top: 18px; border-top: var(--hairline); font-size: 15.5px; line-height: 1.6; }
.s2a-stays .s2a-card ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.s2a-stays .s2a-card li { position: relative; padding-left: 20px; font-size: 15.5px; line-height: 1.6; }
/* Puce alignée sur la première ligne */
.s2a-stays .s2a-card li::before { content: ""; position: absolute; left: 2px; top: 0.66em; width: 6px; height: 6px; border-radius: 50%; background: var(--sage-500); }
@media (min-width: 900px) {
  .s2a-stays .s2a-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; }
  .s2a-stays .s2a-head { position: sticky; top: calc(var(--vp-nav-h, 101px) + 40px); }
}
@media (prefers-reduced-motion: reduce) {
  .s2a-stays .s2a-card { position: static; }
}

/* Préambule « Entrez… » et chambres : repris de la maquette s3 retenue par Jorge
   (référence : Masia Mont Rural, rangée « What's inside ») */
/* =========================================================================
   Préambule : grand titre sur deux lignes décalées, texte en colonne étroite à droite
   ========================================================================= */
.s3a-pre .s3a-pre-title {
  margin: 0; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(44px, 10vw, 150px); line-height: 0.95; letter-spacing: -0.01em; color: var(--ink-900);
}
.s3a-pre .s3a-pre-title span { display: block; }
.s3a-pre .s3a-pre-title span + span { text-align: right; }
.s3a-pre .s3a-pre-title em { color: var(--sage-700); }
.s3a-pre .s3a-pre-text { margin: clamp(28px, 4vw, 48px) 0 0 auto; max-width: 46ch; font-size: 15.5px; line-height: 1.6; color: var(--ink-700); }

/* =========================================================================
   Chambre : nom géant, rangée de photos qui défile au doigt, fiche à filets
   ========================================================================= */
.s3a-room .s3a-top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; border-bottom: 1px solid var(--ink-900); padding-bottom: 10px; }
.s3a-room .s3a-num, .s3a-room .s3a-count { margin: 0; font-family: var(--font-mono); font-weight: 500; font-size: 11.5px; letter-spacing: 0; text-transform: uppercase; color: var(--stone-500); }
.s3a-room .s3a-count { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink-900); }
/* Sous la rangée, en bas à gauche de la 1re photo (flèche gauche alignée sur le bord de la photo) */
.s3a-room .s3a-nav { display: flex; align-items: center; gap: 4px; margin: 8px 0 0 -13px; }
.s3a-room .s3a-arrow {
  appearance: none; border: 0; background: transparent; cursor: pointer; color: var(--ink-900);
  width: 44px; height: 44px; font-family: var(--font-sans); font-size: 18px;
  transition: color .2s ease, transform .16s ease-out;
}
.s3a-room .s3a-arrow:disabled { color: var(--stone-400); cursor: default; }
.s3a-room .s3a-arrow:not(:disabled):active { transform: scale(0.94); }
.s3a-room .s3a-arrow:focus-visible { outline: 2px solid var(--terra-500); outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) { .s3a-room .s3a-arrow:not(:disabled):hover { color: var(--sage-700); } }
.s3a-room .s3a-name {
  margin: clamp(16px, 2vw, 24px) 0 clamp(20px, 3vw, 36px);
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(64px, 17vw, 240px); line-height: 0.86; letter-spacing: -0.02em; color: var(--ink-900);
}
.s3a-room .s3a-name em { font-style: italic; }
.s3a-room .s3a-name .w { display: block; }
.s3a-room .s3a-name .w + .w { padding-left: 18%; color: var(--sage-700); }

/* Rangée de photos : défile au doigt (scroll-snap), déborde jusqu'aux bords de l'écran */
.s3a-room .s3a-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: 86%; gap: 10px;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter);
  scroll-padding: 0 var(--gutter); scrollbar-width: none;
}
.s3a-room .s3a-track::-webkit-scrollbar { display: none; }
.s3a-room .s3a-track:focus-visible { outline: 2px solid var(--terra-500); outline-offset: 3px; }
.s3a-room .s3a-track figure { margin: 0; scroll-snap-align: start; aspect-ratio: 4 / 3; overflow: hidden; background: var(--linen-200); }
.s3a-room .s3a-track img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) and (pointer: fine) {
  .s3a-room .s3a-track img { transition: transform .7s cubic-bezier(0.23, 1, 0.32, 1); }
  .s3a-room .s3a-track figure:hover img { transform: scale(1.04); }
}

.s3a-room .s3a-body { display: grid; gap: 24px; margin-top: clamp(28px, 4vw, 56px); }
.s3a-room .s3a-tagline { margin: 0; font-family: var(--font-mono); font-weight: 500; font-size: 11.5px; letter-spacing: 0; text-transform: uppercase; color: var(--terra-600); }
.s3a-room .s3a-text { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ink-700); max-width: 62ch; }
.s3a-room .s3a-text a { display: inline-block; margin-top: 6px; }
.s3a-room .s3a-equip-label { margin: 0 0 4px; font-family: var(--font-mono); font-weight: 500; font-size: 11.5px; letter-spacing: 0; text-transform: uppercase; color: var(--sage-700); }
/* Équipements : une ligne par équipement, filet entre chaque (les pictos ronds sauge de .ch-equip sont gardés) */
.s3a-room ul.ch-equip.s3a-equip { display: block; margin: 0; padding: 0; border-top: 1px solid var(--ink-900); font-size: 15.5px; line-height: 1.4; }
.s3a-room ul.ch-equip.s3a-equip li { display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 8px 0; border-bottom: var(--hairline-strong); }
.s3a-room ul.ch-equip.s3a-equip li::after { content: none; }
.s3a-room ul.ch-equip.s3a-equip li:not(:has(svg))::before {
  content: ""; flex: none; box-sizing: border-box; width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--sage-500);
}
@media (min-width: 900px) {
  .s3a-room .s3a-track { grid-auto-columns: 58%; gap: 16px; }
  .s3a-room .s3a-body { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: clamp(40px, 6vw, 112px); align-items: start; }
  .s3a-room .s3a-body > .s3a-tagline { grid-column: 1 / -1; }
}


/* Salle de bain : photo en portrait qui s'ouvre comme une porte (repris de la maquette s4 retenue par Jorge ;
   référence : Masia Mont Rural, photo révélée par une forme découpée) */
.s4a { display: grid; gap: clamp(28px, 4vw, 48px); }
.s4a .s4a-title {
  margin: 0; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(40px, 6vw, 88px); line-height: 0.98; letter-spacing: -0.01em; color: var(--ink-900);
}
.s4a .s4a-title em { color: var(--sage-700); }
/* Photo en portrait entier, bord à bord sur téléphone ; « porte » qui s'ouvre (clip-path piloté par GSAP) */
.s4a .s4a-photo {
  margin: 0 calc(var(--gutter) * -1); aspect-ratio: 2 / 3; overflow: hidden; background: var(--linen-200);
}
.s4a .s4a-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.s4a .s4a-text p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ink-700); max-width: 60ch; }
.s4a .s4a-text p + p { margin-top: 18px; padding-top: 18px; border-top: var(--hairline); }
@media (min-width: 900px) {
  .s4a { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); column-gap: clamp(40px, 6vw, 112px); align-items: start; }
  /* Le texte est plus court que la photo : pas de photo fixe, la photo garde son format portrait à hauteur d'écran */
  .s4a .s4a-photo {
    margin: 0; grid-row: 1 / span 2; justify-self: start;
    height: min(calc(100vh - var(--vp-nav-h, 101px) - 48px), 900px); width: auto; aspect-ratio: 2 / 3;
  }
  .s4a .s4a-head, .s4a .s4a-text { grid-column: 2; }
}

/* Petit-déjeuner : composition de 3 photos jointives (repris de la maquette s5 retenue par Jorge ;
   référence : Masia Mont Rural, « Rental formats ») */
.s5a .s5a-title {
  margin: 0 0 clamp(28px, 4vw, 56px); font-family: var(--font-display); font-weight: 400;
  font-size: clamp(44px, 8vw, 128px); line-height: 0.92; letter-spacing: -0.015em; color: var(--ink-900);
}
.s5a .s5a-title span { display: block; }
.s5a .s5a-title span + span { padding-left: 14%; }
.s5a .s5a-title em { color: var(--sage-700); }

/* Composition sans case vide : téléphone [A A][B C], ordinateur [A A B][A A C] */
.s5a .s5a-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: dense; gap: 6px;
  margin: 0 calc(var(--gutter) * -1);
}
.s5a .s5a-grid figure { margin: 0; overflow: hidden; background: var(--linen-200); }
.s5a .s5a-grid img { display: block; width: 100%; height: 100%; object-fit: cover; }
.s5a .s5a-grid .a { grid-column: span 2; aspect-ratio: 3 / 2; }
.s5a .s5a-grid .b, .s5a .s5a-grid .c { aspect-ratio: 1; }
@media (hover: hover) and (pointer: fine) {
  .s5a .s5a-grid img { transition: transform .7s cubic-bezier(0.23, 1, 0.32, 1); }
  .s5a .s5a-grid figure:hover img { transform: scale(1.04); }
}
.s5a .s5a-text { margin: clamp(28px, 4vw, 56px) 0 0; max-width: 62ch; font-size: 15.5px; line-height: 1.6; color: var(--ink-700); }
@media (min-width: 900px) {
  .s5a .s5a-grid { margin: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, clamp(180px, 18vw, 300px)); gap: 10px; }
  .s5a .s5a-grid .a { grid-column: 1 / span 2; grid-row: 1 / span 2; aspect-ratio: auto; }
  .s5a .s5a-grid .b { grid-column: 3; grid-row: 1; aspect-ratio: auto; }
  .s5a .s5a-grid .c { grid-column: 3; grid-row: 2; aspect-ratio: auto; }
  .s5a .s5a-text { margin-left: auto; margin-right: 0; }
}
/* Une seule photo (les 2 photos ajoutées absentes du serveur) : pleine largeur */
.s5a .s5a-grid .a:only-child { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 3 / 2; }
.s5a .s5a-items { list-style: none; margin: 16px 0 0; padding: 0; max-width: 62ch; display: grid; gap: 8px; font-size: 15.5px; line-height: 1.6; color: var(--ink-700); }
@media (min-width: 900px) { .s5a .s5a-items { margin-left: auto; margin-right: 0; } }

/* Équipements inclus : 10 tuiles jointives en damier (repris de la maquette s6 retenue par Jorge ;
   référence : Masia Mont Rural, « What is inside ») */
.s6a .s6a-head { margin-bottom: clamp(32px, 5vw, 64px); }
.s6a .s6a-head h2 {
  margin: 0; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(38px, 6vw, 96px); line-height: 0.98; letter-spacing: -0.01em; color: var(--ink-900); max-width: 18ch;
}
.s6a .s6a-head h2 em { color: var(--sage-700); }
.s6a .s6a-head p { margin: 16px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--ink-700); }

/* Tuiles jointives : téléphone 2 × 5, ordinateur 5 × 2 (10 équipements, aucune case vide) ; fonds en damier */
.s6a .s6a-grid {
  list-style: none; margin: 0 calc(var(--gutter) * -1); padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: dense;
}
.s6a .s6a-tile {
  display: flex; flex-direction: column; justify-content: space-between; gap: 18px;
  min-height: 168px; padding: 16px 16px 18px;
  background: var(--linen-100);
}
/* Damier sur 2 colonnes : lignes impaires 1 et 2 → lin / sauge, lignes paires inversées */
.s6a .s6a-tile:nth-child(4n+2), .s6a .s6a-tile:nth-child(4n+3) { background: color-mix(in oklab, var(--sage-200) 55%, var(--linen-50)); }
.s6a .s6a-n { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 52px; line-height: 0.9; color: var(--sage-700); }
.s6a .s6a-l { font-size: 15.5px; line-height: 1.4; color: var(--ink-900); }
@media (min-width: 900px) {
  .s6a .s6a-grid { margin: 0; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .s6a .s6a-tile { min-height: 240px; padding: 22px 22px 24px; }
  /* Damier sur 5 colonnes : alternance simple (5 est impair, la 2e ligne s'inverse d'elle-même) */
  .s6a .s6a-tile:nth-child(n) { background: var(--linen-100); }
  .s6a .s6a-tile:nth-child(2n) { background: color-mix(in oklab, var(--sage-200) 55%, var(--linen-50)); }
  .s6a .s6a-n { font-size: 72px; }
}
/* Nombre impair d'éléments (modifiable dans l'admin) : la dernière tuile prend toute la ligne sur téléphone */
@media (max-width: 899px) { .s6a .s6a-tile:last-child:nth-child(odd) { grid-column: 1 / -1; } }

/* Infos pratiques : fiche pleine couleur sauge (repris de la maquette s7 retenue par Jorge ;
   référence : Masia Mont Rural, « Rental formats ») */
.s7a-section { background: var(--sage-700); color: var(--linen-50); }
.s7a .s7a-head { margin-bottom: clamp(32px, 5vw, 64px); }
.s7a .s7a-head h2 {
  margin: 0; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(40px, 7vw, 112px); line-height: 0.95; letter-spacing: -0.01em; color: var(--linen-50);
}
.s7a .s7a-head h2 em { color: var(--sage-200); }
.s7a .s7a-head p { margin: 16px 0 0; max-width: 54ch; font-size: 15.5px; line-height: 1.6; color: var(--linen-200); }

.s7a .s7a-list { margin: 0; display: grid; grid-template-columns: 1fr; border-top: 1px solid color-mix(in oklab, var(--linen-50) 55%, transparent); }
.s7a .s7a-row { padding: 18px 0 20px; border-bottom: 1px solid color-mix(in oklab, var(--linen-50) 22%, transparent); }
.s7a .s7a-row dt {
  margin: 0 0 6px; font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(26px, 3vw, 36px); line-height: 1.05; color: var(--sage-200);
}
.s7a .s7a-row dd { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--linen-50); }
.s7a .s7a-row dd strong { font-weight: 500; }
@media (min-width: 900px) {
  /* 2 colonnes de 5 lignes (ordre conservé de haut en bas, colonne par colonne) */
  .s7a .s7a-list { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: column; grid-template-rows: repeat(var(--rows, 5), auto); column-gap: clamp(40px, 6vw, 112px); }
  .s7a .s7a-row { display: grid; grid-template-columns: 12rem 1fr; gap: 20px; align-items: baseline; }
  .s7a .s7a-row dt { margin: 0; }
}

/* FAQ : une question par bloc, bloc ouvert en olive, sans numéro (repris de la maquette s8 retenue par Jorge ;
   référence : Pomegranate Health, mention honorable Awwwards 2025-07-26) */
.s8a { display: grid; gap: clamp(32px, 5vw, 64px); }
.s8a .s8a-title {
  margin: 0; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(44px, 7vw, 112px); line-height: 0.95; letter-spacing: -0.01em; color: var(--ink-900);
}
.s8a .s8a-title em { color: var(--sage-700); }

/* Une question par bloc, blocs séparés ; le bloc ouvert passe en olive */
.s8a .s8a-list { display: grid; gap: 8px; }
.s8a details {
  border: var(--hairline-strong); background: var(--linen-50);
  transition: background-color .25s ease, border-color .25s ease;
  interpolate-size: allow-keywords;
}
.s8a details[open] { background: var(--olive-900); border-color: var(--olive-900); }
.s8a summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: 1fr 28px; align-items: start; gap: 14px;
  padding: 18px 16px; min-height: 44px;
}
.s8a summary::-webkit-details-marker { display: none; }
/* Pas de numéros (retirés à la demande de Jorge, 2026-10-19) */
.s8a summary > span:first-child { font-family: var(--font-display); font-size: clamp(21px, 2vw, 26px); line-height: 1.2; color: var(--ink-900); }
.s8a summary:focus-visible { outline: 2px solid var(--terra-500); outline-offset: 3px; }
/* Signe + / − dessiné (pas d'icône externe) */
.s8a summary .icon { position: relative; width: 28px; height: 28px; margin-top: 2px; border: 1px solid currentColor; color: var(--ink-900); }
.s8a summary .icon::before, .s8a summary .icon::after { content: ""; position: absolute; left: 50%; top: 50%; background: currentColor; transform: translate(-50%, -50%); }
.s8a summary .icon::before { width: 10px; height: 1px; }
.s8a summary .icon::after { width: 1px; height: 10px; transition: transform .2s ease; }
.s8a details[open] summary > span:first-child { color: var(--linen-50); }
.s8a details[open] summary .icon { color: var(--linen-50); }
.s8a details[open] summary .icon::after { transform: translate(-50%, -50%) scaleY(0); }
.s8a .answer { padding: 0 16px 20px; font-size: 15.5px; line-height: 1.6; color: var(--linen-200); }
.s8a .answer p { margin: 0; }
.s8a .answer p + p { margin-top: 10px; }
.s8a .answer a { color: var(--linen-50); }
/* Ouverture en douceur là où le navigateur sait animer <details> (sinon ouverture directe) */
.s8a details::details-content { height: 0; overflow: clip; transition: height .3s cubic-bezier(0.23, 1, 0.32, 1), content-visibility .3s allow-discrete; }
.s8a details[open]::details-content { height: auto; }
@media (prefers-reduced-motion: reduce) {
  .s8a details, .s8a details::details-content, .s8a summary .icon::after { transition: none; }
}
@media (hover: hover) and (pointer: fine) {
  .s8a details:not([open]) summary:hover { background: var(--linen-100); }
}
@media (min-width: 900px) {
  .s8a { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); column-gap: clamp(40px, 6vw, 112px); align-items: start; }
  .s8a .s8a-head { position: sticky; top: calc(var(--vp-nav-h, 101px) + 32px); }
  .s8a summary { padding: 22px 24px; }
  .s8a .answer { padding: 0 24px 24px; }
}
.s8a .s8a-intro { margin: 20px 0 0; max-width: 38ch; font-size: 15.5px; line-height: 1.6; color: var(--stone-600); }

/* Bouton réglé dans l'admin sur un bloc prose (intro, salle de bain) */
.audace-cta { margin: 24px 0 0; }

/* =========================================================================
   Villa entière (2026-10-19, demande de Jorge : toute la page en option audacieuse). Mêmes briques que Chambres,
   plus deux sections propres à la villa (l'intérieur, la piscine) et la fiche « les espaces » en clair.
   ========================================================================= */

/* Les espaces : même fiche que les infos pratiques, en clair (fond lin), pour ne pas enchaîner deux aplats sauge */
.s7a-section.is-light { background: var(--linen-100); color: var(--ink-900); }
.s7a-section.is-light .s7a-head h2 { color: var(--ink-900); }
.s7a-section.is-light .s7a-head h2 em { color: var(--sage-700); }
.s7a-section.is-light .s7a-head p { color: var(--ink-700); }
.s7a-section.is-light .s7a-list { border-top-color: var(--ink-900); }
.s7a-section.is-light .s7a-row { border-bottom: var(--hairline-strong); }
.s7a-section.is-light .s7a-row dt { color: var(--sage-700); }
.s7a-section.is-light .s7a-row dd { color: var(--ink-700); }
@media (min-width: 900px) {
  /* Intitulés longs (« Chambre Arche (rez-de-chaussée) ») : intitulé au-dessus de la valeur, comme sur téléphone */
  .s7a-section.is-light .s7a-row { display: block; }
  .s7a-section.is-light .s7a-row dt { margin: 0 0 6px; }
}

/* L'intérieur : titre en grand, une pièce par bloc, photo qui s'ouvre comme une porte (même brique que la salle de
   bain ; référence : Masia Mont Rural, photo révélée par une forme découpée) */
.s9a { display: grid; gap: clamp(48px, 7vw, 112px); }
.s9a .s9a-title {
  margin: 0; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(40px, 6vw, 88px); line-height: 0.98; letter-spacing: -0.01em; color: var(--ink-900);
}
.s9a .s9a-title em { color: var(--sage-700); }
.s9a .s9a-intro { margin: clamp(24px, 3vw, 40px) 0 0 auto; max-width: 52ch; font-size: 15.5px; line-height: 1.6; color: var(--ink-700); }
.s9a .s9a-item { display: grid; gap: clamp(24px, 3vw, 40px); }
.s9a .s9a-photo { margin: 0 calc(var(--gutter) * -1); aspect-ratio: 4 / 5; overflow: hidden; background: var(--linen-200); }
.s9a .s9a-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.s9a .s9a-kicker { margin: 0 0 10px; font-family: var(--font-mono); font-weight: 500; font-size: 11.5px; letter-spacing: 0; text-transform: uppercase; color: var(--stone-500); }
.s9a .s9a-text h3 { margin: 0 0 18px; padding-bottom: 18px; border-bottom: var(--hairline-strong); font-family: var(--font-display); font-weight: 400; font-size: clamp(32px, 4vw, 56px); line-height: 1.02; color: var(--ink-900); }
.s9a .s9a-text h3 em { font-style: italic; }
.s9a .s9a-text p:not(.s9a-kicker) { margin: 0; max-width: 56ch; font-size: 15.5px; line-height: 1.6; color: var(--ink-700); }
@media (min-width: 900px) {
  .s9a .s9a-item { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: clamp(40px, 6vw, 112px); align-items: center; }
  .s9a .s9a-photo { margin: 0; aspect-ratio: 3 / 2; }
  /* Une pièce sur deux : photo à droite */
  .s9a .s9a-item:nth-of-type(odd) .s9a-photo { order: 2; }
  .s9a .s9a-item.no-photo { grid-template-columns: minmax(0, 1fr); }
}

/* La piscine : titre en escalier, photo bord à bord qui s'élargit jusqu'aux bords, équipements en grandes lignes à
   filets (référence : Masia Mont Rural, photo révélée par une forme découpée et listes à filets) */
.s10a { display: grid; gap: clamp(36px, 5vw, 72px); }
.s10a .s10a-title {
  margin: 0; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(36px, 7.4vw, 104px); line-height: 0.98; letter-spacing: -0.01em; color: var(--ink-900);
}
.s10a .s10a-title em { font-style: italic; color: var(--sage-700); }
.s10a .s10a-lede { margin: clamp(24px, 3vw, 40px) 0 0; max-width: 60ch; font-size: 15.5px; line-height: 1.6; color: var(--ink-700); }
.s10a .s10a-photo { margin: 0 calc(var(--gutter) * -1); aspect-ratio: 4 / 5; overflow: hidden; background: var(--linen-200); }
.s10a .s10a-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.s10a .s10a-body { display: grid; gap: clamp(32px, 5vw, 72px); }
.s10a .s10a-texts p { margin: 0; max-width: 56ch; font-size: 15.5px; line-height: 1.6; color: var(--ink-700); }
.s10a .s10a-texts .s10a-note { margin-top: 18px; padding-top: 18px; border-top: var(--hairline); color: var(--stone-600); }
.s10a .s10a-features { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink-900); }
.s10a .s10a-features li {
  padding: 16px 0 18px; border-bottom: var(--hairline-strong);
  font-family: var(--font-display); font-size: clamp(26px, 3vw, 36px); line-height: 1.1; color: var(--ink-900);
}
@media (min-width: 900px) {
  .s10a .s10a-photo { aspect-ratio: 21 / 9; }
  .s10a .s10a-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}

/* =========================================================================
   Extérieurs (2026-10-19, demande de Jorge : toute la page en option audacieuse). Mêmes briques que Chambres et
   Villa ; ajouts : repères en liens, étiquettes (pastilles) en ligne, damier sur 4 colonnes.
   ========================================================================= */
.s2a-intro .s2a-fact-value em { font-style: italic; }
/* Étiquettes de la vigne et du jardin : une ligne de petites capitales séparées par des points */
.s4a .s4a-tags, .s5a .s5a-tags {
  list-style: none; margin: 24px 0 0; padding: 18px 0 0; border-top: var(--hairline);
  display: flex; flex-wrap: wrap; gap: 6px 0;
  font-family: var(--font-mono); font-weight: 500; font-size: 11.5px; letter-spacing: 0; text-transform: uppercase; color: var(--sage-700);
}
/* Point après chaque étiquette sauf la dernière : au retour à la ligne, la ligne suivante ne commence pas par un point */
.s4a .s4a-tags li:not(:last-child)::after, .s5a .s5a-tags li:not(:last-child)::after { content: "·"; margin: 0 10px; color: var(--stone-500); }
.s5a .s5a-text--more { margin-top: 16px; }
/* Damier sur 4 colonnes (8 équipements) : comme sur 2 colonnes, une ligne sur deux inversée */
@media (min-width: 900px) {
  .s6a .s6a-grid.is-cols4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .s6a .s6a-grid.is-cols4 .s6a-tile:nth-child(n) { background: var(--linen-100); }
  .s6a .s6a-grid.is-cols4 .s6a-tile:nth-child(8n+2), .s6a .s6a-grid.is-cols4 .s6a-tile:nth-child(8n+4),
  .s6a .s6a-grid.is-cols4 .s6a-tile:nth-child(8n+5), .s6a .s6a-grid.is-cols4 .s6a-tile:nth-child(8n+7) { background: color-mix(in oklab, var(--sage-200) 55%, var(--linen-50)); }
}
/* Repères d'Extérieurs : photo large et basse (4 × 1) à droite du texte, sous le texte sur téléphone (demande de Jorge) */
.s2a-intro .s2a-facts--photos .s2a-fact-photo { margin: 6px 0 0; aspect-ratio: 4 / 1; overflow: hidden; background: var(--linen-200); }
.s2a-intro .s2a-facts--photos .s2a-fact-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) and (pointer: fine) {
  .s2a-intro .s2a-facts--photos .s2a-fact-photo img { transition: transform .7s cubic-bezier(0.23, 1, 0.32, 1); }
  .s2a-intro .s2a-facts--photos a:hover .s2a-fact-photo img { transform: scale(1.04); }
}
@media (min-width: 900px) {
  .s2a-intro .s2a-facts--photos .s2a-fact > a { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); align-items: center; }
  .s2a-intro .s2a-facts--photos .s2a-fact-photo { margin: 0; }
}
/* Piscine d'Extérieurs : créneau partagé (villa entière) surligné façon stabilo clair, dans le texte (demande de Jorge) */
.s10a .s10a-mark {
  /* Texte 20 % plus foncé que le reste du paragraphe (--stone-600 tiré de 20 % vers --ink-900), demande de Jorge */
  color: color-mix(in oklab, var(--stone-600) 80%, var(--ink-900)); padding: 0 2px;
  /* Bande de 40 à 95 % de la ligne (plus large), sauge à 60 % (20 % plus clair), demande de Jorge */
  background: linear-gradient(transparent 40%, color-mix(in oklab, var(--sage-200) 60%, var(--linen-50)) 40%, color-mix(in oklab, var(--sage-200) 60%, var(--linen-50)) 95%, transparent 95%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* =========================================================================
   Pour vous (2026-10-19, demande de Jorge : option audacieuse). Liste en grille régulière (pas de décalage, demande de
   Jorge) : téléphone 1 colonne, tablette 2, ordinateur 3 ; à la une sur toute la largeur ; sans fond de carte, filet
   foncé, photos qui partent d'un rond (taille du logo) et s'agrandissent ; bandeau final en grand titre. Mêmes classes que pages/itineraires.css (filtre inchangé).
   ========================================================================= */
.qfa .qf-grid { grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 5vw, 64px) clamp(24px, 2.4vw, 36px); }
.qfa .qf-card { grid-column: auto; background: none; gap: 14px; }
.qfa .qf-card:hover { transform: none; }
.qfa .qf-card h3 { font-size: clamp(24px, 2vw, 30px); line-height: 1.08; }
.qfa .qf-card .footer-row { border-top: 1px solid var(--ink-900); }
@media (hover: hover) and (pointer: fine) {
  .qfa .qf-card img.img { transition: transform .7s cubic-bezier(0.23, 1, 0.32, 1); }
  .qfa .qf-card:hover img.img { transform: scale(1.03); }
  .qfa .qf-card h3 { transition: color .2s ease; }
  .qfa .qf-card:hover h3 { color: var(--sage-700); }
}
/* À la une : sur toute la largeur, photo et texte côte à côte sur tablette et ordinateur */
.qfa .qf-featured { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 3vw, 48px); padding: 0; background: none; }
.qfa .qf-featured h3 { font-size: clamp(30px, 3.2vw, 48px); line-height: 1.02; margin: 0 0 14px; }
/* Adresse écartée par le filtre : cachée, à la une comprise (sans cette règle, « display: grid » ci-dessus la gardait) */
.qfa .qf-card.hidden { display: none; }
@media (min-width: 640px) {
  .qfa .qf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qfa .qf-featured { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; }
}
@media (min-width: 1024px) {
  .qfa .qf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Bandeau final : grand titre */
.qfa-ask h2.h-xl { font-size: clamp(36px, 5vw, 72px); line-height: 1; max-width: 18ch; }

/* =========================================================================
   Article (journal et sur place), 2026-10-19, demande de Jorge : option audacieuse. Titre en escalier, couverture bord
   à bord qui part d'un rond (taille du logo) et s'agrandit, chapeau en grand, intertitres à filet, citation sans
   bordure latérale (en grand italique), encart « Dormir à… » en grand. Mêmes données (vp_articles).
   ========================================================================= */
/* Entête de l'article sur toute la largeur (avant : titre dans la 1re de 2 colonnes, 5 lignes sur ordinateur) */
.art-page.is-audace .page-hero-inner { grid-template-columns: minmax(0, 1fr); }
.art-page.is-audace .art-title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(40px, 6.4vw, 104px); line-height: 0.98; letter-spacing: -0.01em; color: var(--ink-900);
  max-width: none; margin: 0;
}
.art-page.is-audace .art-cover { margin: clamp(32px, 5vw, 72px) calc(var(--gutter) * -1); aspect-ratio: 4 / 5; }
.art-page.is-audace .art-cover img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) { .art-page.is-audace .art-cover { margin-left: 0; margin-right: 0; aspect-ratio: 16 / 9; } }
.art-page.is-audace .art-body { max-width: 760px; margin-left: auto; margin-right: auto; }
.art-page.is-audace .art-lead { font-size: clamp(26px, 2.6vw, 38px); line-height: 1.25; max-width: 30ch; padding-bottom: 32px; border-bottom: 1px solid var(--ink-900); }
.art-page.is-audace .art-body h2 {
  font-weight: 400; font-size: clamp(30px, 3.4vw, 48px); line-height: 1.05;
  margin: clamp(48px, 6vw, 80px) 0 18px; padding-top: 18px; border-top: var(--hairline-strong);
}
.art-page.is-audace .art-body figure { margin: clamp(32px, 5vw, 56px) calc(var(--gutter) * -1); }
@media (min-width: 900px) { .art-page.is-audace .art-body figure { margin-left: -12%; margin-right: -12%; } }
.art-page.is-audace .art-body blockquote {
  margin: clamp(40px, 6vw, 72px) 0; padding: 0; background: none; border: 0;
  font-family: var(--font-display); font-style: italic; font-size: clamp(26px, 3vw, 40px); line-height: 1.2; color: var(--sage-700);
}
.art-page.is-audace .art-body ul { list-style: none; padding: 0; border-top: 1px solid var(--ink-900); }
.art-page.is-audace .art-body li { margin: 0; padding: 12px 0; border-bottom: var(--hairline); }
.art-page.is-audace .art-stay { max-width: 760px; font-size: clamp(24px, 2.6vw, 36px); line-height: 1.2; padding-top: 28px; border-top: 1px solid var(--ink-900); }
.art-page.is-audace .art-back { max-width: 760px; margin-left: auto; margin-right: auto; }

/* =========================================================================
   Votre hôte (2026-10-19, demande de Jorge : option audacieuse). Chapitres (prose « label-title-text ») : titre très
   grand, paragraphes à filets, titre à gauche et texte à droite sur ordinateur ; appel final (cta) en grand titre
   en escalier. Le mantra reprend la brique de l'intro (titre en escalier).
   ========================================================================= */
.s11a { display: grid; gap: clamp(24px, 4vw, 48px); }
.s11a .s11a-title {
  margin: 0; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(48px, 8vw, 128px); line-height: 0.95; letter-spacing: -0.015em; color: var(--ink-900);
}
.s11a .s11a-title em { color: var(--sage-700); }
.s11a .s11a-text { border-top: 1px solid var(--ink-900); padding-top: 18px; }
.s11a .s11a-text p { margin: 0; max-width: 60ch; font-size: 15.5px; line-height: 1.6; color: var(--ink-700); }
.s11a .s11a-text p + p { margin-top: 18px; padding-top: 18px; border-top: var(--hairline); }
@media (min-width: 900px) {
  .s11a { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: clamp(40px, 6vw, 112px); align-items: end; }
}

.s12a { display: grid; gap: clamp(28px, 4vw, 56px); }
.s12a .s12a-title {
  margin: 0; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(44px, 7.4vw, 120px); line-height: 0.96; letter-spacing: -0.015em; color: var(--ink-900);
}
.s12a .s12a-title em { font-style: italic; color: var(--sage-700); }
.s12a .s12a-action { display: grid; gap: 20px; justify-items: start; max-width: 52ch; }
.s12a .s12a-action p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ink-700); }
@media (min-width: 900px) { .s12a .s12a-action { margin-left: auto; } }

/* =========================================================================
   Avis (2026-10-19, demande de Jorge : option audacieuse). Note moyenne en très grand, les 3 autres chiffres en lignes
   à filets ; avis en grille régulière (1, 2 puis 3 colonnes, sans « masonry », comme demandé pour Pour vous) ; cartes
   sans cadre, filet foncé en haut ; appel final en grand titre. Classes ajoutées aux classes de pages/avis.css.
   ========================================================================= */
.ava-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 0; background: none; max-width: var(--container-wide); margin: 0 auto; padding: 0 var(--gutter); }
.ava-stats .av-stat { border: 0; border-top: 1px solid var(--ink-900); text-align: left; padding: 14px 0 18px; }
.ava-stats .av-stat + .av-stat { padding-left: 14px; }
.ava-stats .av-stat:first-child { grid-column: 1 / -1; padding: 0 0 clamp(24px, 4vw, 40px); border-top: 0; }
/* Chiffres en Cormorant : classe .is-figure (hors de la règle unique des étiquettes de style-proto.css) */
.ava-stats .av-stat .num { font-family: var(--font-display); font-weight: 400; font-size: clamp(32px, 4vw, 56px); line-height: 1; color: var(--ink-900); letter-spacing: -0.01em; text-transform: none; }
.ava-stats .av-stat:first-child .num { font-size: clamp(120px, 24vw, 280px); line-height: 1; letter-spacing: -0.03em; margin-bottom: 0.22em; }
.ava-stats .av-stat:first-child .num em { color: var(--sage-700); }
.ava-stats .av-stat:nth-child(2) { padding-left: 0; }
@media (min-width: 900px) {
  .ava-stats { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 48px); align-items: end; }
  .ava-stats .av-stat:first-child { grid-column: auto; padding-bottom: 0; }
  .ava-stats .av-stat + .av-stat { padding-left: 0; }
}

.ava-grid, .ava-grid.is-js { columns: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 5vw, 64px) clamp(24px, 3vw, 40px); align-items: start; }
.ava-grid .av-card { margin: 0; background: none; border: 0; border-top: 1px solid var(--ink-900); padding: 18px 0 0; }
@media (min-width: 640px) { .ava-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ava-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.ava-cta { background: var(--linen-100); color: var(--ink-900); text-align: left; }
.ava-cta h2 { max-width: var(--container-wide); margin: 0 auto 24px; font-size: clamp(44px, 7.4vw, 120px); line-height: 0.96; color: var(--ink-900); }
.ava-cta h2 em { color: var(--sage-700); }
.ava-cta p, .ava-cta .btn { margin-left: max(0px, calc((100% - var(--container-wide)) / 2)); }
.ava-cta p { color: var(--ink-700); margin-right: 0; margin-bottom: 24px; }
.ava-cta .btn { background: var(--olive-900); color: var(--linen-50); border-color: var(--olive-900); }
/* Barre offre / site / tri collée sous le menu, sur ordinateur et sur téléphone (demandes de Jorge), fond lin sur toute
   la largeur de l'écran ; groupes resserrés (le tri suit les filtres au lieu d'être rejeté à droite). */
.av-controls {
  position: sticky; top: var(--vp-nav-h, 60px); z-index: 30;
  background: var(--linen-50);
  box-shadow: 0 0 0 100vmax var(--linen-50); clip-path: inset(0 -100vmax 0 -100vmax);
  padding-top: 18px; padding-bottom: 18px; border-bottom: var(--hairline);
  column-gap: 28px;
}
.av-controls .av-sort { margin-left: 0; }
/* Téléphone : barre compacte (lignes rapprochées, liste de tri plus basse) pour garder de la place aux avis */
@media (max-width: 640px) {
  .av-controls { padding-top: 8px; padding-bottom: 8px; row-gap: 2px; }
  .av-controls .av-fgroup { gap: 4px 12px; }
  .av-controls .av-filter { padding: 0; line-height: 1.5; }
  .av-controls .av-sort select { padding-top: 3px; padding-bottom: 3px; }
}

/* =========================================================================
   Demande de réservation (2026-10-19, demande de Jorge : option audacieuse). Affichage seulement : entête en escalier
   sur toute la largeur, titres de section en très grand, prix en Cormorant ; formulaire et calendrier inchangés.
   ========================================================================= */
.dra-hero .page-hero-inner { grid-template-columns: minmax(0, 1fr); row-gap: clamp(28px, 4vw, 48px); }
.dra-hero h1 { font-size: clamp(52px, 9vw, 150px); line-height: 0.92; letter-spacing: -0.015em; max-width: none; }
.dra-hero .lede { max-width: 46ch; }
.dra h2.h-xl, .dra h2.h-lg {
  font-size: clamp(40px, 6vw, 88px); line-height: 0.98; letter-spacing: -0.01em; font-weight: 400;
}
.dra h2 em { font-style: italic; }
.dra:not(.dr-voices) h2 em { color: var(--sage-700); }
/* Prix : chiffres en Cormorant (la règle des étiquettes les mettait en mono) */
.dra .price-rows.dr-seasons .row:not(.head) .val { font-family: var(--font-display); font-weight: 400; font-size: clamp(24px, 2.4vw, 30px); letter-spacing: 0; line-height: 1; }

/* =========================================================================
   Accueil (2026-10-19, demande de Jorge : option audacieuse). Le hero garde son calque validé ; l'intro reprend la
   brique de Chambres ; carte du monde et avis inchangés (validés à l'audit du 2026-10-18).
   ========================================================================= */
/* Titres en escalier des sections de l'accueil */
.s13a-title, .s14a-title, .s15a-title {
  margin: 0; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(38px, 6.6vw, 104px); line-height: 0.98; letter-spacing: -0.01em; color: var(--ink-900);
}
.s13a-title em, .s14a-title em, .s15a-title em { font-style: italic; color: var(--sage-700); }
.s13a-intro, .s14a-intro, .s15a-intro { margin: clamp(20px, 3vw, 32px) 0 0; max-width: 52ch; font-size: 15.5px; line-height: 1.6; color: var(--ink-700); }
.s13a-head, .s14a-head, .s15a-head { margin-bottom: clamp(36px, 5vw, 72px); }

/* Deux formules : deux grands panneaux, le 2e en aplat olive */
/* Panneaux qui s'empilent au défilement (comme les séjours de Chambres et Villa, demande de Jorge) */
.s13a-grid { display: grid; gap: clamp(16px, 2vw, 24px); padding-bottom: 8vh; }
.s13a-card { display: flex; flex-direction: column; gap: 18px; padding: clamp(24px, 3.4vw, 48px); background: var(--linen-50); color: var(--ink-900); position: sticky; top: calc(var(--vp-nav-h, 101px) + 16px + var(--i, 0) * 14px); transform-origin: 50% 0; box-shadow: 0 -1px 0 color-mix(in oklab, var(--ink-900) 14%, transparent); }
.s13a-card:nth-child(2) { background: var(--olive-900); color: var(--linen-50); }
.s13a-top { margin: 0; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid currentColor;
  font-family: var(--font-mono); font-weight: 500; font-size: 11.5px; letter-spacing: 0; text-transform: uppercase; color: var(--terra-500); }
.s13a-card:nth-child(2) .s13a-top { color: var(--sage-200); border-bottom-color: color-mix(in oklab, var(--linen-50) 40%, transparent); }
.s13a-card h3 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(40px, 5.4vw, 80px); line-height: 0.98; letter-spacing: -0.01em; }
.s13a-card:nth-child(2) h3 em { color: var(--sage-200); }
.s13a-text { margin: 0; font-size: 15.5px; line-height: 1.6; color: inherit; opacity: 0.88; max-width: 60ch; }
.s13a-stats { list-style: none; margin: 0; padding: 0; border-top: 1px solid currentColor; }
.s13a-stats li { padding: 12px 0 13px; border-bottom: 1px solid color-mix(in oklab, currentColor 22%, transparent); font-family: var(--font-display); font-size: clamp(22px, 2.2vw, 28px); line-height: 1.15; }
.s13a-cta { margin: auto 0 0; padding-top: 8px; }
.s13a-card:nth-child(2) .btn { background: var(--linen-50); color: var(--olive-900); border-color: var(--linen-50); }
@media (min-width: 900px) {
  .s13a { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); column-gap: clamp(40px, 6vw, 96px); align-items: start; }
  .s13a .s13a-head { position: sticky; top: calc(var(--vp-nav-h, 101px) + 40px); margin-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) { .s13a-card { position: static; } }

/* Triangle d'Or : destinations en grandes lignes, temps de trajet en très grand */
.s14a-list { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--ink-900); }
.s14a-list li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); align-items: baseline; gap: 16px; padding: 14px 0 16px; border-bottom: var(--hairline-strong); }
.s14a-time { font-family: var(--font-display); font-size: clamp(34px, 4vw, 52px); line-height: 1; color: var(--terra-500); letter-spacing: -0.01em; white-space: nowrap; }
.s14a-place { display: flex; flex-direction: column; gap: 4px; }
.s14a-place em { font-family: var(--font-display); font-style: italic; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.1; color: var(--ink-900); }
.s14a-tag { font-family: var(--font-mono); font-weight: 500; font-size: 11.5px; letter-spacing: 0; text-transform: uppercase; color: var(--stone-500); }
@media (min-width: 900px) {
  .s14a-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(40px, 6vw, 112px); }
  /* « 45 min » en 52 px : colonne plus large (il débordait sur le nom du lieu) */
  .s14a-list li { grid-template-columns: 10rem minmax(0, 1fr); }
}

/* Rubriques « Pour vous » : photo qui part d'un rond (taille du logo) et s'agrandit, grand titre */
.s15a-grid { display: grid; gap: clamp(48px, 6vw, 72px) clamp(24px, 3vw, 40px); }
.s15a-card { display: flex; flex-direction: column; gap: 14px; color: inherit; text-decoration: none; }
.s15a-card img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: var(--linen-200); }
.s15a-kicker { font-family: var(--font-mono); font-weight: 500; font-size: 11.5px; letter-spacing: 0; text-transform: uppercase; color: var(--terra-500); }
.s15a-card h3 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(32px, 3.6vw, 52px); line-height: 1.02; color: var(--ink-900); transition: color .2s ease; }
.s15a-card h3 em { color: var(--sage-700); }
.s15a-card p { margin: 0; max-width: 56ch; font-size: 15.5px; line-height: 1.6; color: var(--ink-700); }
.s15a-more { align-self: flex-start; padding-bottom: 2px; border-bottom: 1px solid currentColor; font-size: 13.5px; color: var(--olive-900); }
@media (hover: hover) and (pointer: fine) { .s15a-card:hover h3 { color: var(--sage-700); } }
@media (min-width: 900px) { .s15a-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* 12 derniers articles (source « auto ») : grille 4 × 3 sur ordinateur, 2 colonnes sur tablette, 1 sur téléphone */
.s15a-grid.is-auto { gap: clamp(40px, 4vw, 56px) clamp(20px, 2vw, 28px); }
.s15a-grid.is-auto .s15a-card h3 { font-size: clamp(22px, 1.7vw, 26px); line-height: 1.12; }
.s15a-grid.is-auto .s15a-card p { font-size: 14.5px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (min-width: 640px) { .s15a-grid.is-auto { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .s15a-grid.is-auto { grid-template-columns: repeat(4, minmax(0, 1fr)); } }