/* ============================================================
JADE MAA — Design System v3
Refonte selon la charte de Jade (juillet 2026) :
maison d'édition / magazine haut de gamme.
Cormorant Garamond (titres) · Lato (texte) · Allison (signature)
============================================================ */
:root{
--bg:#FAF7F4; /* fond principal */
--bg-2:#F5F1ED; /* fond secondaire */
--titre:#2E2A29; /* grands titres */
--fonce:#3D3532; /* texte foncé */
--brun:#5B4137; /* brun principal */
--brun-2:#8A6553; /* brun secondaire */
--terra:#B97E63; /* accent terracotta */
--rose:#DEC4B2; /* beige rosé */
--line:#E7DDD6; /* bordures */
--ink:#575757; /* texte courant */
--btn:#8A5A44; /* boutons */
--btn-h:#6D4735; /* boutons hover */
--serif:'Cormorant Garamond',Georgia,serif;
--sans:'Lato',system-ui,sans-serif;
--script:'Allison',cursive;
--maxw:1240px; --pad:56px;
--ease:cubic-bezier(.22,.61,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:104px}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:400;line-height:1.8;font-size:17px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.serif{font-family:var(--serif);font-weight:400}
em,.it{font-style:italic;color:var(--brun-2)}
.eyebrow{font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--terra);font-weight:400}
.muted{color:var(--ink)}
.script{font-family:var(--script);font-weight:400;color:var(--brun)}
/* petit trait horizontal sous les titres (maquette) */
.rule{width:52px;height:1px;background:var(--terra);border:none;margin:26px 0}
.rule.center{margin:26px auto}
/* ---- Reveal (visible sans JS, animé avec JS) ---- */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity 1.1s var(--ease),transform 1.2s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
.js .reveal[data-d="1"]{transition-delay:.08s}
.js .reveal[data-d="2"]{transition-delay:.16s}
.js .reveal[data-d="3"]{transition-delay:.24s}
.js .img-reveal{clip-path:inset(0 0 100% 0);transition:clip-path 1.3s var(--ease)}
.js .img-reveal.in{clip-path:inset(0 0 0 0)}
/* ---- Boutons — uniformes : fond brun, petites capitales, sans ombre ---- */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;padding:17px 34px;border-radius:3px;transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);cursor:pointer;border:1px solid transparent;background:var(--btn);color:#fff}
.btn:hover{background:var(--btn-h);color:#fff}
.btn-dark{background:var(--btn);color:#fff}
.btn-dark:hover{background:var(--btn-h)}
.btn-ghost{background:transparent;border-color:var(--brun-2);color:var(--brun)}
.btn-ghost:hover{background:var(--brun);border-color:var(--brun);color:#fff}
.btn-light{background:var(--bg);color:var(--brun)}
.btn-light:hover{background:var(--rose);color:var(--brun)}
.link-u{display:inline-flex;align-items:center;gap:9px;font-size:.9rem;color:var(--brun-2);border-bottom:1px solid currentColor;padding-bottom:3px;transition:color .3s}
.link-u:hover{color:var(--terra)}
/* ---- NAV — léger, épuré, ligne sous la page active ---- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;background:var(--bg);transition:box-shadow .4s}
.nav.scrolled{box-shadow:0 1px 0 var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;padding:26px var(--pad)}
@media(min-width:861px){
.nav-in{display:grid;grid-template-columns:1fr auto 1fr;column-gap:20px}
.brand{justify-self:start}
.nav-links{justify-self:center}
}
.nav-links{display:flex;align-items:center;gap:38px}
.nav-links a{font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;font-weight:400;color:var(--fonce);transition:color .25s;position:relative;padding-bottom:2px}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:1px;background:var(--terra);transition:width .3s var(--ease)}
.nav-links a:hover{color:var(--terra)}
.nav-links a:hover::after{width:100%}
.nav-links a.active-link{color:var(--terra)}
.nav-links a.active-link::after{width:100%}
.brand{font-family:var(--script);font-weight:400;font-size:2rem;line-height:1;color:var(--brun);letter-spacing:.01em}
.brand em{font-style:normal;color:inherit}
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none}
.burger span{width:24px;height:1.4px;background:var(--fonce);transition:.3s}
/* ---- HERO accueil — composition maquette : texte à gauche, grande photo à droite ---- */
.hero-ed{display:grid;grid-template-columns:1fr 1fr;min-height:100vh;background:var(--bg)}
.hero-ed .hx{display:flex;flex-direction:column;justify-content:center;padding:170px 64px 110px;padding-left:max(var(--pad),calc((100vw - var(--maxw))/2 + var(--pad)))}
.hero-ed .hx-in{max-width:470px}
.hero-ed .eyebrow{margin-bottom:30px;display:inline-block}
.hero-ed h1{font-family:var(--serif);font-weight:400;font-size:clamp(3rem,5.6vw,5.4rem);line-height:1.04;letter-spacing:.005em;color:var(--titre)}
.hero-ed .lead{margin-top:34px;color:var(--fonce);font-size:1.06rem;line-height:1.85}
.hero-ed .txt{margin-top:20px;color:var(--ink);font-size:1rem;line-height:1.85}
.hero-ed .sig{margin-top:38px;font-family:var(--script);font-size:3rem;line-height:1.1;color:var(--terra)}
.hero-ed .actions{margin-top:40px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.hero-ed .hp{position:relative;overflow:hidden;min-height:100vh}
.hero-ed .hp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-ed .hx-in>*{animation:riseIn 1.1s var(--ease) both}
.hero-ed .hx-in>*:nth-child(2){animation-delay:.1s}
.hero-ed .hx-in>*:nth-child(3){animation-delay:.2s}
.hero-ed .hx-in>*:nth-child(4){animation-delay:.3s}
.hero-ed .hx-in>*:nth-child(5){animation-delay:.4s}
.hero-ed .hx-in>*:nth-child(6){animation-delay:.5s}
@keyframes riseIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
/* ---- Sections génériques — beaucoup d'air ---- */
.section{padding:150px 0}
.section-sm{padding:96px 0}
.section-follow{padding:70px 0 150px}
.alt{background:var(--bg-2)}
.sec-head{text-align:center;max-width:720px;margin:0 auto 80px}
.sec-head h2{font-family:var(--serif);font-weight:400;font-size:clamp(2.2rem,4.6vw,3.6rem);line-height:1.12;color:var(--titre);margin-top:22px}
.sec-head p{color:var(--ink);margin-top:24px}
h2.big{font-family:var(--serif);font-weight:400;font-size:clamp(2.2rem,4.6vw,3.6rem);line-height:1.12;color:var(--titre)}
.page-hero{padding:210px 0 90px}
.page-hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(2.8rem,6.5vw,5rem);line-height:1.05;letter-spacing:.005em;color:var(--titre);margin-top:22px}
.page-hero .lead{color:var(--ink);font-size:1.08rem;max-width:600px;margin-top:28px}
.breadcrumb{font-size:.8rem;color:var(--ink);letter-spacing:.05em}
.breadcrumb a{color:var(--terra)}
.breadcrumb a:hover{color:var(--brun-2)}
.r-hero .breadcrumb{display:inline-block;background:rgba(40,30,24,.34);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);padding:7px 15px;border-radius:100px;border:1px solid rgba(255,255,255,.18);color:#fff}
.r-hero .breadcrumb a{color:#F0DFCF}
/* ---- Media ---- */
.media{position:relative;border-radius:6px;overflow:hidden;background:var(--bg-2)}
.media img{width:100%;height:100%;object-fit:cover}
.ph-note{position:absolute;top:12px;left:12px;z-index:3;background:rgba(180,40,40,.92);color:#fff;font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;padding:5px 10px;border-radius:4px;font-family:var(--sans)}
/* ---- Principes / colonnes éditoriales ---- */
.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:56px}
.principle{padding-top:28px;border-top:1px solid var(--line)}
.principle .n{font-family:var(--serif);font-style:italic;color:var(--terra);font-size:1.1rem}
.principle .p-ico svg{width:32px;height:32px;stroke:var(--terra);fill:none;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
.principle h3{font-family:var(--serif);font-weight:500;font-size:1.6rem;margin:14px 0 12px;color:var(--titre)}
.principle p{color:var(--ink);font-size:.96rem}
/* ---- Ma mission — 5 icônes fines terracotta ---- */
.mission{display:grid;grid-template-columns:repeat(5,1fr);gap:44px;text-align:center}
.mission .mi{display:flex;flex-direction:column;align-items:center;gap:20px}
.mission svg{width:clamp(28px,6vw,46px);height:clamp(28px,6vw,46px);stroke:var(--terra);fill:none;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
.mission p{font-family:var(--serif);font-size:1.15rem;line-height:1.4;color:var(--fonce);max-width:190px}
/* ---- Cartes accompagnements — image, numéro cerclé, titre, texte, bouton ---- */
.offers{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.ocard{display:flex;flex-direction:column;background:#FFFEFC;border:1px solid var(--line);border-radius:6px;overflow:hidden;transition:border-color .4s var(--ease)}
.ocard:hover{border-color:var(--rose)}
.ocard .im{aspect-ratio:4/3.4;overflow:hidden;background:var(--bg-2)}
.ocard .im img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.ocard:hover .im img{transform:scale(1.04)}
.ocard .im.contain{aspect-ratio:4/3.4} /* ratio propre a la variante, pas herite de .im */
.ocard .im.contain img{object-fit:contain;padding:22px}
.ocard .ct{display:flex;flex-direction:column;flex:1;padding:30px 26px 32px;text-align:center;align-items:center}
.ocard .num{width:38px;height:38px;border:1px solid var(--terra);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-style:italic;color:var(--terra);font-size:.95rem;margin-top:-49px;background:#FFFEFC;position:relative;z-index:2}
.ocard h3{font-family:var(--serif);font-weight:500;font-size:1.5rem;line-height:1.2;color:var(--titre);margin:18px 0 12px}
.ocard p{font-size:.9rem;line-height:1.7;color:var(--ink)}
.ocard .btn{margin-top:auto;padding:13px 26px;font-size:.66rem}
/* Le bouton est pousse en bas de carte a TOUTES les largeurs : au-dessus de
1080px un margin-top fixe reprenait le dessus sur le margin-top:auto et les
4 boutons tombaient sur deux lignes de base (29px d'ecart). */
.ocard .ct .btn{margin-top:auto}
.ocard p{margin-bottom:22px}
/* ---- Cartes photo (retraites) ---- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.ucard{position:relative;border-radius:6px;overflow:hidden;aspect-ratio:3/4;display:flex;align-items:flex-end;isolation:isolate}
.ucard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-2;transition:transform 1.2s var(--ease)}
.ucard .veil{position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(43,30,23,.86),rgba(43,30,23,.28) 55%,rgba(43,30,23,.08))}
.ucard:hover img{transform:scale(1.05)}
.ucard .ct{padding:32px;color:#F7F0E8;width:100%}
.ucard .num{font-size:.72rem;letter-spacing:.2em;opacity:.8}
.ucard h3{font-family:var(--serif);font-weight:500;font-size:1.9rem;margin:8px 0 6px}
.ucard p{font-size:.88rem;opacity:.88;line-height:1.6}
.ucard .go{margin-top:16px;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;display:inline-flex;gap:8px;transition:gap .3s}
.ucard:hover .go{gap:14px}
/* ---- Split (texte + image) ---- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:96px;align-items:center}
.split.rev .col-media{order:2}
.split .col-media{aspect-ratio:4/5}
.split h2{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,3.8vw,3.1rem);line-height:1.15;color:var(--titre);margin:20px 0 0}
.split p{color:var(--ink);margin-bottom:18px;max-width:480px}
/* ---- Bandeau brun — déroulé d'avis ---- */
.band{background:var(--brun);color:#F3EAE2;padding:120px 0 110px;overflow:hidden}
.band .sec-head{margin-bottom:56px}
.band .eyebrow{color:var(--rose)}
.band h2{color:#FAF5EF}
/* ---- CARROUSEL D'AVIS — composant unique -------------------------------
Deux emplois : le bandeau brun (.band-carousel, accueil + sejours) et le
widget Amazon (.amz-carousel, page livre). Ils ne different que par deux
valeurs, passees en variables (--fade, --dur).
Le comportement de BASE est le glissement au doigt : il marche a toutes
les largeurs et pour tous les reglages systeme. Le defilement automatique
est un enrichissement, active seulement la ou il a un sens (>=821 px) et
pour qui n'a pas demande de reduire les animations. */
.band-carousel,.amz-carousel{
--fade:8%;
--dur:90s;
overflow-x:auto;
scroll-snap-type:x mandatory;
scroll-padding-left:var(--pad);
scrollbar-width:none;
}
.band-carousel::-webkit-scrollbar,.amz-carousel::-webkit-scrollbar{display:none}
.band-track,.amz-track{display:flex;width:max-content;align-items:stretch}
@media (prefers-reduced-motion:no-preference) and (min-width:821px){
.band-carousel,.amz-carousel{
overflow:hidden;
scroll-snap-type:none;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--fade),#000 calc(100% - var(--fade)),transparent);
mask-image:linear-gradient(90deg,transparent,#000 var(--fade),#000 calc(100% - var(--fade)),transparent);
}
.band-track,.amz-track{animation:marquee-x var(--dur) linear infinite}
.band-carousel:hover .band-track,
.amz-carousel:hover .amz-track{animation-play-state:paused}
}
@keyframes marquee-x{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* largeur de carte fluide a la source : identique au desktop (min = 400 px
des 488 px de large), elle ne devient elastique que sur les petits ecrans */
.bq{flex:0 0 min(400px,82vw);width:auto;padding:0 48px;border-right:1px solid rgba(222,196,178,.28);display:flex;flex-direction:column}
.bq .qm{font-family:var(--serif);font-size:3.4rem;line-height:.6;color:var(--rose);margin-bottom:22px}
.bq p{font-family:var(--serif);font-style:italic;font-size:1.22rem;line-height:1.6;color:#F7F0E8}
.bq .who{margin-top:auto;padding-top:22px;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--rose)}
.tp-stars{display:block;width:106px;height:18px;box-sizing:content-box;background-origin:content-box;background-clip:content-box;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect width='24' height='24' fill='%2300B67A'/%3E%3Cpath fill='%23FFF' d='M12 4.2l2.1 5.3 5.7.4-4.4 3.6 1.4 5.5-4.8-3.1-4.8 3.1 1.4-5.5-4.4-3.6 5.7-.4z'/%3E%3C/svg%3E");background-size:18px 18px;background-repeat:space no-repeat}
.bq .tp-stars{margin-top:auto;padding-top:22px}
.bq .tp-stars+.who{margin-top:0;padding-top:12px}
.band .more{text-align:center;margin-top:64px}
.band .more a{font-size:.85rem;color:#E9DACD;border-bottom:1px solid rgba(233,218,205,.5);padding-bottom:3px;transition:color .3s}
.band .more a:hover{color:#fff}
/* ---- Bande citation (pages internes) ---- */
.proof{background:var(--brun);color:#F3EAE2;text-align:center;padding:120px 22px}
.proof .stars{color:var(--rose);font-size:1.2rem;letter-spacing:6px;margin-bottom:22px}
.proof blockquote{font-family:var(--serif);font-weight:400;font-style:italic;font-size:clamp(1.5rem,3vw,2.2rem);line-height:1.45;max-width:840px;margin:0 auto 24px}
.proof .who{font-size:.78rem;letter-spacing:.2em;opacity:.75;text-transform:uppercase}
.proof .tp{margin-top:34px;display:inline-flex;align-items:center;gap:9px;font-size:.82rem;opacity:.8}
.proof .tp svg{width:16px;height:16px;fill:var(--rose)}
/* ---- Avis grid ---- */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.review{background:#FFFEFC;border:1px solid var(--line);border-radius:6px;padding:34px 30px}
.review .stars{color:var(--terra);letter-spacing:3px;font-size:.9rem;margin-bottom:16px}
.review p{font-family:var(--serif);font-style:italic;font-size:1.1rem;line-height:1.6;color:var(--fonce);margin-bottom:18px}
.review .by{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brun-2)}
/* ---- Étapes ---- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;counter-reset:s}
.step{counter-increment:s;padding-top:26px;border-top:1px solid var(--line)}
.step::before{content:counter(s,decimal-leading-zero);font-family:var(--serif);font-style:italic;color:var(--terra);font-size:1.2rem;display:block;margin-bottom:14px}
.step h3{font-family:var(--serif);font-weight:500;font-size:1.3rem;color:var(--titre);margin-bottom:8px}
.step p{font-size:.92rem;color:var(--ink)}
/* ---- FAQ ---- */
.faq{max-width:760px;margin:0 auto}
.qa{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;padding:26px 0;display:flex;justify-content:space-between;align-items:center;gap:20px;font-family:var(--serif);font-weight:500;font-size:1.35rem;color:var(--titre)}
.qa summary::-webkit-details-marker{display:none}
.qa summary .ic{flex:none;width:22px;height:22px;position:relative;transition:transform .3s}
.qa summary .ic::before,.qa summary .ic::after{content:"";position:absolute;background:var(--terra);left:50%;top:50%}
.qa summary .ic::before{width:14px;height:1px;transform:translate(-50%,-50%)}
.qa summary .ic::after{width:1px;height:14px;transform:translate(-50%,-50%);transition:transform .3s}
.qa[open] summary .ic::after{transform:translate(-50%,-50%) scaleY(0)}
.qa .a{padding:0 0 26px;color:var(--ink);max-width:660px}
/* ---- Formulaire ---- */
.form{background:#FFFEFC;border:1px solid var(--line);border-radius:8px;padding:40px}
.field{margin-bottom:18px}
.field label{display:block;font-size:.76rem;letter-spacing:.08em;color:var(--brun-2);margin-bottom:7px;text-transform:uppercase}
.field input,.field select,.field textarea{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:5px;padding:13px 15px;font-family:var(--sans);font-size:.95rem;color:var(--fonce);outline:none;transition:border .2s}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--terra)}
.field textarea{resize:vertical;min-height:120px}
.form .btn{width:100%;justify-content:center;margin-top:6px}
.form .fineprint{text-align:center;font-size:.76rem;color:var(--brun-2);margin-top:14px}
/* ---- Newsletter / CTA doux ---- */
.news{text-align:center;padding:120px 22px;background:var(--bg-2)}
.news h2{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,4vw,3rem);line-height:1.15;color:var(--titre);max-width:640px;margin:18px auto}
.news .sub{color:var(--ink);max-width:460px;margin:0 auto 38px}
.news form{display:flex;max-width:470px;margin:0 auto;border:1px solid var(--line);border-radius:4px;padding:6px 6px 6px 22px;background:#FFFEFC}
.news input{flex:1;border:none;background:transparent;outline:none;font-family:var(--sans);font-size:.92rem;color:var(--fonce)}
.news input::placeholder{color:#A99C92}
.news button{border:none;background:var(--btn);color:#fff;border-radius:3px;padding:12px 26px;font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;transition:background .3s;white-space:nowrap}
.news button:hover{background:var(--btn-h)}
/* ---- En route vers vous — section finale avec branche végétale ---- */
.route{position:relative;overflow:hidden}
.route .veg{position:absolute;right:-40px;top:50%;transform:translateY(-50%);width:340px;opacity:.5;pointer-events:none}
.route .veg svg{width:100%;height:auto;stroke:var(--rose);fill:none;stroke-width:1.1;stroke-linecap:round}
/* ---- Détail retraite ---- */
.r-hero{position:relative;height:78vh;min-height:520px;display:flex;align-items:flex-end;color:#fff;overflow:hidden}
.r-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.r-hero .veil{position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(35,24,18,.8),rgba(35,24,18,.1) 60%,rgba(35,24,18,.32))}
.r-hero .ct{padding:0 var(--pad) 60px;max-width:var(--maxw);margin:0 auto;width:100%}
.r-hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(2.6rem,6vw,4.8rem);line-height:1.02;margin:14px 0}
.r-hero .meta{display:flex;gap:26px;flex-wrap:wrap;font-size:.9rem;opacity:.94;margin-top:10px}
.r-hero .meta span{display:inline-flex;align-items:center;gap:7px}
/* Variante hero « visuel » : le bandeau signé de Jade tient lieu d'en-tête, les infos passent dessous sur le fond crème */
.r-hero-v{padding:150px 0 0}
.r-hero-v .breadcrumb{margin-bottom:20px}
.r-visuel{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:10px;box-shadow:0 18px 44px -32px rgba(60,40,30,.45)}
.r-meta{display:flex;gap:26px;flex-wrap:wrap;font-size:.9rem;color:var(--brun);margin-top:26px}
.r-meta span{display:inline-flex;align-items:center;gap:7px}
.r-meta .meta-ico{width:17px;height:17px;fill:var(--terra);flex-shrink:0}
/* Pop-up d'annonce reutilisable (LBM, Evenements...) — badge « Annonce » haut gauche */
.pop[hidden]{display:none}
.pop{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:22px}
.pop__ov{position:absolute;inset:0;background:rgba(43,30,23,.5);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:popFade .3s ease}
.pop__card{position:relative;max-width:452px;width:100%;background:#FFFEFC;border:1px solid var(--line);border-radius:12px;padding:58px 40px 40px;text-align:center;box-shadow:0 30px 80px -28px rgba(60,40,30,.5);animation:popDrop .55s cubic-bezier(.2,.85,.25,1)}
.pop__tag{position:absolute;top:15px;left:16px;display:inline-flex;align-items:center;gap:6px;font-family:var(--sans);font-size:.6rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--terra);border:1px solid var(--terra);border-radius:5px;padding:5px 9px 4px}
.pop__tag .dot{width:5px;height:5px;border-radius:50%;background:var(--terra)}
.pop__x{position:absolute;top:11px;right:14px;background:none;border:none;font-size:1.7rem;line-height:1;color:#B0A399;cursor:pointer;padding:6px}
.pop__x:hover{color:var(--brun)}
.pop__eb{display:block;font-family:var(--sans);font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;color:var(--terra);margin-bottom:15px}
.pop__card h3{font-family:var(--serif);font-weight:400;font-size:2.3rem;line-height:1.08;color:var(--titre);margin:0 0 15px}
.pop__card h3 em{font-style:italic;color:var(--brun)}
.pop__card p{font-family:var(--sans);font-size:.97rem;line-height:1.7;color:#575757;margin:0 0 24px}
.pop__card .btn{width:100%}
.pop__note{display:block;margin-top:14px;font-size:.82rem;color:var(--brun)}
.pop__note a{color:var(--brun);text-decoration:underline}
@keyframes popFade{from{opacity:0}to{opacity:1}}
@keyframes popDrop{from{opacity:0;transform:translateY(-34px)}to{opacity:1;transform:translateY(0)}}
/* Badge date reutilisable dans un hero */
.session-badge{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-size:.82rem;letter-spacing:.02em;color:var(--brun);background:var(--bg-2);border:1px solid var(--line);border-radius:100px;padding:8px 16px;margin-top:22px}
.session-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--terra);flex-shrink:0}
@media(prefers-reduced-motion:reduce){.pop__card,.pop__ov{animation:none}}
/* Hero LBM en deux colonnes : texte + portrait */
.lbm-hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:60px;align-items:center}
.lbm-hero-text{min-width:0}
.lbm-hero-text .hero-text{max-width:none}
.lbm-hero-media{border-radius:12px;overflow:hidden;aspect-ratio:4/5;background:var(--bg-2);box-shadow:0 26px 64px -34px rgba(60,40,30,.5)}
.lbm-hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 32%;display:block}
@media(max-width:860px){.lbm-hero-grid{grid-template-columns:1fr;gap:30px}.lbm-hero-media{aspect-ratio:16/11;max-height:440px}}
/* Toast d'annonces (accueil) : petite carte laterale, ne bloque pas la page */
.toast[hidden]{display:none}
.toast{position:fixed;right:22px;bottom:22px;z-index:900;width:340px;max-width:calc(100vw - 32px);background:#FFFEFC;border:1px solid var(--line);border-radius:12px;box-shadow:0 24px 60px -26px rgba(60,40,30,.5);padding:20px 20px 8px;transform:translateY(18px) scale(.98);opacity:0;transition:transform .5s cubic-bezier(.2,.85,.25,1),opacity .5s;font-family:var(--sans)}
.toast.show{transform:translateY(0) scale(1);opacity:1}
.toast__tag{display:inline-flex;align-items:center;gap:6px;font-size:.58rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--terra);border:1px solid var(--terra);border-radius:5px;padding:4px 8px 3px}
.toast__tag .dot{width:5px;height:5px;border-radius:50%;background:var(--terra)}
.toast__x{position:absolute;top:10px;right:12px;background:none;border:none;font-size:1.5rem;line-height:1;color:#B0A399;cursor:pointer;padding:4px}
.toast__x:hover{color:var(--brun)}
.toast__title{font-family:var(--serif);font-size:1.35rem;color:var(--titre);margin:13px 0 6px;line-height:1.15}
.toast__item{display:block;padding:14px 0;border-top:1px solid var(--line);text-decoration:none}
.toast__item:first-of-type{border-top:1px solid var(--line)}
.toast__item .d{font-size:.68rem;letter-spacing:.06em;color:var(--terra);text-transform:uppercase;margin-bottom:4px}
.toast__item .t{font-size:.98rem;color:var(--fonce);font-weight:700;margin-bottom:3px}
.toast__item .go{font-size:.82rem;color:var(--brun);border-bottom:1px solid var(--brun-2);padding-bottom:1px}
.toast__item:hover .go{color:var(--terra);border-color:var(--terra)}
@media(max-width:520px){.toast{right:12px;left:12px;bottom:12px;width:auto}}
@media(prefers-reduced-motion:reduce){.toast{transition:opacity .3s}}
/* Paiement intégré (checkout Stripe dans la page conférence) */
.pay-wrap{display:grid;grid-template-columns:.82fr 1.18fr;gap:40px;align-items:start;max-width:1020px;margin:0 auto}
.pay-summary{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:28px 26px;position:sticky;top:110px}
.pay-price{font-family:var(--serif);font-weight:500;font-size:2.5rem;line-height:1;color:var(--titre)}
.pay-price small{font-family:var(--sans);font-size:.9rem;font-weight:400;color:var(--brun)}
.pay-summary ul{list-style:none;padding:0;margin:20px 0 16px}
.pay-summary li{padding:11px 0;border-top:1px solid var(--line);font-size:.92rem;color:var(--fonce);display:flex;gap:9px;align-items:flex-start}
.pay-summary li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--terra);flex-shrink:0;margin-top:8px}
.pay-summary .fineprint{margin-top:4px}
.pay-checkout{min-height:340px}
.pay-checkout #checkout{border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 20px 50px -34px rgba(60,40,30,.4)}
.pay-loading{color:var(--brun);font-size:.9rem;padding:48px 20px;text-align:center;border:1px solid var(--line);border-radius:12px;background:#FFFEFC}
@media(max-width:820px){.pay-wrap{grid-template-columns:1fr;gap:26px}.pay-summary{position:static}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.r-body{display:grid;grid-template-columns:1.6fr .9fr;gap:70px;align-items:start}
.r-main h2{font-family:var(--serif);font-weight:400;font-size:2rem;color:var(--titre);margin:44px 0 18px}
.r-main p{color:var(--ink);margin-bottom:14px}
.incl{display:grid;grid-template-columns:1fr 1fr;gap:10px 26px;margin-top:14px}
.incl li{list-style:none;padding-left:26px;position:relative;color:var(--fonce);font-size:.95rem}
.incl li::before{content:"✦";position:absolute;left:0;color:var(--terra)}
.r-aside{position:sticky;top:110px;background:#FFFEFC;border:1px solid var(--line);border-radius:8px;padding:32px}
.r-aside .price{font-family:var(--sans);font-weight:300;font-size:2rem;letter-spacing:.01em;color:var(--titre)}
.r-aside .price small{font-size:.9rem;color:var(--brun-2)}
.r-aside .rooms{margin:18px 0;border-top:1px solid var(--line)}
.r-aside .rooms div{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--line);font-size:.9rem}
.r-aside .rooms span{color:var(--ink)}
/* text-align en plus de justify-content : le second centre la boite flex,
pas les lignes du libelle quand il passe sur deux lignes. */
.r-aside .btn{width:100%;justify-content:center;text-align:center;margin-bottom:10px}
.r-aside .fineprint{font-size:.86rem;color:var(--ink);line-height:1.7}
.r-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;grid-auto-rows:200px}
.r-gallery .g{border-radius:6px;overflow:hidden}
.r-gallery .g:first-child{grid-column:span 2;grid-row:span 2}
.r-gallery .g img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.r-gallery .g:hover img{transform:scale(1.05)}
.contact-team{display:flex;gap:14px;flex-wrap:wrap;margin-top:16px}
.chip{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:100px;padding:10px 18px;font-size:.88rem;transition:.25s}
.chip:hover{border-color:var(--terra);color:var(--terra)}
.chip svg{width:17px;height:17px;fill:currentColor}
/* ---- Événements ---- */
.events{display:flex;flex-direction:column;gap:0}
.event{display:grid;grid-template-columns:120px 1fr auto;gap:30px;align-items:center;padding:32px 0;border-top:1px solid var(--line);transition:padding .3s var(--ease)}
.event:hover{padding-left:10px}
.event .date{font-family:var(--serif);text-align:center}
.event .date .d{font-size:2rem;color:var(--titre);line-height:1}
.event .date .m{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--terra)}
.event .info h3{font-family:var(--serif);font-weight:500;font-size:1.55rem;color:var(--titre);transition:color .25s}
.event:hover .info h3{color:var(--terra)}
.event .info .tags{display:flex;gap:10px;margin-top:8px}
.event .tag{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);border:1px solid var(--line);border-radius:100px;padding:4px 12px}
/* ---- FOOTER — clair, signature, épuré ---- */
footer{background:var(--bg);padding:90px var(--pad) 46px;border-top:1px solid var(--line)}
.ft-row{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:34px;flex-wrap:wrap}
.ft-sig{font-family:var(--script);font-size:2.6rem;line-height:1;color:var(--brun)}
.ft-mid{display:flex;align-items:center;gap:26px}
.ft-mid .bar{width:1px;height:40px;background:var(--line)}
.ft-tag{font-family:var(--script);font-size:1.9rem;line-height:1;color:var(--brun-2)}
.ft-tag .hrt{color:var(--rose);font-family:var(--sans);font-size:1.1rem;vertical-align:6px;margin-left:8px}
.ft-socials{display:flex;align-items:center;gap:18px}
.ft-socials a{display:inline-flex;color:var(--brun-2);transition:color .25s,transform .25s}
.ft-socials a:hover{color:var(--terra);transform:translateY(-2px)}
.ft-socials svg{width:22px;height:22px;fill:currentColor}
.ft-bottom{max-width:var(--maxw);margin:56px auto 0;padding-top:26px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.76rem;color:var(--brun-2)}
.ft-bottom nav{display:flex;gap:22px;flex-wrap:wrap}
.ft-bottom a:hover{color:var(--terra)}
/* ============================================================
RESPONSIVE
============================================================ */
@media(max-width:1080px){
.mission{grid-template-columns:repeat(3,1fr);gap:50px 30px}
.offers{grid-template-columns:1fr 1fr}
}
@media(max-width:980px){
:root{--pad:30px}
.section{padding:100px 0}
.section-sm{padding:70px 0}
.section-follow{padding:50px 0 100px}
.steps{grid-template-columns:1fr 1fr;gap:30px}
.split{grid-template-columns:1fr;gap:44px}
.split.rev .col-media{order:0}
.hero-ed{grid-template-columns:1fr;min-height:0}
.hero-ed .hx{padding:150px var(--pad) 70px;order:2}
.hero-ed .hx-in{max-width:560px}
.hero-ed .hp{min-height:64vh;order:1}
.hero-ed .hx{order:1}
.hero-ed .hp{order:2}
.r-body{grid-template-columns:1fr;gap:40px}
.r-aside{position:static}
.r-gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:220px}
.r-gallery .g:first-child{grid-column:span 2;grid-row:span 1}
.event{grid-template-columns:88px 1fr auto}
.event .date .d{font-size:1.6rem}
.route .veg{width:240px;opacity:.3}
}
@media(max-width:820px){
.nav-links{display:none}
.burger{display:flex}
.nav.open .nav-links{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:var(--bg);padding:10px 30px 24px;box-shadow:0 12px 24px rgba(0,0,0,.05)}
.nav.open .nav-links a{padding:15px 0;border-bottom:1px solid var(--line)}
.nav.open .nav-links a::after{display:none}
}
@media(max-width:820px){
.principles,.cards,.reviews{grid-template-columns:1fr 1fr}
.mission{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
body{font-size:16px}
.section{padding:84px 0}
.principles,.cards,.reviews,.steps,.incl,.r-gallery,.cards.two,.r-gallery.duo,.offers{grid-template-columns:1fr}
.mission{grid-template-columns:1fr;gap:0}
/* Mission : icone a gauche, texte a droite (passe du 20/08).
Cinq blocs centres empiles faisaient a eux seuls pres de 900 px. */
.mission .mi{
flex-direction:row;
gap:18px;
text-align:left;
padding:17px 2px;
border-top:1px solid var(--line);
}
.mission .mi:last-child{border-bottom:1px solid var(--line)}
.mission svg{width:28px;height:28px;flex:none}
.mission p{font-size:1.06rem;line-height:1.35;max-width:none}
/* Cartes : un peu d'air en moins (passe du 20/08) */
.ocard .ct{padding:24px 22px 26px}
.ocard h3{margin:14px 0 10px}
.r-gallery{grid-auto-rows:230px}
.r-gallery .g:first-child{grid-column:span 1;grid-row:span 1}
.ucard{aspect-ratio:4/3}
.event{grid-template-columns:80px 1fr;gap:18px}
.event .actions{grid-column:2}
.chip{padding:13px 18px}
.news form{flex-direction:column;border:none;border-radius:0;padding:0;gap:12px;background:transparent}
.news input{border:1px solid var(--line);border-radius:100px;padding:14px 20px;text-align:center;background:#FFFEFC}
.proof{padding:80px 22px}
.page-hero{padding:160px 0 60px}
.r-hero{height:64vh}
.hero-ed .hp{min-height:52vh}
.hero-ed .hx{padding:60px var(--pad) 70px}
.hero-ed .sig{font-size:2.5rem}
.ft-row{flex-direction:column;text-align:center}
.ft-mid{flex-direction:column;gap:14px}
.ft-mid .bar{width:40px;height:1px}
.ft-bottom{justify-content:center;text-align:center}
}
@media(max-width:420px){ .hero-ed h1{font-size:2.7rem} }
@media(prefers-reduced-motion:reduce){
*{animation:none!important}
.js .reveal,.js .img-reveal{opacity:1!important;transform:none!important;clip-path:none!important}
}
/* ---- Divers ---- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.note-todo{display:inline-flex;align-items:center;gap:7px;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:#b42828;background:rgba(180,40,40,.08);border:1px solid rgba(180,40,40,.25);padding:5px 11px;border-radius:6px}
.qa summary:focus-visible,a:focus-visible,button:focus-visible{outline:2px solid var(--terra);outline-offset:4px;border-radius:4px}
.burger{transition:.3s}
.nav.open .burger span:nth-child(1){transform:translateY(6.4px) rotate(45deg)}
.nav.open .burger span:nth-child(2){opacity:0}
.nav.open .burger span:nth-child(3){transform:translateY(-6.4px) rotate(-45deg)}
.nav-mobile-cta{display:none}
@media(max-width:680px){.nav.open .nav-mobile-cta{display:block;margin:18px 30px 6px}}
/* Sticky CTA mobile — pages retraite */
.r-sticky-bar{display:none}
@media(max-width:980px){
.r-sticky-bar{position:fixed;bottom:0;left:0;right:0;z-index:45;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:12px 20px;background:var(--bg);border-top:1px solid var(--line)}
.r-sticky-bar .px{font-family:var(--sans);font-weight:400;font-size:1.05rem;color:var(--titre);line-height:1}
.r-sticky-bar .px small{font-size:.74rem;color:var(--ink)}
.r-sticky-bar .btn{padding:12px 22px}
body.has-sticky{padding-bottom:72px}
}
/* Bloc vidéo doux */
.video-ph{position:relative;aspect-ratio:16/9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;border-radius:6px;overflow:hidden;background:var(--bg-2);border:1px solid var(--line)}
.video-ph .play{width:78px;height:78px;border-radius:50%;border:1px solid var(--terra);display:flex;align-items:center;justify-content:center;background:rgba(255,254,252,.6);transition:.3s}
.video-ph:hover .play{background:var(--terra)}
.video-ph .play i{width:0;height:0;border-left:18px solid var(--terra);border-top:12px solid transparent;border-bottom:12px solid transparent;margin-left:5px;transition:.3s}
.video-ph:hover .play i{border-left-color:#fff}
.video-ph figcaption{font-family:var(--serif);font-style:italic;color:var(--ink);font-size:1rem}
.meta-ico{width:14px;height:14px;fill:currentColor;opacity:.78;vertical-align:-2px;margin-right:5px}
/* Eyebrow encadré */
.sec-head .eyebrow{display:inline-flex;align-items:center;gap:16px}
.sec-head .eyebrow::before,.sec-head .eyebrow::after{content:"";width:34px;height:1px;background:currentColor;opacity:.5}
/* Variantes de grille pour pages à 2 éléments */
.cards.two{grid-template-columns:1fr 1fr}
.r-gallery.duo{grid-template-columns:1fr 1fr;grid-auto-rows:260px}
/* ---- Retours en vidéo (hub des séjours) ---- */
.v-retours{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;max-width:820px;margin:0 auto}
.v-retours .vr{display:flex;flex-direction:column;gap:12px}
.v-retours video{width:100%;aspect-ratio:9/16;object-fit:cover;background:var(--bg-2);border:1px solid var(--line);border-radius:6px;display:block}
.v-retours figcaption{font-family:var(--serif);font-style:italic;font-size:1rem;color:var(--ink);text-align:center}
@media(max-width:680px){.v-retours{grid-template-columns:1fr;max-width:380px;gap:34px}}
.r-gallery.duo .g:first-child{grid-column:auto;grid-row:auto}
@media(max-width:680px){.cards.two,.r-gallery.duo{grid-template-columns:1fr}}
/* Logos sociaux cliquables (sur fond brun) */
.social-lg{display:flex;gap:26px;justify-content:center;align-items:center;margin-top:10px}
.social-lg a{display:inline-flex;color:#EBDCCE;transition:color .25s var(--ease),transform .25s var(--ease)}
.social-lg a:hover{color:#fff;transform:translateY(-3px)}
.social-lg svg{width:27px;height:27px;fill:currentColor}
/* ---- Bloc Calendly intégré ---- */
.calendly-block{max-width:760px;margin:0 auto}
.calendly-inline-widget{border-radius:8px;overflow:hidden;border:1px solid var(--line);background:#FFFEFC;min-width:0;height:700px}
/* ---- Chapô de page intérieure (plusieurs paragraphes) ---- */
.page-hero .hero-text{max-width:640px}
.page-hero .hero-text p{margin-top:18px;color:var(--ink)}
.page-hero .hero-text .lead{margin-top:28px}
/* ---- Programme d'une retraite ---- */
.prog{display:grid;grid-template-columns:1fr 1fr;gap:64px}
.prog-block h3{font-family:var(--serif);font-weight:500;font-size:1.6rem;color:var(--titre)}
.prog-block .sub{font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--terra);margin:10px 0 22px}
.day{padding:24px 0;border-top:1px solid var(--line)}
.day .lb{font-family:var(--serif);font-style:italic;font-size:1rem;color:var(--terra)}
.day h4{font-family:var(--serif);font-weight:500;font-size:1.25rem;line-height:1.3;color:var(--titre);margin:8px 0 10px}
.day p{font-size:.94rem;color:var(--ink);line-height:1.75}
.daily{list-style:none;display:grid;gap:11px;margin-top:6px}
.daily li{padding-left:26px;position:relative;color:var(--fonce);font-size:.97rem}
.daily li::before{content:"✦";position:absolute;left:0;color:var(--terra)}
/* ---- Tes accompagnantes ---- */
.persons{display:grid;grid-template-columns:1fr 1fr;gap:64px}
.person{display:flex;flex-direction:column;align-items:center;text-align:center}
.person .av{width:154px;height:154px;border-radius:50%;overflow:hidden;background:var(--bg-2);border:1px solid var(--line);flex:none}
.person .av img{width:100%;height:100%;object-fit:cover}
.person .av.mono{display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:2.7rem;color:var(--terra)}
.person h3{font-family:var(--serif);font-weight:500;font-size:1.75rem;color:var(--titre);margin:26px 0 16px}
.person p{font-size:.97rem;color:var(--ink);max-width:430px}
.person blockquote{font-family:var(--serif);font-style:italic;font-size:1.15rem;line-height:1.5;color:var(--brun-2);margin-top:22px;max-width:430px}
.person .sign{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--terra);margin-top:12px}
/* ---- Bloc de clôture éditorial ---- */
.closing{text-align:center;max-width:780px;margin:0 auto}
.closing p{font-family:var(--serif);font-style:italic;font-size:clamp(1.4rem,2.8vw,2.05rem);line-height:1.5;color:var(--titre)}
.closing .btn{margin-top:38px}
@media(max-width:980px){
.prog,.persons{grid-template-columns:1fr;gap:48px}
}
/* ---- Galerie 3 colonnes (6 photos, sans grande vignette) ---- */
.r-gallery.trio{grid-template-columns:repeat(3,1fr);grid-auto-rows:230px}
.r-gallery.trio .g:first-child{grid-column:auto;grid-row:auto}
@media(max-width:980px){.r-gallery.trio{grid-template-columns:repeat(2,1fr);grid-auto-rows:220px}}
@media(max-width:680px){.r-gallery.trio{grid-template-columns:1fr;grid-auto-rows:230px}}
/* ---- Widget avis Amazon (page livre) ---- */
.amz-head{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;margin:34px 0 40px;font-family:Arial,Helvetica,sans-serif}
.amz-score{font-size:1.9rem;font-weight:700;color:#0F1111;line-height:1}
.amz-score small{font-size:1rem;font-weight:400;color:#565959}
.amz-stars{position:relative;display:inline-block;font-size:1.5rem;line-height:1;letter-spacing:3px;color:#E3E6E6}
.amz-stars::before{content:"★★★★★"}
.amz-stars i{position:absolute;left:0;top:0;overflow:hidden;color:#FFA41C;font-style:normal;white-space:nowrap}
.amz-stars i::before{content:"★★★★★";letter-spacing:3px}
.amz-meta{font-size:.92rem;color:#565959}
.amz-meta a{color:#007185;text-decoration:underline;text-underline-offset:2px}
/* variante Amazon du composant carrousel : deux valeurs different, c'est tout */
.amz-carousel{--fade:7%;--dur:60s}
.amz-track{padding:6px 0}
.amz-card{flex:0 0 min(330px,84vw);width:auto;margin-right:22px;background:#fff;border:1px solid #D5D9D9;border-radius:8px;padding:22px 24px;font-family:Arial,Helvetica,sans-serif;color:#0F1111;text-align:left}
.amz-card .who{display:flex;align-items:center;gap:10px;margin-bottom:8px}
/* La taille de fond s'ecrit 70%, pas 70%25 : l'encodage URL avait deborde
hors du url(), ce qui invalidait le raccourci background en entier et
laissait 7 ronds vides a cote des avis. */
.amz-card .pfp{width:30px;height:30px;border-radius:50%;flex:none;background:#F0F2F2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='9' r='4' fill='%23B0B7B7'/%3E%3Cpath d='M4 21c0-4 3.6-6.5 8-6.5s8 2.5 8 6.5' fill='%23B0B7B7'/%3E%3C/svg%3E") center 3px/70% no-repeat;border:1px solid #D5D9D9}
.amz-card .nm{font-size:.85rem;color:#0F1111}
.amz-card .st{font-size:1.02rem;color:#FFA41C;letter-spacing:2px;line-height:1;margin-bottom:5px}
.amz-card .ttl{font-weight:700;font-size:.95rem;margin-bottom:4px}
.amz-card .dt{font-size:.77rem;color:#565959;margin-bottom:3px}
.amz-card .avp{font-size:.73rem;font-weight:700;color:#C45500;margin-bottom:9px}
.amz-card .bd{font-size:.86rem;line-height:1.55;color:#0F1111;margin:0}
@media(max-width:680px){.amz-card{padding:18px 20px}.amz-head{gap:12px}}
/* ---- Pages légales ---- */
/* Le bloc garde la largeur de .wrap, sinon son margin auto le recentrait et
le corps de texte decrochait de 240px par rapport au titre de la page.
La mesure de lecture est portee par les enfants. */
.legal{max-width:var(--maxw)}
.legal>*{max-width:760px}
.legal h2{font-family:var(--serif);font-weight:500;font-size:1.7rem;color:var(--titre);margin:52px 0 16px}
.legal h2:first-child{margin-top:0}
.legal p{margin-bottom:14px}
.legal ul{margin:0 0 14px 22px}
.legal li{margin-bottom:8px}
.legal a{color:var(--brun-2);border-bottom:1px solid currentColor;padding-bottom:1px}
.legal a:hover{color:var(--terra)}
.legal-date{margin-top:56px;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--brun-2)}
/* ============================================================
AJOUTS — retours Jade du 18/08/2026
============================================================ */
/* ---- Prose éditoriale (À propos, La Bonne Méthode) ---- */
.prose{max-width:720px;margin:0 auto}
.prose p{margin-top:22px;color:var(--ink)}
.prose p:first-child{margin-top:0}
.prose p.stand{font-family:var(--serif);font-style:italic;font-size:clamp(1.3rem,2.5vw,1.85rem);line-height:1.45;color:var(--titre);margin:52px 0}
.prose p.tight{margin-top:6px}
.prose h3{font-family:var(--serif);font-weight:500;font-size:1.75rem;color:var(--titre);margin-top:60px}
.prose h3 + p{margin-top:18px}
.prose .rule{margin:24px 0}
.prose .sign{font-family:var(--script);font-size:2.6rem;color:var(--brun);line-height:1;margin-top:44px}
@media(max-width:720px){.prose p.stand{margin:38px 0}}
/* ---- Parcours numéroté (La Bonne Méthode) ---- */
.journey{display:grid;gap:0;max-width:900px;margin:0 auto}
.journey .jp{padding:44px 0;border-top:1px solid var(--line)}
.journey .jp:last-child{border-bottom:1px solid var(--line)}
.journey .jp .n{font-family:var(--serif);font-style:italic;font-size:1.05rem;color:var(--terra);letter-spacing:.06em}
.journey .jp h3{font-family:var(--serif);font-weight:500;font-size:clamp(1.6rem,3vw,2.1rem);color:var(--titre);margin:10px 0 18px}
/* Le bloc reste a 900px (les filets et les numeros portent la section), mais
le texte lit a la meme mesure que .prose : au-dela on montait a 100
caracteres par ligne, contre ~70 partout ailleurs sur le site. */
.journey .jp p{color:var(--ink);margin-top:14px;max-width:720px}
.journey .jp p.q{color:var(--brun-2);font-style:italic}
/* ============================================================
PASSE RESPONSIVE — 21/08/2026
Paliers : 1080 / 980 / 820 / 680 / 420
Aucune regle de ce bloc ne s'applique au-dessus de 1080 px,
hors trois exceptions declarees (ancrages, valeurs sorties du
style inline, carrousels en « reduire les animations »).
============================================================ */
/* ------------------------------------------------------------
RANG 1 — cause racine : les titres heritaient line-height:1.8
du body. Un correctif, une dizaine de symptomes.
------------------------------------------------------------ */
@media(max-width:1080px){
h1,h2,h3,h4,h5,h6{line-height:1.2}
.qa summary{line-height:1.3}
/* le titre reprenait 13 px de blanc fantome au-dessus : on rend
l'ecart au margin, qui lui est intentionnel */
.r-main h2{margin:52px 0 16px}
}
/* ------------------------------------------------------------
RANG 2 — LES PHOTOS
------------------------------------------------------------ */
/* 2.1 · Hero d'accueil — jade-hero.jpg, portrait 1400x2100.
Un seul ratio pour tout le responsive : le cadrage ne change plus
d'un telephone a l'autre. width:min() et non max-width + margin
auto : la boite ne contient que des enfants en position:absolute. */
@media(max-width:980px){
.hero-ed .hp{min-height:0;aspect-ratio:4/5;width:min(100%,520px);margin-inline:auto}
.hero-ed .hp img{object-position:50% 76%}
}
/* Sous 680 px le hero garde la meme gouttiere que tout le reste de la page.
Sur les 7 images de l'accueil, 6 sont encadrees par var(--pad) : le hero
etait la seule exception, et deux photos de meme ratio a 60 px d'ecart de
largeur se lisent comme un rate, pas comme une hierarchie. La marge creme
est le cadre, conformement a la charte "maison d'edition". */
@media(max-width:680px){
.hero-ed .hp{display:none}
}
/* 2.2 · Heros sejour — manoir-facade.jpg / plessis-facade.jpg, 3:2.
Ratio 4/3 + plancher de contenu au lieu d'un min-height:520px aveugle. */
@media(max-width:820px){
/* ratio 4/3 exprime en hauteur (75vw) et non en aspect-ratio : sur un bloc
pleine largeur, aspect-ratio + min-height fait resoudre la LARGEUR depuis
la hauteur (420 x 4/3 = 560 px) et emporte tout le document avec lui. */
.r-hero{height:max(420px,75vw);min-height:0}
.r-hero .ct{padding-bottom:44px}
}
/* Cadrage par photo, calcule sur la position reelle du batiment.
Vaut aussi pour les cartes de retraites.html (memes fichiers). */
@media(max-width:1080px){
.r-hero img[src*="manoir-facade"],
.ucard img[src*="manoir-facade"]{object-position:48% 40%}
.r-hero img[src*="plessis-facade"],
.ucard img[src*="plessis-facade"]{object-position:53% 40%}
}
/* 2.3 · Le h1 blanc tombait sur du gravier clair : on densifie le
voile existant, meme teinte, sans ombre. */
@media(max-width:980px){
.r-hero .veil{background:linear-gradient(to top,rgba(35,24,18,.86),rgba(35,24,18,.34) 62%,rgba(35,24,18,.28))}
}
/* 2.4 · .split — le cadre suit l'orientation du fichier.
Base : reprend a l'identique ce qui etait en style inline. */
.split .col-media.ar-objet img{object-fit:contain;padding:34px}
.split .col-media.ar-objet.p18 img{padding:18px}
/* Le cadre paysage vaut a TOUTES les largeurs : enferme dans la requete
ci-dessous, il laissait le 4/5 de base recadrer en portrait une photo 3:2
au-dessus de 980px (le cadrage sautait entre 980 et 981). */
.split .col-media.ar-paysage{aspect-ratio:3/2}
@media(max-width:980px){
.split .col-media.ar-portrait{aspect-ratio:4/5;width:min(100%,440px);margin-inline:auto}
.split .col-media.ar-objet{width:min(100%,300px);margin-inline:auto}
.split .col-media.ar-objet img,
.split .col-media.ar-objet.p18 img{padding:16px}
}
/* 2.5 · Galeries sejour — les 13 fichiers sont en 3:2 : le ratio de
cellule devient 3/2, plus aucun recadrage. */
@media(max-width:1080px){
.r-gallery,.r-gallery.trio,.r-gallery.duo{grid-auto-rows:auto}
.r-gallery .g{aspect-ratio:3/2}
.r-gallery.trio{grid-template-columns:repeat(2,1fr)}
.r-gallery{gap:18px}
}
@media(max-width:680px){
.r-gallery,.r-gallery.trio{gap:22px}
/* Cette regle doit venir APRES le bloc 1080 ci-dessus : a specificite egale
c'est le dernier declare qui gagne, et la galerie du telephone restait en
2 colonnes de vignettes de 154x103. */
.r-gallery.trio{grid-template-columns:1fr}
}
/* Palier remonte de 980 a 1080 : a 1024 la colonne principale tombait a 539px
et l'encart a 303px, galerie ecrasee et bouton sur deux lignes. */
@media(max-width:1080px){
.r-body{grid-template-columns:1fr;gap:40px}
.r-aside{position:static;width:min(100%,420px);margin-inline:auto}
}
/* Les deux signatures des accompagnantes se calent sur la meme ligne de pied,
quel que soit le nombre de lignes de leur citation. */
.persons .person{display:flex;flex-direction:column}
.persons .person .sign{margin-top:auto}
@media(max-width:980px){
/* 8 a 9 lignes centrees : l'oeil perd le debut de ligne. */
.persons .person p{text-align:left}
}
/* 2.6 · Cartes sejour — le ratio quitte le style inline pour pouvoir
etre adapte ; le nom du sejour n'est plus tronque. */
.cards.two .ucard{aspect-ratio:4/3} /* = l'inline supprime, desktop identique */
@media(max-width:680px){
.cards.two .ucard{aspect-ratio:3/4}
.ucard .ct{padding:24px 22px 26px}
.ucard h3{font-size:1.6rem}
}
/* 2.7 · Carte livre de l'accueil : le recadrage assume du 20/08 vaut
partout ou .offers est en grille, pas seulement sous 680. */
@media(max-width:1080px){
.ocard .im.contain{aspect-ratio:4/3;background:var(--bg-2)}
.ocard .im.contain img{padding:16px}
}
/* ------------------------------------------------------------
RANG 3 — BLOQUANTS STRUCTURELS
------------------------------------------------------------ */
/* 3.1 · Le premier mot de l'accueil etait coupe par la nav (84 px). */
@media(max-width:680px){
.hero-ed .hx{padding:110px var(--pad) 70px}
}
/* 3.2 · Nav : la signature ne se coupe jamais en deux, et le menu
desktop se resserre au lieu de forcer la barre sur 2 lignes.
Les paliers 861 / 820 sont conserves : l'iPad paysage garde son
menu. Borne haute au palier 1080 : au-dessus la barre tenait deja,
rien ne doit y bouger. */
.brand{white-space:nowrap}
/* le menu desktop est visible des 821 px (le burger s'arrete a 820) :
la reduction de gouttiere commence donc la, sinon la barre passe sur
2 lignes entre 821 et 860. */
@media(min-width:821px) and (max-width:1080px){ /* plage */
.nav-in{column-gap:16px}
.nav-links{gap:clamp(16px,2.6vw,38px)}
}
/* 3.3 · Calendly : hauteur adaptee maintenant qu'elle n'est plus
figee en style inline. */
@media(max-width:980px){ .calendly-inline-widget{height:780px} }
@media(max-width:680px){ .calendly-inline-widget{height:1020px} }
/* 3.4 · La barre CTA s'efface sur le bloc de reservation. */
.r-sticky-bar.is-off{display:none}
/* 3.5 · Barre CTA : le prix et le bouton ne sont plus separes par
400 px de vide des qu'on depasse le telephone. */
@media(max-width:980px){
.r-sticky-bar{
padding-left:max(20px,calc((100% - 560px)/2));
padding-right:max(20px,calc((100% - 560px)/2));
}
}
/* ------------------------------------------------------------
RANG 4 — PALIER TABLETTE 768–1024
------------------------------------------------------------ */
/* 4.1 · .mission : plus de cellule vide en seconde rangee. */
@media(min-width:821px) and (max-width:1080px){ /* plage */
.mission{grid-template-columns:repeat(6,1fr)}
.mission .mi{grid-column:span 2}
.mission .mi:nth-child(4){grid-column:2/span 2}
}
@media(min-width:681px) and (max-width:820px){ /* plage */
.mission .mi:nth-child(5){grid-column:span 2}
}
/* le cap de 190 px etait dimensionne pour la grille 5 colonnes du
desktop : il devient une mesure de texte, pas une largeur en dur */
@media(min-width:681px) and (max-width:1080px){ /* plage */
.mission p{max-width:22ch}
}
/* 4.2 · Mesure de texte : 36 em ~ 70 caracteres. */
@media(max-width:820px){
.prose{max-width:36em}
.journey{max-width:36em}
.r-main p,.r-main li,.day p,.daily li,.legal p,.legal li{max-width:36em}
.page-hero .lead,.page-hero .hero-text{max-width:36em}
}
/* 4.3 · .split en une colonne : titre et texte au meme bord. */
@media(max-width:980px){
.split .col-text{max-width:560px}
.split .col-text p{max-width:none}
}
/* 4.4 · Carte tarifaire sejour. */
@media(max-width:980px){
.r-aside{width:min(100%,420px);margin-inline:auto}
}
@media(max-width:1080px){
.r-aside .btn{letter-spacing:.14em;padding:15px 18px}
}
/* 4.5 · Haut de page : 220 px de vide avant le fil d'Ariane. */
@media(min-width:681px) and (max-width:980px){ /* plage */
.page-hero{padding:170px 0 70px}
}
/* 4.6 · Listes a puces : lecture en colonne au lieu de ligne par ligne. */
@media(min-width:681px) and (max-width:980px){ /* plage */
.incl{display:block;columns:2;column-gap:30px}
.incl li{break-inside:avoid;margin-bottom:12px}
}
/* 4.7 · Accompagnantes : 2 colonnes jusqu'au telephone. */
@media(min-width:681px) and (max-width:980px){ /* plage */
.persons{grid-template-columns:1fr 1fr;gap:40px}
}
/* 4.8 · La branche vegetale passait derriere le titre. */
@media(max-width:820px){
.route .veg{display:none}
}
/* 4.9 · Une seule gouttiere de contenu par page : .news et .proof
s'alignent sur .wrap au lieu de 22 px. */
@media(max-width:820px){
.news,.proof{padding-left:var(--pad);padding-right:var(--pad)}
}
/* 4.10 · Boutons de carte alignes en bas. */
@media(max-width:1080px){
.ocard .ct .btn{margin-top:auto}
.ocard p{margin-bottom:22px}
}
/* 4.11 · Longueur de page : le sec-head gardait 80 px de marge
de 320 a 1440. */
@media(max-width:820px){ .sec-head{margin-bottom:48px} }
@media(max-width:680px){ .sec-head{margin-bottom:36px} }
/* ------------------------------------------------------------
RANG 5 — FINITIONS
------------------------------------------------------------ */
/* 5.1 ·
de titres neutralises en etroit. L'espace ajoutee en
amont dans le HTML evite la soudure des mots. */
@media(max-width:820px){
h1 br,h2 br{display:none}
}
/* 5.2 · Carrousels d'avis en mode glisse (le composant est defini
plus haut : ici, seulement la mise en page des cartes). */
@media(max-width:820px){
.band-carousel,.amz-carousel{padding:0 var(--pad)}
/* .amz-track garde l'etirement : sans lui les cartes d'avis prenaient des
hauteurs differentes cote a cote (jusqu'a 64px d'ecart). */
.band-track{align-items:flex-start}
.bq{
padding:0;
margin-right:20px;
border-right:none;
scroll-snap-align:start;
}
.amz-card{
margin-right:16px;
scroll-snap-align:start;
}
/* la copie du marquee est posee par le JS et ne sert qu'a la boucle :
si elle existe (rotation d'ecran), on la masque. Aucun nombre d'avis
n'est ecrit en dur. */
.band-track>.is-dup,.amz-track>.is-dup{display:none}
.band{padding:84px 0 76px}
.band .sec-head{margin-bottom:34px}
.band .more{margin-top:38px}
}
/* 5.3 · Zones de touche 44x44 sans toucher au dessin. */
@media(max-width:1080px){
.burger{position:relative}
.burger::after{content:"";position:absolute;top:50%;left:50%;
transform:translate(-50%,-50%);width:48px;height:48px}
}
@media(max-width:820px){
.ft-socials{gap:26px}
.ft-socials a,.ft-bottom nav a,.social-lg a,.breadcrumb a{position:relative}
.ft-socials a::after,.social-lg a::after{content:"";position:absolute;
top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px}
.ft-bottom nav a::after,.breadcrumb a::after{content:"";position:absolute;
top:50%;left:50%;transform:translate(-50%,-50%);
width:100%;min-width:44px;height:44px}
/* Meme traitement pour la signature de la nav et celle du pied de page :
la zone de touche s'etend, le dessin ne bouge pas. */
.brand,.ft-sig{position:relative}
.brand::after,.ft-sig::after{content:"";position:absolute;
top:50%;left:50%;transform:translate(-50%,-50%);
width:100%;height:44px}
/* Liens autonomes en fin de section : le padding vertical d'un element
inline agrandit la cible sans toucher a la hauteur de ligne. */
.link-u,.band .more a,.form .fineprint a{padding-block:14px}
}
/* 5.4 · Plus aucun texte sous 13 px. */
@media(max-width:820px){
.eyebrow{font-size:.84rem;letter-spacing:.2em}
.btn{font-size:.82rem;letter-spacing:.16em;padding:16px 26px}
.ocard .btn{font-size:.82rem;letter-spacing:.14em;padding:13px 20px}
.news button{font-size:.82rem;letter-spacing:.16em}
.bq .who,.ucard .num,.ucard .go,.person .sign,.prog-block .sub,
.proof .who,.review .by,.field label,.form .fineprint{font-size:.82rem}
.ft-bottom{font-size:.84rem}
.breadcrumb{font-size:.86rem}
.legal-date{font-size:.84rem}
.amz-card .dt,.amz-card .avp{font-size:.82rem}
.sec-head .eyebrow::before,.sec-head .eyebrow::after{width:20px}
}
@media(max-width:420px){
.btn{padding:15px 20px;letter-spacing:.12em}
}
/* Complements a la regle 5.4 : ces quatre-la etaient passes au travers.
Les trois premiers viennent des pages conferences / sejours. */
@media(max-width:820px){
.event .date .m{font-size:.84rem}
.event .tag{font-size:.82rem}
.r-sticky-bar .px small,.r-aside .price small{font-size:.84rem}
}
/* Une grille de 3 items passee en 2 colonnes laisse une cellule vide a cote
du dernier : sur cette plage on l'empile plutot que d'afficher le trou. */
@media(min-width:681px) and (max-width:820px){
.principles:has(> :last-child:nth-child(3)),
.reviews:has(> :last-child:nth-child(3)){grid-template-columns:1fr}
/* Les titres blancs des cartes sejour tombaient sur la facade claire :
on densifie le voile existant, meme teinte, sans ombre (cf. regle 2.3). */
.cards.two .ucard .veil{background:linear-gradient(to top,rgba(43,30,23,.9),rgba(43,30,23,.5) 60%,rgba(43,30,23,.15))}
}
/* Titres en etroit : evite le mot (ou l'article) seul sur la derniere ligne,
la ou les
composes pour le desktop sont neutralises. */
@media(max-width:820px){
h1,h2{text-wrap:balance}
}
/* Corps de texte, a toutes les largeurs : text-wrap:pretty est fait pour ca,
il interdit le mot seul en derniere ligne. Sans lui, le chapo des pages
interieures enchainait jusqu'a trois paragraphes finissant sur « soi. ».
Le navigateur qui ne connait pas la valeur l'ignore, sans degat. */
p,li,blockquote,figcaption,.lead{text-wrap:pretty}
/* 5.5 · Pied de page : la ligne qui deborde reste centree, le coeur
revient sur l'axe du texte. */
@media(max-width:680px){
.ft-bottom nav{justify-content:center}
.ft-tag .hrt{vertical-align:2px;margin-left:6px}
}
/* 5.6 · Formulaire newsletter : la DA impose 3 px partout. */
@media(max-width:680px){
.news input{border-radius:3px}
}
/* 5.7 · FAQ : le « + » se cale sur la premiere ligne. */
@media(max-width:820px){
.qa summary{align-items:flex-start}
.qa summary .ic{margin-top:5px}
}
/* 5.8 · Bloc video comprime a 320 px. */
@media(max-width:680px){
.video-ph{aspect-ratio:4/3;padding:0 18px;gap:14px}
.video-ph .play{width:60px;height:60px}
.video-ph .play i{border-left-width:14px;border-top-width:9px;border-bottom-width:9px}
.video-ph figcaption{font-size:.94rem;text-align:center}
}
/* 5.9 · Lien souligne sur 2 lignes : le trait suit le texte au lieu
de barrer toute la boite. */
@media(max-width:820px){
.link-u{display:inline;border-bottom:none;
text-decoration:underline;text-underline-offset:5px;
text-decoration-thickness:1px}
}
/* 5.10 · Meta du hero sejour : l'icone s'aligne sur la 1re ligne. */
@media(max-width:820px){
.r-hero .meta{gap:10px 22px}
.r-hero .meta span{align-items:flex-start}
.r-hero .meta .meta-ico{margin-top:6px;flex:none}
}
/* 5.11 · Pilules de contact : plus de pilule a 2 lignes ni de
seconde pilule orpheline. */
@media(max-width:680px){
.contact-team{flex-direction:column;align-items:stretch}
.chip{justify-content:center}
}
/* 5.12 · Pages legales : puces et URL en etroit. */
@media(max-width:820px){
.legal a{overflow-wrap:break-word}
}
@media(max-width:420px){
.legal ul{margin-left:16px}
.legal-date{margin-top:36px}
}
/* 5.13 · Boutons empiles du page-hero : meme largeur, plus d'escalier
sur le bord droit. */
@media(max-width:680px){
.page-hero .actions{flex-direction:column;align-items:stretch}
.page-hero .actions .btn{justify-content:center}
}
/* ============================================================
AJOUTS — page conferences « Dans ma valise, il y a… » (23/08/2026)
============================================================ */
/* Compartiments : 4 colonnes desktop, 2 tablette, 1 telephone */
.principles.four{grid-template-columns:repeat(4,1fr);gap:44px}
@media(max-width:1080px){.principles.four{grid-template-columns:1fr 1fr;gap:44px 30px}}
@media(max-width:680px){.principles.four{grid-template-columns:1fr;gap:34px}}
/* Split media paysage (photo de salle 3:2), toutes largeurs */
.split .col-media.ar-3-2{aspect-ratio:3/2}
@media(max-width:980px){
.split .col-media.ar-3-2{width:min(100%,560px);margin-inline:auto}
}
/* Bande brune : la question finale en script */
.proof .script-q{font-family:var(--script);font-weight:400;font-size:clamp(2.1rem,4.5vw,3rem);line-height:1.2;color:var(--rose);margin-top:30px}
/* Formulaire d'inscription conference */
.form.narrow{max-width:640px;margin:0 auto}
.form .duo{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
@media(max-width:680px){.form .duo{grid-template-columns:1fr}}
.form .hp-field{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.form-ok{display:none;text-align:center;padding:22px 0 8px}
.form-ok h3{font-family:var(--serif);font-weight:500;font-size:1.8rem;color:var(--titre);margin-bottom:12px}
.form-ok p{color:var(--ink);max-width:440px;margin:0 auto}
.form.is-done form{display:none}
.form.is-done .form-ok{display:block}
.form-err{display:none;text-align:center;font-size:.9rem;color:#8F3B2C;margin-top:14px}
.form-err a{text-decoration:underline;text-underline-offset:3px}
.form-ok h3:focus{outline:none}
/* ---- Ligne de date cliquable (hub des evenements) -----------------------
Toute la ligne mene a la page de la conference : le libelle de droite est
donc un simple repere, pas un lien imbrique (interdit dans un ). */
a.event{color:inherit}
a.event .go{font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;color:var(--terra);white-space:nowrap;display:inline-flex;gap:8px;transition:gap .3s var(--ease)}
a.event:hover .go{gap:14px}
@media(max-width:820px){a.event .go{font-size:.82rem}}
/* ---- Carte a visuel de marque (sejours) ----------------------------------
Le visuel fourni par Jade contient deja le titre et le monogramme : la carte
ne rajoute donc aucun texte par-dessus, contrairement a .ucard. Le filet dore
qui ferme le visuel sert de separateur avec la ligne de dates. */
.vcard{display:block;background:#FFFEFC;border:1px solid var(--line);border-radius:6px;overflow:hidden;transition:border-color .4s var(--ease)}
.vcard:hover{border-color:var(--rose)}
/* height:auto est indispensable : sans lui, l'attribut height="674" du HTML
donne une hauteur definie, et aspect-ratio est ignore (largeur ET hauteur
etant deja connues). Le visuel s'affichait alors en portrait, recadre. */
.vcard img{display:block;width:100%;height:auto;aspect-ratio:1655/674;object-fit:cover}
.vcard .ct{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:20px 24px 22px}
.vcard .num{font-family:var(--sans);font-size:.92rem;color:var(--brun-2);letter-spacing:.03em}
.vcard .go{font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;color:var(--terra);display:inline-flex;gap:8px;transition:gap .3s var(--ease)}
.vcard:hover .go{gap:14px}
@media(max-width:820px){.vcard .go{font-size:.82rem}}
/* Affiche de la conference : format d'origine conserve, jamais recadree
(toute decoupe paysage traverse le titre compose dans l'image). */
.ocard .im.contain.affiche{background:var(--bg-2)}
.ocard .im.contain.affiche img{padding:14px;object-fit:contain}
/* L'affiche se cale sur la marge de la page (le reste de la colonne hangeait
48px plus a gauche) et partage sa ligne d'entree avec le texte. */
.split .col-media.ar-affiche{aspect-ratio:3/4;width:min(100%,380px);margin-inline:0;align-self:start}
.split .col-media.ar-affiche img{object-fit:cover}
.split .col-media.ar-3-2{align-self:start}
@media(max-width:980px){
.split .col-media.ar-affiche{width:min(100%,420px)}
}
/* le chapo garde sa composition hors de .prose (ici dans une colonne de .split) */
.split .col-text p.stand{
font-family:var(--serif);font-style:italic;
font-size:clamp(1.3rem,2.5vw,1.85rem);line-height:1.45;
color:var(--titre);margin:0 0 26px;max-width:none;
}
/* Barre sticky : tres petits ecrans, le bouton reste sur 1 ligne */
@media(max-width:360px){
.r-sticky-bar{gap:10px}
.r-sticky-bar .btn{padding:12px 14px;letter-spacing:.1em;white-space:nowrap}
.r-sticky-bar .px{font-size:.95rem}
}
/* --- Conférence complète (jauge des 95 places atteinte) ---------------
#checkout porte le cadre blanc et l'ombre du module Stripe : quand le
bloc « Complet » prend sa place, on rend le conteneur neutre, la DA
n'ayant pas d'ombres. */
.btn.is-complet{background:var(--bg-2);color:var(--brun);border-color:var(--line);cursor:default;pointer-events:none}
.pay-checkout #checkout.is-complet{background:transparent;box-shadow:none;border-radius:0;overflow:visible}
.pay-complet{border:1px solid var(--line);border-radius:12px;background:var(--bg-2);padding:56px 34px;text-align:center}
.pay-complet p{color:var(--ink);font-size:.95rem;margin:0 auto;max-width:40ch}
.pay-complet p.pay-complet__t{font-family:var(--serif);font-weight:500;font-size:2rem;line-height:1.15;color:var(--titre);margin:16px auto 14px;max-width:none}
.pay-complet a{text-decoration:underline}