/* ============================================================
   DOMAINE DE CHÂTILLON : structure et composants
   V2 « Lumière de Drôme » (voir tokens.css), refonte du 05/10/2026

   Repris des maquettes d'hébergement d'OBT : l'écran d'entrée, la
   visionneuse, la barre d'appel mobile.
   Propre au domaine : le hero en vidéo, la mosaïque des hébergements,
   le bloc écoresponsable, l'agenda que le domaine tient lui-même et
   son espace de gestion.
   ============================================================ */

/* ---------- 1. Base ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; font-variant-numeric: lining-nums; background: var(--c-blanc); scroll-padding-top: calc(var(--h-entete) + 64px); }
body{
  margin: 0;
  font-family: var(--f-texte);
  font-size: var(--t-texte);
  line-height: 1.65;
  color: var(--c-encre);
  background: var(--c-blanc);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
body.est-verrouille{ overflow: hidden; }
[hidden]{ display: none !important; }
img, svg, video, iframe{ display: block; max-width: 100%; }
img{ height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote{ margin: 0; }
ul[class], ol[class]{ list-style: none; padding: 0; }
a{ color: inherit; }
button{ font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea{ font: inherit; color: inherit; }
::selection{ background: var(--c-vert-clair); color: var(--c-encre); }

:focus-visible{ outline: 2px solid var(--c-sapin); outline-offset: 3px; border-radius: 4px; }
.sur-sombre :focus-visible, .hero :focus-visible, .bandeau :focus-visible, .appel :focus-visible,
.entete[data-etat="transparent"] :focus-visible, .carte-heb:focus-visible, .tuile:focus-visible{ outline-color: var(--c-vert); }

.contenant{
  width: 100%;
  max-width: calc(var(--contenant) + 2 * var(--gouttiere));
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}
.saut-contenu{
  position: absolute; left: 1rem; top: -4rem; z-index: 10000;
  background: var(--c-sapin); color: #fff; padding: .7rem 1rem;
  border-radius: var(--r-1); text-decoration: none; font-weight: 700;
}
.saut-contenu:focus{ top: 1rem; }
.visuellement-cache{
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- 2. Typographie ---------- */
h1, h2, h3, h4, .titre{
  font-family: var(--f-titre);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -.02em;
  text-wrap: balance;
  color: inherit;
  font-optical-sizing: auto;
}
h2{ font-size: var(--t-h2); }
h3{ font-size: var(--t-h3); line-height: 1.15; letter-spacing: -.01em; }
h1 em, h2 em, h3 em{ font-style: italic; font-weight: 400; color: var(--c-vert-texte); }
.sur-sombre h2 em, .appel h2 em{ color: var(--c-vert); }
.hero h1 em, .bandeau h1 em{ color: var(--c-vert-clair); }
p{ text-wrap: pretty; }
.surtitre{
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .38rem .85rem .38rem .7rem; border-radius: var(--r-pilule);
  background: var(--c-vert-pale); color: var(--c-vert-texte);
  font-family: var(--f-texte); font-size: var(--t-label); font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase; line-height: 1.2;
  margin-bottom: 1.2rem;
}
.surtitre::before{ content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c-vert); flex: none; }
.section--vert .surtitre, .section--lin .surtitre{ background: #fff; }
.sur-sombre .surtitre, .appel .surtitre{ background: rgba(255,255,255,.14); color: #fff; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.chapo{ font-size: var(--t-chapo); line-height: 1.65; color: var(--c-encre-2); max-width: 62ch; }
.sur-sombre .chapo{ color: rgba(255,255,255,.86); }
.entete-section{ margin-bottom: clamp(2.4rem, 4.5vw, 3.6rem); max-width: 820px; }
.entete-section h2{ margin-bottom: 1.1rem; }
.entete-section--centre{ margin-inline: auto; text-align: center; }
.entete-section--centre .chapo{ margin-inline: auto; }
.entete-section--ligne{ max-width: none; display: flex; align-items: end; justify-content: space-between; gap: 1.5rem 3rem; flex-wrap: wrap; }
.entete-section--ligne > div{ max-width: 780px; }

/* ---------- 3. Boutons et liens ---------- */
.btn{
  --btn-fond: var(--c-sapin);
  --btn-texte: #fff;
  --btn-bord: var(--c-sapin);
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 52px; padding: .85rem 1.6rem;
  border: 1px solid var(--btn-bord); border-radius: var(--r-pilule);
  background: var(--btn-fond); color: var(--btn-texte);
  font-family: var(--f-texte); font-size: .98rem; font-weight: 700; letter-spacing: .01em;
  text-decoration: none; line-height: 1.1;
  transition: background-color var(--t-doux), color var(--t-doux), border-color var(--t-doux), transform var(--t-doux), box-shadow var(--t-doux);
  cursor: pointer;
}
.btn:hover{ transform: translateY(-2px); }
.btn svg{ width: 18px; height: 18px; flex: none; }
.btn--primaire{ --btn-fond: var(--c-vert); --btn-texte: var(--c-encre); --btn-bord: var(--c-vert); }
.btn--primaire:hover{ --btn-fond: var(--c-vert-vif); --btn-bord: var(--c-vert-vif); box-shadow: 0 10px 26px rgba(130,160,80,.35); }
.btn--sapin:hover{ --btn-fond: var(--c-sapin-2); --btn-bord: var(--c-sapin-2); box-shadow: 0 10px 26px rgba(31,77,58,.25); }
.btn--verre, .btn--fantome{ --btn-fond: rgba(255,255,255,.14); --btn-texte: #fff; --btn-bord: rgba(255,255,255,.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.btn--verre:hover, .btn--fantome:hover{ --btn-fond: rgba(255,255,255,.24); --btn-bord: #fff; }
.btn--contour{ --btn-fond: transparent; --btn-texte: var(--c-sapin); --btn-bord: rgba(31,77,58,.3); }
.btn--contour:hover{ --btn-bord: var(--c-sapin); --btn-fond: rgba(31,77,58,.05); }
.btn--blanc{ --btn-fond: #fff; --btn-texte: var(--c-sapin); --btn-bord: #fff; }
.btn--compact{ min-height: 44px; padding: .55rem 1.15rem; font-size: .92rem; }
.btn--pleine{ width: 100%; }
.lien-fleche{
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 700; font-size: .98rem;
  text-decoration: none; color: var(--c-sapin);
  padding: .2rem 0;
  background: linear-gradient(var(--c-vert), var(--c-vert)) no-repeat left bottom / 100% 2px;
  transition: background-size var(--t-doux);
}
.lien-fleche:hover{ background-size: 40% 2px; }
.sur-sombre .lien-fleche{ color: #fff; }
.lien-fleche svg{ width: 16px; height: 16px; transition: transform var(--t-doux); }
.lien-fleche:hover svg{ transform: translateX(4px); }
.actions{ display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }

/* ---------- 4. Logo ---------- */
.logo{ display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; color: inherit; line-height: 1; }
.logo__img{ width: 50px; height: auto; flex: none; }
.logo__mots{ display: grid; gap: .22rem; }
.logo__petit{ font-family: var(--f-texte); font-size: .64rem; font-weight: 800; letter-spacing: .3em; text-transform: uppercase; }
.logo__grand{ font-family: var(--f-titre); font-weight: 600; font-size: 1.6rem; letter-spacing: -.01em; }

/* ---------- 5. Écran d'entrée (repris des maquettes d'hébergement) ---------- */
.loader{
  position: fixed; inset: 0; z-index: var(--z-loader);
  display: grid; place-items: center; overflow: hidden;
  background: var(--c-sapin-nuit);
  transform: translateY(0); transition: transform var(--t-rideau);
}
.loader[data-sortie="1"]{ transform: translateY(-100%); }
.loader__fond{ position: absolute; inset: 0; }
.loader__fond img{ width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; animation: loader-zoom 3.2s cubic-bezier(.2,.7,.2,1) both; }
.loader__voile{
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 55% at 50% 50%, rgba(12,30,20,.55) 0%, rgba(12,30,20,.15) 70%, rgba(12,30,20,0) 100%),
    linear-gradient(0deg, rgba(12,30,20,.45) 0%, rgba(12,30,20,0) 40%);
}
.loader__logo{
  position: relative; display: grid; place-items: center; gap: 1rem;
  color: #fff; text-align: center; padding-inline: 1rem;
}
.loader__logo > *{ animation: loader-monte .9s cubic-bezier(.2,.7,.2,1) both; }
.loader__logo > :nth-child(2){ animation-delay: .12s; }
.loader__logo > :nth-child(3){ animation-delay: .24s; }
.loader__embleme{ width: clamp(92px, 10vw, 140px); height: auto; filter: drop-shadow(0 6px 24px rgba(0,0,0,.35)); }
.loader__nom{ display: grid; gap: .5rem; text-shadow: 0 4px 30px rgba(0,0,0,.35); }
.loader__nom .logo__petit{ font-size: clamp(.72rem, 1.1vw, .9rem); }
.loader__nom .logo__grand{ font-size: clamp(3.2rem, 9vw, 7rem); font-weight: 500; line-height: .92; letter-spacing: -.03em; }
.loader__lieu{
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .45rem 1rem; border-radius: var(--r-pilule);
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-size: clamp(.7rem, 1.2vw, .84rem); font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
}
.loader__barre{ position: absolute; left: 50%; bottom: clamp(2rem, 6vh, 3.5rem); width: 120px; height: 2px; margin-left: -60px; background: rgba(255,255,255,.25); border-radius: 2px; overflow: hidden; }
.loader__barre span{ display: block; height: 100%; background: var(--c-vert); transform-origin: left; animation: loader-barre 2s linear both; }
@keyframes loader-zoom{ from{ transform: scale(1.12); } to{ transform: scale(1.02); } }
@keyframes loader-monte{ from{ opacity: 0; transform: translateY(18px); } to{ opacity: 1; transform: none; } }
@keyframes loader-barre{ from{ transform: scaleX(0); } to{ transform: scaleX(1); } }
.sans-js .loader{ display: none !important; }
@media (prefers-reduced-motion: reduce){ .loader{ display: none !important; } }

/* ---------- 6. En-tête ---------- */
.entete{
  position: sticky; top: 0; z-index: var(--z-entete);
  height: var(--h-entete);
  display: flex; align-items: center;
  color: var(--c-encre);
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--c-sauge-clair);
  transition: background-color var(--t-doux), box-shadow var(--t-doux), border-color var(--t-doux), color var(--t-doux);
}
.entete[data-etat="transparent"]{ background: transparent; border-bottom-color: transparent; color: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
.entete[data-etat="plein"]{ box-shadow: 0 10px 30px rgba(22,35,29,.08); }
/* Pages sans photo d'en-tête : l'en-tête reste clair, même avant le script */
.page-simple .entete[data-etat="transparent"]{ background: rgba(255,255,255,.88); color: var(--c-encre); border-bottom-color: var(--c-sauge-clair); }
.page-simple .entete[data-etat="transparent"] .logo__img--photo{ display: none; }
.page-simple .entete[data-etat="transparent"] .logo__img--clair{ display: block; }
.logo__img--photo{ display: none; }
.entete[data-etat="transparent"] .logo__img--photo{ display: block; }
.entete[data-etat="transparent"] .logo__img--clair{ display: none; }
/* Logo à gauche, menu au centre exact de la page, actions à droite (V3) */
.entete__grille{ display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.5rem; }
.entete__logo{ justify-self: start; }
.entete__actions{ justify-self: end; }
.nav__liste{ display: flex; gap: clamp(1rem, 2.2vw, 2.2rem); list-style: none; padding: 0; margin: 0; }
.nav__lien{
  position: relative; text-decoration: none;
  font-size: .97rem; font-weight: 700; letter-spacing: .005em;
  padding: .4rem 0;
}
.nav__lien::after{
  content: ""; position: absolute; left: 50%; bottom: -4px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%;
  background: var(--c-vert); transform: scale(0); transition: transform var(--t-doux);
}
.nav__lien:hover::after, .nav__lien[aria-current="page"]::after{ transform: scale(1); }
/* Sous-menu Hébergements (V4) : au survol, au clavier, ou au clic sur le chevron */
.nav__item{ position: relative; }
.nav__item--sous{ display: flex; align-items: center; gap: .1rem; }
.nav__ouvrir{ width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: inherit; transition: transform var(--t-doux), background-color var(--t-doux); }
.nav__ouvrir svg{ width: 16px; height: 16px; }
.nav__item--sous:hover .nav__ouvrir, .nav__item--sous.est-ouvert .nav__ouvrir{ transform: rotate(180deg); }
.sous-menu{
  position: absolute; top: calc(100% + 20px); left: 50%; z-index: 5;
  width: min(740px, 92vw); padding: .9rem; border-radius: var(--r-3);
  background: #fff; color: var(--c-encre); box-shadow: var(--ombre-2); border: 1px solid var(--c-sauge-clair);
  opacity: 0; visibility: hidden; transform: translate(-50%, 10px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.sous-menu::before{ content: ""; position: absolute; left: 0; right: 0; top: -22px; height: 22px; }
.nav__item--sous:hover .sous-menu, .nav__item--sous:focus-within .sous-menu, .nav__item--sous.est-ouvert .sous-menu{ opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.sous-menu__liste{ display: grid; grid-template-columns: 1fr 1fr; gap: .2rem; list-style: none; margin: 0; padding: 0; }
.sous-menu__lien{ display: flex; align-items: center; gap: .85rem; padding: .55rem; border-radius: var(--r-2); text-decoration: none; transition: background-color var(--t-doux); }
.sous-menu__lien:hover, .sous-menu__lien:focus-visible{ background: var(--c-vert-pale); }
.sous-menu__lien img{ width: 64px; height: 64px; object-fit: cover; border-radius: 12px; flex: none; }
.sous-menu__lien strong{ display: block; font-family: var(--f-titre); font-weight: 500; font-size: 1.06rem; line-height: 1.2; letter-spacing: -.01em; }
.sous-menu__lien small{ display: block; margin-top: .2rem; font-size: .8rem; font-weight: 600; color: var(--c-encre-2); }
.sous-menu__tout{ display: flex; align-items: center; justify-content: center; gap: .5rem; margin-top: .5rem; padding: .75rem; border-radius: var(--r-2); background: var(--c-creme); color: var(--c-sapin); font-weight: 700; font-size: .95rem; text-decoration: none; }
.sous-menu__tout:hover{ background: var(--c-vert-clair); }
.sous-menu__tout svg{ width: 16px; height: 16px; }
.entete__actions{ display: flex; align-items: center; gap: 1.1rem; }
.entete__tel{ display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; font-size: 1rem; text-decoration: none; white-space: nowrap; word-spacing: .1em; }
.btn, .pied__tel, .appel__numero, .coordonnee .grand{ word-spacing: .06em; }
.entete__tel svg{ width: 18px; height: 18px; color: var(--c-vert-texte); }
.entete[data-etat="transparent"] .entete__tel svg{ color: var(--c-vert); }
.burger{ display: none; width: 44px; height: 44px; place-items: center; color: inherit; }
.burger svg{ width: 26px; height: 26px; }
.burger__fermer{ display: none; }
.burger[aria-expanded="true"] .burger__ouvrir{ display: none; }
.burger[aria-expanded="true"] .burger__fermer{ display: block; }
.nav-mobile{
  position: fixed; inset: var(--h-entete) 0 0 0; z-index: calc(var(--z-entete) - 1);
  background: var(--c-blanc); color: var(--c-encre); padding: 1.5rem 0 2rem;
  transform: translateY(-8px); opacity: 0; visibility: hidden;
  transition: opacity var(--t-doux), transform var(--t-doux), visibility var(--t-doux);
  overflow-y: auto;
}
.nav-mobile.est-ouvert{ transform: none; opacity: 1; visibility: visible; }
.nav-mobile__liste{ list-style: none; padding: 0; margin: 0 0 2rem; }
.nav-mobile__lien{
  display: block; padding: .9rem 0; border-bottom: 1px solid var(--c-sauge-clair);
  font-family: var(--f-titre); font-weight: 500; font-size: 1.9rem; letter-spacing: -.02em; text-decoration: none;
}
.nav-mobile__lien[aria-current="page"]{ color: var(--c-vert-texte); font-style: italic; }
.nav-mobile__lien--parent{ border-bottom: 0; padding-bottom: .3rem; }
.nav-mobile__sous{ list-style: none; margin: 0; padding: 0 0 .9rem .9rem; display: grid; gap: .1rem; border-bottom: 1px solid var(--c-sauge-clair); }
.nav-mobile__sous a{ display: block; padding: .42rem 0; font-weight: 600; color: var(--c-encre-2); text-decoration: none; }
.nav-mobile__sous a::before{ content: ""; display: inline-block; width: 6px; height: 6px; margin-right: .6rem; border-radius: 50%; background: var(--c-vert); vertical-align: middle; }
.nav-mobile .btn + .btn{ margin-top: .8rem; }
@media (max-width: 1280px){ .entete__tel span{ display: none; } }
@media (max-width: 1080px){
  .entete__grille{ grid-template-columns: 1fr auto; }
  .nav{ display: none; }
  .burger{ display: grid; }
}
@media (max-width: 560px){
  .entete .btn--demande{ display: none; }
  .logo__grand{ font-size: 1.38rem; }
  .logo__img{ width: 42px; }
}

/* ---------- 7. Hero de l'accueil : la vidéo du domaine ---------- */
.hero{
  position: relative; overflow: hidden; isolation: isolate;
  min-height: max(640px, 100svh);
  margin-top: calc(-1 * var(--h-entete));
  display: grid; align-items: end;
  color: #fff; background: #0E1E15;
}
.hero__video{ position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.hero__voile{
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(8,20,13,.5) 0%, rgba(8,20,13,0) 24%),
    linear-gradient(0deg, rgba(8,20,13,.78) 0%, rgba(8,20,13,.3) 42%, rgba(8,20,13,0) 68%),
    linear-gradient(90deg, rgba(8,20,13,.45) 0%, rgba(8,20,13,0) 60%);
}
.hero__contenu{ padding-top: calc(var(--h-entete) + 4rem); padding-bottom: clamp(9rem, 15vw, 11.5rem); }
.hero__avis{
  display: inline-flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  padding: .5rem 1rem .5rem .85rem; margin-bottom: 1.6rem;
  border: 1px solid rgba(255,255,255,.32); border-radius: var(--r-pilule);
  background: rgba(255,255,255,.12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: .92rem; font-weight: 600; text-decoration: none;
}
.hero__avis strong{ font-weight: 800; }
.etoiles{ display: inline-flex; gap: 2px; color: #F2B544; }
.etoiles svg{ width: 16px; height: 16px; }
.hero__titre{ margin-bottom: 1.4rem; max-width: 1040px; }
.hero__nom{ display: block; font-size: var(--t-hero); font-weight: 500; line-height: .94; letter-spacing: -.035em; }
.hero__metier{ display: block; margin-top: .7rem; font-style: italic; font-weight: 400; font-size: clamp(1.55rem, 2.8vw, 2.6rem); line-height: 1.1; letter-spacing: -.015em; color: var(--c-vert-clair); }
.hero__sous-titre{ font-size: var(--t-chapo); max-width: 52ch; color: rgba(255,255,255,.9); margin-bottom: 2.1rem; }
.hero .actions{ gap: .8rem 1.4rem; }
.hero__film{ display: inline-flex; align-items: center; gap: .8rem; font-weight: 700; font-size: .98rem; color: #fff; }
.hero__film-rond{
  position: relative; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.5);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: background-color var(--t-doux), transform var(--t-doux);
}
.hero__film-rond::after{ content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid rgba(255,255,255,.6); animation: pulsation 2.4s ease-out infinite; }
.hero__film-rond svg{ width: 22px; height: 22px; margin-left: 2px; }
.hero__film:hover .hero__film-rond{ background: var(--c-vert); color: var(--c-encre); transform: scale(1.06); }
/* Entrée du texte du hero quand le rideau se lève (classe posée par loader.js) */
.js .hero__contenu > *{ opacity: 0; transform: translateY(26px); }
.hero-pret .hero__contenu > *{ animation: hero-entree 1s cubic-bezier(.2,.7,.2,1) both; }
.hero-pret .hero__contenu > :nth-child(2){ animation-delay: .1s; }
.hero-pret .hero__contenu > :nth-child(3){ animation-delay: .22s; }
.hero-pret .hero__contenu > :nth-child(4){ animation-delay: .34s; }
@keyframes hero-entree{ from{ opacity: 0; transform: translateY(26px); } to{ opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce){ .js .hero__contenu > *{ opacity: 1; transform: none; } .hero-pret .hero__contenu > *{ animation: none; } }
@keyframes pulsation{ from{ transform: scale(1); opacity: .9; } to{ transform: scale(1.6); opacity: 0; } }
.hero__legende{
  position: absolute; right: var(--gouttiere); bottom: clamp(8.4rem, 13.5vw, 10.6rem);
  display: flex; align-items: center; gap: .6rem;
  font-size: .76rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.85);
}
.hero__legende::before{ content: ""; width: 8px; height: 8px; border-radius: 50%; background: #E5484D; box-shadow: 0 0 0 4px rgba(229,72,77,.25); animation: clignote 1.6s ease-in-out infinite; }
@keyframes clignote{ 50%{ opacity: .35; } }
@media (max-width: 900px){ .hero__legende{ display: none; } }
@media (max-width: 767px){
  .hero{ min-height: max(680px, 100svh); }
  .hero__contenu{ padding-bottom: 9.5rem; }
  .hero__voile{
    background:
      linear-gradient(180deg, rgba(8,20,13,.55) 0%, rgba(8,20,13,0) 22%),
      linear-gradient(0deg, rgba(8,20,13,.9) 0%, rgba(8,20,13,.55) 50%, rgba(8,20,13,.1) 85%);
  }
}
@media (prefers-reduced-motion: reduce){ .hero__film-rond::after, .hero__legende::before{ animation: none; } }

/* Le film complet (YouTube), dans une fenêtre, chargé au clic */
.film{
  width: min(1100px, calc(100vw - 2rem)); max-width: none; padding: 0; border: 0; border-radius: var(--r-2);
  background: #000; color: #fff; overflow: visible;
}
.film::backdrop{ background: rgba(8,18,12,.9); backdrop-filter: blur(4px); }
.film__cadre{ position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-2); overflow: hidden; background: #000; }
.film__cadre iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.film__fermer{ position: absolute; top: -3.4rem; right: 0; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.14); color: #fff; }
.film__fermer:hover{ background: var(--c-vert); color: var(--c-encre); }
.film__fermer svg{ width: 22px; height: 22px; }
.film__note{ position: absolute; left: 0; right: 0; top: calc(100% + .8rem); text-align: center; font-size: .9rem; color: rgba(255,255,255,.75); }

/* ---------- 8. Bandeau des pages intérieures ---------- */
.bandeau{
  position: relative; overflow: hidden; isolation: isolate;
  min-height: clamp(440px, 62vh, 640px);
  margin-top: calc(-1 * var(--h-entete));
  display: grid; align-items: end; color: #fff; background: #0E1E15;
}
.bandeau__photo{ position: absolute; inset: 0; z-index: -2; }
.bandeau__photo img{ width: 100%; height: 100%; object-fit: cover; animation: bandeau-derive 14s ease-out both; }
@keyframes bandeau-derive{ from{ transform: scale(1.06); } to{ transform: scale(1); } }
.bandeau::after{
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(8,20,13,.5) 0%, rgba(8,20,13,0) 30%),
    linear-gradient(0deg, rgba(8,20,13,.78) 0%, rgba(8,20,13,.3) 55%, rgba(8,20,13,.05) 100%),
    linear-gradient(90deg, rgba(8,20,13,.5) 0%, rgba(8,20,13,0) 62%);
}
.bandeau__contenu{ padding-top: calc(var(--h-entete) + 3rem); padding-bottom: clamp(2.8rem, 5vw, 4.4rem); }
.ariane{ display: flex; gap: .5rem; flex-wrap: wrap; font-size: .88rem; font-weight: 600; color: rgba(255,255,255,.82); margin-bottom: 1.1rem; }
.ariane a{ text-decoration: none; }
.ariane a:hover{ text-decoration: underline; }
.bandeau h1{ font-size: clamp(2.6rem, 5.6vw, 5rem); line-height: .98; letter-spacing: -.03em; max-width: 18ch; margin-bottom: 1rem; text-shadow: 0 2px 30px rgba(0,0,0,.25); }
.bandeau__chapo{ font-size: var(--t-chapo); max-width: 60ch; color: rgba(255,255,255,.9); }
.bandeau--logement{ min-height: clamp(560px, 82vh, 780px); }
.bandeau__type{
  display: inline-flex; align-items: center; gap: .55rem; margin-bottom: 1rem;
  padding: .38rem .85rem .38rem .7rem; border-radius: var(--r-pilule);
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-size: var(--t-label); font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
}
.bandeau__type::before{ content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c-vert); }
.bandeau__infos{ display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 1.3rem 0 1.7rem; }
.bandeau__infos li{
  display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .9rem; border-radius: var(--r-pilule);
  background: rgba(255,255,255,.92); color: var(--c-sapin); font-size: .88rem; font-weight: 800;
}
.bandeau__infos svg{ width: 17px; height: 17px; color: var(--c-vert-texte); }
@media (prefers-reduced-motion: reduce){ .bandeau__photo img{ animation: none; } }

/* ---------- 9. Repères chiffrés sous le hero ---------- */
.reperes{ position: relative; z-index: 2; margin-top: clamp(-6.4rem, -8vw, -5.2rem); }
.reperes__grille{
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: #fff; color: var(--c-encre);
  border-radius: var(--r-3); box-shadow: var(--ombre-2);
  padding: 1.8rem .6rem;
}
.reperes__item{ padding: .2rem 1.4rem; border-left: 1px solid var(--c-sauge-clair); }
.reperes__item:first-child{ border-left: 0; }
.reperes__chiffre{ display: block; font-family: var(--f-titre); font-weight: 500; font-size: clamp(1.9rem, 2.8vw, 2.6rem); line-height: 1; letter-spacing: -.03em; color: var(--c-sapin); }
.reperes__chiffre small{ font-size: .5em; font-family: var(--f-texte); font-weight: 700; letter-spacing: 0; margin-left: .15em; color: var(--c-vert-texte); }
.reperes__libelle{ display: block; margin-top: .5rem; font-size: .9rem; line-height: 1.4; color: var(--c-encre-2); }
.reperes__item--vert{ background: var(--c-vert-pale); border-radius: var(--r-2); border-left: 0; margin-block: -.6rem; padding-block: .8rem; margin-right: .2rem; }
.reperes__item--vert + .reperes__item, .reperes__item + .reperes__item--vert{ border-left: 0; }
@media (max-width: 900px){
  .reperes__grille{ grid-template-columns: repeat(2, 1fr); padding: 1.2rem .5rem; row-gap: 1.3rem; }
  .reperes__item{ border-left: 0; padding-inline: 1rem; }
  .reperes__item:nth-child(even){ border-left: 1px solid var(--c-sauge-clair); }
  .reperes__item--vert{ grid-column: 1 / -1; margin: 0 .4rem; padding-block: 1rem; }
}

/* ---------- 10. Sections ---------- */
.section{ padding-block: var(--section); }
.section--lin{ background: var(--c-creme); }
.section--vert{ background: var(--c-vert-pale); }
.section--serree{ padding-block: clamp(3.5rem, 6vw, 5rem); }
.reperes + .section{ padding-top: clamp(4rem, 7vw, 6.5rem); }

/* ---------- 11. Hébergements de l'accueil : une ligne de trois qui défile (V3) ---------- */
.carrousel__commandes{ display: flex; gap: .6rem; }
.carrousel__bouton{
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; color: var(--c-sapin); border: 1px solid var(--c-sauge-clair);
  transition: background-color var(--t-doux), border-color var(--t-doux), opacity var(--t-doux);
}
.carrousel__bouton:hover:not(:disabled){ background: var(--c-vert); border-color: var(--c-vert); }
.carrousel__bouton:disabled{ opacity: .35; cursor: default; }
.carrousel__bouton svg{ width: 22px; height: 22px; }
.carrousel__piste{
  --ecart: 1.1rem;
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * var(--ecart)) / 3); gap: var(--ecart);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; border-radius: var(--r-3);
}
.carrousel__piste::-webkit-scrollbar{ display: none; }
.carrousel__piste:focus-visible{ outline-offset: 4px; }
.carrousel__bas{ display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-top: 1.5rem; }
.carrousel__progression{ flex: 1; max-width: 420px; height: 3px; border-radius: 3px; background: var(--c-sauge-clair); overflow: hidden; }
.carrousel__progression span{ display: block; height: 100%; width: var(--part, 60%); margin-left: var(--decalage, 0%); background: var(--c-sapin); border-radius: 3px; transition: margin-left .3s ease, width .3s ease; }
@media (max-width: 980px){ .carrousel__piste{ grid-auto-columns: calc((100% - var(--ecart)) / 2); } }
@media (max-width: 620px){ .carrousel__piste{ grid-auto-columns: 86%; --ecart: .8rem; } .carrousel__commandes{ display: none; } }
@media (prefers-reduced-motion: reduce){ .carrousel__piste{ scroll-behavior: auto; } }

.carte-heb{
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  aspect-ratio: 4 / 5; border-radius: var(--r-3); scroll-snap-align: start;
  background: var(--c-sapin-nuit); color: #fff; text-decoration: none;
}
.carte-heb > img{ position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s cubic-bezier(.2,.7,.2,1); }
.carte-heb::after{
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, rgba(8,20,13,.84) 0%, rgba(8,20,13,.4) 40%, rgba(8,20,13,0) 66%);
}
.carte-heb:hover > img{ transform: scale(1.06); }
.carte-heb__corps{ padding: 1.5rem 1.6rem 1.6rem; }
.carte-heb__type{ font-size: var(--t-label); font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--c-vert); }
.carte-heb h3{ font-size: clamp(1.55rem, 2.2vw, 2rem); margin-top: .45rem; }
.carte-heb p{ margin-top: .5rem; font-size: .96rem; line-height: 1.5; color: rgba(255,255,255,.86); }
.carte-heb__capacite{
  position: absolute; left: 1.1rem; top: 1.1rem;
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .42rem .9rem; border-radius: var(--r-pilule);
  background: rgba(255,255,255,.92); color: var(--c-sapin);
  font-size: .86rem; font-weight: 800;
}
.carte-heb__capacite svg{ width: 17px; height: 17px; color: var(--c-vert-texte); }
.carte-heb__fleche{
  position: absolute; right: 1.1rem; top: 1.1rem; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(8,20,13,.38); color: #fff; border: 1px solid rgba(255,255,255,.55);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transform: rotate(-45deg); transition: transform var(--t-doux), background-color var(--t-doux), color var(--t-doux);
}
.carte-heb__fleche svg{ width: 20px; height: 20px; }
.carte-heb:hover .carte-heb__fleche{ transform: none; background: var(--c-vert); color: var(--c-encre); border-color: var(--c-vert); }

/* Sommaire des hébergements (V4) : deux lignes de trois cartes, chacune vers sa page */
.grille-heb{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.carte-heb--appel{ background: var(--c-vert); color: var(--c-encre); justify-content: space-between; gap: 1.2rem; padding: 1.8rem; }
.carte-heb--appel::after{ display: none; }
.carte-heb--appel .carte-heb__type{ color: var(--c-sapin); }
.carte-heb--appel h3{ font-size: clamp(1.6rem, 2.4vw, 2.2rem); }
.carte-heb--appel p{ color: rgba(22,35,29,.78); }
.carte-heb__icone{ width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.55); color: var(--c-sapin); }
.carte-heb__icone svg{ width: 26px; height: 26px; }
.carte-heb--appel .btn{ align-self: flex-start; }
@media (max-width: 980px){ .grille-heb{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px){ .grille-heb{ grid-template-columns: 1fr; } .grille-heb .carte-heb{ aspect-ratio: 4 / 3.6; } .grille-heb .carte-heb--appel{ aspect-ratio: auto; } }

/* Les autres hébergements, sur une page d'hébergement : la carte de la page en cours est masquée */
.carrousel[data-courant="gites"] [data-carte="gites"], .carrousel[data-courant="douglas"] [data-carte="douglas"],
.carrousel[data-courant="truffier"] [data-carte="truffier"], .carrousel[data-courant="tilleul-acacia"] [data-carte="tilleul-acacia"],
.carrousel[data-courant="insolites"] [data-carte="insolites"], .carrousel[data-courant="bivouacs"] [data-carte="bivouacs"]{ display: none; }

/* La nuit à la belle étoile : les bivouacs, à part des hébergements en lits */
.belle-etoile{
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid; grid-template-columns: 1fr 1.1fr; overflow: hidden;
  background: var(--c-creme); border-radius: var(--r-3);
}
.belle-etoile__photo{ position: relative; min-height: 380px; }
.belle-etoile__photo img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.belle-etoile__texte{ padding: clamp(1.8rem, 4vw, 3.2rem); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 1rem; }
.belle-etoile__texte .surtitre{ margin-bottom: 0; background: #fff; }
.belle-etoile h3{ font-size: clamp(1.8rem, 3vw, 2.7rem); }
.belle-etoile__texte > p:not(.surtitre){ color: var(--c-encre-2); max-width: 52ch; }
.belle-etoile__chiffres{ display: flex; flex-wrap: wrap; gap: .5rem; }
.belle-etoile .pastille{ background: #fff; }
@media (max-width: 860px){ .belle-etoile{ grid-template-columns: 1fr; } .belle-etoile__photo{ min-height: 260px; } }

/* ---------- 12. Espace détente (accueil) ---------- */
.detente{ display: grid; grid-template-columns: 1.12fr .88fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.detente__photos{ position: relative; display: grid; grid-template-columns: 1.7fr 1fr; grid-template-rows: 1fr 1fr; gap: .9rem; }
.detente__photos .vignette{ border-radius: var(--r-2); }
.detente__photos .vignette:first-child{ grid-row: 1 / 3; min-height: 520px; border-radius: var(--r-3); }
.detente__badge{
  position: absolute; left: 1.1rem; bottom: 1.1rem; pointer-events: none;
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .55rem 1rem; border-radius: var(--r-pilule);
  background: rgba(255,255,255,.92); color: var(--c-sapin); box-shadow: var(--ombre-1);
  font-size: .9rem; font-weight: 800;
}
.detente__badge svg{ width: 18px; height: 18px; color: var(--c-terre); }
.detente__texte p + p{ margin-top: 1rem; }
.detente__texte h2{ margin-bottom: 1.1rem; }
.detente__texte .actions{ margin-top: 1.8rem; }
.atouts{ display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-top: 1.7rem; }
.atout{ display: flex; gap: .8rem; align-items: flex-start; padding: 1rem 1.1rem; background: #fff; border-radius: var(--r-2); box-shadow: 0 1px 2px rgba(22,35,29,.04); }
.atout__icone{ width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--c-vert-pale); color: var(--c-vert-texte); }
.atout__icone svg{ width: 20px; height: 20px; }
.atout span{ font-size: .95rem; line-height: 1.4; }
.atout strong{ display: block; font-size: 1rem; color: var(--c-encre); }
@media (max-width: 900px){
  .detente{ grid-template-columns: 1fr; }
  .detente__photos .vignette:first-child{ min-height: 300px; }
}
@media (max-width: 480px){ .atouts{ grid-template-columns: 1fr; } }

/* ---------- 13. Présentation : la Drôme des Collines (accueil) ---------- */
.presentation{ display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.presentation__texte p + p{ margin-top: 1rem; }
.presentation__texte h2, .duo__texte h2, .eco__texte h2, .acces h2, .contact h2{ margin-bottom: 1.1rem; }
.presentation__texte .actions{ margin-top: 2rem; }
.presentation__visuel{ position: relative; padding: 0 0 3.2rem 3.2rem; }
.presentation__grande{ width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: var(--r-3); box-shadow: var(--ombre-1); }
.presentation__petite{
  position: absolute; left: 0; bottom: 0; width: 44%; aspect-ratio: 1; object-fit: cover;
  border-radius: var(--r-2); border: 6px solid #fff; box-shadow: var(--ombre-2);
}
.presentation__cachet{
  position: absolute; right: -.6rem; top: -1.4rem;
  width: 148px; height: 148px; border-radius: 50%;
  display: grid; place-content: center; text-align: center; padding: 1rem;
  background: var(--c-vert); color: var(--c-encre);
  font-size: .82rem; font-weight: 700; line-height: 1.25; box-shadow: var(--ombre-1);
  transform: rotate(8deg);
}
.presentation__cachet strong{ display: block; font-family: var(--f-titre); font-weight: 500; font-size: 2.3rem; line-height: 1; letter-spacing: -.03em; margin-bottom: .25rem; color: var(--c-sapin); }
.presentation__etiquette{
  position: absolute; right: 1.1rem; bottom: 4.3rem;
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .45rem .9rem; border-radius: var(--r-pilule);
  background: rgba(8,20,13,.55); color: #fff; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
}
.presentation__etiquette svg{ width: 16px; height: 16px; color: var(--c-vert); }
@media (max-width: 900px){
  .presentation{ grid-template-columns: 1fr; }
  .presentation__visuel{ padding: 0 0 2.4rem 1.6rem; }
  .presentation__cachet{ width: 116px; height: 116px; right: .4rem; font-size: .72rem; }
  .presentation__cachet strong{ font-size: 1.8rem; }
  .presentation__etiquette{ bottom: 3.3rem; }
}

/* ---------- 15. Bloc écoresponsable ---------- */
.eco{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.eco__texte .chapo{ color: var(--c-encre-2); }
.eco__texte .actions{ margin-top: 2rem; }
.eco__chiffres{ display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; margin-top: 2rem; }
.eco__chiffre{ background: #fff; padding: 1.2rem 1.3rem; border-radius: var(--r-2); box-shadow: 0 1px 2px rgba(22,35,29,.04); }
.eco__chiffre strong{ display: block; font-family: var(--f-titre); font-weight: 500; font-size: clamp(1.8rem, 2.6vw, 2.4rem); line-height: 1.02; letter-spacing: -.03em; color: var(--c-sapin); }
.eco__chiffre span{ display: block; margin-top: .4rem; font-size: .94rem; line-height: 1.45; color: var(--c-encre-2); }
.eco__photo{ position: relative; }
.eco__photo img{ width: 100%; border-radius: var(--r-3); aspect-ratio: 1 / 1.08; object-fit: cover; box-shadow: var(--ombre-1); }
.eco__legende{
  position: absolute; right: 1rem; bottom: 1rem; left: 1rem;
  background: rgba(255,255,255,.92); color: var(--c-encre); padding: .85rem 1.1rem; border-radius: var(--r-2);
  font-size: .94rem; line-height: 1.4; display: flex; gap: .8rem; align-items: center;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.eco__legende svg{ width: 28px; height: 28px; flex: none; color: var(--c-terre); }
.eco > *, .eco__chiffres > *, .detente > *, .presentation > *, .duo > *{ min-width: 0; }
@media (max-width: 900px){ .eco{ grid-template-columns: 1fr; } .eco__photo img{ aspect-ratio: 4 / 3; } }
@media (max-width: 520px){ .eco__chiffres{ grid-template-columns: 1fr; } }

/* ---------- 16. Deux colonnes photo et texte ---------- */
.duo{ display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.duo--inverse{ grid-template-columns: .9fr 1.1fr; }
.duo--inverse .duo__photos{ order: 2; }
.duo__photos{ display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: .8rem; }
.duo__photos > :first-child{ grid-row: 1 / 3; }
.duo__photos img, .duo__photos .vignette{ width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-2); }
.duo__photos > :first-child, .duo__photos > :first-child img{ border-radius: var(--r-3); }
.duo__photos > :first-child img, .duo__photos > img:first-child{ min-height: 400px; }
.duo__texte p + p{ margin-top: 1rem; }
.duo__texte .actions{ margin-top: 1.8rem; }
.liste-coches{ display: grid; gap: .6rem; margin-top: 1.4rem; }
.liste-coches li{ display: flex; gap: .7rem; align-items: flex-start; line-height: 1.45; }
.liste-coches svg{ width: 22px; height: 22px; flex: none; color: var(--c-vert-texte); margin-top: .05rem; }
.sur-sombre .liste-coches svg{ color: var(--c-vert); }
@media (max-width: 900px){
  .duo, .duo--inverse{ grid-template-columns: 1fr; }
  .duo--inverse .duo__photos{ order: 0; }
  .duo__photos > :first-child img, .duo__photos > img:first-child{ min-height: 260px; }
}

/* ---------- 17. Événements et salles (tuiles) ---------- */
.tuiles{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
.tuile{
  position: relative; overflow: hidden; border-radius: var(--r-3);
  min-height: 380px; display: flex; align-items: flex-end; color: #fff; text-decoration: none;
  isolation: isolate; transition: transform var(--t-doux), box-shadow var(--t-doux);
}
.tuile img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.4s cubic-bezier(.2,.7,.2,1); }
.tuile::after{ content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(8,20,13,.86) 0%, rgba(8,20,13,.3) 50%, rgba(8,20,13,0) 75%); }
.tuile:hover{ transform: translateY(-4px); box-shadow: var(--ombre-2); }
.tuile:hover img{ transform: scale(1.06); }
.tuile__corps{ padding: 1.4rem 1.4rem 1.5rem; }
.tuile h3{ font-size: 1.65rem; margin-bottom: .4rem; }
.tuile p{ font-size: .95rem; color: rgba(255,255,255,.88); line-height: 1.45; }
@media (max-width: 980px){ .tuiles{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .tuiles{ grid-template-columns: 1fr; } .tuile{ min-height: 280px; } }

.salles{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.salle{ background: #fff; border-radius: var(--r-3); overflow: hidden; box-shadow: var(--ombre-1); display: flex; flex-direction: column; }
.salle__photo{ aspect-ratio: 3 / 2; overflow: hidden; }
.salle__photo img, .salle__photo .vignette img{ width: 100%; height: 100%; object-fit: cover; }
.salle__photo .vignette{ width: 100%; height: 100%; display: block; border-radius: 0; }
.salle__corps{ padding: 1.4rem 1.5rem 1.6rem; display: grid; gap: .6rem; }
.salle__chiffres{ display: flex; flex-wrap: wrap; gap: .5rem; }
.salles-ligne{ margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.salles-ligne strong{ margin-right: .4rem; }
.salles-ligne .lien-fleche{ margin-left: .4rem; }
.pastille{
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .32rem .75rem; border-radius: var(--r-pilule);
  background: var(--c-vert-pale); color: var(--c-sapin); font-size: .88rem; font-weight: 700;
}
.pastille svg{ width: 15px; height: 15px; color: var(--c-vert-texte); }
.section--lin .pastille, .section--vert .pastille{ background: #fff; }
.sur-sombre .pastille{ background: rgba(255,255,255,.12); color: #fff; }
.salle p{ color: var(--c-encre-2); font-size: .98rem; }
@media (max-width: 900px){ .salles{ grid-template-columns: 1fr; } .salle{ display: grid; grid-template-columns: 1fr 1.2fr; } .salle__photo{ aspect-ratio: auto; } }
@media (max-width: 560px){ .salle{ display: flex; } .salle__photo{ aspect-ratio: 3 / 2; } }

/* Prochain rendez-vous (accueil, lu dans l'agenda) */
.prochain{
  margin-top: 1.6rem; display: grid; grid-template-columns: auto 1fr auto; gap: 1.4rem; align-items: center;
  background: var(--c-vert); color: var(--c-encre); border-radius: var(--r-3); padding: 1.2rem 1.4rem 1.2rem 1.6rem;
}
.prochain[hidden]{ display: none; }
.prochain__etiquette{ display: inline-flex; align-items: center; gap: .5rem; font-size: var(--t-label); font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--c-sapin); }
.prochain__etiquette::before{ content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c-sapin); animation: clignote 1.6s ease-in-out infinite; }
.prochain__titre{ font-family: var(--f-titre); font-weight: 500; font-size: 1.35rem; line-height: 1.2; letter-spacing: -.01em; }
.prochain__date{ color: rgba(22,35,29,.75); font-size: .95rem; }
@media (max-width: 760px){ .prochain{ grid-template-columns: 1fr; gap: .5rem; } }

/* ---------- 18. Activités sur place ---------- */
.puces{ display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.5rem; }
.puce{
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem .95rem; border-radius: var(--r-pilule);
  background: var(--c-creme); font-weight: 600; font-size: .95rem;
  transition: background-color var(--t-doux), transform var(--t-doux);
}
.puce:hover{ background: var(--c-vert-clair); transform: translateY(-1px); }
.puce svg{ width: 16px; height: 16px; color: var(--c-vert-texte); }
.section--lin .puce{ background: #fff; }

/* ---------- 19. Vidéo dans une page (cadre lancé au clic) ---------- */
.video{ max-width: 1040px; margin-inline: auto; }
.video__cadre{ position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-3); overflow: hidden; background: #000; box-shadow: var(--ombre-2); }
.video__cadre img, .video__cadre iframe{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.video__lancer{ position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(0deg, rgba(8,20,13,.5), rgba(8,20,13,.05)); color: #fff; }
.video__bouton{
  display: inline-flex; align-items: center; gap: .8rem;
  background: var(--c-vert); color: var(--c-encre); border-radius: var(--r-pilule);
  padding: .9rem 1.5rem .9rem 1.1rem; font-weight: 700; font-size: 1.02rem; box-shadow: var(--ombre-2);
  transition: transform var(--t-doux);
}
.video__lancer:hover .video__bouton{ transform: scale(1.04); }
.video__bouton svg{ width: 30px; height: 30px; }
.video__note{ margin-top: .9rem; font-size: .9rem; color: var(--c-encre-2); text-align: center; }

/* ---------- 20. Avis ---------- */
.avis{ display: grid; grid-template-columns: .82fr 2.18fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.avis__note{
  position: sticky; top: calc(var(--h-entete) + 1.5rem);
  background: var(--c-vert-pale); color: var(--c-encre); border-radius: var(--r-3); padding: 2.1rem 1.9rem;
}
.avis__chiffre{ font-family: var(--f-titre); font-weight: 500; font-size: 5rem; line-height: .95; letter-spacing: -.04em; color: var(--c-sapin); }
.avis__chiffre small{ font-size: .38em; color: var(--c-encre-2); font-weight: 400; letter-spacing: 0; }
.avis__note .etoiles{ margin-top: .6rem; }
.avis__note .etoiles svg{ width: 22px; height: 22px; }
.avis__total{ margin-top: .8rem; color: var(--c-encre-2); }
.avis__total strong{ color: var(--c-encre); }
.avis__note .btn{ margin-top: 1.6rem; }
.avis__liste{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.avis-carte{
  position: relative; background: #fff; border: 1px solid var(--c-sauge-clair); border-radius: var(--r-2);
  padding: 1.5rem 1.6rem; display: flex; flex-direction: column; gap: .8rem;
  transition: box-shadow var(--t-doux), transform var(--t-doux), border-color var(--t-doux);
}
.avis-carte:hover{ box-shadow: var(--ombre-1); transform: translateY(-2px); border-color: transparent; }
.avis-carte::before{
  content: "\201D"; position: absolute; right: 1.1rem; bottom: -1.6rem; pointer-events: none;
  font-family: var(--f-titre); font-size: 6rem; line-height: 1; color: var(--c-vert-pale);
}
.avis-carte > *{ position: relative; }
.avis-carte__haut{ display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.avis-carte blockquote{ font-size: 1.02rem; line-height: 1.6; }
.avis-carte blockquote::before{ content: "«\00a0"; color: var(--c-vert-texte); font-weight: 700; }
.avis-carte blockquote::after{ content: "\00a0»"; color: var(--c-vert-texte); font-weight: 700; }
.avis-carte__auteur{ margin-top: auto; display: flex; align-items: center; gap: .7rem; font-size: .92rem; color: var(--c-encre-2); }
.avis-carte__initiale{
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--c-vert); color: var(--c-sapin); font-weight: 600; font-family: var(--f-titre); font-size: 1.1rem;
}
.avis-carte__auteur strong{ display: block; color: var(--c-encre); }
.avis-carte__source{ font-size: .82rem; font-weight: 600; color: var(--c-encre-2); display: inline-flex; gap: .3rem; align-items: center; }
@media (max-width: 980px){ .avis{ grid-template-columns: 1fr; } .avis__note{ position: static; } }
@media (max-width: 680px){ .avis__liste{ grid-template-columns: 1fr; } }

/* ---------- 21. Les activités à voir ---------- */
.voir{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.voir__carte{ position: relative; border-radius: var(--r-3); overflow: hidden; background: var(--c-sapin-nuit); color: #fff; min-height: 320px; display: flex; align-items: flex-end; isolation: isolate; }
.voir__carte img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.4s cubic-bezier(.2,.7,.2,1); }
.voir__carte:hover img{ transform: scale(1.05); }
.voir__carte::after{ content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(8,20,13,.86) 0%, rgba(8,20,13,.2) 52%, rgba(8,20,13,0) 100%); }
.voir__corps{ padding: 1.3rem 1.4rem; }
.voir__temps{
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .7rem; border-radius: var(--r-pilule); background: var(--c-vert); color: var(--c-encre);
  font-size: .8rem; font-weight: 800; letter-spacing: .04em;
}
.voir__temps svg{ width: 15px; height: 15px; }
.voir__carte h3{ font-size: 1.45rem; margin-top: .55rem; }
.voir__credit{ position: absolute; top: .7rem; right: .8rem; font-size: .72rem; color: rgba(255,255,255,.8); text-shadow: 0 1px 2px rgba(0,0,0,.5); }
@media (max-width: 900px){ .voir{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .voir{ grid-template-columns: 1fr; } .voir__carte{ min-height: 250px; } }

/* ---------- 22. Accès ---------- */
.acces{ display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: stretch; }
.trajets{ display: grid; gap: 0; margin-top: 1.4rem; }
.trajet{ display: grid; grid-template-columns: 1fr auto; gap: 1rem; padding: .9rem 0; border-bottom: 1px solid var(--c-sauge-clair); align-items: baseline; }
.trajet:first-child{ border-top: 1px solid var(--c-sauge-clair); }
.trajet__lieu{ font-weight: 700; }
.trajet__lieu small{ display: block; font-weight: 500; color: var(--c-encre-2); font-size: .9rem; }
.trajet__temps{ font-family: var(--f-titre); font-weight: 500; font-size: 1.45rem; letter-spacing: -.02em; color: var(--c-sapin); white-space: nowrap; }
.adresse{ margin-top: 1.6rem; display: flex; gap: .7rem; align-items: flex-start; }
.adresse svg{ width: 22px; height: 22px; flex: none; color: var(--c-terre); margin-top: .15rem; }
.acces__photo img{ width: 100%; height: 100%; min-height: 380px; object-fit: cover; border-radius: var(--r-3); box-shadow: var(--ombre-1); }
.carte-google{ border-radius: var(--r-3); overflow: hidden; min-height: 440px; box-shadow: var(--ombre-1); background: var(--c-sauge-clair); }
.carte-google iframe{ width: 100%; height: 100%; min-height: 440px; border: 0; }
@media (max-width: 900px){ .acces{ grid-template-columns: 1fr; } .carte-google, .carte-google iframe{ min-height: 340px; } }

/* ---------- 23. Appel au contact ---------- */
.appel{ position: relative; overflow: hidden; isolation: isolate; color: #fff; padding-block: clamp(5rem, 10vw, 8.5rem); background: #0E1E15; }
.appel__photo{ position: absolute; inset: 0; z-index: -2; }
.appel__photo img{ width: 100%; height: 100%; object-fit: cover; }
.appel::after{ content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8,20,13,.82) 0%, rgba(8,20,13,.55) 55%, rgba(8,20,13,.2) 100%); }
.appel__grille{ display: grid; grid-template-columns: 1.2fr .8fr; gap: 2rem; align-items: center; }
.appel h2{ margin-bottom: 1rem; font-size: clamp(2.4rem, 4.8vw, 4.2rem); }
.appel__texte > p:not(.surtitre){ color: rgba(255,255,255,.9); max-width: 52ch; font-size: var(--t-chapo); }
.appel__tel{ display: grid; gap: 1rem; justify-items: start; padding: 1.8rem; border-radius: var(--r-3); background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.appel__tel small{ font-size: .8rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--c-vert); }
.appel__numero{ font-family: var(--f-titre); font-weight: 500; font-size: clamp(2rem, 3.6vw, 3rem); letter-spacing: -.02em; text-decoration: none; line-height: 1; display: inline-flex; gap: .7rem; align-items: center; }
.appel__numero svg{ width: .75em; height: .75em; color: var(--c-vert); }
.appel__grille--formulaire{ grid-template-columns: .85fr 1.15fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.appel__texte .appel__tel{ margin-top: 2rem; }
.appel .lien-fleche{ color: #fff; }
.appel .formulaire{ color: var(--c-encre); border-color: transparent; box-shadow: var(--ombre-2); }
.appel .formulaire .champ{ background: #fff; }
@media (max-width: 960px){ .appel__grille, .appel__grille--formulaire{ grid-template-columns: 1fr; } }
.appel__grille > *{ min-width: 0; }

/* ---------- 24. Pied de page (clair) ---------- */
.pied{ background: var(--c-creme-2); color: var(--c-encre-2); padding-top: clamp(3.5rem, 6vw, 5rem); font-size: .98rem; }
.pied__grille{ display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 2.5rem; padding-bottom: 3rem; }
.pied .logo{ color: var(--c-encre); margin-bottom: 1.2rem; }
.pied h2{ font-family: var(--f-texte); font-size: var(--t-label); font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--c-encre); margin-bottom: 1rem; }
.pied ul{ display: grid; gap: .55rem; list-style: none; padding: 0; margin: 0; }
.pied a{ text-decoration: none; }
.pied a:hover{ color: var(--c-sapin); text-decoration: underline; text-decoration-color: var(--c-vert); text-underline-offset: 3px; }
.pied__tel{ font-family: var(--f-titre); font-weight: 500; font-size: 1.55rem; letter-spacing: -.02em; color: var(--c-sapin); }
.pied__reseaux{ display: flex; gap: .6rem; margin-top: 1.2rem; }
.pied__reseaux a{ width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--c-sapin); }
.pied__reseaux a:hover{ background: var(--c-vert); color: var(--c-encre); }
.pied__reseaux svg{ width: 20px; height: 20px; }
.pied__bas{ background: linear-gradient(rgba(22,35,29,.1), rgba(22,35,29,.1)) no-repeat top center / calc(100% - 2 * var(--gouttiere)) 1px; padding-block: 1.3rem 1.5rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .8rem 2rem; font-size: .88rem; }
.pied__bas ul{ display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
@media (max-width: 900px){ .pied__grille{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .pied__grille{ grid-template-columns: 1fr; gap: 2rem; } .pied{ padding-bottom: 76px; } }

/* ---------- 25. Barre d'appel mobile ---------- */
.barre-appel{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-barre);
  display: none; grid-template-columns: 1fr 1fr; gap: .6rem;
  padding: .7rem var(--gouttiere) calc(.7rem + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--c-sauge-clair); box-shadow: 0 -10px 30px rgba(22,35,29,.1);
  transform: translateY(110%); transition: transform var(--t-doux);
}
.barre-appel.est-visible{ transform: none; }
.barre-appel .btn{ min-height: 46px; padding-inline: .8rem; font-size: .93rem; }
@media (max-width: 767px){ .barre-appel{ display: grid; } }

/* ---------- 26. Visionneuse et vignettes ---------- */
.vignette{ display: block; position: relative; overflow: hidden; border-radius: var(--r-1); cursor: zoom-in; background: var(--c-sauge-clair); }
.vignette img{ width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2,.7,.2,1), opacity .3s; }
.vignette:hover img{ transform: scale(1.05); }
.visionneuse{
  width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: rgba(10,18,13,.96); color: #fff;
}
.visionneuse::backdrop{ background: rgba(10,18,13,.9); }
.visionneuse__scene{ height: 100%; display: grid; grid-template-rows: 1fr auto; place-items: center; padding: 4.5rem 4.5rem 1.5rem; }
/* La photo entière, jamais recadrée, au plus 72 % de la hauteur de l'écran (retour de Tom) */
.visionneuse__scene img{ max-width: min(1400px, 100%); max-height: 72vh; width: auto; height: auto; object-fit: contain; border-radius: var(--r-1); }
.visionneuse__bas{ display: flex; gap: 1.5rem; align-items: center; justify-content: center; margin-top: 1rem; font-size: 1rem; color: rgba(255,255,255,.8); text-align: center; }
.visionneuse__compteur{ font-weight: 700; color: #fff; }
.visionneuse__fermer, .visionneuse__prec, .visionneuse__suiv{
  position: absolute; width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(255,255,255,.1); color: #fff;
}
.visionneuse__fermer:hover, .visionneuse__prec:hover, .visionneuse__suiv:hover{ background: var(--c-vert); color: var(--c-encre); }
.visionneuse__fermer svg, .visionneuse__prec svg, .visionneuse__suiv svg{ width: 24px; height: 24px; }
.visionneuse__fermer{ top: 1rem; right: 1rem; }
.visionneuse__prec{ left: 1rem; top: 50%; transform: translateY(-50%); }
.visionneuse__suiv{ right: 1rem; top: 50%; transform: translateY(-50%); }
@media (max-width: 700px){
  .visionneuse__scene{ padding: 4.5rem .8rem 1.5rem; }
  .visionneuse__prec, .visionneuse__suiv{ top: auto; bottom: 1rem; transform: none; }
}

/* ---------- 27. Apparitions au défilement ---------- */
.js .apparait{ opacity: 0; transform: translateY(26px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.js .apparait.est-vu{ opacity: 1; transform: none; }
.js .tuiles .apparait:nth-child(2), .js .voir .apparait:nth-child(2), .js .avis__liste .apparait:nth-child(2){ transition-delay: .08s; }
.js .tuiles .apparait:nth-child(3), .js .voir .apparait:nth-child(3), .js .avis__liste .apparait:nth-child(3){ transition-delay: .16s; }
.js .tuiles .apparait:nth-child(4), .js .voir .apparait:nth-child(4){ transition-delay: .24s; }
@media (prefers-reduced-motion: reduce){ .js .apparait{ opacity: 1; transform: none; transition: none; } }

/* ---------- 28. Formulaires ---------- */
.formulaire{ background: #fff; border-radius: var(--r-3); box-shadow: var(--ombre-1); padding: clamp(1.5rem, 3vw, 2.5rem); border: 1px solid var(--c-sauge-clair); }
.formulaire h2, .formulaire h3{ margin-bottom: .6rem; }
.formulaire__intro{ color: var(--c-encre-2); margin-bottom: 1.6rem; }
.champs{ display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.1rem; }
.champs .large{ grid-column: 1 / -1; }
.etiquette{ display: block; font-weight: 700; font-size: .95rem; margin-bottom: .4rem; }
.etiquette small{ font-weight: 500; color: var(--c-encre-2); }
.champ{
  width: 100%; min-height: 52px; padding: .75rem 1rem;
  border: 1px solid var(--c-sauge); border-radius: var(--r-1); background: var(--c-blanc);
  transition: border-color .2s, box-shadow .2s;
}
textarea.champ{ min-height: 130px; resize: vertical; }
.champ:focus{ outline: none; border-color: var(--c-sapin); box-shadow: 0 0 0 4px rgba(173,198,123,.45); }
.champ[aria-invalid="true"]{ border-color: var(--c-erreur); box-shadow: 0 0 0 3px rgba(180,35,24,.12); }
.cases{ display: flex; flex-wrap: wrap; gap: .5rem; }
.case{ position: relative; }
.case input{ position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.case span{ display: inline-flex; align-items: center; padding: .5rem .95rem; border: 1px solid var(--c-sauge); border-radius: var(--r-pilule); font-size: .95rem; background: var(--c-blanc); transition: background-color .2s, border-color .2s; }
.case input:checked + span{ background: var(--c-vert); border-color: var(--c-vert); font-weight: 700; }
.case input:focus-visible + span{ outline: 2px solid var(--c-sapin); outline-offset: 2px; }
.formulaire__erreurs{ margin-top: 1rem; padding: .8rem 1rem; border-radius: var(--r-1); background: #FBEAE8; color: var(--c-erreur); font-weight: 600; }
.formulaire__pied{ margin-top: 1.4rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; }
.formulaire__mention{ font-size: .88rem; color: var(--c-encre-2); max-width: 46ch; }
.merci{ text-align: center; padding: 2rem 1rem; }
.merci svg{ width: 56px; height: 56px; color: var(--c-vert-texte); margin: 0 auto 1rem; }
.merci h3{ margin-bottom: .6rem; }
@media (max-width: 620px){ .champs{ grid-template-columns: 1fr; } }

/* ---------- 29. Contact ---------- */
.contact{ display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.coordonnees{ display: grid; gap: 1.2rem; }
.coordonnee{ display: flex; gap: .9rem; align-items: flex-start; }
.coordonnee__icone{ width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--c-vert-pale); flex: none; }
.coordonnee__icone svg{ width: 22px; height: 22px; color: var(--c-vert-texte); }
.coordonnee strong{ display: block; font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--c-encre-2); }
.coordonnee a, .coordonnee span{ font-size: 1.1rem; font-weight: 700; text-decoration: none; }
.coordonnee .grand{ font-family: var(--f-titre); font-weight: 500; font-size: 1.85rem; letter-spacing: -.02em; line-height: 1.1; color: var(--c-sapin); }
.contact .carte-google{ margin-top: 1.6rem; }
.contact .carte-google, .contact .carte-google iframe{ min-height: 340px; }
.annonces{ display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
@media (max-width: 960px){ .contact{ grid-template-columns: 1fr; } }

/* ---------- 30. FAQ ---------- */
.faq{ max-width: 900px; margin-inline: auto; display: grid; gap: .7rem; }
.faq details{ background: #fff; border: 1px solid var(--c-sauge-clair); border-radius: var(--r-2); transition: box-shadow var(--t-doux); }
.faq details[open]{ box-shadow: var(--ombre-1); border-color: transparent; }
.faq summary{
  list-style: none; cursor: pointer; padding: 1.2rem 1.5rem; display: flex; justify-content: space-between; gap: 1rem; align-items: center;
  font-family: var(--f-titre); font-weight: 500; font-size: 1.25rem; line-height: 1.25; letter-spacing: -.01em;
}
.faq summary::-webkit-details-marker{ display: none; }
.faq summary svg{ width: 34px; height: 34px; padding: 6px; border-radius: 50%; background: var(--c-vert-pale); flex: none; color: var(--c-vert-texte); transition: transform var(--t-doux), background-color var(--t-doux); }
.faq details[open] summary svg{ transform: rotate(45deg); background: var(--c-vert); color: var(--c-sapin); }
.faq details > p{ padding: 0 1.5rem 1.3rem; color: var(--c-encre-2); max-width: 70ch; }

/* ---------- 31. Page hébergements ---------- */
.sous-nav{ position: sticky; top: var(--h-entete); z-index: 50; background: rgba(255,255,255,.92); border-bottom: 1px solid var(--c-sauge-clair); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.sous-nav ul{ display: flex; gap: .4rem; overflow-x: auto; padding: .7rem 0; margin: 0; list-style: none; scrollbar-width: none; }
.sous-nav ul::-webkit-scrollbar{ display: none; }
.sous-nav a{ display: inline-flex; white-space: nowrap; padding: .5rem 1rem; border-radius: var(--r-pilule); text-decoration: none; font-weight: 700; font-size: .95rem; color: var(--c-encre-2); transition: background-color var(--t-doux), color var(--t-doux); }
.sous-nav a:hover{ background: var(--c-vert-pale); color: var(--c-sapin); }
.sous-nav a[aria-current="true"]{ background: var(--c-sapin); color: #fff; }

.famille + .famille{ border-top: 1px solid var(--c-sauge-clair); }
.famille__tete{ display: flex; justify-content: space-between; gap: 2rem; align-items: end; flex-wrap: wrap; margin-bottom: clamp(2rem, 4vw, 3rem); }
.famille__tete > div{ max-width: 780px; }
.famille__tete h2{ margin-bottom: .8rem; }
.logements{ display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); }
.logement{ display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(1.6rem, 4vw, 3.4rem); align-items: start; scroll-margin-top: calc(var(--h-entete) + 80px); }
.logement--inverse{ grid-template-columns: .85fr 1.15fr; }
.logement--inverse .logement__photos{ order: 2; }
.logement__photos{ display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.logement__photos .vignette{ aspect-ratio: 1; border-radius: var(--r-1); }
.logement__photos .vignette--grande{ grid-column: 1 / -1; aspect-ratio: 16 / 10; border-radius: var(--r-3); }
.logement__plus{ grid-column: 1 / -1; font-size: .9rem; color: var(--c-encre-2); display: flex; align-items: center; gap: .4rem; margin-top: .2rem; }
.logement__plus svg{ width: 16px; height: 16px; }
.logement__corps h3{ font-size: clamp(1.8rem, 2.8vw, 2.4rem); margin-bottom: .7rem; }
.logement__pastilles{ display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.1rem; }
.logement__corps > p{ color: var(--c-encre-2); }
.couchages{ margin-top: 1.4rem; border: 1px solid var(--c-sauge-clair); border-radius: var(--r-2); overflow: hidden; background: #fff; }
.couchages__titre{ display: flex; align-items: center; gap: .5rem; padding: .8rem 1.1rem; background: var(--c-creme); font-weight: 800; font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; }
.couchages__titre svg{ width: 20px; height: 20px; color: var(--c-vert-texte); }
.couchages ul{ display: grid; list-style: none; padding: 0; margin: 0; }
.couchages li{ display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 1.1rem; border-top: 1px solid var(--c-sauge-clair); font-size: .98rem; }
.couchages li span:last-child{ font-weight: 700; text-align: right; }
.couchages--double{ display: grid; grid-template-columns: 1fr; }
.couchages--double > div + div{ border-top: 1px solid var(--c-sauge-clair); }
.logement__actions{ margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .7rem; }
@media (max-width: 960px){
  .logement, .logement--inverse{ grid-template-columns: 1fr; }
  .logement--inverse .logement__photos{ order: 0; }
}

/* « Compris » : petits blocs sur deux lignes, trois par ligne (icône + libellé court) */
.compris{ display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
.compris__item{ display: flex; align-items: center; gap: .9rem; padding: 1.05rem 1.15rem; background: #fff; border: 1px solid var(--c-sauge-clair); border-radius: var(--r-2); font-weight: 700; line-height: 1.3; }
.compris__item svg{ width: 40px; height: 40px; padding: 8px; border-radius: 50%; background: var(--c-vert-pale); flex: none; color: var(--c-vert-texte); }
.compris__item small{ display: block; font-weight: 500; color: var(--c-encre-2); font-size: .9rem; }
@media (max-width: 760px){ .compris{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px){ .compris{ grid-template-columns: 1fr; } }

/* Logements sans photo (en attente de leurs photos) */
.petits{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: clamp(2rem, 4vw, 3rem); }
.petit{ background: #fff; border: 1px solid var(--c-sauge-clair); border-radius: var(--r-2); padding: 1.5rem; display: grid; gap: .6rem; align-content: start; scroll-margin-top: calc(var(--h-entete) + 80px); }
.petit__icone{ width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--c-vert-pale); }
.petit__icone svg{ width: 26px; height: 26px; color: var(--c-vert-texte); }
.petit h3{ font-size: 1.45rem; }
.petit p{ color: var(--c-encre-2); font-size: .98rem; }
.petit .pastille, .petit .lien-fleche{ justify-self: start; }
@media (max-width: 900px){ .petits{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .petits{ grid-template-columns: 1fr; } }

.encart{ display: flex; gap: 1rem; align-items: flex-start; background: var(--c-vert-pale); border-radius: var(--r-2); padding: 1.2rem 1.4rem; }
.encart svg{ width: 26px; height: 26px; flex: none; color: var(--c-vert-texte); }
.encart p{ color: var(--c-encre); }
.bon-a-savoir{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.2rem; }
@media (max-width: 860px){ .bon-a-savoir{ grid-template-columns: 1fr; } }

/* ---------- 32. Page événements : agenda et formules ---------- */
.agenda{ display: grid; gap: 1.2rem; }
.agenda__vide{ padding: 1.6rem; border: 1px dashed var(--c-sauge); border-radius: var(--r-2); color: var(--c-encre-2); background: #fff; }
.rdv{ display: grid; grid-template-columns: 300px 1fr; background: #fff; border-radius: var(--r-3); overflow: hidden; box-shadow: var(--ombre-1); }
.rdv__photo{ position: relative; min-height: 230px; background: var(--c-sauge-clair); }
.rdv__photo img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rdv__date{
  position: absolute; left: 1rem; top: 1rem; background: #fff; color: var(--c-encre); border-radius: var(--r-2);
  padding: .55rem .8rem; text-align: center; line-height: 1.05; min-width: 66px; box-shadow: var(--ombre-1);
}
.rdv__date b{ display: block; font-family: var(--f-titre); font-weight: 500; font-size: 1.85rem; color: var(--c-sapin); }
.rdv__date span{ font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.rdv__corps{ padding: 1.5rem 1.7rem; display: grid; gap: .65rem; align-content: start; }
.rdv__etat{ justify-self: start; font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; padding: .28rem .7rem; border-radius: var(--r-pilule); background: var(--c-vert); color: var(--c-sapin); }
.rdv__etat--passe{ background: var(--c-sauge-clair); color: var(--c-encre-2); }
.rdv h3{ font-size: clamp(1.45rem, 2.2vw, 1.95rem); }
.rdv__infos{ display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; color: var(--c-encre-2); font-size: .95rem; }
.rdv__infos span{ display: inline-flex; gap: .4rem; align-items: center; }
.rdv__infos svg{ width: 17px; height: 17px; color: var(--c-vert-texte); }
.rdv__texte{ color: var(--c-encre); }
.rdv__pied{ display: flex; flex-wrap: wrap; gap: .7rem 1.2rem; align-items: center; margin-top: .3rem; }
.rdv__tarif{ font-weight: 700; }
.rdv--passe{ opacity: .9; }
.rdv--passe .rdv__photo img{ filter: saturate(.7); }
.agenda__titre{ font-family: var(--f-titre); font-weight: 500; font-size: 1.5rem; margin: 2.2rem 0 1rem; }
.bandeau-demo{ display: flex; flex-wrap: wrap; gap: .8rem 1.4rem; align-items: center; justify-content: space-between; margin-bottom: 1.4rem; padding: .9rem 1.2rem; border-radius: var(--r-2); background: #FFF6E5; border: 1px solid #F0D9A8; color: #6B4A0F; font-size: .96rem; }
.bandeau-demo[hidden]{ display: none; }
@media (max-width: 760px){ .rdv{ grid-template-columns: 1fr; } .rdv__photo{ min-height: 210px; } }

.formules{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; align-items: stretch; }
.formule{ position: relative; background: #fff; border-radius: var(--r-3); padding: 1.9rem 1.7rem; border: 1px solid var(--c-sauge-clair); display: flex; flex-direction: column; gap: .8rem; }
.formule--phare{ background: var(--c-sapin); color: #fff; border-color: var(--c-sapin); box-shadow: var(--ombre-2); }
.formule__badge{ position: absolute; top: -.85rem; left: 1.7rem; background: var(--c-vert); color: var(--c-encre); font-size: .76rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: .32rem .85rem; border-radius: var(--r-pilule); }
.formule__nom{ font-size: var(--t-label); font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--c-vert-texte); }
.formule--phare .formule__nom{ color: var(--c-vert); }
.formule__prix{ font-family: var(--f-titre); font-weight: 500; font-size: 3.2rem; line-height: 1; letter-spacing: -.03em; }
.formule__prix small{ font-family: var(--f-texte); font-size: .92rem; font-weight: 600; letter-spacing: 0; color: var(--c-encre-2); margin-left: .3rem; }
.formule--phare .formule__prix small{ color: rgba(255,255,255,.75); }
.formule__resume{ font-weight: 700; }
.formule .liste-coches{ margin-top: .3rem; }
.formule .liste-coches li{ font-size: .98rem; }
.formule--phare .liste-coches svg{ color: var(--c-vert); }
.formule__pied{ margin-top: auto; padding-top: 1rem; display: grid; gap: .6rem; }
.formule__programme{ font-size: .93rem; font-weight: 700; text-decoration: underline; text-decoration-color: var(--c-vert); text-underline-offset: 4px; justify-self: start; cursor: zoom-in; }
.formules__communs{ margin-top: 1.4rem; }
@media (max-width: 960px){ .formules{ grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } }

.services{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.service{ display: flex; gap: .9rem; align-items: flex-start; padding: 1.25rem; border-radius: var(--r-2); background: #fff; }
.service svg{ width: 44px; height: 44px; padding: 10px; border-radius: 50%; flex: none; background: var(--c-vert-pale); color: var(--c-vert-texte); }
.service strong{ display: block; color: var(--c-encre); font-size: 1.05rem; margin-bottom: .2rem; }
.service span{ color: var(--c-encre-2); font-size: .95rem; line-height: 1.45; }
@media (max-width: 900px){ .services{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .services{ grid-template-columns: 1fr; } }

/* ---------- 33. Page domaine : engagements ---------- */
.engagements{ display: grid; gap: 1.2rem; }
.engagement{ display: grid; grid-template-columns: 90px 1fr 280px; gap: 1.6rem; align-items: start; background: #fff; border: 1px solid var(--c-sauge-clair); border-radius: var(--r-3); padding: 1.9rem; transition: box-shadow var(--t-doux); }
.engagement:hover{ box-shadow: var(--ombre-1); }
.engagement__num{ width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; background: var(--c-vert); color: var(--c-sapin); }
.engagement__num svg{ width: 34px; height: 34px; }
.engagement h3{ margin-bottom: .6rem; }
.engagement p{ color: var(--c-encre-2); }
.engagement__chiffre{ background: var(--c-vert-pale); border-radius: var(--r-2); padding: 1.1rem 1.2rem; }
.engagement__chiffre strong{ display: block; font-family: var(--f-titre); font-weight: 500; font-size: 2.3rem; line-height: 1; letter-spacing: -.03em; color: var(--c-sapin); }
.engagement__chiffre span{ display: block; margin-top: .4rem; font-size: .94rem; color: var(--c-encre-2); line-height: 1.4; }
@media (max-width: 960px){ .engagement{ grid-template-columns: 74px 1fr; } .engagement__chiffre{ grid-column: 2; } }
@media (max-width: 560px){ .engagement{ grid-template-columns: 1fr; padding: 1.4rem; } .engagement__chiffre{ grid-column: auto; } }
.plan{ border-radius: var(--r-3); overflow: hidden; box-shadow: var(--ombre-1); background: #fff; }
.plan .vignette{ border-radius: 0; }
.plan img{ width: 100%; }

/* ---------- 34. Espace de gestion (démonstration) ---------- */
.gestion{ min-height: 100vh; background: var(--c-creme); }
.gestion__barre{ background: #fff; color: var(--c-encre); border-bottom: 1px solid var(--c-sauge-clair); }
.gestion__barre .contenant{ display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 72px; flex-wrap: wrap; }
.gestion__titre{ display: flex; align-items: center; gap: .8rem; font-weight: 800; }
.gestion__titre img{ width: 40px; }
.gestion__corps{ padding-block: 2.4rem 4rem; }
.gestion__grille{ display: grid; grid-template-columns: 1.1fr .9fr; gap: 1.6rem; align-items: start; }
.gestion__carte{ background: #fff; border-radius: var(--r-3); border: 1px solid var(--c-sauge-clair); padding: 1.6rem; }
.gestion__carte h2{ font-size: 1.65rem; margin-bottom: .4rem; }
.gestion__aide{ color: var(--c-encre-2); font-size: .98rem; margin-bottom: 1.2rem; }
.gestion__liste{ display: grid; gap: .7rem; }
.ligne-ev{ display: grid; grid-template-columns: 64px 1fr auto; gap: .9rem; align-items: center; padding: .8rem; border: 1px solid var(--c-sauge-clair); border-radius: var(--r-2); }
.ligne-ev img{ width: 64px; height: 64px; object-fit: cover; border-radius: var(--r-1); }
.ligne-ev strong{ display: block; line-height: 1.25; }
.ligne-ev small{ color: var(--c-encre-2); }
.ligne-ev__actions{ display: flex; gap: .4rem; }
.ligne-ev__actions button{ font-size: .88rem; font-weight: 700; padding: .4rem .75rem; border-radius: var(--r-pilule); border: 1px solid var(--c-sauge); }
.ligne-ev__actions button:hover{ border-color: var(--c-sapin); }
.ligne-ev__actions .supprimer:hover{ border-color: var(--c-erreur); color: var(--c-erreur); }
.choix-photos{ display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; }
.choix-photos label{ position: relative; cursor: pointer; }
.choix-photos input{ position: absolute; opacity: 0; }
.choix-photos img{ aspect-ratio: 1; object-fit: cover; border-radius: var(--r-1); border: 3px solid transparent; width: 100%; }
.choix-photos input:checked + img{ border-color: var(--c-vert-texte); }
.choix-photos input:focus-visible + img{ outline: 2px solid var(--c-sapin); outline-offset: 2px; }
.gestion__note{ margin-top: 1.4rem; font-size: .93rem; color: var(--c-encre-2); }
.toast{ position: fixed; left: 50%; bottom: 1.5rem; transform: translate(-50%, calc(100% + 3rem)); visibility: hidden; background: var(--c-sapin); color: #fff; padding: .8rem 1.3rem; border-radius: var(--r-pilule); box-shadow: var(--ombre-2); transition: transform var(--t-doux), visibility var(--t-doux); z-index: 50; font-weight: 700; }
.toast.est-visible{ transform: translate(-50%, 0); visibility: visible; }
.gestion__grille > *, .champs > *, .ligne-ev > *{ min-width: 0; }
@media (max-width: 960px){ .gestion__grille{ grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px){ .gestion__carte{ padding: 1.1rem; } .ligne-ev{ grid-template-columns: 52px 1fr; } .ligne-ev img{ width: 52px; height: 52px; } .ligne-ev__actions{ grid-column: 1 / -1; } }

/* ---------- 35. Pages légales ---------- */
.legal{ max-width: 820px; margin-inline: auto; }
.legal h2{ font-size: 1.75rem; margin: 2.2rem 0 .7rem; }
.legal p, .legal li{ color: var(--c-encre-2); }
.legal p + p{ margin-top: .7rem; }
.legal ul{ padding-left: 1.2rem; display: grid; gap: .4rem; margin-top: .6rem; }