@import url('/assets/fonts/fonts.css');
/* Welikande Yoga Retreats - Organic Biophilic, per build spec section 6.1 */
:root{
  --cream:#F8F5EE; --sand:#E9E0CF; --white:#fff;
  --ink:#1E2A22; --ink-soft:#47563F; --ink-mute:#54614F;
  --forest:#3E5C48; --forest-dk:#2A3B2E; --sage:#8FA98F; --sage-pale:#DDE7DB;
  --terra:#B15A2E; --terra-dk:#8F4622; --gold:#F1CA9F;
  --ok:#3E7A55; --warn:#B57B2E; --err:#A8443A;
  --line:#E2DCCD; --line-soft:#EDE7DA;
  --serif:'Lora',Georgia,serif; --sans:'Raleway',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --radius:18px; --radius-lg:26px; --btn-radius:100px;
  --shadow-sm:0 1px 3px rgba(30,42,34,.07); --shadow-md:0 6px 24px rgba(30,42,34,.10);
  --wrap:1560px; --gut:clamp(20px,6.6vw,96px);
}
*{box-sizing:border-box}
::selection{background:var(--gold);color:var(--ink)}
input,textarea,select{caret-color:var(--terra-dk)}
/* Le filtre des chambres, celui de la galerie et le carrousel d'avis masquent
   leurs elements avec l'attribut `hidden`. Le navigateur ne lui donne qu'un
   `display:none` de faible poids, que la moindre regle d'auteur (`.rm` est en
   `display:flex`) ecrase sans bruit : le JS masquait, le CSS reaffichait, et le
   filtre paraissait mort. Cette ligne rend `hidden` incontestable. */
[hidden]{display:none!important}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);font-size:17px;
  line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block;height:auto}
a{color:var(--forest);text-underline-offset:3px}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.14;margin:0;letter-spacing:-.012em;
  text-wrap:balance;color:var(--ink)}
h1{font-size:clamp(34px,5.4vw,64px)} h2{font-size:clamp(27px,3.4vw,40px)} h3{font-size:clamp(19px,2vw,23px)}
p{margin:0 0 18px;max-width:68ch}
:focus-visible{outline:3px solid var(--terra-dk);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--forest);color:#fff;padding:12px 18px;border-radius:8px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--sans);font-weight:600;
  font-size:15px;padding:15px 28px;border-radius:var(--btn-radius);border:1.5px solid transparent;text-decoration:none;
  cursor:pointer;transition:transform .16s,box-shadow .16s,background .16s;min-height:48px}

.btn--primary{background:var(--terra);color:#fff;box-shadow:0 8px 24px color-mix(in srgb,var(--terra) 30%,transparent)}
.btn--primary:hover{background:var(--terra-dk)}
.btn--ghost{background:rgba(255,255,255,.10);color:#fff;border-color:rgba(255,255,255,.7)}
.btn--ghost:hover{background:rgba(255,255,255,.18)}
.btn--outline{background:transparent;color:var(--forest);border-color:var(--forest)}
.btn--outline:hover{background:var(--sage-pale)}
.btn--sm{padding:11px 20px;font-size:14px;min-height:42px}
.hdr{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hdr__in{display:flex;align-items:center;gap:22px;padding:14px var(--gut);max-width:var(--wrap);margin:0 auto}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex-shrink:0}
.brand svg{width:36px;height:36px;flex:0 0 36px}
/* Leur symbole est en format paysage : on le cale sur sa HAUTEUR et on le
   laisse prendre sa largeur, sinon il serait ecrase ou recadre. */
.brand img{height:34px;width:auto;flex:0 0 auto;display:block}
@media(max-width:560px){.brand img{height:30px}}
.brand b{font-family:var(--serif);font-size:18px;font-weight:600;letter-spacing:.06em;color:var(--forest);display:block;line-height:1.05}
.brand span{font-size:10.5px;font-weight:700;letter-spacing:.13em;color:#4C6B4F;text-transform:uppercase;display:block;margin-top:3px}
/* l element flex est le <nav>, pas la liste qu'il contient */
.hdr__in>nav{flex:1 1 auto;display:flex;justify-content:center;min-width:0}
.nav{margin:0;display:flex;gap:10px;align-items:center;list-style:none;padding:0}
.nav>li{position:relative}
.nav a{display:block;padding:10px 15px;font-size:14.5px;font-weight:500;color:var(--ink);text-decoration:none;border-radius:8px}
.nav a:hover,.nav a[aria-current]{background:var(--sage-pale);color:var(--forest-dk)}
.nav__top{display:flex;align-items:center;gap:6px;background:none;border:0;font:500 14.5px var(--sans);
  color:var(--ink);padding:10px 15px;border-radius:8px;cursor:pointer}
.nav__top:hover,.nav__top[aria-expanded=true]{background:var(--sage-pale)}
.nav__top svg{width:9px;height:9px;stroke:var(--sage);stroke-width:2.4;fill:none;transition:transform .2s}
.nav__top[aria-expanded=true] svg{transform:rotate(180deg)}
.nav__sub{position:absolute;top:calc(100% + 8px);left:0;min-width:262px;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow-md);padding:8px;list-style:none;margin:0;display:none}
.nav__sub:before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.nav>li:hover .nav__sub,.nav>li:focus-within .nav__sub{display:block}
.nav__sub[data-open]{display:block}
.nav__sub a{padding:11px 13px}
.hdr .btn{margin-left:0;flex-shrink:0}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--line);border-radius:10px;
  width:46px;height:46px;align-items:center;justify-content:center;cursor:pointer}
.burger span{display:block;width:20px;height:2px;background:var(--forest);border-radius:2px;position:relative}
.burger span:before,.burger span:after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--forest);border-radius:2px}
.burger span:before{top:-6px} .burger span:after{top:6px}
.msheet{position:fixed;inset:0;z-index:90;background:var(--cream);padding:20px var(--gut) calc(40px + env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;display:none}
.msheet[data-open]{display:block}
.msheet__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px}
.msheet ul{list-style:none;padding:0;margin:0}
.msheet>ul>li{border-bottom:1px solid var(--line)}
.msheet a{display:block;padding:15px 0;font-size:19px;font-family:var(--serif);color:var(--ink);text-decoration:none}
.msheet ul ul a{font-family:var(--sans);font-size:15.5px;padding:9px 0 9px 18px;color:var(--ink-soft)}
.msheet .btn{width:100%;margin-top:26px;
  /* `.msheet a` passe en display:block et en padding lateral nul, et gagne sur
     `.btn` par specificite : les deux boutons du menu perdaient leur centrage
     et collaient leur texte au bord gauche. On leur rend les deux. */
  display:flex;padding:15px 28px}
.mclose{background:none;border:1px solid var(--line);border-radius:10px;width:46px;height:46px;font-size:22px;
  color:var(--forest);cursor:pointer;line-height:1}
.hero{position:relative;min-height:88vh;min-height:100svh;display:flex;align-items:center;overflow:hidden;background:var(--sage)}
@media(max-width:1000px){.hero{min-height:82vh;min-height:88svh}}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 62%}
.hero__scrim{position:absolute;inset:0;background:
  linear-gradient(100deg,rgba(18,28,20,.88) 0%,rgba(18,28,20,.66) 34%,rgba(18,28,20,.14) 58%,rgba(18,28,20,.01) 78%,rgba(255,255,255,.10) 100%)}
.hero__in{position:relative;z-index:2;padding:64px var(--gut);max-width:var(--wrap);margin:0 auto;width:100%}
.hero__body{max-width:720px}
.hero h1{color:#fff;white-space:pre-line}
.hero h1 em{font-style:normal;color:var(--gold)}
.eyebrow{font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;font-weight:600;color:#D9E4D6;margin-bottom:20px;display:block}
.hero .lead{font-size:clamp(16.5px,1.6vw,19px);color:#E4EBE1;max-width:56ch;margin:20px 0 28px;line-height:1.6}
.hero__note{margin-top:24px;font-size:13.5px;color:#C6D3C2}
.chips{display:flex;flex-wrap:wrap;gap:11px;margin-bottom:30px}
.chip{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.26);
  padding:9px 16px;border-radius:100px;font-size:13.5px;color:#fff;font-weight:500}
.chip b{font-weight:700}
.stars{color:var(--gold);letter-spacing:1.5px;font-size:12.5px}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px}
.hero--sm{min-height:clamp(340px,52vh,520px)}
@media(max-width:1000px){.hero--sm{min-height:clamp(300px,44vh,420px)}}
.sec{padding:clamp(64px,8vw,110px) 0}
.sec--sand{background:var(--sand)} .sec--white{background:var(--white)}
.sec--flush{padding-bottom:0}
.sec__head{max-width:62ch;margin-bottom:clamp(28px,3.5vw,44px)}
.sec__head .eyebrow{color:var(--terra-dk)}
.sec__head p{color:var(--ink-soft);font-size:18px;margin-top:12px}
.rule{width:26px;height:3px;background:var(--sage);border-radius:2px;margin-bottom:16px}
.grid{display:grid;gap:clamp(16px,2vw,24px)}
.grid--2{grid-template-columns:repeat(2,1fr)} .grid--3{grid-template-columns:repeat(3,1fr)} .grid--4{grid-template-columns:repeat(4,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;display:flex;
  flex-direction:column;transition:transform .18s,box-shadow .18s}
.card:hover{border-color:var(--sage)}
.card__img{aspect-ratio:4/3;background:var(--sage-pale)}
.card__img img{width:100%;height:100%;object-fit:cover}
.card__bd{padding:22px 24px 24px;flex:1;display:flex;flex-direction:column}
.card__bd h3{margin-bottom:8px}
.card__bd p{font-size:15px;color:var(--ink-soft);margin-bottom:16px}
.card__bd .btn{margin-top:auto;align-self:flex-start}
.who{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--terra-dk);margin-bottom:10px;display:block}
.badge{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  background:var(--sage-pale);color:var(--forest-dk);padding:5px 11px;border-radius:100px;margin-bottom:10px}
.room__list{list-style:none;padding:0;margin:0 0 18px;font-size:14.5px;color:var(--ink-soft);line-height:1.9}
.room__list li:before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--sage);margin-right:10px;vertical-align:3px}
.price{margin-top:auto;padding-top:16px;border-top:1px solid var(--line-soft)}
.price b{font-family:var(--serif);font-size:29px;font-weight:600;display:block;line-height:1}
.price span{font-size:12.5px;color:var(--ink-mute);display:block;margin-top:5px}
.inc{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,30px)}
.inc__it{display:flex;gap:14px;align-items:flex-start}
.inc__ic{width:42px;height:42px;flex:0 0 42px;border-radius:12px;background:var(--sage-pale);display:flex;align-items:center;justify-content:center}
.inc__ic svg{width:20px;height:20px;stroke:var(--forest);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.inc__it b{display:block;font-size:15.5px;font-weight:600;margin-bottom:3px}
.inc__it span{font-size:14px;color:var(--ink-soft);line-height:1.55}
.day{--day-bg:#F1EADC;display:grid;grid-template-columns:1.05fr 1fr;align-items:stretch;background:var(--day-bg)}
.day__ph{position:relative;min-height:420px}
.day__ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.day__ph:after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,transparent 44%,
    color-mix(in srgb,var(--day-bg) 50%,transparent) 74%,
    color-mix(in srgb,var(--day-bg) 92%,transparent) 92%,
    var(--day-bg) 100%)}
@media(max-width:1000px){.day__ph:after{background:linear-gradient(180deg,transparent 50%,
  color-mix(in srgb,var(--day-bg) 55%,transparent) 80%,var(--day-bg) 100%)}}
