/* site.css — feuille commune aux 7 pages publiques.
   Charge base.css en amont (police + palette + reset).
   Le <style> résiduel de chaque page ne contient que son CSS propre. */

:root{
  --maxw: 1320px;
}

body{
  margin:0;
  background:var(--pierre);
  color:var(--noir);
  font-family:'Karla', 'Segoe UI', sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit;}
h1,h2,h3{
  font-family:'Hubballi','Karla',serif;
  font-weight:400;
  margin:0 0 0.4em;
  line-height:1.08;
  letter-spacing:0.01em;
}
/* Une seule échelle de titres pour les 7 pages : le H1 domine, le H2 est
   nettement en dessous, le H3 change de police plutôt que de taille.
   Aucune page ne redéfinit ces tailles localement. */
h1{font-size:clamp(2.6rem, 5vw, 4rem); letter-spacing:0;}
h2{font-size:clamp(1.6rem, 2.6vw, 2.2rem);}
h3{font-size:1.05rem; font-family:'Karla',sans-serif; font-weight:700; letter-spacing:0.01em;}
.eyebrow{
  display:inline-block;
  /* 0,72rem tombait à 11,5 px : sous cette taille, des capitales très
     interlettrées se lisent mal, et c'était le plus petit texte du site. */
  font-size:0.78rem;
  font-weight:700;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--vert);
  margin-bottom:0.9em;
}
section.dark .eyebrow{color:var(--vert);}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
/* Signature des propriétaires : elle annonce qui parle, au-dessus du titre. */
.signature{
  font-size:0.78rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--vert-dark); margin:0 0 0.75em;
}
p{margin:0 0 1.1em; color:var(--noir);}
/* Demande explicite des propriétaires : texte aligné des deux côtés. Réservé au texte courant (paragraphes, listes, mot des propriétaires) ; jamais aux libellés courts (eyebrow, signature, légendes, titres) où justifier une ligne isolée créerait des espaces absurdes. */
/* Relecture AF 01/09 : « beaucoup de mots coupés, pas agréable à lire ». La
   césure automatique est coupée (hyphens:manual) ; la justification demandée
   par les propriétaires est conservée. */
.lede, p, li, dd{text-align:justify; -webkit-hyphens:manual; hyphens:manual;}
.eyebrow, .signature, h1, h2, h3, figcaption, .dlabel, .facts span, .foot-titre, .foot-qui, nav a{text-align:left;}
/* Revue 02/09 : sans césure, la justification n'est tenable que sur une vraie
   colonne de texte. Dans les listes en colonnes, les fiches d'activités, les
   définitions courtes et les notes en petit corps (mesure de 20 à 40 signes),
   le navigateur écartait les mots de 3 à 4 fois l'espace normal pour remplir
   la ligne : « 2 réfrigérateurs,   2 fours,   2 plaques ». Ces blocs
   repassent à gauche ; les paragraphes et chapeaux restent justifiés, comme
   demandé par les propriétaires. */
.equip-list li, .equip-sub li, .activity-cols li, .activity-cols .adesc,
.details-grid dd, .contact-info dd, .foot-adresse, .foot-bas p,
.tarifs-legende, .tarifs-note, .activity-more, .dispo-note, .dispo-legende,
form.rsvp .note, form.rsvp .field-hint{text-align:left;}
section.dark p{color:var(--noir);}
/* Le chapeau se distinguait du corps par 0,08rem — un écart invisible, qui
   laissait les blocs de texte long (le mot des propriétaires) sans premier
   niveau de lecture. L'écart est porté à un vrai cran d'échelle. */
.lede{
  font-size:clamp(1.15rem, 1.5vw, 1.3rem); line-height:1.52;
  /* Relecture AF 01/09 : le chapeau et les paragraphes suivants doivent
     s'aligner. Une mesure en `ch` suit la taille de police : a 1,3rem le
     chapeau depassait de ~60px les paragraphes a 1rem. Mesure en px, donc
     identique pour les deux. */
  max-width:640px; color:#312B24;
}
section.dark .lede{color:var(--gres);}
/* ---------- Header ---------- */
header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 24px;
  background:transparent;
  /* Le padding n'est PAS animé : le header est fixe et son basculement se
     déclenche au défilement, donc animer une propriété de mise en page
     imposait un recalcul à chaque image pendant tout le scroll. Seules les
     propriétés composées (fond, ombre) sont transitionnées ; la hauteur, elle,
     change d'un coup — ce qui se lit comme un ancrage, pas comme un saut. */
  transition:background .35s ease, box-shadow .35s ease;
}
header.solid{
  /* PAS de backdrop-filter ici : un backdrop-filter sur le header crée un
     containing block pour ses descendants en position:fixed — le panneau
     du menu mobile serait positionné/clippé par rapport au header (64px)
     au lieu du viewport.
     Fond opaque : à 0.97 le contenu de la page transparaissait derrière le
     header, et les titres passaient en fantôme sous la barre au défilement. */
  background:var(--blanc);
  padding:12px 24px;
  box-shadow:0 1px 0 rgba(23,21,18,0.10);
}
header .brand{display:flex; align-items:center; gap:10px; text-decoration:none;}
header .brand img{height:78px; width:auto;}
header.solid .brand img{height:66px;}
@media (max-width:760px){ header .brand img{height:60px;} header.solid .brand img{height:52px;} }
header nav{display:flex; align-items:center; gap:28px;}
header nav a{
  font-size:0.88rem; text-decoration:none; font-weight:600; letter-spacing:0.02em;
  color:var(--blanc); opacity:0.92;
  padding-bottom:2px; border-bottom:1px solid transparent;
  transition:border-color .2s ease, color .2s ease;
  white-space:nowrap;
}
header.solid nav a{color:var(--noir);}
header nav a:hover, header nav a.active{border-color:var(--vert);}
/* Sur le header transparent (accueil), un filet vert sapin disparait dans la
   photo : le lien actif y prend un filet clair, comme le texte qu'il souligne. */
header .cta-btn{
  background:var(--vert); color:var(--blanc) !important;
  padding:9px 18px; border-radius:var(--radius); border-bottom:none !important;
}
header .cta-btn:hover{background:var(--vert-dark);}
header .burger{display:none; background:none; border:none; cursor:pointer; padding:6px; position:relative; z-index:120;}
header .burger span{
  display:block; width:24px; height:2px; background:var(--blanc); margin:5px 0;
  /* `transition:.2s` sans propriete equivaut a `all` : le navigateur surveille
     toutes les proprietes animables de l'element. On nomme les trois utiles. */
  transition:transform .2s var(--ease-out), opacity .2s var(--ease-out), background-color .2s ease;
}
header.solid .burger span{background:var(--noir);}
/* Menu ouvert : le burger reste visible au-dessus du panneau (z-index) et
   se transforme en croix pour indiquer la fermeture. Le panneau etant clair,
   la croix est sombre. */
