/* =====================================================================
   Les Cabanes de Marie — page d'accueil v2, « la porte vers la forêt »
   Le parcours : entrée → 1 l'histoire → 2 les cabanes (sommaire en citations + 4 cabanes)
                 → 3 le domaine → 4 le bain → un rappel d'avis → LA rupture (une seule)
                 → la réservation → tout le reste en bas (paniers, cave, activités, avis complets,
                 bons cadeaux, tarifs, infos).
   Complète assets/site.css (couleurs, police, en-tête, boutons, formulaires, pied de page).
   Règle d'or : le contenu part de la GAUCHE (marge normale), le grand vide est à DROITE. Aucune boîte,
   aucun arrondi. Seules les photos « plein cadre » (.ff) prennent toute la largeur.
   ===================================================================== */

/* ---------------------------------------------------------------- entrée : photo en plein cadre derrière le titre */
.hero{position:relative;overflow:hidden;min-height:100svh;display:flex;align-items:flex-end;background:var(--dark);color:var(--paper)}
.hero-fig{position:absolute;inset:0;margin:0}
.hero-fig picture{display:block;width:100%;height:100%}
.hero-fig img{width:100%;height:100%;object-fit:cover;object-position:62% 46%;animation:settle 3.6s var(--ease) both}
@keyframes settle{from{transform:scale(1.06)}to{transform:scale(1)}}
/* dégradé sombre en bas (et un voile léger à gauche, là où est le texte) : le texte reste lisible quelle que soit la photo.
   Contraste mesuré sur les pixels derrière chaque ligne : titre >= 4,8:1, petit texte >= 8:1. */
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,rgba(28,21,17,.84) 0%,rgba(28,21,17,.62) 30%,rgba(28,21,17,.30) 58%,rgba(28,21,17,.06) 80%,rgba(28,21,17,0) 92%),linear-gradient(to right,rgba(28,21,17,.52) 0%,rgba(28,21,17,.40) 38%,rgba(28,21,17,0) 70%)}
.hero-txt{position:relative;z-index:2;width:100%;padding:clamp(140px,26vh,300px) var(--pr) clamp(40px,8vh,88px) var(--pl)}
.hero h1{font-size:clamp(3.2rem,6.8vw,7.6rem);line-height:.92;letter-spacing:-.04em;margin:clamp(18px,3vh,32px) 0 0}
.hero h1 span{display:block}
.hero h1 b{color:inherit}
.hero .cta{margin-top:clamp(24px,4vh,40px);gap:16px 36px}
.hero .go:hover{color:var(--sage-lt)}
/* ---------------------------------------------------------------- 1. l'histoire */
.story{position:relative;overflow:hidden;padding-block:clamp(110px,19vh,250px) clamp(90px,15vh,200px)}
.story-grid{position:relative;z-index:1;margin:0 var(--pr) 0 var(--pl);display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(36px,5.4vw,96px);align-items:center}
.story h2{font-size:clamp(2.4rem,4.5vw,4.7rem);margin:24px 0 clamp(26px,4vh,46px)}
.story p{max-width:40ch}
.story p+p{margin-top:1.1em}
.story .btn{margin-top:clamp(28px,5vh,46px)}
.story-fig{overflow:hidden;background:var(--paper-2);margin:0}
.story-fig img{width:100%;height:auto}

/* ---------------------------------------------------------------- 2. les cabanes : le sommaire (un écran, quatre citations) */
.som{position:relative;overflow:hidden;background:var(--earth-deep);color:var(--paper);min-height:100svh;display:flex;align-items:center;padding-block:clamp(88px,13vh,150px)}
.som-in{position:relative;z-index:1;padding:0 var(--pr) 0 var(--pl);width:100%}
.som h2{font-size:clamp(1.5rem,2.3vw,2.2rem);margin:16px 0 10px;line-height:1.05;letter-spacing:-.02em}
.som h2 br{display:none}
.som .intro{max-width:58ch;font-size:clamp(1rem,1.15vw,1.08rem);color:rgba(239,232,216,.86)}
.som-list{margin-top:clamp(26px,5vh,52px);border-top:1px solid var(--line-lt)}
.som-item{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:10px 24px;padding:clamp(16px,2.6vh,30px) 0;border-bottom:1px solid var(--line-lt);opacity:.88;transition:opacity .7s var(--ease),transform .8s var(--ease)}
.som-q{display:block;font-weight:800;font-size:clamp(1.6rem,3.2vw,3.3rem);line-height:1.03;letter-spacing:-.035em;text-wrap:balance}
.som-n{display:block;margin-top:10px;font-weight:700;font-size:.76rem;letter-spacing:.17em;text-transform:uppercase;color:rgba(239,232,216,.8)}
.som-item .ar{width:clamp(1.5rem,2.2vw,2.1rem);height:clamp(1.5rem,2.2vw,2.1rem);color:var(--sage-lt);margin-bottom:.2em;transition:transform .8s var(--ease)}
.som-list:hover .som-item,.som-list:focus-within .som-item{opacity:.72}
.som-list .som-item:hover,.som-list .som-item:focus-visible{opacity:1;transform:translateX(16px)}
.som-item:hover .ar,.som-item:focus-visible .ar{transform:translateX(10px)}
@media(max-width:960px){.som-list .som-item:hover,.som-list .som-item:focus-visible{transform:none}}

