/* =====================================================================
   Le Bosquet | maquette Web Opti, version 4 « Ferme et rivière »
   Reprise de la direction artistique « Deux mondes » : l'ouverture partage l'écran entre
   la ferme (la magnanerie sous la glycine) et la rivière (la plage sur l'Ardèche), puis
   s'ouvre sur la terrasse où tout le monde se retrouve.
   Structure : grille de 12 colonnes, en-têtes de section posés sur un filet,
   échelle typographique resserrée, bandes pleine largeur (calcaire, crème, cerise, rivière, encre),
   peu d'éléments en relief (formulaire de réservation, visionneuse). Rayon 6 px.
   Palette : calcaire, cerise (bouton principal), soie, rivière, et une couleur par gîte (son fruit).
   ===================================================================== */
:root {
  --pierre: #e9e2d4;
  --pierre-2: #ddd3c0;
  --creme: #f7f2e8;
  --encre: #1e1712;
  --encre-2: #57493d;
  --rosa: #a3233a;
  --rosa-fonce: #861c2f;
  --ocre: #c99a3a;
  --mousse: #123e39;
  /* une couleur par gîte, en dégradé de saisons (de juin à novembre) */
  --cerise: #a52b3f;
  --myrtille: #4b3c76;
  --mirabelle: #cc992f;
  --noisette: #9a6a3c;
  --chataigne: #6b3a22;
  --kiwi: #5e6a2a;
  /* rideau d'ouverture et monde « Gîtes & Animaux » : couleurs choisies par Marion (02/11/2026) */
  --aubergine: #380830;
  --lime: #a8c748;
  --rose-pale: #eee1e9;
  --rosa-clair: #c94a5e;
  --mousse-clair: #6fa597;
  --sur-sombre: #fbf3e7;
  --sur-sombre-2: #d8c9bd;
  --filet: rgba(31, 23, 25, .15);
  --filet-clair: rgba(251, 243, 231, .22);
  --ombre: 0 24px 50px -28px rgba(31, 23, 25, .45), 0 4px 12px -6px rgba(31, 23, 25, .18);

  --titre: "Unbounded", "Arial Black", "Segoe UI", sans-serif;
  --texte: "Instrument Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Échelle typographique */
  --t-h1: clamp(36px, 4.4vw, 68px);
  --t-h2: clamp(27px, 2.5vw, 40px);
  --t-h3: clamp(18px, 1.35vw, 21px);
  --t-chapo: clamp(16.5px, 1.15vw, 18.5px);

  --largeur: 1240px;
  --gouttiere: clamp(18px, 4vw, 56px);
  --bande: clamp(60px, 7vw, 104px);
  --rayon: 6px;
  --entete: 70px;
  --doux: cubic-bezier(.22, .61, .36, 1);
  --glisse: cubic-bezier(.76, 0, .24, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--entete) + 12px); }
html.lenis, html.lenis body { height: auto; }
body { margin: 0; background: var(--pierre); color: var(--encre); font-family: var(--texte); font-size: 17px; line-height: 1.6; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-family: var(--titre); font-weight: 600; letter-spacing: -.03em; line-height: 1.04; text-wrap: balance; }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); letter-spacing: -.02em; }
ul, ol { margin: 0; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--rosa); color: var(--creme); }
:focus-visible { outline: 3px solid var(--rosa-fonce); outline-offset: 3px; }
/* anneau du clavier : bordeaux sur les fonds clairs (contraste suffisant sur le calcaire), ocre sur les bandes sombres et les photos */
.bande-encre :focus-visible, .bande-mousse :focus-visible, .pied :focus-visible, .barre-mobile :focus-visible, .texte-scene :focus-visible, .entete:not(.plein):not(.toujours-plein) :focus-visible { outline-color: var(--ocre); }
.bande-rosa :focus-visible { outline-color: var(--sur-sombre); }
/* panneau de la musique (fond crème), même dans l'en-tête transparent posé sur une photo */
.entete:not(.plein):not(.toujours-plein) .son-choix :focus-visible, .son-choix :focus-visible { outline-color: var(--rosa-fonce); }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.passer { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--encre); color: var(--creme); padding: 10px 16px; border-radius: var(--rayon); }
.passer:focus { top: 12px; }

.conteneur { width: 100%; max-width: calc(var(--largeur) + 2 * var(--gouttiere)); margin-inline: auto; padding-left: max(var(--gouttiere), env(safe-area-inset-left, 0px)); padding-right: max(var(--gouttiere), env(safe-area-inset-right, 0px)); }
.bande { padding-block: var(--bande); position: relative; }
.bande-creme { background: var(--creme); }
.bande-pierre { background: var(--pierre-2); }
.bande-encre { background: var(--encre); color: var(--sur-sombre); }
.bande-rosa { background: var(--rosa); color: var(--creme); }
.bande-mousse { background: var(--mousse); color: var(--sur-sombre); }

.surtitre { font-family: var(--texte); font-weight: 700; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; }
.surtitre + h1, .surtitre + h2 { margin-top: 12px; }
.chapo { font-size: var(--t-chapo); line-height: 1.55; max-width: 48ch; }
.texte { max-width: 60ch; }
.texte p + p { margin-top: .9em; }
.bande-encre .chapo, .bande-mousse .chapo { color: var(--sur-sombre-2); }
.note { font-size: 14.5px; color: var(--encre-2); }

/* ---------- Boutons et liens ---------- */
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: var(--rayon); border: 1.5px solid transparent; font-family: var(--texte); font-weight: 700; font-size: 15.5px; text-decoration: none; cursor: pointer; transition: transform .3s var(--doux), background-color .3s, color .3s, border-color .3s; }
.bouton:hover { transform: translateY(-2px); }
.bouton-rosa { background: var(--rosa); color: var(--creme); }
.bouton-rosa:hover { background: var(--encre); }
.bouton-encre { background: var(--encre); color: var(--creme); }
.bouton-encre:hover { background: var(--rosa); }
.bouton-contour { border-color: currentColor; background: transparent; }
.bouton-contour:hover { background: var(--encre); border-color: var(--encre); color: var(--creme); }
.bande-encre .bouton-contour:hover, .bande-mousse .bouton-contour:hover, .bande-rosa .bouton-contour:hover, .texte-scene .bouton-contour:hover { background: var(--creme); border-color: var(--creme); color: var(--encre); }
.bouton svg { width: 18px; height: 18px; flex: none; }
.lien { font-weight: 700; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1.5px no-repeat; padding-bottom: 2px; transition: background-size .35s var(--doux), color .2s; }
.lien:hover { background-size: 30% 1.5px; color: var(--rosa-fonce); }
.bande-encre .lien:hover, .bande-mousse .lien:hover, .bande-rosa .lien:hover { color: var(--ocre); }