header .burger.open span{background:var(--noir);}
header .burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
header .burger.open span:nth-child(2){opacity:0;}
header .burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.nav-backdrop{
  display:none; position:fixed; inset:0; background:rgba(23,21,18,0.5);
  opacity:0; transition:opacity .28s var(--ease-out); z-index:90;
}
.nav-backdrop.open{display:block; opacity:1;}
.nav-tel{display:none;}
@media (max-width:920px){
  .nav-tel{display:block !important;}
  header nav{
    position:fixed; inset:0 0 0 auto; width:78vw; max-width:340px;
    background:var(--pierre); flex-direction:column; align-items:flex-start;
    box-shadow:-14px 0 40px rgba(23,21,18,0.18);
    padding:90px 30px 30px; gap:22px; z-index:95;
    transform:translateX(100%);
    /* visibility sort le panneau fermé de l'ordre de tabulation ; le délai
       attend la fin du glissement avant de masquer.
       La fermeture est plus rapide que l'ouverture : on ouvre pour lire, on
       ferme pour repartir, et le systeme doit repondre plus vite qu'il ne
       se presente. */
    visibility:hidden;
    transition:transform .22s var(--ease-drawer), visibility 0s linear .22s;
  }
  header nav.open{transform:translateX(0); visibility:visible; transition:transform .32s var(--ease-drawer);}
  /* WCAG 2.2 demande 24x24 px minimum pour une cible tactile ; ces liens
     mesuraient 23 px de haut. Le padding vertical les amene a 44 px, la
     taille confortable au pouce. */
  header nav a{color:var(--noir) !important; font-size:1rem; padding:10px 0; display:block;}
  header .burger{display:block;}
  header .cta-btn{margin-top:10px;}
}
/* ---------- Hero ---------- */
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap; margin-top:1.4em;}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:13px 26px; border-radius:var(--radius);
  text-decoration:none; font-weight:700; font-size:0.88rem; letter-spacing:0.02em;
  transition:background .2s ease, color .2s ease, border-color .2s ease,
             transform .16s var(--ease-out);
}
/* Un bouton doit accuser reception de l'appui : sans cet etat, rien ne
   confirme que le clic a ete entendu avant que la page suivante charge. */
.btn:active{transform:scale(0.98);}
/* Empilés, deux boutons de longueurs de texte différentes donnaient deux
   rectangles de largeurs différentes alignés à gauche : ils partagent
   désormais la largeur de la colonne. */
@media (max-width:560px){
  .hero-ctas{flex-direction:column; align-items:stretch; gap:10px;}
  .hero-ctas .btn{width:100%;}
}
.btn-primary{background:var(--vert); color:var(--blanc);}
.btn-primary:hover{background:var(--vert-dark);}
/* Fond semi-opaque : posé sur une photo, le seul filet ne garantissait pas
   la lisibilité du texte blanc sur les zones claires de l'image. */
.btn-outline{border:1px solid rgba(251,248,242,0.6); color:var(--blanc); background:rgba(23,21,18,0.55);}
.btn-outline:hover{border-color:var(--blanc); background:rgba(23,21,18,0.72);}
/* Le voile sombre de .btn-outline datait des sections photo. Sur les sections
   creme, il laissait une pastille grise avec du texte noir (3.5:1) : on le retire
   et le bouton redevient un vrai contour, comme .btn-outline-dark. */
section.dark .btn-outline{border-color:rgba(23,21,18,0.45); color:var(--noir); background:transparent;}
section.dark .btn-outline:hover{border-color:var(--noir); background:rgba(23,21,18,0.06);}
/* Trois entrées partout où le bandeau est utilisé (accueil et séminaires) :
   la grille est donc en trois colonnes ici, et aucune page ne la redéclare. */
.facts{
  display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  margin-top:3em; border-top:1px solid rgba(251,248,242,0.28);
}
.facts div{padding:20px 24px 0; border-left:1px solid rgba(251,248,242,0.28);}
.facts div:first-child{border-left:none; padding-left:0;}
/* Ces chiffres sont l'argument le plus dur de la page : ils portaient 1,5rem
   face à un H1 de 4rem et se lisaient comme une note de bas de page. */
.facts strong{
  display:block; font-family:'Hubballi',serif; font-weight:400;
  font-size:clamp(2.1rem, 3.2vw, 3rem); line-height:1;
  margin-bottom:6px;
}
.facts span{
  display:block; font-size:0.78rem; color:#D8D0C0;
  letter-spacing:0.12em; text-transform:uppercase; line-height:1.35;
}
/* Même bloc de chiffres, posé sur un fond clair. */
.facts-onlight{border-top-color:rgba(23,21,18,0.18);}
.facts-onlight div{border-left-color:rgba(23,21,18,0.18); border-top-color:rgba(23,21,18,0.18);}
.facts-onlight strong{color:var(--vert-dark);}
.facts-onlight span{color:var(--gres);}
/* Sur mobile, trois entrées dans une grille à deux colonnes laissaient la
   troisième orpheline sur sa propre rangée, à côté d'un vide. Le bandeau
   passe en lignes : chiffre à gauche, libellé à droite, un filet entre
   chaque — lisible aussi avec les libellés longs de la page séminaires. */
@media (max-width:760px){
  .facts{grid-template-columns:1fr; margin-top:2.4em; border-top:none;}
  .facts div{
    display:grid; grid-template-columns:auto 1fr; align-items:baseline;
    column-gap:18px; padding:14px 0;
    border-left:none; border-top:1px solid rgba(251,248,242,0.28);
  }
  .facts div:first-child{padding-left:0;}
  /* Sans filet de clôture, la dernière ligne restait ouverte sur le vide et
     le bandeau n'avait pas de fin. */
  .facts div:last-child{border-bottom:1px solid rgba(251,248,242,0.28);}
  .facts-onlight div:last-child{border-bottom-color:rgba(23,21,18,0.18);}
  .facts strong{font-size:2rem; margin-bottom:0;}
  .facts span{text-align:right;}
}
/* ---------- Generic section ---------- */
/* Respirations asymétriques : une section n'entre pas et ne sort pas au même
   rythme, et deux sections voisines n'ont pas la même hauteur d'air.
   .tight / .roomy / .closing sont posées page par page. */
/* Les pieds de section étaient presque aussi hauts que les têtes : chaque
   bloc se terminait sur 120–200 px de fond vide, lus comme un trou et non
   comme une respiration. L'air reste asymétrique, mais il est porté par le
   haut de section — là où il sépare deux idées. */
section{padding:44px 0 28px;}
section.tight{padding:36px 0 24px;}
section.gallery-band{padding:32px 0 36px;}
section.closing{padding:48px 0 32px;}
@media (max-width:760px){
  section{padding:32px 0 22px;}
  section.tight{padding:28px 0 20px;}
  section.gallery-band{padding:24px 0 28px;}
  section.closing{padding:36px 0 24px;}
}
/* Prose : une ligne de texte courant ne dépasse pas ~70 signes, y compris
   dans les chapeaux de section. */
section > .wrap > p, section > .wrap > ul, section > .wrap > ol,
.section-head p, .section-head ul{max-width:640px;}
/* Les listes d'equipements (.equip-list) sont des grilles en colonnes, pas
   du texte courant : la limite de 70ch ci-dessus les faisait passer a ~598px
   au lieu de toute la largeur du .wrap. On leur redonne la pleine largeur. */
section > .wrap > .equip-list{max-width:none;}
/* .dark et .forest ne sont plus sombres : Anne-Francoise ne veut que les
   deux tons creme. Les noms de classe sont conserves pour ne pas avoir a
   toucher les 10 pages, mais ils rendent desormais un fond clair. */
