/* ============================================================
   LES GÎTES DU MAS DE CLAROU — v6
   Design system : le silence visuel domine.
   Typo : Fraunces (display) · Hanken Grotesk (texte) — OFL, self-hosted

   v3 : WONK 0 partout, plus de graisse, corps +5 %, aucune italique
        décorative, aucun flou sur les photographies.
   v6 : trois principes, un seul jeu de variables chacun.
        1. Une échelle typographique. Six titres de section avaient six
           corps différents ; ils n'en ont plus qu'un. Le titre du site
           domine désormais d'un rapport constant de 1,43.
        2. Une scénographie de mouvement. Une courbe, trois durées, un pas
           de cascade, une distance de translation — et aucune photographie
           qui bouge, nulle part.
        3. Un hero en grille de trois rangées. Le contenu et le bandeau de
           commandes se partagent la hauteur au lieu de se superposer :
           aucun recouvrement n'est plus possible, à aucune taille d'écran.
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face {
  font-family: 'Fraunces';
  src: url('fonts/Fraunces-Variable.woff2') format('woff2'),
       url('fonts/Fraunces-Variable.woff') format('woff');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('fonts/Fraunces-Italic-Variable.woff2') format('woff2'),
       url('fonts/Fraunces-Italic-Variable.woff') format('woff');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('fonts/HankenGrotesk-Variable.woff2') format('woff2'),
       url('fonts/HankenGrotesk-Variable.woff') format('woff');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('fonts/HankenGrotesk-Italic-Variable.woff2') format('woff2'),
       url('fonts/HankenGrotesk-Italic-Variable.woff') format('woff');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* Pierre — chaleur, structure */
  --stone-50:  #FAF8F5;
  --stone-100: #F3EDE4;
  --stone-200: #E5DDD2;
  --stone-300: #C9B99A;
  --stone-500: #8B7355;
  --stone-700: #4A3D2E;

  /* Vert — Cévennes */
  --green-900: #2C3A2C;
  --green-800: #3D4F3D;
  --green-100: #E8EDE5;
  --green-50:  #F0F4ED;

  /* Nuit — ciel étoilé */
  --night-950: #050706;
  --night-900: #10150F;

  /* Encre */
  --ink:       #1A1A1A;
  --ink-light: #585858;
  --ink-muted: #6B6B6B;   /* 4,58:1 minimum — #8F8F8F ne donnait que 2,78:1 */
  --white:     #FFFFFF;
  --gold:      #C9A96A;   /* décoratif : étoiles, liserés, jamais du texte sur clair */
  --gold-texte:#856526;   /* variante lisible : 4,64:1 minimum */

  /* Typo — WONK 0 partout : plus de lettres fantaisistes */
  --display: 'Fraunces', 'Georgia', serif;
  --text: 'Hanken Grotesk', 'Helvetica Neue', sans-serif;
  --fvs-display: 'opsz' 144, 'SOFT' 30, 'WONK' 0;
  --fvs-display-tight: 'opsz' 90, 'SOFT' 24, 'WONK' 0;

  /* ---- Échelle typographique — une seule progression pour tout le site ----
     Le titre du hero et les titres de section gardent un rapport constant de
     1,43 sur toute la plage fluide : tous deux plafonnent vers 1450 px de
     large. Avant cette échelle, le hero mesurait 86 px et le titre « Un mas,
     deux gîtes » 83 px : la hiérarchie ne se voyait plus, et le titre du site
     paraissait petit alors qu'il était seulement mal entouré. */
  --fs-hero:    clamp(2.9rem, 7.6vw, 6.9rem);    /*  46 → 110 px */
  /* Le titre de section se DÉDUIT du titre du site au lieu d'être borné à
     part : les deux bornes changeaient de régime à des largeurs différentes,
     si bien que le rapport dérivait de 1,21 à 1,65 sous 680 px et en paysage.
     Déduit, il vaut 1,434 à toutes les largeurs sans exception. */
  --fs-h2:      calc(var(--fs-hero) / 1.434);    /*  32 →  77 px */
  --fs-h3:      clamp(1.75rem, 2.9vw, 2.65rem);  /*  28 →  42 px */
  --fs-h4:      clamp(1.55rem, 2.15vw, 1.95rem); /*  25 →  31 px */
  --fs-h5:      clamp(1.3rem, 1.6vw, 1.6rem);    /*  21 →  26 px */
  --fs-lead:    clamp(1.16rem, 1.7vw, 1.5rem);   /*  19 →  24 px */
  --fs-body:    1.25rem;                         /*  20 px   — texte courant */
  --fs-body-2:  1.1rem;                          /* 17,6 px  — texte secondaire */
  --fs-control: 1.05rem;                         /* 16,8 px  — boutons, champs */
  --fs-small:   1rem;                            /*  16 px   — mentions, listes */
  --fs-micro:   0.9rem;                          /* 14,4 px  — capitales espacées */
  /* ---- Graisses — cinq crans, plus onze valeurs éparpillées ----
     Le display se porte plus léger que le texte : à 110 px, une graisse de
     470 pèse déjà davantage à l'œil qu'un 550 à 16 px. */
  --g-corps:     380;   /* texte courant */
  --g-appui:     500;   /* mises en avant discrètes, spécifications, étiquettes */
  --g-display:   470;   /* titres — hero et sections */
  --g-display-2: 515;   /* titres secondaires, noms de gîtes, marques */
  --g-fort:      595;   /* capitales espacées, boutons, chiffres, liens d'action */

  --lh-hero: 1.03;
  --lh-h2: 1.08;
  --lh-h3: 1.2;

  /* ---- Mouvement — une seule scénographie ----
     Une courbe, trois durées, un pas de cascade, une distance de translation.
     Toute animation du site se range dans ce tableau :
       réaction directe (survol, focus, sélection) ..... --t-court
       pression d'un bouton (appui bref, relâche
         retenue — le retour haptique simulé) .......... --t-appui, puis --t-court
       apparition (entrée, révélation au défilement) ... --t-moyen, décalée de --pas
       fondu photographique (carrousels) .............. --t-long
     Aucune photographie ne bouge : ni zoom, ni panoramique, ni flou. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease: var(--ease-out);        /* la courbe de tout ce qui apparaît ou réagit */
  --ease-retour: cubic-bezier(0.34, 1.56, 0.64, 1);
     /* Relâche des boutons seulement : surcourse d'un dixième du trajet —
        un demi-pixel au pic sur un bouton, le ressort se sent plus qu'il
        ne se voit. Partout ailleurs, --ease reste seule. */
  --t-appui: 0.09s;               /* l'appui est immédiat ; la relâche respire */
  --t-court: 0.45s;
  --t-moyen: 0.9s;
  --t-long: 2s;
  --pas: 0.12s;
  --lift: 18px;

  /* Espace — le silence */
  --nav-h: 5rem;
  --sp-section: clamp(6.5rem, 16vh, 12rem);
  --sp-inner: clamp(1.4rem, 4vw, 3rem);
  --max-w: 1200px;
  --max-w-narrow: 780px;
  --r-card: 28px;
  --r-thumb: 16px;
  --r-pill: 100px;
}

/* ---------- Base ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
/* Le navigateur dessine par défaut une bordure « groove » autour des fieldset
   et encoche la legend dedans : c'est ce cadre disgracieux autour des étapes
   du formulaire. On le supprime. */
fieldset { border: 0; min-inline-size: 0; }
legend { padding: 0; display: block; width: 100%; }
button { font: inherit; }
/* Le balayage vers la droite sur telephone decouvrait une page blanche.
   Rien ne debordait pourtant : scrollWidth vaut clientWidth et aucun element
   ne depasse. C'etait l'ELASTIQUE du navigateur — `overscroll-behavior-x`
   valait `auto`, ce qui autorise le rebond horizontal et, sur Android, le
   geste de retour. `none` ferme les deux.
   `overflow-x: clip` et non `hidden` : `hidden` sur un axe force l'autre a
   `auto` et casserait le defilement de la page. `clip` ne fait que clipper.
   Et `html` recoit le fond : sans lui le canevas n'est peint par personne, et
   c'est exactement le blanc qu'on voyait apparaitre sur le cote. */
html {
  scroll-behavior: smooth;
  overflow-x: clip; overscroll-behavior-x: none;
  background: var(--stone-50);
}
body { overscroll-behavior-x: none; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  font-family: var(--text);
  font-weight: var(--g-corps);
  font-size: var(--fs-body);
  line-height: 1.78;
  color: var(--ink-light);
  background: var(--stone-50);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: var(--green-800); color: var(--white); }

h1, h2, h3 { font-family: var(--display); font-variation-settings: var(--fvs-display); color: var(--green-900); text-wrap: balance; }
/* Un seul niveau de titre de section : même corps, même interlignage partout. */
h2 { font-size: var(--fs-h2); font-weight: var(--g-display); line-height: var(--lh-h2); }
p { text-wrap: pretty; }
/* Hors écran mais lu : ni display:none ni visibility:hidden, qui retirent le
   contenu de l'arbre d'accessibilité. Un carré d'un pixel, découpé. */
.hors-ecran {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}
/* Plus aucune italique décorative : l'emphase se fait par la graisse. */
em { font-style: normal; font-weight: var(--g-fort); font-variation-settings: var(--fvs-display); }

.wrap { max-width: var(--max-w); margin-inline: auto; padding-inline: var(--sp-inner); }
.wrap-narrow { max-width: var(--max-w-narrow); }

/* Label de section — un souffle, désormais plus lisible */
.label {
  font-family: var(--text);
  font-size: var(--fs-micro);
  font-weight: var(--g-fort);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--stone-500);
  margin-bottom: 2.2rem;
}

/* Le masquage n'est appliqué que si le JS a pu poser la classe sur <html> :
   sans lui, tout le contenu du site resterait invisible. */
.js .reveal { opacity: 0; transform: translateY(var(--lift)); transition: opacity var(--t-moyen) var(--ease-out), transform var(--t-moyen) var(--ease-out); }
.js .reveal.visible { opacity: 1; transform: none; }
.js .hero-sur, .js .hero-title, .js .hero-sub, .js .hero-bottom, .js .nav { opacity: 0; }
#veil { display: none; }
.js #veil { display: block; }

/* ============================================================
   VOILE D'ENTRÉE
   ============================================================ */
#veil {
  position: fixed; inset: 0; z-index: 60;
  background: var(--night-950);
  pointer-events: none;
  transition: opacity var(--t-moyen) var(--ease-out);
}
#veil.lifted { opacity: 0; }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed; inset-inline: 0; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.4rem var(--sp-inner);
  color: var(--white);
  /* La barre descend au lieu de monter : même image-clé, --lift inversé. */
  --lift: -14px;
  transition: background var(--t-court) var(--ease), color var(--t-court) var(--ease),
              padding var(--t-court) var(--ease), box-shadow var(--t-court) var(--ease);
}
body.entered .nav { animation: apparait var(--t-moyen) var(--ease-out) calc(4 * var(--pas)) forwards; }
.nav.scrolled {
  background: color-mix(in srgb, var(--stone-50) 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--green-900);
  padding-block: 0.9rem;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--stone-200) 70%, transparent);
}
.nav-brand { font-family: var(--display); font-variation-settings: var(--fvs-display); font-weight: var(--g-display-2); font-size: 1.26rem; text-decoration: none; letter-spacing: 0.01em; }
/* padding vertical : la cible cliquable atteint 40 px sans déplacer la barre */
.nav-links { display: flex; gap: 2.4rem; list-style: none; align-items: center; }
.nav-links a { font-size: var(--fs-small); font-weight: var(--g-appui); text-decoration: none; opacity: 0.9; transition: opacity var(--t-court) var(--ease); padding-block: 0.7em; display: inline-block; }
.nav-links a:hover { opacity: 1; }
.nav-links a:focus-visible, .nav-brand:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 4px; }
.nav-cta {
  border: 1px solid currentColor; border-radius: var(--r-pill);
  padding: 0.55em 1.5em !important; opacity: 1 !important;
}
/* La barre flotte sur la photographie sans plus rien sous elle : les liens se
   défendent par leur ombre, qui ne touche pas un pixel de l'image. Elle tombe
   dès que la barre prend son fond clair au défilement — là, le texte redevient
   sombre et une ombre sombre serait une salissure. */
.nav:not(.scrolled) { text-shadow: 0 1px 2px rgba(4,7,5,0.45), 0 1px 14px rgba(6,8,6,0.62); }
/* Le liseré du bouton « Nous contacter » est blanc : sur un ciel blanc il
   disparaissait purement et simplement. */
