étant un conteneur sans dimensions propres, les règles de
couverture posées sur , faute d'être l'en-tête d'une section —
prenait la bonne taille et la fonte du texte courant. Sur les h2, cette
déclaration ne change rien : ils l'avaient déjà. */
.t-hero, .t-xl, .t-lg{ font-family: var(--display); }
.t-hero{ font-size: clamp(2.3rem, 5.8vw, 4.2rem); font-weight: 400; line-height: 1.06; letter-spacing: -.02em; }
.t-xl{ font-size: clamp(1.85rem, 4vw, 2.9rem); font-weight: 400; line-height: 1.12; letter-spacing: -.015em; }
.t-lg{ font-size: clamp(1.45rem, 2.7vw, 2rem); font-weight: 400; line-height: 1.18; }
.t-md{ font-size: clamp(1.15rem, 1.9vw, 1.4rem); font-weight: 500; line-height: 1.25; }
.t-sm{ font-size: 1.02rem; font-weight: 600; line-height: 1.35; }
p{ margin: 0; text-wrap: pretty; }
.lede{ font-size: clamp(1.05rem, 1.5vw, 1.2rem); line-height: 1.6; color: var(--ink-70); max-width: 52ch; }
.note{ font-size: .88rem; color: var(--ink-45); line-height: 1.6; }
/* Sur-titre en petites capitales espacées — le repère de section */
.eyebrow{
font-family: var(--body);
font-size: .7rem; font-weight: 700;
letter-spacing: .22em; text-transform: uppercase;
color: var(--sage-deep);
}
.eyebrow.on-dark{ color: var(--on-dark-70); }
.eyebrow.on-clay{ color: var(--clay-deep); }
.num{ font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
/* ----------------------------------------------------------- 4. Gabarit */
.shell{ width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.band{ padding-block: var(--band); }
.band-tight{ padding-block: clamp(28px, 3.5vw, 46px); }
.band-cream{ background: var(--cream); }
.band-sage{ background: var(--sage-bg); }
.band-dark{ background: var(--ink-bg); color: var(--on-dark); }
.band-dark .lede, .band-dark .note{ color: var(--on-dark-70); }
.stack{ display: flex; flex-direction: column; }
.stack-xs{ gap: 8px; } .stack-sm{ gap: 14px; }
.stack-md{ gap: 24px; } .stack-lg{ gap: 26px; }
.head{ display: flex; flex-direction: column; gap: 10px; max-width: 46ch; margin-bottom: clamp(20px, 2.4vw, 32px); }
.head.is-centered{ margin-inline: auto; text-align: center; align-items: center; }
.head.is-centered .lede{ margin-inline: auto; }
/* ---------------------------------------------------------- 5. Boutons */
.btn{
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
padding: 16px 34px;
font-family: var(--body); font-size: .94rem; font-weight: 700; letter-spacing: .015em;
border: 1.5px solid transparent; border-radius: var(--round);
cursor: pointer; white-space: nowrap;
transition: background .24s var(--ease), color .24s var(--ease),
border-color .24s var(--ease), transform .24s var(--ease),
box-shadow .24s var(--ease);
}
.btn:hover{ transform: translateY(-2px); }
.btn:active{ transform: translateY(0); }
.btn-primary{ background: var(--sage-deep); color: #fff; box-shadow: 0 6px 18px -8px rgba(69,102,76,.7); }
.btn-primary:hover{ background: var(--ink); box-shadow: 0 10px 26px -10px rgba(56,67,76,.75); }
/* Dans le bandeau, l'appel principal vire au marron de la charte plutôt
qu'à l'ardoise : sur une photographie, le marron se rattache à la maison,
l'ardoise à rien. */
.hero .btn-primary:hover{ background: var(--brown-bg); box-shadow: 0 10px 26px -10px rgba(75,59,51,.8); }
.btn-clay{ background: var(--clay-deep); color: #fff; box-shadow: 0 6px 18px -8px rgba(178,112,63,.7); }
.btn-clay:hover{ background: var(--ink); box-shadow: 0 10px 26px -10px rgba(56,67,76,.75); }
.btn-outline{ background: transparent; color: var(--ink); border-color: var(--ink-45); }
.btn-outline:hover{ border-color: var(--ink); background: var(--ink); color: #fff; }
.btn-light{ background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.5); backdrop-filter: blur(6px); }
.btn-light:hover{ background: #fff; color: var(--ink); border-color: #fff; }
.btn-white{ background: #fff; color: var(--ink); box-shadow: 0 8px 24px -10px rgba(20,26,30,.65); }
.btn-white:hover{ background: var(--cream); box-shadow: 0 12px 30px -10px rgba(20,26,30,.8); }
.btn-sm{ padding: 10px 20px; font-size: .82rem; }
.btns{ display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.arrow-link{
display: inline-flex; align-items: center; gap: 9px;
font-size: .9rem; font-weight: 700; color: var(--sage-deep);
transition: gap .24s var(--ease), color .24s var(--ease);
}
.arrow-link:hover{ gap: 15px; color: var(--ink); }
.band-dark .arrow-link{ color: var(--on-dark); }
/* -------------------------------------------------- 5b. Rideau d'intro */
/* Le lac de Vouglans plein écran, le logo au centre, deux secondes, puis le
rideau coulisse vers le haut. La page entière est déjà dans le DOM derrière
lui : c'est un calque décoratif, pas un écran de préchargement.
Le départ est joué par le CSS, pas par le script. C'est délibéré : si le
JavaScript échoue ou n'arrive jamais, le rideau s'en va quand même et la
page reste utilisable. Le script ne fait que verrouiller le défilement
pendant les deux secondes et retirer le calque une fois qu'il est sorti. */
.curtain{
display: grid; place-items: center;
position: fixed; inset: 0; z-index: 300;
overflow: hidden;
background: var(--ink);
animation: curtain-leave .9s cubic-bezier(.76,0,.24,1) 2s both;
}
@keyframes curtain-leave{
from{ transform: translateY(0); }
to{ transform: translateY(-100%); }
}
.curtain-bg{ position: absolute; inset: 0; }
.curtain-bg picture,
.curtain-bg img{ display: block; width: 100%; height: 100%; }
.curtain-bg img{
object-fit: cover;
/* 22 % et non le centre : c'est ce qui garde le ciel et la ligne de crêtes
quel que soit le format de l'écran. */
object-position: 50% 22%;
animation: curtain-zoom 3s var(--ease) both;
}
@keyframes curtain-zoom{ from{ transform: scale(1); } to{ transform: scale(1.06); } }
/* Le voile reste très léger — la photographie est un plein été et c'est tout
son intérêt. Le contraste du logo ne vient pas de lui mais du halo. */
.curtain-veil{ position: absolute; inset: 0; background: var(--ink); opacity: .14; }
/* Halo sombre sous le seul logo. Un voile uniforme assez épais pour détacher
le lettrage éteindrait le lac ; ce dégradé local assombrit là où il faut et
laisse la photographie intacte partout ailleurs. Mesuré : 4,8:1 au centre. */
.curtain-mark{ position: relative; display: grid; place-items: center; }
/* -170 % : le halo doit déborder très largement du lettrage, sinon on voit son
bord. À cette taille il couvre un peu plus du tiers de la hauteur d'écran et
son dégradé s'éteint avant les rives. */
.curtain-mark::before{
content: "";
position: absolute; inset: -170%;
background: radial-gradient(closest-side, rgba(56,67,76,.72), rgba(56,67,76,0) 100%);
pointer-events: none;
}
.curtain-mark img{
position: relative;
width: auto; height: clamp(6.5rem, 17vw, 10.5rem);
animation: curtain-mark .7s var(--ease) both;
}
@keyframes curtain-mark{
from{ opacity: 0; transform: translateY(12px); }
to{ opacity: 1; transform: translateY(0); }
}
body.is-curtained{ overflow: hidden; }
/* ---------------------------------------------------------- 6. En-tête */
.masthead{
position: fixed; top: 0; left: 0; right: 0; z-index: 90;
padding-block: 16px;
transition: background .35s var(--ease), padding .35s var(--ease),
box-shadow .35s var(--ease);
}
.masthead.is-stuck{
background: rgba(255,255,255,.92);
backdrop-filter: saturate(160%) blur(16px);
-webkit-backdrop-filter: saturate(160%) blur(16px);
padding-block: 9px;
box-shadow: 0 1px 0 var(--line);
}
/* Menu ouvert, l'en-tête rend son filtre. Un élément filtré devient le bloc
conteneur de ses descendants en position fixe : le panneau du menu, qui est
son enfant et se pose en inset: 0, remplissait alors l'EN-TÊTE — 144 px de
haut — au lieu de l'écran. Le bogue ne se voyait qu'une fois le bandeau
collé, c'est-à-dire dès qu'on avait défilé.
Le filtre n'a de toute façon plus rien à flouter : le panneau blanc est
devant. « .is-stuck » est répété pour passer devant la règle ci-dessus, qui
a la même spécificité et vient avant. */
body.menu-ouvert .masthead.is-stuck{
backdrop-filter: none; -webkit-backdrop-filter: none;
}
.masthead-in{ display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.brand img{ height: 50px; width: auto; transition: height .35s var(--ease); }
.brand .logo-light{ filter: drop-shadow(0 2px 10px rgba(30,38,44,.55)); }
.masthead.is-stuck .brand img{ height: 40px; }
/* Logo blanc tant que le bandeau est sous l'en-tête, encre une fois collé */
.brand .logo-dark{ display: none; }
.masthead.is-stuck .brand .logo-dark{ display: block; }
.masthead.is-stuck .brand .logo-light{ display: none; }
.nav{ display: flex; align-items: center; gap: clamp(16px, 2.2vw, 34px); }
/* « :not(.btn) » sur toutes les règles de couleur du menu : l'appel
« Réserver » du panneau est un comme les autres entrées, et ces règles
lui prenaient sa couleur. Une fois le bandeau collé, il s'affichait en
--ink-70 sur son propre vert — 1,13:1, illisible. Empiler la spécificité
aurait marché ; exclure les boutons dit ce qu'on veut dire. */
.nav a:not(.btn){
font-size: .88rem; font-weight: 500; color: #fff; white-space: nowrap;
position: relative; padding-block: 5px;
transition: color .22s var(--ease);
}
.masthead.is-stuck .nav a:not(.btn){ color: var(--ink-70); }
.nav a:not(.btn)::after{
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
background: currentColor; transform: scaleX(0); transform-origin: left;
transition: transform .26s var(--ease);
}
.nav a:not(.btn):hover::after, .nav a.is-active::after{ transform: scaleX(1); }
.masthead.is-stuck .nav a:not(.btn):hover,
.masthead.is-stuck .nav a.is-active:not(.btn){ color: var(--ink); }
/* Le logo et la commande passent devant le panneau du menu. Sans cela ils
restaient dessous : le panneau est un enfant de l'en-tête et porte un
z-index de 88, eux n'étaient pas positionnés du tout — dans la pile, un
descendant positionné passe toujours devant ce qui ne l'est pas. La croix
de fermeture était donc dessinée, blanche et bien tournée, mais recouverte,
et le clic tombait sur le panneau.
C'est d'ailleurs ce que le panneau prévoyait : ses 104 px de rembourrage en
haut ménagent exactement la place de la barre d'en-tête. */
.brand, .masthead-tail{ position: relative; z-index: 92; }
/* Menu ouvert, le logo s'efface — mais sa boîte reste. .masthead-in répartit
ses enfants en space-between : le retirer du flux aurait renvoyé la croix
contre le bord gauche. visibility le sort aussi de l'ordre de tabulation et
de l'arbre d'accessibilité, ce que opacity: 0 n'aurait pas fait. */
body.menu-ouvert .brand{ visibility: hidden; }
.masthead-tail{ display: flex; align-items: center; gap: 12px; }
.lang{ display: flex; gap: 1px; font-size: .74rem; }
.lang a{
padding: 5px 8px; border-radius: var(--round); font-weight: 700;
letter-spacing: .06em; color: rgba(255,255,255,.75);
transition: color .2s var(--ease), background .2s var(--ease);
}
.masthead.is-stuck .lang a{ color: var(--ink-45); }
.lang a:hover{ color: #fff; }
.masthead.is-stuck .lang a:hover{ color: var(--ink); }
.lang a[aria-current="true"]{ background: rgba(255,255,255,.2); color: #fff; }
.masthead.is-stuck .lang a[aria-current="true"]{ background: var(--sage-bg); color: var(--sage-deep); }
.masthead .btn-head{
background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.55);
backdrop-filter: blur(6px);
}
/* Deux états, deux survols. Tant que le bandeau est posé sur la photographie,
le bouton est un verre dépoli : au survol il se remplit de blanc, seule
couleur qui tienne sur une image dont on ignore la teinte sous le curseur.
Une fois le bandeau devenu blanc au défilement, le bouton est vert plein et
vire au marron de la charte — blanc sur #4B3B33, 10,6:1.
La dernière ligne vise le jumeau du bouton, celui qui n'apparaît que dans
le menu déplié sous 1081 px : lui n'est jamais transparent, il suit le vert. */
.masthead .btn-head:hover{ background: #fff; color: var(--ink); border-color: #fff; }
.masthead.is-stuck .btn-head{ background: var(--sage-deep); color: #fff; border-color: transparent; }
.masthead.is-stuck .btn-head:hover{ background: var(--brown-bg); }
.masthead .nav-cta .btn-primary:hover{ background: var(--brown-bg); }
.burger{
display: none; width: 44px; height: 44px; padding: 0; flex: none;
background: rgba(255,255,255,.14); border: 1.5px solid rgba(255,255,255,.5);
border-radius: var(--round); cursor: pointer; align-items: center; justify-content: center;
backdrop-filter: blur(6px);
}
/* Sur la bande blanche, la pastille passe au vert — le même que « Réserver »
à côté d'elle, les deux commandes forment une paire.
Et menu ouvert, elle y passe aussi, quel que soit l'état du bandeau : le
panneau du menu est blanc et se glisse DERRIÈRE l'en-tête (z-index 88
contre 90). Les barres, blanches, se retrouvaient blanc sur blanc — la
croix de fermeture était strictement invisible. */
.masthead.is-stuck .burger,
.burger[aria-expanded="true"]{
background: var(--sage-deep); border-color: transparent; backdrop-filter: none;
}
.burger i{ display: block; width: 17px; height: 1.5px; background: #fff; position: relative; transition: background .2s; }
.masthead.is-stuck .burger i, .masthead.is-stuck .burger i::before, .masthead.is-stuck .burger i::after,
.burger[aria-expanded="true"] i::before, .burger[aria-expanded="true"] i::after{ background: #fff; }
.burger i::before, .burger i::after{
content: ""; position: absolute; left: 0; width: 17px; height: 1.5px; background: #fff;
transition: transform .28s var(--ease), top .22s var(--ease);
}
.burger i::before{ top: -6px; } .burger i::after{ top: 6px; }
.burger[aria-expanded="true"] i{ background: transparent !important; }
.burger[aria-expanded="true"] i::before{ top: 0; transform: rotate(45deg); }
.burger[aria-expanded="true"] i::after{ top: 0; transform: rotate(-45deg); }
@media (max-width: 1080px){
.burger{ display: inline-flex; }
/* Menu plein écran : un panneau posé hors du viewport en position fixe
ajoute une barre de défilement horizontale que overflow-x ne rattrape pas. */
.nav{
position: fixed; inset: 0; width: 100%;
background: var(--white);
flex-direction: column; align-items: stretch; justify-content: flex-start;
gap: 0; padding: 104px var(--gutter) calc(40px + env(safe-area-inset-bottom));
overflow-y: auto; z-index: 88;
opacity: 0; visibility: hidden;
transition: opacity .26s var(--ease), visibility 0s .26s;
}
.nav.is-open{ opacity: 1; visibility: visible; transition: opacity .26s var(--ease), visibility 0s; }
.nav a:not(.btn){
font-family: var(--display); font-size: 1.45rem; font-weight: 400; color: var(--ink);
padding-block: 17px; border-bottom: 1px solid var(--line-soft);
}
.nav a:not(.btn)::after{ display: none; }
.nav .nav-cta{ margin-top: 26px; border: 0; }
.nav .nav-cta .btn{ width: 100%; }
}
@media (min-width: 1081px){ .nav .nav-cta{ display: none; } }
@media (max-width: 620px){ .masthead-tail .btn-head{ display: none; } }
/* Sections sur fond sombre. Plutôt que de réécrire chaque composant, on
redéfinit les jetons dans la portée de la bande : cartes, traits, puces et
boutons suivent automatiquement. */
.band-brown, .band-green{
--ink: #FFFFFF;
--ink-70: rgba(255,255,255,.80);
/* Relevé de .58 à .72 le 22 septembre 2026. Les petites mentions — intitulés
de case, notes sous une ligne d'option, étiquettes de coordonnées — sont
en capitales de 11,5 px : à .58 elles tombaient à 3,55:1 sur le voile
clair d'une case, sous le seuil de 4,5:1 que demande un texte de cette
taille. À .72 elles le passent sans se confondre avec --ink-70. */
--ink-45: rgba(255,255,255,.72);
--line: rgba(255,255,255,.20);
--line-soft: rgba(255,255,255,.12);
--white: rgba(255,255,255,.07);
--cream: rgba(255,255,255,.08);
--sage-bg: rgba(255,255,255,.10);
--clay-bg: rgba(255,255,255,.10);
--lake-bg: rgba(255,255,255,.10);
color: #FFFFFF;
}
/* Un aplat de cette taille se lit comme un bloc imprimé. Deux couches très
discrètes lui rendent de la matière : un grain de papier — bruit fractal
désaturé, en SVG intégré, aucun fichier ni requête de plus — et un dégradé
vertical qui éclaire le haut et assombrit le bas. Les deux sont volontairement
à la limite du visible : au-delà, on ajoute du bruit là où les photographies
doivent parler seules. */
.band-brown, .band-green{
background-image: var(--grain), var(--profondeur);
background-repeat: repeat, no-repeat;
background-size: 160px 160px, 100% 100%;
}
.band-brown{ background-color: var(--brown-bg); --sage: #D7B79A; --sage-deep: #E8CFB8; --clay: #E0A97C; --clay-deep: #EDC3A0; }
.band-green{ background-color: var(--green-bg); --sage: #A8C6AC; --sage-deep: #C6DCC8; --clay: #DCAF86; --clay-deep: #E9C7A6; }
/* Contact : les accents virent au marron, pour trancher avec le fond vert */
/* --clay-deep et non --clay : sur le vert du contact, le terre cuite de
base ne donnait que 4,22:1 pour un texte de 11 px. --clay-deep, déjà
dans la charte, en donne 5,29. */
#contact .eyebrow{ color: var(--clay-deep); }
#contact .btn-primary{ background: var(--brown-bg); color: #fff; box-shadow: 0 8px 22px -10px rgba(0,0,0,.55); }
#contact .btn-primary:hover{ background: #5E4A3F; }
#contact .choice input:checked + span{ background: var(--brown-bg); color: #fff; border-color: var(--brown-bg); }
#contact .field input:focus, #contact .field select:focus, #contact .field textarea:focus{
border-color: var(--clay); box-shadow: 0 0 0 4px rgba(220,175,134,.22);
}
#contact .hosts-card{ background: var(--brown-bg); }
#contact .hosts-card .ph{ background: rgba(255,255,255,.16); }
#contact .contact-list .v a:hover{ color: var(--clay); }
#contact .acc summary:hover, #contact .acc[open] summary{ color: var(--clay); }
#contact .cal .busy{ background: var(--brown-bg); color: #fff; }
/* « Les disponibilités » prend le chemin inverse des autres boutons du bloc :
blanc au repos, marron au survol. Il est seul au-dessus du formulaire, sur
le vert — le blanc l'y détache mieux que le marron, qui s'y enfonçait.
Le sélecteur passe par .dispos pour ne pas emporter le bouton d'envoi du
formulaire, qui reste marron ; « #contact .dispos .btn-primary » (1,2,0)
l'emporte sur « #contact .btn-primary » (1,1,0) juste au-dessus. */
#contact .dispos .btn-primary{
background: #FFFFFF; color: var(--brown-bg);
box-shadow: 0 8px 22px -10px rgba(0,0,0,.45);
}
#contact .dispos .btn-primary:hover{
background: var(--brown-bg); color: #FFFFFF;
box-shadow: 0 12px 28px -10px rgba(0,0,0,.6);
}
/* Le bouton plein doit rester lisible sur ces fonds */
.band-brown .btn-primary, .band-green .btn-primary{ background: #FFFFFF; color: var(--ink-bg); box-shadow: 0 8px 22px -10px rgba(0,0,0,.6); }
.band-brown .btn-primary:hover, .band-green .btn-primary:hover{ background: rgba(255,255,255,.88); }
.band-brown .btn-outline, .band-green .btn-outline{ color: #fff; border-color: rgba(255,255,255,.5); }
.band-brown .btn-outline:hover, .band-green .btn-outline:hover{ background: #fff; color: var(--ink-bg); border-color: #fff; }
/* Les images gardent leur fond d'attente neutre, pas la teinte de la bande */
.band-brown .duo-media, .band-green .duo-media,
.band-brown .trio-img, .band-green .trio-img,
.band-brown .carousel, .band-green .carousel,
.band-brown .mosaic button, .band-green .mosaic button{ background: rgba(255,255,255,.08); }
/* La tuile de titre, elle, se démarque par un simple voile clair */
.band-brown .band-tile, .band-green .band-tile{ background: rgba(255,255,255,.09); }
/* Les cases qui portent le titre de section se détachent en vert, lettres
claires — « Les intérieurs » et « Le Jardin » dans « La maison », et la case
de titre des Activités. Elles l'avaient été en crème le temps d'un essai le
22 septembre ; le client les a ramenées au vert le jour même.
« .band-tile.is-green » suffit pour les deux premières : elle vient après
« .band-brown .band-tile » dans la feuille et l'emporte à spécificité égale.
La case des Activités, elle, n'a pas cette classe : d'où la règle qui suit. */
.band-brown .around-tile{
background: var(--green-bg);
/* Le sur-titre suit --sage-deep, qui vaut un beige chaud dans la portée
d'une bande marron. Sur une case verte il jurait : on lui rend le vert
clair des deux cases de « La maison ». 5,8:1 sur #3A5340. */
--sage-deep: #C6DCC8;
}
/* Les jours occupés du calendrier restent lisibles */
.band-green .cal{ background: rgba(255,255,255,.06); }
.band-green .cal .busy{ background: var(--clay); color: var(--ink-bg); }
.band-green .cal .free{ color: rgba(255,255,255,.8); }
/* Champs de formulaire sur fond sombre */
.band-green .field input, .band-green .field select, .band-green .field textarea,
.band-green .choice span{ background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.25); color: #fff; }
.band-green .field input::placeholder, .band-green .field textarea::placeholder{ color: rgba(255,255,255,.5); }
.band-green .field input:focus, .band-green .field select:focus, .band-green .field textarea:focus{
border-color: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.14);
}
.band-green .choice input:checked + span{ background: #fff; color: var(--green-bg); border-color: #fff; }
.band-green .hosts-card{ background: rgba(255,255,255,.09); }
.band-green .hosts-card .ph{ background: rgba(255,255,255,.14); }
.band-green .hosts-card .ph-initials{ color: #fff; }
.band-green .acc-price, .band-brown .acc-price{ color: var(--sage-deep); }
/* ---------------------------------------------------------- 7. Bandeau */
.hero{ position: relative; isolation: isolate; background: var(--ink-bg); }
.hero-media{ position: absolute; inset: 0; z-index: 0; overflow: hidden; }
/* Les trois vues sont empilées au même endroit et se relaient en fondu. Seule
celle qui porte `is-on` est visible ; sans JavaScript, c'est la première et
elle le reste — le bandeau devient simplement une image fixe. */
.hero-media picture{
position: absolute; inset: 0;
opacity: 0;
transition: opacity .9s var(--ease);
}
.hero-media picture.is-on{ opacity: 1; }
.hero-media img{ width: 100%; height: 100%; object-fit: cover; }
/* Au téléphone, l'écran est haut et étroit : le cadrage centré de la première
vue ne gardait qu'une bande médiane, et la maison — qui occupe la moitié
gauche de la photographie — tombait hors champ. Le cadrage recule donc vers
la gauche, ce qui fait entrer la maison par la droite. */
@media (max-width: 760px){
.hero-media picture:first-child img{ object-position: 35% 50%; }
}
.hero-media::after{
content: ""; position: absolute; inset: 0;
background:
linear-gradient(180deg, rgba(40,48,54,.52) 0%, rgba(40,48,54,.1) 26%,
rgba(40,48,54,.5) 66%, rgba(40,48,54,.84) 100%),
linear-gradient(96deg, rgba(40,48,54,.42) 0%, rgba(40,48,54,.05) 55%,
rgba(40,48,54,0) 100%);
}
.hero-in{
position: relative; z-index: 1;
min-height: 100vh;
min-height: 100svh;
display: flex; flex-direction: column; justify-content: flex-end;
padding-block: 150px clamp(38px, 5vw, 58px);
color: #fff;
}
.hero h1{ margin-bottom: 20px; max-width: 14em; text-shadow: 0 1px 34px rgba(30,38,44,.4); }
.hero .lede{ color: rgba(255,255,255,.94); margin-bottom: 32px; max-width: 44ch; text-shadow: 0 1px 24px rgba(30,38,44,.4); }
.hero .btns{ margin-bottom: 30px; }
.hero-foot{
display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px;
padding-top: 26px; border-top: 1px solid var(--line-dark);
}
.hero-facts{ font-size: .86rem; color: rgba(255,255,255,.8); }
/* Au téléphone, le bas du bandeau est réglé d'un bloc : le chapô se resserre,
les deux boutons tiennent sur une ligne — ils ne s'étirent plus l'un sous
l'autre — et l'ensemble remonte, pour que la barre des avis Google ne colle
plus au bord de l'écran. Le rembourrage du bas fait le gros du travail :
la colonne est calée en bas, on ne remonte pas la note en serrant ce qui
est au-dessus d'elle, on remonte tout. */
@media (max-width: 760px){
.hero-in{ padding-block: 110px clamp(56px, 13vw, 84px); }
.hero h1{ margin-bottom: 14px; }
.hero .lede{ font-size: .95rem; margin-bottom: 22px; max-width: 32ch; }
.hero .btns{ flex-wrap: nowrap; gap: 10px; margin-bottom: 22px; }
.hero .btns .btn{
flex: 1 1 0; min-width: 0; padding-inline: 14px;
font-size: .84rem; white-space: nowrap; text-align: center;
justify-content: center;
}
.hero-foot{ padding-top: 16px; gap: 8px 18px; }
}
/* Le repère de défilement a disparu : d'abord le mot « Découvrir », puis le
trait. Ses règles sont parties avec lui. */
/* --------------------------------------------- 7b. Bandes défilantes */
/* Deux rangées se changent en bande sans fin au téléphone : les repères sous
le bandeau, et les bulles du parc. Le principe est le même dans les deux
cas — deux copies identiques côte à côte, translatées ensemble de leur
propre largeur plus l'écart. Quand la première a fini de sortir par la
gauche, la seconde occupe très exactement sa place de départ : l'animation
peut repartir de zéro, personne ne voit la couture.
Sur grand écran, la copie n'existe pas et la première reprend sa grille :
ces règles ne vivent que dans la fenêtre du téléphone. */
/* Deux sélecteurs et non un : la piste EST la grille — .facts, .chips — et
ces deux-là déclarent leur propre display. À spécificité égale, c'est la
dernière écrite qui l'emporte, et elles sont plus bas dans la feuille.
« .ruban > » suffit à passer devant, quel que soit l'ordre. */
.ruban > .ruban-copie{ display: none; }
@keyframes ruban-defile{
from{ transform: translateX(0); }
to{ transform: translateX(calc(-100% - var(--rg))); }
}
@media (max-width: 760px){
.ruban{
display: flex; gap: var(--rg); overflow: hidden;
/* La bande touche les deux bords de l'écran : elle sort de la coquille,
sinon elle s'arrêterait sur la gouttière et l'on verrait le départ. */
margin-inline: calc(-1 * var(--gutter));
/* Les deux extrémités s'effacent, pour que rien n'apparaisse ni ne
disparaisse d'un coup au ras du cadre. */
-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ruban > .ruban-piste{
display: flex; flex: none; width: max-content;
grid-template-columns: none; gap: var(--rg);
animation: ruban-defile var(--rd) linear infinite;
}
.ruban > .ruban-copie{ display: flex; }
/* Les repères gardent leur corps de texte ; seule leur largeur est fixée,
à ce qu'elle valait dans la grille de deux colonnes. */
.facts-ruban{ --rg: clamp(14px, 2vw, 28px); --rd: 30s; }
.facts-ruban .fact{
flex: none;
width: calc((100vw - 2 * var(--gutter) - var(--rg)) / 2);
}
/* Les bulles gardent leur corps, leur rembourrage et leur écart. Leur
largeur, elle, suit le texte : dans une bande qui défile, une bulle
étirée à la moitié de l'écran n'a plus de sens. */
.chips-ruban{ --rg: 8px; --rd: 26s; }
.chips-ruban .chip{ flex: none; font-size: .8rem; padding: 10px 12px; }
}
/* Qui a demandé moins de mouvement n'a pas demandé une bande qui tourne. */
@media (prefers-reduced-motion: reduce){
.ruban > .ruban-piste{ animation: none; }
.ruban{ overflow-x: auto; }
}
/* ---------------------------------------------------------- 8. Repères */
/* Quatre repères depuis le retrait de « 4 km du lac » : deux rangs de deux
dès que la ligne ne tient plus, jamais un chiffre seul en bout de rang. */
.facts{ display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2vw, 28px); }
.fact{ text-align: center; }
.fact b{
display: block; font-family: var(--display); font-size: clamp(2rem, 3.6vw, 2.9rem);
font-weight: 400; line-height: 1; margin-bottom: 8px; color: var(--sage-deep);
font-variant-numeric: tabular-nums;
}
.fact span{ font-size: .8rem; color: var(--ink-70); line-height: 1.4; display: block; }
@media (max-width: 860px){ .facts{ grid-template-columns: repeat(2, 1fr); row-gap: 30px; } }
/* ------------------------------------------------------------ 9. Blocs */
/* Le motif de référence : un bandeau de titre pleine largeur — sur-titre
au-dessus du titre — puis des rangs de trois cellules où images et blocs
de texte alternent de place d'un rang à l'autre. */
.band-tile{
border-radius: var(--soft);
padding: clamp(22px, 2.6vw, 34px) clamp(24px, 3vw, 40px);
display: flex; flex-direction: column; gap: 4px;
}
/* Le vert de la case ne dépend plus de la bande qui la porte : elle
redéfinit les jetons dans sa propre portée, comme les bandes sombres.
Sur-titre et titre suivent tout seuls, sur fond clair comme sur fond
sombre. */
.band-tile.is-green{
background: var(--green-bg);
--ink: #FFFFFF;
--ink-70: rgba(255,255,255,.80);
--ink-45: rgba(255,255,255,.58);
--sage-deep: #C6DCC8;
color: #FFFFFF;
}
.band-tile h2{ color: var(--ink); }
/* Variante en ligne : le titre à gauche, l'appel à droite, et l'un sous
l'autre dès que la ligne ne tient plus. Le titre prend la place qui reste,
le bouton garde la sienne. */
.band-tile.is-row{
flex-direction: row; align-items: center; justify-content: space-between;
gap: 16px 32px; flex-wrap: wrap; text-align: left;
}
.band-tile.is-row .t-lg{ flex: 1 1 360px; color: var(--ink); }
.band-tile.is-row .btn{ flex: none; }
/* Sur une ligne, le titre tient la gauche et l'appel la droite. Dès qu'ils
s'empilent, « space-between » n'a plus rien à répartir — chaque ligne n'a
qu'un élément, et il se collerait à gauche. On centre alors les deux. */
@media (max-width: 680px){
.band-tile.is-row{ justify-content: center; text-align: center; }
.band-tile.is-row .t-lg{ flex: 0 1 auto; }
}
.band-tile .note{ margin-top: 8px; max-width: 64ch; }
.trio{
display: grid; grid-template-columns: repeat(3, 1fr);
gap: clamp(14px, 1.8vw, 24px); align-items: center;
}
.trio-img{
border-radius: var(--soft); overflow: hidden; position: relative;
aspect-ratio: 4/3; background: var(--cream);
}
.trio-img picture{ position: absolute; inset: 0; }
.trio-img img{ width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.trio-img:hover img{ transform: scale(1.03); }
/* Une vignette qui ouvre sa suite en grand est un bouton, pas une boîte : le
clavier doit pouvoir l'atteindre et la touche Entrée l'ouvrir. Il lui faut
alors se défaire de ce qu'un bouton porte par défaut. */
button.trio-img{
display: block; width: 100%; padding: 0; border: 0;
font: inherit; color: inherit; cursor: zoom-in;
}
/* Le nombre de vues, en bas à droite de la vignette. Elle ne reçoit pas le
clic — c'est la vignette entière qui ouvre, et une pastille cliquable dans
un bouton ferait deux cibles là où il n'y en a qu'une. */
.trio-plus{
position: absolute; right: 10px; bottom: 10px; z-index: 1;
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 11px; border-radius: var(--round);
background: rgba(255,255,255,.94); color: var(--ink-bg);
font-size: .74rem; font-weight: 700; font-variant-numeric: tabular-nums;
box-shadow: 0 2px 10px rgba(20,26,30,.3);
pointer-events: none;
transition: background .2s var(--ease), color .2s var(--ease);
}
button.trio-img:hover .trio-plus{ background: var(--brown-bg); color: #FFFFFF; }
@media (max-width: 900px){
.trio{ grid-template-columns: 1fr 1fr; }
.trio-text{ grid-column: span 2; }
}
@media (max-width: 560px){
.trio{ grid-template-columns: 1fr; }
.trio-text{ grid-column: auto; }
/* Empilées, les trois cellules vont image, texte, image — dans les deux
rangs. Le balisage, lui, garde l'alternance qui fait zigzaguer le regard
sur grand écran : c'est `order` qui glisse le texte au milieu, et il faut
numéroter les trois cellules, pas seulement celles qui bougent — une
cellule sans `order` vaut zéro et passerait devant tout le monde. */
.trio.is-text-last > :nth-child(1){ order: 1; }
.trio.is-text-last > :nth-child(2){ order: 3; }
.trio.is-text-last > :nth-child(3){ order: 2; }
.trio.is-text-first > :nth-child(1){ order: 2; }
.trio.is-text-first > :nth-child(2){ order: 1; }
.trio.is-text-first > :nth-child(3){ order: 3; }
}
/* Deux colonnes simples */
.duo{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.duo.is-top{ align-items: start; }
.duo-media{ border-radius: var(--soft); overflow: hidden; position: relative; aspect-ratio: 3/2; background: var(--cream); }
.duo-media img{ width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 880px){ .duo{ grid-template-columns: 1fr; } }
/* Petites listes de points, sans paragraphes */
.points{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 13px; }
.points li{ position: relative; padding-left: 26px; font-size: .95rem; color: var(--ink-70); }
.points li::before{
content: ""; position: absolute; left: 0; top: .62em;
width: 7px; height: 7px; border-radius: 50%; background: var(--sage);
}
.points.is-clay li::before{ background: var(--clay); }
/* Puces d'équipement. Les huit tiennent sur un seul rang, occupé d'un bord à
l'autre : chacune se dimensionne sur son texte puis grandit pour combler
la ligne. Caractère et marges resserrés, c'est ce qui permet à « Terrain
de pétanque » de passer sans se couper. Quand la largeur manque — écran
étroit — elles se replient, et chaque rang reste plein. */
.chips{ display: flex; flex-wrap: wrap; gap: 6px; }
/* Pleines et vertes, comme le bandeau de titre du Jardin qui les surplombe :
la rangée se lit d'un bloc au lieu de se fondre dans le crème. Blanc sur
#3A5340, le contraste est de 8,4:1 — largement de quoi tenir à .74 rem. */
.chip{
flex: 1 1 auto; min-width: 0;
display: flex; align-items: center; justify-content: center; gap: 8px;
padding: 10px 12px; border-radius: var(--round);
white-space: nowrap; text-align: center;
background: var(--green-bg); border: 1px solid var(--green-bg);
font-size: .74rem; color: #FFFFFF;
}
/* Depuis que « La maison » est marron, le vert de la bulle ne se détache plus
de la bande : 1,26:1 entre les deux aplats, la forme disparaît. Le vert
reste — c'est lui qui a été demandé — mais un filet clair redessine le
contour. Le texte, lui, tient toujours son 8,4:1 sur le vert. */
.band-brown .chip{ border-color: rgba(255,255,255,.40); }
/* Sous mille pixels, les huit ne tiennent plus sur un rang et le repli laisse
un dernier rang dégarni, étiré d'un bord à l'autre. On passe alors à une
grille dont le nombre de colonnes divise huit : quatre, puis deux. Tous
les rangs restent pleins. */
@media (max-width: 1000px){
.chips{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.chip{ font-size: .8rem; padding: 10px 12px; }
}
@media (max-width: 700px){
.chips{ grid-template-columns: repeat(2, 1fr); }
}
/* Les deux retouches de fond par bande ont sauté : elles dataient du temps
où les bulles s'adaptaient à leur bande. Elles sont vertes partout, et
c'est « .band-cream .chip », plus spécifique, qui les repeignait en blanc. */
/* --------------------------------------------------------- 10. Galeries */
.mosaic{ display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(8px, 1vw, 12px); }
.mosaic button{
padding: 0; border: 0; background: var(--cream); cursor: zoom-in;
border-radius: 12px; overflow: hidden; aspect-ratio: 1; position: relative;
}
.mosaic img{ width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.mosaic button:hover img{ transform: scale(1.05); }
.mosaic .is-wide{ grid-column: span 2; aspect-ratio: 2/1; }
@media (max-width: 1000px){ .mosaic{ grid-template-columns: repeat(4, 1fr); } }
/* À trois colonnes, la première image en occupe deux et laisse la troisième
vide : c'est la dernière de la série qui vient la combler. Il faut numéroter
les trois groupes et non seulement celui qui bouge — une case sans `order`
vaut zéro et repasserait devant. */
@media (max-width: 620px){
.mosaic{ grid-template-columns: repeat(3, 1fr); }
.mosaic > button{ order: 3; }
.mosaic > button:first-child{ order: 1; }
.mosaic > button:last-child{ order: 2; }
}
/* margin: 0 n'est pas décoratif. La visionneuse est un , et le
navigateur lui donne d'office « margin: 1em 40px ». Posée en fixed avec
inset: 0, elle y perdait 80 px de large et 34 de haut : sur un téléphone de
390 px, la vue agrandie tombait à 279 px — plus petite que la vignette sur
laquelle on venait de cliquer. Sur grand écran la perte ne se voyait pas,
la hauteur bornait déjà l'image. */
.lightbox{
position: fixed; inset: 0; margin: 0; z-index: 120; display: none;
background: rgba(30,38,44,.95); padding: 4vmin;
/* place-items centrait chaque élément dans SA rangée, et les deux rangées
— l'image, la légende — s'étiraient pour remplir la hauteur. L'image se
retrouvait centrée dans une rangée de 510 px, donc 150 px trop haut, avec
un grand vide sous elle. align-content ramène les rangées à la hauteur de
leur contenu et centre le bloc entier. */
place-items: center; align-content: center; gap: 0;
}
.lightbox[open]{ display: grid; }
.lightbox img{
/* Un cadre fixe, et non une simple largeur maximale. Sans cela chaque vue
s'affichait à sa taille propre : dans le carrousel du parc, une vue de
768 px en 3/2 voisinait avec des 2048 px en 4/3, et l'une faisait 86 px
de moins que l'autre. Ce n'était pas la définition qui les séparait mais
le format.
Le cadre fait donc 4/3 — celui de la photothèque — large de 86vh × 4/3,
c'est-à-dire de quoi tenir toute la hauteur disponible ; sur un écran
étroit, c'est la largeur de l'écran qui l'emporte. « contain » y loge
chaque vue sans la déformer ni la rogner : celles qui ne sont pas en 4/3
gardent leurs proportions et laissent deux bandes. */
width: min(100%, calc(86vh * 4 / 3));
aspect-ratio: 4 / 3;
height: auto;
object-fit: contain; border-radius: 10px;
}
.lightbox figcaption{ color: rgba(255,255,255,.72); font-size: .85rem; text-align: center; padding-top: 16px; }
.lb-btn{
position: absolute; width: 50px; height: 50px; border-radius: var(--round);
background: rgba(255,255,255,.14); border: 0; color: #fff; cursor: pointer;
display: grid; place-items: center; transition: background .2s var(--ease);
}
.lb-btn:hover{ background: rgba(255,255,255,.3); }
/* Les deux flèches de la visionneuse passent au blanc plein, comme celles des
carrousels du site : sur le fond très sombre de la visionneuse, un disque à
14 % de blanc se voyait à peine, et c'est pourtant la commande principale —
c'est par elle qu'on parcourt les autres photographies.
La croix de fermeture garde son voile discret : elle est secondaire, et la
touche Échap comme le clic sur le fond la doublent. */
.lb-prev, .lb-next{
background: #FFFFFF; color: var(--brown-bg);
box-shadow: 0 3px 16px rgba(0,0,0,.45);
transition: background .2s var(--ease), color .2s var(--ease),
transform .2s var(--ease);
}
.lb-prev:hover, .lb-next:hover{
background: var(--brown-bg); color: #FFFFFF;
transform: translateY(-50%) scale(1.06);
}
.lb-close{ top: 3vmin; right: 3vmin; }
.lb-prev{ left: 3vmin; top: 50%; transform: translateY(-50%); }
.lb-next{ right: 3vmin; top: 50%; transform: translateY(-50%); }
.frame{ position: relative; width: 100%; aspect-ratio: 16/9; max-width: 880px; margin-inline: auto; background: var(--ink-bg); border-radius: var(--soft); overflow: hidden; }
.frame iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* ------------------------------------------------------------- 11. Avis */
.rating{
display: inline-flex; align-items: center; gap: 10px;
font-size: .88rem; font-weight: 500;
transition: opacity .2s var(--ease);
}
.rating:hover{ opacity: .75; }
.stars{ display: inline-flex; gap: 2px; color: var(--gold); flex: none; }
.stars svg{ width: 15px; height: 15px; fill: currentColor; }
.rating b{ font-weight: 700; font-variant-numeric: tabular-nums; }
.rating .muted{ color: var(--ink-45); }
.hero .rating .muted, .band-dark .rating .muted{ color: rgba(255,255,255,.78); }
.rating-pill{
display: inline-flex; align-items: center; gap: 9px;
padding: 8px 16px; border-radius: var(--round);
background: var(--cream); border: 1px solid var(--line);
font-size: .82rem; color: var(--ink-70);
transition: border-color .2s var(--ease);
}
.rating-pill .stars svg{ width: 13px; height: 13px; }
.rating-pill:hover{ border-color: var(--sage); }
.reviews{ display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.8vw, 22px); }
@media (max-width: 900px){ .reviews{ grid-template-columns: 1fr; } }
.review{
display: flex; flex-direction: column; gap: 15px;
background: var(--white); border: 1px solid var(--line);
border-radius: var(--soft); padding: 28px 26px;
transition: border-color .24s var(--ease), transform .24s var(--ease), box-shadow .24s var(--ease);
}
.review:hover{ border-color: var(--sage); transform: translateY(-3px); box-shadow: var(--lift); }
.band-cream .review, .band-sage .review{ border-color: transparent; }
.review p{ font-size: .94rem; color: var(--ink-70); flex: 1; }
.review-who{ display: flex; align-items: center; gap: 12px; }
.review-av{
width: 38px; height: 38px; border-radius: var(--round); flex: none;
background: var(--sage-bg); color: var(--sage-deep);
display: grid; place-items: center; font-weight: 700; font-size: .82rem;
}
.review-who b{ display: block; font-size: .88rem; font-weight: 700; }
.review-who span{ display: block; font-size: .77rem; color: var(--ink-45); }
.quote{ position: relative; isolation: isolate; overflow: hidden; color: #fff; }
.quote-media{ position: absolute; inset: 0; z-index: 0; }
.quote-media picture{ position: absolute; inset: 0; }
.quote-media img{ width: 100%; height: 100%; object-fit: cover; }
.quote-media::after{ content: ""; position: absolute; inset: 0; background: rgba(40,48,54,.7); }
.quote-in{ position: relative; z-index: 1; padding-block: clamp(70px, 10vw, 130px); text-align: center; }
.quote blockquote{
margin: 0 auto 24px; max-width: 24ch;
font-family: var(--display); font-weight: 400;
font-size: clamp(1.6rem, 4vw, 2.8rem); line-height: 1.24; letter-spacing: -.018em;
}
.quote cite{ font-style: normal; font-size: .88rem; color: rgba(255,255,255,.78); display: block; }
.dist{ display: grid; grid-template-columns: auto 1fr auto; gap: 10px 14px; align-items: center; max-width: 360px; }
.dist dt{ font-size: .8rem; color: var(--ink-45); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dist .bar{ height: 6px; background: var(--line); border-radius: var(--round); overflow: hidden; margin: 0; }
.dist .bar i{ display: block; height: 100%; background: var(--gold); border-radius: var(--round); }
.dist dd{ margin: 0; font-size: .8rem; color: var(--ink-45); text-align: right; min-width: 2.4ch; font-variant-numeric: tabular-nums; }
.score{ display: flex; align-items: baseline; gap: 14px; }
.score b{ font-family: var(--display); font-size: clamp(3.2rem, 7vw, 4.6rem); font-weight: 400; line-height: .88; color: var(--ink); font-variant-numeric: tabular-nums; }
.cloud{ display: flex; flex-wrap: wrap; gap: 9px; }
.cloud a{
display: inline-flex; align-items: baseline; gap: 7px;
padding: 9px 17px; border-radius: var(--round);
background: var(--white); border: 1px solid var(--line);
font-size: .86rem; color: var(--ink-70);
transition: border-color .2s var(--ease), color .2s var(--ease);
}
.cloud a:hover{ border-color: var(--sage); color: var(--ink); }
.cloud a i{ font-style: normal; font-size: .74rem; color: var(--sage-deep); font-weight: 700; font-variant-numeric: tabular-nums; }
.cloud a.is-lead{ background: var(--sage-bg); border-color: transparent; color: var(--ink); font-weight: 600; }
/* --------------------------------------------------------- 12. Formules */
/* Accordéons, comme la page « Formules & tarifs » de référence */
/* Le bouton « Les disponibilités » a été retiré le 1er octobre 2026. Ce
conteneur ne porte plus que la pastille d'avis du téléphone — et sur grand
écran, où cette pastille est masquée, il ne doit rien occuper du tout : sa
marge est donc passée dans la requête de média ci-dessous, sinon elle
creusait un vide de cinquante pixels sous un bloc sans contenu. */
.dispos{
display: flex; justify-content: center;
}
/* Deux emplacements pour une seule pastille d'avis, jamais les deux à la
fois. Sur grand écran elle est centrée sous les coordonnées, sur la carte ;
dès que les deux colonnes s'empilent — 880 px, comme .duo — elle remonte
sous le bouton des disponibilités, sans quoi elle se retrouvait au milieu
d'une page devenue très longue. Celle qui ne sert pas est en display:none,
donc absente de l'arbre d'accessibilité : aucun lien en double. */
.dispos-avis{ display: none; }
@media (max-width: 880px){
.dispos{
flex-direction: column; align-items: center; gap: 18px;
margin-bottom: clamp(30px, 4vw, 52px);
}
.dispos-avis{ display: flex; }
/* Préfixée par #contact : .contact-rating{ display: flex } est écrite plus bas,
et à spécificité égale c'est elle qui l'emportait. */
#contact .contact-rating{ display: none; }
}
.accordion{ border-top: 1px solid var(--line); }
.acc{ border-bottom: 1px solid var(--line); }
.acc summary{
display: flex; align-items: center; justify-content: space-between; gap: 18px;
padding: 22px 4px; cursor: pointer; list-style: none;
font-family: var(--display); font-size: clamp(1.05rem, 1.8vw, 1.28rem); font-weight: 400;
transition: color .2s var(--ease);
}
.acc summary::-webkit-details-marker{ display: none; }
.acc summary:hover{ color: var(--sage-deep); }
.acc-label{ display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.acc-price{ font-family: var(--body); font-size: .95rem; font-weight: 700; color: var(--sage-deep); white-space: nowrap; font-variant-numeric: tabular-nums; }
.acc-sign{ flex: none; width: 26px; height: 26px; position: relative; }
.acc-sign::before, .acc-sign::after{
content: ""; position: absolute; left: 50%; top: 50%; background: var(--ink-45);
transform: translate(-50%, -50%); transition: transform .3s var(--ease);
}
.acc-sign::before{ width: 13px; height: 1.5px; }
.acc-sign::after{ width: 1.5px; height: 13px; }
.acc[open] .acc-sign::after{ transform: translate(-50%, -50%) rotate(90deg); }
.acc[open] summary{ color: var(--sage-deep); }
.acc-body{ padding: 0 4px 26px; display: flex; flex-direction: column; gap: 16px; }
.acc-rows{ width: 100%; border-collapse: collapse; font-size: .92rem; }
.acc-rows th, .acc-rows td{ text-align: left; padding: 11px 14px 11px 0; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.acc-rows th{ font-weight: 500; color: var(--ink-70); }
.acc-rows td{ font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.acc-rows td small{ display: block; font-weight: 400; color: var(--ink-45); font-size: .8rem; white-space: normal; }
.acc-rows tr:last-child th, .acc-rows tr:last-child td{ border-bottom: 0; }
.price-card{
background: var(--sage-bg); border-radius: var(--soft);
padding: clamp(26px, 3.4vw, 40px); text-align: center;
}
.price-card b{
display: block; font-family: var(--display); font-size: clamp(2.4rem, 5.4vw, 3.2rem);
font-weight: 400; line-height: 1; color: var(--sage-deep); font-variant-numeric: tabular-nums;
}
.price-card span{ display: block; font-size: .88rem; color: var(--ink-70); margin-top: 8px; }
.price-duo{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 1.8vw, 20px); }
.price-duo .price-card:last-child{ background: var(--clay-bg); }
.price-duo .price-card:last-child b{ color: var(--clay-deep); }
@media (max-width: 620px){ .price-duo{ grid-template-columns: 1fr; } }
/* ------------------------------------------- 11b. Rangées en carrousel */
/* Les vues du parc et les trois destinations gardent leur grille sur grand
écran et deviennent des carrousels au téléphone. Un seul balisage pour les
deux états : la voie est la grille elle-même, à qui l'on donne ici le
défilement en x et l'accroche. Les flèches se posent au-dessus, à droite,
comme celles du pont des chambres.
Elles sont pilotées par le même script que le pont — voir `pont()` dans
site.js — qui mesure le pas sur les deux premières cellules au lieu de le
supposer. Sur grand écran il ne trouve rien à faire : la voie ne déborde
pas, les deux flèches restent éteintes, et la feuille de style les cache. */
.piste-nav{ display: none; }
@media (max-width: 900px){
/* Les deux flèches quittent le fil et se posent sur l'image, une par bord,
à mi-hauteur de celle-ci. `display: contents` sur leur boîte : elle ne
produit plus de cadre, les boutons deviennent enfants de la piste et s'y
positionnent directement.
La hauteur : la voie fait toute la largeur de la coquille, l'image est un
4/3, donc sa moitié vaut trois huitièmes de cette largeur. C'est vrai des
vues du parc, où la cellule EST l'image, comme des destinations, où
l'image occupe le haut de la case. */
.piste{ position: relative; display: block; }
.piste-nav{ display: contents; }
.piste-fleche{
position: absolute; z-index: 2;
top: calc((100vw - 2 * var(--gutter)) * 0.375);
transform: translateY(-50%);
}
.piste-fleche[data-piste-prev]{ left: 10px; }
.piste-fleche[data-piste-next]{ right: 10px; }
/* « .piste > » et non « .piste-voie » seul : la voie EST la grille —
.trio, .acts — et .acts se déclare en grid plus bas dans la feuille.
À spécificité égale, la dernière écrite gagnait. */
.piste > .piste-voie{
display: flex; grid-template-columns: none;
gap: clamp(12px, 3vw, 18px);
overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
scrollbar-width: none; -ms-overflow-style: none;
}
.piste > .piste-voie::-webkit-scrollbar{ display: none; }
.piste > .piste-voie > *{ flex: 0 0 100%; scroll-snap-align: center; }
}
/* ------------------------------------------------------- 12b. Les chambres */
/* Dix fiches en pont roulant : deux rangs de cinq, trois colonnes visibles.
Les colonnes font un tiers de la largeur, la grille en compte cinq — le
reste défile sous la flèche. Les rangs se remplissent l'un après l'autre :
les chambres 1 à 5 en haut, 6 à 10 en dessous. */
.rooms-deck{ position: relative; }
.rooms-grid{
--rgap: clamp(12px, 1.6vw, 20px);
display: grid;
grid-template-columns: repeat(5, calc((100% - 2 * var(--rgap)) / 3));
grid-auto-columns: calc((100% - 2 * var(--rgap)) / 3);
gap: var(--rgap);
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none; -ms-overflow-style: none;
padding-bottom: 2px;
}
.rooms-grid::-webkit-scrollbar{ display: none; }
/* Case de clôture. Elle occupe la sixième colonne sur les deux rangs, et
sert deux fins d'un coup : sans elle le pont bute après deux colonnes — la
flèche ramenait la troisième chambre en tête et on croyait à un doublon —
et comme cinq ne se divise pas par trois, le second écran gardait un tiers
vide. Elle comble ce vide par le pas suivant plutôt que par du décor. */
.rcard-end{
grid-column: 6; grid-row: 1 / 3; scroll-snap-align: start;
border: 1px solid var(--line); border-radius: var(--soft);
padding: clamp(24px, 3vw, 34px);
display: flex; flex-direction: column; justify-content: center; gap: 14px;
text-align: left;
}
.rcard-end b{
font-family: var(--display); font-weight: 400;
font-size: clamp(1.15rem, 1.9vw, 1.45rem); line-height: 1.2;
}
.rcard-end p{ font-size: .88rem; color: var(--ink-70); line-height: 1.6; }
.rcard-end .btn{ align-self: flex-start; }
/* La carte rétablit la palette claire dans sa portée : elle est blanche,
posée sur la bande verte qui, elle, a des jetons inversés. */
.rcard{
scroll-snap-align: start; cursor: pointer; /* la carte entière ouvre la fiche */
display: flex; flex-direction: column;
border-radius: var(--soft); overflow: hidden;
background: #FFFFFF;
--ink: #38434C; --ink-70: #5E6871; --ink-45: #6A747D;
--line: #EAE7E1; --line-soft: #F2F0EC;
--white: #FFFFFF; --cream: #FBF9F5;
--sage: #8AA48D; --sage-deep: #45664C;
color: #38434C;
transition: box-shadow .26s var(--ease);
}
/* La carte ne se soulève pas au survol, et c'est voulu. Un transform la
promeut en calque : le calque se cale sur des pixels entiers alors que les
colonnes tombent sur des fractions (448,328 px, 836,656 px…), si bien qu'un
liseré du fond blanc de la carte apparaissait le long de la photo — sur les
colonnes fractionnaires seulement, d'où le « parfois ». Seule l'image bouge,
comme sur les cases d'activités. */
.rooms-grid .rcard:hover{ box-shadow: 0 18px 38px -22px rgba(0,0,0,.6); }
.rcard-media{ position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--cream); }
.rcard-media picture{ position: absolute; inset: 0; }
.rcard-media img{ width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.rcard:hover .rcard-media img{ transform: scale(1.04); }
.rcard-foot{
flex: 1;
display: flex; align-items: center; justify-content: space-between;
gap: 12px; padding: 14px 15px 15px;
}
.rcard-id b{
display: block; font-family: var(--display); font-weight: 400;
font-size: clamp(1rem, 1.5vw, 1.15rem); line-height: 1.2;
}
.rcard-id span{ display: block; font-size: .8rem; color: var(--ink-70); margin-top: 3px; }
.rcard-more{
flex: none; padding: 9px 15px; border-radius: var(--round); border: 0;
background: var(--green-bg); color: #FFFFFF; cursor: pointer;
font-family: var(--body); font-size: .76rem; font-weight: 700;
transition: background .2s var(--ease);
}
.rcard-more:hover{ background: var(--brown-bg); }
/* La commande du pont, dans le bandeau de titre, à droite. Posée sur le pont
elle se perdait : une pastille blanche dont un quart couvrait le coin blanc
d'une fiche, à mi-hauteur entre les deux rangs, et sa jumelle effacée
(opacity:0) tant qu'on n'avait pas défilé — on ne voyait plus de commande
du tout. Ici les deux boutons sont toujours au même endroit, et celui qui
ne sert pas s'éteint sans disparaître : la paire dit qu'il y a une suite. */
.rooms-top{
display: flex; align-items: flex-end; justify-content: space-between;
gap: 18px 28px; flex-wrap: wrap;
}
.rooms-top .head{ margin-bottom: 0; flex: 1 1 420px; }
/* La commande vit dans le pont, mais sur grand écran elle se pose en tête de
section, à droite : `bottom: calc(100% + 26px)` la remonte de l'écart du
`stack-lg` qui sépare le titre du pont — c'est-à-dire exactement à la
hauteur où elle se trouvait quand elle était dans le bandeau de titre. */
.rooms-nav{
display: flex; gap: 10px; flex: none;
position: absolute; right: 0; bottom: calc(100% + 26px); z-index: 2;
}
.rooms-arrow, .piste-fleche{
width: 46px; height: 46px; border-radius: 50%; padding: 0;
border: 1px solid rgba(255,255,255,.45); background: transparent; color: #FFFFFF;
display: grid; place-items: center; cursor: pointer;
transition: background .2s var(--ease), color .2s var(--ease),
border-color .2s var(--ease), opacity .2s var(--ease);
}
.rooms-arrow:hover:not([disabled]), .piste-fleche:hover:not([disabled]){
background: #FFFFFF; border-color: #FFFFFF; color: var(--green-bg);
}
.rooms-arrow[disabled], .piste-fleche[disabled]{ opacity: .28; cursor: default; }
/* Posée sur une photographie, une pastille transparente à liseré blanc se
perd dès que le fond s'éclaircit. Là où les flèches passent sur l'image,
elles deviennent donc des pastilles blanches pleines, comme celles du
carrousel de la fiche de chambre. Deux fenêtres distinctes : les carrousels
basculent à 900 px, le pont des chambres à 760. */
@media (max-width: 900px){
.piste-fleche{
width: 42px; height: 42px;
background: #FFFFFF; border-color: #FFFFFF; color: var(--brown-bg);
box-shadow: 0 3px 14px rgba(20,26,30,.35);
}
.piste-fleche:hover:not([disabled]){
background: var(--brown-bg); border-color: var(--brown-bg); color: #FFFFFF;
}
.piste-fleche[disabled]{
/* Au bout de la course, la pastille se vide : plus de fond, plus d'ombre,
il ne reste que le liseré et la flèche. La photographie se voit au
travers. Le contraste avec le bouton actif — blanc plein et ombre
portée — est immédiat, sans qu'on ait à deviner un écart d'opacité. */
opacity: 1;
background: transparent;
border-color: rgba(255,255,255,.55);
color: rgba(255,255,255,.85);
box-shadow: none;
backdrop-filter: none; -webkit-backdrop-filter: none;
}
}
@media (max-width: 760px){
.rooms-arrow{
width: 42px; height: 42px;
background: #FFFFFF; border-color: #FFFFFF; color: var(--brown-bg);
box-shadow: 0 3px 14px rgba(20,26,30,.35);
}
.rooms-arrow:hover:not([disabled]){
background: var(--brown-bg); border-color: var(--brown-bg); color: #FFFFFF;
}
/* Même état éteint que les flèches des carrousels, voir plus haut. */
.rooms-arrow[disabled]{
/* Au bout de la course, la pastille se vide : plus de fond, plus d'ombre,
il ne reste que le liseré et la flèche. La photographie se voit au
travers. Le contraste avec le bouton actif — blanc plein et ombre
portée — est immédiat, sans qu'on ait à deviner un écart d'opacité. */
opacity: 1;
background: transparent;
border-color: rgba(255,255,255,.55);
color: rgba(255,255,255,.85);
box-shadow: none;
backdrop-filter: none; -webkit-backdrop-filter: none;
}
}
/* Au téléphone, une fiche à la fois, posée au milieu de l'écran, et les deux
flèches pour passer à la suivante — celle de gauche s'allume dès qu'il y a
de quoi revenir. Le glissement au doigt marche toujours.
Le centrage tient au rembourrage : une colonne fait 72 vw, et l'on met de
chaque côté de la voie la moitié de ce qui reste. La fenêtre de défilement
vaut alors exactement une colonne, et `scroll-snap-align: center` pose
chaque fiche au milieu — y compris la première et la dernière, qui sans ce
rembourrage ne pourraient jamais atteindre le centre.
Tout est en vw et non en pour-cent : un pour-cent de colonne se mesure sur
la boîte de contenu, qu'un rembourrage en pour-cent rétrécirait à son tour. */
@media (max-width: 760px){
.rooms-grid{
--rcol: 72vw;
grid-template-columns: repeat(5, var(--rcol));
grid-auto-columns: var(--rcol);
padding-inline: calc((100vw - 2 * var(--gutter) - var(--rcol)) / 2);
}
.rooms-grid > *{ scroll-snap-align: center; }
/* La case de clôture disparaît : elle existait pour combler le tiers vide
du second écran, et il n'y a plus de tiers quand on avance d'une fiche à
la fois. Elle reste sur grand écran, où ce vide, lui, existe toujours. */
.rcard-end{ display: none; }
/* Les deux flèches viennent se poser sur la photographie, à mi-hauteur,
une par bord. La bande qui les porte fait la largeur d'une fiche et se
centre comme elle ; 27 vw, c'est la moitié des 54 vw de la photo, qui
est un 4/3 dans une colonne de 72 vw. Elle ne reçoit pas le clic — seuls
les boutons le reçoivent — sans quoi elle couvrirait la fiche. */
.rooms-nav{
position: absolute; right: auto; bottom: auto;
/* À mi-hauteur du pont, c'est-à-dire sur la couture entre les deux rangs
de fiches — et non plus au milieu de la photographie du rang du haut. */
top: 50%; left: 50%; transform: translate(-50%, -50%);
width: 72vw; display: block; pointer-events: none; z-index: 3;
}
.rooms-arrow{
position: absolute; top: 50%; transform: translateY(-50%);
pointer-events: auto;
}
.rooms-arrow.is-prev{ left: 8px; }
.rooms-arrow.is-next{ right: 8px; }
}
/* ------------------------------------------------- 12b-ter. La fiche */
/* Un : Échap, piège à focus et fond assombri viennent du
navigateur. Il rétablit lui aussi la palette claire — il flotte au-dessus
de la page, pas dans la bande verte qui le contient dans le balisage. */
.rmodal{
border: 0; padding: 0; background: #FFFFFF;
border-radius: var(--soft);
width: min(1020px, calc(100vw - 32px));
max-height: min(860px, calc(100vh - 40px));
overflow: hidden;
--ink: #38434C; --ink-70: #5E6871; --ink-45: #6A747D;
--line: #EAE7E1; --line-soft: #F2F0EC;
--white: #FFFFFF; --cream: #FBF9F5;
--sage: #8AA48D; --sage-deep: #45664C; --clay: #D79A6E; --clay-deep: #B2703F;
color: #38434C;
box-shadow: 0 40px 90px -30px rgba(20,26,30,.6);
}
.rmodal::backdrop{ background: rgba(26,32,28,.64); }
.rmodal-wrap{ position: relative; max-height: inherit; }
.rmodal-close{
position: absolute; top: 13px; right: 13px; z-index: 3;
width: 38px; height: 38px; border-radius: 50%; border: 0;
background: #FFFFFF; color: var(--ink); cursor: pointer;
display: grid; place-items: center;
box-shadow: 0 2px 10px rgba(20,26,30,.28);
transition: background .2s var(--ease), color .2s var(--ease);
}
.rmodal-close:hover{ background: var(--brown-bg); color: #fff; }
.rmodal-in{
display: grid; grid-template-columns: 1.05fr 1fr;
gap: clamp(18px, 2.6vw, 34px);
padding: clamp(18px, 2.6vw, 30px);
overflow-y: auto; max-height: min(860px, calc(100vh - 40px));
}
.rmodal-text h3{
font-family: var(--display); font-weight: 400;
font-size: clamp(1.3rem, 2.4vw, 1.75rem); line-height: 1.15;
}
.rmodal-text .note{ margin-top: 5px; }
@media (max-width: 820px){
.rmodal-in{ grid-template-columns: 1fr; }
}
/* ---- La fiche sans images : la liste des traiteurs. Même coquille que les
fiches de chambre — même croix, même fermeture, même script — mais une
seule colonne, et moins large : une liste de coordonnées n'a pas besoin de
mille pixels. */
.rmodal.is-plain{ width: min(660px, calc(100vw - 32px)); }
.rmodal-in.is-single{ grid-template-columns: 1fr; }
.trt-groupe h4{
font-family: var(--body); font-size: .72rem; font-weight: 700;
letter-spacing: .16em; text-transform: uppercase; color: var(--ink-45);
margin-bottom: 14px;
}
.trt-liste{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; }
/* Un bloc par prestataire : le nom, puis le lieu, puis les moyens de le
joindre. Le trait de séparation dit où finit l'un et où commence l'autre —
dans une liste de numéros, c'est ce qui manque le plus vite. */
.trt{
display: flex; flex-direction: column; gap: 3px;
padding-bottom: 16px; border-bottom: 1px solid var(--line-soft);
}
.trt:last-child{ padding-bottom: 0; border-bottom: 0; }
.trt b{ font-size: 1rem; font-weight: 700; }
.trt-lieu{ font-size: .86rem; color: var(--ink-70); }
.trt-quoi{ font-size: .82rem; color: var(--ink-45); }
.trt-liens{
display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 6px;
font-size: .86rem; color: var(--ink-70);
}
.trt-liens a{ font-weight: 700; color: var(--sage-deep); }
.trt-liens a:hover{ text-decoration: underline; }
/* Le détail d'une chambre : les caractéristiques en lignes étiquetées, et le
rappel des formules encadré. Ces deux briques ont survécu à la refonte des
chambres — elles vivent maintenant dans la fiche, et le pavé des formules
sert aussi d'accusé de réception au formulaire. */
.room-specs{ display: flex; flex-direction: column; gap: 10px; list-style: none; padding: 0; margin: 0; }
.room-specs li{ display: flex; gap: 12px; font-size: .9rem; border-bottom: 1px solid var(--line-soft); padding-bottom: 9px; }
.room-specs .k{ color: var(--ink-45); min-width: 100px; flex: none; }
.room-formules{
background: var(--cream); border-radius: 12px; padding: 18px 20px;
display: flex; flex-direction: column; gap: 10px;
}
.room-formules h4{ font-family: var(--body); font-size: .72rem; font-weight: 700;
letter-spacing: .16em; text-transform: uppercase; color: var(--ink-45); }
/* Le ménage obligatoire, rappelé sous les formules : il a quitté la case
« En option » des services pour venir au plus près de ce qu'il concerne.
Même graisse et même alignement que les formules, mais séparé par un trait
— ce n'est pas une formule de plus, c'est ce qui s'y ajoute. */
.room-fee{
display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
padding-top: 10px; border-top: 1px solid var(--line);
font-size: .88rem; color: var(--ink-70);
}
.room-fee small{ color: var(--ink-45); font-size: .78rem; }
.room-fee b{ font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.room-formules table{ width: 100%; border-collapse: collapse; font-size: .88rem; }
.room-formules th{ text-align: left; font-weight: 400; color: var(--ink-70); padding: 5px 0; }
.room-formules td{ text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; padding: 5px 0; }
/* ------------------------------------------------- 12b-bis. Carrousel */
/* Défilement horizontal natif avec accroche : pas de bibliothèque, et la
pellicule reste utilisable au doigt comme à la molette si le script ne
se charge pas. */
/* align-self : start est ce qui donne au cadre ses quatre angles arrondis.
Sans lui, le carrousel est une case de grille qui s'étire sur la hauteur de
la colonne de texte — 597 px quand la photo, en 4/3, n'en fait que 356. Le
rognage arrondi tombait donc 241 px plus bas, dans un fond crème que rien
ne distingue du blanc de la fiche : en haut la photo était arrondie, en bas
coupée net. Le cadre épouse maintenant la pellicule, et du même coup les
flèches (top:50%) se recentrent sur l'image au lieu de plonger sous elle,
et le compteur revient se poser dans le coin de la photo. */
.carousel{
position: relative; align-self: start;
border-radius: 12px; overflow: hidden; background: var(--cream);
}
.carousel-track{
display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none;
}
.carousel-track::-webkit-scrollbar{ display: none; }
.carousel-slide{
flex: 0 0 100%; scroll-snap-align: center; margin: 0;
aspect-ratio: 4/3; position: relative;
}
.carousel-slide picture{ position: absolute; inset: 0; }
.carousel-slide img{ width: 100%; height: 100%; object-fit: cover; }
.carousel-btn{
position: absolute; top: 50%; transform: translateY(-50%);
width: 46px; height: 46px; border: 0; border-radius: var(--round);
background: #FFFFFF; color: var(--brown-bg); cursor: pointer;
display: grid; place-items: center;
box-shadow: 0 3px 14px rgba(20,26,30,.35);
transition: background .2s var(--ease), color .2s var(--ease),
transform .2s var(--ease), opacity .2s var(--ease);
}
.carousel-btn:hover{ background: var(--brown-bg); color: #fff; transform: translateY(-50%) scale(1.08); }
/* Au bout de la pellicule, la pastille se vide — même état que les flèches du
pont et des carrousels : plus de fond, plus d'ombre, il ne reste que le
liseré et la flèche, et la photographie se voit au travers. Le liseré est
ajouté ici parce que ce bouton-ci n'en a pas au repos. */
.carousel-btn[disabled]{
cursor: default; opacity: 1;
background: transparent;
border: 1px solid rgba(255,255,255,.55);
color: rgba(255,255,255,.85);
box-shadow: none;
}
.carousel-btn[disabled]:hover{
background: transparent; color: rgba(255,255,255,.85);
transform: translateY(-50%);
}
.carousel-prev{ left: 12px; } .carousel-next{ right: 12px; }
@media (max-width: 520px){ .carousel-btn{ width: 40px; height: 40px; } }
.carousel-count{
position: absolute; right: 10px; bottom: 10px;
padding: 5px 12px; border-radius: var(--round);
background: rgba(40,48,54,.72); color: #fff;
font-size: .74rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.carousel-dots{
position: absolute; left: 0; right: 0; bottom: 12px;
display: flex; justify-content: center; gap: 6px; pointer-events: none;
}
.carousel-dots i{
width: 6px; height: 6px; border-radius: var(--round);
background: rgba(255,255,255,.55); transition: background .2s, width .2s;
}
.carousel-dots i.is-on{ background: #fff; width: 18px; }
@media (max-width: 520px){ .carousel-dots{ display: none; } }
/* ------------------------------------------------------------ 12c. Autour */
/* Bloc de couleur portant le titre, puis une mosaïque de paysages : le
territoire se montre, il ne se raconte pas. */
.around{ display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(12px, 1.6vw, 20px); }
.around-tile{
grid-column: span 5; border-radius: var(--soft);
background: var(--lake-bg); padding: clamp(26px, 3.2vw, 42px);
display: flex; flex-direction: column; justify-content: center; gap: 14px;
}
.around-a{ grid-column: span 7; aspect-ratio: 2/1; }
.around-b{ grid-column: span 5; aspect-ratio: 5/3; }
.around-c{ grid-column: span 7; aspect-ratio: 7/3; }
.around-d{ grid-column: span 4; aspect-ratio: 3/4; }
.around-e{ grid-column: span 12; aspect-ratio: 16/5; }
.around > figure{ margin: 0; border-radius: var(--soft); overflow: hidden; position: relative; background: var(--cream); }
.around figure picture{ position: absolute; inset: 0; }
.around figure img{ width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.around figure:hover img{ transform: scale(1.04); }
.around figcaption{
position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 20px 16px; color: #fff;
background: linear-gradient(180deg, rgba(40,48,54,0), rgba(40,48,54,.78));
font-size: .88rem; font-weight: 500;
}
.around-list{ display: flex; flex-direction: column; gap: 9px; list-style: none; padding: 0; margin: 0; }
.around-list li{ font-size: .9rem; color: var(--ink-70); display: flex; gap: 10px; }
.around-list b{ font-weight: 700; color: var(--ink); white-space: nowrap; }
@media (max-width: 900px){
.around-tile, .around-a, .around-b, .around-c, .around-d, .around-e{ grid-column: span 12; }
.around-a, .around-c, .around-e{ aspect-ratio: 16/10; }
.around-b, .around-d{ aspect-ratio: 4/3; }
}
/* ------------------------------------------------------------ 12d. Hôtes */
/* Une simple case, pas une section : un visage et deux prénoms suffisent. */
.hosts-card{
display: flex; align-items: center; gap: 18px;
background: var(--cream); border-radius: var(--soft); padding: 18px 22px;
}
/* 88 px depuis le 28 septembre 2026, contre 68 auparavant : la pastille ne
portait que deux initiales, elle porte maintenant un portrait à deux
personnes. À 68 px chaque visage tombait sous quinze pixels de côté. */
.hosts-card .ph{
width: 88px; height: 88px; border-radius: var(--round); overflow: hidden;
flex: none; position: relative; background: var(--sage-bg);
}
.hosts-card .ph picture{ position: absolute; inset: 0; }
.hosts-card .ph img{ width: 100%; height: 100%; object-fit: cover; }
.hosts-card .ph-initials{
width: 100%; height: 100%; display: grid; place-items: center;
font-family: var(--display); font-size: 1.35rem; color: var(--sage-deep);
}
.hosts-card b{ display: block; font-family: var(--display); font-size: 1.15rem; font-weight: 400; }
.hosts-card span{ font-size: .86rem; color: var(--ink-70); }
/* --------------------------------------------------------- 12e. Activités */
/* Une case par activité : ce qu'on peut faire, à quelle distance. */
.acts{ display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.4vw, 18px); }
@media (max-width: 900px){ .acts{ grid-template-columns: 1fr; } }
/* Le renvoi vers l'office de tourisme : ce que le gîte ne raconte pas. */
.acts-more{ display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.acts-more .note{ max-width: 58ch; }
.act{
background: rgba(255,255,255,.08); border: 1px solid var(--line);
border-radius: var(--soft); overflow: hidden;
display: flex; flex-direction: column;
}
/* L'image porte le nom du lieu et la distance : c'est elle qui titre.
Le cadre rogne : sans cela l'agrandissement de 4 % au survol descendait de
près de six pixels par-dessus le texte, qui paraissait rétrécir. */
.act-media{
margin: 0; position: relative; aspect-ratio: 4/3; overflow: hidden;
background: rgba(255,255,255,.08);
}
.act-media picture{ position: absolute; inset: 0; }
.act-media img{ width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
/* Au survol, l'image seule bouge : la case ne se soulève pas. */
.act:hover .act-media img{ transform: scale(1.04); }
.act-media figcaption{
position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 20px 17px;
background: linear-gradient(180deg, rgba(28,22,18,0), rgba(28,22,18,.82));
display: flex; flex-direction: column; align-items: flex-start; gap: 9px;
}
.act-dist{
padding: 4px 12px; border-radius: var(--round);
background: rgba(255,255,255,.94); color: var(--brown-bg);
font-size: .72rem; font-weight: 700; letter-spacing: .06em;
}
.act h3{ font-size: 1.12rem; font-weight: 400; color: #fff; }
.act > p{ font-size: .86rem; color: var(--ink-70); line-height: 1.55; margin: 0; padding: 18px 20px 22px; }
/* --------------------------------------------------------- 12f. Services */
/* Deux cases blanches sur la teinte sauge : ce qui est compris, ce qui
s'ajoute. Elles s'étirent à la même hauteur pour que les notes de bas de
case s'alignent d'une colonne à l'autre.
La paire est bornée : sur toute la largeur de la coquille, une case ferait
plus de quatre-vingts signes par ligne — au-delà de ce qui se lit d'un
trait. L'appel au devis descend dessous, centré comme le titre. */
.svcs{
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(14px, 1.8vw, 22px);
max-width: 880px; margin-inline: auto; width: 100%;
}
@media (max-width: 680px){ .svcs{ grid-template-columns: 1fr; } }
.svcs-more{ display: flex; justify-content: center; }
.svc{
background: var(--white); border-radius: var(--soft);
padding: clamp(22px, 2.4vw, 30px);
display: flex; flex-direction: column; gap: 18px;
}
.svc h3{
font-family: var(--body); font-size: .72rem; font-weight: 700;
letter-spacing: .16em; text-transform: uppercase; color: var(--ink-45);
}
.svc .note, .svc .arrow-link{ margin-top: auto; }
.svc-rows{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.svc-rows li{
display: grid; grid-template-columns: 1fr auto; gap: 3px 16px;
font-size: .9rem; padding-bottom: 12px; border-bottom: 1px solid var(--line-soft);
}
.svc-rows li:last-child{ border-bottom: 0; padding-bottom: 0; }
.svc-rows .k{ color: var(--ink-70); }
.svc-rows .v{ font-weight: 700; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.svc-rows small{ grid-column: 1 / -1; font-size: .75rem; color: var(--ink-45); }
.svc-rows.is-text li{ grid-template-columns: 82px 1fr; }
.svc-rows.is-text .v{ font-weight: 400; text-align: left; white-space: normal; color: var(--ink-70); }
/* Un grand roseau en arrière-plan de « La maison ». Il part du bas à droite et
déborde des deux côtés — images et textes de la section lui passent
par-dessus. Silhouette pleine et non contour : à opacité égale elle pèse
bien plus lourd qu'un dessin au trait.
Depuis que la section est marron, c'est la version claire. Et comme
#maison (1,0,0) l'emporte sur .band-brown (0,1,0), cette règle doit
reprendre le grain et la profondeur de la bande, sans quoi elle les
effacerait toutes les deux en ne déclarant que le roseau. */
/* Le roseau est un calque et non un fond, et il garde la même taille à toutes
les largeurs. Sa base est posée sur le bas de « La maison » : il avait
débordé de 360 px sur « Les chambres » le temps d'un essai, le client l'a
fait remonter. bottom: 0, donc plus rien ne dépasse en bas.
Il déborde encore de 110 px à droite, pour que la touffe ne soit pas
plantée contre le bord : overflow-x: clip retient ce débordement-là sans
retenir le vertical, là où overflow: hidden aurait bloqué les deux.
La coquille est remontée d'un cran pour passer devant : un élément
positionné se peint au-dessus du texte en flux, et sans cela le roseau
couvrirait les images et les titres de la section. */
#maison{ position: relative; overflow-x: clip; overflow-y: visible; }
#maison > .shell{ position: relative; z-index: 1; }
.roseau{
position: absolute; z-index: 0; pointer-events: none;
right: -110px; bottom: 0;
width: 1045px; height: 1800px; /* le dessin fait 360 × 620 */
background: var(--roseaux-clair) no-repeat center / contain;
}
/* Au téléphone il vient au milieu : collé à droite sur un écran étroit, il
n'en montrait qu'une tranche, et la touffe tombait hors du cadre. */
@media (max-width: 760px){
.roseau{ right: auto; left: 50%; transform: translateX(-50%); }
}
/* -------------------------------------------------------- 13. Calendrier */
.cal-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(216px, 1fr)); gap: 18px; }
.cal{ border: 1px solid var(--line); border-radius: var(--soft); padding: 16px; background: var(--white); }
.cal h4{ font-family: var(--body); font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 12px; color: var(--ink-70); }
.cal table{ width: 100%; border-collapse: collapse; }
.cal th{ font-size: .64rem; font-weight: 700; color: var(--ink-45); padding-bottom: 6px; }
.cal td{ text-align: center; padding: 1px; }
.cal td span{ display: grid; place-items: center; aspect-ratio: 1; font-size: .76rem; border-radius: var(--round); font-variant-numeric: tabular-nums; }
.cal .free{ color: var(--ink-70); }
.cal .busy{ background: var(--clay); color: #fff; font-weight: 700; }
.cal .edge{ background: linear-gradient(135deg, var(--clay) 50%, transparent 50%); color: var(--ink); }
.cal .void{ color: transparent; }
.legend{ display: flex; flex-wrap: wrap; gap: 20px; font-size: .82rem; color: var(--ink-45); }
.legend b{ display: inline-flex; align-items: center; gap: 8px; font-weight: 400; }
.legend i{ width: 14px; height: 14px; border-radius: var(--round); display: block; }
/* ------------------------------------------------------- 14. Formulaire */
.form{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (max-width: 680px){ .form{ grid-template-columns: 1fr; } }
.field{ display: flex; flex-direction: column; gap: 8px; }
.field.is-full{ grid-column: 1 / -1; }
.field label{ font-size: .84rem; font-weight: 700; }
.field .hint{ font-size: .78rem; color: var(--ink-45); font-weight: 400; }
.field input, .field select, .field textarea{
padding: 14px 18px; border: 1.5px solid var(--line); border-radius: var(--soft);
background: var(--white); font-size: .94rem; width: 100%;
transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus{
outline: none; border-color: var(--sage); box-shadow: 0 0 0 4px var(--sage-bg);
}
.field textarea{ resize: vertical; min-height: 130px; }
.field.is-error input, .field.is-error select, .field.is-error textarea{ border-color: var(--clay-deep); }
.field .err{ font-size: .8rem; color: var(--clay-deep); font-weight: 600; }
.choices{ display: flex; flex-wrap: wrap; gap: 9px; }
.choice{ position: relative; }
.choice input{ position: absolute; opacity: 0; width: 0; height: 0; }
.choice span{
display: inline-block; padding: 10px 19px; border: 1.5px solid var(--line);
border-radius: var(--round); font-size: .86rem; cursor: pointer; background: var(--white);
transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.choice input:checked + span{ background: var(--sage-deep); color: #fff; border-color: var(--sage-deep); }
.choice input:focus-visible + span{ outline: 2px solid var(--sage-deep); outline-offset: 2px; }
.choice span:hover{ border-color: var(--sage); }
/* La pastille d'avis est centrée sur la colonne, donc sur la carte qui la
suit : collée à gauche sous une liste d'étiquettes, elle avait l'air d'une
ligne de plus au lieu d'un bouton. */
.contact-rating{ display: flex; justify-content: center; }
.contact-list{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.contact-list li{ display: flex; gap: 16px; padding-block: 15px; border-bottom: 1px solid var(--line-soft); align-items: flex-start; }
.contact-list li:last-child{ border-bottom: 0; }
.contact-list .k{ font-size: .72rem; color: var(--ink-45); min-width: 88px; padding-top: 4px; flex: none; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; }
.contact-list .v{ font-size: .98rem; }
.contact-list .v a{ font-weight: 700; }
.contact-list .v a:hover{ color: var(--sage-deep); }
/* -------------------------------------------------------------- 15. Pied */
.foot{ background: var(--cream); padding-block: clamp(50px, 6vw, 76px) 28px; border-top: 1px solid var(--line); }
.foot-in{ display: flex; flex-wrap: wrap; gap: 36px 60px; justify-content: space-between; align-items: flex-start; }
.foot img{ height: 56px; width: auto; margin-bottom: 16px; }
.foot-links{ display: flex; flex-wrap: wrap; gap: 12px 30px; }
.foot-links a{ font-size: .9rem; color: var(--ink-70); }
.foot-links a:hover{ color: var(--ink); }
.foot-bottom{
display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: space-between;
margin-top: clamp(34px, 4vw, 52px); padding-top: 22px; border-top: 1px solid var(--line);
font-size: .8rem; color: var(--ink-45);
}
/* Barre d'action permanente sur mobile */
.dock{
position: fixed; left: 0; right: 0; bottom: 0; z-index: 86;
display: none; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
background: rgba(255,255,255,.94);
backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
border-top: 1px solid var(--line);
}
.dock .btn{ flex: 1; padding-block: 13px; }
/* Les deux boutons virent au marron de la charte quand on les touche, comme
l'appel principal du bandeau et celui du menu — l'ardoise du survol par
défaut ne renvoyait à rien. « :active » accompagne « :hover » parce que la
barre ne paraît qu'au téléphone : un écran tactile n'a pas de survol, et
sans lui la couleur ne se verrait jamais là où elle est demandée. */
.dock .btn-primary:hover, .dock .btn-primary:active{
background: var(--brown-bg);
box-shadow: 0 10px 26px -10px rgba(75,59,51,.8);
}
.dock .btn-outline:hover, .dock .btn-outline:active{
background: var(--brown-bg); border-color: var(--brown-bg); color: #fff;
}
/* Elle n'apparaît qu'une fois le bandeau passé : posée dessus, elle couvrait
le bas de la photographie et répétait les deux boutons qui s'y trouvent
déjà. Le seuil est calculé par le script, qui pose `is-on` — voir la
section « barre d'action » de site.js. Elle glisse au lieu de surgir. */
@media (max-width: 760px){
.dock{
display: flex;
transform: translateY(130%);
transition: transform .32s var(--ease);
}
.dock.is-on{ transform: none; }
body{ padding-bottom: 76px; }
}
@media (prefers-reduced-motion: reduce){
.dock{ transition: none; }
}
/* -------------------------------------------------------- 16. Mouvement */
.js .reveal{ opacity: 0; transform: translateY(16px); }
.js .reveal.is-in{
opacity: 1; transform: none;
transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.js .reveal[data-delay="1"].is-in{ transition-delay: .07s; }
.js .reveal[data-delay="2"].is-in{ transition-delay: .14s; }
.js .reveal[data-delay="3"].is-in{ transition-delay: .21s; }
/* Chaque vue du bandeau se pose lentement pendant qu'elle est à l'écran. En
visant la vue active plutôt que toutes les images, l'animation repart à
chaque relais au lieu de s'être épuisée avant même d'être vue. */
.js .hero-media picture.is-on img{ animation: drift 9s var(--ease) both; }
@keyframes drift{ from{ transform: scale(1.08); } to{ transform: scale(1); } }
@media (prefers-reduced-motion: reduce){
html{ scroll-behavior: auto; }
*, *::before, *::after{
animation-duration: .001ms !important; animation-iteration-count: 1 !important;
transition-duration: .001ms !important; scroll-behavior: auto !important;
}
.js .reveal{ opacity: 1; transform: none; }
.js .hero-media picture.is-on img{ animation: none; }
/* Pas de relais non plus : le bandeau garde sa première vue. */
.hero-media picture{ transition: none; }
/* Qui a demandé moins de mouvement ne doit pas attendre deux secondes
devant un rideau : il n'est pas montré du tout. */
.curtain{ display: none; }
}
/* ------------------------------------------------------- 17. Impression */
@media print{
.masthead, .dock, .lightbox, .burger,
.curtain{ display: none !important; }
body{ background: #fff; font-size: 11pt; padding-bottom: 0; }
.hero-media{ display: none; } .hero-in{ min-height: 0; color: #000; padding-block: 20pt; }
.band{ padding-block: 18pt; }
.acc-body{ display: block !important; }
}
/* ------------------------------------------------- 17. Case de consentement */
/* Posée juste au-dessus du bouton d'envoi : c'est la dernière chose lue avant
d'envoyer. La case garde sa taille native — 18 px, soit la plus petite
cible qu'on puisse encore viser au doigt — et le libellé entier est
cliquable, puisqu'il est dans le . */
.consent{
display: flex; align-items: flex-start; gap: 12px;
margin-bottom: 20px; cursor: pointer;
font-size: .88rem; line-height: 1.5; color: var(--ink-70);
}
.consent input{
flex: none; width: 18px; height: 18px; margin-top: 2px;
accent-color: var(--brown-bg); cursor: pointer;
}
.consent b{ color: var(--clay); font-weight: 400; }
/* Sur le fond vert du contact, le texte doit rester lisible. */
#contact .consent{ color: rgba(255,255,255,.88); }
#contact .consent input{ accent-color: #FFFFFF; }
/* L'état d'erreur, quand on envoie sans avoir coché. */
.consent.is-bad span{ color: var(--clay-deep); }
.consent.is-bad input{ outline: 2px solid var(--clay-deep); outline-offset: 2px; }
/* La signature de l'agence, au milieu de la barre du bas. Volontairement plus
discrète que les liens voisins : le pied de page appartient au client. */
.foot-sign a{ color: var(--ink-45); }
.foot-sign a:hover{ color: var(--ink-70); }
@media (max-width: 680px){
/* Quand la barre passe à la ligne, la signature se range en dernier
plutôt que de s'intercaler entre le copyright et les pages légales. */
.foot-sign{ order: 3; width: 100%; }
}
/* Le piège à robots du formulaire : hors écran, jamais vu, jamais atteint au
clavier. On ne l'efface pas avec display:none — certains robots ignorent
justement les champs masqués ainsi, et le piège ne prendrait plus rien. */
.piege{
position: absolute; left: -9999px; width: 1px; height: 1px;
opacity: 0; pointer-events: none;
}
/* ------------------------------------------------- 18. Le plan du site */
/* Une liste de liens, pas une liste à puces : les puces ajoutent du bruit
devant des entrées qui sont déjà visiblement des liens. Le trait vertical
rattache les sections à la page qui les porte. */
.plan-liste{
list-style: none; margin: 10px 0 0; padding: 0 0 0 18px;
border-left: 2px solid var(--line);
display: flex; flex-direction: column;
/* Pas d'écart entre les entrées : c'est le rembourrage des liens qui
fait l'espacement, et qui fait du même coup la cible au doigt. Avec un
gap et des liens nus, chaque lien ne mesurait que vingt pixels de haut
— moins que le minimum de 24 px des règles d'accessibilité, et bien
moins que ce qu'il faut pour viser sans se tromper de ligne. */
}
.plan-liste a{
display: block; padding-block: 11px;
color: var(--ink); font-size: 1rem;
text-decoration-color: var(--line);
text-underline-offset: 4px;
}
.plan-liste a:hover{ color: var(--sage-deep); text-decoration-color: currentColor; }