section.dark{background:var(--pierre-alt); color:var(--noir);}
section.alt{background:var(--pierre-alt);}
/* Vert sapin porté en pleine section, pas seulement en accent de bouton —
   parti pris de la Phase 4 : le vert fait un vrai travail de composition. */
section.forest{background:var(--pierre); color:var(--noir);}
section.forest .eyebrow{color:var(--vert);}
section.forest p{color:var(--noir);}
section.forest .lede{color:var(--gres);}
section.forest h2, section.forest h3{color:var(--vert-dark);}
/* Le filet hérite de currentColor : sur fond vert il suit la couleur du
   texte clair, il suffit de relever son opacité pour qu'il reste visible. */
section.forest .equip-list li::before{background:var(--vert); opacity:0.5;}
section.forest .btn-outline{border-color:rgba(23,21,18,0.45); color:var(--noir); background:transparent;}
section.forest .btn-outline:hover{border-color:var(--noir); background:rgba(23,21,18,0.06);}
/* Un bouton vert sur fond vert disparaît : sur .forest, le bouton primaire
   s'inverse (fond clair, texte vert) pour rester visible. */
section.forest .btn-primary{background:var(--vert); color:var(--blanc);}
section.forest .btn-primary:hover{background:var(--vert-dark);}
section.forest .details-grid dt{color:var(--gres);}
section.forest .details-grid dd{color:var(--noir);}
.section-head{max-width:640px; margin-bottom:52px;}
/* Relecture d'Anne-Françoise : le texte doit « prendre l'espace » sur les
   pages intérieures. Variante large du chapeau, posée là où le document de
   relecture le demande (Familles & amis, Séminaires, Tarifs…). */
.section-head.wide{max-width:880px;}
.section-head.wide p{max-width:none;}
/* Chapeau aligne sur la grille de photos qui le suit (demande Antoine 11/09) :
   le bloc de texte prend toute la largeur du .wrap, comme la galerie. En une
   seule colonne les lignes atteindraient ~170 signes, illisible — le texte
   passe donc en deux colonnes, comme .equip-list et .details-grid ailleurs
   sur le site. La place occupee est la meme, la lecture reste confortable. */
.section-head.pleine{max-width:none;}
.section-head.pleine p{max-width:none;}
.section-head.pleine .texte-2col{columns:2; column-gap:56px;}
.section-head.pleine .texte-2col p{break-inside:avoid; -webkit-column-break-inside:avoid;}
.section-head.pleine .texte-2col p:last-child{margin-bottom:0;}
@media (max-width:860px){ .section-head.pleine .texte-2col{columns:1;} }
/* Le contenu reste visible par défaut (sans JS, pour les moteurs de recherche,
   lecteurs d'écran anciens, impression…) ; l'animation d'apparition n'est
   activée que si le JavaScript confirme qu'il peut la piloter — voir la classe
   js-ready ajoutée en bas de page. */
/* Une apparition est une entree : elle demarre vite puis se pose (--ease-out).
   En `ease`, le mouvement s'amorcait lentement au moment precis ou l'oeil
   arrive dessus. La course passe de 22 a 14 px et la duree de 700 a 550 ms :
   a ce registre, l'animation doit accompagner la lecture, pas la precéder. */
.reveal{transition:opacity .55s var(--ease-out), transform .55s var(--ease-out);}
html.js-ready .reveal{opacity:0; transform:translateY(14px);}
html.js-ready .reveal.in{opacity:1; transform:none;}
/* A l'impression, aucun defilement ne declenche l'observer : sans cette
   surcharge, tout ce qui n'a pas ete revele sortait en blanc. */
@media print{
  /* BUG-1 QA 31/08 : le header fixe se répétait sur chaque page imprimée et
     recouvrait ~66px de contenu. À l'impression on le masque, avec le backdrop
     et le bouton burger. */
  header, .nav-backdrop, .burger{display:none !important;}

  html.js-ready .reveal{opacity:1 !important; transform:none !important;}

  /* BUG QA 15/09 : par defaut le navigateur n'imprime pas les arriere-plans.
     Le bandeau perdait donc sa photo ET ses deux voiles, mais gardait son
     texte en --blanc : titre, surtitre, chapeau et boutons devenaient
     invisibles sur papier blanc (contraste mesure 1,05:1). Le bandeau
     s'imprime donc a plat, en texte sombre. */
  .page-hero{
    background-image:none !important;
    background-color:transparent !important;
    min-height:0 !important;
    /* Le padding haut reservait la place du header fixe, qu'on vient de
       masquer : sans cela, chaque page commencait par ~250px de blanc. */
    padding-top:0 !important;
  }
  .page-hero::before, .page-hero::after{display:none !important;}
  .page-hero h1, .page-hero .lede, .page-hero p{color:var(--noir) !important;}
  .page-hero .eyebrow{color:var(--vert) !important;}
  .page-hero .btn{
    color:var(--vert-dark) !important;
    background:transparent !important;
    border:1px solid var(--vert) !important;
  }
}
/* ---------- Two-col intro (Le lieu) ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
.split img{border-radius:var(--radius);}
.split .imgs{display:grid; gap:16px; grid-template-columns:1.2fr 1fr;}
.split .imgs img:first-child{grid-row:span 2; height:100%; object-fit:cover;}
.split .imgs img{height:100%; object-fit:cover;}
/* Le Moulin : 4 photos plutôt que 3, poids visuel égal (pas de tuile
   dominante) — la grille par défaut (1 grande + 2 moyennes) était pensée
   pour 3 images, pas 4. */
.split .imgs.imgs-4{grid-template-columns:1fr 1fr; grid-auto-rows:1fr;}
.split .imgs.imgs-4 img:first-child{grid-row:auto; height:100%;}
@media (max-width:860px){
  .split{grid-template-columns:1fr;}
  .split .imgs{grid-template-columns:1fr 1fr; margin-top:20px;}
  .split .imgs img:first-child{grid-row:auto;}
}
/* ---------- Bento asymétrique (Découvrez Rives 903) ---------- */
/* Une tuile qui domine, deux qui l'accompagnent, trois en pied de grille —
   composition volontaire plutôt que six cartes identiques. */
.bento{display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:180px; gap:16px;}
/* Les intitulés sont posés SOUS la photo, pas dessus : sur deux lignes, un
   dégradé calé sur la hauteur du texte laissait la première ligne sur
   l'image nue, et la photo elle-même restait à moitié masquée. */
.bento a{display:flex; flex-direction:column; text-decoration:none; color:inherit;}
.bento a > .bento-frame{flex:1; min-height:0; overflow:hidden; border-radius:var(--radius); background:#0002;}
/* 500 ms est long pour un retour de pointeur : la vignette continuait de
   grandir apres que le curseur soit reparti. */
.bento img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s var(--ease-out);}
/* Une photo verticale posée dans une tuile large est rognée en son milieu :
   sur celle de la pétanque, cela ne gardait qu'un avant-bras. Le point
   d'intérêt est plus bas — la main et la boule au-dessus du terrain. */