/* ---------- En-tête ---------- */
.entete { position: fixed; inset: 0 0 auto; z-index: 50; padding-top: env(safe-area-inset-top, 0px); color: var(--creme); transition: background-color .5s var(--doux), color .5s var(--doux), box-shadow .5s; }
.entete.plein, .entete.toujours-plein { background: color-mix(in srgb, var(--pierre) 92%, transparent); color: var(--encre); box-shadow: 0 1px 0 var(--filet); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.entete .conteneur { height: var(--entete); display: flex; align-items: center; gap: 22px; }
.marque { text-decoration: none; line-height: 1.05; flex: none; }
.marque b { display: block; font-family: var(--titre); font-weight: 600; font-size: 16.5px; letter-spacing: -.03em; }
.marque span { display: block; font-weight: 600; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; opacity: .8; margin-top: 3px; }
/* Logo du Bosquet (masque posé par construire.ps1) : il prend la couleur du texte autour */
.logo { display: block; background: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; }
.marque .logo { height: 54px; margin: 0; opacity: 1; }
/* sur les photos (en-tête transparent), une ombre douce garde le trait fin du logo lisible ; posée sur le lien, car un élément masqué perd sa propre ombre */
html:not(.menu-ouvert) .entete:not(.plein):not(.toujours-plein) .marque { filter: drop-shadow(0 1px 2px rgba(20, 12, 10, .55)) drop-shadow(0 0 12px rgba(20, 12, 10, .4)); }
.voile b.logo { width: min(360px, 27vw); font-size: 0; }
.pied h3 .logo { width: 220px; color: var(--creme); }
/* logos des partenaires du domaine (Eponaria, Helvia), dans la couleur du texte de leur bande */
.logo-partenaire { width: 104px; margin-bottom: 22px; }
.logo-partenaire.trait-fin { width: 140px; }
.nav { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.nav a { position: relative; padding: 8px 11px; font-weight: 600; font-size: 14.5px; text-decoration: none; white-space: nowrap; }
.nav a::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: 3px; height: 1.5px; background: var(--rosa); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--doux); }
.nav a:hover::after, .nav a[aria-current="page"]::after, .nav a[aria-current="true"]::after { transform: scaleX(1); }
.langues { display: flex; margin-left: 8px; font-size: 12.5px; font-weight: 700; letter-spacing: .06em; }
.langues button { background: none; border: 0; padding: 6px 5px; cursor: pointer; opacity: .6; }
.langues button[aria-pressed="true"] { opacity: 1; text-decoration: underline; text-decoration-color: var(--rosa); text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.entete .bouton { min-height: 40px; padding: 0 18px; font-size: 14.5px; }
.burger { display: none; margin-left: auto; width: 44px; height: 44px; border: 1.5px solid currentColor; border-radius: var(--rayon); background: none; cursor: pointer; align-items: center; justify-content: center; }
.burger span, .burger span::before, .burger span::after { display: block; width: 18px; height: 1.5px; background: currentColor; position: relative; transition: transform .3s, background .3s; }
.burger span::before, .burger span::after { content: ""; position: absolute; left: 0; }
.burger span::before { top: -6px; } .burger span::after { top: 6px; }
.menu-ouvert .burger span { background: transparent; }
.menu-ouvert .burger span::before { transform: translateY(6px) rotate(45deg); }
.menu-ouvert .burger span::after { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Rideau d'ouverture et de transition : trois lés, aubergine, rose pâle (le nom) et vert lime ---------- */
/* Les lés aubergine et lime s'écartent vers les côtés, le lé central rose pâle remonte en dernier. */
.voile { display: none; }
.js .voile { display: block; position: fixed; inset: 0; z-index: 200; pointer-events: none; }
.voile span { position: absolute; top: 0; bottom: 0; width: 33.6%; transition: transform .75s var(--glisse); }
.voile .voile-g { left: 0; background: var(--aubergine); transform: translateX(0); }
.voile .voile-c { left: 33.2%; background: var(--rose-pale); transform: translateY(0); transition-delay: .12s; }
.voile .voile-d { right: 0; background: var(--lime); transform: translateX(0); }
.voile b { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: var(--titre); font-weight: 600; font-size: 15px; letter-spacing: -.02em; color: var(--aubergine); white-space: nowrap; transition: opacity .3s; }
.voile.ouvert .voile-g { transform: translateX(-101%); }
.voile.ouvert .voile-d { transform: translateX(101%); }
.voile.ouvert .voile-c { transform: translateY(-101%); }
.voile.ouvert b { opacity: 0; }
.voile.ferme .voile-g, .voile.ferme .voile-d, .voile.ferme .voile-c { transform: none; transition-duration: .55s; transition-delay: 0s; }
.voile.ferme .voile-c { transition-delay: .06s; }
.voile.ferme b { opacity: 1; transition-delay: .25s; }

/* ---------- Ouverture de l'accueil : deux panneaux cadrés qui coulissent ---------- */
/* --x : position de la couture (en %) ; --o : ouverture des deux battants sur la cour ; --a0 à --a3 : présence des textes.
   Calculées par site.js à partir d'une progression amortie. Chaque photo vit dans son propre cadre, ancré à son bord
   extérieur et jamais agrandi : la couture découvre plus ou moins ce cadre, puis les deux battants s'écartent sur la cour. */
.deux { height: 340vh; position: relative; }
.scene { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.deux .scene { background: var(--encre); --x: 50; --o: 0; --q: 0; --a0: 1; --a1: 0; --a2: 0; --a3: 0; }
.rencontre { position: absolute; inset: 0; z-index: 0; }
.rencontre img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; transform-origin: 50% 62%; transform: scale(calc(1.05 - var(--o) * .05)); }
.rencontre::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(31, 23, 25, .42), transparent 30%, transparent 48%, rgba(31, 23, 25, .8)); }
.monde { position: absolute; inset: 0; z-index: 1; will-change: clip-path, transform; }
.monde-ferme { clip-path: inset(0 calc(100% - var(--x) * 1%) 0 0); -webkit-clip-path: inset(0 calc(100% - var(--x) * 1%) 0 0); transform: translateX(calc(var(--o) * var(--x) * -1%)); }
.monde-riviere { clip-path: inset(0 0 0 calc(var(--x) * 1%)); -webkit-clip-path: inset(0 0 0 calc(var(--x) * 1%)); transform: translateX(calc(var(--o) * (100 - var(--x)) * 1%)); }
.cadre-monde { position: absolute; top: 0; bottom: 0; width: 66%; overflow: hidden; }
.monde-ferme .cadre-monde { left: 0; }
.monde-riviere .cadre-monde { right: 0; }
.cadre-monde img { width: 100%; height: 100%; object-fit: cover; }
.monde-ferme img { object-position: 46% 58%; }
.monde-riviere img { object-position: 52% 40%; }
.cadre-monde::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(31, 23, 25, .42), transparent 26%, transparent 60%, rgba(31, 23, 25, .58)); }
.nom-monde { position: absolute; z-index: 2; bottom: calc(6vh + var(--pied-ecran, 0px)); margin: 0; transform: translateX(-50%); font-family: var(--titre); font-weight: 700; font-size: clamp(30px, 4.6vw, 80px); letter-spacing: -.045em; line-height: .9; color: var(--creme); white-space: nowrap; opacity: calc(1 - var(--o) * 2); }
.monde-ferme .nom-monde { left: calc(var(--x) * .5%); }
.monde-riviere .nom-monde { left: calc(var(--x) * 1% + (100 - var(--x)) * .5%); }
/* Boutons d'écoute posés sur chaque volet : la Gnossienne côté ferme, la Rêverie côté rivière */
.ecoute { position: absolute; z-index: 3; bottom: calc(6vh + var(--pied-ecran, 0px) + clamp(30px, 4.6vw, 80px) * .9 + 18px); transform: translateX(-50%); display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px 9px 12px; border-radius: 6px; border: 1px solid rgba(251, 243, 231, .45); background: rgba(31, 23, 25, .38); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--creme); font: 600 14px var(--texte); white-space: nowrap; cursor: pointer; opacity: calc(1 - var(--o) * 2); transition: background-color .3s, border-color .3s; }
.ecoute:hover { background: rgba(31, 23, 25, .62); border-color: var(--creme); }
.ecoute:focus-visible { outline: 2px solid var(--ocre); outline-offset: 3px; }
.monde-ferme .ecoute { left: calc(var(--x) * .5%); }
.monde-riviere .ecoute { left: calc(var(--x) * 1% + (100 - var(--x)) * .5%); }
.ecoute .barres { height: 13px; gap: 2px; }
.ecoute .barres i { width: 2.5px; }
.ecoute-etat { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.ecoute b { font-family: var(--titre); font-weight: 600; letter-spacing: -.02em; }
.ecoute .on, .ecoute[aria-pressed="true"] .off { display: none; }
.ecoute[aria-pressed="true"] .on { display: inline; }
.monde-ferme .ecoute[aria-pressed="true"] { background: var(--aubergine); border-color: var(--aubergine); }
.monde-riviere .ecoute[aria-pressed="true"] { background: var(--lime); border-color: var(--lime); color: var(--aubergine); }
.ecoute.joue .barres i { animation: barre 1.1s var(--doux) infinite alternate; }
.ecoute.joue .barres i:nth-child(2) { animation-delay: -.45s; animation-duration: .9s; }
.ecoute.joue .barres i:nth-child(3) { animation-delay: -.8s; animation-duration: 1.3s; }.couture { position: absolute; z-index: 4; top: 0; bottom: 0; left: calc(var(--x) * 1%); width: 1px; background: rgba(251, 243, 231, .8); opacity: calc(1 - var(--o) * 4); }
.texte-scene { position: absolute; z-index: 6; color: var(--creme); text-shadow: 0 1px 22px rgba(31, 23, 25, .32); }
.texte-scene .bouton { text-shadow: none; }
.texte-scene .sous { margin-top: 14px; font-size: clamp(15.5px, 1.1vw, 17.5px); max-width: 40ch; }
.texte-scene h1, .texte-scene h2 { margin-top: 12px; }
.t-0 { left: 50%; top: 50%; width: min(620px, 86vw); text-align: center; opacity: var(--a0); transform: translate(-50%, calc(-50% + (1 - var(--a0)) * -24px)); }
.t-0::before { content: ""; position: absolute; inset: -22% -16%; z-index: -1; background: radial-gradient(closest-side, rgba(31, 23, 25, .5), transparent); }
.t-0 h1 { font-size: clamp(26px, 2.7vw, 44px); }
.t-0 .sous { margin: 14px auto 0; }
.t-0 .indice { margin-top: 22px; display: inline-flex; flex-direction: column; align-items: center; gap: 10px; font-size: 11.5px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; }
.t-0 .indice::after { content: ""; width: 1px; height: 38px; background: linear-gradient(var(--creme), transparent); animation: indice 2.4s var(--doux) infinite; transform-origin: top; }
@keyframes indice { 0% { transform: scaleY(0); } 55% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
.t-1, .t-2 { top: 50%; max-width: 440px; }
.t-1 { left: var(--gouttiere); opacity: var(--a1); transform: translateY(calc(-50% + (1 - var(--a1)) * 26px)); }
.t-2 { right: var(--gouttiere); text-align: right; opacity: var(--a2); transform: translateY(calc(-50% + (1 - var(--a2)) * 26px)); }
.t-2 .sous { margin-left: auto; }
.t-1 h2, .t-2 h2 { font-size: clamp(26px, 2.7vw, 44px); }
.t-3 { left: var(--gouttiere); right: var(--gouttiere); bottom: calc(8vh + var(--pied-ecran, 0px)); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 22px; opacity: var(--a3); transform: translateY(calc((1 - var(--a3)) * 30px)); pointer-events: none; }
.t-3.actif { pointer-events: auto; }
.t-3 h2 { font-size: clamp(30px, 3.4vw, 54px); max-width: 15ch; }
.t-3 .actions { display: flex; flex-wrap: wrap; gap: 10px; }
.progression-scene { position: absolute; z-index: 7; left: 50%; bottom: calc(22px + var(--pied-ecran, 0px)); width: 120px; height: 2px; margin-left: -60px; background: rgba(251, 243, 231, .25); overflow: hidden; border-radius: 2px; opacity: calc(1 - var(--a3)); }
.progression-scene i { position: absolute; inset: 0; background: var(--creme); transform-origin: left; transform: scaleX(var(--q)); }

/* ---------- En-têtes des pages intérieures : deux cadres qui s'ouvrent depuis la couture ---------- */
/* Chaque photo remplit son propre cadre (58 % et 42 %) sans agrandissement ; elle se pose avec un léger recul. */
.ouverture-page { position: relative; height: clamp(460px, 68vh, 660px); overflow: hidden; color: var(--creme); background: var(--encre); isolation: isolate; }
.ouverture-page .moitie { position: absolute; top: 0; bottom: 0; overflow: hidden; }
.ouverture-page .moitie-g { left: 0; width: 58%; animation: ouvrirG 1.4s var(--glisse) .35s both; }
.ouverture-page .moitie-d { right: 0; width: 42%; animation: ouvrirD 1.4s var(--glisse) .5s both; }
.ouverture-page .moitie img { width: 100%; height: 100%; object-fit: cover; will-change: transform; transform: translateY(calc(var(--defile, 0) * 1px)); animation: poser 1.9s var(--doux) .35s both; }
@keyframes ouvrirG { from { clip-path: inset(0 0 0 100%); -webkit-clip-path: inset(0 0 0 100%); } to { clip-path: inset(0); -webkit-clip-path: inset(0); } }
@keyframes ouvrirD { from { clip-path: inset(0 100% 0 0); -webkit-clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); -webkit-clip-path: inset(0); } }
@keyframes poser { from { scale: 1.06; } to { scale: 1; } }
.ouverture-page .couture-fixe { position: absolute; z-index: 3; top: 0; bottom: 0; left: 58%; width: 1px; background: rgba(251, 243, 231, .8); transform-origin: top; animation: tracer 1.1s var(--glisse) .2s both; }
@keyframes tracer { from { transform: scaleY(0); } }
.ouverture-page::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(31, 23, 25, .48), transparent 30%, transparent 46%, rgba(31, 23, 25, .8)); pointer-events: none; }
.ouverture-page .conteneur { position: absolute; z-index: 4; left: 0; right: 0; bottom: clamp(28px, 5vh, 52px); margin: 0 auto; }
.ouverture-page h1 { font-size: var(--t-h1); font-weight: 700; letter-spacing: -.045em; line-height: .92; margin-top: 12px; }
.ouverture-page .sous { margin-top: 16px; max-width: 46ch; font-size: var(--t-chapo); }
.ouverture-page .legendes { position: absolute; z-index: 4; top: calc(var(--entete) + 22px); left: 0; right: 0; display: flex; justify-content: space-between; padding: 0 var(--gouttiere); font-size: 11.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
.fil { font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.fil a { text-decoration: none; opacity: .8; }
.fil a:hover { opacity: 1; text-decoration: underline; }
.js .ouverture-page .fil, .js .ouverture-page h1, .js .ouverture-page .sous, .js .ouverture-gite .fil, .js .ouverture-gite h1, .js .ouverture-gite .sous { animation: monter 1.1s var(--doux) both; }
.js .ouverture-page .fil, .js .ouverture-gite .fil { animation-delay: .75s; }
.js .ouverture-page h1, .js .ouverture-gite h1 { animation-delay: .85s; }
.js .ouverture-page .sous, .js .ouverture-gite .sous { animation-delay: 1s; }
@keyframes monter { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
/* Les animations d'en-tête attendent l'ouverture du volet, c'est-à-dire que les photos soient prêtes (classe .pret posée par site.js) */
.js:not(.pret) .ouverture-page .moitie, .js:not(.pret) .ouverture-page .moitie img, .js:not(.pret) .ouverture-page .couture-fixe,
.js:not(.pret) .ouverture-gite > img, .js:not(.pret) .ouverture-gite .couleur,
.js:not(.pret) .ouverture-page .fil, .js:not(.pret) .ouverture-page h1, .js:not(.pret) .ouverture-page .sous,
.js:not(.pret) .ouverture-gite .fil, .js:not(.pret) .ouverture-gite h1, .js:not(.pret) .ouverture-gite .sous { animation-play-state: paused; }

/* En-tête d'un gîte : la photo dans son cadre, à côté de la bande de couleur (jamais dessous) */
.ouverture-gite { --bande-c: max(9vw, 64px); position: relative; height: clamp(480px, 76vh, 740px); overflow: hidden; color: var(--creme); background: var(--encre); }
.ouverture-gite > img { position: absolute; top: 0; left: 0; width: calc(100% - var(--bande-c)); height: 100%; object-fit: cover; will-change: transform; transform: translateY(calc(var(--defile, 0) * 1px)); animation: poser 1.9s var(--doux) .2s both; }
.ouverture-gite::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(31, 23, 25, .48), transparent 30%, transparent 45%, rgba(31, 23, 25, .82)); }
.ouverture-gite .couleur { position: absolute; z-index: 2; right: 0; top: 0; bottom: 0; width: var(--bande-c); background: var(--c, var(--rosa)); animation: glisser 1.3s var(--glisse) .4s both; }
@keyframes glisser { from { transform: translateX(100%); } }
.ouverture-gite .couleur span { position: absolute; bottom: 6vh; left: 50%; writing-mode: vertical-rl; transform: translateX(-50%) rotate(180deg); font-family: var(--titre); font-weight: 600; font-size: clamp(15px, 1.3vw, 20px); letter-spacing: -.02em; color: var(--sur-c, var(--creme)); white-space: nowrap; }
.ouverture-gite .conteneur { position: absolute; z-index: 3; left: 0; right: var(--bande-c); width: auto; bottom: clamp(28px, 5vh, 52px); max-width: none; }
.ouverture-gite h1 { font-size: var(--t-h1); font-weight: 700; letter-spacing: -.045em; line-height: .92; margin-top: 12px; }
.ouverture-gite .sous { margin-top: 16px; max-width: 46ch; font-size: var(--t-chapo); }

/* ---------- En-têtes de section : un filet, le titre à gauche, le propos à droite ---------- */
.tete-section { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px 24px; align-items: end; padding-top: 18px; border-top: 1px solid var(--filet); margin-bottom: clamp(30px, 3.6vw, 48px); }
.tete-section > div:first-child { grid-column: 1 / span 6; }
.tete-section > :not(:first-child) { grid-column: 8 / span 5; }
.tete-section .lien { justify-self: end; }
.bande-encre .tete-section, .bande-mousse .tete-section, .bande-rosa .tete-section { border-top-color: var(--filet-clair); }
.tete-simple { padding-top: 18px; border-top: 1px solid var(--filet); margin-bottom: clamp(28px, 3.4vw, 44px); max-width: none; }
.tete-simple .chapo { margin-top: 14px; }

/* ---------- Accueil : chiffres clés ---------- */
.intro { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: center; }
.intro .propos { grid-column: 1 / span 6; }
.intro .propos h2 { font-size: clamp(24px, 2.2vw, 34px); }
.intro .propos p { margin-top: 16px; max-width: 52ch; color: var(--encre-2); }
.intro .chiffres { grid-column: 8 / span 5; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--filet); }
.intro .chiffres div { padding: 16px 0 14px; border-bottom: 1px solid var(--filet); display: grid; gap: 2px; }
.intro .chiffres div:nth-child(even) { border-left: 1px solid var(--filet); padding-left: 20px; }
.intro .chiffres b { font-family: var(--titre); font-weight: 600; font-size: clamp(22px, 1.9vw, 30px); letter-spacing: -.04em; line-height: 1.1; }
.intro .chiffres span { font-size: 14.5px; color: var(--encre-2); }