.nav:not(.scrolled) .nav-cta { box-shadow: 0 1px 14px rgba(6,8,6,0.5); }
.nav-toggle { display: none; }

/* ============================================================
   HERO — le lever de soleil
   ============================================================ */
/* Le hero est une grille de trois rangées : réserve de barre de navigation,
   contenu centré, bandeau de commandes. Les trois se partagent la hauteur au
   lieu de se superposer — c'est ce qui rend tout recouvrement impossible, y
   compris sur un téléphone en paysage. « min-height » plutôt que « height » :
   si la place manque, la section s'allonge, elle n'écrase rien. */
.hero {
  position: relative; min-height: 100svh;
  overflow: clip; background: var(--night-950);
  display: grid; grid-template-rows: var(--nav-h) 1fr auto;
  text-align: center;
}
/* z-index sur le conteneur, sinon les z-index des diapositives (1 et 2) ne
   sont pas locaux : ils entrent en concurrence avec le voile (z-index 1) et
   la photo passe PAR-DESSUS le dégradé qui assure la lisibilité du titre. */
.hero-slides { position: absolute; inset: 0; z-index: 0; }
/* Croisement sans creux de luminosité : la photo sortante reste opaque en
   dessous pendant que l'entrante apparaît par-dessus. Deux images à demi
   transparentes sur un fond noir donnent un fondu qui s'assombrit au milieu —
   c'est ce à-coup que l'on voyait. La courbe est linéaire : sur un fondu
   croisé, toute autre courbe crée un palier au milieu. */
.hero-slide {
  position: absolute; inset: 0; z-index: 0;
  opacity: 0; transition: opacity var(--t-long) linear;
  will-change: opacity;
}
.hero-slide img { width: 100%; height: 100%; object-fit: cover; }
/* Cadrage par diapositive, MESURÉ et non deviné : balayage de object-position
   de 0 à 100 %, contraste relevé pixel par pixel sous les trois lignes de
   texte, à 1265 × 720. Le gain est réel là où la photographie a du jeu :
   l'oliveraie passe de 1,23 à 4,51 sur le décile le plus clair du titre, le
   lever de soleil de 2,38 à 3,12. Les deux premières n'ont presque aucun jeu
   (15 px) — leur cadrage ne peut rien pour elles.
   Le sens du décalage tient à la photographie, pas à la fenêtre : ces deux-là
   ont le ciel en haut et le sombre en bas, donc « 100 % » vaut à toutes les
   tailles d'écran. Si l'ordre des diapositives change dans index.html, ces
   rangs sont à refaire — et à re-mesurer. */
.hero-slide:nth-child(1) img { object-position: 80% 50%; }   /* terrasse du Tilleul */
.hero-slide:nth-child(2) img { object-position: 40% 50%; }   /* terrasse Magnanerie */
.hero-slide:nth-child(3) img { object-position: 50% 80%; }   /* le mas en pierre */
.hero-slide:nth-child(4) img { object-position: 50% 100%; }  /* lever de soleil */
.hero-slide:nth-child(5) img { object-position: 50% 60%; }   /* les bancels */
.hero-slide:nth-child(6) img { object-position: 50% 100%; }  /* l'oliveraie */
.hero-slide.active { opacity: 1; z-index: 2; }
.hero-slide.sortante { opacity: 1; z-index: 1; transition: none; }

.hero-veil {
  position: absolute; inset: 0; z-index: 1;
  /* Plus aucun voile sur la photographie (décision de Tom, 29/08). L'ellipse
     centrale posait une tache grise en plein milieu de l'image. L'élément est
     conservé, vide : le script lui applique encore une opacité en mode
     « regarder la photo », et c'est ici que se remettrait un peu de contraste
     si la lisibilité du titre le demandait. Voir aussi .pool-overlay. */
  background: none;
}
.hero-content {
  grid-row: 2; align-self: center; justify-self: center;
  position: relative; z-index: 2; color: var(--white);
  padding-inline: var(--sp-inner); max-width: min(100%, 52rem);
}
/* La ligne la plus fragile du site : 14 px, seuil de 4,5:1, et mesurée à 1,31
   de médiane sur l'oliveraie, 1,71 sur le lever de soleil. Elle gagne une
   couche serrée sans décalage et un point de corps — le cadrage des deux
   photographies fautives fait le reste (voir .hero-slide plus bas). */
.hero-sur {
  text-shadow: 0 0 3px rgba(4,7,5,0.7), 0 1px 2px rgba(4,7,5,0.62),
               0 0 10px rgba(4,7,5,0.6), 0 1px 20px rgba(6,8,6,0.8);
  font-size: calc(var(--fs-micro) * 1.08); font-weight: var(--g-fort);
  letter-spacing: 0.3em; text-transform: uppercase;
  margin-bottom: clamp(1.4rem, 3vh, 2.2rem);
}
.hero-title {
  /* Le titre du site prend 8 % de plus que le jeton d'échelle, sans le
     modifier : --fs-h2 reste déduit de --fs-hero, et les titres de section ne
     bougent pas d'un pixel. Le rapport hero/section passe de 1,434 à 1,549 —
     il reste CONSTANT à toutes les largeurs, ce qui était tout l'objet de la
     dérivation. Une lettre plus grande et plus grasse traverse mieux un fond
     agité qu'une lettre fine : c'est la moitié du gain de lisibilité. */
  font-size: calc(var(--fs-hero) * 1.08);
  font-weight: 505; line-height: var(--lh-hero); color: var(--white);
  letter-spacing: -0.018em;
  /* Quatre couches, dont DEUX sans décalage. Ce sont celles-là qui comptent :
     une ombre décalée borde la lettre d'un côté, une couche sans décalage la
     cerne tout autour — c'est le seul geste qui tienne sur un fond clair, et
     c'est déjà lui qui a sauvé la piscine et les bandeaux.
     Mesuré en ligne le 30/08, les six diapositives, pixel par pixel sous le
     titre : la médiane descendait à 3,14 sur la PREMIÈRE photographie, celle
     qu'on voit en arrivant, et le décile le plus clair à 1,24 sur l'oliveraie.
     À savoir, et à ne pas oublier : une ombre portée n'entre pas dans le
     calcul de contraste de la norme, qui ne compare que deux couleurs. Elle
     aide l'œil, réellement ; elle ne déplace pas le chiffre. Seule une assise
     le déplacerait, et le parti pris tenu ici est de garder la photographie
     nue (arbitrage de Tom, 30/08 : « le plus subtil »). */
  text-shadow: 0 0 4px rgba(4,7,5,0.55), 0 1px 3px rgba(4,7,5,0.5),
               0 0 16px rgba(4,7,5,0.5), 0 2px 34px rgba(6,8,6,0.7);
}
.hero-sub {
  text-shadow: 0 0 4px rgba(4,7,5,0.6), 0 1px 3px rgba(4,7,5,0.52),
               0 0 14px rgba(4,7,5,0.55), 0 1px 22px rgba(6,8,6,0.72);
  font-size: var(--fs-lead); font-weight: var(--g-corps);
  margin-top: clamp(1.4rem, 3vh, 2.2rem); letter-spacing: 0.015em;
}
/* Une seule cascade d'entrée : même image-clé, même durée, même courbe, un
   pas régulier. Elle dure 1,4 s en tout, si bien qu'elle se lit comme un seul
   mouvement — et non comme cinq animations qui se succèdent. */
body.entered .hero-sur    { animation: apparait var(--t-moyen) var(--ease-out) calc(0 * var(--pas)) forwards; }
body.entered .hero-title  { animation: apparait var(--t-moyen) var(--ease-out) calc(1 * var(--pas)) forwards; }
body.entered .hero-sub    { animation: apparait var(--t-moyen) var(--ease-out) calc(2 * var(--pas)) forwards; }
body.entered .hero-bottom { animation: apparait var(--t-moyen) var(--ease-out) calc(3 * var(--pas)) forwards; }
@keyframes apparait { from { opacity: 0; transform: translateY(var(--lift)); } to { opacity: 1; transform: none; } }

/* Flèches de défilement — une seule paire, dans la rangée de commandes.
   Renforcées d'un cran le 31/08 (fond, cerne, chevron plein, trait, ombre
   douce) : sur la margelle claire de la piscine, elles se fondaient. */
.carr-fleche {
  width: 46px; height: 46px; border-radius: 50%; flex: none;
  border: 1px solid rgba(255,255,255,0.5);
  background: rgba(10,14,11,0.42);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: var(--white); cursor: pointer;
  display: grid; place-items: center; padding: 0;
  box-shadow: 0 2px 14px rgba(8,12,9,0.35);
  transition: background var(--t-court) var(--ease), border-color var(--t-court) var(--ease),
              transform var(--t-court) var(--ease-retour);
}
.carr-fleche:hover { background: rgba(10,14,11,0.62); border-color: rgba(255,255,255,0.6); }
/* Même retour haptique que .btn — 0.94 car 46 px : en dessous, rien ne se
   sentirait. Sous reduced-motion, transform: none !important l'éteint. */
.carr-fleche:active { background: rgba(10,14,11,0.72); transform: scale(0.94); transition-duration: var(--t-appui); }
.carr-fleche:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
.carr-fleche svg { width: 19px; height: 19px; stroke-width: 1.9; }

/* Le bandeau du bas : légende à gauche sur la marge de page, invitation à
   descendre au centre, commandes à droite. La légende n'est plus coincée
   entre deux voisines dans une colonne centrée — elle dispose d'un tiers de
   la largeur et peut respirer. */
.hero-bottom {
  grid-row: 3; position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 1rem clamp(1rem, 3vw, 2.5rem);
  padding: 0 var(--sp-inner) clamp(1.6rem, 3.4vh, 2.6rem);
}
/* Le fond dégradé du bandeau est retiré avec les autres voiles (29/08) : la
   légende, « Découvrir » et les commandes se posent à même la photographie. */
.hero-bottom::before {
  content: ''; position: absolute; inset-inline: 0; bottom: 0; top: -3.5rem;
  z-index: -1; pointer-events: none;
  background: none;
}

/* Légende de la photo courante, précédée de son rang dans la série */
.hero-caption {
  grid-column: 1; justify-self: start; text-align: left;
  display: flex; align-items: baseline; gap: 0.85em; max-width: min(100%, 52ch);
  font-size: var(--fs-micro); font-weight: var(--g-display-2); letter-spacing: 0.03em;
  color: rgba(255,255,255,0.9);
  text-shadow: 0 1px 2px rgba(4,7,5,0.6), 0 1px 18px rgba(6,8,6,0.88);
  transition: opacity var(--t-court) var(--ease-out);
}
.hero-caption b {
  flex: none; font-weight: var(--g-fort); color: rgba(255,255,255,0.82);
  font-variant-numeric: tabular-nums; letter-spacing: 0.1em;
  padding-right: 0.85em; border-right: 1px solid rgba(255,255,255,0.26);
}
/* Un seul groupe de commandes, au lieu de deux paires dispersées. */
.hero-controls { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: clamp(0.8rem, 1.8vw, 1.3rem); }
.hero-dots { display: flex; gap: 1.4rem; }
.hero-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,0.46); border: 0; cursor: pointer; padding: 0;
  transition: background var(--t-court) var(--ease), transform var(--t-court) var(--ease);
  position: relative;
}
/* La pastille reste minuscule à l'œil, mais la zone cliquable fait 40 px :
   sinon la cible tactile est inatteignable au doigt (WCAG 2.5.8). */
/* L'extension horizontale ne doit pas dépasser la moitié de l'écart : avec
   « inset: -17px » les zones de 41 px se recouvraient de 20 px, et la voisine
   de droite, peinte après, recevait le doigt — taper une pastille activait la
   photo suivante. Bornée à la moitié de l'écart, chaque pastille possède
   exactement son pas de 29,4 px, sans recouvrement. */
.hero-dot::after { content: ''; position: absolute; inset: -17px -11.2px; }
.hero-dot:focus-visible { outline: 2px solid var(--white); outline-offset: 6px; }
.hero-dot.active { background: var(--white); transform: scale(1.25); }
.hero-scroll {
  grid-column: 2; justify-self: center;
  font-size: var(--fs-micro); letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(255,255,255,0.7); text-decoration: none; font-weight: var(--g-display-2);
  white-space: nowrap; padding: 0.7em 1em;   /* cible tactile confortable */
  text-shadow: 0 1px 2px rgba(4,7,5,0.5), 0 1px 16px rgba(6,8,6,0.72);
  transition: color var(--t-court) var(--ease);
}
.hero-scroll:hover { color: rgba(255,255,255,0.95); }
.hero-scroll:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; border-radius: 4px; }

