/* Squelette MAATMA ≡M8 : écran portrait en quatre blocs, repris de la démo v218.
   Coordonnées en 1080 × H (H ≥ 1920), mises à l'échelle par squelette.js. */
:root{color-scheme:dark}
html,body{margin:0;height:100%;background:#0a0e12;overflow:hidden;font-family:system-ui,sans-serif}
/* L'écran est fixé et coupe ce qui dépasse : sinon un téléphone élargit la page aux 1080 px de #app avant la mise à l'échelle */
body{position:fixed;inset:0}
#app{position:absolute;left:0;top:0;width:1080px;height:1920px;transform-origin:0 0;overflow:hidden}

/* A : bandeau */
#A{position:absolute;left:0;top:0;width:1080px;height:180px;background:#191F25}
#A img{position:absolute;inset:0;width:1080px;height:180px;max-width:none}

/* B : Devî et la sphère */
#B{position:absolute;left:0;top:180px;width:1080px;height:1000px;overflow:hidden;background:#243A47}
.fondImg{position:absolute;left:0;top:0;width:1080px;height:1000px;max-width:none;pointer-events:none;display:none}
.fondImg.actif{display:block}

/* Devî et le schéma (sphère). La sphère s'agrandit quand Devî est éteinte (sphere.js). */
#devi{position:absolute;pointer-events:none;left:338px;top:300px;width:756px;height:700px;transition:opacity .6s ease-in-out}
#sph{position:absolute;left:21.5px;top:50.3px;width:752px;height:752px;transition:left .8s ease-in-out,top .8s ease-in-out,width .8s ease-in-out,height .8s ease-in-out}
#sph.respire{animation:respire 1.5s ease-in-out}
@keyframes respire{0%,100%{filter:brightness(1)}50%{filter:brightness(1.18) drop-shadow(0 0 28px rgba(255,236,190,.35))}}
@media (prefers-reduced-motion:reduce){#sph.respire{animation:none}}
.l{position:absolute;inset:0;pointer-events:none}
.l img{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1s ease-in-out}
.spin{animation:spin 60s linear infinite}
.spin.pause{animation-play-state:paused}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes souffle{0%,100%{opacity:.8}50%{opacity:1}}
.souffle{animation:souffle 3.2s ease-in-out infinite}
.etin{position:absolute;opacity:0;pointer-events:none}
/* Profondeur des couleurs et symboles dorés : réglages de Confort, à zéro tant que Confort n'existe pas */
.teinte{opacity:var(--prof,0)}
.l img[data-sp=G],.l img[data-sp=H],.l img[data-sp=I],.l img[data-sp=J]{filter:opacity(calc(1 - var(--or,0)))}
.l img.or{filter:url(#orSat) opacity(var(--or,0))}

/* Intro : Devî et son bouton arrivent à la fin ; les étoiles du ciel */
@keyframes apparition{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
body.avant #devi,body.avant #btn{visibility:hidden}
body.arrive #devi{animation:apparition 1.6s ease-out backwards}
body.arrive #btn{animation:apparition 1.2s ease-out .8s backwards}
@media (prefers-reduced-motion:reduce){body.arrive #devi,body.arrive #btn{animation:none}}
.astre{position:absolute;border-radius:50%;background:#fff;opacity:0;pointer-events:none}
body.blanc .astre,body.beigegris .astre{background:#243A47}
#btn{position:absolute;left:24px;bottom:24px;width:210px;height:140px;padding:0;border:3px solid #FF934E;border-radius:20px;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-sizing:border-box;transition:border-color .4s}
#btn::before{content:"";position:absolute;inset:6px;border:1.5px solid #FF934E;opacity:.55;border-radius:16px;pointer-events:none;transition:border-color .4s}
#btn img{display:block;height:104px;transition:filter .4s,opacity .4s}
#btn.off,#btn.off::before{border-color:#9aa3a8}
#btn.off img{filter:grayscale(1);opacity:.45}

/* C : texte (sa hauteur est fixée par squelette.js) */
#C{position:absolute;left:0;top:1180px;width:1080px;height:560px;background:#243A47;border-top:4px solid #D4AF37;box-sizing:border-box}
#txt{position:absolute;inset:0;padding:50px 70px;box-sizing:border-box;display:flex;align-items:center;color:#F3E9D2;font-size:56px;line-height:1.3;opacity:0;transition:opacity .3s}

/* D : barre des six boutons */
#D{position:absolute;left:0;top:1740px;width:1080px;height:180px;background:#12171c;display:flex;gap:16px;align-items:center;justify-content:center}
#D button{width:160px;height:150px;border:2px solid rgba(175,195,214,.32);border-radius:20px;background:none;cursor:pointer;position:relative;display:flex;align-items:center;justify-content:center;padding:0;transition:background .3s}
#D button::before{content:"";position:absolute;inset:6px;border:1.5px solid rgba(175,195,214,.16);border-radius:14px;pointer-events:none}
#D button svg{width:60px;height:60px;fill:none;stroke:#AFC3D6;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
#D button svg text{fill:#AFC3D6}
#D #bMenu{flex-direction:column;gap:6px}
#D #bMenu svg{width:68px;height:68px}
#D #bMenu span{font:500 32px/1 system-ui,sans-serif;color:rgba(175,195,214,.85);letter-spacing:.02em}
#barre{display:none}
#barre .halo{stroke:#12171c;stroke-width:9}
#barre .trait{stroke:#AFC3D6;stroke-width:3.5}
button:focus-visible{outline:4px solid #FF934E;outline-offset:4px}

/* Fonds : anthracite par défaut ; ?fond= ou #bleu-gris | beige-gris | blanc pour tester. Le bloc C suit le fond. */
body.anthracite #B,body.anthracite #C{background:#191F25}
body.blanc #B,body.blanc #C{background:#FEFEFE}
body.beigegris #B,body.beigegris #C{background:#E8E4DA}
body.blanc #txt,body.beigegris #txt{color:#191F25}

#msg{position:absolute;left:20px;top:200px;color:#fff;background:#a33;font-size:30px;padding:10px;display:none;z-index:9}