.day__tx{padding:clamp(30px,4vw,56px);background:var(--day-bg)}
.tl{position:relative;padding-left:26px;display:flex;flex-direction:column;gap:22px;margin-top:8px}
.tl:before{content:"";position:absolute;left:1px;top:5px;bottom:5px;width:2px;background:color-mix(in srgb,var(--ink) 12%,transparent)}
.tl:after{content:"";position:absolute;left:1px;top:5px;bottom:5px;width:2px;
  background:var(--terra-dk);transform-origin:top;transform:scaleY(var(--fill-r,0));transition:transform .3s ease-out}
.tl__it{position:relative}
.tl__it{opacity:.4;transform:translateY(7px);transition:opacity .5s ease,transform .5s ease}
.tl__it.reached{opacity:1;transform:none}
.tl__it:before{content:"";position:absolute;left:-31px;top:6px;width:10px;height:10px;border-radius:50%;
  background:var(--day-bg);border:2px solid color-mix(in srgb,var(--ink) 22%,transparent);z-index:2;
  transition:background .35s ease,border-color .35s ease,transform .35s ease}
.tl__it.reached:before{background:var(--terra-dk);border-color:var(--terra-dk);transform:scale(1.2)}

.tl__t{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--terra-dk);margin-bottom:5px}
.tl__it h3{font-size:19px;margin-bottom:4px}
.tl__it p{font-size:15px;color:var(--ink-soft);margin:0;max-width:48ch}
.gal__tabs{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:30px}
.gal__tab{font:600 13px var(--sans);padding:10px 18px;border-radius:100px;border:1px solid var(--line);background:#fff;
  color:var(--ink-soft);cursor:pointer;min-height:42px}