/* ============================================================
   SECTIONS
   ============================================================ */
.section { padding-block: var(--sp-section); }
/* Sans cette marge, un lien d'ancre amène le titre visé exactement sous la
   barre fixe, qui le recouvre. */
section[id], div[id], span[id] { scroll-margin-top: calc(var(--nav-h) + 0.5rem); }

/* ---------- Gîtes ---------- */
.gites { background: var(--stone-100); }
/* Ce titre-ci est plus petit que les autres h2, et c'est voulu : à la pleine
   mesure il faisait 914 px de large et se cassait en deux lignes dès qu'on
   descendait sous 1090 px de fenêtre — la plupart des portables. Borné à
   0,72 fois --fs-h2, il tient sur une ligne à partir de 834 px.
   Le plancher de 1,6 rem est là pour le téléphone : sans lui la formule
   descendait à 21 px, à peine plus que le texte courant. Sur un écran étroit
   le titre passe donc à deux lignes, équilibrées par `balance` (150 et 191 px
   mesurés à 375). Sur un écran de portable, une seule ligne. */
.gites-head { text-align: center; margin-bottom: clamp(4rem, 8vh, 6rem); }
.gites-head h2 { font-size: clamp(1.6rem, 3.8vw, calc(var(--fs-h2) * 0.72)); text-wrap: balance; }
.gites-head .label { font-size: calc(var(--fs-micro) * 1.16); letter-spacing: 0.26em; color: var(--stone-500); }
.gites-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(430px, 100%), 1fr));
  gap: clamp(2rem, 4vw, 3.4rem); max-width: 1400px; margin-inline: auto; padding-inline: var(--sp-inner);
}
.gite {
  background: var(--white); border: 1px solid var(--stone-200); border-radius: var(--r-card);
  overflow: clip; display: flex; flex-direction: column;
  transition: transform var(--t-court) var(--ease-out), box-shadow var(--t-court) var(--ease-out);
}
.gite:hover { transform: translateY(-6px); box-shadow: 0 30px 70px -30px rgba(44,58,44,0.25); }
.gite-img { position: relative; height: clamp(300px, 42vw, 430px); overflow: clip; cursor: zoom-in; }
.gite-img:focus-visible, .gite-gallery button:focus-visible { outline: 3px solid var(--green-800); outline-offset: -3px; }
/* Aucune photographie ne bouge sur ce site : pas de zoom au survol. Le voile
   qui s'assombrissait au survol est retiré avec les autres (29/08) ; la règle
   reste en place, vide, comme point de reprise si le contraste doit revenir. */
.gite-img img { width: 100%; height: 100%; object-fit: cover; }
.gite-badge {
  position: absolute; top: 1.4rem; left: 1.4rem; z-index: 2;
  background: color-mix(in srgb, var(--white) 94%, transparent);
  font-size: var(--fs-micro); font-weight: var(--g-fort);
  padding: 0.5em 1.2em; border-radius: var(--r-pill); backdrop-filter: blur(6px);
}
/* Légende sur la photo d'en-tête : on sait quelle terrasse on regarde */
.gite-legende {
  position: absolute; left: 1.4rem; right: 1.4rem; bottom: 1.3rem; z-index: 2;
  font-size: var(--fs-micro); font-weight: var(--g-display-2); color: var(--white);
  text-shadow: 0 1px 2px rgba(4,7,5,0.55), 0 1px 16px rgba(6,8,6,0.82);
}
.gite-img::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: none;
  transition: opacity var(--t-court) var(--ease);
}
.gite-img:hover::after { opacity: 0.62; }
.gite-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; padding: 3px; background: var(--white); }
.gite-gallery button { border: 0; padding: 0; cursor: pointer; background: none; position: relative; overflow: clip; border-radius: 10px; aspect-ratio: 4/3; }
.gite-gallery img { width: 100%; height: 100%; object-fit: cover; }
.gite-gallery button { transition: box-shadow var(--t-court) var(--ease); }
.gite-gallery button:hover { box-shadow: inset 0 0 0 2px var(--accent, var(--green-800)); }
.gite-body { padding: clamp(1.8rem, 4vw, 2.8rem); display: flex; flex-direction: column; flex: 1; }
.gite-body h3 { font-size: var(--fs-h3); font-weight: var(--g-display-2); line-height: var(--lh-h3); }
.gite-tag { font-family: var(--text); font-weight: var(--g-appui); color: var(--ink-muted); margin-top: 0.4rem; font-size: var(--fs-small); letter-spacing: 0.02em; }
.gite-specs {
  display: flex; gap: 1.8rem; margin-block: 1.6rem; padding-block: 1.15rem;
  border-block: 1px solid var(--stone-200);
  font-size: var(--fs-small); font-weight: var(--g-appui); color: var(--stone-700); flex-wrap: wrap;
}
.gite-specs svg { width: 17px; height: 17px; stroke: var(--stone-500); vertical-align: -3px; margin-right: 0.45em; }
.gite-prix { margin-top: 0.9rem; font-size: var(--fs-small); color: var(--ink-muted); }
.gite-prix b { font-family: var(--display); font-variation-settings: var(--fvs-display-tight); font-size: var(--fs-h5); font-weight: var(--g-fort); color: var(--accent-texte); margin-right: 0.3em; }
.gite-desc { font-size: var(--fs-body-2); line-height: 1.78; }
.gite-tags { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 1.6rem; }
.gite-tags span {
  font-size: var(--fs-micro); font-weight: var(--g-appui); padding: 0.42em 1.05em; border-radius: var(--r-pill);
}
/* flex-wrap depuis le 30/08 : la ligne porte maintenant la date du releve,
   et sur une carte etroite elle deborderait sans ca. */
.gite-score { margin-top: 1.7rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.7rem; row-gap: 0.3rem; }
.gite-score b { font-family: var(--display); font-variation-settings: var(--fvs-display-tight); font-size: var(--fs-h5); font-weight: var(--g-fort); }
/* Les étoiles reflètent la note réelle (--pct) au lieu d'afficher 5/5 :
   afficher cinq étoiles pleines à côté de « 4,77 » revient à arrondir en douce. */
.gite-score .stars {
  letter-spacing: 0.1em; font-size: 1rem;
  background: linear-gradient(90deg,
    var(--gold) var(--pct, 100%),
    color-mix(in srgb, var(--gold) 26%, transparent) var(--pct, 100%));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.gite-score span { font-size: var(--fs-micro); color: var(--ink-muted); }
.gite-foot {
  margin-top: auto; padding-top: 1.7rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  font-size: var(--fs-small); color: var(--ink-muted); flex-wrap: wrap;
}
.gite-foot a { font-weight: var(--g-fort); text-decoration: none; white-space: nowrap; padding-block: 0.45em; }
.gite-foot a::after { content: ' →'; }

/* Le mas entier — l'offre à 17 voyageurs, invisible jusqu'ici */
.gites-ensemble {
  max-width: 1400px; margin: clamp(2rem, 4vw, 3.4rem) auto 0;
  padding-inline: var(--sp-inner);
}
.gites-ensemble-txt {
  background: var(--white); border: 1px solid var(--stone-200);
  border-radius: var(--r-card); padding: clamp(1.6rem, 3.4vw, 2.4rem);
  flex: 1 1 100%;
  display: grid; grid-template-columns: 1fr auto; gap: 0.6rem clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
.gites-ensemble-sur {
  grid-column: 1; font-size: var(--fs-micro); font-weight: var(--g-fort); letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--stone-500);
}
.gites-ensemble-txt h3 { grid-column: 1; font-size: var(--fs-h4); font-weight: var(--g-display-2); line-height: var(--lh-h3); }
/* Le paragraphe porte sa classe, comme .gite-desc. « .gites-ensemble-txt p »
   attrapait aussi le surtitre : il prenait le corps du texte courant et la
   justification, et sur téléphone « LES DEUX GÎTES » s'étirait d'un bord à
   l'autre de la carte au-dessus d'« ENSEMBLE » seul (relevé le 23/09). */
.gites-ensemble-desc { grid-column: 1; font-size: var(--fs-body-2); max-width: 62ch; }
/* Le bouton est bien un enfant de la grille .gites-ensemble-txt */
.gites-ensemble-txt .btn { grid-column: 2; grid-row: 1 / span 3; align-self: center; justify-self: end; }

/* ---------- Piscine — full-bleed ---------- */
.pool {
  position: relative; min-height: 92svh; overflow: clip;
  display: flex; align-items: flex-end; color: var(--white);
}
.pool-photos { position: absolute; inset: 0; z-index: 0; background: var(--night-950); }
/* Même croisement que le hero, même durée, même courbe. */
.pool-photo {
  position: absolute; inset: 0; z-index: 0;
  opacity: 0; transition: opacity var(--t-long) linear; will-change: opacity;
}
.pool-photo img { width: 100%; height: 100%; object-fit: cover; }
.pool-photo.active { opacity: 1; z-index: 2; }
.pool-photo.sortante { opacity: 1; z-index: 1; transition: none; }
.pool-overlay {
  position: absolute; inset: 0;
  background: none;
}
.pool-content { position: relative; z-index: 2; width: 100%; max-width: var(--max-w); margin-inline: auto; padding: 0 var(--sp-inner) clamp(3.5rem, 8vh, 6rem); }
/* C'est le bloc de texte le plus exposé du site, et il l'est devenu davantage
   depuis que le carrousel ouvre sur la vue aérienne : le texte s'y pose sur de
   la pierre sèche en plein soleil, presque blanche. Trois couches plutôt que
   deux — la couche centrale, sans décalage, cerne la lettre d'un halo au lieu
   de la border d'une ombre, et c'est elle qui tient sur un fond clair.
   Toujours aucun pixel de la photographie n'est touché. */
.pool .label { color: rgba(255,255,255,0.92); text-shadow: 0 1px 2px rgba(4,7,5,0.72), 0 0 5px rgba(4,7,5,0.6), 0 1px 18px rgba(5,8,6,0.85); }
.pool h2 { color: var(--white); text-shadow: 0 1px 3px rgba(4,7,5,0.6), 0 0 10px rgba(4,7,5,0.5), 0 2px 34px rgba(5,8,6,0.78); }
.pool-body { max-width: 52ch; margin-top: 1.8rem; font-size: var(--fs-body); line-height: 1.78; color: var(--white); text-shadow: 0 1px 2px rgba(4,7,5,0.72), 0 0 6px rgba(4,7,5,0.6), 0 1px 20px rgba(5,8,6,0.88); }
/* Les quatre caractéristiques tombent exactement sur l'eau et la margelle de
   la vue aérienne — mesuré à 1,77 de contraste MOYEN sur « Filtration au sel »,
   pas seulement au pire endroit. Aucune ombre ne rattrape un fond aussi clair
   sur du texte de 16 px : il faut une assise. Ce sont donc des pastilles, pas
   un voile — l'assise appartient au texte et se déplace avec lui, la
   photographie reste intacte tout autour. Même vocabulaire que les flèches du
   carrousel, juste en dessous. Sur les photos de nuit, la pastille disparaît
   d'elle-même dans le fond sombre. */
.pool-features { display: flex; gap: 0.6rem; margin-top: 2.4rem; flex-wrap: wrap; }
.pool-features li {
  list-style: none; font-size: var(--fs-small); font-weight: var(--g-appui); color: var(--white);
  text-shadow: 0 1px 2px rgba(4,7,5,0.6);
  display: flex; align-items: center; gap: 0.6rem;
  background: rgba(8,12,9,0.55);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--r-pill);
  padding: 0.5em 1.15em;
}
.pool-features svg { width: 18px; height: 18px; stroke: var(--stone-300); flex: none; }
.pool-controls { display: flex; align-items: center; gap: clamp(0.8rem, 1.8vw, 1.3rem); margin-top: 2.6rem; }
.pool-dots { display: flex; gap: 1.4rem; }
.pool-dots button {
  width: 7px; height: 7px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: rgba(255,255,255,0.46); transition: background var(--t-court) var(--ease), transform var(--t-court) var(--ease);
  position: relative;
}
.pool-dots button::after { content: ''; position: absolute; inset: -17px -11.2px; }
.pool-dots button:focus-visible { outline: 2px solid var(--white); outline-offset: 6px; }
.pool-dots button.active { background: var(--white); transform: scale(1.25); }