/* ---------------------------------------------------------------- calendrier d'une cabane : un volet qui monte du bas (jamais quatre calendriers dépliés) */
.cal-scrim{position:fixed;inset:0;z-index:140;background:rgba(28,21,17,.5);opacity:0;visibility:hidden;transition:opacity .6s var(--ease),visibility 0s .6s}
.cal-scrim.open{opacity:1;visibility:visible;transition:opacity .6s var(--ease)}
.cal-panel{position:fixed;left:0;right:0;bottom:0;z-index:150;max-height:min(90svh,860px);display:flex;flex-direction:column;background:var(--paper);border-top:2px solid var(--ink);transform:translateY(102%);visibility:hidden;transition:transform .8s var(--ease),visibility 0s .8s}
.cal-panel.open{transform:none;visibility:visible;transition:transform .8s var(--ease)}
.cal-head{flex:0 0 auto;padding:22px var(--pr) 8px var(--pl);display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.cal-head h2{font-size:clamp(1.7rem,3vw,2.6rem);margin-top:12px;line-height:1}
.cal-x{flex:0 0 auto;width:48px;height:48px;margin:-6px -10px 0 0;font-size:2rem;line-height:1;display:grid;place-items:center}
.cal-x:hover{color:var(--earth)}
.cal-body{padding:0 var(--pr) 28px var(--pl);overflow-y:auto;overscroll-behavior:contain}
.cal-body iframe{display:block;width:100%;border:0;height:380px;background:var(--paper)}
.cal-foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:14px}
.cal-wait{padding:36px 0;color:var(--ink-soft);font-weight:700}
body.cal-open{overflow:hidden}

/* ---------------------------------------------------------------- 3. le domaine : un souffle léger */
.dom{position:relative;overflow:hidden;padding-block:clamp(120px,22vh,280px)}
/* le texte à gauche, les deux petites photos à droite (elles remplissent la zone), puis la grande photo en plein cadre */
.dom-top{position:relative;z-index:1;padding:0 var(--pr) 0 var(--pl);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,88px);align-items:start}
.dom h2{font-size:clamp(2.4rem,4.7vw,4.9rem)}
.dom .lead{margin-top:clamp(22px,3.6vh,34px);font-size:clamp(1.12rem,1.5vw,1.3rem);max-width:34ch;font-weight:700;letter-spacing:-.01em;line-height:1.4}
.dom-animals{margin-top:clamp(22px,3.6vh,34px)}
.dom-animals li{font-size:clamp(1.05rem,1.3vw,1.2rem);line-height:1.5;padding:3px 0}
.dom .ff{position:relative;z-index:1;margin-top:clamp(52px,10vh,110px)}
.dom-pair{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1fr);gap:clamp(16px,2.4vw,36px);align-items:start}
.dom-pair figure{margin:0;overflow:hidden;background:var(--paper-2)}
.dom-pair figure+figure{margin-top:clamp(36px,7vw,110px)}
.dom-pair img{width:100%;height:auto}

/* ---------------------------------------------------------------- 4. le bain : un lieu offert à tous (ni prix, ni dates) */
.spa{position:relative;background:var(--earth);color:var(--paper);padding-block:clamp(110px,19vh,240px)}
.spa-grid{padding:0 var(--pr) 0 var(--pl);display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(36px,5.2vw,96px);align-items:center}
/* la photo est recadrée vers le bas : le bain en bois est le sujet, les arbres ne sont que le cadre */
.spa-fig{margin:0;overflow:hidden;background:var(--earth-deep);aspect-ratio:6/7}
.spa-fig img{width:100%;height:100%;object-fit:cover;object-position:50% 95%}
.spa h2{font-size:clamp(2.4rem,4.6vw,4.8rem);margin:24px 0 clamp(20px,3.4vh,32px)}
.spa .lead{font-weight:700;font-size:clamp(1.15rem,1.55vw,1.4rem);line-height:1.38;letter-spacing:-.01em;max-width:30ch}
.flist{margin-top:clamp(34px,6vh,64px);padding-left:clamp(16px,2.2vw,28px);border-left:1px solid var(--line-lt);max-width:44ch}
.flist li{padding:9px 0;font-size:.95rem;line-height:1.55;color:rgba(239,232,216,.92)}
.flist li b{color:var(--paper)}