.gal__tab[aria-pressed=true]{background:var(--forest);color:#fff;border-color:var(--forest)}
.gal__set{margin-bottom:38px}
.gal__lab{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.gal__lab h3{font-size:21px} .gal__lab i{flex:1;height:1px;background:var(--line);display:block}
.gal__lab em{font-style:normal;font-size:13px;color:var(--ink-mute)}
.gal__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.gal__c{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;margin:0}
.gal__c img{aspect-ratio:4/3;object-fit:cover;width:100%}
.gal__c figcaption{padding:11px 13px;font-size:13px;line-height:1.45;color:var(--ink-soft)}
.sp{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.sp th{text-align:left;font:700 11px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute);
  padding:15px 16px 11px;border-bottom:1px solid var(--line)}
.sp td{padding:13px 16px;border-bottom:1px solid var(--line-soft);font-size:15px}
.sp tr:last-child td{border-bottom:none}
.sp em{font-style:italic;color:var(--ink-mute);font-size:14px}
.endemic{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:var(--sage-pale);
  color:var(--forest-dk);padding:4px 9px;border-radius:100px}
.facts{display:grid;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.facts__r{display:grid;grid-template-columns:230px 1fr;gap:20px;padding:18px 24px;border-bottom:1px solid var(--line-soft)}
.facts__r:last-child{border-bottom:none}
.facts__r b{font-size:14px;font-weight:600;color:var(--forest)}
.facts__r span{font-size:15px;color:var(--ink-soft)}
.enq{background:var(--sage-pale);color:var(--ink);padding:clamp(44px,6vw,76px) 0;border-top:1px solid #CDDCCB}
.enq .enq__grid>div>p:last-child{color:var(--ink-soft)}
.enq h2{color:var(--ink)}
.enq .lead{color:var(--ink-soft);font-size:18px;max-width:56ch;margin-top:12px}
.enq__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(26px,4vw,52px);align-items:start;margin-top:34px}
.form{background:#fff;border-radius:var(--radius-lg);padding:clamp(24px,3vw,34px)}
.fr{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.f{margin-bottom:17px}
.f label{display:block;font-size:13.5px;font-weight:600;color:var(--ink);margin-bottom:7px}
.f label i{color:var(--terra-dk);font-style:normal}
.f input,.f select,.f textarea{width:100%;min-height:48px;border:1px solid #D8D2C2;border-radius:9px;background:#FCFBF7;
  padding:12px 14px;font:400 15px var(--sans);color:var(--ink)}
.f textarea{min-height:110px;resize:vertical}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--sage);background:#fff}
.f small{display:block;font-size:12.5px;color:var(--ink-mute);margin-top:6px}
.form .btn{width:100%;margin-top:6px}
.form__note{font-size:13px;color:var(--ink-mute);text-align:center;margin:14px 0 0;line-height:1.5}
.rev{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;margin-bottom:14px}
.rev p{font-size:15.5px;line-height:1.6;color:var(--ink);font-style:italic;margin:0;max-width:none}
.rev cite{display:flex;align-items:center;gap:10px;font-style:normal;font-size:13.5px;color:var(--ink-mute);margin-top:13px;font-weight:600}
/* Le portrait est enveloppe dans .testi__ph, qui porte le cercle et sa bordure.
   Dimensionner l'image seule laissait une vignette de 34px flotter dans un
   cercle de 56px : c'est le conteneur qu'il faut mettre a la taille du bloc. */
.rev cite .testi__ph{width:38px;height:38px;flex:0 0 38px;margin-right:0}
.rev cite .testi__ph img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.rev cite>img{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:0 0 38px}
.gbadge{display:flex;align-items:center;gap:15px;background:#fff;border:1px solid #CDDCCB;border-radius:var(--radius);padding:18px 20px;margin-bottom:16px}
.gbadge b{font-family:var(--serif);font-size:32px;line-height:1;color:var(--forest)}
.gbadge span{font-size:14px;color:var(--ink-soft);line-height:1.45}
.gbadge span strong{color:var(--forest-dk)}
.mbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;background:#fff;border-top:1px solid var(--line);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));align-items:center;justify-content:space-between;gap:14px;
  box-shadow:0 -6px 22px rgba(30,42,34,.10)}
.mbar div{font-size:12px;color:var(--ink-mute);line-height:1.3}
.mbar b{display:block;font-family:var(--serif);font-size:17px;color:var(--ink);font-weight:600}
.ftr{background:var(--forest-dk);color:#C9D6C6;padding:clamp(46px,6vw,72px) 0 34px}
@media(max-width:720px){}
.ftr__g{display:grid;grid-template-columns:1.2fr 1.6fr 1fr;gap:clamp(24px,4vw,52px)}
.ftr .ftr__h{color:#fff;font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;margin-bottom:16px}
.ftr a{color:#C9D6C6;text-decoration:none}
.ftr a:hover{color:#fff;text-decoration:underline}
.ftr ul{list-style:none;padding:0;margin:0;line-height:2}
.ftr__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ftr__b{border-top:1px solid rgba(255,255,255,.13);margin-top:38px;padding-top:22px;font-size:13px;display:flex;
  flex-wrap:wrap;gap:16px;justify-content:space-between}
.soc__h{font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:rgba(255,255,255,.55);margin:22px 0 10px}
.soc{display:flex;gap:12px;margin-top:14px}
.soc a{width:40px;height:40px;border:1px solid rgba(255,255,255,.22);border-radius:10px;display:flex;align-items:center;justify-content:center}
.soc svg{width:18px;height:18px;fill:#C9D6C6}
.soc a:hover svg{fill:#fff}
.rv{opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .5s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}}
@media(max-width:1000px){
  .grid--4,.grid--3{grid-template-columns:repeat(2,1fr)}
  .inc{grid-template-columns:repeat(2,1fr)}
  .gal__grid{grid-template-columns:repeat(3,1fr)}
  .day{grid-template-columns:1fr} .day__ph{min-height:300px}
  .enq__grid,.ftr__g{grid-template-columns:1fr}
  .nav,.hdr .btn{display:none}
  .burger{display:flex} .mbar{display:flex} body{padding-bottom:74px}
}
@media(max-width:640px){
  .grid--4,.grid--3,.grid--2,.inc{grid-template-columns:1fr}
  .gal__grid{grid-template-columns:repeat(2,1fr)}
  .fr{grid-template-columns:1fr}
  .facts__r{grid-template-columns:1fr;gap:5px}
  .ftr__cols{grid-template-columns:1fr}
}

/* voile de hero renforce en etroit : le texte occupe toute la largeur */
@media(max-width:1000px){
  .hero__scrim{background:linear-gradient(180deg,rgba(18,28,20,.80) 0%,rgba(18,28,20,.72) 45%,rgba(18,28,20,.86) 100%)}
}

/* ============================================================
   Couche d'ambiance. Chaque effet sert le propos : montrer le lieu.
   Tout est neutralise par prefers-reduced-motion.
   ============================================================ */

/* grain discret : eloigne du rendu "aplat CSS" */
body:before{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
.hdr{z-index:50} .mbar{z-index:60} .consent{z-index:70} .msheet{z-index:90}
/* Le menu ouvert se suffit a lui-meme : il porte deja son bouton de
   reservation, et la barre du bas lui mangeait ses trois dernieres lignes. */
body:has(.msheet[data-open]) .mbar{display:none}

/* hero : lent zoom, revelation ligne a ligne, indice de defilement */

/* `overflow:hidden` masque la ligne pendant son apparition, mais il coupait
   aussi les jambages qui descendent sous la ligne de base : le g de "grow"
   perdait sa boucle. On agrandit la boite vers le bas et on annule aussitot
   la hauteur ainsi gagnee, pour que le masque cesse de mordre sans que
   l'interligne bouge. */
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.16em;margin-bottom:-.16em}
.hero h1 .ln>span{display:block;transform:translateY(105%);animation:up .95s cubic-bezier(.16,1,.3,1) forwards}
.hero h1 .ln:nth-child(2)>span{animation-delay:.10s}
.hero h1 .ln:nth-child(3)>span{animation-delay:.20s}
@keyframes up{to{transform:none}}
.hero .eyebrow,.hero .lead,.hero .chips,.hero__actions,.hero__note{opacity:0;animation:fi .8s ease .45s forwards}
.hero .lead{animation-delay:.5s}.hero .chips{animation-delay:.6s}
.hero__actions{animation-delay:.68s}.hero__note{animation-delay:.78s}
@keyframes fi{to{opacity:1}}
.scrollcue{position:absolute;left:50%;bottom:clamp(70px,11vh,120px);transform:translateX(-50%);z-index:3;
  color:rgba(255,255,255,.80);font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  display:flex;flex-direction:column;align-items:center;gap:10px;opacity:0;animation:fi .8s ease 1.2s forwards}
.scrollcue i{display:block;width:1px;height:34px;background:linear-gradient(transparent,rgba(255,255,255,.75));
  animation:cue 2.4s ease-in-out infinite}
@media(max-width:1000px){.scrollcue{display:none}}
@keyframes cue{0%,100%{transform:scaleY(.35);transform-origin:bottom}50%{transform:scaleY(1);transform-origin:bottom}}

/* bande pleine largeur : la photo prend tout l'ecran */
.band{position:relative;min-height:clamp(560px,92vh,900px);display:flex;align-items:flex-end;overflow:hidden;
  background:var(--sage)}
.band__ph{position:absolute;inset:-4% 0;will-change:transform}
.band__ph img{width:100%;height:100%;object-fit:cover}
.band:after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(18,28,20,.34) 0%,rgba(18,28,20,.12) 34%,rgba(18,28,20,.62) 66%,rgba(18,28,20,.93) 100%)}
.band__in{position:relative;z-index:2;padding:0 var(--gut) clamp(42px,6vw,76px);max-width:var(--wrap);margin:0 auto;width:100%}
.band__k{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:#CBD9C6;font-weight:600;display:block;margin-bottom:16px}
.band__l{font-family:var(--serif);font-size:clamp(25px,3.6vw,44px);line-height:1.16;color:#fff;
  max-width:19ch;margin:0;letter-spacing:-.015em;text-wrap:balance}
.band__n{margin:16px 0 0;color:#DCE6D8;font-size:16px;max-width:52ch}

/* revelation par volet : plus marquant qu'un simple fondu */
.wipe{clip-path:inset(0 0 100% 0);transition:clip-path .7s cubic-bezier(.16,1,.3,1)}
.wipe.in{clip-path:inset(0 0 0 0)}

/* chiffres */
.nums{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,3vw,40px)}
.num b{font-family:var(--serif);font-size:clamp(42px,5.6vw,68px);font-weight:600;color:var(--forest);
  display:block;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.num span{display:block;font-size:15px;color:var(--ink-soft);margin-top:12px;line-height:1.45;max-width:22ch}
.num{padding-top:20px;border-top:2px solid var(--sage-pale)}

/* frise : le trait se remplit au defilement */


/* cartes : l'image respire au survol */
.card__img{overflow:hidden}

/* galerie en mosaique editoriale */
.gal__grid{grid-auto-flow:dense}


/* liens du pied : soulignement qui se deploie */
.ftr ul a{position:relative}
.ftr ul a:after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1px;background:#fff;
  transition:right .3s cubic-bezier(.16,1,.3,1)}
.ftr ul a:hover{text-decoration:none}
.ftr ul a:hover:after{right:0}

@media (prefers-reduced-motion:reduce){
  .tl__it{opacity:1;transform:none;transition:none}
  .tl:after{display:none}
  .hero img{animation:none}
  .hero h1 .ln>span{transform:none;animation:none}
  .hero .eyebrow,.hero .lead,.hero .chips,.hero__actions,.hero__note,.scrollcue{opacity:1;animation:none}
  .scrollcue i{animation:none}
  .wipe{clip-path:none;transition:none}
  .band__ph{inset:0}
}
@media(max-width:860px){.nums{grid-template-columns:1fr 1fr}}

/* ============================================================
   Notre histoire. Deux portraits nets, et la photo du couple
   en petit format : sa definition est faible, on ne l'agrandit pas.
   ============================================================ */
.story{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4.4vw,64px);align-items:center}
.story__ph{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0}
.story__p{margin:0;position:relative}
.story__p img{aspect-ratio:1/1;object-fit:cover;border-radius:6px 6px 18px 6px}
.story__p figcaption{margin-top:9px}
.story__p b{display:block;font-family:var(--serif);font-size:16px;color:var(--ink)}
.story__p span{display:block;font-size:13px;color:var(--ink-mute);margin-top:2px}
.story__together{grid-column:1 / -1;order:-1;margin:0 0 4px}
.story__together img{width:100%;aspect-ratio:3/2;object-fit:cover;object-position:center 42%;
  border-radius:8px 8px 24px 8px;box-shadow:var(--shadow-md)}
.story__together figcaption{font-size:14px;color:var(--ink-mute);line-height:1.55;margin-top:12px;text-align:center}
.story__tx .lead{font-size:clamp(19px,2.1vw,23px);font-family:var(--serif);color:var(--ink);
  line-height:1.45;margin:14px 0 22px;max-width:38ch}
.story__tx p{color:var(--ink-soft);font-size:16.5px;max-width:46ch}
.story__q{margin:26px 0 0;padding:22px 26px;background:var(--sage-pale);border-radius:4px 4px 18px 4px}
.story__q p{font-family:var(--serif);font-size:19px;line-height:1.5;color:var(--forest-dk);margin:0;font-style:italic;max-width:46ch}
.story__q cite{display:block;font-style:normal;font-size:13.5px;color:var(--ink-mute);margin-top:12px;font-weight:600}
@media(max-width:860px){.story{grid-template-columns:1fr}}

/* ---------- nourriture : un des vrais arguments du sejour ---------- */
.food{position:relative;display:grid;grid-template-columns:1.05fr 1fr;align-items:stretch;
  background:var(--forest-dk);color:#fff;border-radius:0;overflow:hidden}
.food__ph{position:relative;min-height:440px}
.food__ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.food__ph:after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,transparent 55%,color-mix(in srgb,var(--forest-dk) 60%,transparent) 84%,var(--forest-dk) 100%)}
.food__tx{padding:clamp(32px,4.5vw,64px);display:flex;flex-direction:column;justify-content:center}
.food__tx .eyebrow{color:var(--gold);margin-bottom:14px}
.food__tx h2{color:#fff;max-width:16ch}
.food__tx p{color:#D9E4D6;font-size:17px;margin:16px 0 26px;max-width:44ch}
.food__list{list-style:none;padding:0;margin:0 0 28px;display:grid;gap:11px}
.food__list li{display:flex;gap:11px;align-items:flex-start;font-size:15.5px;color:#E4EBE1;line-height:1.5}
.food__list li:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);flex:0 0 6px;margin-top:8px}
.food .btn--ghost{align-self:flex-start}
@media(max-width:860px){
  .food{grid-template-columns:1fr}
  .food__ph{min-height:0;aspect-ratio:3/2}
  .food__ph:after{background:linear-gradient(180deg,transparent 55%,var(--forest-dk) 100%)}
}

/* ---------- equipe ---------- */
.team{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(12px,1.6vw,20px)}
.team figure{margin:0;text-align:center}
.team img{display:block;aspect-ratio:1/1;object-fit:cover;border-radius:50%;margin:0 auto 12px}
.team b{display:block;font-family:var(--serif);font-size:17px}
.team span{display:block;font-size:13px;color:var(--ink-mute);margin-top:2px}
/* Places en attente de photographie. L'equipe a change et s'est agrandie
   (cuisine, jardin) : la grille garde ses emplacements pour que l'on voie la
   place qui reste a remplir. Une place vide n'affiche ni nom ni intitule tant
   que Julien ne les a pas donnes. A RETIRER quand les photos arrivent : ces
   cercles ne doivent pas rester longtemps sur un site public. */
.team__free{margin:0}
.team__slot{aspect-ratio:1/1;border-radius:50%;border:2px dashed var(--line);
  background:var(--gray-50,#F8F5EE)}
@media(max-width:900px){.team{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.team{grid-template-columns:repeat(2,1fr)}}

/* ---------- agrandissement d'une photo ---------- */
/* Pas de transition d'opacite ici : elle rendrait la grande image invisible
   au moment ou le navigateur photographie l'etat d'arrivee, et le morphing
   d'element partage n'aurait plus rien a montrer. */
.lb{position:fixed;inset:0;z-index:100;background:rgba(18,28,20,.94);display:none;
  align-items:center;justify-content:center;padding:clamp(16px,4vw,56px)}
.lb[data-open]{display:flex}
.lb__fig{margin:0;max-width:min(1400px,94vw);max-height:100%;display:flex;flex-direction:column;gap:14px}
.lb__fig img{max-height:calc(100vh - 170px);width:auto;max-width:100%;object-fit:contain;
  border-radius:6px;margin:0 auto;box-shadow:0 30px 80px rgba(0,0,0,.5);
  transition:opacity .28s ease, transform .28s cubic-bezier(.16,1,.3,1)}
.lb__fig img.swap{opacity:0;transform:scale(.97)}
/* fond de la visionneuse : anime avec la transition, pas contre elle */
::view-transition-old(root),::view-transition-new(root){animation-duration:.34s}
.lb__fig figcaption{color:#DCE6D8;font-size:15px;text-align:center;line-height:1.5;max-width:70ch;margin:0 auto}
.lb__x,.lb__p,.lb__n{position:absolute;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.28);
  color:#fff;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;cursor:pointer}
.lb__x{top:22px;right:22px;font-size:24px;line-height:1}
.lb__p{left:22px;top:50%;transform:translateY(-50%)}
.lb__n{right:22px;top:50%;transform:translateY(-50%)}
.lb__p svg,.lb__n svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round}
.lb__x:hover,.lb__p:hover,.lb__n:hover{background:rgba(255,255,255,.20)}
.gal__c button{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
@media(max-width:640px){.lb__p,.lb__n{display:none}}
@media (prefers-reduced-motion:reduce){.lb,.lb__fig img{transition:none}}

/* ---------- la carte mise en avant ----------
   Sur la page des oiseaux, l'expedition guidee est une des raisons pour
   lesquelles un groupe reserve, et elle se presentait comme une carte parmi
   d'autres, sans meme un titre de section au-dessus. Elle porte desormais le
   liseré de la marque et une ombre, pour se distinguer de la carte voisine. */
.card--feature{border-color:var(--terra-dk);box-shadow:var(--shadow-md);position:relative}

/* ---------- page encore fermee ----------
   Sobre a dessein : elle ne doit rien laisser voir du contenu qui l'attend. */
.wip{padding:clamp(90px,16vw,190px) 0;text-align:center}
.wip__tag{display:inline-block;font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;
  font-weight:600;color:var(--terra-dk);border:1px solid var(--line);border-radius:100px;
  padding:6px 16px;margin-bottom:22px}
.wip h1{font-family:var(--serif);font-size:clamp(30px,4.4vw,48px);line-height:1.15;
  color:var(--ink);margin:0 0 16px}
.wip p{font-size:17.5px;color:var(--ink-soft);max-width:46ch;margin:0 auto 30px}

/* ---------- les deux seances de la journee ----------
   La section ne portait qu'un titre et un paragraphe, et laissait la moitie de
   la page vide alors qu'elle explique le coeur du sejour. Les deux seances y
   sont maintenant montrees, chacune avec son horaire et sa photo. */
.sess{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.6vw,34px);
  margin-top:clamp(28px,3.4vw,48px)}
.sess__c{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;display:flex;flex-direction:column}
.sess__c img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.sess__b{padding:clamp(20px,2.2vw,28px)}
.sess__t{display:inline-block;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:700;color:var(--terra-dk);margin-bottom:9px}
.sess__b h3{font-size:clamp(19px,2vw,23px);margin:0 0 9px}
.sess__b p{font-size:16px;color:var(--ink-soft);margin:0;max-width:none}
@media(max-width:900px){.sess{grid-template-columns:1fr}}

/* ---------- galerie Instagram ----------
   Deux rangees pleine largeur, decalees d'une demi-vignette, les vignettes
   des bords coupees par l'ecran. Le titre est un vrai titre de section. */
.ig{overflow:hidden;padding-bottom:clamp(64px,8vw,110px)}
.ig__h{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:clamp(26px,3vw,40px)}
.ig__h .eyebrow{color:var(--terra-dk)}
.ig__h h2{margin:6px 0 0}
.ig__row{display:flex;gap:clamp(10px,1.2vw,18px);width:max-content;margin:0 0 clamp(10px,1.2vw,18px);
  transform:translateX(calc(-1 * var(--ig-w) / 2))}
.ig__row--b{transform:translateX(calc(-1 * var(--ig-w) / 6));margin-bottom:0}
.ig__c{--ig-w:clamp(190px,17.5vw,300px);display:block;position:relative;overflow:hidden;border-radius:var(--radius);
  width:var(--ig-w);aspect-ratio:1/1;flex:0 0 auto;background:var(--sage-pale)}
.ig__row{--ig-w:clamp(190px,17.5vw,300px)}
.ig__c img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.ig__c:hover img,.ig__c:focus-visible img{transform:scale(1.02)}
.ig__c:focus-visible{outline:2px solid var(--terra-dk);outline-offset:3px}
@media(max-width:700px){.ig__row,.ig__c{--ig-w:44vw}}

/* ---------- ouverture de la landing page groupes ----------
   L'accroche occupait la colonne de gauche et laissait la droite vide. Elle
   passe a gauche, le corps a droite, et le bloc tient toute la largeur. */
.lead2{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(26px,4.6vw,72px);align-items:start}
.lead2__a{font-family:var(--serif);font-size:clamp(24px,3vw,36px);line-height:1.28;
  letter-spacing:-.012em;color:var(--ink);margin:0}
.lead2__b{padding-top:clamp(4px,1vw,10px)}
.lead2__b p{margin:0 0 14px;color:var(--ink-soft)}
.lead2__b p:last-child{margin-bottom:0}
@media(max-width:860px){.lead2{grid-template-columns:1fr;gap:20px}}

/* ---------- acces : les durees a gauche, la carte a droite ----------
   Les deux repondent a la meme question et se lisaient dans deux sections
   separees. Le tarif du transfert passe en note sous l'ensemble : ce n'est pas
   un trajet, et il occupait une ligne ou la duree manquait. */
.here{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(28px,4.4vw,64px);align-items:start;margin-top:clamp(24px,3vw,36px)}
.here .trip{margin-top:0;max-width:none}
.here__map{min-width:0}
.here__n{margin-top:clamp(22px,3vw,32px);font-size:14.5px;color:var(--ink-mute)}
@media(max-width:900px){.here{grid-template-columns:1fr}}

/* ---------- temps de trajet ----------
   La duree passe a gauche et devient l'entree de lecture : c'est elle qu'on
   cherche, pas l'intitule "From Kandy". Des filets, pas d'encadre. */
.trip{margin:clamp(22px,3vw,34px) 0 0;display:grid;
  grid-template-columns:minmax(96px,140px) 1fr;column-gap:clamp(20px,3vw,44px);
  max-width:70ch;border-top:1px solid var(--line)}
.trip dt{font-family:var(--serif);font-size:clamp(26px,3vw,36px);line-height:1;
  color:var(--forest);letter-spacing:-.02em;padding:22px 0 22px;
  border-bottom:1px solid var(--line)}
.trip dd{margin:0;padding:24px 0 22px;border-bottom:1px solid var(--line)}
.trip dd strong{display:block;font-size:16.5px;font-weight:600}
.trip dd span{display:block;font-size:14.5px;color:var(--ink-mute);margin-top:3px;line-height:1.55}
/* Le transfert est la ligne que le client cherche : elle porte un fond et sa
   propre couleur, sans sortir de la colonne des valeurs. */
.trip .trip__hi{background:var(--sage-pale);border-bottom-color:transparent}
.trip dt.trip__hi{color:var(--terra-dk);padding-left:16px;border-radius:12px 0 0 12px;
  box-shadow:24px 0 0 var(--sage-pale)}
.trip dd.trip__hi{padding-right:16px;border-radius:0 12px 12px 0;
  box-shadow:-24px 0 0 var(--sage-pale)}
@media(max-width:560px){.trip dt.trip__hi{border-radius:12px 12px 0 0;padding-top:16px}
  .trip dd.trip__hi{border-radius:0 0 12px 12px;padding-left:16px;padding-bottom:16px}}
@media(max-width:560px){.trip{grid-template-columns:1fr;max-width:none}
  .trip dt{padding-bottom:2px;border-bottom:0;font-size:28px}
  .trip dd{padding-top:6px}}

/* ---------- page groupes : ce dont l'organisateur n'a pas a s'occuper ----------
   Remplace un tableau d'intitules qui repetait mot pour mot les cartes
   suivantes. L'argument qui porte n'est pas la liste des equipements, c'est le
   travail qu'ils evitent : chaque ligne nomme une corvee, barree, puis dit
   pourquoi elle n'existe pas ici. */
.relief{background:var(--sand)}
.relief__g{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(30px,5vw,80px);align-items:start}
.relief__h{position:sticky;top:calc(var(--nav-h,88px) + 28px)}
.relief__h .eyebrow{color:var(--terra-dk)}
.relief__h h2{font-size:clamp(25px,3.4vw,34px);margin:6px 0 14px;text-wrap:balance}
.relief__h p{color:var(--ink-soft);font-size:16px;max-width:40ch;margin:0}
.relief__l{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.relief__l li{padding:20px 0 20px 42px;border-bottom:1px solid var(--line);position:relative}
.relief__l li:before{content:"";position:absolute;left:0;top:25px;width:22px;height:1.5px;
  background:var(--terra-dk);opacity:.85}
.relief__l b{display:block;font-weight:600;font-size:17px;line-height:1.45;
  color:var(--ink-mute);text-decoration:line-through;text-decoration-thickness:1px;
  text-decoration-color:color-mix(in srgb,var(--terra-dk) 55%,transparent)}
.relief__l span{display:block;margin-top:7px;color:var(--ink-soft);font-size:15.5px;
  line-height:1.6;max-width:56ch}
@media(max-width:900px){.relief__g{grid-template-columns:1fr}
  .relief__h{position:static}}

/* ---------- page groupes : le rythme d'une journee ----------
   Un organisateur veut savoir a quoi ressemble un jour dont il n'a pas a
   s'occuper. Les deux seances qu'il mene sont mises en avant, le reste tourne
   sans lui. */
.rhy{list-style:none;padding:0;margin:clamp(22px,3vw,34px) 0 0;display:grid;gap:0;
  border-top:1px solid var(--line)}
.rhy li{display:grid;grid-template-columns:104px 1fr;gap:20px;padding:18px 0;
  border-bottom:1px solid var(--line)}
.rhy li>b{font-size:13.5px;color:var(--terra-dk);letter-spacing:.04em;padding-top:3px;
  font-variant-numeric:tabular-nums}
.rhy li strong{display:block;font-size:16.5px;margin-bottom:4px}
.rhy li p{margin:0;color:var(--ink-soft);font-size:15px;max-width:62ch}
.rhy--on{background:var(--sage-pale);border-radius:4px}
.rhy--on>b{color:var(--forest)}
.rhy__n{margin-top:18px;font-size:14.5px;color:var(--ink-mute)}
.num span strong{color:var(--ink);font-weight:600}
@media(max-width:640px){.rhy li{grid-template-columns:1fr;gap:4px}}

/* ---------- bloc d'ouverture de page : un chapeau, puis le corps ----------
   La premiere phrase se compose en serif, a la taille d'un titre, pour que la
   section cesse de commencer par un mur de gris. Le corps garde la largeur de
   lecture d'avant. Rendu par `intro()` dans scripts/build.mjs.
   Le chapeau doit gagner sur `.intro p` : deux classes battent une classe et
   un element, d'ou `.intro .intro__lead` plutot que `.intro__lead` seul. */
.intro{max-width:70ch}
.intro p{font-size:18px;color:var(--ink-soft);margin:0 0 16px}
.intro p:last-child{margin-bottom:0}
.intro .intro__lead{font-family:var(--serif);font-size:clamp(21px,2.5vw,29px);line-height:1.42;
  color:var(--ink);margin:0 0 24px;max-width:34ch}
@media(max-width:700px){.intro .intro__lead{max-width:none}}

/* ---------- temoignages : texte a gauche, videos a droite ---------- */
/* La video s'aligne sur le BAS du dernier avis (Julien, 26 aout 2026), d'ou
   `end` plutot que `center`, et une colonne un peu plus etroite qu'avant pour
   qu'elle cesse de dominer la colonne de texte. */
.testi{display:grid;grid-template-columns:1fr .52fr;gap:clamp(28px,4.4vw,60px);align-items:stretch}
.testi__list{display:grid;gap:14px;margin-bottom:20px}
.testi__vidcol{display:flex;flex-direction:column;min-height:0}
.testi__vidlab{font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;
  color:var(--terra-dk);display:block;margin-top:12px}
.testi__tx blockquote{margin:0;padding:0}
.testi__tx blockquote p{font-family:var(--serif);font-size:clamp(20px,2.3vw,26px);line-height:1.45;
  color:var(--ink);font-style:italic;max-width:36ch}
.testi__tx cite{display:flex;align-items:center;gap:12px;font-style:normal;font-size:14.5px;
  color:var(--ink-mute);font-weight:600;margin-top:20px}
.testi__tx cite img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:0 0 44px}
.testi__src{font-size:13px;color:var(--ink-mute);margin-top:20px;max-width:46ch}
.testi__nav{display:flex;gap:10px;margin-top:26px;align-items:center}
.tnav{width:46px;height:46px;border-radius:50%;border:1.5px solid var(--line);background:#fff;
  display:grid;place-items:center;cursor:pointer;color:var(--forest)}
.tnav:hover{border-color:var(--sage);background:var(--sage-pale)}
.tnav svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.tdots{display:flex;gap:7px;margin-left:8px}
.tdot{width:8px;height:8px;border-radius:50%;background:var(--line);border:0;padding:0;cursor:pointer}
.tdot[aria-current=true]{background:var(--terra)}
.testi__vid{position:relative;border-radius:8px 8px 26px 8px;overflow:hidden;background:#000;
  box-shadow:var(--shadow-md);width:100%;flex:1;min-height:340px}
.testi__vid video,.testi__vid img{width:100%;height:100%;object-fit:cover;display:block}
.testi__play{position:absolute;inset:0;display:grid;place-items:center;border:0;background:rgba(18,28,20,.30);cursor:pointer}
.testi__play span{width:76px;height:76px;border-radius:50%;background:rgba(255,255,255,.94);display:grid;place-items:center;
  box-shadow:0 8px 30px rgba(0,0,0,.3)}
.testi__play svg{width:24px;height:24px;fill:var(--forest-dk);margin-left:4px}
.testi__len{position:absolute;left:14px;bottom:14px;background:rgba(18,28,20,.72);color:#fff;
  font-size:12.5px;padding:5px 11px;border-radius:100px}

/* ---------- shalas ---------- */
.shala{display:grid;grid-template-columns:180px 1fr;gap:22px;align-items:center;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;padding:0}
.shala img{width:180px;height:100%;min-height:150px;object-fit:cover}
.shala__b{padding:20px 24px 20px 0}
.shala__b h3{margin-bottom:5px}
.shala__b p{font-size:15px;color:var(--ink-soft);margin:0}
.shala__b .d{font-size:13.5px;color:var(--ink-mute);margin-top:7px;display:block}
@media(max-width:640px){.shala{grid-template-columns:1fr}.shala img{width:100%;height:190px}
  .shala__b{padding:18px 20px}}

/* ---------- rassurance groupes ---------- */
.rz{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px)}
.rz__c{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column}
.rz__c img{aspect-ratio:16/10;object-fit:cover;width:100%}
.rz__b{padding:20px 22px 22px}
.rz__b h3{font-size:19px;margin-bottom:7px}
.rz__b p{font-size:14.5px;color:var(--ink-soft);margin:0}
@media(max-width:1000px){.rz{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.rz{grid-template-columns:1fr}}

/* la regle de base de .band est definie plus haut : ce bloc doit rester
   en fin de feuille pour l'emporter a specificite egale. */
@media(max-width:860px){
  /* une photo panoramique dans une boite haute et etroite serait massacree :
     on la pose en haut a son ratio, et le texte passe dessous, lisible. */
  .band{min-height:0;display:block;background:var(--sage)}
  .band__ph{position:relative;inset:auto;aspect-ratio:3/2;transform:none!important}
  .band__ph img{position:relative;height:100%}
  .band:after{display:none}
  .band__in{padding:26px var(--gut) 34px}
  .band__l{max-width:100%}
}

/* ============================================================
   Replis responsives des composants definis PLUS BAS que le bloc
   responsive principal. A specificite egale c'est la derniere
   regle qui gagne : ce bloc doit rester en fin de feuille.
   ============================================================ */
@media(max-width:1000px){
  .testi{grid-template-columns:1fr;gap:clamp(24px,5vw,36px)}
  .testi__vidcol{max-width:340px;margin:0 auto;width:100%}
  .testi__vid{aspect-ratio:9/16}
  .testi__tx blockquote p{max-width:none}
  .story{grid-template-columns:1fr;gap:clamp(24px,5vw,40px)}
  .story__tx .lead,.story__tx p{max-width:none}
  .food{grid-template-columns:1fr}
  .food__ph{min-height:0;aspect-ratio:3/2}
  .food__ph:after{background:linear-gradient(180deg,transparent 52%,var(--forest-dk) 100%)}
  .food__tx p,.food__tx h2{max-width:none}
}
@media(max-width:860px){
  .team{grid-template-columns:repeat(3,1fr)}
  .gal__grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:560px){
  .team{grid-template-columns:repeat(2,1fr)}
  .gal__grid{grid-template-columns:repeat(2,1fr)}
  .story__ph{grid-template-columns:1fr 1fr}
}

/* ---------- chambres : liste filtrable ---------- */
.rmwrap{display:grid;grid-template-columns:230px 1fr;gap:clamp(20px,3vw,40px);align-items:start}
.rmfilt{position:sticky;top:96px;display:flex;flex-direction:column;gap:8px}
.rmfilt b{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:4px}
.rmfilt button{text-align:left;background:#fff;border:1px solid var(--line);border-radius:10px;
  padding:12px 15px;font:500 14.5px var(--sans);color:var(--ink);cursor:pointer;min-height:46px;
  display:flex;justify-content:space-between;align-items:center;gap:10px}
.rmfilt button:hover{border-color:var(--sage);background:var(--sage-pale)}
.rmfilt button[aria-pressed=true]{background:var(--forest);color:#fff;border-color:var(--forest)}
.rmfilt button i{font-style:normal;font-size:12.5px;opacity:.65;font-variant-numeric:tabular-nums}
.rmgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,22px)}
.rm{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column}
.rm__img{aspect-ratio:4/3;overflow:hidden;background:var(--sage-pale)}
.rm__img img{width:100%;height:100%;object-fit:cover}
.rm__b{padding:16px 18px 18px;flex:1;display:flex;flex-direction:column}
.rm__n{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute)}
.rm__b h3{font-size:18px;margin:5px 0 4px}
.rm__meta{font-size:13.5px;color:var(--ink-soft);margin-bottom:12px}
.rm__p{margin-top:auto;padding-top:12px;border-top:1px solid var(--line-soft)}
.rm__p b{font-family:var(--serif);font-size:22px;display:block;line-height:1}
.rm__p span{font-size:12px;color:var(--ink-mute);display:block;margin-top:3px}
.rm__tocheck{font-size:11.5px;color:var(--warn);margin-top:6px;display:block}
.rmnone{padding:40px;text-align:center;color:var(--ink-mute);grid-column:1/-1}
@media(max-width:1000px){.rmwrap{grid-template-columns:1fr}.rmfilt{position:static;flex-direction:row;flex-wrap:wrap}
  .rmfilt b{width:100%}.rmgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.rmgrid{grid-template-columns:1fr}}

/* ---------- encart d'appel (transfert, etc.) ---------- */
.cta{display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  background:var(--sage-pale);border:1px solid #CDDCCB;border-radius:var(--radius-lg);padding:24px 28px;margin:28px 0}
.cta div{max-width:56ch}
.cta b{display:block;font-family:var(--serif);font-size:20px;margin-bottom:5px}
.cta p{margin:0;font-size:15px;color:var(--ink-soft);max-width:none}

/* ---------- shalas en grand ---------- */
.shalas{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,30px);align-items:stretch}
.sh img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
@media(max-width:900px){.shalas{grid-template-columns:1fr 1fr}}
.sh{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column}
.sh__img{aspect-ratio:16/11;overflow:hidden}
.sh__img img{width:100%;height:100%;object-fit:cover}
.sh__b{padding:22px 24px 24px;flex:1;display:flex;flex-direction:column}
.sh__b .sh__d{margin-top:auto;padding-top:0;align-self:flex-start}
.sh__b p{margin-bottom:14px}
.sh__b h3{font-size:22px;margin-bottom:7px}
.sh__b p{font-size:15.5px;color:var(--ink-soft);margin:0}
.sh__d{display:inline-block;margin-top:12px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  background:var(--sage-pale);color:var(--forest-dk);padding:5px 11px;border-radius:100px}
@media(max-width:760px){.shalas{grid-template-columns:1fr}}

/* ---------- experiences par famille ---------- */
.fam{margin-bottom:clamp(38px,5vw,62px)}
.fam__h{margin-bottom:22px;max-width:62ch}
.fam__h h3{font-size:clamp(22px,2.6vw,29px);margin:6px 0 8px}
.fam__h p{color:var(--ink-soft);font-size:16px;margin:0}
.exp{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,22px)}
.exp__c{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column}
.exp__c img{aspect-ratio:16/10;object-fit:cover;width:100%}
.exp__b{padding:20px 22px 22px}
.exp__b h3{font-family:var(--serif);font-size:19px;font-weight:600;margin-bottom:7px}
.exp__b p{font-size:14.5px;color:var(--ink-soft);margin:0}
@media(max-width:1000px){.exp{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.exp{grid-template-columns:1fr}}

/* ---------- moments de repas ---------- */
.meals{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,22px)}
.meal{border-top:2px solid var(--sage);padding-top:16px}
.meal b{display:block;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--terra-dk);margin-bottom:7px}
.meal h4{font-family:var(--serif);font-size:19px;font-weight:600;margin-bottom:6px}
.meal p{font-size:14.5px;color:var(--ink-soft);margin:0}
@media(max-width:860px){.meals{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.meals{grid-template-columns:1fr}}

/* ---------- carte ---------- */
.map{border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:var(--sage-pale)}
.map__c{width:100%;height:clamp(380px,56vh,620px);background:var(--sage-pale);position:relative}
.map__c noscript a{position:absolute;inset:0;display:grid;place-items:center}
.map__c .leaflet-container{font-family:var(--sans);background:#EEF0EA}
.map__c .leaflet-tile-pane{filter:grayscale(1) sepia(.22) brightness(1.06) contrast(.9) saturate(.9)}
.map__c .leaflet-control-attribution{font-size:10px;background:rgba(255,255,255,.7);color:var(--ink-mute)}
.map__c .leaflet-control-attribution a{color:var(--ink-mute)}
.map__c .leaflet-bar{border:1px solid var(--line);box-shadow:var(--shadow-sm);border-radius:10px;overflow:hidden}
.map__c .leaflet-bar a{color:var(--forest);border-bottom-color:var(--line-soft)}
.wk-pin{width:18px;height:18px;border-radius:50%;background:var(--terra-dk);border:3px solid #fff;box-shadow:0 0 0 2px var(--terra-dk),0 6px 16px rgba(30,42,34,.25)}
.wk-pin:after{content:"";position:absolute;inset:-14px;border-radius:50%;border:1.5px solid var(--terra-dk);opacity:.35;animation:pin 2.6s ease-out infinite}
@keyframes pin{0%{transform:scale(.4);opacity:.6}100%{transform:scale(1.15);opacity:0}}
@media (prefers-reduced-motion:reduce){.wk-pin:after{animation:none}}
.map__b{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  padding:18px 22px;background:#fff;border-top:1px solid var(--line)}
.map__b p{margin:0;font-size:14.5px;color:var(--ink-soft);max-width:52ch}

/* ---------- morphing vignette vers grande image ---------- */
::view-transition-old(zoomed),
::view-transition-new(zoomed){
  animation-duration:.42s;
  animation-timing-function:cubic-bezier(.22,1,.36,1);
  mix-blend-mode:normal;
}
::view-transition-group(zoomed){ animation-duration:.42s }
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* ---------- fiche chambre depliee ---------- */
.rm{cursor:zoom-in}
.rm__open{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;background:none;cursor:zoom-in;z-index:2}
.rm{position:relative}
.rmd{position:fixed;inset:0;z-index:100;background:rgba(18,28,20,.94);display:none;
  align-items:center;justify-content:center;padding:clamp(14px,3vw,44px)}
.rmd[data-open]{display:flex}
.rmd__card{background:var(--cream);border-radius:10px 10px 28px 10px;overflow:hidden;
  width:min(1080px,96vw);max-height:92vh;display:grid;grid-template-columns:1.1fr 1fr;box-shadow:0 40px 90px rgba(0,0,0,.5)}
.rmd__ph{position:relative;min-height:320px;background:var(--sage-pale)}
.rmd__ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rmd__b{padding:clamp(24px,3vw,40px);overflow-y:auto}
.rmd__n{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute)}
.rmd__b h3{font-size:clamp(24px,2.6vw,32px);margin:7px 0 6px}
.rmd__meta{font-size:16px;color:var(--ink-soft);margin-bottom:20px}
.rmd__price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.rmd__price b{font-family:var(--serif);font-size:32px;line-height:1}
.rmd__price span{font-size:14px;color:var(--ink-mute)}
.rmd__inc{list-style:none;padding:0;margin:20px 0 24px;display:grid;gap:9px}
.rmd__inc li{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--ink-soft);line-height:1.5}
.rmd__inc li:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--sage);flex:0 0 6px;margin-top:8px}
.rmd__act{display:flex;gap:12px;flex-wrap:wrap}
.rmd__x{position:absolute;top:18px;right:18px;z-index:3;width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.92);border:0;font-size:24px;line-height:1;cursor:pointer;color:var(--ink)}
.rmd__p,.rmd__nx{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:48px;height:48px;border-radius:50%;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);cursor:pointer;display:grid;place-items:center}
.rmd__p{left:14px}.rmd__nx{right:14px}
.rmd__p svg,.rmd__nx svg{width:17px;height:17px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round}
@media(max-width:860px){
  /* En colonne, la photo prend sa place et le corps DOIT prendre le reste,
     sans le depasser : sans `minmax(0,1fr)` sa rangee grandit avec son
     contenu, la carte la coupe, et les deux boutons du bas devenaient
     inatteignables faute de pouvoir faire defiler. */
  .rmd__card{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);max-height:94vh}
  .rmd__ph{min-height:0;aspect-ratio:4/3}
  .rmd__p,.rmd__nx{display:none}
}
::view-transition-old(roomshot),::view-transition-new(roomshot){
  animation-duration:.44s;animation-timing-function:cubic-bezier(.22,1,.36,1)}
::view-transition-group(roomshot){animation-duration:.44s}

/* icone d engagement */
.ethos__ic{width:44px;height:44px;border-radius:12px;background:var(--sage-pale);
  display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.ethos__ic svg{width:22px;height:22px;stroke:var(--forest);fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}

/* la premiere photo de CHAQUE serie est mise en avant, pas une sur deux */
.gal__set .gal__c:first-child{grid-column:span 2;grid-row:span 2}
.gal__set .gal__c:first-child img{aspect-ratio:1/1}
@media(max-width:640px){.gal__set .gal__c:first-child{grid-column:span 2;grid-row:auto}
  .gal__set .gal__c:first-child img{aspect-ratio:4/3}}

/* contact : coordonnees et carte cote a cote */
.ctwo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,30px);align-items:start}
.ctwo .map iframe{height:clamp(320px,42vh,100%);min-height:340px}
@media(max-width:900px){.ctwo{grid-template-columns:1fr}}

/* icones des sous-menus */
.nav__sub a{display:flex;align-items:center;gap:11px}
.nav__ic{width:28px;height:28px;flex:0 0 28px;border-radius:8px;background:var(--sage-pale);
  display:flex;align-items:center;justify-content:center}
.nav__ic svg{width:15px;height:15px;stroke:var(--forest);fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.nav__sub a:hover .nav__ic{background:var(--sage);}
.nav__sub a:hover .nav__ic svg{stroke:#fff}
.msheet ul ul a{display:flex;align-items:center;gap:11px}
.msheet .nav__ic{width:30px;height:30px;flex:0 0 30px}

/* second bouton d en-tete, volontairement plus discret */
.btn--quiet{background:var(--white);color:var(--forest);border-color:var(--sage);font-weight:600}
.btn--quiet:hover{background:var(--sage-pale);border-color:var(--forest)}
.hdr .btn--quiet{margin-left:10px}
@media(max-width:1180px){.hdr .btn--quiet{display:none}}

/* portrait de la personne qui temoigne */
.testi__ph{width:56px;height:56px;flex:0 0 56px;border-radius:50%;overflow:hidden;
  display:inline-block;vertical-align:middle;margin-right:14px;border:2px solid var(--sage-pale)}
.testi__ph img{width:100%;height:100%;object-fit:cover;display:block}
.testi__q cite{display:flex;align-items:center}

.fam__h h2{font-size:clamp(22px,2.6vw,29px);margin:6px 0 8px}

.testi .eyebrow,.testi__head .eyebrow{color:var(--terra-dk)}

/* pages legales : une colonne lisible, rien de plus */
.legal{max-width:68ch}
.legal__s{margin-bottom:clamp(28px,3.4vw,44px)}
.legal__s h2{font-size:clamp(20px,2.2vw,25px);margin-bottom:12px}
.legal__s p{font-size:16.5px;color:var(--ink-soft);margin-bottom:14px;max-width:none}
.legal__d{font-size:14px;color:var(--ink-mute);border-top:1px solid var(--line);padding-top:18px}
.ftr__b a:not(.ftr__adm){color:inherit;text-decoration:underline;text-underline-offset:3px}
@media(max-width:760px){
  .ftr__g a[href^="mailto:"],.ftr__g a[href*="wa.me"]{display:inline-block;padding:7px 0;min-height:34px}
  .leaflet-control-zoom a{width:36px!important;height:36px!important;line-height:36px!important}
}
.ftr__b a:hover{color:#fff}

/* acces administration : discret, mais trouvable sans qu'on l'explique */
.ftr__adm{text-decoration:none;display:inline-flex;align-items:center;justify-content:center;
  margin-left:auto;width:38px;height:38px;border:1px solid rgba(255,255,255,.22);border-radius:50%;
  color:rgba(255,255,255,.62)}
.ftr__adm:hover{border-color:rgba(255,255,255,.5);color:#fff;background:rgba(255,255,255,.06)}
.ftr__adm svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 15px}
@media(max-width:700px){.ftr__adm{margin-left:0;margin-top:12px}}

/* Oiseaux : les photos des guides sont cadrees a la prise de vue, en portrait
   comme en paysage. Une grille 4/3 les recadrerait et couperait l'oiseau, donc
   on les laisse a leur format naturel dans des colonnes. */
.birds{columns:3;column-gap:14px}
.birds .gal__c{break-inside:avoid;margin:0 0 14px}
.birds .gal__c img{height:auto;display:block}
@media(max-width:900px){.birds{columns:2}}
@media(max-width:560px){.birds{columns:2;column-gap:10px}
  .birds .gal__c{margin-bottom:10px}
  .birds .gal__c figcaption{padding:8px 10px;font-size:12px}}

/* raffinement de forme (variante « Ligne d'horizon », validee par Julien le
   2026-09-07 SAUF ses courbes de section, qui ne sont pas reprises).
   Titres moins gras et plus serres, libelles plus espaces, boutons plus hauts,
   texte plus aere : la page respire sans rien changer a sa structure. */
h1,h2,h3,.ftr__h{font-weight:500;letter-spacing:-.005em}
h1,.hero h1{line-height:1.12;font-weight:500}
.eyebrow,.sh__d,.soc__h{letter-spacing:.16em;font-weight:500}
.btn{font-weight:500;letter-spacing:.01em;padding-top:15px;padding-bottom:15px}
.rz__c,.sh,.exp__c,.rev{border-radius:var(--radius-lg);overflow:hidden}
p{line-height:1.72}
.num b{font-weight:500}

/* ============================================================
   Revision de septembre 2026. Ce que les meilleurs sites de
   lieux font en 2026 et que celui-ci ne faisait pas encore :
   l'en-tete se pose SUR la photo d'ouverture puis se solidifie
   au defilement, les images arrivent en fondu, les cartes
   respirent au survol, les revelations sont decalees d'un
   element a l'autre. Tout reste sans dependance, et tout est
   neutralise par prefers-reduced-motion.
   ============================================================ */
:root{--nav-h:88px;--ease:cubic-bezier(.22,1,.36,1)}
html{scroll-padding-top:calc(var(--nav-h) + 72px)}
p{text-wrap:pretty}

/* --- en-tete : toujours sur son fond creme (Julien, 7 septembre 2026 : un
   en-tete transparent sur la photo rend le menu trop peu lisible). Il ne
   gagne qu'une ombre legere une fois que l'on a defile. --- */
.hdr{transition:box-shadow .35s ease}
.hdr--solid{box-shadow:0 1px 0 var(--line),0 10px 30px rgba(30,42,34,.06)}
/* la photo d'ouverture bouge comme une video au ralenti : un glissement de
   droite a gauche et un zoom a peine perceptible, sur une demi-minute */
.hero img{animation:kb 14s cubic-bezier(.2,.6,.3,1) forwards;transform-origin:50% 58%}
@keyframes kb{from{transform:scale(1.045)}to{transform:scale(1)}}

/* --- images : apparition en fondu une fois chargees --- */
img[loading=lazy]{opacity:0;transition:opacity .7s ease}
img[loading=lazy].is-loaded,img[loading=lazy].no-fade{opacity:1}
.hero img,.band__ph img,.day__ph img{opacity:1}

/* --- cartes : l'image respire, la carte se souleve --- */
.card,.rz__c,.sh,.exp__c,.rm,.sess__c,.gal__c,.strip__c,.bldg__c,.space{transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s}
.card:hover,.rz__c:hover,.sh:hover,.exp__c:hover,.rm:hover,.sess__c:hover,.strip__c:hover,.bldg__c:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.card__img img,.rz__c img,.sh img,.exp__c img,.rm__img img,.sess__c img,.gal__c img,.strip__c img,.bldg__img img,.space__img img{transition:transform 1.2s var(--ease)}
.card:hover .card__img img,.rz__c:hover img,.sh:hover img,.exp__c:hover img,.rm:hover .rm__img img,.sess__c:hover img,
.gal__c:hover img,.strip__c:hover img,.bldg__c:hover img,.space:hover .space__img img{transform:scale(1.02)}
.rz__c img,.sh img,.exp__c img,.strip__c img{will-change:transform}
.gal__c,.rz__c img,.sh__img,.exp__c img{overflow:hidden}

/* --- boutons : un peu de vie, sans clignoter --- */
.btn{transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .2s,border-color .2s,color .2s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.985)}
.btn--primary:hover{box-shadow:0 12px 28px color-mix(in srgb,var(--terra) 34%,transparent)}

/* --- revelations : decalees d'un enfant a l'autre --- */
.rv{transition:opacity .7s ease,transform .7s var(--ease)}
.rv{transform:translateY(18px)}
.grid>.rv:nth-child(2),.rz>.rv:nth-child(2),.shalas>.rv:nth-child(2),.exp>.rv:nth-child(2),.steps>.rv:nth-child(2),.bldg>.rv:nth-child(2){transition-delay:.08s}
.grid>.rv:nth-child(3),.rz>.rv:nth-child(3),.shalas>.rv:nth-child(3),.exp>.rv:nth-child(3),.steps>.rv:nth-child(3),.bldg>.rv:nth-child(3){transition-delay:.16s}
.grid>.rv:nth-child(4),.rz>.rv:nth-child(4){transition-delay:.24s}
.grid>.rv:nth-child(5),.rz>.rv:nth-child(5){transition-delay:.32s}

/* --- sections : un rythme un peu plus serre quand elles s'enchainent --- */
.sec--tight{padding:clamp(40px,5vw,64px) 0}

/* ============================================================
   Page groupes
   ============================================================ */
/* barre d'ancres : elle suit sous l'en-tete et souligne la section lue */
.subnav{position:sticky;top:calc(var(--nav-h) - 1px);z-index:40;background:rgba(248,245,238,.92);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line)}
.subnav ul{list-style:none;margin:0;padding:0;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.subnav ul::-webkit-scrollbar{display:none}
.subnav a{display:block;padding:15px 14px;font-size:13.5px;font-weight:500;color:var(--ink-soft);text-decoration:none;
  white-space:nowrap;position:relative;letter-spacing:.01em}
.subnav a:after{content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:2px;background:var(--terra-dk);
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.subnav a:hover{color:var(--ink)}
.subnav a.on{color:var(--forest-dk)}
.subnav a.on:after{transform:scaleX(1)}
.subnav li:last-child{margin-left:auto}.subnav li:last-child a{color:var(--terra-dk);font-weight:600}
/* La barre d'ancres se colle SOUS l'en-tete, jamais a zero : a zero elle
   passait derriere lui et devenait invisible sur telephone, avec ses liens
   inatteignables, alors qu'elle occupait quand meme sa place. */
@media(max-width:1000px){.subnav a{padding:14px 12px;font-size:13px}}

/* trois etapes */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.6vw,36px);
  counter-reset:step}
.step{position:relative;padding:clamp(22px,2.6vw,32px) 0 0;border-top:1px solid var(--line)}
.step__n{display:block;font-family:var(--serif);font-size:15px;letter-spacing:.14em;color:var(--terra-dk);margin-bottom:14px}
.step h3{font-size:clamp(20px,2.1vw,25px);margin-bottom:10px}
.step p{font-size:15.5px;color:var(--ink-soft);margin:0;max-width:38ch}
@media(max-width:800px){.steps{grid-template-columns:1fr;gap:6px}.step{padding-top:22px;padding-bottom:16px}}

/* les espaces : le grand shala en tete, les deux autres a cote */
.spaces{display:grid;grid-template-columns:1.7fr 1fr;grid-template-rows:auto auto;gap:clamp(16px,2vw,26px);margin-top:clamp(24px,3vw,38px)}
.space{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:var(--sage);min-height:300px;display:flex;align-items:flex-end}
.space--lead{grid-row:1 / span 2;min-height:560px}
.space__img{position:absolute;inset:0}
.space__img img{width:100%;height:100%;object-fit:cover}
.space:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,28,20,0) 35%,rgba(18,28,20,.82) 100%)}
.space__b{position:relative;z-index:2;padding:clamp(20px,2.4vw,32px);color:#fff}
.space__d{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);padding:5px 11px;border-radius:100px;margin-bottom:12px;color:#fff}
.space__b h3{color:#fff;font-size:clamp(21px,2.2vw,30px);margin-bottom:8px}
.space--lead .space__b h3{font-size:clamp(26px,3vw,40px)}
.space__b p{color:#DCE6D8;font-size:15px;margin:0;max-width:52ch}
.space--lead .space__b p{font-size:16.5px}
@media(max-width:900px){.spaces{grid-template-columns:1fr}.space--lead{grid-row:auto;min-height:500px}.space{min-height:300px}
  .space:after{background:linear-gradient(180deg,rgba(18,28,20,0) 30%,rgba(18,28,20,.86) 100%)}}

/* la semaine : qui mene quoi */
.tl__t{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tl__who{font-style:normal;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--ink-mute);
  background:rgba(255,255,255,.7);border:1px solid var(--line);padding:3px 8px;border-radius:100px}
.tl__who--you{color:#fff;background:var(--forest);border-color:var(--forest)}
.week .rhy__n{margin-top:26px}

/* ou l'on dort : trois batiments comptes depuis rooms.json */
.bldg{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px);margin-top:clamp(24px,3vw,38px)}
.bldg__c{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column}
.bldg__img{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--sage-pale)}
.bldg__img img{width:100%;height:100%;object-fit:cover}
.bldg__n{position:absolute;left:16px;bottom:16px;background:rgba(248,245,238,.94);color:var(--ink);font-size:13px;font-weight:500;
  padding:8px 13px;border-radius:100px;display:flex;align-items:baseline;gap:6px;backdrop-filter:blur(6px)}
.bldg__n b{font-family:var(--serif);font-size:20px;line-height:1;color:var(--forest)}
.bldg__b{padding:22px 24px 24px;flex:1;display:flex;flex-direction:column}
.bldg__b h3{font-size:22px;margin-bottom:8px}
.bldg__b p{font-size:15px;color:var(--ink-soft);margin:0 0 16px}
.bldg__t{list-style:none;padding:0;margin:auto 0 0;display:flex;flex-wrap:wrap;gap:7px}
.bldg__t li{font-size:12.5px;color:var(--forest-dk);background:var(--sage-pale);padding:5px 11px;border-radius:100px}
.bldg__more{margin:clamp(22px,3vw,32px) 0 0}
@media(max-width:900px){.bldg{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.bldg{grid-template-columns:1fr}}

/* les apres-midi : une bande qui defile a l'horizontale */
.strip{margin-top:clamp(22px,3vw,36px)}
.strip__in{display:flex;gap:clamp(14px,1.8vw,22px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  padding-bottom:6px;scroll-padding-inline:var(--gut);-webkit-overflow-scrolling:touch;cursor:grab}
.strip__in:after{content:"";flex:0 0 1px}
.strip__in::-webkit-scrollbar{display:none}
.strip__in.dragging{cursor:grabbing;scroll-snap-type:none}
.strip__c{flex:0 0 clamp(260px,26vw,340px);scroll-snap-align:start;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column}
.strip__c img{aspect-ratio:4/3;object-fit:cover;width:100%;display:block}
.strip__b{padding:18px 20px 20px}
.strip__b .who{margin-bottom:6px}
.strip__b h3{font-size:19px;margin-bottom:7px}
.strip__b p{font-size:14px;color:var(--ink-soft);margin:0;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.strip__nav{display:flex;align-items:center;gap:10px;margin-top:18px}
.strip__hint{font-size:13.5px;color:var(--ink-mute);margin-left:8px}
@media(max-width:600px){.strip__c{flex-basis:78vw}}

/* questions : un accordeon sobre, la premiere ouverte */
.faq{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,80px);align-items:start}
.faq__h{position:static}
.faq__h .sec__head{margin-bottom:22px}
.faq__l{border-top:1px solid var(--line)}
.faq__i{border-bottom:1px solid var(--line)}
.faq__i summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:20px 0;font-family:var(--serif);font-size:clamp(18px,1.7vw,21px);font-weight:500;color:var(--ink);line-height:1.3}
.faq__i summary::-webkit-details-marker{display:none}
.faq__i summary i{flex:0 0 30px;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);position:relative;
  transition:transform .35s var(--ease),background .25s,border-color .25s}
.faq__i summary i:before,.faq__i summary i:after{content:"";position:absolute;left:50%;top:50%;background:var(--forest);
  width:12px;height:1.5px;transform:translate(-50%,-50%)}
.faq__i summary i:after{transform:translate(-50%,-50%) rotate(90deg);transition:opacity .2s}
.faq__i[open] summary i{transform:rotate(45deg);background:var(--sage-pale);border-color:var(--sage)}
.faq__i summary:hover i{background:var(--sage-pale)}
.faq__i p{margin:0 0 22px;font-size:16px;color:var(--ink-soft);max-width:60ch}
@media(max-width:860px){.faq{grid-template-columns:1fr}}

.nums--4 .num span strong{display:block}

@media (prefers-reduced-motion:reduce){
  .hero img{animation:none}
  img[loading=lazy]{opacity:1;transition:none}
  .card:hover,.rz__c:hover,.sh:hover,.exp__c:hover,.rm:hover,.sess__c:hover,.strip__c:hover,.bldg__c:hover{transform:none}
  .rv{transition-delay:0s!important}
}

/* ---------- bandeau de consentement ----------
   En bas a gauche, sobre, jamais en plein ecran : un visiteur qui l'ignore
   peut lire le site. Il n'existe que si une mesure a cookies est configuree. */
.consent{position:fixed;left:16px;bottom:16px;z-index:70;width:min(420px,calc(100vw - 32px));background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow-md);padding:18px 20px}
.consent p{font-size:14px;line-height:1.55;color:var(--ink-soft);margin:0 0 14px;max-width:none}
.consent p b{color:var(--ink)}
.consent__b{display:flex;gap:10px;flex-wrap:wrap}
@media(max-width:1000px){.consent{bottom:calc(74px + env(safe-area-inset-bottom) + 12px)}}


/* ============================================================
   Relecture du 7 septembre 2026 : la qualite dans le detail.
   ============================================================ */

/* Tetes de section : le chapeau reste sous le titre (Julien, 8 septembre
   2026), a une largeur de lecture. */
.sec__head h2{text-wrap:balance}

/* Encarts : toujours blanc sur un fond teinte, creme sur blanc, avec un
   filet. Le vert pale n'est plus un fond de boite, seulement une touche. */
.cta{background:#fff;border:1px solid var(--line);border-left-color:var(--sage)}
.sec--white .cta{background:var(--cream)}
/* la citation de Notre histoire garde son bloc vert pale d'origine (Julien, 8 septembre 2026) ;
   seule celle du jardin, posee sur blanc, prend le fond creme et le filet */
.trip .trip__hi{background:transparent;border-bottom-color:var(--line)}
.trip dt.trip__hi{color:var(--terra-dk);padding-left:0;border-radius:0;box-shadow:none}
.trip dd.trip__hi{padding-right:0;border-radius:0;box-shadow:none}
.trip dd.trip__hi strong:after{content:"Arranged by us";display:inline-block;margin-left:10px;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--forest-dk);background:var(--sage-pale);padding:3px 9px;border-radius:100px;vertical-align:2px;font-weight:600}
.enq{background:#fff;border-top:1px solid var(--line)}
.enq .form{background:var(--cream);border:1px solid var(--line)}
.enq .rev,.enq .gbadge{border-color:var(--line)}
.gbadge{background:var(--cream)}

/* Frise du jour : un moment a venir se lit, il est seulement en retrait */
.tl__it{opacity:.62}
.tl__it.reached{opacity:1}

/* Galerie : trois colonnes regulieres, des series de trois ou six, jamais
   de trou. La premiere photo ne s'etale plus sur deux rangs. */
.gal__set .gal__grid{grid-template-columns:repeat(4,1fr)}
.gal__set .gal__c:first-child{grid-column:span 2;grid-row:span 2}
.gal__set .gal__c:first-child img{aspect-ratio:1/1}
.gal__grid--3{grid-template-columns:repeat(3,1fr);margin-top:clamp(24px,3vw,38px)}
@media(max-width:900px){.gal__set .gal__grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.gal__set .gal__grid{grid-template-columns:repeat(2,1fr)}.gal__set .gal__c:first-child{grid-row:auto}.gal__set .gal__c:first-child img{aspect-ratio:4/3}}
@media(max-width:640px){.gal__grid--3{grid-template-columns:1fr}}

/* Engagements : six entrees sur un filet, pas six boites blanches */
.ethos{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,44px) clamp(20px,3vw,40px)}
.ethos__it{border-top:1px solid var(--line);padding-top:22px}
.ethos__it h3{font-size:21px;margin:0 0 8px}
.ethos__it p{font-size:15.5px;color:var(--ink-soft);margin:0;max-width:34ch}
.ethos .ethos__ic{background:transparent;border:1px solid var(--line);width:40px;height:40px;margin-bottom:16px}
@media(max-width:900px){.ethos{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ethos{grid-template-columns:1fr}}
/* Trois personnes nommees a ce jour : une rangee, et la phrase sur le reste
   de l'equipe prend la place qui reste, au lieu d'un vide a droite. */
.team{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(24px,3vw,44px)}
.team figure{flex:0 0 170px}
.team__n{flex:1 1 280px;margin:0;font-size:16px;color:var(--ink-soft);max-width:40ch;line-height:1.6;
  padding-left:clamp(12px,2vw,28px);border-left:1px solid var(--line)}
@media(max-width:640px){.team figure{flex-basis:calc(50% - 16px)}.team__n{border-left:0;padding-left:0}}

/* Etapes avec une liste (immersion) */
.step__l{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.step__l li{font-size:15.5px;color:var(--ink-soft);padding-left:18px;position:relative}
.step__l li:before{content:"";position:absolute;left:0;top:10px;width:6px;height:6px;border-radius:50%;background:var(--sage)}

/* Bon a savoir (acces) */
.know{margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.6vw,36px)}
.know__it{border-top:1px solid var(--line);padding-top:18px}
.know dt{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--terra-dk);margin-bottom:10px}
.know dd{margin:0;font-size:15.5px;color:var(--ink-soft);line-height:1.6}
@media(max-width:900px){.know{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.know{grid-template-columns:1fr}}

/* Le jardin (cuisine) */
.garden{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,80px);align-items:center}
.garden__ph{margin:0}
.garden__ph img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:8px 8px 28px 8px;box-shadow:var(--shadow-md)}
.garden__tx h2{margin:6px 0 14px}
.garden__tx>p{color:var(--ink-soft);font-size:17px;max-width:52ch}
.pts{list-style:none;padding:0;margin:8px 0 22px;display:grid;gap:10px}
.pts li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;color:var(--ink);line-height:1.5}
.pts li:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--terra-dk);flex:0 0 6px;margin-top:9px}
.garden .story__q{margin-top:8px}
@media(max-width:860px){.garden{grid-template-columns:1fr}.garden__ph img{aspect-ratio:4/3}}