.bento img.focus-bas{object-position:center 72%;}
/* Relecture AF 01/09 : sur la tuile « Familles & amis », une photo verticale
   posee dans une tuile large etait rognee en son milieu et coupait les tetes.
   Le cadrage remonte pour garder les visages. */
.bento img.focus-haut{object-position:center 42%;}
/* Tuile « Le Moulin » : le comptoir et les tabourets sont dans le bas du
   cliche. Ancrage vers le bas pour que le bar occupe la tuile, plutot que le
   mur de pierre (demande Antoine 11/09). */
.bento img.focus-comptoir{object-position:center 88%;}
/* Le survol n'existe pas au doigt : sans cette garde, une tape sur mobile
   declenche :hover et l'image reste agrandie jusqu'a la tape suivante.
   Le focus clavier, lui, doit rester couvert dans tous les cas. */
@media (hover:hover) and (pointer:fine){
  .bento a:hover img{transform:scale(1.04);}
}
.bento a:focus-visible img{transform:scale(1.04);}
/* Ces six tuiles sont les portes d'entrée du site, mais leurs intitulés se
   lisaient comme des légendes de photo : gris clair, sans repère de lien.
   Ils prennent le contraste et la flèche d'un lien, qui avance au survol. */
.bento .dlabel{
  display:flex; align-items:baseline; gap:8px; padding:12px 2px 0;
  color:var(--noir); font-family:'Karla','Segoe UI',sans-serif;
  font-size:0.88rem; font-weight:700; letter-spacing:0.01em; text-transform:none;
}
.bento .dlabel::after{
  content:'→'; font-size:0.9em; color:var(--vert);
  transition:transform .22s var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .bento a:hover .dlabel{color:var(--vert-dark);}
  .bento a:hover .dlabel::after{transform:translateX(4px);}
}
.bento a:focus-visible .dlabel{color:var(--vert-dark);}
.bento a:focus-visible .dlabel::after{transform:translateX(4px);}
.bento a:nth-child(1){grid-column:1/5; grid-row:1/3;}
.bento a:nth-child(2){grid-column:5/7; grid-row:1/2;}
.bento a:nth-child(3){grid-column:5/7; grid-row:2/3;}
.bento a:nth-child(4){grid-column:1/3; grid-row:3/4;}
.bento a:nth-child(5){grid-column:3/5; grid-row:3/4;}
.bento a:nth-child(6){grid-column:5/7; grid-row:3/4;}
@media (max-width:860px){
  .bento{grid-template-columns:1fr 1fr; grid-auto-rows:190px;}
  .bento a:nth-child(1){grid-column:1/3; grid-row:1/2;}
  .bento a:nth-child(2){grid-column:1/2; grid-row:2/3;}
  .bento a:nth-child(3){grid-column:2/3; grid-row:2/3;}
  .bento a:nth-child(4){grid-column:1/2; grid-row:3/4;}
  .bento a:nth-child(5){grid-column:2/3; grid-row:3/4;}
  .bento a:nth-child(6){grid-column:1/3; grid-row:4/5;}
}
@media (max-width:520px){
  .bento{gap:10px; grid-auto-rows:150px;}
  .bento .dlabel{padding:9px 1px 0; font-size:0.78rem; gap:6px;}
}
/* ---------- Gallery grid ---------- */
.gallery{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.gallery figure{margin:0;}
/* galerie.js pose role="button" sur les figures qu'il rend cliquables : le
   curseur suit donc l'etat reel, et reste normal si le script n'est pas la. */
.gallery figure img[role="button"]{cursor:zoom-in;}
/* Les photos du bandeau `.imgs` (page Le gite) sont cliquables comme celles
   des galeries : meme curseur, et un contour visible au clavier puisqu'elles
   recoivent un tabindex. */
.imgs img[role="button"]{cursor:zoom-in;}
.imgs img[role="button"]:focus-visible{outline:2px solid var(--vert); outline-offset:3px;}
.gallery figure .shot{display:block; overflow:hidden; border-radius:var(--radius); background:#0002;}
.gallery figure img{width:100%; height:100%; object-fit:cover; aspect-ratio:4/5; display:block; transition:transform .3s var(--ease-out);}
@media (hover:hover) and (pointer:fine){
  .gallery figure:hover img{transform:scale(1.04);}
}
/* Légende sous la photo : la photo reste entière, le texte reste lisible
   même sur deux lignes. */
.gallery figcaption{
  padding:10px 2px 0;
  color:var(--gres); font-family:'Karla','Segoe UI',sans-serif;
  font-size:0.78rem; font-weight:600; letter-spacing:0.01em; line-height:1.4;
}
/* Chaque légende disait « Sujet — Précision ». Répété sur douze photos, ce
   tiret devient un gabarit visible plutôt qu'une ponctuation. La précision
   passe donc en second niveau par la graisse, sans séparateur. */
.gallery figcaption .cap-sub{
  /* Revue 02/09 : a 0,78 d'opacite le gris tombait a 3,5:1 sur le fond creme
     (12,5 px, seuil 4,5:1). Un gris a peine plus clair que le sujet, opaque :
     4,7:1 mesure sur le fond le plus fonce, la hierarchie reste lisible. */
  font-weight:400; color:#625A4F;
  /* Un espace reel precede ce span dans le HTML : sans lui, figcaption.textContent
     collait les deux moities (« Chambre 1rez-de-chaussee »), et ce texte sert de
     legende visible ET d'aria-label a la visionneuse. La marge complete cet
     espace au lieu de le remplacer. */
  margin-left:0.25em;
}
.gallery.wide figure img{aspect-ratio:4/3;}
/* Sur fond sombre ou vert, la légende passe en clair. */
section.dark .gallery figcaption, section.forest .gallery figcaption,
section.dark .bento .dlabel, section.forest .bento .dlabel{color:var(--gres);}
section.dark .bento .dlabel::after, section.forest .bento .dlabel::after{color:var(--vert);}
/* Variante 3 colonnes : pour les galeries de 5-6 photos (rangées de 3
   plutôt qu'une rangée orpheline en 4 colonnes). */
.gallery.cols3{grid-template-columns:repeat(3,1fr);}
@media (max-width:920px){ .gallery{grid-template-columns:repeat(2,1fr);} .gallery.cols3{grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){
  .gallery{grid-template-columns:1fr 1fr; gap:10px;}
  .gallery figcaption{padding:8px 1px 0; font-size:0.78rem;}
}
/* ---------- Tarifs (page tarifs) ---------- */
/* Relecture AF 01/09 : « je preferais le tableau, c'etait plus clair ». Retour
   a un vrai tableau (saison / week-end / semaine), mais sans le chrome qui le
   faisait ressembler a un bloc genere : pas de cadre, pas de fond de couleur,
   pas d'en-tete plein — juste des filets fins et des chiffres alignes, comme
   une grille tarifaire imprimee. */
.tarifs-legende{font-style:italic; color:var(--gres); font-size:0.86rem; margin:0 0 22px;}
/* Sur un ecran etroit la legende se coupait au milieu d'un horaire
   (« ven. 17h → / ven. 10h ») : une ligne par formule. */
@media (max-width:520px){ .tarifs-legende span{display:block;} .tarifs-legende .tl-sep{display:none;} }
.table-wrap{overflow-x:auto; max-width:820px;}
table{border-collapse:collapse; width:100%;}
thead th{
  font-family:'Karla',sans-serif; font-size:0.72rem; font-weight:700;
  text-transform:uppercase; letter-spacing:0.09em; color:var(--gres);
  text-align:left; padding:0 24px 10px 0; border-bottom:1px solid rgba(23,21,18,0.28);
}
thead th:first-child{width:46%;}
tbody th{
  text-align:left; font-weight:400; padding:16px 24px 16px 0;
  font-family:'Hubballi','Karla',serif; font-size:1.2rem; color:var(--noir);
  border-bottom:1px solid rgba(23,21,18,0.12); vertical-align:top;
}
tbody td{
  padding:16px 24px 16px 0; border-bottom:1px solid rgba(23,21,18,0.12);
  vertical-align:top;
}
tbody tr:last-child th, tbody tr:last-child td{border-bottom:none;}
.tarif-dates{
  display:block; margin-top:3px;
  font-family:'Karla',sans-serif; font-size:0.8rem; font-style:italic;
  color:var(--gres); font-variant-numeric:tabular-nums;
}
/* « a partir de » reste au-dessus du prix, en petit : le chiffre garde le
   premier plan et les colonnes restent lisibles d'une ligne a l'autre. */
.apd{
  display:block; font-size:0.72rem; font-style:italic; color:var(--gres);
  margin-bottom:1px;
}
/* La mention et le prix forment un seul objet (.tarif-val) : sur mobile, la
   cellule est un flex a deux bouts et « a partir de » flottait au milieu de
   la ligne, entre le libelle et le chiffre. */
.tarif-val{display:block;}
.price-value{
  font-family:'Hubballi',serif; font-size:1.2rem; color:var(--vert-dark);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.tarif-nc{font-size:0.86rem; font-style:italic; color:var(--gres);}
.tarifs-note{
  margin:14px 0 0; max-width:820px;
  font-size:0.86rem; font-style:italic; color:var(--gres);
}
/* Sous 700px, le tableau devient une liste empilee par saison : plus rien a
   faire glisser lateralement, tous les tarifs visibles d'un coup. */
@media (max-width:700px){
  .table-wrap{overflow-x:visible;}
  thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);}
  tbody tr{display:block; padding:16px 0; border-bottom:1px solid rgba(23,21,18,0.12);}
  tbody tr:last-child{border-bottom:none;}
  tbody th{display:block; padding:0 0 10px; border-bottom:none;}
  tbody td{
    display:flex; justify-content:space-between; align-items:baseline; gap:14px;
    padding:5px 0; border-bottom:none;
  }
  tbody td::before{
    content:attr(data-label); flex:none;
    font-family:'Karla',sans-serif; font-size:0.72rem; font-weight:700;
    text-transform:uppercase; letter-spacing:0.07em; color:var(--gres);
  }
  .apd{display:inline; margin:0 4px 0 0;}
  .tarif-val{display:inline-flex; align-items:baseline; gap:5px; white-space:nowrap;}
}
/* Meme raison que .equip-list : en grille, la repartition des paires entre les
   deux colonnes etait figee dans le HTML, donc une colonne finissait bien avant
   l'autre (169px de vide mesures sur reservation). En colonnes CSS, le
   navigateur equilibre lui-meme les hauteurs. */
.details-grid{columns:2; column-gap:44px; margin-top:44px;}
.details-grid > div{break-inside:avoid; -webkit-column-break-inside:avoid; margin:0 0 22px;}
.details-grid dt{font-weight:700; font-size:0.88rem; text-transform:uppercase; letter-spacing:0.04em; color:var(--gres); margin-bottom:4px;}
.details-grid dd{margin:0; font-size:0.96rem;}
@media (max-width:700px){ .details-grid{columns:1;} }
/* Variante « pleine » : les trois precisions (serviettes, caution, animaux)
   s'enchainent l'une sous l'autre sur toute la largeur du bloc, au lieu de se
   repartir en deux colonnes (demande Antoine 11/09). En une seule colonne les
   lignes atteindraient ~170 signes : la mesure du texte est donc bornee a la
   meme largeur que les autres paragraphes de la page. */
.details-grid.pleine{columns:1; column-gap:0;}
.details-grid.pleine > div{margin-bottom:26px;}
.details-grid.pleine > div:last-child{margin-bottom:0;}
.details-grid.pleine dd{max-width:880px;}
/* Liste d'équipements sur fond sombre (ex. séminaires) — texte clair,
   pas de dt/dd colorés (contraste garanti sur --noir). */
/* Flux en COLONNES CSS et non en grille. Avec une grille, chaque rangée prend
   la hauteur de son plus grand élément : un item d'une ligne placé en face
   d'un item de quatre lignes laissait un trou vertical (jusqu'à 88px mesurés
   sur le-gite et activites). En colonnes, les items s'empilent librement et
   l'écart entre deux lignes est constant partout. */
.equip-list{
  columns:2; column-gap:40px;
  margin-top:32px; padding:0; list-style:none; font-size:0.96rem;
}
.equip-list li{
  padding-left:1.15em; position:relative;
  margin:0 0 13px;
  break-inside:avoid; -webkit-column-break-inside:avoid;
}
/* La puce est une pastille dessinée, pas un caractère. Le filet horizontal
   utilisé avant se lisait à l'oeil comme un tiret cadratin, or le site
   proscrit ce signe dans tout texte visible. Rien n'est vocalisé par les
   lecteurs d'écran (un ::before textuel, lui, peut l'être).
   top:0.62em = centre optique de la 1re ligne de texte (mesuré). */
.equip-list li::before{
  content:''; position:absolute; left:0; top:0.62em;
  width:4px; height:4px; border-radius:50%;
  background:currentColor; opacity:0.42;
}
/* Relecture AF 01/09 : les deux chambres particulieres passent en sous-liste
   sous « 9 chambres... dont ». Puce en retrait et plus discrete que celle du
   premier niveau, pour que la hierarchie se lise sans alourdir le bloc. */
.equip-sub{list-style:none; margin:7px 0 0; padding:0 0 0 0.2em;}
.equip-sub li{margin:0 0 5px; padding-left:0.95em; position:relative;}
.equip-sub li::before{
  content:''; position:absolute; left:0; top:0.62em;
  width:5px; height:1px; border-radius:0;
  background:currentColor; opacity:0.42;
}
@media (max-width:700px){ .equip-list{columns:1;} }
.equip-list.single{columns:1; margin-top:22px;}
/* ---------- Activities ---------- */
.activity-cols{display:grid; grid-template-columns:repeat(3,1fr); gap:40px;}
.activity-cols h3{
  font-size:0.78rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--vert);
  border-bottom:1px solid rgba(23,21,18,0.14); padding-bottom:10px; margin-bottom:18px;
}
.activity-cols ul{list-style:none; margin:0; padding:0;}
.activity-cols li{padding:12px 0; border-bottom:1px solid rgba(23,21,18,0.08);}
.activity-cols li:last-child{border-bottom:none;}
.activity-cols .aname{font-weight:700; font-size:0.96rem; display:flex; justify-content:space-between; gap:8px;}
.activity-cols .adist{font-weight:400; color:var(--gres); font-size:0.78rem; white-space:nowrap;}
.activity-cols .adesc{font-size:0.88rem; color:var(--gres); margin-top:3px;}
@media (max-width:860px){ .activity-cols{grid-template-columns:1fr; gap:30px;} }
.activity-more{margin-top:44px; padding-top:28px; border-top:1px solid rgba(23,21,18,0.14); font-size:0.88rem; color:var(--gres);}
/* ---------- Contact ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:60px;}
.contact-info dl{margin:0;}
.contact-info dt{font-size:0.78rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--gres); margin-top:20px;}
.contact-info dt:first-child{margin-top:0;}
.contact-info dd{margin:2px 0 0; font-size:1.05rem;}
.contact-info a{text-decoration:none; border-bottom:1px solid rgba(23,21,18,0.35);}
.contact-info a:hover{border-color:var(--vert);}
.contact-info iframe{width:100%; height:220px; border:0; margin-top:26px; border-radius:var(--radius); filter:grayscale(0.3) contrast(1.05);}
/* L'iframe est le seul element focalisable du site sans indicateur : le focus
   descend dans un document tiers, mais le cadre doit dire ou l'on est. */
.contact-info iframe:focus, .contact-info iframe:focus-within, .contact-info iframe:focus-visible{outline:2px solid var(--sauge); outline-offset:2px;}
form.rsvp{display:grid; gap:14px;}
form.rsvp label{font-size:0.78rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--gres); display:block; margin-bottom:6px;}
form.rsvp input, form.rsvp textarea, form.rsvp select{
  width:100%; padding:12px 14px; background:var(--blanc); border:1px solid rgba(23,21,18,0.22);
  color:var(--noir); border-radius:var(--radius); font-family:inherit; font-size:0.96rem;
}
form.rsvp input:focus, form.rsvp textarea:focus, form.rsvp select:focus{outline:2px solid var(--vert); outline-offset:1px;}
form.rsvp .row2{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
/* Quand un seul des deux champs d'une ligne porte une precision (« Pour les
   seminaires, optionnel »), son cadre de saisie descendait plus bas que celui
   d'en face : les deux ne s'alignaient plus. Les colonnes deviennent des piles
   verticales et le cadre est pousse en bas, donc les deux se calent toujours
   sur la meme ligne, avec ou sans precision. */
form.rsvp .row2 > div{display:flex; flex-direction:column;}
form.rsvp .row2 > div > input,
form.rsvp .row2 > div > select{margin-top:auto;}
form.rsvp button{margin-top:6px;}
form.rsvp .note{font-size:0.78rem; color:var(--gres); margin-top:2px;}
/* L'indication de format était collée au libellé par un tiret
   (« Date d'arrivée — jj/mm/aaaa »). C'est une aide de saisie, pas un nom de
   champ : elle passe sous le libellé et est rattachée à l'input par
   aria-describedby, donc annoncée après lui et non dans son nom. */
form.rsvp .field-hint{
  display:block; margin:-2px 0 6px;
  font-size:0.78rem; color:var(--gres); letter-spacing:0.02em;
}

@media (max-width:860px){ .contact-grid{grid-template-columns:1fr; gap:40px;} form.rsvp .row2{grid-template-columns:1fr;} }
/* ---------- Footer ---------- */
footer{background:var(--pierre-alt); color:var(--gres); padding:56px 0 28px; font-size:0.88rem;
       border-top:1px solid rgba(23,21,18,0.14);}
footer a{color:var(--noir); text-decoration:none;}
footer a:hover{color:var(--vert);}
/* Logo de pied de page agrandi (demande Antoine 04/09) : a 42px il se lisait
   comme une petite vignette a cote du bloc adresse. Il tient maintenant la
   colonne, sans depasser le logo de l'en-tete (78px). */
footer img{height:72px; width:auto; opacity:0.9;}
@media (max-width:760px){ footer img{height:60px;} }

.foot-grid{display:grid; grid-template-columns:1.15fr 0.85fr 1.3fr; gap:40px 32px; padding-bottom:36px;}
.foot-brand{display:flex; flex-direction:column; gap:16px;}
.foot-adresse{margin:0; line-height:1.6; color:var(--gres);}
.foot-titre{margin:0 0 14px; font-size:0.76rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--gres);}
/* Les liens du pied de page faisaient 23px de haut pour 24 exiges (WCAG 2.2
   2.5.8, cible tactile). On leur donne 2px de marge interne haut/bas et on
   retire les 4px correspondants des gouttieres : le pas vertical est
   inchange, la zone cliquable passe de 23 a 27px. */