/* ---------- Nuit étoilée — bandeau photographique ----------
   La Voie lactée dessinée au canvas (150 lignes de JavaScript) a cédé la
   place le 30/08 à une vraie photographie. À hauteur réduite, un dessin ne
   tenait plus la comparaison — et la bande est désormais une respiration
   entre deux sections, pas une section : moitié moins haute qu'avant.
   Aucun voile sur l'image, conformément à la règle du 29/08 : le ciel est
   noir de lui-même, et le texte se défend par son ombre. Mesuré en ligne le
   30/08 : titre à 9,3:1 en moyenne, 6,2:1 sur le décile le plus clair. */
.night {
  position: relative; background: var(--night-950); color: var(--white);
  overflow: clip; text-align: center;
  min-height: clamp(300px, 42svh, 440px);
  display: grid; align-content: center;
  padding-block: clamp(3rem, 7vh, 4.8rem);
}
.night-photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 34%;
}
/* Règle conservée vide : si la mesure de contraste réclame un jour un appui
   sur l'image, c'est ici — et nulle part ailleurs — qu'il se pose. */
.night-fade { position: absolute; inset: 0; background: none; }
.night-content { position: relative; z-index: 2; max-width: var(--max-w-narrow); margin-inline: auto; padding-inline: var(--sp-inner); }
.night .label { color: color-mix(in srgb, var(--gold) 82%, var(--stone-300)); margin-bottom: 1.5rem; text-shadow: 0 1px 2px rgba(0,0,0,0.85), 0 0 6px rgba(0,0,0,0.7); }
.night h2 { color: var(--white); font-size: var(--fs-h3); text-shadow: 0 1px 3px rgba(0,0,0,0.8), 0 0 12px rgba(0,0,0,0.62), 0 2px 34px rgba(0,0,0,0.7); }
.night-body { margin-top: 1.3rem; font-size: var(--fs-body-2); color: rgba(255,255,255,0.9); max-width: 46ch; margin-inline: auto; text-shadow: 0 1px 2px rgba(0,0,0,0.85), 0 0 6px rgba(0,0,0,0.7), 0 1px 22px rgba(0,0,0,0.6); }
/* Le crédit photographique n'est pas une décoration : la licence CC BY 4.0
   de l'ESO l'impose, avec sa formulation exacte. Ne pas le retirer. */
.night-credit {
  position: absolute; z-index: 2; right: var(--sp-inner); bottom: 0.65rem;
  font-size: 0.66rem; letter-spacing: 0.05em; color: rgba(255,255,255,0.4);
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
}
.night-credit a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.2); }
.night-credit a:hover { color: rgba(255,255,255,0.72); }

/* ---------- Lieu ---------- */
.place-banner { position: relative; height: clamp(420px, 62svh, 640px); overflow: clip; display: flex; align-items: flex-end; }
.place-banner img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.place-banner-overlay { position: absolute; inset: 0; background: none; }
.place-banner-text { position: relative; z-index: 2; color: var(--white); width: 100%; max-width: var(--max-w); margin-inline: auto; padding: 0 var(--sp-inner) clamp(2.6rem, 6vh, 4rem); }
/* Trois couches et non deux, comme sur la piscine : la couche du milieu, sans
   décalage, cerne la lettre d'un halo au lieu de la border d'une ombre. C'est
   elle qui tient sur un toit en plein soleil. Mesuré en ligne le 30/08 : le
   titre de la page « activités » tombait à 1,04:1 sur son pire pixel. Toujours
   aucun voile sur la photographie — l'assise appartient au texte. */
.place-banner-text .label { color: rgba(255,255,255,0.9); margin-bottom: 1.2rem; text-shadow: 0 1px 2px rgba(4,7,5,0.8), 0 0 6px rgba(4,7,5,0.7), 0 1px 18px rgba(5,8,6,0.85); }
.place-banner-text h2, .place-banner-text h1 { color: var(--white); max-width: 18ch; text-shadow: 0 1px 3px rgba(4,7,5,0.62), 0 0 12px rgba(4,7,5,0.55), 0 2px 34px rgba(5,8,6,0.75); }
/* Le titre de la page intérieure retrouve le corps de celui de l'accueil : sur
   une photographie touffue, la taille fait autant que le contraste. */
.banner-page h1 { font-size: clamp(2.1rem, 4.2vw, 3.4rem); }
/* Le cadrage remonte : à 50 % la bande visible tombait sur les toits du
   village, à 40 % elle prend le versant boisé. Sept positions mesurées, c'est
   celle qui donne le meilleur compromis titre/label. */
.banner-page img.bg { object-position: 50% 40%; }

/* « Le lieu » ouvre désormais sur un fond uni, comme n'importe quelle
   section : son bandeau photographique touchait celui de la piscine. Les
   règles .place-banner restent en place — la page « activités » s'en sert
   encore, et elle est suivie d'un fond uni, donc sans mosaïque. */
.place-tete { text-align: center; max-width: var(--max-w-narrow); margin: 0 auto clamp(3.4rem, 7vh, 5rem); }
.place-tete h2 { margin-inline: auto; }
/* La figure du panorama : le format est celui du bandeau qu'elle remplace,
   en large et bas, pour qu'elle se lise comme un horizon et non comme une
   vignette. */
.place-figure { margin-top: clamp(3.6rem, 8vh, 5.5rem); }
.place-figure img {
  width: 100%; height: auto; aspect-ratio: 21 / 8; object-fit: cover;
  object-position: 50% 44%; border-radius: var(--r-card); display: block;
}
.place-figure figcaption {
  margin-top: 1rem; font-size: var(--fs-micro); color: var(--ink-muted);
  text-align: center; letter-spacing: 0.01em;
}
/* Le rythme vertical de la section, conservé tel qu'il était quand elle avait
   un bandeau : un peu moins que la pleine mesure en haut, un peu plus en bas.
   .place-body-section, le conteneur du corps de section, n'existe plus dans
   index.html depuis que le bandeau est parti. */
.place-section { padding-block: calc(var(--sp-section) * 0.86) calc(var(--sp-section) * 0.92); }
.place-cols {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
  gap: clamp(2.4rem, 5vw, 4.5rem); align-items: start;
}
/* Disposition demandée par Tom le 31/08 : les deux cartes côte à côte sur la
   première ligne, les deux blocs de texte côte à côte en dessous.
   Avant, la colonne de gauche s'arrêtait 343 px avant celle de droite — un
   vide en escalier au milieu de la section, et c'est ce qu'il voyait.
   Rien n'est déplacé dans le HTML : `display: contents` fait remonter les
   deux cartes au niveau de la grille, et les deux textes se répartissent par
   `columns: 2` avec une coupe FORCÉE avant « Le village » — sans elle, le
   navigateur équilibre les colonnes où il veut et coupe au milieu d'un
   paragraphe. Si un troisième h3 entrait dans cette colonne, la règle
   `nth-of-type(2)` serait à revoir. */
@media (min-width: 980px) {
  .place-cols {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    row-gap: clamp(3rem, 6vh, 4.4rem); align-items: start;
  }
  /* Sélecteurs volontairement spécifiques : `.place-cartes { display: flex }`
     est déclaré PLUS BAS dans ce fichier, et à spécificité égale c'est le
     dernier qui gagne — une media query n'ajoute aucune spécificité. Écrire
     `.place-cartes { display: contents }` ici n'aurait rien fait, et c'est
     exactement ce qui s'est passé au premier essai : les deux cartes sont
     restées empilées. */
  .place-cols > .place-col:last-child,
  .place-cols > .place-col > .place-cartes { display: contents; }
  .place-cols .place-card-carte { grid-row: 1; grid-column: 1; }
  .place-cols .place-cartes .place-card:not(.place-card-carte) { grid-row: 1; grid-column: 2; }
  .place-cols > .place-col:first-child {
    grid-row: 2; grid-column: 1 / -1;
    columns: 2; column-gap: clamp(2.4rem, 5vw, 4.5rem);
  }
  .place-cols > .place-col:first-child h3 { break-after: avoid; }
  .place-cols > .place-col:first-child h3:nth-of-type(2) { break-before: column; margin-top: 0; }

  /* Et le rythme vertical, resserré. La disposition seule ne faisait gagner
     que 60 px sur 2721 : la longueur venait des blancs — 451 px de marges et
     de padding à eux seuls. Mesuré à 1360 px : 2721 -> 2500. */
  .place-section { padding-block: calc(var(--sp-section) * 0.60) calc(var(--sp-section) * 0.64); }
  .place-tete { margin-bottom: clamp(2.2rem, 4.2vh, 3rem); }
  .place-figure { margin-top: clamp(2.4rem, 5vh, 3.4rem); }
  .place-acts { margin-top: clamp(2.6rem, 5.5vh, 3.8rem); }
}

/* « Autour du mas », entré dans « Le lieu » le 30/08. Le titre porte son
   lien à droite : un bouton centré sous la liste faisait une deuxième
   invitation à cliquer là où la page en a déjà une. */
.place-acts { margin-top: clamp(4rem, 9vh, 6.5rem); }
.place-acts-tete {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 1rem 2rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--stone-200);
}
.place-acts-tete h3 {
  font-size: var(--fs-h5); font-weight: var(--g-display-2);
  color: var(--green-900); line-height: var(--lh-h3);
}
.place-acts-lien {
  font-size: var(--fs-small); font-weight: var(--g-fort); color: var(--green-800);
  text-decoration: none; white-space: nowrap;
  border-bottom: 1px solid color-mix(in srgb, var(--green-800) 30%, transparent);
  padding-bottom: 0.15em; transition: border-color var(--t-court) var(--ease);
}
.place-acts-lien:hover { border-bottom-color: var(--green-800); }
.place-col h3 {
  font-size: var(--fs-h5); font-weight: var(--g-display-2); margin-bottom: 0.9rem; line-height: var(--lh-h3);
}
.place-col h3 + p { margin-bottom: 1.2rem; }
.place-col p + h3 { margin-top: 2.4rem; }
.place-col p { font-size: var(--fs-body-2); line-height: 1.8; }

.place-card {
  background: var(--white); border: 1px solid var(--stone-200);
  border-radius: var(--r-card); padding: clamp(1.8rem, 3.6vw, 2.6rem);
  box-shadow: 0 24px 60px -40px rgba(44,58,44,0.3);
}
.place-card h3 { font-size: var(--fs-h5); font-weight: var(--g-display-2); margin-bottom: 1.4rem; line-height: var(--lh-h3); }
/* La fiche qui porte la carte : tout y est centré, y compris l'adresse —
   une carte se regarde depuis son milieu, pas depuis sa marge gauche. */
.place-card-carte { text-align: center; }
.place-card-carte .place-adresse { margin-top: 1.4rem; }

/* ── La carte du sud de la France ──────────────────────────────────────────
   Dessinée ici, en SVG, et pas empruntée à un service de cartographie : la
   CSP du site interdit les cadres (frame-ancestors 'none', default-src
   'self'), donc aucune carte embarquée n'est possible — ni Google, ni
   OpenStreetMap. Le trait de côte, le Rhône et les trois villes sont
   projetés depuis leurs coordonnées réelles ; l'échelle dessinée en bas à
   gauche mesure la projection elle-même.
   Parti graphique : celui du site, pas celui d'un atlas. Deux aplats pour la
   mer et le relief, un trait pour les routes, aucun ornement — pas de rose
   des vents, pas de hachures, pas de symboles dessinés. */
.carte-sud   { display: block; width: 100%; height: auto; margin-block: 0.2rem 1.5rem; }
.c-fond      { fill: var(--stone-50); }
/* Le relief : trois aplats emboîtés, du piémont vers les crêtes. Ils disent
   « c'est haut ici » sans prétendre à une courbe de niveau. */
.c-relief    { stroke: none; }
.c-relief-1  { fill: color-mix(in srgb, var(--stone-300) 11%, transparent); }
.c-relief-2  { fill: color-mix(in srgb, var(--stone-300) 15%, transparent); }
.c-relief-3  { fill: color-mix(in srgb, var(--stone-300) 22%, transparent); }
.c-mer       { fill: color-mix(in srgb, var(--green-100) 78%, var(--white)); }
.c-fleuve    { fill: none; stroke: color-mix(in srgb, var(--green-100) 92%, var(--white));
               stroke-width: 3.6; stroke-linecap: round; }
.c-route     { fill: none; stroke: color-mix(in srgb, var(--stone-500) 42%, transparent);
               stroke-width: 1.3; stroke-linecap: round; }
.c-point     { fill: var(--stone-500); }
.c-ville, .c-temps, .c-mas-nom, .c-pays, .c-eau, .c-echelle text { font-family: var(--text); }
.c-ville     { font-size: 12px;   font-weight: var(--g-appui);   fill: var(--stone-700); }
.c-temps     { font-size: 11px;   font-weight: var(--g-fort);    fill: var(--green-800); }
.c-pays      { font-size: 9.5px;  font-weight: var(--g-appui);   letter-spacing: 0.26em;
               text-transform: uppercase;
               fill: color-mix(in srgb, var(--stone-700) 50%, transparent); }
