/* Page « organiser une retraite » mise en page propre a cette page.
   Les couleurs viennent des memes valeurs que styles.css, les polices
   sont celles du site (Fraunces + Inter). Tout est portee par .rt pour
   ne rien ecraser ailleurs. */
/* ═══════════════════════════════════════════════════════════════════
   MORE Surf Lodge, page organisateurs
   Direction : éditoriale et calme. Photo pleine largeur, beaucoup de
   respiration, un serif pour la voix, des dessins au trait plutôt que
   des puces. La couleur ne sert qu'à souligner, jamais à décorer.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --ink:#122b24; --deep:#0b1a16; --ink-soft:#2c4a40;
  --sand:#f3e9da; --paper:#faf6ee; --white:#fff;
  --terra:#b25e24; --terra-soft:#d98a4e; --gold:#c9a227;
  --line:#e2d6c3; --muted:#6b7d74;
  --serif:"Fraunces",Georgia,serif;
  --sans:"Inter",-apple-system,"Segoe UI",Roboto,sans-serif;
  --pad:clamp(20px,5vw,80px);
  --ease:cubic-bezier(.22,.61,.36,1);
}
.rt *{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%}
.rt{
  font-family:var(--sans); color:var(--ink); background:var(--paper);
  font-size:clamp(15px,1.05vw,17px); line-height:1.65;
}
.rt img{display:block; max-width:100%}
.rt a{color:inherit}

/* ---------- typographie ---------- */
.eyebrow{
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--terra); font-weight:700;
}
.rt h1,.rt h2,.rt h3{font-family:var(--serif); font-weight:400; line-height:1.08; text-wrap:balance}
h1{font-size:clamp(38px,7.2vw,88px); letter-spacing:-.02em}
h2{font-size:clamp(27px,4.2vw,52px); letter-spacing:-.015em}
h3{font-size:clamp(19px,2vw,25px); line-height:1.2}
.lede{font-size:clamp(17px,1.7vw,24px); line-height:1.5; color:var(--ink-soft);
      font-family:var(--serif)}
.small{font-size:14px; color:var(--muted); line-height:1.6}

/* ---------- rythme ---------- */
.rt section{padding:clamp(64px,9vw,140px) var(--pad); position:relative}
.wrap{max-width:1220px; margin:0 auto}
.narrow{max-width:760px}

/* ---------- apparition au défilement ---------- */
.rise{opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease)}
.rise.seen{opacity:1; transform:none}
.rise.d1{transition-delay:.08s} .rise.d2{transition-delay:.16s}
.rise.d3{transition-delay:.24s} .rise.d4{transition-delay:.32s}
.rise.d5{transition-delay:.4s}  .rise.d6{transition-delay:.48s}