/* ---------- Les maisons (tuiles) ---------- */
.maisons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.maison { display: grid; gap: 14px; text-decoration: none; color: inherit; }
.maison-photo { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--rayon); }
.maison-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--doux); }
.maison:hover .maison-photo img, .maison:focus-visible .maison-photo img { transform: scale(1.05); }
.maison-photo .nb { position: absolute; top: 12px; left: 12px; background: rgba(31, 23, 25, .62); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); color: var(--creme); font-family: var(--titre); font-weight: 600; font-size: 14px; letter-spacing: -.02em; padding: 5px 9px; border-radius: 4px; border: 1px solid rgba(251, 243, 231, .22); }
.maison-info { display: grid; gap: 3px; padding-top: 12px; border-top: 3px solid var(--c, var(--rosa)); position: relative; }
.maison-info::before { content: ""; position: absolute; left: 0; top: -3px; height: 3px; width: 0; background: var(--encre); transition: width .6s var(--doux); }
.maison:hover .maison-info::before { width: 100%; }
.maison-info b { font-family: var(--titre); font-weight: 600; font-size: clamp(17px, 1.3vw, 20px); letter-spacing: -.025em; }
.maison-info .es { font-weight: 700; font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--encre-2); }
.maison-info .det { font-size: 15px; color: var(--encre-2); margin-top: 4px; }
.maison-info .prix { font-size: 15px; font-weight: 600; }

/* ---------- Le séjour : colonne de programme + mosaïque ---------- */
.sejour { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: start; }
.sejour .colonne { grid-column: 1 / span 4; position: sticky; top: calc(var(--entete) + 28px); padding-top: 18px; border-top: 1px solid var(--filet); }
.sejour .colonne h2 { font-size: clamp(25px, 2.3vw, 36px); }
.sejour .colonne .chapo { margin-top: 14px; color: var(--encre-2); }
.sejour .mosaique { grid-column: 5 / span 8; }
.horaires { list-style: none; margin-top: 22px; border-top: 1px solid var(--filet); }
.horaires li { display: grid; grid-template-columns: 52px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--filet); }
.horaires .h { font-weight: 700; font-size: 14px; color: var(--rosa-fonce); }
.horaires strong { display: block; font-size: 15.5px; }
.horaires span span { display: block; font-size: 14.5px; color: var(--encre-2); line-height: 1.45; margin-top: 2px; }
.mosaique { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-auto-rows: clamp(54px, 4.6vw, 74px); gap: 10px; }
.mosaique figure { margin: 0; position: relative; overflow: hidden; border-radius: var(--rayon); }
.mosaique img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--doux); }
.mosaique figure:hover img { transform: scale(1.05); }
/* étiquettes posées sur les photos : verre dépoli foncé (encre translucide + flou), texte crème, comme les boutons d'écoute de l'ouverture */
.mosaique figcaption { position: absolute; left: 10px; bottom: 10px; background: rgba(31, 23, 25, .62); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); color: var(--creme); font-weight: 700; font-size: 12px; letter-spacing: .03em; padding: 5px 9px; border-radius: 4px; border: 1px solid rgba(251, 243, 231, .22); }
.m1 { grid-column: 1 / span 5; grid-row: 1 / span 5; }
.m2 { grid-column: 6 / span 3; grid-row: 1 / span 3; }
.m3 { grid-column: 6 / span 3; grid-row: 4 / span 2; }
.m4 { grid-column: 1 / span 3; grid-row: 6 / span 4; }
.m5 { grid-column: 4 / span 2; grid-row: 6 / span 2; }
.m6 { grid-column: 6 / span 3; grid-row: 6 / span 4; }
.m7 { grid-column: 1 / span 8; grid-row: 10 / span 3; }
.m8 { grid-column: 4 / span 2; grid-row: 8 / span 2; }

/* ---------- Vos hôtes (duo) ---------- */
.duo-hotes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.duo-hotes .photo { position: relative; overflow: hidden; margin: 0; min-height: 520px; }
.duo-hotes .photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.duo-hotes .photo figcaption { position: absolute; left: var(--gouttiere); bottom: 20px; color: var(--creme); font-weight: 700; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; text-shadow: 0 2px 14px rgba(0,0,0,.5); }
.duo-hotes .contenu { padding: clamp(48px, 6vw, 88px) var(--gouttiere); display: flex; flex-direction: column; justify-content: center; }
.duo-hotes h2 { font-size: clamp(26px, 2.5vw, 40px); }
.deux-chiffres { display: grid; grid-template-columns: 1fr 1fr; margin-top: 26px; border-top: 1px solid var(--filet-clair); border-bottom: 1px solid var(--filet-clair); }
.deux-chiffres div { padding: 14px 0 12px; display: grid; gap: 2px; }
.deux-chiffres div + div { border-left: 1px solid var(--filet-clair); padding-left: 20px; }
.deux-chiffres b { font-family: var(--titre); font-weight: 600; font-size: clamp(24px, 2.2vw, 34px); letter-spacing: -.04em; line-height: 1.05; }
.deux-chiffres span { font-weight: 600; font-size: 14px; }
/* les trois alambics d'Helvia : année et procédé */
.trois-chiffres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 26px; border-top: 1px solid var(--filet-clair); border-bottom: 1px solid var(--filet-clair); }
.trois-chiffres div { padding: 14px 12px 14px 0; display: grid; gap: 6px; align-content: start; }
.trois-chiffres div + div { border-left: 1px solid var(--filet-clair); padding-left: 18px; }
.trois-chiffres b { font-family: var(--titre); font-weight: 600; font-size: clamp(24px, 2.2vw, 34px); letter-spacing: -.04em; line-height: 1.05; color: var(--ocre); }
.trois-chiffres span { font-weight: 600; font-size: 14px; line-height: 1.35; }
.trois-chiffres small { display: block; margin-top: 2px; font-weight: 400; font-size: 13px; color: var(--sur-sombre-2); }
.duo-hotes .texte { margin-top: 20px; max-width: 52ch; }
.duo-hotes .actions { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; font-size: 15px; }

/* ---------- Avis ---------- */
.avis-tete { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: end; padding-top: 18px; border-top: 1px solid var(--filet); margin-bottom: 30px; }
.avis-tete > div:first-child { grid-column: 1 / span 6; }
.notes { grid-column: 8 / span 5; display: grid; grid-template-columns: 1fr 1fr; }
.notes div { display: grid; gap: 2px; padding-left: 20px; border-left: 1px solid var(--filet); }
.notes b { font-family: var(--titre); font-weight: 600; font-size: clamp(28px, 2.6vw, 40px); letter-spacing: -.04em; line-height: 1; }
.notes b small { font-size: .42em; letter-spacing: 0; margin-left: 3px; }
.notes span { font-weight: 600; font-size: 14px; color: var(--encre-2); }
.citations { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.citation { margin: 0; padding: 4px 24px 0 0; display: grid; gap: 14px; align-content: start; }
.citation + .citation { border-left: 1px solid var(--filet); padding-left: 24px; }
.citation blockquote { margin: 0; font-family: var(--titre); font-weight: 400; font-size: clamp(15.5px, 1.2vw, 18px); letter-spacing: -.02em; line-height: 1.38; }
.citation figcaption { font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.etoiles { color: var(--rosa-fonce); letter-spacing: 2px; }

/* ---------- Réserver (bloc final) ---------- */
.reserver { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: center; }
.reserver > div:first-child { grid-column: 1 / span 6; }
.reserver > :last-child { grid-column: 8 / span 5; }
.reserver h2 { font-size: clamp(27px, 2.6vw, 42px); }
.reserver .chapo { margin-top: 16px; }
.contacts { margin-top: 26px; display: grid; max-width: 500px; }
.contacts a { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--filet-clair); text-decoration: none; }
.contacts a:last-child { border-bottom: 1px solid var(--filet-clair); }
.contacts svg { width: 20px; height: 20px; color: var(--ocre); }
.contacts strong { display: block; font-size: 17px; }
.contacts span span { font-size: 14px; color: var(--sur-sombre-2); }
.contacts a:hover strong { color: var(--ocre); }

/* Panneau de réservation : seul élément en relief */
.billet-ombre { display: block; }
.billet { background: var(--creme); color: var(--encre); border-radius: 8px; box-shadow: var(--ombre); overflow: hidden; }
.billet-tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 12px; padding: 14px 18px; background: var(--rosa); color: var(--creme); }
.billet-titre { font-family: var(--titre); font-weight: 600; font-size: 17px; letter-spacing: -.03em; }
.billet-saison { font-weight: 700; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; }
.billet form { display: grid; grid-template-columns: 1fr 1fr; padding: 6px 8px 10px; }
.champ { display: grid; gap: 2px; padding: 10px 10px; border-bottom: 1px solid var(--filet); min-width: 0; }
.champ:nth-child(odd) { border-right: 1px solid var(--filet); }
.champ label { font-weight: 700; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--encre-2); }
.champ input, .champ select { width: 100%; border: 0; background: transparent; padding: 2px 0; font-size: 16px; font-weight: 600; color: var(--encre); min-width: 0; }
.champ input:focus, .champ select:focus { outline: none; }
.champ:focus-within { background: color-mix(in srgb, var(--ocre) 16%, transparent); }
.champ-large { grid-column: 1 / -1; border-right: 0 !important; }
.billet .bouton { grid-column: 1 / -1; margin: 12px 2px 2px; }
.billet-note { grid-column: 1 / -1; text-align: center; font-size: 13.5px; color: var(--encre-2); padding: 8px 8px 4px; }

/* ---------- Pied de page ---------- */
.pied { background: var(--encre); color: var(--sur-sombre-2); padding-block: clamp(56px, 6vw, 84px) 24px; font-size: 15px; overflow: hidden; }
.pied a { text-decoration: none; }
.pied a:hover { color: var(--creme); text-decoration: underline; text-decoration-color: var(--rosa); }
.pied-grille { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.pied h3 { font-family: var(--texte); font-weight: 700; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--ocre); margin-bottom: 12px; }
.pied ul { list-style: none; display: grid; gap: 7px; }
.pied address { font-style: normal; line-height: 1.6; }
.pied .geant { margin-top: clamp(40px, 5vw, 64px); font-family: var(--titre); font-weight: 700; font-size: clamp(30px, 6vw, 100px); letter-spacing: -.055em; line-height: .85; color: var(--creme); white-space: nowrap; display: flex; justify-content: space-between; gap: 2vw; }
.pied .geant span:first-child { color: var(--rosa-clair); }
.pied .geant span:last-child { color: var(--mousse-clair); }
.pied-bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 28px; margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--filet-clair); font-size: 13.5px; }
.pied-bas ul { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.a-completer { background: color-mix(in srgb, var(--ocre) 30%, transparent); color: inherit; padding: 0 4px; border-radius: 3px; }

/* ---------- Barre mobile ---------- */
.barre-mobile { display: none; }

/* ---------- Gîtes : faits, galerie, corps ---------- */
.faits { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet); }
.faits div { padding: 16px 16px; display: grid; gap: 2px; }
.faits div + div { border-left: 1px solid var(--filet); }
.faits b { font-family: var(--titre); font-weight: 600; font-size: clamp(20px, 1.8vw, 28px); letter-spacing: -.04em; line-height: 1.1; }
.faits span { font-weight: 600; font-size: 13.5px; color: var(--encre-2); }
.galerie { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(110px, 11vw, 170px); gap: 10px; }
.galerie a { position: relative; overflow: hidden; border-radius: var(--rayon); display: block; }
.galerie a:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.galerie a:nth-child(6) { grid-column: span 2; }
.galerie img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--doux); }
.galerie a:hover img { transform: scale(1.05); }
.galerie .plus { position: absolute; right: 8px; bottom: 8px; background: var(--creme); color: var(--encre); font-weight: 700; font-size: 12px; padding: 5px 9px; border-radius: 4px; }
.visionneuse { position: fixed; inset: 0; z-index: 90; background: rgba(20, 14, 16, .95); display: grid; grid-template-columns: 64px minmax(0, 1fr) 64px; align-items: center; padding: max(16px, env(safe-area-inset-top, 0px)) max(8px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px)); }
.visionneuse[hidden] { display: none; }
.visionneuse figure { margin: 0; display: grid; gap: 12px; justify-items: center; }
.visionneuse img { max-height: calc(100svh - 120px); width: auto; border-radius: 6px; }
.visionneuse figcaption { color: var(--sur-sombre-2); font-weight: 600; font-size: 14px; letter-spacing: .06em; }
.visionneuse button { background: none; border: 1.5px solid rgba(251,243,231,.4); color: var(--creme); width: 46px; height: 46px; border-radius: var(--rayon); cursor: pointer; font-size: 22px; display: grid; place-items: center; justify-self: center; }
.visionneuse button:hover { border-color: var(--rosa); color: var(--rosa); }
.visionneuse .fermer { position: absolute; top: max(16px, env(safe-area-inset-top, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); }
.gite-corps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); gap: clamp(28px, 4vw, 64px); align-items: start; }
.gite-corps > div { min-width: 0; }
.gite-corps aside { position: sticky; top: calc(var(--entete) + 24px); display: grid; gap: 12px; }
.aide-billet { font-size: 14.5px; color: var(--encre-2); }
.sous-partie { margin-top: clamp(40px, 4.5vw, 64px); padding-top: 18px; border-top: 1px solid var(--filet); }
.sous-partie h2 { font-size: clamp(24px, 2.1vw, 32px); }
.colonnes-filets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 36px; margin-top: 18px; }
.colonnes-filets h3 { font-size: 17px !important; margin-bottom: 8px !important; }
.liste-filets { list-style: none; display: grid; }
.liste-filets li { padding: 10px 0; border-top: 1px solid var(--filet); display: flex; justify-content: space-between; gap: 18px; font-size: 16px; }
.liste-filets li:last-child { border-bottom: 1px solid var(--filet); }
.liste-filets li span:last-child { color: var(--encre-2); text-align: right; }
.equipements { columns: 3; column-gap: 32px; list-style: none; margin-top: 18px; }
.equipements li { break-inside: avoid; padding: 8px 0 8px 20px; border-top: 1px solid var(--filet); position: relative; font-size: 15.5px; }
.equipements li::before { content: ""; position: absolute; left: 2px; top: 16px; width: 7px; height: 7px; border-radius: 50%; background: var(--rosa); }
.tableau { overflow-x: auto; border-top: 1.5px solid var(--encre); border-bottom: 1.5px solid var(--encre); }
table { width: 100%; border-collapse: collapse; font-size: 15.5px; min-width: 680px; }
th, td { text-align: left; padding: 12px 12px; border-bottom: 1px solid var(--filet); vertical-align: top; }
thead th { font-family: var(--titre); font-weight: 600; font-size: 17px; letter-spacing: -.02em; }
tbody th { font-weight: 700; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--encre-2); }
tr:last-child th, tr:last-child td { border-bottom: 0; }