.c-eau       { font-size: 9.5px;  font-weight: var(--g-corps);   letter-spacing: 0.1em;
               fill: color-mix(in srgb, var(--stone-700) 46%, transparent); }
/* Le mas : la seule marque en or de la carte, et la seule à deux cercles. */
.c-mas-halo   { fill: color-mix(in srgb, var(--gold) 17%, transparent); }
.c-mas-anneau { fill: var(--white); stroke: var(--gold); stroke-width: 1.8; }
.c-mas-coeur  { fill: var(--green-900); }
/* Le nom passe au-dessus d'une route : un liseré du fond tracé SOUS le
   remplissage le détache, sans cartouche ni pastille. */
.c-mas-nom    { font-size: 13px; font-weight: var(--g-display-2); fill: var(--green-900);
                paint-order: stroke fill; stroke: var(--stone-50); stroke-width: 3.4;
                stroke-linejoin: round; }
.c-echelle path { fill: none; stroke: color-mix(in srgb, var(--stone-500) 45%, transparent);
                  stroke-width: 1; }
.c-echelle text { font-size: 8.5px; font-weight: var(--g-appui); letter-spacing: 0.05em;
                  fill: color-mix(in srgb, var(--ink-muted) 80%, transparent); }

.place-adresse { margin-top: 1.8rem; }
.place-rue { font-size: var(--fs-body-2); font-weight: var(--g-appui); color: var(--stone-700); line-height: 1.6; }
.place-adresse .coords { margin-top: 0.7rem; font-size: var(--fs-micro); letter-spacing: 0.05em; color: var(--ink-muted); line-height: 1.7; }
.place-card .btn-ghost { margin-top: 1.8rem; width: 100%; text-align: center; }
/* Deux cartes empilées : « Venir au mas » puis « Le village ». L'écart les
   sépare sans les détacher — c'est une même colonne, pas deux blocs. */
.place-cartes { display: flex; flex-direction: column; gap: clamp(1.2rem, 2.6vw, 1.8rem); }
.place-card p { font-size: var(--fs-body-2); line-height: 1.75; color: var(--ink-light); }
.place-card h3 + p { margin-top: 0.2rem; }
.place-card .place-lien {
  display: inline-block; margin-top: 1.1rem;
  font-size: var(--fs-small); font-weight: var(--g-appui); color: var(--ink-light);
  text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--green-800) 30%, transparent);
  padding-bottom: 0.15em;
}
.place-card .place-lien:hover { color: var(--green-800); border-bottom-color: var(--green-800); }

.btn-ghost {
  display: inline-block;
  border: 1px solid var(--green-800); color: var(--green-800);
  font-size: var(--fs-control); font-weight: var(--g-fort); text-decoration: none;
  padding: 0.78em 1.9em; border-radius: var(--r-pill);
  /* Un libellé long (« Ouvrir l'itinéraire sur Google Maps ») passe à deux
     lignes sur téléphone : équilibrées et centrées plutôt que 159/99 px
     alignés à gauche. Sans effet sur les boutons d'une ligne. */
  text-align: center; text-wrap: balance;
  transition: background var(--t-court) var(--ease), color var(--t-court) var(--ease),
              transform var(--t-court) var(--ease-retour);
}
.btn-ghost:hover { background: var(--green-800); color: var(--white); }
.btn-ghost:active { background: var(--green-800); color: var(--white); transform: scale(0.98); transition-duration: var(--t-appui); }

/* ---------- L'argument des tarifs ----------
   La section « Tarifs » a fusionné avec « Disponibilités » le 30/08 : ce qui
   reste ici, c'est la carte blanche posée au milieu de la section sombre —
   celle qui porte le seul chiffre que le visiteur doit retenir, à savoir
   qu'il n'y en a pas d'autre à payer. */
/* La marge reprend la formule du formulaire, et pas seulement pour la
   symétrie : avec `auto`, cette carte touchait les deux bords de l'écran sur
   téléphone (0 → 375) pendant que le formulaire gardait ses 22 px de marge
   juste en dessous. Deux cartes superposées, deux alignements différents. */
.book-argument {
  --arg-large: 690px;
  max-width: var(--arg-large);
  margin-block: clamp(2.8rem, 6vh, 4.2rem) 0;
  margin-inline: max(var(--sp-inner), calc((100% - var(--arg-large)) / 2));
  background: var(--white);
  border-radius: var(--r-card);
  padding: clamp(2rem, 4.4vw, 3rem);
  box-shadow: 0 30px 70px -45px rgba(44,58,44,0.30);
  text-align: center;
}
.tarifs-argument-sur {
  font-size: var(--fs-micro); font-weight: var(--g-fort); letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--gold-texte); margin-bottom: 1.2rem;
}
.tarifs-argument-titre {
  font-family: var(--display); font-variation-settings: var(--fvs-display);
  font-weight: var(--g-display-2);
  /* « Sur une ligne » (Tom, 31/08) : à var(--fs-h3) la phrase de 52 signes
     faisait 826 px pour 594 px utiles — deux lignes même carte pleine.
     Mesuré sur la page servie : 19,7 px de texte par pixel de corps ;
     27 px rendent 531 px — une ligne dès ~640 px de fenêtre, 63 px de
     marge à la carte pleine. En dessous, deux lignes équilibrées
     (text-wrap: balance) avec un plancher à 1.5rem. */
  font-size: clamp(1.5rem, 3.8vw, 1.6875rem);
  color: var(--green-900); line-height: var(--lh-h3); text-wrap: balance;
}
.tarifs-argument-sous {
  margin-top: 1.3rem; font-size: var(--fs-body-2); color: var(--ink-light);
  max-width: 54ch; margin-inline: auto;
}

/* ---------- Réserver ---------- */
.book { position: relative; overflow: clip; color: var(--ink); }
/* Fond uni depuis le 30/08 (sa photographie touchait celle de la piscine) ;
   passé du vert-nuit au vert clair le 31/08 au soir — arbitrage de Tom sur
   trois maquettes en vraie grandeur : le seul grand bloc sombre de la page
   n'était pas à sa place. Le vert s'éteint dans le papier du site vers le
   bas : la couleur marque l'entrée de la section, la sortie rejoint
   « Le lieu » sans couture. Toujours pas un voile — il n'y a rien dessous —
   et le dégradé évite l'aplat parfaitement plat qui, sur plus de mille
   pixels de haut, aurait l'air d'un défaut d'affichage. */
.book-bg {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--green-100) 0%, var(--green-50) 55%, var(--stone-50) 100%);
}
.book-inner { position: relative; z-index: 2; padding-block: var(--sp-section); }
.book-head { text-align: center; max-width: var(--max-w-narrow); margin-inline: auto; padding-inline: var(--sp-inner); }
/* stone-500, le surtitre de partout, ne fait que 3,78:1 sur green-100 —
   mesuré avant de livrer. stone-700 rend 8,85 et reste dans la pierre. */
.book-head .label { color: var(--stone-700); }
.book-head h2 { max-width: 16ch; margin-inline: auto; }
.book-head p { margin-top: 1.6rem; font-size: var(--fs-body); color: var(--ink-light); }

/* La carte du formulaire, remaniée le 30/08.
   Elle mesurait 820 px là où le chapeau et l'argument qui la surplombent en
   font 780, et son contenu était aligné à gauche sous deux blocs centrés :
   elle *paraissait* décalée alors qu'elle était exactement au milieu. Elle
   passe donc sous la largeur de ce qui la précède, et son contenu se centre.
   Elle se lit alors comme un cran de plus vers l'intérieur — ce qu'elle est. */
/* Les deux cartes ont permuté leurs proportions le 31/08, à la demande de
   Tom : c'est le formulaire qui compte, pas l'argument sur le linge. Le
   formulaire prend les 780 px qu'avait l'argument, l'argument descend aux
   690 px du formulaire — un échange strict, pas un réglage au jugé.
   Effet de bord mesuré et bienvenu : dans la carte élargie, les trois
   pastilles de choix tiennent chacune leur détail sur UNE ligne
   (« 3 chambres · 2 terrasses » se cassait en deux). */
.form {
  --form-large: 780px;
  max-width: var(--form-large); margin: clamp(3rem, 6vh, 4.6rem) auto 0;
  background: color-mix(in srgb, var(--stone-50) 97%, transparent);
  color: var(--ink); border-radius: var(--r-card);
  padding: clamp(1.7rem, 3.6vw, 2.6rem);
  box-shadow: 0 30px 70px -40px rgba(44,58,44,0.35);
  margin-inline: max(var(--sp-inner), calc((100% - var(--form-large)) / 2));
  text-align: center;
}
/* Les champs et le récapitulatif gardent leur alignement : une étiquette
   centrée au-dessus d'un champ pleine largeur ne se rattache à rien. */
.form-field, .form-recap, .form-msg, .form-opt { text-align: left; }
.form-step { display: none; }
.form-step.active { display: block; animation: apparait var(--t-moyen) var(--ease-out); }
.form-q {
  font-family: var(--display); font-variation-settings: var(--fvs-display);
  font-weight: var(--g-appui); font-size: var(--fs-h4); color: var(--green-900); line-height: var(--lh-h3);
}
.form-hint { margin-top: 0.7rem; font-size: var(--fs-small); color: var(--ink-muted); }

/* Les choix de gîte : cartes flottantes, respirantes, légèrement vivantes */
.form-options { display: flex; gap: 0.9rem; margin-top: 2rem; flex-wrap: wrap; justify-content: center; }
.form-opt {
  flex: 1 1 168px;
  display: flex; flex-direction: column; gap: 0.35rem;
  border: 1.5px solid var(--stone-200); background: var(--white);
  border-radius: 20px; padding: 1.5rem 1.2rem; cursor: pointer; text-align: left;
  font-family: var(--text); color: var(--ink);
  box-shadow: 0 10px 30px -22px rgba(44,58,44,0.5);
  transition: border-color var(--t-court) var(--ease), background var(--t-court) var(--ease),
              transform var(--t-court) var(--ease-retour), box-shadow var(--t-court) var(--ease-out);
  animation: optPulse calc(var(--t-moyen) * 6) var(--ease) infinite;
}
.form-opt:nth-child(2) { animation-delay: var(--t-court); }
.form-opt:nth-child(3) { animation-delay: var(--t-moyen); }
@keyframes optPulse {
  0%, 100% { box-shadow: 0 10px 30px -22px rgba(44,58,44,0.5); }
  50%      { box-shadow: 0 16px 38px -20px rgba(44,58,44,0.34); }
}
.form-opt-nom { font-size: var(--fs-body-2); font-weight: var(--g-fort); line-height: 1.3; white-space: nowrap; }
.form-opt-cap { font-size: var(--fs-micro); color: var(--green-800); font-weight: var(--g-appui); white-space: nowrap; }
.form-opt-detail { font-size: var(--fs-micro); color: var(--ink-muted); line-height: 1.45; text-wrap: balance; }
.form-opt:hover {
  border-color: var(--green-800); transform: translateY(-4px);
  box-shadow: 0 22px 46px -24px rgba(44,58,44,0.5); animation-play-state: paused;
}
.form-opt:focus-visible { outline: 2px solid var(--green-800); outline-offset: 3px; }
.form-opt.selected {
  border-color: var(--green-800); background: var(--green-100);
  animation: none; transform: translateY(-2px);
}
/* Après .selected : l'appui gagne même sur une carte déjà choisie. */
.form-opt:active { transform: translateY(0) scale(0.99); transition-duration: var(--t-appui); }

