/* ===== Version immersive : ciel + archipel ===== */
html{background:#070816}
body{background:transparent;position:relative}
#sky{position:fixed;inset:0;width:100vw;height:100vh;z-index:-2;display:block;pointer-events:none;opacity:0;transition:opacity 1.6s}
.sky-ready #sky{opacity:1}
.sky-static{position:fixed;inset:0;z-index:-3;background:#070816 url('img/voie-lactee-2048.jpg') center/cover no-repeat;pointer-events:none}
.sky-static:after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,transparent 30%,rgba(7,8,22,.55) 100%)}
.sky-ready .sky-static{opacity:0;transition:opacity 1.6s}
/* sections : panneaux qui flottent dans l'espace */
.hero{background:transparent}.hero-bg{opacity:.14}
.hero:after{background:radial-gradient(ellipse at 75% 15%,rgba(242,227,198,.12),transparent 45%),linear-gradient(180deg,transparent,rgba(7,8,22,.35))}
.dark{background-color:rgba(19,21,43,.74)}
.sec:not(.dark){background:rgba(247,242,233,.97);border-radius:28px;margin:2.2rem auto;max-width:min(1240px,calc(100% - 1.2rem));box-shadow:0 30px 90px rgba(0,0,0,.45),0 0 0 1px rgba(232,166,90,.25)}
.foot{background:rgba(13,14,31,.86)}
@media(max-width:600px){.sec:not(.dark){border-radius:18px;margin:1.2rem auto;max-width:calc(100% - .8rem)}}
.arrive{animation:arrive 2s ease}
@keyframes arrive{0%{box-shadow:0 0 0 0 rgba(232,166,90,.9)}40%{box-shadow:0 0 0 10px rgba(232,166,90,.35)}100%{box-shadow:0 0 0 0 rgba(232,166,90,0)}}
/* archipel */
.archipel{position:relative;color:var(--paper);padding:clamp(1.2rem,4vw,2.4rem) var(--pad) 1.5rem;min-height:calc(100svh - 56px);display:flex;flex-direction:column}
.archipel .ah{max-width:1240px;margin:0 auto;width:100%;text-align:center}
.archipel .ah h1{font-size:clamp(2rem,5.5vw,3.8rem);margin:.2rem 0}.archipel .ah h1 em{color:var(--gold)}
.archipel .ah p{color:#cfc8dc;margin:.2rem auto;max-width:44rem}
#archipel-stage{position:relative;flex:1;min-height:420px;width:100%;max-width:1400px;margin:0 auto}
#iso{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y}
.isl{position:absolute;left:0;top:0;z-index:2;white-space:nowrap;font:600 .78rem/1 var(--sans);letter-spacing:.02em;color:var(--paper);text-decoration:none;padding:.42rem .7rem;border-radius:999px;background:rgba(19,21,43,.78);border:1px solid rgba(232,166,90,.35);box-shadow:0 6px 20px rgba(0,0,0,.4);transition:background .25s,color .25s,box-shadow .25s,scale .25s;opacity:0}
.ready .isl{opacity:1}
.isl:hover,.isl:focus-visible,.isl.on{background:var(--gold);color:var(--night2);box-shadow:0 0 0 3px rgba(232,166,90,.35),0 0 28px rgba(232,166,90,.75);scale:1.12;outline:none;z-index:3}
.flying .isl:not(.on){opacity:0;transition:opacity .3s}
@media(max-width:600px){.isl{font-size:.62rem;padding:.3rem .42rem}#archipel-stage{min-height:560px}}
.isl{white-space:normal;text-align:center;line-height:1.12;max-width:6.4rem;box-sizing:border-box;padding-left:.55rem;padding-right:.55rem}@media(max-width:600px){.isl{max-width:4.9rem;padding-left:.4rem;padding-right:.4rem}}
.iso-hint{text-align:center;font-size:.82rem;color:#a9a3c0;margin:.4rem 0 0}
.iso-list{max-width:1240px;margin:.6rem auto 0;width:100%}
.iso-list summary{cursor:pointer;text-align:center;color:var(--gold);font-size:.9rem;list-style:none}
.iso-list summary::-webkit-details-marker{display:none}
.iso-list ol{list-style:none;padding:0;margin:.8rem 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.5rem}
.iso-list a{display:block;padding:.6rem .8rem;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(232,166,90,.22);color:var(--paper);text-decoration:none;font-size:.9rem}
.iso-list a:hover,.iso-list a:focus-visible{background:rgba(232,166,90,.2)}
/* sans WebGL : l'archipel devient une liste */
.no-webgl #iso,#archipel-stage.flat #iso,.no-webgl .isl,#archipel-stage.flat .isl,.no-webgl .iso-hint{display:none}
.no-webgl #archipel-stage,#archipel-stage.flat{flex:0;min-height:0}
@media (prefers-reduced-motion:reduce){#sky{display:none}.isl{transition:none}.arrive{animation:none}}
.hero h2.h1{font-size:clamp(2.6rem,8vw,5.4rem)}
@media (hover:none){.iso-hint{display:none}}
.isl-play{position:absolute;left:0;top:0;z-index:3;white-space:nowrap;font:700 .72rem/1 var(--sans);color:var(--night2);background:linear-gradient(135deg,#7fd08a,#e8a65a);text-decoration:none;padding:.36rem .7rem;border-radius:999px;box-shadow:0 0 18px rgba(127,208,138,.55);opacity:0;transition:opacity .4s}
.ready .isl-play{opacity:1}.flying .isl-play{opacity:0}
.isl-play:hover,.isl-play:focus-visible{outline:2px solid var(--paper);outline-offset:2px}
.no-webgl .isl-play,#archipel-stage.flat .isl-play{display:none}
.jeux{max-width:1240px;width:100%;margin:1.4rem auto 0;text-align:center}
.jeux-t{font:600 clamp(1.4rem,3vw,2rem) var(--serif);margin:.2rem 0}.jeux-t em{color:var(--gold)}
.jeux-l{color:#cfc8dc;margin:.2rem auto 1rem;max-width:44rem;font-size:.95rem}
.jeux-g{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.7rem;text-align:left}
.jx{background:rgba(14,12,30,.62);border:1px solid rgba(232,166,90,.22);border-radius:16px;padding:.85rem .9rem .7rem;backdrop-filter:blur(4px)}
.jx.live{border-color:rgba(127,208,138,.6);box-shadow:0 0 0 1px rgba(127,208,138,.25),0 10px 30px rgba(127,208,138,.12)}
.jx-n{font:600 1.05rem var(--serif);margin:0;color:var(--paper)}.jx-k{font-size:.76rem;color:#a9a3c0;margin:.15rem 0 .6rem}
.jx .acts{margin:0;gap:.4rem}.jx .btn.sm{padding:.5rem .8rem;font-size:.78rem}
@media (prefers-reduced-motion:reduce){.isl-play{transition:none}}