/* Rangées de gîtes (page Les gîtes) */
.rangee { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: center; padding-block: clamp(36px, 4.5vw, 64px); border-top: 1px solid var(--filet); }
.rangee:first-child { border-top: 0; padding-top: 0; }
.rangee .rangee-photo { grid-column: 1 / span 6; }
.rangee > div { grid-column: 8 / span 5; }
.rangee:nth-child(even) .rangee-photo { grid-column: 7 / span 6; order: 2; }
.rangee:nth-child(even) > div { grid-column: 1 / span 5; }
.rangee-photo { position: relative; display: block; }
.rangee-photo .cadre { position: relative; z-index: 1; border-radius: var(--rayon); overflow: hidden; aspect-ratio: 3 / 2; }
.rangee-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--doux); }
.rangee-photo:hover img { transform: scale(1.04); }
.rangee-photo .aplat { position: absolute; z-index: 0; width: 38%; height: 56%; right: -18px; bottom: -18px; background: var(--c, var(--rosa)); border-radius: var(--rayon); }
.rangee:nth-child(even) .rangee-photo .aplat { right: auto; left: -18px; }
.rangee .nb { font-family: var(--titre); font-weight: 600; font-size: clamp(30px, 2.8vw, 44px); letter-spacing: -.05em; line-height: 1; color: var(--c, var(--rosa)); }
.rangee .nb small { font-family: var(--texte); font-size: 14px; font-weight: 700; letter-spacing: 0; margin-left: 6px; color: var(--encre); }
.rangee h2 { font-size: clamp(26px, 2.4vw, 38px); margin-top: 10px; }
.rangee .es { margin-top: 6px; font-weight: 700; font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--encre-2); }
.rangee .texte { margin-top: 14px; }
.rangee .faits-mini { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 4px 16px; font-weight: 700; font-size: 14px; }
.rangee .actions { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }

/* Listes horaires sur bande sombre */
.programme { list-style: none; display: grid; margin-top: 24px; }
.programme li { display: grid; grid-template-columns: 88px 1fr; gap: 16px; padding: 13px 0; border-top: 1px solid var(--filet-clair); }
.programme li:last-child { border-bottom: 1px solid var(--filet-clair); }
.programme .h { font-family: var(--titre); font-weight: 600; font-size: 17px; letter-spacing: -.02em; color: var(--ocre); }
.programme strong { display: block; font-size: 16px; }
.programme div span { color: var(--sur-sombre-2); font-size: 15px; }
.duo-images { position: relative; padding-bottom: 14%; }
.duo-images .grande { border-radius: var(--rayon); overflow: hidden; aspect-ratio: 4 / 3; }
.duo-images .petite { position: absolute; right: -4%; bottom: 0; width: 46%; aspect-ratio: 4 / 3; border-radius: var(--rayon); overflow: hidden; outline: 6px solid var(--c-fond, var(--encre)); }
.duo-images img { width: 100%; height: 100%; object-fit: cover; }
.deux-colonnes { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: center; }
.deux-colonnes > :first-child { grid-column: 1 / span 6; }
.deux-colonnes > :last-child { grid-column: 8 / span 5; }
.deux-colonnes .chapo { margin-top: 16px; }

/* Infos pratiques */
.regles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1.5px solid var(--encre); }
.regle { padding: 22px 22px 22px 0; display: grid; gap: 6px; align-content: start; border-bottom: 1px solid var(--filet); }
.regle:not(:nth-child(3n+1)) { border-left: 1px solid var(--filet); padding-left: 22px; }
.regle b { font-family: var(--titre); font-weight: 600; font-size: clamp(22px, 1.9vw, 28px); letter-spacing: -.04em; line-height: 1.05; color: var(--rosa-fonce); }
.regle strong { font-size: 16.5px; }
.regle p { color: var(--encre-2); font-size: 15.5px; }
.faq { border-top: 1px solid var(--filet); }
.faq details { border-bottom: 1px solid var(--filet); }
.faq summary { list-style: none; cursor: pointer; padding: 18px 44px 18px 0; position: relative; font-family: var(--titre); font-weight: 500; font-size: clamp(15.5px, 1.2vw, 18px); letter-spacing: -.02em; line-height: 1.3; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-weight: 400; font-size: 26px; color: var(--rosa); transition: transform .3s var(--doux); }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details > div { padding: 0 0 18px; max-width: 68ch; color: var(--encre-2); }
.formulaire { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.formulaire .plein { grid-column: 1 / -1; }
.formulaire label { display: block; font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--encre-2); margin-bottom: 6px; }
.formulaire input, .formulaire select, .formulaire textarea { width: 100%; border: 1.5px solid var(--filet); background: var(--creme); border-radius: var(--rayon); padding: 12px 13px; font-size: 16px; }
.formulaire input:focus, .formulaire select:focus, .formulaire textarea:focus { outline: none; border-color: var(--rosa); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rosa) 20%, transparent); }
.formulaire textarea { min-height: 130px; resize: vertical; }
.formulaire .mention { font-size: 14px; color: var(--encre-2); }
.formulaire .case { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--encre); }
.formulaire .case input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--rosa); flex: none; }
.message-envoi { padding: 14px 16px; border-left: 3px solid var(--rosa); background: var(--creme); border-radius: 0 var(--rayon) var(--rayon) 0; }

/* Listes à durées (l'Ardèche autour) et chronologie */
.tournee { list-style: none; border-top: 1.5px solid var(--encre); }
.tournee li { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 22px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--filet); }
.tournee .duree { font-family: var(--titre); font-weight: 600; font-size: clamp(24px, 2.2vw, 32px); letter-spacing: -.04em; line-height: 1; color: var(--rosa-fonce); }
.tournee .duree small { display: block; margin-top: 4px; font-family: var(--texte); font-weight: 700; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--encre-2); }
.tournee strong { font-family: var(--titre); font-weight: 600; font-size: clamp(16.5px, 1.3vw, 20px); letter-spacing: -.02em; line-height: 1.2; display: block; }
.tournee p { color: var(--encre-2); margin-top: 4px; font-size: 15.5px; }
.tournee .genre { font-weight: 700; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--encre-2); white-space: nowrap; }

/* Billetterie */
.etapes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1.5px solid var(--encre); border-bottom: 1px solid var(--filet); margin-bottom: 30px; }
.etapes li { list-style: none; padding: 14px 0 12px; display: flex; gap: 10px; align-items: baseline; font-weight: 700; font-size: 14.5px; color: var(--encre-2); }
.etapes li + li { border-left: 1px solid var(--filet); padding-left: 16px; }
.etapes li b { font-family: var(--titre); font-weight: 600; font-size: 20px; letter-spacing: -.03em; }
.etapes li[aria-current="step"] { color: var(--encre); }
.etapes li[aria-current="step"] b { color: var(--rosa); }
/* suivi d'une demande ou d'un séjour (Mon séjour) : les étapes du formulaire sont masquées */
.etapes[hidden] { display: none; }
.choix-gites { display: grid; gap: 12px; }
.choix { display: grid; grid-template-columns: 132px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 10px; border: 1.5px solid var(--filet); border-radius: 8px; background: var(--creme); cursor: pointer; transition: border-color .2s, box-shadow .2s; }
.choix:hover { border-color: var(--encre-2); }
.choix input { position: absolute; opacity: 0; pointer-events: none; }
.choix:has(input:checked) { border-color: var(--rosa); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rosa) 20%, transparent); }
.choix img { width: 132px; height: 92px; object-fit: cover; border-radius: 4px; }
.choix strong { font-family: var(--titre); font-weight: 600; font-size: 18px; letter-spacing: -.02em; line-height: 1.15; display: block; }
.choix .details { font-weight: 600; font-size: 13.5px; color: var(--encre-2); }
.choix .estimation { text-align: right; }
.choix .estimation b { font-family: var(--titre); font-weight: 600; font-size: 22px; letter-spacing: -.03em; display: block; line-height: 1; }
.choix .estimation span { font-size: 13.5px; color: var(--encre-2); }
.choix.indisponible { opacity: .5; cursor: not-allowed; }
.recap { position: sticky; top: calc(var(--entete) + 24px); }
.recap .lignes { padding: 6px 18px 4px; display: grid; }
.recap .lignes div { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--filet); font-size: 15px; }
.recap .total { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 18px 6px; }
.recap .total b { font-family: var(--titre); font-weight: 600; font-size: 26px; letter-spacing: -.03em; }

/* Mentions légales */
.legal h2 { font-size: clamp(22px, 2vw, 30px); margin-top: 40px; }
.legal h2:first-child { margin-top: 0; }
.legal p, .legal li { margin-top: 10px; max-width: 72ch; }
.legal ul { padding-left: 22px; }

/* ---------- Apparitions au défilement (contenu visible sans script) ---------- */
.js-apparait [data-apparait] { opacity: 0; transform: translateY(28px); transition: opacity 1.1s var(--doux), transform 1.1s var(--doux); transition-delay: var(--retard, 0s); }
.js-apparait [data-apparait].vu { opacity: 1; transform: none; }
/* Le masque est porté par l'image : une cible entièrement masquée n'est jamais « vue » par IntersectionObserver dans Chrome */
.js-apparait [data-revele] img { clip-path: inset(100% 0 0 0); -webkit-clip-path: inset(100% 0 0 0); transform: scale(1.12); transition: clip-path 1.4s var(--glisse), -webkit-clip-path 1.4s var(--glisse), transform 1.8s var(--doux); transition-delay: var(--retard, 0s); }
.js-apparait [data-revele] figcaption { opacity: 0; transition: opacity .6s var(--doux); transition-delay: calc(var(--retard, 0s) + .9s); }
.js-apparait [data-revele].vu img { clip-path: inset(0 0 0 0); -webkit-clip-path: inset(0 0 0 0); transform: none; }
.js-apparait [data-revele].vu figcaption { opacity: 1; }
.note-maquette { position: fixed; z-index: 95; left: 50%; bottom: 90px; transform: translateX(-50%); background: var(--encre); color: var(--creme); padding: 12px 18px; border-radius: var(--rayon); font-size: 15px; box-shadow: var(--ombre); max-width: calc(100vw - 32px); }
.note-maquette[hidden] { display: none; }

