/* Village Ratanga : page mobile, une colonne, fond blanc. */
:root{
  color-scheme:light;
  --teal:#0E3F40; --teal-2:#177D7E; --gold:#CAAF3A; --sky:#D7E9F3;
  --red:#D3242A; --yellow:#F2DE3A; --ink:#12302F; --muted:#4A5F5D; --line:#D9D2BE;
  --display:"Rubik","Arial Black",system-ui,sans-serif;
  --body:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gutter-l:max(16px,env(safe-area-inset-left,0px)); --gutter-r:max(16px,env(safe-area-inset-right,0px));
}
*{box-sizing:border-box}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;padding:0}
img{max-width:100%}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{overflow-x:hidden;background:#FFFFFF;color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.5}
h1,h2,h3,p,ol{margin:0}
.phone{--w:min(100vw,480px);--fw:calc(var(--w)*.42);--fh:calc(var(--fw)*.9537);max-width:480px;margin-inline:auto;background:#FFFFFF;min-height:100vh;overflow-x:clip}
.pad{padding-left:var(--gutter-l);padding-right:var(--gutter-r)}
h2{font-family:var(--display);font-weight:800;font-style:italic;font-size:2rem;line-height:1.1;color:var(--red);text-wrap:balance}
.lead{color:var(--muted)}

/* Carte fermée à l'arrivée : deux volets verts, le logo au centre. Le toucher ouvre la carte et lance le son */
html.locked,html.locked body{overflow:hidden}
.gate{position:fixed;z-index:30;top:0;bottom:0;left:max(0px,calc(50vw - 240px));width:min(100vw,480px);padding:0;border:0;background:none;color:#FFFFFF;cursor:pointer;perspective:1300px;touch-action:none;overflow:hidden;-webkit-tap-highlight-color:transparent;font:inherit}
.door{position:absolute;top:0;bottom:0;width:50.4%;background:url(../img/grain.png),linear-gradient(90deg,#157274,#177D7E 55%,#1A8788);transition:transform 3s cubic-bezier(.45,0,.3,1);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.door::before{content:"";position:absolute;top:18px;bottom:18px;border:1px solid rgb(255 255 255 / .34);pointer-events:none}
.door-l{left:0;transform-origin:0 50%;box-shadow:inset -14px 0 18px -14px rgb(0 0 0 / .45)}
.door-l::before{left:18px;right:0;border-right:0;border-radius:6px 0 0 6px}
.door-r{right:0;transform-origin:100% 50%;background:url(../img/grain.png),linear-gradient(270deg,#157274,#177D7E 55%,#1A8788);box-shadow:inset 14px 0 18px -14px rgb(0 0 0 / .45)}
.door-r::before{right:18px;left:0;border-left:0;border-radius:0 6px 6px 0}
.seal{position:absolute;z-index:1;left:0;top:50%;width:calc(var(--w)*.44);height:auto;max-width:none;transform:translate(-50%,-50%);filter:drop-shadow(0 7px 12px rgb(0 0 0 / .4));animation:sealPulse 2.2s ease-in-out infinite}
@keyframes sealPulse{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.045)}}
.gate-hint{position:absolute;left:0;right:0;bottom:calc(50% - var(--w)*.34);text-align:center;font-weight:600;font-size:1rem;transition:opacity .25s linear}
/* Ombres légères de l'ouverture : les volets s'assombrissent en tournant et portent une ombre sur la page */
.shade{position:absolute;top:0;bottom:0;width:50%;opacity:0;pointer-events:none}
.shade-l{left:0;background:linear-gradient(90deg,rgb(6 28 28 / .36),rgb(6 28 28 / .12) 50%,rgb(6 28 28 / 0))}
.shade-r{right:0;background:linear-gradient(270deg,rgb(6 28 28 / .36),rgb(6 28 28 / .12) 50%,rgb(6 28 28 / 0))}
.gate.open .shade{animation:shadeFall 3.1s ease-in-out forwards}
@keyframes shadeFall{0%,6%{opacity:0}42%{opacity:1}86%,100%{opacity:0}}
.door::after{content:"";position:absolute;inset:0;opacity:0;pointer-events:none}
.door-l::after{background:linear-gradient(90deg,rgb(0 0 0 / .46),rgb(0 0 0 / .1))}
.door-r::after{background:linear-gradient(270deg,rgb(0 0 0 / .46),rgb(0 0 0 / .1))}
.gate.open .door::after{animation:doorTurn 3s cubic-bezier(.45,0,.3,1) forwards}
@keyframes doorTurn{to{opacity:1}}
.gate.open .door-l{box-shadow:inset -14px 0 18px -14px rgb(0 0 0 / .45),12px 0 26px rgb(0 0 0 / .26)}
.gate.open .door-r{box-shadow:inset 14px 0 18px -14px rgb(0 0 0 / .45),-12px 0 26px rgb(0 0 0 / .26)}
.gate.open .door-l{transform:rotateY(-104deg)}
.gate.open .door-r{transform:rotateY(104deg)}
.gate.open .seal{animation:none}
.gate.open .gate-hint{opacity:0}

/* Suite de l'ouverture : la bande défile déjà derrière la carte, l'affiche se pose, puis le lecteur et le texte arrivent */
.poster-box{overflow:hidden}
.poster{transition:transform 3.6s cubic-bezier(.25,.6,.3,1)}
.player,.intro{transition:opacity .9s linear 2.5s,transform 1s cubic-bezier(.2,.8,.25,1) 2.5s}
.phone.closed .poster{transform:scale(1.1)}
.phone.closed .player,.phone.closed .intro{opacity:0;transform:translateY(26px)}

/* Affiche, avec la bande de film posée en travers */
.stage{position:relative}
.poster{width:100%;height:auto;display:block}
.reel{position:absolute;z-index:2;left:-12%;right:-12%;top:calc(var(--w)*1.16);transform:rotate(-4deg)}
.strip{height:var(--fh)}
.strip canvas{display:block;width:100%;height:100%}

/* Lecteur : une capsule transparente au contour vert, juste sous la bande de film */
.player{position:relative;color:var(--teal);padding-top:calc(var(--w)*.2);padding-bottom:0;display:flex;flex-direction:column;gap:6px}
.glass{position:relative;display:flex;align-items:center;gap:10px;width:100%;max-width:300px;margin-inline:auto;padding:5px 14px 5px 5px;border-radius:999px;background:transparent;border:1.5px solid var(--teal-2)}
.play{position:relative;width:40px;height:40px;flex:none;border-radius:50%;border:0;background:var(--red);color:#FFFFFF;cursor:pointer;display:grid;place-items:center}
.play:hover{background:#B81C22}
.play svg{width:18px;height:18px;fill:currentColor}
.wave{position:relative;flex:1;min-width:0;height:28px;display:flex;align-items:center;justify-content:space-between}
.wave i{display:block;width:2px;height:calc(var(--h)*100%);border-radius:2px;background:rgb(23 125 126 / .45);transition:background .2s linear}
.wave i.past{background:var(--teal-2)}
.glass.playing .wave i{animation:wave var(--d) ease-in-out var(--dl) infinite alternate}
@keyframes wave{from{transform:scaleY(.4)}to{transform:scaleY(1.15)}}
.time{position:relative;flex:none;min-width:2.4em;text-align:right;font-weight:600;font-size:.95rem;font-variant-numeric:tabular-nums;color:var(--teal-2)}
.caption{min-height:2.6em;text-align:center;font-size:.92rem;line-height:1.3;color:var(--muted)}

/* Présentation */
.intro{background:#177D7E;color:#FFFFFF;display:flex;flex-direction:column;gap:14px;padding-block:28px}
.eyebrow{font-family:var(--display);font-weight:800;font-size:1.1rem;color:var(--yellow)}
h1{font-family:var(--display);font-weight:900;font-style:italic;font-size:2.4rem;line-height:1.05;text-wrap:balance}
.when{font-size:1.15rem;font-weight:800;line-height:1.35}
.cta{display:block;width:100%;min-height:52px;text-align:center;background:var(--red);color:#FFFDF7;font-family:var(--display);font-weight:800;font-size:1.1rem;text-decoration:none;padding:14px 18px;border-radius:10px;border:0;cursor:pointer}
.cta:hover{background:#B81C22}

/* Programme */
.block{display:flex;flex-direction:column;gap:18px;padding-block:36px;border-top:1px solid var(--line)}
.tag{align-self:flex-start;background:var(--yellow);color:var(--teal);font-weight:600;font-size:.9rem;padding:3px 10px;border-radius:999px}
.route{list-style:none;padding:0;counter-reset:etape}
.route li{counter-increment:etape;position:relative;display:grid;grid-template-columns:116px minmax(0,1fr);gap:10px;align-items:center;min-height:92px;padding:0 0 22px 44px}
.route li::before{content:counter(etape);position:absolute;left:0;top:14px;width:36px;height:36px;border-radius:50%;background:var(--red);color:#FFFDF7;font-family:var(--display);font-weight:800;display:grid;place-items:center;font-variant-numeric:tabular-nums}
.route li::after{content:"";position:absolute;left:17px;top:54px;bottom:-12px;border-left:3px dotted var(--red);transform-origin:50% 0}
.route li:last-child{padding-bottom:0}
.route li:last-child::after{display:none}
.r-img{width:100%;height:auto;display:block}
.r-text{min-width:0}
.route h3{font-family:var(--display);font-weight:800;font-style:italic;font-size:1.02rem;color:var(--red);line-height:1.2}
.route p{color:var(--muted);font-size:.9rem;line-height:1.3}

/* Animation du parcours : numéro, ligne, image et texte arrivent à chaque passage à l'écran */
.route.anim li::before,.route.anim li::after,.route.anim .r-img,.route.anim .r-text{transition:transform .28s ease-in,opacity .28s ease-in}
.route.anim li::before{transform:scale(.3);opacity:0}
.route.anim li::after{transform:scaleY(0)}
.route.anim .r-img{transform:translateX(-30px) scale(.86);opacity:0}
.route.anim .r-text{transform:translateX(26px);opacity:0}
.route.anim li.in::before{transform:none;opacity:1;transition:transform .5s cubic-bezier(.34,1.56,.64,1),opacity .2s linear}
.route.anim li.in::after{transform:none;transition:transform .55s ease-out .32s}
.route.anim li.in .r-img{transform:none;opacity:1;transition:transform .6s cubic-bezier(.22,1,.36,1) .1s,opacity .4s linear .1s}
.route.anim li.in .r-text{transform:none;opacity:1;transition:transform .6s cubic-bezier(.22,1,.36,1) .2s,opacity .4s linear .2s}
.parcours{background:var(--yellow);border-top:0;color:var(--teal)}
.parcours h2,.parcours .route h3{color:var(--teal)}
.parcours .lead,.parcours .route p{color:var(--ink)}
.parcours .tag{background:var(--teal);color:#FFFFFF}
.parcours + .block{border-top:0}

/* Présence */
.rsvp{scroll-margin-top:16px}
form{display:flex;flex-direction:column;gap:16px}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
label,legend{font-weight:600}
input[type=text]{font:inherit;color:var(--ink);background:#FFFFFF;border:1px solid #8A9A97;border-radius:8px;padding:12px;width:100%;min-height:48px}
fieldset{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
legend{padding:0;margin-bottom:8px}
.choice{display:flex;align-items:center;gap:10px;font-weight:400;border:1px solid #8A9A97;border-radius:8px;padding:12px 14px;background:#FFFFFF;cursor:pointer;min-height:48px}
.choice input{accent-color:var(--red);width:18px;height:18px;flex:none;margin:0}
.ghost{width:100%;min-height:48px;font:inherit;font-weight:600;background:transparent;color:var(--teal);border:1px solid var(--teal);border-radius:10px;padding:12px 16px;cursor:pointer}
.cta:disabled{opacity:.6;cursor:wait}
.trap{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.error{color:var(--red)}
.hint{color:var(--muted);font-size:.95rem}
.done{background:var(--sky);border-radius:8px;padding:12px 14px}
.number{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
footer{background:#EFEFEF;color:var(--muted);padding-block:20px;display:flex;flex-direction:column;gap:12px}
.partners-title{font-family:var(--display);font-weight:800;color:var(--teal)}
.partners{width:100%;height:auto;display:block;mix-blend-mode:multiply}
:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.intro :focus-visible{outline-color:var(--yellow)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.glass.playing .wave i,.seal,.gate.open .shade,.gate.open .door::after{animation:none}.door{transition:none}.poster,.player,.intro{transition:none}}