/* ---------------------------------------------------------------- les avis (1/2) : un simple rappel, juste avant la rupture */
.rev{padding-block:clamp(52px,8vh,92px)}
.rev-in{padding:0 var(--pr) 0 var(--pl);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 40px;align-items:center}
.rev-line{grid-column:1;grid-row:1;display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 16px;margin:0}
.rev-n{font-weight:800;font-size:clamp(2.4rem,3.6vw,3.4rem);line-height:.9;letter-spacing:-.05em}
.rev-st{color:var(--earth);font-size:1rem;letter-spacing:.1em}
.rev-t{font-weight:700;font-size:1rem}
.rev-q{grid-column:1;grid-row:2;margin:0;color:var(--ink-soft);max-width:62ch}
.rev-q .who{font-weight:700;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.rev .go{grid-column:2;grid-row:1 / span 2}

/* ---------------------------------------------------------------- LA rupture : un seul écran sombre dans tout le site */
.rupt{background:var(--dark);color:var(--paper)}
.rupt-stick{min-height:calc(100svh - var(--hh));display:flex;align-items:center;padding:60px var(--pr) 60px var(--pl)}
.rupt-big{font-weight:800;font-size:clamp(2.2rem,5.4vw,5.8rem);line-height:1.02;letter-spacing:-.04em;max-width:15ch;text-wrap:balance}
.js .rupt-run{height:230svh}
.js .rupt-stick{position:sticky;top:var(--hh);height:calc(100svh - var(--hh));min-height:0}
.js .rupt-big{opacity:var(--o,0);transform:translateY(var(--y,28px));will-change:opacity,transform}
/* le même fond sombre continue : la phrase revient, plus petite, puis la flèche qui mène aux dates */
.rupt-after{padding:clamp(100px,22vh,260px) var(--pr) clamp(110px,24vh,280px) var(--pl)}
.rupt-small{font-weight:500;font-size:clamp(1rem,1.3vw,1.2rem);line-height:1.5;color:rgba(239,232,216,.66);max-width:34ch}
.rupt-go{display:inline-block;margin-top:clamp(34px,6vh,64px);color:var(--paper)}
.rupt-go span{display:block;max-width:19ch;font-weight:800;font-size:clamp(1.8rem,3.7vw,3.5rem);line-height:1.04;letter-spacing:-.035em;transition:color .5s var(--ease)}
.rupt-go .down{display:block;width:clamp(56px,5.6vw,84px);height:clamp(56px,5.6vw,84px);margin-top:clamp(22px,4vh,40px);fill:none;stroke:var(--sage-lt);stroke-width:2.6;stroke-linecap:square;transition:transform .7s var(--ease),stroke .5s var(--ease);animation:bob 3.4s ease-in-out infinite}
.rupt-go:hover .down,.rupt-go:focus-visible .down{transform:translateY(16px);stroke:var(--paper)}
.rupt-go:hover span{color:var(--sage-lt)}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 10px}}