/* ---------- Musique d'ambiance : bouton dans l'en-tête, barres animées pendant la lecture ---------- */
.son-zone { position: relative; display: flex; align-items: center; flex: none; }
.son { width: 40px; height: 40px; padding: 0; border-radius: var(--rayon); border: 1.5px solid currentColor; background: transparent; color: inherit; display: grid; place-items: center; cursor: pointer; opacity: .9; transition: opacity .3s, background-color .3s; }
.son:hover { opacity: 1; background: color-mix(in srgb, currentColor 12%, transparent); }
.son:focus-visible { outline: 2px solid var(--rosa-fonce); outline-offset: 3px; }
.barres { display: flex; align-items: flex-end; gap: 3px; height: 14px; }
.barres i { display: block; width: 3px; height: 3px; border-radius: 1px; background: currentColor; transition: height .4s var(--doux); }
.son.joue .barres i { animation: barre 1.1s var(--doux) infinite alternate; }
.son.joue .barres i:nth-child(2) { animation-delay: -.45s; animation-duration: .9s; }
.son.joue .barres i:nth-child(3) { animation-delay: -.8s; animation-duration: 1.3s; }
.son.joue .barres i:nth-child(4) { animation-delay: -.2s; animation-duration: 1s; }
@keyframes barre { from { height: 3px; } to { height: 14px; } }
/* Sélecteur : côté ferme (Gnossienne) ou côté rivière (Rêverie) */
.son-choix { position: absolute; z-index: 5; top: calc(100% + 12px); right: 0; width: 290px; max-width: calc(100vw - 32px); display: grid; gap: 6px; padding: 12px; border-radius: 8px; background: var(--creme); color: var(--encre); box-shadow: var(--ombre); }
.son-choix[hidden] { display: none; }
.son-choix-titre { margin: 0 2px 4px; font-weight: 700; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--encre-2); }
.son-piste { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; gap: 8px; align-items: center; width: 100%; padding: 9px 10px; text-align: left; font: inherit; color: inherit; background: transparent; border: 1px solid var(--filet); border-left: 3px solid var(--c); border-radius: 6px; cursor: pointer; transition: background-color .25s; }
.son-piste:hover { background: color-mix(in srgb, var(--c) 9%, transparent); }
.son-piste:focus-visible, .son-couper:focus-visible { outline: 2px solid var(--rosa-fonce); outline-offset: 2px; }
.son-piste[aria-pressed="true"] { background: color-mix(in srgb, var(--c) 15%, transparent); border-color: var(--c); }
.son-monde { font-weight: 700; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-texte, var(--c)); }
.son-nom { display: grid; font-family: var(--titre); font-weight: 600; font-size: 14px; letter-spacing: -.02em; line-height: 1.2; }
.son-nom small { font-family: var(--texte); font-weight: 500; font-size: 12px; letter-spacing: 0; color: var(--encre-2); margin-top: 2px; }
.son-piste .barres { height: 12px; gap: 2px; color: var(--c-texte, var(--c)); opacity: 0; transition: opacity .3s; }
.son-piste .barres i { width: 2.5px; }
.son-piste[aria-pressed="true"] .barres { opacity: 1; }
.son-piste.joue .barres i { animation: barre 1.1s var(--doux) infinite alternate; }
.son-piste.joue .barres i:nth-child(2) { animation-delay: -.45s; animation-duration: .9s; }
.son-piste.joue .barres i:nth-child(3) { animation-delay: -.8s; animation-duration: 1.3s; }
.son-pied { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 2px; padding: 0 2px; font-size: 12.5px; }
.son-couper { padding: 4px 0; border: 0; background: none; font: 600 13px var(--texte); color: var(--encre); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.son-pied a { margin-left: auto; color: var(--encre-2); }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .nav a { padding: 8px 6px; font-size: 14px; }
  .marque .logo { height: 46px; }
  .entete .conteneur { gap: 16px; }
  .maisons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pied-grille { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1020px) {
  :root { --entete: 64px; --pied-ecran: 62px; }
  .nav, .entete .bouton-entete { display: none; }
  .burger { display: inline-flex; margin-left: 10px; }
  .son-zone { margin-left: auto; }
  .son { width: 44px; height: 44px; }
  .menu-ouvert .entete { background: var(--encre); color: var(--creme); box-shadow: none; }
  .menu-ouvert .nav { display: flex; position: fixed; top: calc(var(--entete) + env(safe-area-inset-top, 0px)); left: 0; right: 0; bottom: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 14px max(var(--gouttiere), env(safe-area-inset-left, 0px)) 120px; background: var(--encre); color: var(--creme); overflow-y: auto; }
  .menu-ouvert .nav a { font-family: var(--titre); font-weight: 600; letter-spacing: -.03em; font-size: 26px; padding: 13px 0; border-bottom: 1px solid var(--filet-clair); }
  .menu-ouvert .nav a::after { display: none; }
  .menu-ouvert .nav .langues { margin: 20px 0 0; font-size: 15px; }
  .tete-section > div:first-child, .tete-section > :not(:first-child), .intro .propos, .intro .chiffres, .sejour .colonne, .sejour .mosaique, .avis-tete > div:first-child, .notes, .reserver > div:first-child, .reserver > :last-child, .deux-colonnes > :first-child, .deux-colonnes > :last-child, .rangee .rangee-photo, .rangee > div, .rangee:nth-child(even) .rangee-photo, .rangee:nth-child(even) > div { grid-column: 1 / -1; }
  .tete-section .lien { justify-self: start; }
  .rangee:nth-child(even) .rangee-photo { order: 0; }
  .sejour .colonne { position: static; }
  .citations { grid-template-columns: 1fr; }
  .citation, .citation + .citation { padding: 18px 0; border-left: 0; border-top: 1px solid var(--filet); }
  .duo-hotes { grid-template-columns: 1fr; }
  .duo-hotes .photo { min-height: 0; aspect-ratio: 4 / 3.4; }
  .gite-corps { grid-template-columns: minmax(0, 1fr); }
  .gite-corps aside, .recap { position: static; }
  .faits { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .faits div:nth-child(4) { border-left: 0; }
  .faits div:nth-child(n+4) { border-top: 1px solid var(--filet); }
  .regles { grid-template-columns: 1fr 1fr; }
  .regle:not(:nth-child(3n+1)) { border-left: 0; padding-left: 0; }
  .regle:nth-child(even) { border-left: 1px solid var(--filet); padding-left: 20px; }
  .equipements { columns: 2; }
  .billetterie { grid-template-columns: minmax(0, 1fr) !important; }
  .barre-mobile { display: grid; grid-template-columns: 1fr 1fr 1.3fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--encre); color: var(--creme); padding: 8px max(10px, env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-left, 0px)); gap: 8px; }
  .barre-mobile a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; border-radius: var(--rayon); text-decoration: none; font-weight: 700; font-size: 14.5px; border: 1px solid var(--filet-clair); }
  .barre-mobile a.principal { background: var(--rosa); border-color: var(--rosa); }
  .barre-mobile svg { width: 18px; height: 18px; }
  body { padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 700px) {
  body { font-size: 16.5px; }
  .marque b { font-size: 15px; } .marque span { font-size: 9.5px; letter-spacing: .15em; } .marque .logo { height: 46px; }
  /* Sur téléphone, les deux mondes se partagent l'écran en hauteur : la ferme en haut, la rivière en bas */
  .monde-ferme { clip-path: inset(0 0 calc(100% - var(--x) * 1%) 0); -webkit-clip-path: inset(0 0 calc(100% - var(--x) * 1%) 0); transform: translateY(calc(var(--o) * var(--x) * -1%)); }
  .monde-riviere { clip-path: inset(calc(var(--x) * 1%) 0 0 0); -webkit-clip-path: inset(calc(var(--x) * 1%) 0 0 0); transform: translateY(calc(var(--o) * (100 - var(--x)) * 1%)); }
  .cadre-monde { left: 0; right: 0; width: auto; height: 66%; }
  .monde-ferme .cadre-monde { top: 0; bottom: auto; }
  .monde-riviere .cadre-monde { top: auto; bottom: 0; }
  .monde-ferme img { object-position: 50% 50%; }
  .nom-monde { font-size: 11vw; transform: none; opacity: calc(1 - var(--o) * 7); }
  .monde-ferme .nom-monde { left: var(--gouttiere); top: calc(var(--entete) + 14px); bottom: auto; }
  .monde-riviere .nom-monde { left: auto; right: var(--gouttiere); bottom: calc(26px + var(--pied-ecran, 0px)); }
  .couture { top: calc(var(--x) * 1%); bottom: auto; left: 0; right: 0; width: auto; height: 1px; }
  .ecoute { transform: none; opacity: calc(1 - var(--o) * 7); font-size: 13px; padding: 8px 12px 8px 10px; }
  .monde-ferme .ecoute { left: var(--gouttiere); top: calc(var(--entete) + 24px + 11vw); bottom: auto; }
  .monde-riviere .ecoute { left: auto; right: var(--gouttiere); bottom: calc(26px + var(--pied-ecran, 0px) + 11vw + 12px); }
  .t-1, .t-2 { left: var(--gouttiere); right: var(--gouttiere); max-width: none; }
  .t-1 { top: 24vh; transform: translateY(calc((1 - var(--a1)) * 26px)); }
  .t-2 { top: auto; bottom: calc(9vh + var(--pied-ecran, 0px) + 11vw + 64px); transform: translateY(calc((1 - var(--a2)) * 26px)); }
  .t-1 h2, .t-2 h2 { font-size: 26px; }
  .t-1 .sous, .t-2 .sous { font-size: 15px; }
  .t-3 h2 { font-size: 30px; }
  .ouverture-page { height: 74svh; min-height: 480px; }
  .ouverture-page .moitie { left: 0; right: 0; width: auto; }
  .ouverture-page .moitie-g { top: 0; bottom: auto; height: 54%; animation-name: ouvrirGm; }
  .ouverture-page .moitie-d { top: auto; bottom: 0; height: 46%; animation-name: ouvrirDm; }
  .ouverture-page .couture-fixe { top: 54%; bottom: auto; left: 0; right: 0; width: auto; height: 1px; transform-origin: left; animation-name: tracerM; }
  .ouverture-page .legendes { display: none; }
  .ouverture-gite { --bande-c: 14vw; height: 64svh; min-height: 440px; }
  .mosaique { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 58px; gap: 8px; }
  .m1 { grid-column: 1 / -1; grid-row: span 4; } .m2 { grid-column: 1 / span 3; grid-row: span 3; } .m3 { grid-column: 4 / span 3; grid-row: span 3; }
  .m4 { grid-column: 1 / span 3; grid-row: span 4; } .m5 { grid-column: 4 / span 3; grid-row: span 2; } .m8 { grid-column: 4 / span 3; grid-row: span 2; }
  .m6 { grid-column: 1 / -1; grid-row: span 3; } .m7 { grid-column: 1 / -1; grid-row: span 3; }
  .maisons { gap: 14px; }
  .maison-info b { font-size: 16px; }
  .maison-info .det, .maison-info .prix { font-size: 13.5px; }
  .intro .chiffres div:nth-child(even) { padding-left: 14px; }
  .notes div:first-child { padding-left: 0; border-left: 0; }
  .pied-grille { grid-template-columns: 1fr; }
  .faits { grid-template-columns: 1fr 1fr; }
  .faits div:nth-child(n) { border-left: 0; border-top: 1px solid var(--filet); }
  .faits div:nth-child(even) { border-left: 1px solid var(--filet); }
  .faits div:nth-child(-n+2) { border-top: 0; }
  .galerie { grid-template-columns: 1fr 1fr; grid-auto-rows: 120px; gap: 8px; }
  .colonnes-filets { grid-template-columns: 1fr; }
  .equipements { columns: 1; }
  .regles { grid-template-columns: 1fr; }
  .regle, .regle:nth-child(even) { border-left: 0 !important; padding-left: 0 !important; padding-right: 0; }
  .tournee li { grid-template-columns: 86px minmax(0, 1fr); }
  .tournee .genre { grid-column: 2; }
  .formulaire { grid-template-columns: 1fr; }
  .choix { grid-template-columns: 92px minmax(0, 1fr); }
  .choix img { width: 92px; height: 76px; }
  .choix .estimation { grid-column: 1 / -1; text-align: left; display: flex; gap: 10px; align-items: baseline; }
  .etapes li { flex-direction: column; gap: 0; font-size: 12px; }
  .deux-chiffres div + div { padding-left: 14px; }
  .trois-chiffres div { padding-right: 8px; }
  .trois-chiffres div + div { padding-left: 12px; }
  .trois-chiffres span { font-size: 13px; }
  .logo-partenaire { width: 88px; }
  .logo-partenaire.trait-fin { width: 120px; }
  .duo-images .petite { right: 0; }
  .programme li { grid-template-columns: 72px 1fr; }
  .visionneuse { grid-template-columns: 44px minmax(0, 1fr) 44px; }
  .visionneuse button { width: 40px; height: 40px; }
}
@keyframes ouvrirGm { from { clip-path: inset(100% 0 0 0); -webkit-clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); -webkit-clip-path: inset(0); } }
@keyframes ouvrirDm { from { clip-path: inset(0 0 100% 0); -webkit-clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); -webkit-clip-path: inset(0); } }
@keyframes tracerM { from { transform: scaleX(0); } }
@media (max-height: 520px) and (orientation: landscape) {
  .ouverture-page, .ouverture-gite { height: auto; min-height: 100svh; }
}
/* Trois tuiles (fiches de gîte) : grille, puis défilement horizontal sur téléphone */
.maisons.maisons-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 700px) {
  .maisons.maisons-3 { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 72%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
  .maisons.maisons-3 .maison { scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) {
  .son.joue .barres i { animation: none; height: 9px; }
  .son-piste.joue .barres i, .ecoute.joue .barres i { animation: none; height: 8px; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .voile { display: none; }
  .js-apparait [data-apparait] { opacity: 1; transform: none; }
  .js-apparait [data-revele] img { clip-path: none; -webkit-clip-path: none; transform: none; }
  .js-apparait [data-revele] figcaption { opacity: 1; }
}

/* ---------- Le Bosquet v4 : six gîtes, tarifs, citation unique ---------- */
.maisons.maisons-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 20px; }
.maisons.maisons-6 .maison-photo { aspect-ratio: 5 / 4; }
@media (max-width: 1020px) { .maisons.maisons-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .maisons.maisons-6 { gap: 22px 12px; } .maisons.maisons-6 .maison-photo { aspect-ratio: 4 / 5; } }
p.det { margin: 0; }
.citations.citations-une { grid-template-columns: minmax(0, 1fr); max-width: 980px; }
.citations-une .citation { padding: 0; }
.citations-une .citation blockquote { font-size: clamp(18px, 1.75vw, 25px); line-height: 1.36; letter-spacing: -.025em; }
.citations-une .citation blockquote::before { content: "« "; color: var(--rosa); }
.citations-une .citation blockquote::after { content: " »"; color: var(--rosa); }
.galerie .plus { background: rgba(31, 23, 25, .62); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); color: var(--creme); border: 1px solid rgba(251, 243, 231, .22); }
.programme.programme-large li { grid-template-columns: 128px 1fr; }
.programme.programme-large .h { font-size: 15px; }
.grille-tarifs thead th small, .grille-tarifs td small, .grille-tarifs tbody th small { display: block; font-family: var(--texte); font-weight: 600; font-size: 12.5px; letter-spacing: 0; text-transform: none; color: var(--encre-2); margin: 1px 0 6px; }
.grille-tarifs thead th small { font-weight: 500; margin-top: 4px; }
.grille-tarifs tbody th { box-shadow: inset 4px 0 0 var(--c, var(--rosa)); padding-left: 16px; }
.grille-tarifs tbody th a { font-family: var(--titre); font-weight: 600; font-size: 17px; letter-spacing: -.02em; text-transform: none; color: var(--encre); text-decoration: none; }
.grille-tarifs tbody th a:hover { color: var(--c, var(--rosa)); }
.grille-tarifs td { font-weight: 600; white-space: nowrap; }
.grille-tarifs tbody tr:hover td, .grille-tarifs tbody tr:hover th { background: color-mix(in srgb, var(--c, var(--rosa)) 7%, transparent); }
@media (max-width: 700px) {
  .programme.programme-large li { grid-template-columns: 1fr; gap: 2px; }
  .grille-tarifs th:first-child { position: sticky; left: 0; z-index: 1; background: var(--pierre); min-width: 132px; }
}

/* ---------- Activités : trois cercles (0, 3 et 30 km) ---------- */
/* photo qui suit la liste : les photos sont empilées, la photo active apparaît en fondu */
.act-media { position: relative; margin: 0; overflow: hidden; border-radius: var(--rayon); background: var(--encre); }
.act-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.05); transition: opacity .8s var(--doux), transform 1.6s var(--doux); }
.act-media img.actif { opacity: 1; transform: none; }
.act-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 62%, rgba(31, 23, 25, .45)); pointer-events: none; }
.act-media figcaption { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 1; display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; }
.act-media figcaption span { background: rgba(31, 23, 25, .62); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); color: var(--creme); font-weight: 700; font-size: 12px; letter-spacing: .03em; padding: 5px 9px; border-radius: 4px; border: 1px solid rgba(251, 243, 231, .22); }
.act-media .act-rang { font-family: var(--titre); font-weight: 600; letter-spacing: -.01em; margin-left: auto; white-space: nowrap; }