.form-row { display: flex; gap: 1rem; margin-top: 1.8rem; flex-wrap: wrap; justify-content: center; }
.form-field { flex: 1 1 200px; }
.form-field label { display: block; font-size: var(--fs-micro); font-weight: var(--g-fort); letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone-500); margin-bottom: 0.55rem; }
.form-facultatif { text-transform: none; letter-spacing: 0; color: var(--ink-muted); font-weight: var(--g-corps); }
.form-field input, .form-field textarea, .form-field select {
  width: 100%; border: 1.5px solid var(--stone-200); border-radius: 14px;
  background: var(--white); font-family: var(--text); font-size: var(--fs-control); color: var(--ink);
  padding: 0.85em 1em; outline: none; transition: border-color var(--t-court) var(--ease), box-shadow var(--t-court) var(--ease);
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus {
  border-color: var(--green-800); box-shadow: 0 0 0 4px color-mix(in srgb, var(--green-800) 12%, transparent);
}
.form-field textarea { min-height: 110px; resize: vertical; }
.stepper { display: flex; align-items: center; justify-content: center; gap: 1.4rem; margin-top: 2rem; }
.stepper button {
  width: 54px; height: 54px; border-radius: 50%; border: 1.5px solid var(--stone-200);
  background: var(--white); font-size: 1.5rem; color: var(--green-800); cursor: pointer;
  transition: border-color var(--t-court) var(--ease), background var(--t-court) var(--ease); line-height: 1;
}
.stepper button:hover { border-color: var(--green-800); background: var(--green-50); }
.stepper output { font-family: var(--display); font-variation-settings: var(--fvs-display-tight); font-weight: var(--g-display-2); font-size: var(--fs-h4); color: var(--green-900); min-width: 2ch; text-align: center; }
.form-msg { margin-top: 1.4rem; font-size: var(--fs-small); line-height: 1.6; color: var(--stone-700); background: var(--stone-100); border-radius: 14px; padding: 1rem 1.2rem; display: none; }
.form-msg.show { display: block; animation: apparait var(--t-moyen) var(--ease-out); }
.form-msg.closed { color: #7A4A2E; background: #F6EDE3; }
.form-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 2.2rem; gap: 1rem; }
.form-back { border: 0; background: none; font-size: var(--fs-small); color: var(--ink-muted); cursor: pointer; padding: 0.6em 0.2em; }
.form-back:hover { color: var(--ink); }
.btn {
  border: 0; background: var(--green-800); color: var(--white);
  font-family: var(--text); font-size: var(--fs-control); font-weight: var(--g-fort);
  padding: 0.95em 2.4em; border-radius: var(--r-pill); cursor: pointer;
  transition: background var(--t-court) var(--ease), transform var(--t-court) var(--ease-retour), box-shadow var(--t-court) var(--ease); text-decoration: none; display: inline-block;
  box-shadow: 0 14px 34px -20px rgba(44,58,44,0.8);
}
.btn:hover { background: var(--green-900); transform: translateY(-2px); box-shadow: 0 20px 42px -20px rgba(44,58,44,0.85); }
/* Le retour haptique simulé : l'appui enfonce en --t-appui (immédiat), la
   relâche revient en --t-court par --ease-retour, qui retient le bouton une
   fraction de seconde. Sous reduced-motion, les durées tombent à 0,01 ms :
   l'état pressé reste, le ressort disparaît. */
.btn:active { background: var(--green-900); transform: translateY(0) scale(0.98); box-shadow: 0 4px 12px -10px rgba(44,58,44,0.7); transition-duration: var(--t-appui); }
/* Le surtitre a remplacé les quatre traits de progression, qui étaient tous
   gris à l'étape 1 et n'apprenaient donc rien. Il dit ce qu'est le bloc ; le
   titre juste en dessous dit ce qu'il demande. */
.form-sur {
  font-size: var(--fs-micro); font-weight: var(--g-fort); letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--stone-500); margin-bottom: 1.5rem;
}
.form-recap { margin-top: 1.6rem; border-top: 1px solid var(--stone-200); }
.form-recap div { display: flex; justify-content: space-between; gap: 1rem; padding-block: 0.8rem; border-bottom: 1px solid var(--stone-200); font-size: var(--fs-small); }
.form-recap b { font-weight: var(--g-fort); color: var(--green-900); text-align: right; }
.form-alt { margin-top: 1.3rem; text-align: center; font-size: var(--fs-small); color: var(--ink-muted); }
.form-alt a { color: var(--green-800); font-weight: var(--g-fort); }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* La figure du panorama ferme la section depuis le 31/08 au soir :
   .book-inner n'a pas de .wrap, elle apporte donc sa propre mesure. Les
   règles du bloc téléphone-adresse (.book-direct), parti avec, sont
   retirées — un composant sans HTML est de la dette, pas une réserve. */
.book .place-figure { max-width: var(--max-w); margin-inline: auto; padding-inline: var(--sp-inner); }

/* ---------- Footer ---------- */
.footer { background: var(--night-900); color: rgba(255,255,255,0.64); padding: clamp(3.5rem, 8vh, 5.5rem) 0 2.2rem; }
.footer-grid { display: flex; justify-content: space-between; gap: 2.5rem; flex-wrap: wrap; }
.footer-brand { font-family: var(--display); font-variation-settings: var(--fvs-display); font-weight: var(--g-display-2); font-size: 1.42rem; color: var(--white); }
.footer-tag { margin-top: 0.7rem; font-size: var(--fs-small); max-width: 30ch; }
.footer h4 { font-family: var(--text); font-size: var(--fs-micro); font-weight: var(--g-fort); letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.42); margin-bottom: 1rem; }
.footer ul { list-style: none; }
.footer li { margin-bottom: 0.2rem; }
.footer a { text-decoration: none; font-size: var(--fs-small); transition: color var(--t-court) var(--ease); display: inline-block; padding-block: 0.42em; }
.footer a:hover { color: var(--white); }
.footer a:focus-visible, .footer-base button:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 4px; }
.footer-base {
  margin-top: clamp(2.6rem, 6vh, 4rem); padding-top: 1.6rem;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-size: var(--fs-micro); color: rgba(255,255,255,0.42);
}
.footer-base button { border: 0; background: none; color: inherit; font-size: inherit; cursor: pointer; text-decoration: underline; padding: 0.6em 0.2em; }
/* Sur activites.html, le même libellé est un lien vers index.html#mentions
   (le texte légal ne vit qu'à un endroit) : il doit se présenter à l'identique. */
.footer-base .footer-mentions { color: inherit; font-size: inherit; text-decoration: underline; padding: 0.6em 0.2em; }
.footer-base .footer-mentions:hover { color: var(--white); }

/* ---------- Mentions légales (dialog) ---------- */
dialog#mentions {
  border: 0; border-radius: var(--r-card); padding: 0;
  /* « * { margin: 0 } » écrasait le « margin: auto » que le navigateur donne à
     un dialogue modal : la boîte s'ouvrait collée en haut à gauche. */
  margin: auto;
  width: min(680px, calc(100vw - 2.4rem));
  max-height: 82svh;
  background: var(--stone-50); color: var(--ink-light);
  /* La barre de défilement débordait du coin arrondi et deux conteneurs
     pouvaient défiler en même temps : la boîte et son contenu portaient tous
     deux « max-height: 82svh ». Un seul défile désormais, et le débord est
     rogné par le rayon. */
  overflow: hidden;
}
/* Impératif : ne styler l'affichage QUE sur [open], sinon « display: flex »
   écrase le display:none du navigateur et la boîte reste à l'écran fermée. */
dialog#mentions[open] { display: flex; flex-direction: column; }
dialog#mentions::backdrop { background: rgba(10,14,11,0.72); backdrop-filter: blur(4px); }
.mentions-inner {
  padding: clamp(1.8rem, 4vw, 2.8rem);
  overflow-y: auto; overscroll-behavior: contain;
  flex: 1; min-height: 0;          /* sans min-height, un enfant flex ne défile pas */
  scrollbar-width: thin; scrollbar-color: var(--stone-300) transparent;
}
.mentions-inner h2 { font-size: var(--fs-h4); margin-bottom: 1.4rem; }
.mentions-inner h3 { font-family: var(--text); font-size: var(--fs-micro); font-weight: var(--g-fort); letter-spacing: 0.16em; text-transform: uppercase; color: var(--stone-500); margin: 1.6rem 0 0.5rem; }
.mentions-inner p { font-size: var(--fs-small); line-height: 1.7; }
.mentions-close {
  flex: none; display: flex; justify-content: flex-end;
  padding: 1.1rem clamp(1.8rem, 4vw, 2.8rem) clamp(1.4rem, 3vw, 1.8rem);
  background: var(--stone-50);
  border-top: 1px solid var(--stone-200);
}

/* ---------- Lightbox ---------- */
#lightbox {
  border: 0; padding: 0; background: transparent;
  max-width: 100vw; max-height: 100svh; width: 100vw; height: 100svh;
}
/* Impératif : ne styler l'affichage QUE sur [open]. Sans cette précaution,
   « display: grid » écrase le display:none que le navigateur applique à un
   dialogue fermé, et les boutons en position fixed flottent sur la page. */
#lightbox[open] { display: grid; place-items: center; }
#lightbox::backdrop { background: rgba(6,8,6,0.92); }
#lightbox img { max-width: min(1100px, 92vw); max-height: 86svh; width: auto; height: auto; object-fit: contain; border-radius: 18px; }
.lb-btn {
  position: fixed; z-index: 2;
  width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.28); background: rgba(10,14,11,0.45);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: rgba(255,255,255,0.92); cursor: pointer;
  display: grid; place-items: center; padding: 0;
  transition: background var(--t-court) var(--ease), border-color var(--t-court) var(--ease);
}
.lb-btn:hover { background: rgba(10,14,11,0.75); border-color: rgba(255,255,255,0.55); }
.lb-btn:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
.lb-btn svg { width: 22px; height: 22px; }
.lb-prev  { left: clamp(0.6rem, 2.5vw, 2rem); top: 50%; transform: translateY(-50%); }
.lb-next  { right: clamp(0.6rem, 2.5vw, 2rem); top: 50%; transform: translateY(-50%); }
.lb-close { right: clamp(0.6rem, 2.5vw, 2rem); top: clamp(0.6rem, 2.5vw, 2rem); }

/* Accusé de réception du formulaire */
.form-done { text-align: center; animation: apparait var(--t-moyen) var(--ease-out); }
.form-done[hidden] { display: none; }
.form-done-mark {
  display: grid; place-items: center; width: 62px; height: 62px; margin: 0 auto 1.4rem;
  border-radius: 50%; background: var(--green-100); color: var(--green-800);
}
.form-done-mark svg { width: 30px; height: 30px; }
.form-done h3 {
  font-size: var(--fs-h4); font-weight: var(--g-display-2); margin-bottom: 1rem;
}
.form-done p { font-size: var(--fs-body-2); max-width: 46ch; margin-inline: auto; }
.form-done p b { font-weight: var(--g-fort); color: var(--green-900); }
.form-done-alt { margin-top: 1.2rem; font-size: var(--fs-small); color: var(--ink-muted); }
.form-done-alt a { color: var(--green-800); font-weight: var(--g-fort); }
.form-done #form-restart { margin-top: 1.8rem; }

/* ============================================================
   IDENTITÉ DE GÎTE — accent chromatique + en-tête condensé
   ============================================================ */
/* --accent sert aux aplats et liserés ; --accent-texte, plus sombre, dès que
   la couleur porte du texte : 3,3:1 ne passe pas le seuil AA de 4,5:1. */
#tilleul    { --accent: #6F8B57; --accent-texte: #4F6A3A; --accent-soft: #EDF2E6; }
#magnanerie { --accent: #B5843F; --accent-texte: #845A23; --accent-soft: #F7EEE1; }

.gite-badge   { color: var(--accent-texte); }
.gite-score b { color: var(--accent-texte); }
.gite-foot a  { color: var(--accent-texte); }
.gite-tags span {
  background: var(--accent-soft);
  color: var(--accent-texte);
}

.gite-anchor {
  position: sticky; top: calc(var(--nav-h) + 1rem);
  height: 0; z-index: 6; pointer-events: none;
  display: flex; justify-content: center;
}
.gite-pill {
  display: inline-flex; align-items: center; gap: 0.62em;
  margin-top: -1rem;
  background: color-mix(in srgb, var(--white) 94%, transparent);
  backdrop-filter: blur(22px) saturate(1.6);
  -webkit-backdrop-filter: blur(22px) saturate(1.6);
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  border-radius: var(--r-pill);
  padding: 0.62em 1.35em;
  font-size: var(--fs-micro); font-weight: var(--g-fort); color: var(--green-900);
  white-space: nowrap; letter-spacing: 0.005em;
  box-shadow: 0 14px 38px -10px rgba(44,58,44,0.30), 0 2px 6px -2px rgba(44,58,44,0.14);
  opacity: 0; transform: translateY(-12px) scale(0.93);
  transition: opacity var(--t-moyen) var(--ease-out), transform var(--t-moyen) var(--ease-out);
}
.gite-anchor.condensed .gite-pill { opacity: 1; transform: none; }
.gite-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.gite-pill b { font-weight: var(--g-appui); color: var(--ink-muted); }
.gite-pill b::before { content: '·'; margin-right: 0.6em; color: var(--stone-300); }