.foot-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px;}
.foot-list li{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;}
.foot-list a{display:inline-block; padding:2px 0;}
.foot-qui{font-size:0.78rem; color:var(--gres);}
.foot-nav .foot-list{display:grid; grid-template-columns:1fr 1fr; gap:4px 16px;}

.foot-bas{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; padding-top:24px; border-top:1px solid rgba(23,21,18,0.14); font-size:0.78rem; color:var(--gres);}
.foot-bas p{margin:0; color:var(--gres);}
.foot-legal a{color:var(--gres); display:inline-block; padding:4px 0;}
.foot-legal a:hover{color:var(--vert);}

@media (max-width:760px){
  .foot-grid{grid-template-columns:1fr; gap:32px; padding-bottom:32px;}
  .foot-bas{flex-direction:column; align-items:flex-start; gap:10px;}
}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
/* Le lien d'évitement redevient visible quand on navigue au clavier */
a.skip-link:focus-visible{
  position:fixed; top:12px; left:12px; width:auto; height:auto; clip:auto;
  background:var(--noir); color:var(--blanc); padding:12px 18px; z-index:300;
  border-radius:var(--radius); text-decoration:none; font-weight:700; font-size:0.88rem;
}
:focus-visible{outline:2px solid var(--vert); outline-offset:2px;}
/* Sur fond sombre (sections .dark, footer, formulaire, menu mobile),
   l'outline vert sapin serait invisible : focus sauge. */