/* barre des cercles, collée sous l'en-tête */
.regle-cercles { position: sticky; top: var(--entete); z-index: 30; background: color-mix(in srgb, var(--pierre) 90%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--filet); }
.regle-cercles .conteneur { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.regle-cercles a { position: relative; display: flex; align-items: baseline; gap: 12px; padding: 15px 18px 13px 0; text-decoration: none; color: var(--encre-2); font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; transition: color .3s; }
.regle-cercles a + a { padding-left: 18px; border-left: 1px solid var(--filet); }
.regle-cercles a b { font-family: var(--titre); font-weight: 600; font-size: 19px; letter-spacing: -.03em; text-transform: none; color: var(--encre); }
.regle-cercles a i { font-style: normal; margin-left: auto; font-family: var(--titre); font-weight: 500; font-size: 13px; letter-spacing: 0; color: var(--encre-2); }
.regle-cercles a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--c); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--doux); }
.regle-cercles a + a::after { left: 18px; }
.regle-cercles a[aria-current="true"] { color: var(--encre); }
.regle-cercles a[aria-current="true"]::after, .regle-cercles a:hover::after { transform: none; }
.cercle-act { scroll-margin-top: calc(var(--entete) + var(--regle, 50px) + 16px - var(--bande)); }

/* en-tête de chaque cercle : la distance en grand */
.cercle-tete { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px 24px; align-items: end; padding-top: 18px; border-top: 1px solid var(--filet); margin-bottom: clamp(30px, 3.6vw, 48px); }
.cercle-km { grid-column: 1 / span 3; font-family: var(--titre); font-weight: 600; font-size: clamp(54px, 6.4vw, 92px); letter-spacing: -.06em; line-height: .8; color: var(--c); }
.cercle-km small { font-size: .28em; letter-spacing: -.02em; margin-left: 6px; }
.cercle-tete > div { grid-column: 4 / span 4; }
.cercle-tete > .chapo { grid-column: 8 / span 5; color: var(--encre-2); }

/* la liste et sa photo épinglée */
.activites { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: start; }
.activites .act-media { grid-column: 1 / span 6; position: sticky; top: calc(var(--entete) + 78px); height: min(calc(100vh - var(--entete) - 120px), 720px); }
.activites .act-liste { grid-column: 8 / span 5; }
.activites.inverse .act-media { grid-column: 7 / span 6; order: 2; }
.activites.inverse .act-liste { grid-column: 1 / span 5; }
.act-liste { list-style: none; }
.activites .act-liste li { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; padding: 20px 0; border-top: 1px solid var(--filet); transition: opacity .5s var(--doux); }
.activites .act-liste li:last-child { border-bottom: 1px solid var(--filet); }
.act-liste li::before { content: ""; position: absolute; left: 0; top: -1px; height: 3px; width: 0; background: var(--c); transition: width .7s var(--doux); }
.act-liste li.actif::before { width: 100%; }
.act-n { font-family: var(--titre); font-weight: 600; font-size: 14px; letter-spacing: -.01em; color: var(--encre-2); padding-top: 3px; transition: color .3s; }
.act-liste li.actif .act-n { color: var(--c); }
.act-liste h3 { font-family: var(--titre); font-weight: 600; font-size: clamp(16.5px, 1.3vw, 20px); letter-spacing: -.025em; line-height: 1.22; }
.activites .act-liste p { margin-top: 6px; font-size: 15.5px; color: var(--encre-2); max-width: 46ch; }
.activites .act-liste .act-tags { display: flex; flex-wrap: wrap; gap: 4px 0; margin-top: 10px; font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.act-tags span + span::before { content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--c); margin: 0 10px 2px; vertical-align: middle; }
@media (hover: hover) and (min-width: 1021px) {
  .activites .act-liste li { opacity: .48; }
  .activites .act-liste li.actif, .activites .act-liste li:hover { opacity: 1; }
}
.bande-mousse .cercle-tete, .bande-mousse .activites .act-liste li { border-color: var(--filet-clair); }
.bande-mousse .cercle-tete > .chapo, .bande-mousse .activites .act-liste p, .bande-mousse .act-n { color: var(--sur-sombre-2); }
.bande-mousse .act-media { background: #0c2b27; }

/* accueil : les trois cercles côte à côte, la photo change au survol */
.trio-cercles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1.5px solid var(--encre); }
.cercle-trio { display: flex; flex-direction: column; padding: 18px 24px 4px; }
.cercle-trio:first-child { padding-left: 0; }
.cercle-trio:last-child { padding-right: 0; }
.cercle-trio + .cercle-trio { border-left: 1px solid var(--filet); }
.trio-km { display: flex; align-items: baseline; gap: 6px; font-weight: 700; font-size: 12px; letter-spacing: .1em; color: var(--encre-2); }
.trio-km b { font-family: var(--titre); font-weight: 600; font-size: clamp(32px, 3.2vw, 46px); letter-spacing: -.05em; line-height: 1; color: var(--c); }
.trio-km span { margin-left: auto; font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--encre); }
.cercle-trio .act-media { margin-top: 14px; aspect-ratio: 4 / 3; }
.act-courte { margin-top: 12px; }
.act-courte li { position: relative; border-top: 1px solid var(--filet); }
.act-courte li:last-child { border-bottom: 1px solid var(--filet); }
.act-courte a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; text-decoration: none; font-weight: 600; font-size: 15.5px; color: var(--encre); }
.act-courte a::after { content: "+"; flex: none; font-weight: 400; font-size: 20px; line-height: 1; color: var(--c); transition: transform .4s var(--doux); }
.act-courte li.actif a::after { transform: rotate(90deg); }
.cercle-trio > .lien { align-self: flex-start; margin-top: 16px; font-size: 15px; }

@media (max-width: 1020px) {
  .cercle-tete > *, .cercle-tete > div, .cercle-tete > .chapo { grid-column: 1 / -1; }
  .activites .act-media, .activites.inverse .act-media { grid-column: 1 / -1; order: 0; top: calc(var(--entete) + 52px); height: 34vh; min-height: 200px; z-index: 2; box-shadow: 0 14px 24px -18px rgba(31, 23, 25, .6); }
  .activites .act-liste, .activites.inverse .act-liste { grid-column: 1 / -1; }
  .trio-cercles { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
  .cercle-trio, .cercle-trio:first-child, .cercle-trio:last-child { scroll-snap-align: start; padding: 16px 18px 4px 0; }
  .cercle-trio + .cercle-trio { padding-left: 18px; }
}
@media (max-width: 700px) {
  .regle-cercles a { flex-direction: column; gap: 0; padding: 10px 8px 9px 0; font-size: 10.5px; letter-spacing: .1em; }
  .regle-cercles a + a { padding-left: 10px; }
  .regle-cercles a + a::after { left: 10px; }
  .regle-cercles a b { font-size: 16px; }
  .regle-cercles a i { display: none; }
  .activites .act-liste li { grid-template-columns: 34px minmax(0, 1fr); padding: 16px 0; }
  .activites .act-media, .activites.inverse .act-media { top: calc(var(--entete) + 66px); }
  .cercle-act { --regle: 62px; }
}

/* =====================================================================
   v5 « Gîtes & Animaux » (02/11/2026) : demandes de Marion pour le vrai site.
   Voûtes des gîtes (reprises de la v3), drapeau queer friendly, chapitres du domaine,
   atelier du mardi, bande de l'énergie (80 % produits sur place).
   ===================================================================== */

/* ---------- Voûtes des gîtes : six arches, une s'ouvre ---------- */
.voutes { display: flex; gap: 6px; height: clamp(440px, 64vh, 600px); }
.voute { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; color: var(--creme); background: var(--fruit); border-radius: 50% 50% var(--rayon) var(--rayon) / 110px 110px var(--rayon) var(--rayon); transition: flex-grow .9s var(--doux); cursor: pointer; display: flex; flex-direction: column; justify-content: flex-end; isolation: isolate; }
.voute.actif { flex-grow: 4.6; cursor: default; }
.voute-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); mix-blend-mode: multiply; opacity: .5; transform: scale(1.06); transition: filter .9s var(--doux), opacity .9s var(--doux), transform 1.4s var(--doux); }
.voute.actif .voute-img { filter: none; mix-blend-mode: normal; opacity: 1; transform: none; }
.voute::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(30, 23, 18, 0) 36%, rgba(30, 23, 18, .82) 100%); opacity: 0; transition: opacity .9s var(--doux); pointer-events: none; }
.voute.actif::after { opacity: 1; }
.voute-btn { position: absolute; inset: 0; z-index: 3; width: 100%; background: none; border: 0; cursor: pointer; border-radius: inherit; }
.voute-btn:focus-visible { outline: 2px solid var(--ocre); outline-offset: -5px; }
.voute.actif .voute-btn { pointer-events: none; }
.voute-tete { position: relative; z-index: 2; padding: 16px 14px 18px; display: grid; justify-items: start; gap: 8px; pointer-events: none; }
.voute-tete h3 { margin: 0; font-family: var(--titre); font-weight: 600; font-size: clamp(19px, 1.7vw, 26px); letter-spacing: -.03em; white-space: nowrap; writing-mode: vertical-rl; transform: rotate(180deg); }
.voute-nb { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; opacity: .9; }
.voute.actif .voute-tete { padding: 0 clamp(20px, 2.4vw, 32px) 10px; }
.voute.actif .voute-tete h3 { writing-mode: horizontal-tb; transform: none; font-size: clamp(28px, 2.8vw, 42px); }
.voute-detail { position: relative; z-index: 4; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 20px; padding: 0 clamp(20px, 2.4vw, 32px); max-height: 0; opacity: 0; overflow: hidden; pointer-events: none; transition: max-height .8s var(--doux), opacity .5s, padding .8s var(--doux); }
.voute.actif .voute-detail { max-height: 380px; opacity: 1; padding-bottom: clamp(20px, 2.4vw, 30px); pointer-events: auto; transition-delay: .2s; }
.voute-detail p { flex: 1 1 100%; max-width: 52ch; margin: 0; font-size: 15px; line-height: 1.5; color: rgba(251, 243, 231, .92); }
.voute-detail dl { margin: 0; display: flex; border-top: 1px solid rgba(251, 243, 231, .3); }
.voute-detail dl div { padding: 10px 16px 0 0; margin-right: 16px; border-right: 1px solid rgba(251, 243, 231, .22); }
.voute-detail dl div:last-child { border-right: 0; margin-right: 0; }
.voute-detail dt { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .75; }
.voute-detail dd { margin: 3px 0 0; font-family: var(--titre); font-weight: 600; font-size: 16px; letter-spacing: -.02em; white-space: nowrap; }
.voute-actions { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.voute-actions .bouton { min-height: 44px; }
.voute[data-gite="mirabelle"]:not(.actif) { color: #2a1d05; }
.voutes-pied { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; margin-top: 22px; color: var(--encre-2); font-size: 15px; }
@media (max-width: 1020px) {
  .voutes { flex-direction: column; height: auto; gap: 5px; }
  .voute { flex: none; height: 76px; border-radius: var(--rayon); transition: height .8s var(--doux); }
  .voute.actif { height: min(560px, 86svh); border-radius: 50% 50% var(--rayon) var(--rayon) / 80px 80px var(--rayon) var(--rayon); }
  .voute-tete { padding: 0 16px 16px; gap: 4px; }
  .voute:not(.actif) .voute-tete { width: 100%; grid-template-columns: 1fr auto; align-items: end; }
  .voute-tete h3 { writing-mode: horizontal-tb; transform: none; font-size: 22px; }
  .voute.actif .voute-tete { padding: 0 18px 10px; }
  .voute.actif .voute-tete h3 { font-size: 30px; }
  .voute-detail { padding-inline: 18px; }
  .voute-detail dd { font-size: 15px; }
  .voute-actions { margin-left: 0; }
}

/* ---------- Drapeau queer friendly, en haut à droite ---------- */
.drapeau { position: relative; flex: none; display: inline-flex; margin-left: 4px; border-radius: 3px; text-decoration: none; }
.drapeau svg { display: block; width: 30px; height: 20px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(251, 243, 231, .5); }
.entete.plein .drapeau svg, .entete.toujours-plein .drapeau svg { box-shadow: 0 0 0 1px var(--filet); }
.drapeau .bulle { position: absolute; right: 0; top: calc(100% + 10px); padding: 8px 12px; border-radius: var(--rayon); background: var(--aubergine); color: var(--rose-pale); font-size: 13px; font-weight: 600; white-space: nowrap; opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .25s, transform .25s var(--doux); }
.drapeau:hover .bulle, .drapeau:focus-visible .bulle { opacity: 1; transform: none; }
.drapeau:focus-visible { outline: 2px solid var(--rosa-fonce); outline-offset: 3px; }
@media (max-width: 1020px) { .drapeau { margin-left: 10px; } }

/* ---------- Le domaine : barre des chapitres ---------- */
.chapitres { position: sticky; top: var(--entete); z-index: 20; background: color-mix(in srgb, var(--pierre) 94%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--filet); }
.chapitres .conteneur { display: flex; gap: 6px 26px; overflow-x: auto; scrollbar-width: none; }
.chapitres a { flex: none; padding: 14px 0 12px; font-weight: 700; font-size: 14.5px; text-decoration: none; border-bottom: 2px solid transparent; }
.chapitres a:hover { border-bottom-color: var(--rosa); }
.chapitres .num { color: var(--rosa); margin-right: 6px; font-family: var(--titre); font-size: 12px; }

/* ---------- Sur le domaine (accueil) : trois portes en arche ---------- */
.portes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 32px); }
.porte { display: grid; gap: 12px; align-content: start; text-decoration: none; }
.porte-photo { display: block; overflow: hidden; border-radius: 50% 50% var(--rayon) var(--rayon) / 90px 90px var(--rayon) var(--rayon); aspect-ratio: 4 / 5; background: var(--c, var(--aubergine)); }
.porte-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--doux); }
.porte:hover .porte-photo img { transform: scale(1.04); }
.porte-typo { display: grid; place-content: center; justify-items: center; gap: 10px; padding: 24px; text-align: center; color: var(--rose-pale); background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--lime) 22%, var(--aubergine)) 0%, var(--aubergine) 70%); }
.porte-typo b { font-family: var(--titre); font-weight: 700; font-size: clamp(30px, 3.2vw, 48px); letter-spacing: -.05em; line-height: 1; color: var(--lime); }
.porte-typo span { font-weight: 700; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; }
.porte-typo i { font-style: normal; font-size: 15px; opacity: .85; }
.porte .surtitre { color: var(--c, var(--aubergine)); }
.porte h3 { margin: 0; font-family: var(--titre); font-weight: 600; font-size: var(--t-h3); letter-spacing: -.02em; }
.porte p { margin: 0; color: var(--encre-2); font-size: 15.5px; }
.porte .lien { justify-self: start; }
@media (max-width: 1020px) { .portes { grid-template-columns: 1fr; } .porte { grid-template-columns: 38% 1fr; column-gap: 18px; align-items: center; } .porte-photo { grid-row: span 4; border-radius: 50% 50% var(--rayon) var(--rayon) / 50px 50px var(--rayon) var(--rayon); } }