/* Ou aller ensuite : deux grandes portes avant le formulaire */
.next{padding:clamp(48px,6vw,84px) 0;background:var(--cream)}
.next .eyebrow{color:var(--terra-dk);margin-bottom:22px}
.next__g{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,26px)}
.next__c{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:0;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-lg);overflow:hidden;text-decoration:none;color:inherit;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s}
.next__c:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm);border-color:var(--sage)}
.next__img{aspect-ratio:1/1;overflow:hidden;background:var(--sage-pale)}
.next__img img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.next__c:hover .next__img img{transform:scale(1.02)}
.next__b{padding:clamp(20px,2.4vw,32px);display:flex;flex-direction:column}
.next__b h3{font-size:clamp(20px,2vw,26px);margin-bottom:8px}
.next__b p{font-size:15px;color:var(--ink-soft);margin:0 0 18px}
.next__a{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--forest)}
.next__a svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
.next__c:hover .next__a svg{transform:translateX(4px)}
@media(max-width:860px){.next__g{grid-template-columns:1fr}.next__c{grid-template-columns:1fr}.next__img{aspect-ratio:16/9}}

/* Les fonds d'attente des images sont sauge, pas vert sombre (Julien, 8 septembre 2026) */
.card__img,.rm__img,.bldg__img,.next__img,.ig__c,.map__c,.testi__vid,.rmd__ph,.sh__img,.gal__c,.strip__c img,.exp__c img,.rz__c img,.sess__c img,.day__ph,.food__ph,.garden__ph img,.story__p img,.story__together img{background-color:var(--sage-pale)}
.testi__vid{background:var(--sage-pale)}