/* ============================================================
   REGARDER LA PHOTOGRAPHIE
   Quand le visiteur fait défiler les images lui-même, il est venu voir
   l'image : le texte s'efface presque entièrement et le voile s'éclaircit.
   Au premier défilement de la page — ou dès que la souris quitte la section —
   tout revient. La légende du hero, elle, reste : c'est le seul texte qui
   serve pendant qu'on regarde, il dit quelle photo on a sous les yeux.
   ============================================================ */
.hero-content, .hero-veil, .hero-bottom::before,
.pool-content > *, .pool-overlay {
  transition: opacity var(--t-moyen) var(--ease-out);
}
.hero.photo-seule .hero-content,
.pool.photo-seule .pool-content > *:not(.pool-controls) {
  opacity: 0.05; pointer-events: none;
}
.hero.photo-seule .hero-veil { opacity: 0.20; }
.hero.photo-seule .hero-bottom::before { opacity: 0.32; }
.pool.photo-seule .pool-overlay { opacity: 0.22; }

/* ---------- Activités — l'aperçu, sur la page d'accueil ----------
   Quatre entrées, pas davantage : l'aperçu donne envie, la page dédiée
   donne les liens. Le temps de trajet est annoncé « ≈ » parce qu'il l'est :
   ce sont des routes de vallée, pas une autoroute. */
.acts { background: var(--stone-50); }
.acts-apercu {
  list-style: none; display: grid; gap: clamp(1rem, 2.2vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-top: clamp(2.2rem, 4.5vh, 3.2rem);
}
.acts-apercu li {
  background: var(--white); border: 1px solid var(--stone-200);
  border-radius: var(--r-card); overflow: hidden;
  transition: border-color var(--t-court) var(--ease), transform var(--t-court) var(--ease);
}
/* La vignette entière est cliquable : c'est ce qui remplace le bouton. */
.acts-lien {
  display: flex; flex-direction: column; gap: 0.55rem; height: 100%;
  padding: clamp(1.2rem, 2.2vw, 1.7rem); text-decoration: none; color: inherit;
}
.acts-photo { display: block; background: var(--stone-100); }
.acts-photo img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  transition: transform var(--t-moyen) var(--ease);
}
.acts-apercu li:hover .acts-photo img { transform: scale(1.04); }
.acts-apercu li:hover { border-color: color-mix(in srgb, var(--green-800) 34%, transparent); transform: translateY(-2px); }
.acts-dist {
  align-self: flex-start; font-size: var(--fs-micro); font-weight: var(--g-fort);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-texte);
  border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  border-radius: var(--r-pill); padding: 0.35em 0.9em;
}
.acts-apercu b { font-family: var(--display); font-variation-settings: var(--fvs-display); font-weight: var(--g-display-2); font-size: var(--fs-h5); color: var(--green-900); line-height: var(--lh-h3); }
.acts-apercu li > span:last-child { font-size: var(--fs-small); color: var(--ink-light); line-height: 1.65; }

/* ---------- Activités — la page dédiée ---------- */
.banner-page { height: clamp(320px, 44svh, 440px); }
.acts-page-intro { max-width: 62ch; margin-inline: auto; text-align: center; font-size: var(--fs-body-2); color: var(--ink-light); }
.acts-page-note { margin-top: 1.2rem; font-size: var(--fs-small); color: var(--stone-500); text-align: center; }
.acts-groupe { margin-top: clamp(3.6rem, 8vh, 5.5rem); }
.acts-groupe > h2 {
  font-size: var(--fs-h5); font-weight: var(--g-display-2); color: var(--green-900);
  padding-bottom: 1rem; border-bottom: 1px solid var(--stone-200);
}
/* Une grille, et non plus un flex centré : avec une photographie en tête,
   les cartes ont des hauteurs très inégales, et le flex les laissait flotter
   au milieu de leur ligne. La grille les aligne. */
.acts-liste {
  list-style: none; display: grid; gap: clamp(1rem, 2.2vw, 1.6rem);
  grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr));
  margin-top: clamp(1.8rem, 3.5vh, 2.6rem);
}
@media (min-width: 900px) { .acts-liste { grid-template-columns: repeat(3, 1fr); } }
.act-carte {
  background: var(--white); border: 1px solid var(--stone-200);
  border-radius: var(--r-card); overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color var(--t-court) var(--ease);
}
.act-carte:hover { border-color: color-mix(in srgb, var(--green-800) 30%, transparent); }
.act-photo { display: block; background: var(--stone-100); }
.act-photo img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  transition: transform var(--t-moyen) var(--ease);
}
.act-carte:hover .act-photo img { transform: scale(1.035); }
.act-corps {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.7rem;
  padding: clamp(1.5rem, 2.8vw, 2rem); flex: 1;
}
/* Le groupe du milieu compte quatre cartes : la quatrième se retrouvait
   seule au début d'une ligne de trois. Seule, elle prend toute la largeur
   et se couche — un accident de grille devient une carte en vedette. */
@media (min-width: 900px) {
  .acts-liste > .act-carte:last-child:nth-child(3n + 1) {
    grid-column: 1 / -1; flex-direction: row;
  }
  .acts-liste > .act-carte:last-child:nth-child(3n + 1) .act-photo { flex: 0 0 46%; }
  .acts-liste > .act-carte:last-child:nth-child(3n + 1) .act-photo img {
    height: 100%; min-height: 280px; aspect-ratio: auto;
  }
  .acts-liste > .act-carte:last-child:nth-child(3n + 1) .act-corps { justify-content: center; }
}
.act-carte h3 {
  font-family: var(--display); font-variation-settings: var(--fvs-display);
  font-weight: var(--g-display-2); font-size: var(--fs-h5); color: var(--green-900); line-height: var(--lh-h3);
}
.act-carte p { font-size: var(--fs-body-2); color: var(--ink-light); line-height: 1.7; }
.act-carte .act-lieu { font-size: var(--fs-micro); font-weight: var(--g-fort); letter-spacing: 0.16em; text-transform: uppercase; color: var(--stone-500); }
.act-carte .btn-ghost { margin-top: auto; padding: 0.62em 1.5em; font-size: var(--fs-small); }

/* ---------- Textes au fer à gauche, avec césure ----------
   Justifiés du 30/08 au 23/09, à la demande de Tom. Retiré le 23/09 : sur le
   Chromium d'un téléphone Android (Opera), dès qu'un mot se coupe en fin de
   ligne (« pis-cine »), chaque ligne justifiée qui suit ne garde que son
   premier mot — les autres sont poussés hors de la carte et rognés ; la
   dernière ligne, non justifiée, reste entière. Le fer à gauche ne dilate
   rien : aucun mot ne peut sortir. La césure reste (lang="fr" sur <html>,
   elle suit la langue) : elle ne coupe que les mots longs et évite les lignes
   trop courtes dans les colonnes étroites. Ne pas remettre text-align:
   justify sans avoir vu le rendu sur un téléphone. */
.gite-desc,
.gites-ensemble-desc,
.place-col p,
.place-card p,
.mentions-inner p {
  -webkit-hyphens: auto; hyphens: auto;
  hyphenate-limit-chars: 6 3 3;   /* pas de coupure sur les mots courts */
}

/* La ligne de crédit des photographies : discrète, mais elle ne s'enlève
   pas — CC BY-SA rend l'attribution obligatoire sur la page qui affiche
   l'image, pas seulement dans les mentions légales. */
.acts-credits {
  margin-top: clamp(3.4rem, 7vh, 5rem); padding-top: clamp(1.8rem, 3.5vh, 2.6rem);
  border-top: 1px solid var(--stone-200);
  font-size: var(--fs-micro); line-height: 1.75; color: var(--ink-muted);
  text-align: center; max-width: 78ch; margin-inline: auto;
}
.acts-credits a { color: var(--green-800); }

/* ---------- Rappel de clôture — sobre, sur le noir de la nuit ----------
   La demande de devis a remonté juste après les gîtes ; ce bandeau est ce
   qui la rattrape en bas de page, pour qui a tout lu. Court par principe :
   deux lignes et un bouton. */
/* Fond clair depuis le 31/08, demande de Tom. Cette bande était en
   --night-900 : exactement la couleur du pied de page juste dessous, et elle
   venait après la photographie de nuit — huit cents pixels d'un même
   presque-noir d'affilée, en trois blocs qu'on ne distinguait plus.
   Elle reprend le fond clair des sections du site, celui de « Chacun son
   gîte ». Le titre retrouve le vert de marque par la règle globale des
   titres ; rien d'autre sur la page ne bouge. */
.rappel {
  background: var(--stone-100); color: var(--ink-light); text-align: center;
  /* Le padding vient de l'échelle du site et non d'un clamp inventé pour
     l'occasion : cette bande est une coda, elle respire à un peu moins de la
     moitié d'une section. Relevé après coup à 1280 px : 48 px au-dessus du
     titre, 48 px sous le numéro — la bande est symétrique. */
  padding-block: calc(var(--sp-section) * 0.46); padding-inline: var(--sp-inner);
}
/* 18ch était trop juste : le titre fait 21 signes et ne tenait sur une ligne
   que par la largeur des chiffres de la police d'affichage. */
.rappel h2 { font-size: var(--fs-h3); max-width: 24ch; margin-inline: auto; }
/* La phrase mesure 488 px. À 46ch (453 px) elle se coupait TOUJOURS, et le
   plus souvent en laissant « la journée. » seul sur la seconde ligne. À 58ch
   (572 px) elle tient sur une ligne jusqu'à environ 600 px de fenêtre ; en
   dessous, `balance` répartit les deux lignes à égalité — mesuré 217 et
   244 px sur un téléphone de 375, là où le réglage précédent donnait 299 et
   162. `pretty` ne suffisait pas : il évite l'orpheline, il n'équilibre pas. */
.rappel p {
  margin-top: 1.05rem; font-size: var(--fs-body-2); color: var(--ink-light);
  max-width: 58ch; margin-inline: auto; text-wrap: balance;
}
/* Le bouton et le numéro étaient côte à côte : une pastille pleine de
   226 × 62 px contre 141 px de chiffres nus, seize pixels entre les deux.
   Sur une composition centrée, deux éléments de poids aussi inégaux posés
   sur la même ligne déportent le centre de gravité — la paire PARAISSAIT
   décalée vers la gauche alors qu'elle était géométriquement au milieu.
   Empilés, ils partagent l'axe du titre et du texte : les quatre centres
   tombent au même pixel, mesuré. Et la hiérarchie redevient lisible — une
   action principale, une voie directe — au lieu de deux propositions de
   force égale qui se disputaient le regard. */
.rappel-actions {
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(1.5rem, 2.6vh, 2rem); margin-top: clamp(2rem, 3.6vh, 2.8rem);
}
/* Le numéro est en --fs-h4 : le corps qu'avait le téléphone du bloc de
   coordonnées du devis, avant que le panorama ne le remplace (31/08). */
.rappel-tel {
  font-family: var(--display); font-variation-settings: var(--fvs-display-tight);
  font-size: var(--fs-h4); font-weight: var(--g-display-2); color: var(--green-900);
  text-decoration: none; letter-spacing: 0.03em; padding: 0.15em 0.2em;
}
.rappel-tel:hover { color: var(--green-800); }
/* Le bouton était inversé — blanc sur noir, texte vert — parce que le vert de
   marque se voyait mal sur le noir de la nuit. Le fond étant clair depuis le
   31/08, cette inversion n'a plus lieu d'être : c'est le bouton standard du
   site, vert plein, comme partout ailleurs. Seule la taille change : c'est
   le CTA final de la page, il monte d'un cran dans l'échelle des corps
   (--fs-control 16,8 → --fs-body 20 px) ; les paddings en em suivent. */
.rappel .btn { font-size: var(--fs-body); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-toggle {
    display: block; border: 1px solid currentColor; background: none; color: inherit;
    border-radius: var(--r-pill); font-family: var(--text); font-size: var(--fs-small); font-weight: var(--g-fort);
    padding: 0.5em 1.3em; cursor: pointer;
  }
  .nav.open .nav-links {
    display: flex; position: absolute; top: 100%; right: var(--sp-inner);
    flex-direction: column; gap: 0; align-items: stretch;
    background: var(--stone-50); color: var(--green-900);
    border-radius: 20px; padding: 0.8rem; min-width: 220px;
    box-shadow: 0 24px 60px -20px rgba(0,0,0,0.35);
  }
  .nav.open .nav-links a { padding: 0.75em 1.1em; border-radius: 12px; }
  .nav.open .nav-links a:hover { background: var(--stone-100); }
}
@media (max-width: 760px) {
  .gites-ensemble-txt { grid-template-columns: 1fr; }
  .gites-ensemble-txt .btn { grid-column: 1; grid-row: auto; margin-top: 1.2rem; justify-self: start; }
  /* Le bandeau de nuit descend à 240 px : c'est aussi la hauteur pour laquelle
     la photographie a été taillée (440 px de haut = 2× sur un écran rétine). */
  .night { min-height: 240px; }
  .night-credit { right: auto; left: var(--sp-inner); font-size: 0.62rem; }
}