/* ---------- L'art : carte de l'atelier du mardi ---------- */
.atelier { display: grid; grid-template-columns: auto 1fr; gap: 6px 22px; align-items: center; margin-top: 26px; padding: 18px 20px; border-radius: var(--rayon); background: var(--aubergine); color: var(--rose-pale); }
.atelier .jour { grid-row: span 3; display: grid; justify-items: center; padding-right: 22px; border-right: 1px solid rgba(238, 225, 233, .25); }
.atelier .jour b { font-family: var(--titre); font-weight: 700; font-size: 30px; letter-spacing: -.04em; line-height: 1; color: var(--lime); }
.atelier .jour span { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; margin-top: 6px; }
.atelier strong { font-family: var(--titre); font-weight: 600; font-size: 18px; letter-spacing: -.02em; color: var(--creme); }
.atelier p { margin: 0; font-size: 15px; }
.atelier .note-atelier { font-size: 13px; opacity: .8; }
/* l'atelier de peinture du mardi est distinct de l'atelier de Joël Harder : colonne séparée par un filet */
.colonne-a-part { border-left: 1px solid var(--filet); padding-left: clamp(24px, 3vw, 44px); }
@media (max-width: 1020px) { .colonne-a-part { border-left: 0; padding-left: 0; border-top: 1px solid var(--filet); padding-top: 28px; margin-top: 12px; } }
/* section L'art : le portrait de Joël Harder à gauche ; à droite son atelier, puis celui du mardi sous un filet, à part */
.art-joel > .portrait-joel { grid-column: 1 / span 5; margin: 0; }
.art-joel > .art-textes { grid-column: 7 / span 6; }
.portrait-joel img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--rayon); background: var(--encre); }
.portrait-joel figcaption { margin-top: 10px; font-size: 13px; color: var(--encre-2); }
.portrait-joel figcaption a { color: inherit; }
.art-textes .colonne-a-part { border-left: 0; padding-left: 0; border-top: 1px solid var(--filet); padding-top: 28px; margin-top: 40px; }
@media (max-width: 1020px) { .art-joel > .portrait-joel, .art-joel > .art-textes { grid-column: 1 / -1; } .portrait-joel { max-width: 460px; } }

/* ---------- L'énergie : 80 % produits sur place ---------- */
.energie { position: relative; overflow: hidden; background: var(--aubergine); color: var(--rose-pale); }
.energie .conteneur { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: center; }
.energie-chiffre { grid-column: 1 / span 6; position: relative; margin: 0; font-family: var(--titre); font-weight: 700; font-size: clamp(120px, 17vw, 270px); line-height: .82; letter-spacing: -.07em; color: rgba(238, 225, 233, .12); white-space: nowrap; }
.energie-chiffre small { font-size: .42em; letter-spacing: -.04em; vertical-align: top; margin-left: .06em; }
.energie-chiffre .plein { position: absolute; inset: 0; color: var(--lime); clip-path: inset(calc(100% - var(--rempli, 0) * 1%) 0 0 0); -webkit-clip-path: inset(calc(100% - var(--rempli, 0) * 1%) 0 0 0); transition: clip-path 2.2s var(--doux), -webkit-clip-path 2.2s var(--doux); }
.energie.vu .energie-chiffre .plein, html:not(.js) .energie-chiffre .plein { --rempli: 80; }
.energie-texte { grid-column: 8 / span 5; }
.energie-texte h2 { color: var(--creme); }
.energie-texte .chapo { margin-top: 16px; color: var(--rose-pale); }
.energie-faits { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.energie-faits li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; font-size: 15.5px; }
.energie-faits svg { width: 22px; height: 22px; color: var(--lime); margin-top: 2px; }
.energie .lien { color: var(--lime); }
@media (max-width: 1020px) { .energie-chiffre, .energie-texte { grid-column: 1 / -1; } .energie-chiffre { font-size: clamp(110px, 38vw, 220px); } }
@media (prefers-reduced-motion: reduce) { .energie-chiffre .plein { transition: none; } .voute, .voute-img, .voute-detail { transition: none; } }

