/* Thermique — the invisible air made visible */
:root{
  --ink:#0d1b33;
  --ink-2:#2a3c5e;
  --cream:#fff6e8;
  --wing:#ff5a2c;
  --warm:#ffb25a;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-in:cubic-bezier(.55,0,.75,0);
  --ease-inout:cubic-bezier(.7,0,.25,1);
  --ease-spring:cubic-bezier(.34,1.4,.64,1);
  --land:cubic-bezier(.17,.4,.02,.99);
  --tape:76px;
  --rpad:var(--tape);
  --gut:clamp(20px,4vw,64px);
  --disp:'Sofia Sans Extra Condensed',Impact,sans-serif;
  --body:var(--disp);
  --fg:var(--ink);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%}
body{margin:0;background:#5fa3e0;color:var(--fg);font:400 22px/1.4 var(--body);overflow-x:hidden;font-synthesis:none}
a{color:inherit}
:focus-visible{outline:2px solid var(--wing);outline-offset:4px;border-radius:2px}
::selection{background:var(--wing);color:#fff}

/* ---------- sky ---------- */
.sky{position:fixed;inset:0;z-index:0;pointer-events:none}
.sky-l{position:absolute;inset:0;opacity:0;will-change:opacity}
.sky-l[data-l="0"]{opacity:1;background:linear-gradient(#3d88d6 0%,#62a6e2 48%,#d8ecfb 100%)}
/* tuned 2026-11-06 for contrast: ink text ≥ 4.8:1 down to 460 m, cream ≥ 4.8:1 below 390 m (the glow stays in the bottom 18 %) */
.sky-l[data-l="1"]{background:linear-gradient(#4a86c8 0%,#84b4de 50%,#eef0ea 100%)}
.sky-l[data-l="2"]{background:linear-gradient(#5a80b8 0%,#98b4d2 50%,#f4e0c2 100%)}
.sky-l[data-l="3"]{background:linear-gradient(#6a7fae 0%,#a8a6c2 52%,#f6cba4 100%)}
.sky-l[data-l="4"]{background:linear-gradient(#141c40 0%,#34305e 50%,#4f3a66 82%,#b8644f 100%)}
.sun{position:absolute;left:12%;top:0;width:34vmax;height:34vmax;margin:-17vmax 0 0 -17vmax;border-radius:50%;
  background:radial-gradient(circle,rgba(255,252,236,.95) 0 3.5%,rgba(255,236,190,.35) 7%,rgba(255,214,150,.12) 22%,rgba(255,200,140,0) 50%);
  will-change:transform}
#air{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}

/* ---------- logo / loader ---------- */
.logo{position:fixed;left:var(--gut);top:18px;z-index:30;display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--fg);transform-origin:0 0;will-change:transform;transition:color .6s,translate .45s var(--ease-out),opacity .35s var(--ease-out)}
.tuck .logo{translate:0 -140%;opacity:0;pointer-events:none}
.tuck .son{translate:0 160%;opacity:0;pointer-events:none}
.sock{width:84px;height:36px;overflow:visible}
.sock .seg{stroke:currentColor;stroke-width:1.4;stroke-linejoin:round}
.sock .ring{fill:none;stroke:currentColor;stroke-width:2.2}
.word{font:800 26px/1 var(--disp);letter-spacing:.06em;display:flex}
.word span{display:inline-block}
.veil{position:fixed;inset:0;z-index:25;background:linear-gradient(#3d88d6,#62a6e2 48%,#d8ecfb);opacity:0;pointer-events:none;transition:opacity .7s var(--ease-in)}
.is-loading .veil{opacity:.0}
.is-loading main,.is-loading .alti,.is-loading .son,.is-loading .wing{opacity:0}
main,.alti,.son{transition:opacity .9s var(--ease-out)}
.is-loading .word span{opacity:0;transform:translateX(-28px) rotate(-8deg)}
.word span{transition:opacity .45s var(--ease-out),transform .6s var(--ease-spring)}

/* ---------- wing ---------- */
.wing{position:fixed;left:0;top:0;z-index:20;width:128px;height:92px;margin:-46px 0 0 -64px;pointer-events:none;will-change:transform;transition:opacity .5s var(--ease-out)}
.wing svg{width:100%;height:100%;overflow:visible}
.wing.off{opacity:0}

/* ---------- altimeter tape (menu) ---------- */
.alti{position:fixed;top:0;right:0;bottom:0;width:var(--tape);z-index:22;pointer-events:none;color:var(--fg);transition:color .6s}
.tape{position:absolute;right:0;top:50%;width:100%;will-change:transform}
.ticks{position:absolute;right:0;top:0;width:22px}
.ticks i{position:absolute;right:0;height:1px;width:8px;background:currentColor;opacity:.5}
.ticks i.big{width:16px;opacity:.85}
.ticks b{position:absolute;right:20px;font:600 11px/1 var(--disp);letter-spacing:.06em;transform:translateY(-50%);opacity:.75;font-variant-numeric:tabular-nums}
.marks{list-style:none;margin:0;padding:0}
.marks li{position:absolute;right:84px;transform:translateY(-50%)}
.marks li::after{content:"";position:absolute;right:-40px;top:50%;width:38px;opacity:.5;height:1px;background:currentColor}
.marks a{pointer-events:auto;display:block;font:600 12px/1 var(--disp);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;padding:6px 8px;white-space:nowrap;opacity:0;background:var(--ink);color:var(--cream);transition:opacity .2s,transform .2s var(--ease-spring);position:relative}
.marks a.here{opacity:1}
.alti:hover .marks a{opacity:.85}
.marks a:hover{opacity:1;transform:translateX(-4px)}
.read{position:absolute;right:0;top:50%;transform:translateY(-50%);width:100%;padding:8px 8px 8px 10px;background:var(--ink);color:var(--cream);border:0;font:inherit;text-align:right;cursor:pointer;pointer-events:auto;display:grid;grid-template-columns:auto auto;align-items:baseline;justify-content:end;column-gap:2px;clip-path:polygon(10px 0,100% 0,100% 100%,10px 100%,0 50%)}
.read b{font:700 24px/1 var(--disp);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.read i{font:500 12px/1 var(--disp);font-style:normal;opacity:.7}
.vario-n,.clock{grid-column:1/-1;text-align:right;font:600 12px/1.25 var(--disp);letter-spacing:.06em;font-variant-numeric:tabular-nums}
.vario-n{color:#9fd0ff}
.vario-n.up{color:var(--warm)}
.clock{opacity:.65}
.menu-t{grid-column:1/-1;text-align:right;margin-top:4px;padding-top:4px;border-top:1px solid rgba(255,246,232,.3);font:700 10px/1 var(--disp);letter-spacing:.2em;text-transform:uppercase;color:var(--warm)}
.read:hover .menu-t,.read[aria-expanded="true"] .menu-t{color:var(--cream)}
.read:focus-visible{outline-offset:2px}
.alti-list{position:absolute;right:calc(100% + 8px);top:50%;transform:translateY(-50%);margin:0;padding:8px 0;list-style:none;min-width:210px;background:var(--ink);color:var(--cream);pointer-events:auto;animation:alti-in .35s var(--ease-out)}
@keyframes alti-in{from{opacity:0;translate:10px 0}}
.alti-list a{display:flex;align-items:baseline;gap:14px;padding:11px 18px 11px 16px;font:600 16px/1 var(--disp);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;position:relative}
.alti-list b{min-width:3.4em;text-align:right;font-weight:700;font-variant-numeric:tabular-nums;opacity:.55;letter-spacing:.04em}
.alti-list a:hover,.alti-list a:focus-visible{background:rgba(255,246,232,.1)}
.alti-list a:focus-visible{outline-offset:-2px}
.alti-list a[aria-current]{color:var(--warm)}
.alti-list a[aria-current]::before{content:"";position:absolute;left:0;top:50%;width:8px;height:2px;background:var(--warm)}

/* ---------- sound ---------- */
.son{position:fixed;left:var(--gut);bottom:18px;z-index:22;display:flex;align-items:center;gap:8px;border:1px solid currentColor;background:transparent;color:var(--fg);font:600 14px/1 var(--disp);letter-spacing:.16em;text-transform:uppercase;padding:8px 12px 8px 10px;cursor:pointer;border-radius:0;transition:background .15s,color .15s,translate .45s var(--ease-out),opacity .35s var(--ease-out)}
.son:hover{background:rgba(255,255,255,.18)}
.bars{display:flex;align-items:flex-end;gap:2px;height:14px}
.bars i{width:3px;background:currentColor;height:4px;transition:height .2s}
.son[aria-pressed="true"] .bars i:nth-child(1){height:5px}.son[aria-pressed="true"] .bars i:nth-child(2){height:9px}
.son[aria-pressed="true"] .bars i:nth-child(3){height:12px}.son[aria-pressed="true"] .bars i:nth-child(4){height:14px}
.son[aria-pressed="false"] .son-t::after{content:" · coupé";opacity:.6}

/* ---------- layout ---------- */
main{position:relative;z-index:10;padding-right:var(--rpad)}
@media (min-width:1100px){:root{--rpad:calc(var(--tape) + 100px)}}
section{position:relative}
.h2{font:800 clamp(64px,11vw,190px)/.82 var(--disp);letter-spacing:-.01em;margin:0;text-transform:uppercase}
.h2 span{display:inline-block}
.sub{font:400 clamp(24px,2vw,34px)/1.25 var(--body);margin:.6em 0 0}

/* ---------- hero ---------- */
.hero{min-height:100vh;min-height:100svh;padding:110px var(--gut) 70px;display:grid;grid-template-columns:minmax(0,1fr);align-content:end;overflow:visible}
.hero-where{font:600 19px/1 var(--disp);letter-spacing:.03em;margin:0 0 1vh;opacity:.85}
.hero-where span{opacity:.5;margin:0 .3em}
.title{margin:0 0 0 -.04em;font:900 min(23vw,40vh)/.78 var(--disp);letter-spacing:-.015em;display:flex;white-space:nowrap;color:var(--ink)}
.title .l{display:inline-block;will-change:transform}
.title .l>span{display:inline-block;transform:translateY(0);transition:transform 1.2s var(--land),opacity .8s var(--ease-out)}
.is-loading .title .l>span{transform:translateY(.5em);opacity:0}
.hero-txt{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:24px 6vw;margin-top:4vh;max-width:1100px}
.lede{font:400 clamp(32px,3vw,44px)/1.08 var(--body);margin:0}
.hero-txt p{margin:0}
.acts{grid-column:2;display:flex;flex-wrap:wrap;gap:12px;margin-top:6px!important}
.go{display:inline-flex;align-items:center;gap:12px;padding:14px 18px;background:var(--wing);color:var(--ink);text-decoration:none;font:700 17px/1 var(--disp);letter-spacing:.14em;text-transform:uppercase;position:relative;overflow:hidden;transition:transform .2s var(--ease-spring)}
.go svg{width:22px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6;transition:transform .3s var(--ease-spring)}
.go::before{content:"";position:absolute;inset:0;background:var(--ink);transform:translateY(101%);transition:transform .35s var(--ease-out)}
.go>*{position:relative}
.go:hover::before,.go:focus-visible::before{transform:none}
.go:hover svg{transform:translateX(5px)}
.go:hover,.go:focus-visible{color:var(--cream)}
.go:active{transform:scale(.97)}
.go.ghost{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 1px currentColor}
.go.ghost::before{background:var(--wing)}
.go.ghost:hover,.go.ghost:focus-visible{color:var(--ink)}
/* the one goal: book a baptême */
.hero-p{display:grid;gap:.7em}
.offer b{font-weight:500;background:linear-gradient(var(--wing),var(--wing)) 0 100%/100% 2px no-repeat}
.acts.in{margin:1.6em 0 1.2em!important}
.go.warm{background:var(--wing);color:var(--ink);transition:transform .2s var(--ease-spring),color .2s}
.go.warm:hover,.go.warm:focus-visible{color:var(--cream)}
.go.warm::before{background:var(--ink)}
.goal{position:fixed;right:calc(var(--tape) + 14px);bottom:18px;z-index:24;display:inline-flex;align-items:center;gap:10px;padding:11px 14px;background:var(--wing);color:var(--ink);text-decoration:none;font:700 15px/1 var(--disp);letter-spacing:.14em;text-transform:uppercase;box-shadow:0 6px 22px rgba(13,27,51,.22);transition:translate .45s var(--ease-out),opacity .35s var(--ease-out),background .15s}
.goal svg{width:20px;height:11px;fill:none;stroke:currentColor;stroke-width:1.6;transition:transform .3s var(--ease-spring)}
.goal:hover,.goal:focus-visible{background:var(--ink);color:var(--cream)}.goal:hover svg{transform:translateX(4px)}
.goal-off .goal,.is-loading .goal{translate:0 160%;opacity:0;pointer-events:none}
.alti-list .goal-li{border-top:1px solid rgba(255,246,232,.18);margin-top:4px;padding-top:4px}
.alti-list .goal-li a{color:var(--cream)}
.alti-list .goal-li span{color:var(--wing);filter:brightness(1.25)}
.stages-go{margin:2vh var(--gut) 0;font:400 clamp(24px,2vw,32px)/1.3 var(--body)}
.stages-go a{font:700 .8em/1 var(--disp);font-style:normal;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;border-bottom:2px solid var(--wing);padding-bottom:3px;margin-left:.3em}
.stages-go a:hover{color:var(--wing)}
.vent-note{font-size:15px;opacity:.8;margin:.8em 0 0}
.hand-hint{position:absolute;right:calc(var(--gut) + 4vw);top:22vh;margin:0;font:400 21px/1.3 var(--body);opacity:.75;max-width:14em;text-align:right}
.hand-hint .coarse{display:none}
@media (hover:none){.hand-hint .fine{display:none}.hand-hint .coarse{display:inline}}
.clouds{position:absolute;inset:0;pointer-events:none;overflow:visible}
.cu{position:absolute;will-change:transform}
.cu::before,.cu::after{content:"";position:absolute}
/* cumulus: a flat base (cloudbase) and rounded towers, drawn with radial gradients only */
.cu{width:46vw;height:16vw;background:
  radial-gradient(closest-side,rgba(255,255,255,.95),rgba(255,255,255,.75) 60%,rgba(255,255,255,0)) 8% 70%/34% 70% no-repeat,
  radial-gradient(closest-side,rgba(255,255,255,.98),rgba(255,255,255,.8) 62%,rgba(255,255,255,0)) 36% 30%/40% 100% no-repeat,
  radial-gradient(closest-side,rgba(255,255,255,.96),rgba(255,255,255,.78) 60%,rgba(255,255,255,0)) 64% 46%/36% 86% no-repeat,
  radial-gradient(closest-side,rgba(255,255,255,.92),rgba(255,255,255,.7) 60%,rgba(255,255,255,0)) 90% 72%/28% 60% no-repeat;
  -webkit-mask:linear-gradient(#000 78%,transparent 80%);mask:linear-gradient(#000 78%,transparent 80%)}
.cu::after{left:6%;right:6%;bottom:20%;height:9%;background:linear-gradient(90deg,transparent,rgba(170,190,215,.55) 20%,rgba(170,190,215,.55) 80%,transparent);border-radius:50%}
.cu1{left:-8vw;top:6vh}
.cu2{left:48vw;top:2vh;width:34vw;height:12vw;opacity:.9}
.cu3{left:22vw;top:30vh;width:22vw;height:8vw;opacity:.75}

/* ---------- déco (the peak) ---------- */
.deco{height:330vh;margin-right:calc(-1 * var(--rpad))}
.deco-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.dl{position:absolute;inset:0;will-change:transform;transform-origin:70% 100%}
.dl svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.pilot{position:absolute;left:0;top:0;width:320px;height:230px;margin:-190px 0 0 -160px;transform-origin:160px 190px;will-change:transform}
.pilot svg{width:100%;height:100%;overflow:visible}
.deco-lines{position:absolute;left:var(--gut);right:calc(var(--gut) + var(--tape));top:12vh;pointer-events:none}
.dline{position:absolute;left:0;top:0;margin:0;font:400 clamp(37px,4vw,60px)/1.05 var(--body);opacity:0;transition:opacity .5s var(--ease-out),transform .7s var(--ease-out);transform:translateY(14px);max-width:16em}
.dline.on{opacity:1;transform:none}
.dline.peak{font:900 clamp(64px,11.5vw,210px)/.84 var(--disp);text-transform:uppercase;font-style:normal;max-width:none;opacity:1;transform:none;letter-spacing:-.01em}
.peak .ch{display:inline-block;opacity:0;transform:translateY(-.45em) rotate(-4deg);transition:opacity .4s var(--ease-out),transform .9s var(--land)}
.peak.on .ch{opacity:1;transform:none}
.peak .w{display:inline-block;white-space:nowrap}
.dline.last{top:58vh;color:var(--cream);text-shadow:0 1px 2px rgba(13,27,51,.45),0 2px 22px rgba(13,27,51,.55)}

/* ---------- baptême ---------- */
.bapt{padding:22vh var(--gut) 10vh}
.bapt-head{margin-left:6vw}
.bapt-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:5vw;margin-top:7vh;align-items:start}
.bapt-txt p{margin:0 0 1em;max-width:30em}
.facts{display:grid;grid-template-columns:1fr 1fr;margin:2em 0;border-top:1px solid currentColor}
.facts div{padding:12px 0;border-bottom:1px solid rgba(13,27,51,.25)}
.facts dt{font:600 17px/1 var(--disp);letter-spacing:.03em;opacity:.7}
.facts dd{margin:6px 0 0;font:700 30px/1 var(--disp)}
.small{font-size:16px;opacity:.85}
.flight{position:relative;margin:0;aspect-ratio:16/10}
.flight-c{position:absolute;inset:0;width:100%;height:100%}
.fl{position:absolute;font:600 13px/1 var(--disp);letter-spacing:.16em;text-transform:uppercase;opacity:0;transform:translateY(6px);transition:opacity .4s var(--ease-out),transform .5s var(--ease-out);white-space:nowrap}
.fl.on{opacity:.9;transform:none}
.fl-deco{right:2%;top:6%}
.fl-th{right:26%;top:-2%}
.fl-val{left:38%;top:44%}
.fl-att{left:2%;bottom:16%}
.flight figcaption{position:absolute;left:0;right:0;bottom:-2.6em;font:400 18px/1.3 var(--body);opacity:.8}
.revol{position:absolute;right:0;bottom:-3em;background:none;border:0;border-bottom:1px solid currentColor;color:inherit;font:700 14px/1 var(--disp);letter-spacing:.18em;text-transform:uppercase;padding:6px 0;cursor:pointer}
.revol:hover{color:var(--wing)}

/* ---------- stages: altitude bands ---------- */
.stages{padding:10vh 0 6vh;overflow-x:clip}
.stages-head{padding:0 var(--gut);text-align:right;margin-right:4vw}
.band{position:relative;min-height:64vh;padding:12vh var(--gut) 8vh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
.band-line{position:absolute;left:0;right:0;top:12vh;height:1px}
.band-line i{position:absolute;inset:0;background:repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px 40px),currentColor;background-size:auto,100% 1px;background-repeat:repeat-x,no-repeat;background-position:0 0,0 0;height:1px;transform:scaleX(0);transform-origin:var(--from,0) 50%;transition:transform 1.2s var(--land)}
.band-line i::after{content:"";position:absolute;left:0;right:0;top:-6px;height:6px;background:repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px 40px);opacity:.6}
.band.on .band-line i{transform:none}
.band-alt{position:absolute;top:calc(12vh - .74em);margin:0;font:300 clamp(110px,15vw,260px)/.8 var(--disp);letter-spacing:-.03em;opacity:.15;pointer-events:none;white-space:nowrap}
.band-alt b{font-weight:300}
.band[data-side="l"] .band-alt{right:-1vw}
.band[data-side="r"] .band-alt{left:-2vw}
.band[data-side="l"] .band-body{grid-column:1}
.band[data-side="r"] .band-body{grid-column:2}
.band-body{padding-top:3vh;max-width:34em}
.band-t{font:800 clamp(56px,8vw,130px)/.86 var(--disp);text-transform:uppercase;margin:0 0 .25em;letter-spacing:-.005em;white-space:nowrap}
.band-t .ch{display:inline-block;opacity:0;transform:translate(calc(var(--wx,1) * -70px),-18px) rotate(calc(var(--wx,1) * -14deg));transition:opacity .35s var(--ease-out),transform .9s var(--ease-spring)}
.band.on .band-t .ch{opacity:1;transform:none}
.band-meta{font:600 20px/1.3 var(--disp);letter-spacing:.03em;margin:0 0 1em}
.band-p{margin:0;font-size:20px;clip-path:inset(0 0 100% 0);transform:translateY(10px);transition:clip-path 1s var(--ease-out) .25s,transform 1s var(--ease-out) .25s}
.band.on .band-p{clip-path:inset(0 0 -10% 0);transform:none}

/* ---------- vent du jour ---------- */
.vent{padding:11vh var(--gut) 14vh;color:var(--cream);overflow-x:clip}
.vent-head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 32px}
.demo{margin:0 0 .6em;font:600 14px/1.3 var(--disp);letter-spacing:.14em;text-transform:uppercase;border:1px dashed currentColor;padding:8px 12px;max-width:26em}
.vent-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:5vw;margin-top:8vh;align-items:center}
.dial-wrap{justify-self:center;text-align:center}
.dial{width:min(420px,72vw);aspect-ratio:1;touch-action:none;cursor:grab;border-radius:50%}
.dial:active{cursor:grabbing}
.dial svg{width:100%;height:100%;overflow:visible}
.dial-ring{fill:rgba(13,27,51,.28);stroke:currentColor;stroke-width:1}
.dial-ticks line{stroke:currentColor;stroke-width:1;opacity:.6}
.dial-ticks line.b{stroke-width:1.6;opacity:1}
.card{fill:currentColor;font:700 15px var(--disp);text-anchor:middle;letter-spacing:.1em}
.deco-arc{fill:none;stroke:var(--warm);stroke-width:7;opacity:.85}
.dial-hand path{fill:var(--wing)}
.dial-hand circle{fill:var(--cream)}
.dial-note{font:400 20px/1.35 var(--body);max-width:22em;margin:14px auto 0;opacity:.9}
.vent-read{position:relative}
.vr-dir{font:400 clamp(37px,3.4vw,52px)/1 var(--body);margin:0}
.vr-kmh{margin:.1em 0 .4em;font:800 clamp(90px,12vw,200px)/.85 var(--disp);font-variant-numeric:tabular-nums}
.vr-kmh b{font-weight:800}
.force{display:block;max-width:440px}
.force span,.gust span{font:600 18px/1 var(--disp);letter-spacing:.03em}
.force input{display:block;width:100%;margin:12px 0 18px;accent-color:var(--wing);height:28px}
.gust{display:inline-flex;align-items:center;gap:10px;cursor:pointer}
.gust input{width:18px;height:18px;accent-color:var(--wing)}
.verdict{font:400 27px/1.3 var(--body);margin:1.2em 0 0;max-width:20em;min-height:2.6em}
.anemo{position:absolute;right:0;top:-20px;width:170px;height:200px;overflow:visible}
.anemo line{stroke:currentColor;stroke-width:2}
.cups path{fill:none;stroke:currentColor;stroke-width:2}
.cups circle{fill:currentColor}

/* ---------- réserver ---------- */
.resa{padding:14vh var(--gut) 12vh;color:var(--cream)}
.resa-head{max-width:900px;margin-left:auto;text-align:right}
.form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 28px;margin-top:8vh;max-width:1100px}
.f{display:flex;flex-direction:column;gap:8px;will-change:transform}
.f-wide{grid-column:1/-1}
.f label{font:600 18px/1 var(--disp);letter-spacing:.03em}
.f small{font:400 17px var(--body);letter-spacing:0;text-transform:none;opacity:.8}
.f input,.f select,.f textarea{font:400 22px/1.3 var(--body);color:var(--cream);background:rgba(12,20,48,.55);border:0;border-bottom:1.5px solid rgba(255,246,232,.7);padding:12px 12px;border-radius:0;width:100%}
.f select{-webkit-appearance:none;appearance:none;padding-right:40px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23ffb25a' stroke-width='1.6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:14px 8px}
.f select option{color:var(--ink)}
.f input::placeholder,.f textarea::placeholder{color:rgba(255,246,232,.6)}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-bottom-color:var(--warm);background:rgba(12,20,48,.75)}
.f input:focus-visible,.f select:focus-visible,.f textarea:focus-visible{outline:2px solid var(--warm);outline-offset:2px}
.f input[type=date]{color-scheme:dark}
.f-err{grid-column:1/-1;margin:0;color:#ffd7a8}
.send{grid-column:1/-1;justify-self:start;background:var(--wing);color:var(--ink);border:0;padding:16px 22px;font:700 18px/1 var(--disp);letter-spacing:.16em;text-transform:uppercase;cursor:pointer;transition:transform .2s var(--ease-spring),background .15s}
.send:hover{background:var(--ink);color:var(--cream)}
.send:active{transform:scale(.97) translateY(1px)}
.landed{margin-top:6vh;max-width:900px;outline:none}
.land-svg{width:100%;height:auto;overflow:visible}
.landed-t{font:900 clamp(80px,12vw,200px)/.8 var(--disp);text-transform:uppercase;margin:.1em 0 .1em;opacity:0;transform:translateY(20px);transition:opacity .5s var(--ease-out),transform .9s var(--land)}
.landed-p{margin:0 0 1em;font-size:20px;opacity:0;transition:opacity .6s var(--ease-out) .2s}
.landed.done .landed-t,.landed.done .landed-p{opacity:1;transform:none}
.again{background:none;border:0;border-bottom:1px solid currentColor;color:inherit;font:700 14px/1 var(--disp);letter-spacing:.18em;text-transform:uppercase;padding:6px 0;cursor:pointer}

/* ---------- footer: the landing field ---------- */
.foot{position:relative;overflow-x:clip;margin-right:calc(-1 * var(--rpad));padding:10vh calc(var(--gut) + var(--rpad)) 0 var(--gut);color:var(--cream);display:grid;grid-template-columns:auto minmax(0,1fr);gap:4vw;align-items:end;min-height:80vh}
.foot-sock{width:min(300px,40vw);height:auto;overflow:visible;align-self:end;margin-bottom:-2px;position:relative;z-index:2;cursor:pointer}
.foot-sock .pole{stroke:var(--cream);stroke-width:3}
.foot-sock .seg{stroke:var(--ink);stroke-width:1.2;stroke-linejoin:round}
.foot-sock .ring{fill:none;stroke:var(--cream);stroke-width:2.4}
.foot-txt{padding-bottom:16vh;max-width:36em;position:relative;z-index:2}
.foot-big{font:800 clamp(44px,6vw,96px)/.9 var(--disp);text-transform:uppercase;margin:0 0 .4em}
.foot-txt p{margin:0 0 1em}
.up{font:700 18px/1 var(--disp);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:4px}
.up:hover{color:var(--warm)}
.fict{font-size:14px;opacity:.75}
.grass{position:absolute;left:0;right:0;bottom:0;height:13vh;z-index:1;
  background:linear-gradient(#5f7d3f,#3e5a2c);border-radius:50% 50% 0 0/24px 24px 0 0}
.grass::before{content:"";position:absolute;left:0;right:0;top:-10px;height:12px;background:repeating-linear-gradient(90deg,transparent 0 3px,#5f7d3f 3px 4px,transparent 4px 9px,#6e8f48 9px 10px,transparent 10px 15px);-webkit-mask:linear-gradient(transparent,#000);mask:linear-gradient(transparent,#000)}

/* ---------- photo places (2026-11-06, Thony: « réserver quelques places pour des photos »): a viewfinder held in the air ---------- */
.ph{margin:0;position:relative;color:inherit;opacity:0;translate:0 28px;transition:opacity .9s var(--ease-out),translate 1.3s var(--land);will-change:transform}
.ph.on{opacity:1;translate:none}
.ph-frame{position:relative;aspect-ratio:var(--ar,4/3);overflow:hidden;background:linear-gradient(170deg,rgba(255,246,232,.3),rgba(255,246,232,.04) 75%);border:1px solid color-mix(in srgb,currentColor 24%,transparent);box-shadow:0 18px 40px -24px rgba(13,27,51,.45)}
.ph-draw{position:absolute;inset:0;width:100%;height:100%}
.d-hill{fill:currentColor;opacity:.15}.d-hill2{fill:currentColor;opacity:.07}
.d-wing{fill:var(--wing);opacity:.6}.d-sun{fill:var(--warm);opacity:.45}
.d-lines path{fill:none;stroke:currentColor;stroke-width:1;opacity:.35}
.d-ink{fill:currentColor;opacity:.5}.d-ink2{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;opacity:.5}
.ph-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph-img:not([src]){display:none}
.ph-c{position:absolute;inset:10px;pointer-events:none;opacity:.55;
  background:linear-gradient(currentColor,currentColor) 0 0/16px 1.5px,linear-gradient(currentColor,currentColor) 0 0/1.5px 16px,
  linear-gradient(currentColor,currentColor) 100% 0/16px 1.5px,linear-gradient(currentColor,currentColor) 100% 0/1.5px 16px,
  linear-gradient(currentColor,currentColor) 0 100%/16px 1.5px,linear-gradient(currentColor,currentColor) 0 100%/1.5px 16px,
  linear-gradient(currentColor,currentColor) 100% 100%/16px 1.5px,linear-gradient(currentColor,currentColor) 100% 100%/1.5px 16px;background-repeat:no-repeat}
.ph figcaption{margin-top:.75em;font:400 18px/1.4 var(--body);max-width:30em}
.ph-tag{font:700 11px/1 var(--disp);font-style:normal;letter-spacing:.18em;text-transform:uppercase;border:1px solid currentColor;padding:3px 5px 2px;margin-right:.35em;vertical-align:1px;white-space:nowrap}
.stages-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4vw;align-items:end;padding:0 var(--gut)}
.stages-top .stages-head{padding:0;grid-column:2;grid-row:1}
.ph-tandem{grid-column:1;grid-row:1;width:min(100%,520px);margin-left:4vw}
.band .ph{grid-row:1;align-self:start;justify-self:center;width:min(86%,420px);margin-top:9vh}
.band[data-side="l"] .ph{grid-column:2}
.band[data-side="r"] .ph{grid-column:1}
.band .ph-deco{width:min(70%,300px);margin-top:5vh}

/* ---------- phone ---------- */
@media (max-width:760px){
  :root{--tape:50px;--gut:18px}
  body{font-size:17px}
  .logo{top:14px}.sock{width:64px;height:28px}.word{font-size:21px}
  .marks{display:none}
  .read{padding:6px 5px 6px 9px}.read b{font-size:17px}.read i{display:none}
  .vario-n,.clock{font-size:10px}
  .menu-t{font-size:9px;letter-spacing:.12em}
  .alti-list{min-width:200px;right:calc(100% + 6px)}
  .alti-list{min-width:236px}
  .alti-list a{padding:13px 16px 13px 14px;white-space:nowrap}
  .ticks b{display:none}
  .son{bottom:14px;padding:7px 10px}
  .goal{right:calc(var(--tape) + 8px);bottom:14px;padding:9px 11px;font-size:14px;letter-spacing:.1em;gap:8px}
  .stages-go a{display:inline-block;margin:.6em 0 0}
  .hero{padding-top:90px;padding-bottom:84px}
  .title{font-size:min(19.5vw,30vh)}
  .hero-txt{grid-template-columns:minmax(0,1fr);gap:18px}
  .acts{grid-column:1}
  .hand-hint{top:auto;bottom:auto;right:var(--gut);top:16vh;font-size:15px;max-width:10em}
  .cu{width:80vw;height:28vw}.cu2{left:40vw;width:60vw;height:21vw}.cu3{display:none}
  .deco-lines{top:10vh}
  .dline{font-size:28px}
  .bapt{padding-top:14vh}
  .bapt-head{margin-left:0}
  .bapt-grid{grid-template-columns:minmax(0,1fr)}
  .flight{margin-bottom:3em}
  .facts dd{font-size:24px}
  .band{grid-template-columns:minmax(0,1fr);min-height:58vh}
  .band[data-side] .band-body{grid-column:1}
  .band[data-side="r"] .band-body{padding-left:12vw}
  .band-alt{font-size:40vw}
  .band-t{font-size:12.5vw}
  .vent-grid{grid-template-columns:minmax(0,1fr)}
  .anemo{width:84px;height:100px;top:-4px}
  /* le vent du jour : cadran, relevé, réglages et verdict tiennent dans un même écran de téléphone (2026-11-08) */
  .vent{padding-top:8vh;padding-bottom:10vh}
  .vent-grid{margin-top:2vh;gap:8px}
  .dial{width:min(172px,48vw)}
  .dial-note{font-size:15px;margin-top:8px}
  .vr-dir{font-size:32px}
  .vr-kmh{font-size:54px;margin:.05em 0 .2em}
  .force input{margin:8px 0 10px}
  .verdict{font-size:20px;margin-top:.5em;min-height:2.4em}
  .dial-note{max-width:18em}
  .vent-read .acts{margin-top:14px}
  .form{grid-template-columns:minmax(0,1fr)}
  .foot{grid-template-columns:minmax(0,1fr)}
  .foot-sock{width:60vw;order:2;justify-self:start;margin-top:4vh}
  .foot-txt{padding-bottom:0}
  .grass{height:9vh}
  .stages-top{grid-template-columns:minmax(0,1fr);gap:5vh}
  .stages-top .stages-head,.ph-tandem{grid-column:1;grid-row:auto}
  .ph-tandem{width:86%;margin:0}
  .band .ph{grid-column:1!important;grid-row:auto;width:74%;margin-top:4vh;justify-self:end}
  .band[data-side="r"] .ph{justify-self:start}
  .band .ph-deco{width:58%}
  .ph figcaption{font-size:14px}
}

/* ---------- reduced motion: a still painted sky ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  .deco{height:auto}
  .deco-stage{position:relative;height:100vh}
  .wing{display:none}
  .dline,.peak .ch,.band-t .ch,.band-p,.band-line i,.fl{opacity:1!important;transform:none!important;clip-path:none!important}
  .dline{position:relative;margin-bottom:.4em}
  .deco-lines{display:flex;flex-direction:column}
  .dline.last{top:auto}
  .ph{opacity:1;translate:none}
  .tuck .logo,.tuck .son{translate:none;opacity:1;pointer-events:auto}
  .goal-off .goal{translate:none;opacity:0;visibility:hidden}
}