/* ---------------------------------------------------------------- la réservation (la flèche mène ici) */
.book{position:relative;overflow:hidden;background:var(--paper-2);padding-top:clamp(88px,15vh,190px)}
.book-in{position:relative;z-index:1;padding:0 var(--pr) 0 var(--pl)}
.book h2{font-size:clamp(2.2rem,4.2vw,4.2rem);margin:20px 0 clamp(28px,5vh,52px);max-width:16ch}
.planyo-slot{background:var(--paper);min-height:120px;overflow:hidden}
.planyo-slot iframe{display:block;width:100%;border:0}
#calp_all{height:240px}
@media(min-width:761px){#calp_all{min-width:680px}}
@media(max-width:760px){#calp_all{height:376px}}
.avail-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* « Réservez votre nuit » et la liste d'attente côte à côte, chacune pleine largeur de sa colonne (jamais écrasée) */
.book-duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:start;margin-top:clamp(64px,11vh,130px);padding-bottom:clamp(88px,15vh,190px)}
.resa h3{font-size:clamp(1.8rem,3vw,2.6rem);line-height:1}
.resa p{max-width:52ch;margin:14px 0 28px;color:var(--ink-soft)}
.resa-list{border-top:2px solid var(--ink)}
.resa-list a{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:22px 0;border-bottom:1px solid var(--line);font-weight:800;font-size:clamp(1.25rem,2.2vw,1.8rem);letter-spacing:-.025em;line-height:1.1;transition:padding .6s var(--ease),color .4s}
.resa-list small{display:block;margin-top:5px;font-weight:500;font-size:.88rem;letter-spacing:0;color:var(--ink-soft)}
.resa-list .ar{width:1.3rem;height:1.3rem;flex:0 0 auto;color:var(--sage);transition:transform .6s var(--ease)}
.resa-list a:hover{padding-left:14px;color:var(--earth)}
.resa-list a:hover .ar{transform:translateX(8px)}
.resa .note{margin:22px 0 0;font-size:.92rem;color:var(--ink-soft);max-width:60ch}
.alerte h2{font-size:clamp(1.8rem,3.2vw,2.8rem);margin:0 0 10px;max-width:none}
.al-intro{max-width:56ch;margin-bottom:28px;color:var(--ink-soft)}
.al-row{display:flex;gap:6px 24px;flex-wrap:wrap}
.al-dates .field{flex:1 1 100%;min-width:0}
.al-cabs{display:flex;flex-wrap:wrap;gap:2px 24px;margin-top:6px}
.al-cabs label{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin:0;font-weight:500;font-size:1rem;letter-spacing:0;text-transform:none;color:var(--ink);cursor:pointer}
.al-form .btn{margin-top:10px}
.al-fine{font-size:.88rem;color:var(--ink-soft);margin-top:16px}
.al-fine a{text-decoration:underline 1.5px var(--earth);text-underline-offset:.25em}
.al-done{display:none;padding:24px 0}
.al-done h2{font-size:2rem}
@media(max-width:620px){.al-form .btn{width:100%}}
/* le formulaire d'alerte prend toute la largeur disponible, quel que soit le navigateur : une piste de grille « 1fr » peut
   grandir avec son contenu (minimum = contenu), « minmax(0,1fr) » non ; les champs (dont les dates sur Safari) ne debordent pas */
.alerte,.al-form{width:100%;min-width:0}
.al-form input:not([type=checkbox]){min-width:0;max-width:100%;display:block}
.alerte h2,.al-intro,.al-fine{overflow-wrap:break-word;hyphens:manual}

/* ---------------------------------------------------------------- le reste, en bas : reprend le contenu d'avant, sans boîtes */
.low-sec{padding-block:clamp(88px,14vh,180px)}
.nb{white-space:nowrap}
.low-in{padding:0 var(--pr) 0 var(--pl)}
.low-sec .head{max-width:60ch}
.low-sec h2{font-size:clamp(2.2rem,4.2vw,4rem);margin:18px 0 0}
.low-sec .head p{margin-top:1em}
.bg2{background:var(--paper-2)}

/* paniers : une ligne par panier */
.panier-grid{margin-top:clamp(36px,6vh,64px);border-top:2px solid var(--ink)}
.panier-card{display:grid;grid-template-columns:minmax(120px,.3fr) minmax(0,.7fr);gap:6px 28px;padding:26px 0;border-bottom:1px solid var(--line)}
.pc-tag{grid-row:1/span 2;font-weight:700;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--earth);padding-top:.5em}
.panier-card h3{font-size:clamp(1.4rem,2.2vw,1.9rem);line-height:1.1}
.panier-card p{max-width:56ch}

/* boissons : texte puis liste de prix */
.boi-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(36px,5vw,84px);align-items:start}
.boi-grid .lead{max-width:44ch;margin-top:1.1em}
.pl-note{margin-top:1.2em;font-size:.92rem;color:var(--ink-soft);max-width:46ch}
.price-list{border-top:2px solid var(--ink)}
.pl-row{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:15px 0;border-bottom:1px solid var(--line)}
.pl-row b{font-weight:800;font-size:1.2rem;letter-spacing:-.02em;white-space:nowrap}