/* ---------- Réservation en ligne (reservation.js) : semainier, compteurs, options, paiement, suivi ---------- */
.voyageurs { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 22px; padding: 14px 0; border-block: 1px solid var(--filet); }
.compteur { display: flex; align-items: center; gap: 10px; }
.compteur > span { min-width: 92px; font-weight: 700; font-size: 15px; line-height: 1.15; }
.compteur > span small { display: block; font-weight: 500; font-size: 12.5px; color: var(--encre-2); }
.compteur button { width: 38px; height: 38px; border-radius: var(--rayon); border: 1.5px solid var(--filet); background: var(--creme); font-size: 20px; line-height: 1; color: var(--encre); cursor: pointer; }
.compteur button:hover:not(:disabled) { border-color: var(--aubergine); color: var(--aubergine); }
.compteur button:disabled { opacity: .35; cursor: not-allowed; }
.compteur output { min-width: 22px; text-align: center; font-family: var(--titre); font-weight: 600; font-size: 19px; }
.filtre-gite { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.filtre-gite button { position: relative; padding: 8px 12px 8px 26px; border: 1.5px solid var(--filet); border-radius: var(--rayon); background: transparent; font-weight: 700; font-size: 14px; color: var(--encre); cursor: pointer; }
.filtre-gite button::before { content: ""; position: absolute; left: 11px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--c, var(--encre)); }
.filtre-gite button:first-child { padding-left: 12px; }
.filtre-gite button:first-child::before { display: none; }
.filtre-gite button[aria-pressed="true"] { border-color: var(--aubergine); background: var(--aubergine); color: var(--rose-pale); }
.semainier { margin-top: 18px; min-width: 0; }
.billetterie > div, .gite-corps aside, .dispo { min-width: 0; }
.semainier-tete { display: flex; align-items: center; gap: 6px; border-bottom: 1px solid var(--filet); }
.semainier-fleche { flex: none; width: 36px; height: 36px; border: 0; background: none; font-size: 26px; line-height: 1; color: var(--encre); cursor: pointer; border-radius: var(--rayon); }
.semainier-fleche:hover:not(:disabled) { background: var(--rose-pale); color: var(--aubergine); }
.semainier-fleche:disabled { opacity: .25; cursor: default; }
.semainier-mois { position: relative; flex: 1 1 0; width: 0; min-width: 0; display: flex; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; }
.semainier-mois::-webkit-scrollbar { display: none; }
.semainier-mois button { flex: none; padding: 10px 11px 9px; border: 0; border-bottom: 2.5px solid transparent; background: none; font-weight: 700; font-size: 14px; text-transform: capitalize; color: var(--encre-2); cursor: pointer; line-height: 1.1; }
.semainier-mois button small { display: block; font-weight: 500; font-size: 11px; opacity: .7; }
.semainier-mois button[aria-selected="true"] { color: var(--aubergine); border-bottom-color: var(--aubergine); }
.semainier-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px 28px; padding-top: 14px; }
.semainier-titre { font-family: var(--titre); font-weight: 600; font-size: 15px; letter-spacing: -.01em; text-transform: capitalize; margin-bottom: 8px; }
.semainier-liste { display: grid; gap: 6px; }
.semaine { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; width: 100%; padding: 11px 13px; border: 1.5px solid var(--filet); border-radius: var(--rayon); background: var(--creme); color: var(--encre); font: inherit; text-align: left; text-decoration: none; cursor: pointer; transition: border-color .2s, background-color .2s; }
.semaine-dates { font-weight: 700; font-size: 14.5px; }
.semaine-prix { font-size: 13.5px; color: var(--encre-2); white-space: nowrap; }
.semaine-libre:hover { border-color: var(--aubergine); }
.semaine-libre .semaine-prix::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--lime); vertical-align: 1px; }
.semaine-complet, .semaine-bientot { background: transparent; border-style: dashed; color: var(--encre-2); cursor: not-allowed; }
.semaine-complet .semaine-dates { text-decoration: line-through; text-decoration-thickness: 1px; opacity: .7; }
.semaine.choisie { background: var(--aubergine); border-color: var(--aubergine); color: var(--rose-pale); }
.semaine.choisie .semaine-prix { color: var(--rose-pale); }
.aide-semaines { margin-top: 12px; font-size: 14px; color: var(--aubergine); font-weight: 600; }
.options { border: 0; padding: 0; margin-top: 22px; display: grid; gap: 10px; }
.options legend { font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--encre-2); margin-bottom: 8px; }
.options .case, .billetterie .case { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.options .case input, .billetterie .case input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--aubergine); flex: none; }
.options small { display: block; color: var(--encre-2); font-size: 13px; }
.paiement-choix { border: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.paiement-choix legend { font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--encre-2); margin-bottom: 8px; }
.formulaire .paiement-choix label { display: flex; gap: 10px; align-items: flex-start; padding: 13px 14px; border: 1.5px solid var(--filet); border-radius: var(--rayon); background: var(--creme); cursor: pointer; text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 500; color: var(--encre); margin: 0; }
.formulaire .paiement-choix label:has(input:checked) { border-color: var(--aubergine); box-shadow: 0 0 0 3px color-mix(in srgb, var(--aubergine) 16%, transparent); }
.formulaire .paiement-choix input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--aubergine); flex: none; padding: 0; }
.paiement-choix strong { display: block; font-weight: 700; }
.paiement-choix small { display: block; font-weight: 500; font-size: 13px; color: var(--encre-2); margin-top: 2px; }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.alerte-reservation { margin-top: 18px; }
.alerte-reservation.ok { border-left-color: var(--lime); }
.note-demo { margin-top: 14px; font-size: 14px; color: var(--encre-2); }
.suivi h2 { font-size: clamp(30px, 3.4vw, 44px); color: var(--aubergine); }
.suivi-corps { margin-top: 18px; display: grid; gap: 14px; max-width: 60ch; }
.suivi .rib { display: grid; border-top: 1.5px solid var(--aubergine); }
.suivi .rib div { display: grid; grid-template-columns: 130px 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--filet); }
.suivi .rib dt { font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--encre-2); padding-top: 3px; }
.suivi .rib dd { margin: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.suivi .rib-jamais { padding-left: 12px; border-left: 3px solid var(--lime); font-size: 14.5px; font-weight: 600; }
.attente-paiement::after { content: ""; display: inline-block; width: 14px; height: 14px; margin-left: 10px; border: 2px solid var(--aubergine); border-right-color: transparent; border-radius: 50%; vertical-align: -2px; animation: tourne .8s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }
.recap .lignes div[hidden] { display: none; }
/* fiche d'un gîte : calendrier dans le billet */
.dispo { padding: 12px 14px 8px; }
.dispo-titre { font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--encre-2); }
.dispo .semainier-grille { grid-template-columns: 1fr; padding-top: 10px; }
.dispo .semainier-titre { display: none; }
.dispo .semaine { padding: 9px 11px; }
.dispo .billet-note { padding-inline: 0; }
@media (max-width: 760px) {
  .paiement-choix { grid-template-columns: 1fr; }
  .semainier-grille { grid-template-columns: 1fr; }
  .compteur > span { min-width: 74px; }
}
@media (prefers-reduced-motion: reduce) { .attente-paiement::after { animation: none; } .semainier-mois { scroll-behavior: auto; } }
/* ---------- Logo : petits téléphones, rideau sur mobile, contraste élevé ---------- */
/* En dessous de 420 px, logo + son + drapeau + menu ne tenaient plus : le bouton du menu sortait de l'écran. */
@media (max-width: 420px) {
  .entete .conteneur { gap: 10px; }
  .drapeau, .burger { margin-left: 0; }
  .burger { flex: none; }
}
@media (max-width: 359px) { .marque .logo { height: 36px; } }
/* Sur mobile, le lé central du rideau s'élargit pour que le logo s'y lise (il faisait 105 px de large). */
@media (max-width: 700px) {
  .voile .voile-g, .voile .voile-d { width: 12.4%; }
  .voile .voile-c { left: 12%; width: 76.4%; }
  .voile b.logo { width: min(250px, 62vw); }
}
/* Mode contraste élevé (Windows) : le logo est un masque peint avec currentColor, on force la couleur du texte. */
@media (forced-colors: active) { .logo { forced-color-adjust: none; background: CanvasText; } }
/* un mot trop long pour l'écran (ex. « confidentialité » à 42 px sur 360 px) se coupe au lieu d'élargir la page */
h1 { overflow-wrap: break-word; }
/* ---------- Réservation : choix « à la semaine » ou « 2 ou 3 nuits », calendrier des jours d'arrivée ---------- */
.mode-sejour { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.mode-sejour button { padding: 9px 14px; border: 1.5px solid var(--filet); border-radius: var(--rayon); background: transparent; font: inherit; font-weight: 700; font-size: 14.5px; line-height: 1.2; text-align: left; color: var(--encre); cursor: pointer; }
.mode-sejour button small { display: block; margin-top: 2px; font-weight: 500; font-size: 12px; color: var(--encre-2); }
.mode-sejour button:hover { border-color: var(--aubergine); }
.mode-sejour button[aria-pressed="true"] { border-color: var(--aubergine); background: var(--aubergine); color: var(--rose-pale); }
.mode-sejour button[aria-pressed="true"] small { color: var(--rose-pale); opacity: .85; }
.nuits-choix { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 12px; font-size: 14px; font-weight: 700; }
.nuits-choix span { margin-right: 4px; color: var(--encre-2); }
.nuits-choix button { padding: 6px 12px; border: 1.5px solid var(--filet); border-radius: var(--rayon); background: transparent; font: inherit; font-weight: 700; font-size: 14px; color: var(--encre); cursor: pointer; }
.nuits-choix button[aria-pressed="true"] { border-color: var(--aubergine); background: var(--aubergine); color: var(--rose-pale); }
.journalier-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px 28px; padding-top: 12px; }
.journalier-note { margin: 12px 0 0; font-size: 14px; line-height: 1.5; color: var(--encre-2); }
.jours-tete, .jours { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.jours-tete span { padding-bottom: 4px; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--encre-2); }
.jour { display: grid; align-content: center; justify-items: center; gap: 1px; min-height: 46px; padding: 4px 1px; border: 1.5px solid var(--filet); border-radius: var(--rayon); background: var(--creme); color: var(--encre); font: inherit; cursor: pointer; transition: border-color .2s, background-color .2s; }
.jour b { font-size: 14.5px; line-height: 1.1; }
.jour small { font-size: 10.5px; line-height: 1.1; color: var(--encre-2); white-space: nowrap; }
.jour-libre:hover { border-color: var(--aubergine); }
.jour-complet { background: transparent; border-style: dashed; color: var(--encre-2); cursor: not-allowed; }
.jour-complet b { text-decoration: line-through; text-decoration-thickness: 1px; opacity: .7; }
.jour-ferme { background: transparent; border-color: transparent; color: var(--encre-2); opacity: .4; cursor: default; }
.jour-vide { visibility: hidden; }
.jour.choisie, .jour.dans-sejour { background: var(--aubergine); border-color: var(--aubergine); color: var(--rose-pale); opacity: 1; }
.jour.dans-sejour { background: color-mix(in srgb, var(--aubergine) 72%, var(--creme)); border-color: transparent; }
.jour.choisie small, .jour.dans-sejour small { color: var(--rose-pale); }
@media (max-width: 420px) { .jour { min-height: 42px; } .jour small { font-size: 9.5px; } .jours, .jours-tete { gap: 3px; } }

/* ---------- Journal (pages écrites par le serveur : app/lib/Journal.php, gabarit tiré de ce site par construire.ps1) ---------- */
.j-tete { padding-top: calc(var(--entete) + clamp(36px, 5vw, 64px)); padding-bottom: clamp(24px, 3vw, 40px); }
.j-tete .fil a { color: var(--encre-2); }
.j-tete h1 { font-size: clamp(32px, 3.8vw, 54px); margin-top: 14px; max-width: 24ch; }
.j-tete .chapo { margin-top: 16px; }
.j-article .j-tete h1 { font-size: clamp(30px, 3.3vw, 46px); max-width: 26ch; }
.j-etroit { max-width: calc(780px + 2 * var(--gouttiere)); }
.j-meta { margin-top: 16px; font-size: 14.5px; color: var(--encre-2); }
.j-couverture { margin-top: 0; margin-bottom: clamp(28px, 4vw, 48px); }
.j-couverture img { display: block; width: 100%; height: auto; max-height: 72vh; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--rayon); background: var(--pierre-2); }
.j-couverture figcaption, .j-figure figcaption { margin-top: 10px; font-size: 13.5px; color: var(--encre-2); }
.j-corps { padding-bottom: var(--bande); font-size: 17px; line-height: 1.7; }
.j-corps > * + * { margin-top: 1.05em; }
.j-corps h2 { font-size: clamp(24px, 2.2vw, 32px); margin-top: 1.9em; scroll-margin-top: calc(var(--entete) + 16px); }
.j-corps h3 { font-size: clamp(18px, 1.5vw, 21px); margin-top: 1.6em; scroll-margin-top: calc(var(--entete) + 16px); }
.j-corps a { color: var(--rosa); text-underline-offset: 3px; }
.j-corps a:hover { color: var(--encre); }
.j-corps ul, .j-corps ol { margin-bottom: 0; padding-left: 1.3em; }
.j-corps li + li { margin-top: .35em; }
.j-chapo { font-size: var(--t-chapo); line-height: 1.6; font-weight: 500; }
.j-enbref { background: var(--creme); border-left: 3px solid var(--rosa); border-radius: 0 var(--rayon) var(--rayon) 0; padding: 20px 24px; }
.j-enbref h2, .j-sommaire h2 { font-family: var(--texte); font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; line-height: 1.4; margin: 0; }
.j-enbref ul { margin-top: 10px; }
.j-sommaire { border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet); padding: 16px 0; font-size: 15.5px; }
.j-sommaire ol { margin-top: 8px; }
.j-sommaire a { color: inherit; }
.j-encart { background: var(--pierre-2); padding: 18px 22px; border-radius: var(--rayon); }
.j-figure { margin-inline: 0; }
.j-figure img { display: block; width: 100%; height: auto; border-radius: var(--rayon); }
.j-tableau { overflow-x: auto; }
.j-corps table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.j-corps th, .j-corps td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--filet); vertical-align: top; }
.j-corps th { font-weight: 700; border-bottom-color: var(--encre); }
.j-faq { margin-top: 2.4em; }
.j-faq .faq { margin-top: 14px; }
.j-faq .faq details > div > * + * { margin-top: .8em; }
.j-cta-grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: center; }
.j-cta-grille > div { grid-column: 1 / span 6; }
.j-cta-photo { grid-column: 8 / span 5; display: block; border-radius: var(--rayon); overflow: hidden; }
.j-cta-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.j-cta h2 { margin-top: 12px; }
.j-cta .chapo { margin-top: 14px; }
.j-cta-boutons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.j-autres .tete-section { margin-bottom: clamp(24px, 3vw, 36px); }
.j-liste { padding-top: 0; }
.j-cartes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 24px; }
.j-carte { position: relative; display: grid; align-content: start; gap: 14px; }
.j-carte-photo { display: block; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--rayon); background: var(--pierre-2); }
.j-carte-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--doux); }
.j-carte:hover .j-carte-photo img, .j-carte:has(a:focus-visible) .j-carte-photo img { transform: scale(1.04); }
.j-carte-info { display: grid; gap: 6px; padding-top: 12px; border-top: 1px solid var(--filet); }
.j-carte-info .surtitre { color: var(--rosa); font-size: 11.5px; }
/* toute la carte est cliquable : le lien du titre s'étire sur la carte, l'anneau du clavier l'entoure */
.j-carte-titre { font-family: var(--titre); font-weight: 600; font-size: clamp(17px, 1.3vw, 20px); letter-spacing: -.025em; line-height: 1.15; }
.j-carte-titre a { color: inherit; text-decoration: none; }
.j-carte-titre a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.j-carte:hover .j-carte-titre a { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.j-carte-titre a:focus-visible { outline: none; }
.j-carte:has(a:focus-visible) { outline: 3px solid var(--rosa-fonce); outline-offset: 6px; border-radius: var(--rayon); }
.j-carte-desc { font-size: 15px; color: var(--encre-2); }
.j-carte-info time { font-size: 13px; color: var(--encre-2); }
.j-carte-une { grid-column: 1 / -1; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; gap: 24px; }
.j-carte-une .j-carte-photo { grid-column: 1 / span 7; aspect-ratio: 16 / 10; }
.j-carte-une .j-carte-info { grid-column: 8 / span 5; border-top: 0; padding-top: 0; }
.j-carte-une .j-carte-titre { font-size: clamp(24px, 2.4vw, 34px); }
.j-rubrique { margin-top: 20px; color: var(--rosa); }
.j-vide { max-width: 60ch; font-size: var(--t-chapo); padding-top: 18px; border-top: 1px solid var(--filet); }
.j-vide a, .j-flux a { color: var(--rosa); }
.j-flux { margin-top: 40px; font-size: 14px; }
@media (max-width: 900px) {
  .j-cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .j-cta-grille > div, .j-cta-photo { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .j-cartes { grid-template-columns: 1fr; }
  .j-carte-une .j-carte-photo, .j-carte-une .j-carte-info { grid-column: 1 / -1; }
  .j-corps { font-size: 16px; }
  .j-enbref { padding: 16px 18px; }
}

/* ---------- Mise en ligne (12/11/2026) ---------- */
/* Choix de la langue masqué tant qu'il n'y a ni page anglaise ni page allemande (gabarit.html : retirer « hidden » pour le remettre) */
.langues[hidden] { display: none; }
/* Formulaire de contact : message parti (filet lime) ; une erreur garde le filet cerise */
.message-envoi.ok { border-left-color: var(--lime); }
/* Page Conditions de location */
.conditions-resume { margin-top: clamp(28px, 3.5vw, 44px); }
.conditions-resume .regle p a { color: inherit; }
.legal h3 { font-size: 17px; margin-top: 22px; }
.legal ol { padding-left: 22px; }
.legal .paliers { list-style: none; padding: 0; margin-top: 12px; border-top: 1.5px solid var(--encre); }
.legal .paliers li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; margin: 0; padding: 11px 0; border-bottom: 1px solid var(--filet); max-width: none; }
.legal .paliers li b { font-weight: 700; white-space: nowrap; }
.legal .capacites { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 22px; list-style: none; padding: 0; margin-top: 12px; }
.legal .capacites li { margin: 0; padding: 9px 0; border-bottom: 1px solid var(--filet); }
.legal .capacites a { font-weight: 700; }
@media (max-width: 640px) {
  .legal .capacites { grid-template-columns: 1fr 1fr; }
}