/* Le bandeau passe en colonne — mais seulement s'il y a la hauteur pour cela.
   Empilé sur un téléphone en paysage, il mesurait 194 px au lieu de 64 et
   rejetait les flèches et les pastilles sous la ligne de flottaison. */
@media (max-width: 760px) {
  /* Les deux surcharges de voile qui vivaient ici — ellipse élargie du hero et
     plancher relevé de la piscine — n'ont plus d'objet depuis le retrait des
     voiles (29/08). Les règles restent, vides : si le téléphone demande plus
     de contraste que le bureau, c'est encore ici que ça se règle. */
  .hero-veil { background: none; }
  .pool-overlay { background: none; }
}

@media (max-width: 760px) and (min-height: 600px) {
  .hero-bottom { grid-template-columns: 1fr; justify-items: center; gap: 1.05rem; text-align: center; }
  /* Le dégradé montait sur 279 px pour un bandeau de 199 : son plein tombait
     sous « Découvrir » et la légende, tout en haut du bandeau, n'en recevait
     presque rien. Resserré et aplati, il couvre le bandeau entier. */
  .hero-bottom::before {
    top: -3rem;
    background: none;
  }
  /* En colonne, un rang détaché à gauche d'un texte centré se lit de travers :
     on repasse en un seul fil de texte, « 01 / 06 · Terrasse du gîte… ». */
  .hero-caption { grid-column: 1; order: 1; justify-self: center; display: block; text-align: center; max-width: 34ch; }
  .hero-caption b { border-right: 0; padding-right: 0; margin-right: 0.7em; }
  .hero-caption b::after { content: '·'; margin-left: 0.7em; color: rgba(255,255,255,0.45); }
  .hero-controls { grid-column: 1; order: 2; justify-self: center; }
  .hero-scroll   { grid-column: 1; order: 3; justify-self: center; }
}
@media (max-width: 640px) {
  /* La rampe du hero rejoint exactement la valeur de bureau à 640 px : aucune
     taille ne fait de saut au passage du seuil. Les niveaux inférieurs sont
     resserrés pour que l'échelle reste strictement décroissante sur téléphone,
     où le h2 déduit remonte à 31 px et rattrapait le h3. */
  :root {
    --fs-hero:   clamp(2.35rem, 11.4vw, 3.05rem); /* 37,6 → 48,8 px */
    --fs-h3:     clamp(1.5rem, 5.3vw, 1.75rem);   /*   24 →   28 px */
    --fs-h4:     clamp(1.3rem, 4.2vw, 1.55rem);   /* 20,8 → 24,8 px */
    --fs-h5:     clamp(1.15rem, 3.5vw, 1.3rem);   /* 18,4 → 20,8 px */
    --fs-body:   1.12rem;
    --fs-body-2: 1.05rem;
    --fs-small:  0.98rem;
  }
  .lb-btn { width: 46px; height: 46px; }
  .lb-prev { left: 0.5rem; } .lb-next { right: 0.5rem; }
  .carr-fleche { width: 40px; height: 40px; }
  .carr-fleche svg { width: 17px; height: 17px; }
  .pool { min-height: 86svh; }
  .form { margin-inline: var(--sp-inner); padding: 1.8rem 1.4rem; }
  /* en colonne, « flex: 1 1 190px » impose une hauteur de 190 px, pas une largeur */
  .form-options { flex-direction: column; }
  .form-opt { flex: 0 0 auto; }
  .rappel-actions { flex-direction: column; }
  .acts-apercu { grid-template-columns: 1fr; }
}

/* Téléphone en paysage : la hauteur manque avant la largeur. On réduit le
   titre et la réserve de barre plutôt que de laisser la section déborder. */
@media (max-height: 560px) and (orientation: landscape) {
  /* On réduit juste ce qu'il faut pour que le hero tienne encore dans la
     hauteur, sans jamais passer sous le corps des titres de section : à
     844 px de large, le titre reste à 54 px contre 45 px pour un h2. */
  :root { --fs-hero: clamp(2.2rem, 6.4vw, 4rem); --nav-h: 4.2rem; }
  /* La réserve de rangée doit rester supérieure à la hauteur réelle de la
     barre, sans quoi la barre fixe recouvre la sur-ligne du titre. */
  .nav { padding-block: 0.75rem; }
  .hero-sur { margin-bottom: 0.8rem; }
  .hero-sub { margin-top: 0.8rem; }
  /* Deux colonnes seulement : « Découvrir » n'a pas de sens quand la section
     dépasse déjà de la fenêtre, et sa colonne volait la place de la légende. */
  .hero-bottom { padding-bottom: 1.1rem; grid-template-columns: 1fr auto; }
  .hero-scroll { display: none; }
  .hero-controls { grid-column: 2; }
}

/* ============================================================
   MODE STATIC (screenshots / débogage : ?static)
   ============================================================ */
html.static #veil { display: none; }
html.static .nav, html.static .hero-sur, html.static .hero-title, html.static .hero-sub,
html.static .hero-bottom, html.static .carr-fleche { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
html.static .reveal { opacity: 1; transform: none; transition: none; }
html.static .hero-slide, html.static .pool-photo { transition: none !important; }
html.static .form-opt { animation: none; }

/* ============================================================
   REDUCED MOTION — le calme absolu
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0s !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; }
  #veil { display: none; }
  .nav, .hero-sur, .hero-title, .hero-sub, .hero-bottom, .carr-fleche { opacity: 1 !important; transform: none !important; }
  .reveal { opacity: 1; transform: none; }
  .hero-slide, .pool-photo { transition: none !important; }
  .form-opt { animation: none !important; }
  .gite-pill { transition: none; }
}

/* ============================================================
   LIEN D'ÉVITEMENT ET PAGE 404
   ============================================================
   Le lien d'évitement est le premier élément focalisable des deux pages :
   invisible tant qu'il n'a pas le focus, il épargne au clavier la traversée
   de la navigation. main.js le laisse au comportement natif — Lenis ferait
   défiler la vue sans déplacer le focus, et un lien d'évitement qui ne
   déplace pas le focus n'évite rien.
   La page 404 n'a ni script ni navigation : un bloc centré, deux chemins.
   ============================================================ */
.skip-link {
  position: fixed; top: 0; left: 0; z-index: 100;
  padding: 0.9rem 1.4rem;
  background: var(--green-900); color: var(--white);
  font-family: var(--text); font-size: var(--fs-control); font-weight: var(--g-fort);
  text-decoration: none;
  transform: translateY(-110%);
}
.skip-link:focus-visible { transform: none; outline: 2px solid var(--white); outline-offset: -6px; }
#contenu:focus { outline: none; }

.p404 {
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: var(--sp-section) var(--sp-inner);
  background: var(--stone-50);
}
.p404-marque {
  font-family: var(--display); font-variation-settings: var(--fvs-display);
  font-weight: var(--g-display-2); font-size: 1.26rem;
  color: var(--green-900); text-decoration: none;
  margin-bottom: 3.2rem;
}
.p404 h1 {
  font-family: var(--display); font-variation-settings: var(--fvs-display);
  font-size: var(--fs-h3); font-weight: var(--g-display); line-height: 1.12;
  color: var(--ink); margin: 0 0 1.1rem;
}
.p404 .label { margin-bottom: 1.3rem; }
.p404-texte { max-width: 46ch; font-size: var(--fs-body-2); color: var(--ink-light); margin: 0 0 2.2rem; }
.p404-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; justify-content: center; align-items: center; }
.p404-tel { font-size: var(--fs-small); color: var(--ink-muted); margin-top: 2.4rem; }
.p404-tel a { color: var(--green-800); }

/* ============================================================
   IMPRESSION — la fiche pratique
   ============================================================
   Il n'y avait aucune règle d'impression : zéro. Qui imprimait cette page
   obtenait la navigation, les carrousels, et huit cents pixels de fond noir
   étalés sur trois feuilles. Or sur un site de gîtes, on imprime — l'adresse,
   le téléphone, l'heure d'arrivée, ce que contient chaque gîte, la route.
   C'est cette feuille-là qu'on veut, et c'est celle-ci qui la donne.
   ============================================================ */
@page { margin: 1.6cm; }

@media print {
  /* Toute l'encre décorative saute. */
  *, *::before, *::after {
    background: transparent !important; color: #000 !important;
    box-shadow: none !important; text-shadow: none !important;
    opacity: 1 !important; transform: none !important;
    transition: none !important; animation: none !important;
  }
  html, body { background: #fff !important; font-size: 11pt; }

  /* Ce qui n'a aucun sens sur du papier : les images de fond, les commandes
     de carrousel, le formulaire, les boutons, la fenêtre des mentions. */
  .nav, #veil, .hero-veil, .hero-slides, .hero-bottom, .hero-controls,
  .hero-caption, .hero-scroll, .carr-fleche, .hero-dots, .pool-dots,
  .pool-controls, .pool-photos, .pool-overlay, .book-bg, .form, .stepper,
  .btn, .btn-ghost, .gite-gallery, .place-acts, .place-figure, .carte-sud,
  .night-photo, .night-fade, .footer-tag, .nav-toggle, dialog,
  .lb-btn, .lb-close { display: none !important; }

  /* Les étoiles sont peintes par un dégradé découpé sur le texte : en noir
     forcé, elles afficheraient cinq étoiles pleines à côté de « 4,78 » —
     exactement l'arrondi en douce que le site refuse. Le chiffre suffit. */
  .gite-score .stars { display: none !important; }

  /* Le haut de page redevient un titre de document, pas un écran. */
  .hero { min-height: 0 !important; height: auto !important; padding: 0 0 0.9cm !important; }
  .hero-content { position: static !important; }
  .hero-title { font-size: 26pt !important; }
  .hero-sub, .hero-sur { font-size: 10pt !important; }

  /* Les durées de trajet étaient réservées aux lecteurs d'écran, la carte
     dessinée portant l'information à l'œil. Sur un papier qu'on emporte en
     voiture, c'est exactement le texte qu'on veut, et la carte ne sert plus. */
  .hors-ecran {
    position: static !important; width: auto !important; height: auto !important;
    clip-path: none !important; white-space: normal !important;
    margin: 0.6em 0 !important; padding-left: 1.2em !important;
  }

  /* Un écran s'étire ; une feuille se remplit. Toutes les hauteurs pensées
     pour un écran doivent tomber, sans quoi la fiche part sur huit pages
     percées de trous — c'est ce qu'a montré le premier rendu. */
  .hero, .gites, .book, .pool, .night, .rappel, .place-section, section {
    min-height: 0 !important; height: auto !important;
  }
  .section, section { padding-block: 0.5cm !important; }
  .gites-head, .book-head, .place-tete { margin-bottom: 0.5cm !important; }
  .gite-img { height: 5cm !important; }        /* 430 px à l'écran : 11 cm sur A4 */
  .gite-body { padding: 0.5cm !important; }
  .wrap { max-width: none !important; padding-inline: 0 !important; }

  /* Le texte justifié tient sur une colonne large d'écran ; sur une colonne
     de papier il ouvre des lézardes. Sur papier, au fer à gauche. */
  p, li, .gite-desc { text-align: left !important; }

  /* Le crédit ESO est posé en absolu sur la photographie : la photographie
     partie, il retombait EN TRAVERS du texte. Il doit reprendre le fil.
     La licence impose qu'il reste lisible — donc on le replace, on ne le
     masque pas. */
  .night-credit { position: static !important; display: block !important;
                  margin-top: 0.5em !important; inset: auto !important; }

  /* On ne coupe pas un encadré en deux, ni un titre de son texte. Le gîte
     lui-même n'est PAS protégé : une carte fait presque une page, et la
     protéger creusait une demi-page blanche avant chacune. */
  .place-card, .gites-ensemble { break-inside: avoid; page-break-inside: avoid; }
  h2, h3 { break-after: avoid; page-break-after: avoid; }

  /* Une adresse de lien ne se devine pas sur du papier. */
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; word-break: break-all; }
  a[href^="#"]::after, a[href^="tel"]::after, a[href^="mailto"]::after { content: "" !important; }
}