/* ===== TEST : défilement écran par écran ===== */
html{scroll-snap-type:y mandatory;overscroll-behavior-y:none}
html.nosnap{scroll-snap-type:none}
/* --bar : hauteur des barres du navigateur. --xtra : marge de sécurité sous chaque écran,
   pour qu'aucune bande de l'écran suivant ne dépasse sous la barre de Safari */
:root{--bar:0px;--xtra:140px}
@supports (height:100lvh){:root{--bar:calc(100lvh - 100svh)}}
.snap{height:calc(100vh + var(--xtra));min-height:0;scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding:76px 0 calc(22px + var(--bar) + var(--xtra));position:relative}
@supports (height:100lvh){.snap{height:calc(100lvh + var(--xtra))}}
.ph.snap{justify-content:flex-end;padding-bottom:calc(30px + var(--bar) + var(--xtra))}
footer.snap{justify-content:center;padding-top:24px}
footer.snap .wrap{gap:24px!important}
.snap .anim{transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.snap:not(.here) .anim{opacity:0;transform:translateY(30px)}
.snap.here .anim{opacity:1;transform:none}
.snap.tall{height:auto;min-height:calc(100vh + var(--xtra));overflow:visible;justify-content:flex-start;scroll-snap-stop:normal}
.ph.snap .hand{max-width:24ch!important}
.ph.snap .wrap>.m:last-child{display:none!important}
@media (prefers-reduced-motion:reduce){.snap .anim{transition:none}}

[data-fit]{white-space:nowrap;display:block}

/* drapeau du Bénin : bande verte verticale, jaune en haut, rouge en bas */
.flag{display:grid!important;grid-template-columns:2fr 3fr;grid-template-rows:1fr 1fr;width:36px!important;height:24px!important;border-radius:3px;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.flag i:nth-child(1){grid-row:1/3}

/* ticket : pas d'arrondi au-dessus de la partie déchirée */
.paper:has(.zig){border-bottom-left-radius:0;border-bottom-right-radius:0}

/* écran centré (cadeaux solidaires) */
.centered .wrap{align-items:center;text-align:center}
.centered .wrap>.btn{align-self:center!important}
.centered .paper{align-self:stretch;text-align:left}

/* carrousels horizontaux */
.rail-x{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px var(--pad) 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.rail-x::-webkit-scrollbar{display:none}
.rail-x>*{flex:0 0 82%;max-width:420px;scroll-snap-align:center}
.projets .rail-x .card{min-height:300px;justify-content:flex-start}
.pdots{display:flex;gap:6px;margin-top:6px}.pdots i{width:8px;height:8px;border-radius:9px;background:var(--line);transition:all .3s}.pdots i.on{width:22px;background:var(--rust)}

/* étapes du voyage en cartes */
.tl.rail-x{margin:0 calc(-1 * var(--pad));flex-direction:row}
.tl.rail-x .rail,.tl.rail-x .fill{display:none}
.tl.rail-x>*{flex-basis:88%}
.tl.rail-x .st{flex-direction:column;gap:10px;padding:18px 18px 20px;border-radius:26px;background:var(--bg)}
.tl.rail-x .st .dot{display:none}
.tl.rail-x .st .body{opacity:1;transform:none}
.tl.rail-x .st:nth-of-type(3n+1){background:var(--tealSoft)}
.tl.rail-x .st:nth-of-type(3n+2){background:var(--sunSoft)}
.tl.rail-x .st:nth-of-type(3n+3){background:var(--roseSoft)}
.tl.rail-x .st .t{font-size:clamp(26px,7.4vw,32px)}
.tl.rail-x .st p{font-size:15px;line-height:1.42}
.tl.rail-x .st .note{font-size:21px}
.snap .wrap.stack:has(>.tl){gap:16px!important}

/* curseur des voyages : les 3 cartes occupent la même place, rien ne bouge */
.snap .modebar{display:none}
.mode-stack{display:grid}
.mode-stack>.mode-card{grid-area:1/1;padding:18px;gap:8px;animation:none}
.mode-stack>.mode-card[hidden]{display:flex!important;visibility:hidden}
.mode-stack>.mode-card>p{display:none}
.mode-stack .mode-card h3.d{font-size:clamp(24px,6.6vw,30px)!important}
.mode-stack .mode-card ul{gap:6px;padding-top:10px}
.mode-stack .mode-card li{font-size:14px;line-height:1.38}

/* carte postale plus courte */
.snap .paper.postcard{padding:16px 16px 18px!important;gap:10px!important}
.snap .paper.postcard .h{font-size:25px!important}

/* sur place : icônes */
.icard{flex-direction:row!important;align-items:flex-start;gap:14px!important}
.icard .ico{flex:0 0 44px;height:44px;border-radius:14px;background:rgba(255,255,255,.55);display:flex;align-items:center;justify-content:center;color:var(--rust)}
.icard>div{display:flex;flex-direction:column;gap:4px}

/* page Don : tout reste en place */
.amtbox{height:124px;display:flex;flex-direction:column;justify-content:flex-end}
.donslot{display:flex;flex-direction:column;gap:10px;overflow:hidden}
.donslot #items{margin-top:0!important;gap:8px!important}
.donslot .it{padding:12px 14px;border-radius:16px}
.donslot .it strong{font-size:16px!important}
.donslot .it .mute{font-size:13.5px!important;line-height:1.35!important}
#geste .amt{font-size:clamp(90px,27vw,150px)}

/* fenêtres */
.sheet{position:fixed;inset:0;z-index:200;background:var(--bg);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:calc(12px + env(safe-area-inset-top,0px)) 0 calc(36px + env(safe-area-inset-bottom,0px));transform:translateY(100%);transition:transform .28s cubic-bezier(.2,.7,.2,1)}
.sheet.in{transform:none}
.sheet-top{position:sticky;top:calc(-12px - env(safe-area-inset-top,0px));z-index:2;background:var(--bg);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;margin-bottom:10px;border-bottom:1px solid var(--line)}
.sheet-top .iconbtn{border-color:var(--line);color:var(--ink);background:transparent;flex-shrink:0}
.sheet-step{display:flex;flex-direction:column;gap:14px}
.sheet h2.d{font-size:clamp(40px,11vw,56px)}
.inp.err{border-color:var(--rust);box-shadow:0 0 0 3px rgba(178,60,28,.18)}
.linkbtn{background:none;border:0;padding:6px 0;color:inherit;font:inherit;font-weight:700;text-decoration:underline;cursor:pointer;align-self:flex-start}
@media (prefers-reduced-motion:reduce){.sheet{transition:none}}

/* points de navigation : fixes, discrets */
.sidedots{position:fixed;right:9px;top:50svh;transform:translateY(-50%);z-index:70;display:flex;flex-direction:column;gap:7px;pointer-events:none}
.sidedots i{display:block;width:5px;height:5px;border-radius:5px;background:#fff;opacity:.35;transition:opacity .3s,transform .3s}
.sidedots i.on{opacity:.9;transform:scale(1.5)}
.sidedots.ink i{background:var(--ink)}
.sheet-open .sidedots{display:none}
.testbadge{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 4px);transform:translateX(-50%);z-index:95;font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.12em;background:#241A14;color:#FBF3E6;padding:3px 9px;border-radius:99px;opacity:.6;pointer-events:none}