/* ═══════════ HÉRO ═══════════ */
.hero{
  height:100svh; min-height:560px; padding:0; display:flex; align-items:flex-end;
  overflow:hidden; background:var(--deep);
}
.hero-img{position:absolute; inset:-8% 0 -8% 0; z-index:0}
.hero-img img{width:100%; height:100%; object-fit:cover; will-change:transform}
.hero::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top,rgba(8,20,16,.92) 0%,rgba(8,20,16,.45) 40%,rgba(8,20,16,.18) 70%,rgba(8,20,16,.4) 100%);
}
.hero-in{position:relative; z-index:2; padding:0 var(--pad) clamp(48px,7vw,90px); width:100%; color:#fff}
.hero h1{color:#fff; max-width:15ch; margin:14px 0 0}
.hero .lede{color:rgba(255,255,255,.86); max-width:44ch; margin-top:20px; font-size:clamp(16px,1.5vw,21px)}
.hero-meta{
  display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:30px;
  font-size:12.5px; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.72);
}
.hero-meta b{color:var(--gold); font-weight:600}
.scroll-cue{
  position:absolute; left:var(--pad); bottom:18px; z-index:3; color:rgba(255,255,255,.5);
  font-size:11px; letter-spacing:.18em; text-transform:uppercase; display:flex; gap:9px; align-items:center;
}
.scroll-cue i{display:block; width:1px; height:26px; background:rgba(255,255,255,.4); animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%,100%{transform:scaleY(.35); transform-origin:top}50%{transform:scaleY(1); transform-origin:top}}

/* ═══════════ POURQUOI NOUS ═══════════ */
/* Le souvenir d'enfance et la promesse operationnelle disaient la meme
   chose deux fois : une seule section, le recit en haut avec la photo,
   la bascule vers l'organisateur en pied. */
.story{background:var(--sand)}
.story-top{display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(32px,6vw,90px); align-items:center}
.story-top h2{margin:16px 0 24px}
.story-top p{margin-bottom:17px; max-width:52ch}
.story .ph{border-radius:4px; overflow:hidden; aspect-ratio:4/5}
.story .ph img{width:100%; height:100%; object-fit:cover}
.story-close{max-width:720px; margin:clamp(46px,6vw,84px) auto 0; text-align:center}
.story-turn{border-left:2px solid var(--terra); padding-left:22px; text-align:left;
  font-family:var(--serif); font-size:clamp(17px,1.6vw,21px); line-height:1.5;
  color:var(--ink)}
.story-mark{display:flex; align-items:center; justify-content:center; gap:14px;
  margin:clamp(34px,4vw,52px) auto 20px; max-width:220px}
.story-mark span{flex:1; height:1px; background:var(--line)}
.story-mark i{width:9px; height:9px; background:var(--terra); transform:rotate(45deg)}
.story-end{font-family:var(--serif); font-size:clamp(20px,2.4vw,29px); color:var(--ink);
  letter-spacing:-.01em}
@media (max-width:600px){ .story-turn{padding-left:16px} }

/* ═══════════ SERVICES ILLUSTRÉS ═══════════ */
.serv{background:var(--ink); color:var(--sand)}
.serv h2{color:var(--sand)}
.serv .head{max-width:620px; margin-bottom:clamp(38px,5vw,68px)}
.serv .head p{color:rgba(243,233,218,.72); margin-top:14px}
/* La constellation : le logo au centre, les six prestations en orbite.
   Le balayage lumineux tourne derrière l'anneau ; les pastilles ne
   s'animent qu'à l'interaction (survol, clic ou tabulation). */
.orbit{position:relative; width:min(100%,660px); margin:0 auto; aspect-ratio:1}
.orbit-ring, .orbit-ring2{position:absolute; left:50%; top:50%; border-radius:50%;
  transform:translate(-50%,-50%); pointer-events:none}
.orbit-ring{width:71%; height:71%; border:1px dashed rgba(243,233,218,.16)}
.orbit-ring2{width:44%; height:44%; border:1px solid rgba(243,233,218,.07)}
.orbit-sweep{position:absolute; left:50%; top:50%; width:78%; height:78%;
  transform:translate(-50%,-50%); border-radius:50%; pointer-events:none; filter:blur(26px);
  background:conic-gradient(from 0deg,
    transparent 0deg, rgba(201,162,39,.02) 40deg, rgba(217,138,78,.20) 78deg,
    rgba(201,162,39,.30) 96deg, transparent 130deg, transparent 360deg);
  animation:orbitsweep 16s linear infinite}
@keyframes orbitsweep{to{transform:translate(-50%,-50%) rotate(360deg)}}

.orbit-core{position:absolute; left:50%; top:50%; width:34%; aspect-ratio:1;
  transform:translate(-50%,-50%); border-radius:50%; background:var(--sand);
  display:grid; place-items:center; padding:9%; z-index:3;
  box-shadow:0 0 0 1px rgba(243,233,218,.22), 0 0 60px -10px rgba(201,162,39,.55),
             0 24px 60px -20px rgba(0,0,0,.7)}
.orbit-core img{width:100%; height:auto}
.orbit-core::after{content:""; position:absolute; inset:-8%; border-radius:50%;
  border:1px solid rgba(201,162,39,.3); animation:corepulse 4.5s ease-in-out infinite}
@keyframes corepulse{0%,100%{opacity:.25; transform:scale(1)}50%{opacity:.7; transform:scale(1.04)}}

.chip{
  /* rayon en valeur absolue : un % dans translate() se calculerait sur la
     pastille elle-même, pas sur l'orbite. L'orbite fait 660 px dès qu'elle
     s'affiche en cercle, donc la valeur est stable. */
  --r:245px;
  position:absolute; left:50%; top:50%; width:132px; z-index:2;
  transform:translate(-50%,-50%) rotate(var(--a)) translate(var(--r))
            rotate(calc(-1 * var(--a)));
  display:flex; flex-direction:column; align-items:center; gap:9px;
  padding:16px 10px 14px; border-radius:18px; cursor:pointer; font:inherit; text-align:center;
  background:rgba(255,255,255,.05); border:1px solid rgba(243,233,218,.14);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:background .3s var(--ease), border-color .3s var(--ease),
             box-shadow .3s var(--ease), scale .3s var(--ease);
}
.chip svg{width:34px; height:34px; display:block}
.chip svg *{stroke:var(--terra-soft); fill:none; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke;
  transition:stroke .3s var(--ease)}
.chip h3{font-family:var(--sans); font-weight:600; font-size:12.5px; line-height:1.3; color:rgba(243,233,218,.8);
  letter-spacing:.01em; transition:color .3s var(--ease)}

.chip:hover, .chip:focus-visible{
  background:rgba(255,255,255,.1); border-color:rgba(201,162,39,.55); scale:1.06;
  box-shadow:0 0 34px -6px rgba(201,162,39,.5), 0 14px 34px -16px rgba(0,0,0,.8)}
.chip:focus-visible{outline:2px solid var(--gold); outline-offset:3px}
.chip[aria-pressed="true"]{
  background:rgba(201,162,39,.14); border-color:var(--gold);
  box-shadow:0 0 40px -6px rgba(201,162,39,.55)}
.chip[aria-pressed="true"] h3{color:#fff}
.chip[aria-pressed="true"] svg *{stroke:var(--gold)}

.orbit-detail{max-width:560px; margin:clamp(18px,3vw,34px) auto 0; text-align:center; min-height:112px}
.orbit-detail h3{color:var(--sand); margin-bottom:8px}
.orbit-detail p{color:rgba(243,233,218,.7); font-size:15px}
.orbit-detail.swap{animation:detailin .45s var(--ease)}
@keyframes detailin{from{opacity:0; transform:translateY(7px)}to{opacity:1; transform:none}}

/* Sous 860 px l'orbite se déplie en grille : mêmes pastilles, tout reste lisible. */
@media (max-width:860px){
  .orbit{aspect-ratio:auto; display:grid; grid-template-columns:repeat(3,1fr);
         gap:10px; max-width:520px}
  .orbit-ring, .orbit-ring2, .orbit-sweep{display:none}
  .orbit-core{position:static; transform:none; width:132px; margin:0 auto 22px;
              grid-column:1/-1; padding:16px}
  .orbit-core::after{inset:-6%}
  .chip{position:static; transform:none; width:auto}
  .chip:hover, .chip:focus-visible, .chip[aria-pressed="true"]{scale:1}
}
@media (max-width:520px){
  .orbit{grid-template-columns:repeat(2,1fr)}
  .chip b{font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  .orbit-sweep, .orbit-core::after{animation:none}
  .orbit-detail.swap{animation:none}
}


/* ═══════════ OFFRE ═══════════ */
.offer{background:var(--deep); color:var(--sand); text-align:center; position:relative; overflow:hidden}
.offer-beams{position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none}
.offer .wrap{position:relative; z-index:1}
.price-old{font-family:var(--serif); font-size:clamp(20px,2.4vw,28px); color:#e0503a;
  text-decoration:line-through; text-decoration-thickness:2px; margin:0; display:flex;
  align-items:baseline; justify-content:center; gap:10px}
.price-old span{font-family:var(--sans); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(243,233,218,.5); text-decoration:none}
.price-special{font-size:14.5px; letter-spacing:.04em; color:rgba(243,233,218,.85); margin-top:2px}
.price-deadline{font-size:12.5px; color:#e0503a; margin-top:8px; font-weight:600}
.price-bonus{display:inline-block; margin-top:18px; padding:8px 20px; border:1px solid rgba(201,162,39,.5);
  border-radius:999px; font-size:13px; color:var(--gold); letter-spacing:.02em}
.price-bonus b{color:#fff}
.offer-grid p b.offert{display:inline; font-family:inherit; font-size:inherit;
  color:#fff; font-weight:700; letter-spacing:.01em; margin-bottom:0}
.confetti-canvas{position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none}
.offer .price{
  font-family:var(--serif); font-size:clamp(72px,13vw,168px); line-height:.9;
  color:var(--sand); letter-spacing:-.035em; margin:6px 0 14px;
}
.offer .price em{font-style:normal; color:var(--gold)}
.offer-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.4vw,34px);
  margin-top:clamp(42px,5vw,72px); text-align:left;
}
.offer-grid div{border-top:1px solid rgba(243,233,218,.22); padding-top:18px}
.offer-grid b{display:block; font-family:var(--serif); font-size:21px; color:var(--gold); margin-bottom:5px}
.offer-grid p{font-size:14px; color:rgba(243,233,218,.66)}
.offer .note{margin-top:38px; font-size:14.5px; color:rgba(243,233,218,.72); max-width:60ch;
             margin-left:auto; margin-right:auto}

/* comète lumineuse qui parcourt le cadre de l'offre : gradient conique en
   rotation, découpé en anneau par un masque ; la copie floutée derrière sert
   de halo. L'angle est une propriété enregistrée pour être animable. */
@property --beam-a{syntax:'<angle>'; inherits:false; initial-value:0deg}
.beam{position:relative; isolation:isolate; border-radius:20px;
  border:1px solid rgba(243,233,218,.14); background:rgba(255,255,255,.03);
  padding:clamp(26px,4vw,52px) clamp(20px,3vw,44px)}
.beam::before,.beam::after{content:""; position:absolute; inset:-1px; border-radius:20px;
  pointer-events:none;
  background:conic-gradient(from var(--beam-a),
    transparent 0deg,
    rgba(201,162,39,.05) 18deg, rgba(201,162,39,.55) 46deg,
    #c9a227 56deg, #f4d976 60deg, transparent 63deg,
    transparent 198deg,
    rgba(217,138,78,.05) 216deg, rgba(217,138,78,.5) 244deg,
    #d98a4e 254deg, #f0b98a 258deg, transparent 261deg,
    transparent 360deg);
  animation:beam 9s linear infinite}
.beam::before{padding:2px;
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite:exclude}
.beam::after{filter:blur(16px); opacity:.24; z-index:-1}
@keyframes beam{to{--beam-a:360deg}}

/* ═══════════ LA MAISON ═══════════ */
.house .wrap{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,80px); align-items:center}
.stats{display:grid; grid-template-columns:1fr 1fr; gap:2px; margin-top:30px}
.stat{padding:20px 0; border-top:1px solid var(--line)}
.stat b{display:block; font-family:var(--serif); font-size:clamp(30px,3.4vw,44px); color:var(--ink); line-height:1}
.stat span{font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.plan-slot{
  border:1px dashed var(--line); border-radius:5px; aspect-ratio:4/3; display:grid;
  place-items:center; text-align:center; padding:26px; background:var(--white);
}
.plan-slot .small{max-width:34ch}

/* la chambre qui se transforme : trois photos du même angle, fondu enchaîné
   très lent + dérive d'échelle pour que ça respire au lieu de clignoter. */
.morph{position:relative; aspect-ratio:4/3; border-radius:6px; overflow:hidden;
       background:var(--sand)}
.morph figure{position:absolute; inset:0; margin:0; opacity:0;
  transition:opacity 1.5s var(--ease)}
.morph figure img{width:100%; height:100%; object-fit:cover;
  transform:scale(1.045); transition:transform 7s linear}
.morph figure.on{opacity:1}
.morph figure.on img{transform:scale(1)}
.morph-slot{position:absolute; inset:0; display:grid; place-items:center; text-align:center;
  padding:26px; background:var(--white); border:1px dashed var(--line); border-radius:6px}
.morph.pret .morph-slot{display:none}
.morph-slot code{font-family:ui-monospace,Menlo,monospace; font-size:11.5px; color:var(--terra);
  display:block; margin-bottom:8px; line-height:1.7}
.morph-nav{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:12px}
.morph-nav button{
  background:none; border:none; border-top:2px solid var(--line); padding:11px 2px 0;
  text-align:left; cursor:pointer; font:inherit; color:var(--muted);
  transition:border-color .5s var(--ease), color .5s var(--ease)}
.morph-nav button b{display:block; font-family:var(--serif); font-size:16px; font-weight:400;
  color:var(--ink-soft); transition:color .5s var(--ease)}
.morph-nav button span{font-size:12px; letter-spacing:.06em; text-transform:uppercase}
.morph-nav button.on{border-top-color:var(--terra); color:var(--terra)}
.morph-nav button.on b{color:var(--ink)}
@media (max-width:760px){
  .morph-nav{grid-template-columns:1fr 1fr; gap:6px 14px}
  .morph-nav button{padding-top:9px}
  .morph-nav button b{font-size:14px; line-height:1.25}
  .morph-nav button span{font-size:10.5px; letter-spacing:.03em}
}
@media (prefers-reduced-motion:reduce){
  .morph figure img{transform:none}
}
.plan-slot code{font-family:ui-monospace,Menlo,monospace; font-size:12px; color:var(--terra); display:block; margin-bottom:8px}

/* ═══════════ GALERIE ═══════════ */
.gal{background:var(--paper); padding-bottom:clamp(64px,9vw,130px)}
.gal .head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap;
           margin-bottom:clamp(28px,4vw,52px)}
/* Le fil à linge : tirages pincés sur une corde. Les positions et les
   angles sont écrits par js/retraites.js à chaque image ; ici l'apparence.
   Sans JS (.pl-on absent), les tirages s'alignent dans un bandeau défilant. */
.pl-root{position:relative; margin:0 calc(-1 * var(--pad)); overflow:hidden; outline:none;
  height:clamp(500px,44vw,620px); color:var(--ink); --pl-cw:260px;
  --pl-muted:rgba(18,43,36,.58); --pl-line:rgba(18,43,36,.18)}
.pl-root:focus-visible{box-shadow:inset 0 0 0 2px var(--terra)}
.pl-string{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible;
  stroke:#9a8b76}
.pl-card{width:var(--pl-cw); margin:0; transform-origin:50% 0}
.pl-print{margin-top:10px; background:#fff; padding:10px 10px 0;
  box-shadow:0 1px 2px rgba(11,26,22,.12),0 20px 34px -16px rgba(11,26,22,.42);
  transition:transform .5s cubic-bezier(.2,.7,.2,1), filter .5s ease}
.pl-shot{position:relative; aspect-ratio:1; overflow:hidden; background:var(--sand)}
.pl-shot img{position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover;
  display:block; pointer-events:none}
.pl-note{height:46px; display:flex; align-items:center; justify-content:center; padding:0 6px;
  font:italic 400 16px/1.1 var(--serif); color:#3b3833; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis}
.pl-peg{position:absolute; left:50%; top:0; width:10px; height:26px; margin-left:-5px; border-radius:2px;
  background:linear-gradient(90deg,#c9a67a,#e3c9a1 45%,#b8915f); box-shadow:0 2px 3px rgba(0,0,0,.25)}
.pl-peg::after{content:""; position:absolute; left:4px; top:8px; width:2px; height:7px;
  background:rgba(80,60,30,.45); border-radius:1px}
.pl-bar{position:absolute; left:50%; transform:translateX(-50%); bottom:clamp(18px,3vw,34px);
  width:min(1220px, calc(100% - 2 * var(--pad))); display:flex; align-items:center; gap:clamp(12px,2vw,24px)}
.pl-cap{flex:1; min-width:0; overflow:hidden; padding-bottom:.15em}
.pl-cap>*{display:block; animation:pl-in .55s cubic-bezier(.2,.8,.2,1) both}
.pl-title{font:500 clamp(19px,2.2vw,26px)/1.15 var(--serif); white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis}
.pl-sub{margin-top:4px; font-size:13px; line-height:1.4; color:var(--pl-muted)}
.pl-count{font:500 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.14em;
  color:var(--pl-muted); white-space:nowrap}
.pl-count b{color:var(--ink); font-weight:500}
.pl-btn{appearance:none; flex:none; width:44px; height:44px; border-radius:50%; border:1.5px solid var(--pl-line);
  background:transparent; color:inherit; display:grid; place-items:center; cursor:pointer;
  transition:background .2s ease, color .2s ease, border-color .2s ease}
@media (hover:hover){ .pl-btn:hover{background:var(--ink); border-color:var(--ink); color:var(--paper)} }
.pl-btn:focus-visible{outline:2px solid var(--terra); outline-offset:2px}
.pl-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; margin:0}
@keyframes pl-in{from{transform:translateY(100%); opacity:0} to{transform:none; opacity:1}}

/* avec JS : la corde, les pinces, le geste */
.pl-on{cursor:grab; user-select:none; -webkit-user-select:none; touch-action:pan-y}
.pl-on[data-drag="1"]{cursor:grabbing}
.pl-on .pl-card{position:absolute; left:0; top:0; will-change:transform; visibility:hidden}
.pl-on .pl-card[data-on="0"] .pl-print{transform:scale(.9); filter:saturate(.7) brightness(.96)}
.pl-on .pl-card[data-on="1"]{cursor:zoom-in}
.pl-on .pl-bar{cursor:default}

/* sans JS : un bandeau horizontal que l'on fait défiler */
.pl-root:not(.pl-on){height:auto; display:flex; gap:24px; overflow-x:auto; padding:10px var(--pad) 24px}
.pl-root:not(.pl-on) .pl-card{position:relative; flex:none}
.pl-root:not(.pl-on) .pl-string,.pl-root:not(.pl-on) .pl-bar{display:none}

@media (max-width:640px){
  .pl-root{height:520px}
  .pl-sub{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .pl-bar{gap:10px}
  .pl-count{display:none}
  /* la bulle WhatsApp occupe le coin bas droit : les flèches passent à gauche */
  .pl-btn{order:-1}
}
@media (prefers-reduced-motion: reduce){ .pl-cap>*{animation:none} .pl-print{transition:none} }

/* visionneuse */
.lb{position:fixed; inset:0; background:rgba(8,18,15,.96); z-index:100; display:none;
    align-items:center; justify-content:center; padding:clamp(16px,4vw,60px)}
.lb.on{display:flex}
.lb img{max-width:100%; max-height:86vh; object-fit:contain; border-radius:3px}
.lb button{
  position:absolute; background:rgba(255,255,255,.09); border:none; color:#fff; cursor:pointer;
  width:46px; height:46px; border-radius:50%; font-size:19px; transition:background .25s;
}
.lb button:hover{background:rgba(255,255,255,.2)}
.lb .x{top:22px; right:22px} .lb .prev{left:14px} .lb .next{right:14px}
.lb .cnt{position:absolute; bottom:22px; left:50%; transform:translateX(-50%);
         color:rgba(255,255,255,.55); font-size:12px; letter-spacing:.14em}

/* ═══════════ ENGAGEMENT ═══════════ */
.pledge{background:var(--sand)}
.pledge .wrap{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,80px); align-items:center}
.pledge-box{background:var(--white); border-radius:5px; padding:clamp(26px,3vw,44px);
            border-left:3px solid var(--terra)}
.pledge-box h3{margin-bottom:14px}
.pledge-box li{list-style:none; padding:9px 0 9px 26px; position:relative; font-size:15px}
.pledge-box li::before{content:"✓"; position:absolute; left:0; color:var(--terra); font-weight:700}


/* ═══════════ CONTACT ═══════════ */
.end{position:relative; color:#fff; text-align:center; overflow:hidden; background:var(--deep)}
.end-img{position:absolute; inset:0; z-index:0}
.end-img img{width:100%; height:100%; object-fit:cover; opacity:.85}
.end::after{content:""; position:absolute; inset:0; background:linear-gradient(rgba(8,20,16,.45),rgba(8,20,16,.78)); z-index:1}
.end .wrap{position:relative; z-index:2}
.end h2{color:#fff; margin:14px auto 20px; max-width:18ch}
.end p{color:rgba(255,255,255,.8); max-width:52ch; margin:0 auto}
.btns{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:38px}
.btn{
  display:inline-flex; align-items:center; gap:10px; padding:15px 30px; border-radius:999px;
  font-weight:600; font-size:15px; text-decoration:none; transition:transform .3s var(--ease), background .3s;
}
.btn.main{background:var(--gold); color:var(--deep)}
.btn.main:hover{background:#dbb43a; transform:translateY(-2px)}
.btn.ghost{border:1px solid rgba(255,255,255,.35); color:#fff}
.btn.ghost:hover{background:rgba(255,255,255,.12); transform:translateY(-2px)}
.sign{margin-top:52px; padding-top:34px; border-top:1px solid rgba(255,255,255,.16); display:inline-block; font-family:var(--serif); font-size:19px; color:rgba(255,255,255,.92)}
.sign span{display:block; font-family:var(--sans); font-size:12px; letter-spacing:.14em;
           text-transform:uppercase; color:rgba(255,255,255,.5); margin-top:7px}

footer{background:var(--deep); color:rgba(243,233,218,.45); padding:26px var(--pad);
        font-size:12.5px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
        border-top:1px solid rgba(243,233,218,.1)}

/* barre fixe mobile */
.sticky{
  position:fixed; left:12px; right:12px; bottom:12px; z-index:60; display:none;
  background:var(--ink); color:var(--sand); border-radius:999px; padding:12px 16px;
  align-items:center; justify-content:space-between; gap:12px; text-decoration:none;
  box-shadow:0 12px 30px -12px rgba(0,0,0,.5); font-size:14px;
}
.sticky b{color:var(--gold)}

/* ═══════════ ÉCRANS ÉTROITS ═══════════ */
@media (max-width:900px){
  .story-top,.house .wrap,.pledge .wrap{grid-template-columns:1fr}
  .cards{grid-template-columns:repeat(2,1fr)}
  .offer-grid{grid-template-columns:1fr; text-align:left}
  .grid-photos{grid-template-columns:repeat(2,1fr)}
  .gp.a,.gp.b,.gp.c,.gp.d{grid-column:span 1; aspect-ratio:4/3}
  .story .ph{aspect-ratio:16/10}
}
@media (max-width:600px){
  .cards{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
  .sticky{display:flex}
  footer{padding-bottom:76px}
  .hero{height:92svh}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important}
  .rise{opacity:1; transform:none}
  html{scroll-behavior:auto}
}

/* ═══════════ AJOUTS PROPRES A LA VERSION SITE ═══════════ */
/* Phrase factuelle d'ouverture : lisible par les moteurs et les IA,
   discrete pour le lecteur (elle repete ce que la page dit ensuite). */
.rt-geo{max-width:1220px; margin:0 auto; padding:26px var(--pad) 0;
  font-size:13.5px; line-height:1.6; color:var(--muted)}

/* Le journal : six cartes vers les articles deja publies. */
.rt-journal{background:var(--paper)}
.rt-journal .head{display:flex; justify-content:space-between; align-items:flex-end;
  gap:24px; flex-wrap:wrap; margin-bottom:clamp(26px,4vw,46px)}
.rt-posts{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,26px)}
.rt-post{display:flex; flex-direction:column; text-decoration:none;
  border:1px solid var(--line); border-radius:6px; overflow:hidden;
  background:var(--white); transition:transform .4s var(--ease), border-color .4s var(--ease)}
.rt-post:hover{transform:translateY(-4px); border-color:var(--terra)}
.rt-post-img{display:block; aspect-ratio:16/10; overflow:hidden; background:var(--sand)}
.rt-post-img img{width:100%; height:100%; object-fit:cover;
  transition:transform 1s var(--ease)}
.rt-post:hover .rt-post-img img{transform:scale(1.05)}
.rt-post-t{display:block; padding:16px 18px 20px; font-family:var(--serif);
  font-size:17px; line-height:1.3; color:var(--ink)}
.rt-more{margin-top:26px}
.rt-more a{color:var(--terra); font-weight:600; text-decoration:none;
  border-bottom:1px solid currentColor; padding-bottom:2px}

/* Passerelle vers la retraite grand public, pour ne laisser personne
   en cul-de-sac si la page a ete atteinte depuis le menu. */
.rt-solo{margin-top:30px; font-size:14px; color:rgba(255,255,255,.72)}
.rt-solo a{color:var(--gold); border-bottom:1px solid currentColor;
  text-decoration:none; padding-bottom:1px}

@media (max-width:900px){ .rt-posts{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){ .rt-posts{grid-template-columns:1fr} }

/* Ce qui est compris : l'affiche fournie par Masta, en accent visuel. A cette
   taille son texte ne se lit plus, il vit donc dans l'attribut alt, seul
   endroit que Google et les lecteurs d'ecran atteignent encore. */
/* Meme encombrement que la photo de la section « Pourquoi nous », comme
   demande. Celle-ci vit dans la colonne droite d'une grille 1.05fr / .95fr
   avec une gouttiere : sa largeur vaut 44 % du conteneur, quelle que soit la
   taille de l'ecran. On reprend ce 44 %, le meme point de bascule a 900 px et
   le meme arrondi de 4 px, plutot qu'une valeur en pixels qui ne collerait
   qu'a une seule largeur d'ecran. */
.inclus{margin:2.5rem 0 0}
.inclus img{display:block;width:100%;height:auto;border-radius:4px}
/* Sur grand ecran la section est centree : le titre, la phrase et l'affiche.
   Avec une seule image a 44 %, un alignement a gauche laissait toute la moitie
   droite vide. */
@media(min-width:901px){
  .serv .head{max-width:640px;margin-left:auto;margin-right:auto;text-align:center}
  .inclus img{width:44%;margin-left:auto;margin-right:auto}
}