section.dark :focus-visible, section.forest :focus-visible, form.rsvp :focus-visible, footer :focus-visible{outline:2px solid var(--vert);}
/* La section elle-meme peut recevoir le focus (cible du lien d'evitement) :
   sans ce selecteur sans espace, l'outline vert serait invisible sur le fond vert. */
section.dark:focus-visible, section.forest:focus-visible{outline:2px solid var(--vert);}
/* En-tete transparent pose sur la photo du hero : l'outline vert y est illisible. */
@media (max-width:920px){ header nav :focus-visible{outline:2px solid var(--sauge);} }
/* Variante pour sections claires : le contour blanc y serait invisible */
.btn-outline-dark{border:1px solid rgba(23,21,18,0.45); color:var(--noir);}
.btn-outline-dark:hover{border-color:var(--noir); background:rgba(23,21,18,0.06);}

/* ---------- Listes d'équipements sur fond clair ---------- */
.equip-list.on-light li::before{background:var(--vert); opacity:0.5;}

/* ---------- Lightbox (le-gite + photos) ---------- */
.lb-overlay{position:fixed; inset:0; z-index:400; background:rgba(23,21,18,0.93); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:20px;}
.lb-overlay img{max-width:min(1160px, 94vw); max-height:80vh; width:auto; height:auto; border-radius:var(--radius);}
.lb-cap{color:var(--blanc); margin:14px 0 0; font-size:0.96rem; text-align:center; max-width:80ch;}
/* Compteur « 3 / 12 » sous la legende : le visiteur sait ou il en est. */
.lb-count{color:rgba(251,248,242,0.62); margin:6px 0 0; font-size:0.78rem; letter-spacing:0.08em; font-variant-numeric:tabular-nums;}
/* Pastille sombre : sur mobile la croix se posait pile sur le bouton burger
   visible par transparence (review UX 31/08). */