/* ---------- retours du 8 septembre 2026 ---------- */
/* la carte aligne sur le titre : le titre vit dans la colonne de gauche */
.here .sec__head{margin-bottom:clamp(20px,2.6vw,30px)}
.here{margin-top:0}
.here .trip{margin-top:0}
/* contact : la meme liste que les temps de trajet, avec des intitules */
.trip--reach{grid-template-columns:minmax(96px,150px) 1fr}
.trip--reach dt{font-family:var(--sans);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--terra-dk);padding-top:27px}
.trip--reach dd a{font-family:var(--serif);font-size:clamp(18px,1.7vw,22px);color:var(--ink);text-decoration:none}
.trip--reach dd a:hover{color:var(--forest);text-decoration:underline}
.trip--reach dd strong{font-family:var(--serif);font-size:clamp(18px,1.7vw,22px);font-weight:500}
.trip--reach dd span{margin-top:4px}
/* pied de page : la note et ses cinq etoiles */
.ftr__rate{display:flex;align-items:baseline;gap:12px;margin:0 0 4px}
.ftr__rate b{font-family:var(--serif);font-size:30px;font-weight:500;color:var(--gold);line-height:1}
.ftr__rate .stars{font-size:14px;letter-spacing:2px}
/* chambres : ce que chaque chambre a */
.rest{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,80px);align-items:start}
.rest__tx h2{margin:6px 0 14px}
.rest__tx>p{color:var(--ink-soft);font-size:17px;max-width:48ch}
.rest__ph{margin:clamp(20px,2.6vw,30px) 0 0}
.rest__ph img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px 8px 24px 8px}
.steps--col{grid-template-columns:1fr;gap:6px}
.steps--col .step{display:grid;grid-template-columns:52px 1fr;column-gap:14px;padding:22px 0 20px}
.steps--col .step__n{margin:6px 0 0}
.steps--col .step h3{margin-bottom:6px}
.steps--col .step p{grid-column:2;max-width:56ch}
@media(max-width:860px){.rest{grid-template-columns:1fr}}
/* yoga : l'immersion */
.imm{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,80px);align-items:center}
.imm__ph{position:relative;margin:0}
.imm__ph img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:8px 8px 28px 8px;box-shadow:var(--shadow-md)}
.imm__tag{position:absolute;left:18px;bottom:18px;background:rgba(248,245,238,.94);color:var(--ink);font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;padding:8px 14px;border-radius:100px}
.imm__tx h2{margin:6px 0 12px}
.imm__lead{font-family:var(--serif);font-size:clamp(19px,2vw,24px);color:var(--ink);line-height:1.4;margin:0 0 10px;max-width:30ch}
.imm__tx>p{color:var(--ink-soft);font-size:16.5px;max-width:52ch}
.imm__day{list-style:none;margin:22px 0 26px;padding:0;border-top:1px solid var(--line)}
.imm__day li{display:grid;grid-template-columns:110px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);align-items:start}
.imm__day b{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--terra-dk);padding-top:6px}
.imm__day div{display:flex;flex-wrap:wrap;gap:7px}
.imm__day span{font-size:13.5px;color:var(--forest-dk);background:var(--sage-pale);padding:6px 12px;border-radius:100px}
@media(max-width:860px){.imm{grid-template-columns:1fr}.imm__ph img{aspect-ratio:4/3}.imm__day li{grid-template-columns:1fr;gap:8px}}
/* oiseaux : l'expedition */
.exped{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;margin-top:clamp(24px,3vw,38px)}
.exped__ph{min-height:420px;position:relative;background:var(--sage-pale)}
.exped__ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.exped__b{padding:clamp(26px,3.4vw,48px)}
.exped__date{display:inline-block;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--forest-dk);background:var(--sage-pale);padding:8px 14px;border-radius:100px;margin-bottom:16px}
.exped__b h3{font-size:clamp(24px,2.6vw,34px);margin-bottom:6px}
.exped__n{font-family:var(--serif);font-size:19px;color:var(--terra-dk);margin:0 0 14px}
.exped__b>p{color:var(--ink-soft);font-size:16px;max-width:none}
.exped .pts{margin:16px 0 24px}
.exped__own{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:clamp(16px,2vw,24px);padding:clamp(22px,2.6vw,32px);background:var(--cream);border:1px solid var(--line);border-left-color:var(--sage);border-radius:var(--radius-lg)}
.exped__own .eyebrow{color:var(--terra-dk);margin-bottom:8px}
.exped__own h3{font-size:22px;margin-bottom:6px}
.exped__own p{margin:0;color:var(--ink-soft);font-size:15.5px;max-width:60ch}
@media(max-width:860px){.exped{grid-template-columns:1fr}.exped__ph{min-height:0;aspect-ratio:4/3}}
/* oiseaux : une matinee, en mosaique a niveaux */
.mason{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:auto;gap:16px}
.mason .gal__c img{aspect-ratio:4/3}
.mason .mason--big{grid-column:span 2;grid-row:span 2}
.mason .mason--big img{aspect-ratio:auto;height:100%;object-fit:cover}
.mason .gal__c{display:flex;flex-direction:column}
.mason .gal__c img{flex:1;min-height:0}
@media(max-width:640px){.mason{grid-template-columns:repeat(2,1fr)}.mason .mason--big{grid-row:auto}.mason .mason--big img{aspect-ratio:4/3}}
/* equipe : ceux dont le nom manque encore n'ont pas de legende */
.team figure b:empty{display:none}