/* activités */
.bird{display:block;width:clamp(56px,6vw,80px);margin-bottom:18px;color:var(--earth)}
.act-feature{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center;margin-top:clamp(40px,7vh,72px)}
.act-photo{overflow:hidden;background:var(--paper-2)}
.act-photo img{width:100%;height:auto}
.act-feature h3{font-size:clamp(1.8rem,3.2vw,2.8rem);margin-bottom:.5em;line-height:1.02}
.act-feature p{max-width:46ch;margin-bottom:24px}
.act-list{margin-top:clamp(40px,7vh,72px);border-top:2px solid var(--ink)}
.act-card{display:grid;grid-template-columns:minmax(120px,.3fr) minmax(0,.7fr);gap:6px 28px;padding:26px 0;border-bottom:1px solid var(--line)}
.act-card .dist{grid-row:1/span 2;font-weight:800;font-size:clamp(1.3rem,2.2vw,1.9rem);letter-spacing:-.03em;line-height:1.1;color:var(--earth)}
.act-card h4{font-weight:800;font-size:1.3rem;letter-spacing:-.02em;line-height:1.15}
.act-card ul{columns:2;column-gap:32px}
.act-card li{padding:3px 0;break-inside:avoid;font-size:.97rem}
.act-card li a{text-decoration:underline 1.5px var(--line);text-underline-offset:.28em;transition:text-decoration-color .4s}
.act-card li a:hover{text-decoration-color:var(--sage)}

/* les avis (2/2) : la section complète, en bas */
.avis-full .score{display:flex;align-items:center;gap:clamp(18px,2.6vw,36px)}
.avis-full .big{font-weight:800;font-size:clamp(3.4rem,6vw,5.6rem);line-height:.9;letter-spacing:-.05em}
.avis-full .gl{font-weight:800;font-size:1.2rem;letter-spacing:-.01em}
.avis-full .v small{display:block;margin-top:6px;font-size:.92rem;color:var(--ink-soft)}
.avis-full .v small b{color:var(--ink)}
.avis-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px clamp(20px,3vw,44px);margin-top:clamp(28px,5vh,48px)}
.avis-q p{font-size:.97rem;line-height:1.55}
.avis-q .who{margin-top:10px;font-weight:700;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.avis-full .go{margin-top:clamp(26px,4vh,40px)}
.note-tag{margin-top:22px;font-size:.84rem;color:var(--ink-soft)}

/* bons cadeaux */
.gift-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:clamp(36px,6vh,60px) 0 28px;border-top:2px solid var(--ink)}
.gift-card{padding:26px 28px 0 0}
.gift-card+.gift-card{padding-left:28px;border-left:1px solid var(--line)}
.gift-card h3{font-size:clamp(1.3rem,2vw,1.7rem);line-height:1.1;margin-bottom:10px}
.gift-card p{font-size:.97rem;max-width:34ch}
.gift .how{max-width:62ch;margin-bottom:26px}

/* tarifs */
.tar-cabins{margin-top:clamp(36px,6vh,60px);border-top:2px solid var(--ink);padding-top:26px}
.tc-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 22px}
.tc-price b{font-weight:800;font-size:clamp(3.4rem,7vw,6rem);line-height:.9;letter-spacing:-.05em}
.tc-price span{font-weight:700;font-size:1.05rem}
.tc-list{display:flex;flex-wrap:wrap;gap:6px 26px;margin:20px 0 4px}
.tc-list span{display:inline-flex;align-items:center;gap:.7em;font-weight:700;font-size:1rem}
.tc-list span::before{content:"";width:6px;height:6px;background:var(--sage);flex:0 0 6px}
.tc-note{margin-top:14px;font-size:.95rem;color:var(--ink-soft);max-width:60ch}
.tar-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:clamp(36px,6vh,60px);border-top:1px solid var(--line)}
.tar-card{padding:28px 28px 0 0}
.tar-card+.tar-card{padding-left:28px;border-left:1px solid var(--line)}
.tar-tag{font-weight:700;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--earth)}
.tar-amt{display:flex;align-items:baseline;gap:10px;margin:10px 0;font-weight:800;font-size:clamp(2.6rem,4.4vw,3.8rem);line-height:1;letter-spacing:-.045em}
.tar-amt small{font-weight:500;font-size:.92rem;letter-spacing:0;color:var(--ink-soft)}
.tar-card p{font-size:.97rem;max-width:44ch}

/* infos pratiques */
.ilist{margin-top:clamp(30px,5vh,52px);border-top:2px solid var(--ink)}
.ilist li{display:flex;gap:18px 28px;padding:18px 0;border-bottom:1px solid var(--line);align-items:baseline;flex-wrap:wrap}
.ilist .k{flex:0 0 clamp(120px,16vw,200px);font-weight:700;font-size:.78rem;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-soft)}
.ilist .v{flex:1 1 280px;min-width:0}