.lb-close{position:absolute; top:10px; right:12px; background:rgba(23,21,18,0.72); border:none; color:var(--blanc); font-size:2rem; line-height:1; cursor:pointer; width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; padding:0;}
.lb-close:hover{color:var(--sauge);}
.lb-close:focus-visible{outline:2px solid var(--sauge); outline-offset:2px;}
/* Fleches precedent/suivant de la visionneuse (demande Anne-Francoise 30/08) */
.lb-nav{position:absolute; top:50%; transform:translateY(-50%); background:rgba(23,21,18,0.55); border:1px solid rgba(255,255,255,0.25); color:var(--blanc); width:46px; height:46px; border-radius:50%; font-size:1.5rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0;}
.lb-prev{left:16px;}
.lb-next{right:16px;}
.lb-nav:hover{background:rgba(23,21,18,0.85); color:var(--sauge);}
.lb-nav:focus-visible{outline:2px solid var(--sauge); outline-offset:2px;}
@media (max-width:520px){ .lb-nav{width:48px; height:48px;} .lb-prev{left:6px;} .lb-next{right:6px;} }


/* ---------- Rythme typographique ---------- */
/* Empeche qu'un dernier mot se retrouve seul sur sa ligne. Le navigateur
   repartit la derniere ligne au lieu de la laisser orpheline. Ignore
   silencieusement par les navigateurs qui ne le connaissent pas. */
p, li, dd, .lede, .adesc, figcaption{text-wrap:pretty;}
/* Les titres se coupent au mieux plutot qu'au dernier mot possible. */
h1, h2, h3, .foot-titre{text-wrap:balance;}

/* ---------- En-tete de page illustre ---------- */
/* Meme composition que .hero (photo, voile degrade, texte clair aligne en bas)
   mais sur une bande courte : ce sont des pages de contenu, pas l'accueil.
   Le voile est un ::before et non un degrade dans `background`, pour que
   chaque page n'ait qu'a declarer son image en style inline. */
.page-hero{
  position:relative; display:flex; align-items:flex-end;
  min-height:54vh; padding:150px 0 58px;
  /* Relecture AF 01/09 : « mieux la cadrer... pour voir tous les batiments ».
     Le cadrage ne peut pas etre le meme partout : le sujet est en bas du
     cliche a l'accueil, en haut sur les vues drone du gite et des seminaires.
     Chaque page declare donc son propre background-position, a cote de son
     image ; la valeur ci-dessous n'est qu'un repli. */
  background-position:center; background-size:cover; background-repeat:no-repeat;
  color:var(--blanc);
}
.page-hero::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  /* Voile plus dense que celui de l'accueil : la bande est courte, donc le
     texte tombe au MILIEU de la photo et non tout en bas. Valeurs calees sur
     une mesure de contraste reelle (texte masque puis fond echantillonne) :
     tous les elements passent les seuils WCAG, surtitre compris. */
  /* Relecture AF 01/09 : « la photo est fort sombre ». Le voile est allege
     la ou il n'y a pas de texte (haut et milieu de l'image, ou se trouvent
     les batiments), et conserve sous le titre et les boutons, en bas, pour
     que le texte blanc reste au-dessus des seuils WCAG (mesure refaite). */
  /* Deux voiles superposes plutot qu'un seul, uniforme : un voile lateral
     protege la colonne de texte (a gauche) et un voile vertical, leger,
     tient le bas. La moitie droite de la photo — les batiments — reste
     claire. Contraste du titre blanc verifie au pixel : > 4,5:1 sur le
     point le plus clair sous le texte. */
  background:
    linear-gradient(96deg,
               rgba(23,21,18,0.80) 0%,
               rgba(23,21,18,0.72) 30%,
               rgba(23,21,18,0.44) 52%,
               rgba(23,21,18,0.14) 68%,
               rgba(23,21,18,0) 82%),
    linear-gradient(180deg,
               rgba(23,21,18,0.18) 0%,
               rgba(23,21,18,0.20) 26%,
               rgba(23,21,18,0.28) 52%,
               rgba(23,21,18,0.42) 76%,
               rgba(23,21,18,0.56) 100%);
}
/* Voile allege, reserve a l'accueil : c'est la seule page dont le titre tombe
   sur une prairie sombre et non sur un ciel clair, donc la seule qui peut se
   permettre moins de voile sans passer sous les seuils de contraste. Les
   autres en-tetes gardent le voile commun ci-dessus. */
.page-hero.voile-leger::before{
  background:
    linear-gradient(96deg,
               rgba(23,21,18,0.65) 0%,
               rgba(23,21,18,0.55) 30%,
               rgba(23,21,18,0.31) 52%,
               rgba(23,21,18,0.09) 68%,
               rgba(23,21,18,0) 82%),
    linear-gradient(180deg,
               rgba(23,21,18,0.09) 0%,
               rgba(23,21,18,0.11) 26%,
               rgba(23,21,18,0.18) 52%,
               rgba(23,21,18,0.32) 76%,
               rgba(23,21,18,0.44) 100%);
}
/* Voile intermediaire : entre le voile commun et celui de l'accueil. */
.page-hero.voile-doux::before{
  background:
    linear-gradient(96deg,
               rgba(23,21,18,0.78) 0%,
               rgba(23,21,18,0.69) 30%,
               rgba(23,21,18,0.43) 52%,
               rgba(23,21,18,0.14) 68%,
               rgba(23,21,18,0) 82%),
    linear-gradient(180deg,
               rgba(23,21,18,0.13) 0%,
               rgba(23,21,18,0.15) 26%,
               rgba(23,21,18,0.22) 52%,
               rgba(23,21,18,0.36) 76%,
               rgba(23,21,18,0.49) 100%);
}
/* En-tete plus haut. `cover` cadre par la largeur : sur un ecran large, une
   bande courte ne montre qu'une fine tranche de la photo, ce qui donne
   l'impression d'un gros plan. Augmenter la hauteur de la bande revient a
   dezoomer — la seule facon d'en montrer davantage sans deformer l'image. */
.page-hero.hero-haut{min-height:min(72vh, 760px);}
/* Bandeau d'ombre sous l'en-tete transparent : mesure faite, les liens de
   menu tombaient a 3,3:1 sur les photos les plus claires. Ce degrade ne
   couvre que la hauteur de la barre, la photo n'est pas assombrie ailleurs. */
.page-hero::after{
  content:''; position:absolute; left:0; right:0; top:0; height:130px;
  background:linear-gradient(180deg, rgba(23,21,18,0.46) 0%, rgba(23,21,18,0) 100%);
  pointer-events:none;
}
/* .wrap est ici l'enfant d'un conteneur flex : sans width:100%, il se calait
   sur la largeur de son texte et le titre partait au centre, alors que tout
   le reste du site est aligne a gauche. */