.rest__tx .eyebrow,.imm__tx .eyebrow,.garden__tx .eyebrow,.relief__h .eyebrow,.next .eyebrow,.ig__h .eyebrow{color:var(--terra-dk)}
/* instagram : la deuxieme rangee compte une vignette de moins et se decale d'une demi-vignette vers la droite */
.ig__row--b{transform:translateX(calc(-1 * var(--ig-w) / 2 + var(--ig-w) / 2))}
/* accroche : une taille qui tient en trois lignes */
.lead2__a{font-size:clamp(23px,2.6vw,32px)}
/* equipe : les portraits sans nom gardent la meme hauteur que les autres */
.team figure{display:flex;flex-direction:column;align-items:center;justify-content:flex-start}
.team__n{align-self:center}
.team{align-items:stretch}
.team figure img{width:100%}
.team figure img{margin-bottom:12px}
/* les personnes dont on attend le nom : portrait seul, aligne en haut, aucune legende vide */
.team figure b,.team figure span{min-height:0}


/* ============================================================
   Mobile : relecture du 9 septembre 2026
   ============================================================ */
@media(max-width:700px){
  /* Rien ne deborde de l'ecran, mais SANS `overflow-x:hidden` sur html ou
     body : cette declaration fait du document un conteneur de defilement, ce
     qui CASSE `position:sticky` pour tous ses descendants sous Chrome. En
     telephone Android, l'en-tete partait au defilement et ne revenait jamais,
     obligeant a remonter toute la page pour changer de rubrique. `clip`
     coupe de la meme facon sans creer de conteneur de defilement. Le balayage
     des quinze pages a trois largeurs ne montre aucun debordement : c'est une
     ceinture, plus un correctif. */
  body{overflow-x:clip}
  .map,.map__c,.here,.here__map,.ctwo{max-width:100%;min-width:0}
  .map__c{height:clamp(280px,48vh,380px)}
  /* les listes a intitule a gauche passent en pile */
  .trip--reach{grid-template-columns:1fr}
  .trip--reach dt{padding:14px 0 2px;border-bottom:0}
  .trip--reach dd{padding-top:0}
  /* le hero : un seul bouton fort, l'autre en dessous, et de l'air avant la barre fixe */
  .hero__in{padding-bottom:calc(74px + 40px)}
  .hero .lead{margin-bottom:20px}
  .chips{gap:8px;margin-bottom:22px}
  .chip{font-size:12.5px;padding:8px 13px}
  .hero__actions{flex-direction:column;align-items:flex-start;gap:10px}
  .hero__actions .btn{min-width:200px}
  .scrollcue{display:none}
  /* accroche en deux colonnes : la premiere phrase, puis le corps */
  .lead2__a{font-size:clamp(22px,6.4vw,26px)}
  /* le sous-menu ne cache pas le contenu qu'il vise */
  html{scroll-padding-top:calc(var(--nav-h) + 58px)}
  /* etapes, grilles : une colonne, sans le decalage de la deuxieme carte */
  .sh:nth-child(2){margin-top:0}
  .nums--4 .num b{font-size:40px}
  /* la carte du jour ne s'allonge pas en portrait */
  .day__ph{min-height:0;aspect-ratio:4/3}
  /* les tableaux d'especes defilent dans leur cadre */
  .sp{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .sp thead,.sp tbody,.sp tr{display:table;width:100%;table-layout:fixed}
  .sp td:nth-child(2){display:none} .sp th:nth-child(2){display:none}
  /* le formulaire : boutons pleine largeur, pas de zoom iOS sur les champs */
  .f input,.f select,.f textarea{font-size:16px}
  /* pied de page : blocs empiles, admin en fin */
  .ftr__b{flex-direction:column;align-items:flex-start;gap:10px}
}

/* ---------- groupes : les deux facons de louer ---------- */
/* Le paragraphe d'ouverture de la page groupes : en classe et non en style
   en ligne, sinon aucune regle d'ecran ne peut plus le redimensionner. */
.vision__lead{font-family:var(--serif);font-size:clamp(19px,2vw,23px);line-height:1.42;color:var(--ink);margin:0 0 18px}
.ways{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,30px);margin-top:clamp(24px,3vw,38px)}
.way{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column}
.way__img{aspect-ratio:16/9;overflow:hidden;background:var(--sage-pale)}
.way__img img{width:100%;height:100%;object-fit:cover}
.way__b{padding:clamp(22px,2.6vw,32px);flex:1;display:flex;flex-direction:column}
.way__b h3{font-size:clamp(22px,2.2vw,28px);margin:0 0 14px}
.way .pts{margin:0 0 22px}
.way .btn{align-self:flex-start;margin-top:auto}
@media(max-width:800px){.ways{grid-template-columns:1fr}}

/* ---------- echelle typographique du telephone ----------
   Les tailles etaient calibrees pour le grand ecran et descendaient trop peu :
   sur 390 pixels de large, les titres de niveau 2 faisaient 27 pixels et ceux
   de niveau 3 en faisaient 26, ce qui efface la hierarchie au lieu de la
   montrer. On resserre le haut de l'echelle et on laisse le corps de texte a
   17 pixels, taille a laquelle il se lit bien. Resultat : 31 / 24 / 22 / 18 / 17,
   avec un ecart lisible entre chaque niveau. */
@media(max-width:700px){
  h1{font-size:31px}
  h2{font-size:24px}
  .relief__h h2{font-size:22px}
  .space__b h3,.space--lead .space__b h3{font-size:21px}
  .rmd__b h3{font-size:21px}
  .band__l{font-size:22px}
  .lead2__a{font-size:22px}
  .story__tx .lead{font-size:18px}
  .lead,.intro__lead,.enq .lead{font-size:18px}
  .sec__t,.sec__head p{font-size:16.5px}
  .exped__b h3{font-size:21px}
  .story__q p{font-size:19px}
  .vision__lead{font-size:18px}
}