/* ---------------------------------------------------------------- téléphone et tablette (rien ne change : pleine largeur, marges normales) */
@media(max-width:960px){
  /* entrée sur téléphone : la photo couvre tout l'écran (100svh, cover, la cabane bien visible), titre et boutons posés dessus avec un dégradé léger */
  .hero{min-height:100svh}
  .hero-fig img{object-position:40% 50%}
  .hero::after{background:linear-gradient(to top,rgba(28,21,17,.84) 0%,rgba(28,21,17,.66) 22%,rgba(28,21,17,.42) 42%,rgba(28,21,17,.16) 60%,rgba(28,21,17,0) 76%)}
  .hero-txt{padding:calc(var(--hh) + 140px) var(--pr) calc(env(safe-area-inset-bottom,0px) + 88px) var(--pl)}
  .story-grid,.dom-top,.spa-grid,.boi-grid,.act-feature,.book-duo{grid-template-columns:minmax(0,1fr)}
  .som h2 br{display:inline}
  .story-grid{margin-inline:0}
  .story-txt{padding-inline:var(--gut)}
  .story-fig{margin-top:8px}
  .som{min-height:0;padding-block:36px 52px}
  .som .intro{font-size:.96rem}
  .som-list{margin-top:22px}
  .som-item{grid-template-columns:minmax(0,1fr) auto;padding:14px 0}
  .som-q{font-size:clamp(1.35rem,6.4vw,2rem)}
  .som-n{margin-top:8px}
  .story,.dom,.spa{padding-block:clamp(72px,11vh,130px)}
  .low-sec{padding-block:clamp(64px,10vh,110px)}
  .book{padding-top:clamp(64px,10vh,110px)}
  .dom-top{gap:36px}
  .dom-pair{grid-template-columns:1fr;gap:12px}
  .dom-pair figure+figure{margin-top:0}
  .book-duo{gap:56px}
  .spa-fig{margin-bottom:8px}
  .rev{padding-block:clamp(40px,7vh,64px)}
  .rev-in{grid-template-columns:1fr}
  .rev .go{grid-column:1;grid-row:auto;justify-self:start;margin-top:8px}
  .avis-grid{grid-template-columns:1fr}
  .panier-card,.act-card{grid-template-columns:1fr}
  .pc-tag,.act-card .dist{grid-row:auto}
  .act-card ul{columns:1}
  .gift-grid,.tar-grid{grid-template-columns:1fr}
  .gift-card,.gift-card+.gift-card,.tar-card,.tar-card+.tar-card{padding:22px 0 4px;border-left:0;border-top:1px solid var(--line)}
  .gift-card:first-child,.tar-card:first-child{border-top:0}
  .cal-panel{max-height:92svh}
}

/* entre téléphone et grand écran : trois colonnes seraient trop étroites, on passe à deux (jamais de bloc de texte sous 20rem) */
@media(min-width:961px) and (max-width:1180px){
  .avis-grid,.gift-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gift-card:nth-child(3){padding-left:0;border-left:0}
}

/* écrans peu hauts (portables, petits téléphones) : le sommaire doit TOUJOURS tenir en un écran, les quatre citations visibles */
@media(min-width:961px) and (max-height:899px){
  .som{padding-block:24px 36px}
  .som-list{margin-top:22px}
  .som-item{padding:12px 0}
  .som-q{font-size:clamp(1.5rem,2.6vw,2.4rem)}
  .som-n{margin-top:6px}
  .som .intro{font-size:.95rem}
}
@media(max-width:960px) and (max-height:760px){
  .som{padding-block:20px 32px}
  .som h2{font-size:1.25rem;margin:12px 0 8px}
  .som .intro{font-size:.9rem;line-height:1.4}
  .som-list{margin-top:14px}
  .som-item{padding:10px 0}
  .som-q{font-size:clamp(1.25rem,5.4vw,1.6rem)}
  .som-n{margin-top:6px}
}

/* ---------------------------------------------------------------- mouvement réduit / sans JavaScript : la rupture reste un écran fixe et lisible */
@media(prefers-reduced-motion:reduce){
  .js .rupt-run{height:auto}
  .js .rupt-stick{position:static;height:auto;min-height:calc(100svh - var(--hh))}
  .js .rupt-big{opacity:1;transform:none}
  .rupt-go .down{animation:none}
}