.page-hero > .wrap{position:relative; z-index:1; width:100%;}
.page-hero .section-head{margin-bottom:0;}
.page-hero h1{color:var(--blanc);}
.page-hero .eyebrow{color:var(--blanc);}
.page-hero .lede{color:#EFE9DC;}
.page-hero :focus-visible{outline:2px solid var(--sauge);}
@media (max-width:760px){
  .page-hero{min-height:auto; padding:124px 0 46px;}
  /* Sur mobile le texte occupe toute la largeur : le voile lateral ne le
     couvre plus. Voile vertical un peu plus dense (mais toujours bien plus
     leger qu'avant la relecture) pour tenir le contraste du titre blanc. */
  .page-hero::before{
    background:linear-gradient(180deg,
                 rgba(23,21,18,0.40) 0%,
                 rgba(23,21,18,0.48) 26%,
                 rgba(23,21,18,0.66) 58%,
                 rgba(23,21,18,0.78) 100%);
  }
  /* Le surtitre (12 px capitales) tombe juste sous l'en-tete, la ou le voile
     vertical est le plus leger : la bande d'ombre du haut est prolongee sur
     mobile pour le couvrir, plutot que d'assombrir toute la photo. */
  .page-hero::after{
    height:260px;
    background:linear-gradient(180deg,
                 rgba(23,21,18,0.52) 0%,
                 rgba(23,21,18,0.40) 55%,
                 rgba(23,21,18,0) 100%);
  }
  /* Meme logique sur mobile pour l'accueil (pas de surtitre a proteger ici). */
  .page-hero.voile-leger::before{
    background:linear-gradient(180deg,
                 rgba(23,21,18,0.34) 0%,
                 rgba(23,21,18,0.40) 30%,
                 rgba(23,21,18,0.54) 62%,
                 rgba(23,21,18,0.66) 100%);
  }
  .page-hero.voile-leger::after{
    height:180px;
    background:linear-gradient(180deg,
                 rgba(23,21,18,0.46) 0%,
                 rgba(23,21,18,0.26) 60%,
                 rgba(23,21,18,0) 100%);
  }
  /* Idem pour le voile intermediaire : sur mobile il reprend le voile commun,
     le texte y occupant toute la largeur. */
  .page-hero.voile-doux::before{
    background:linear-gradient(180deg,
                 rgba(23,21,18,0.40) 0%,
                 rgba(23,21,18,0.48) 26%,
                 rgba(23,21,18,0.66) 58%,
                 rgba(23,21,18,0.78) 100%);
  }
  /* Le « dezoom » n'a de sens qu'en paysage : sur mobile, `cover` cadre par la
     hauteur, donc allonger la bande ne montre pas plus de photo — elle ne
     ferait qu'occuper tout l'ecran. */
  .page-hero.hero-haut{min-height:auto;}
}

/* ---------- Bandeau de chiffres sous la photo d'accueil ---------- */
/* Les trois chiffres etaient poses sur la photo plein ecran. La photo est
   devenue une bande courte : ils descendent sur le creme, ou ils se lisent
   sans voile et sans assombrir la page. */
.chiffres-band{padding:56px 0 8px; background:var(--pierre);}
.chiffres-band .facts{margin-top:0;}
/* Bouton clair pose sur une photo : le contour sombre y disparaissait. */
.btn-outline-clair{border:1px solid rgba(251,248,242,0.55); color:var(--blanc);}
.btn-outline-clair:hover{border-color:var(--blanc); background:rgba(251,248,242,0.12);}
@media (max-width:760px){ .chiffres-band{padding:40px 0 4px;} }


/* ---------- Calendrier des disponibilites ---------- */
/* Le bloc reste masque tant que le flux iCal n'a rien renvoye : mieux vaut
   pas de calendrier qu'un calendrier qui annonce tout libre a tort. */
.dispo{margin-top:56px;}
.dispo-legende{display:flex; gap:22px; flex-wrap:wrap; align-items:center;
  margin:0 0 26px; font-size:0.82rem; color:var(--gres);}
.dispo-legende span{display:inline-flex; align-items:center; gap:8px;}
.dispo-puce{width:15px; height:15px; border-radius:3px; border:1px solid rgba(23,21,18,0.18);}
.dispo-puce.libre{background:var(--blanc);}
.dispo-puce.pris{background:var(--vert); border-color:var(--vert);}
.dispo-grille{display:grid; grid-template-columns:repeat(4,1fr); gap:26px 22px;}
.dispo-mois h3{
  font-size:0.78rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--vert);
  margin:0 0 10px; padding-bottom:8px; border-bottom:1px solid rgba(23,21,18,0.14);
}
.dispo-jours{display:grid; grid-template-columns:repeat(7,1fr); gap:2px;}
.dispo-jours .ent{
  font-size:0.62rem; text-transform:uppercase; letter-spacing:0.04em;
  color:var(--gres); text-align:center; padding-bottom:4px;
}
.dispo-jours .j{
  aspect-ratio:1; display:flex; align-items:center; justify-content:center;
  font-size:0.76rem; border-radius:3px; background:var(--blanc);
  border:1px solid rgba(23,21,18,0.10); color:var(--noir);
}
.dispo-jours .j.vide{background:none; border:none;}
.dispo-jours .j.passe{opacity:0.28;}
.dispo-jours .j.pris{background:var(--vert); border-color:var(--vert); color:var(--blanc);}
/* Jour de changement (precision AF 05/09) : le groupe part le matin, le
   suivant peut arriver l'apres-midi. Ni pris, ni libre : la case est coupee
   en diagonale, matin occupe / soiree libre. */
.dispo-jours .j.depart{
  /* Le vert plein rendait le chiffre illisible sur la moitie sombre : la
     moitie occupee est posee en transparence, le numero reste lisible des
     deux cotes de la diagonale. */
  background:linear-gradient(135deg, rgba(74,102,80,0.42) 0 48%, var(--blanc) 52% 100%);
  border-color:rgba(23,21,18,0.18); color:var(--noir);
}
.dispo-puce.depart{
  background:linear-gradient(135deg, rgba(74,102,80,0.42) 0 48%, var(--blanc) 52% 100%);
  border-color:rgba(23,21,18,0.18);
}
.dispo-note{margin:26px 0 0; font-size:0.82rem; color:var(--gres); max-width:64ch;}
/* Avertissement de l'apercu : n'existe que quand demande.js dessine les dates
   de demonstration (fichier ouvert en local ou ?demo=1), jamais en ligne. */
.dispo-demo{
  margin:22px 0 0; padding:10px 14px; max-width:64ch; text-align:left;
  font-size:0.82rem; font-style:italic; color:var(--gres);
  border-left:3px solid var(--sauge); background:rgba(197,203,187,0.22);
}
@media (max-width:1100px){ .dispo-grille{grid-template-columns:repeat(3,1fr);} }
@media (max-width:820px){ .dispo-grille{grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){
  .dispo-grille{grid-template-columns:1fr; gap:22px;}
  /* Un seul mois par ligne : les cases doublent de taille, les initiales
     des jours (9.9px) devenaient minuscules a cote. */
  .dispo-jours .ent{font-size:0.8rem;}
  .dispo-jours .j{font-size:0.86rem;}
}