/* ÆL-SIRIL V0.32 — Horizons de lumière | visual-only layer.
   Scientific data, coordinate frames, camera projections and engine pixels untouched. */
:root{--x32-gold:#ebce92;--x32-azure:#9cddf3;--x32-edge:#a4dcf144;--x32-glow:#70a6dc}
@keyframes x32-drift{0%,100%{transform:translate3d(-1.2%,0,0)}50%{transform:translate3d(1.2%,-.8%,0)}}
@keyframes x32-breathe{0%,100%{opacity:.30}50%{opacity:.57}}
@keyframes x32-reveal{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes x32-orbit{to{transform:rotate(360deg)}}
body.x32-ui :is(button,a,input,select):focus-visible{outline:2px solid #f7d89d!important;outline-offset:3px!important}
body.x32-ui :is(.panel,.glass,.hud.panel,.sidebar,.details,.sideglass){scrollbar-color:#62859b #091928}
/* Landmark: redesigned visual storytelling section */
.x32-chapters{position:relative;overflow:hidden;background:linear-gradient(180deg,#06101c 0%,#0a1a2a 51%,#06111d 100%);padding:68px max(20px,calc((100vw - 1200px)/2)) 78px;border-block:1px solid #90c2d82b;color:#f8efd9;isolation:isolate}
.x32-chapters::before{content:'';position:absolute;inset:-16%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 35% 40% at 25% 30%,#285d7744,transparent),radial-gradient(ellipse 39% 30% at 82% 68%,#816da52a,transparent);animation:x32-drift 25s ease-in-out infinite alternate}
.x32-chapters-head{display:flex;justify-content:space-between;gap:24px;align-items:end;margin-bottom:23px}
.x32-chapters-kicker{font:700 11px/1.4 system-ui;letter-spacing:.22em;text-transform:uppercase;color:var(--x32-gold)}
.x32-chapters h2{font:clamp(31px,4.3vw,55px)/1.1 Georgia,'Times New Roman',serif;margin:12px 0 9px;letter-spacing:-.025em;color:#ffebcb;text-wrap:balance}
.x32-chapters-desc{font:14px/1.65 system-ui;color:#bcd0dd;max-width:590px;margin:0}
.x32-chapters-badge{padding:11px 14px;border:1px solid #7faeb44b;border-radius:50px;background:#0f2938ab;color:#cce5f0;font:11px system-ui;white-space:nowrap}
.x32-cards{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:16px}
.x32-card{position:relative;display:flex;flex-direction:column;justify-content:space-between;min-height:360px;border:1px solid #a6c4d14d;border-radius:20px;padding:23px;color:white!important;text-decoration:none!important;overflow:hidden;isolation:isolate;background:#102035;box-shadow:0 18px 50px #0206129e,inset 0 1px #e2faf310;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.x32-card::before{content:'';position:absolute;z-index:-2;inset:-8%;background-image:linear-gradient(180deg,#05102416 0%,#07142430 36%,#030a15ed 100%),var(--x32-image);background-position:center;background-size:cover;transform:scale(1.04);transition:transform 1.2s cubic-bezier(.2,.6,.1,1),filter .5s;filter:saturate(.92)}
.x32-card::after{content:'';position:absolute;z-index:-1;inset:0;pointer-events:none;background:radial-gradient(circle at 84% 21%,var(--x32-tint,#5281b1) 0%,transparent 38%),linear-gradient(90deg,#00000031,transparent 70%);opacity:.7;transition:opacity .3s}
.x32-card:hover,.x32-card:focus-visible{transform:translateY(-5px);border-color:#f0d5a2ad;box-shadow:0 24px 56px #000a,0 0 40px #8bc9dc20}
.x32-card:hover::before{transform:scale(1.13);filter:saturate(1.12) brightness(1.08)}
.x32-card:hover::after{opacity:.92}
.x32-card-top{display:flex;align-items:center;justify-content:space-between;color:#f8e6bd;font:700 10px system-ui;letter-spacing:.16em;text-transform:uppercase}
.x32-card-mark{font:normal 32px Georgia;color:#eed69d;text-shadow:0 0 26px #f2cf938c}
.x32-card-copy{display:block}
.x32-card h3{font:clamp(23px,2.3vw,32px)/1.08 Georgia,serif;max-width:350px;color:#fff2d7;margin:0 0 11px}
.x32-card p{font:12px/1.65 system-ui;max-width:340px;color:#d5e3e8;margin:0 0 17px}
.x32-card-cta{display:inline-flex;gap:12px;align-items:center;border-top:1px solid #dee8d447;padding-top:12px;color:#f1d5a6;font:700 11px system-ui}
.x32-card-cta span{margin-left:auto;font-size:19px}
.x32-chapters-foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1px solid #9fb8c83e;padding-top:18px;margin-top:22px;font:12px/1.5 system-ui;color:#b7cddd}
/* Quiet sky optics in the observation engines: decorative only, no artificial reference stars. */
.x32-celestial-frame{position:fixed;inset:0;z-index:25;pointer-events:none;overflow:hidden;isolation:isolate}
.x32-celestial-frame::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 53% 45% at 48% 46%,transparent 38%,#0610263c 100%),linear-gradient(180deg,#3fa1c218,transparent 18%,transparent 79%,#09152352);opacity:.45;transition:opacity .3s ease}
.x32-celestial-frame::after{content:'';position:absolute;inset:17px;border:1px solid #a9cadd20;border-radius:12px;opacity:.55;mask-image:linear-gradient(90deg,#000 0%,transparent 29%,transparent 73%,#000 100%)}
.x32-edge-glow{position:absolute;width:50vw;height:50vw;right:-29vw;top:-33vw;border-radius:50%;background:radial-gradient(circle,#7aafcd24,transparent 65%);filter:blur(5px);animation:x32-breathe 17s ease-in-out infinite alternate}
.x32-orbital{position:absolute;left:-225px;top:38%;width:430px;height:430px;border:1px solid #b8d7dd20;border-radius:50%;transform:rotate(35deg);opacity:.64}
.x32-orbital::before{content:'';position:absolute;inset:24px;border:1px dashed #bdcda127;border-radius:50%}
.x32-orbital::after{content:'';position:absolute;left:50%;top:-2px;width:5px;height:5px;background:#e6d8b3;border-radius:50%;box-shadow:0 0 14px #aee9f7}
.x32-corners{position:absolute;inset:22px;background:linear-gradient(#b4dfed4f,#b4dfed4f) left top/33px 1px no-repeat,linear-gradient(#b4dfed4f,#b4dfed4f) left top/1px 33px no-repeat,linear-gradient(#b4dfed4f,#b4dfed4f) right top/33px 1px no-repeat,linear-gradient(#b4dfed4f,#b4dfed4f) right top/1px 33px no-repeat,linear-gradient(#b4dfed4f,#b4dfed4f) left bottom/33px 1px no-repeat,linear-gradient(#b4dfed4f,#b4dfed4f) left bottom/1px 33px no-repeat}
/* Artistic dust particles: only in 3D modes, when user explicitly chooses Cinématique. */
.x32-dust{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:26;opacity:.5}
body:not(.x32-cinema) .x32-dust{display:none}
/* Director’s lens: a useful control not competing with bottom navigation. */
.x32-director{position:fixed;z-index:975;left:50%;bottom:14px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;background:#071827e8;border:1px solid #9dc0d27b;border-radius:60px;box-shadow:0 12px 38px #0009,0 0 26px #70c6e81e;padding:6px 7px 6px 14px;backdrop-filter:blur(18px);max-width:min(94vw,560px);box-sizing:border-box;color:#eff0eb;font:12px system-ui}
.x32-director *{box-sizing:border-box}
.x32-director-mark{flex-shrink:0;font-size:17px;color:#eccb8d;line-height:1}
.x32-director-label{display:flex;flex-direction:column;gap:1px;min-width:0;margin-right:5px}
.x32-director-label strong{font:700 11px system-ui;white-space:nowrap;color:#f8e9cc}
.x32-director-label span{font:10px system-ui;color:#adc7d6;white-space:nowrap}
.x32-director select{border:1px solid #668b9e99;border-radius:30px;color:#f5e8d4;padding:8px 22px 8px 10px;background:#10293a;cursor:pointer;min-height:34px;font:11px system-ui;max-width:146px}
.x32-director button{border:1px solid #709aac66;background:#10283a;color:#e8e6d7;cursor:pointer;border-radius:50px;padding:8px 10px;min-height:34px;white-space:nowrap;font:700 11px system-ui}
.x32-director button:hover,.x32-director select:hover{border-color:#edcc99c9;background:#193e50}
.x32-director button[aria-pressed=true]{border-color:#edcb94;color:#ffe6b7;background:#1d4551}
.x32-director :is(button,select):focus-visible{outline:2px solid #f6d79a;outline-offset:3px}
.x32-director-note{position:fixed;bottom:70px;left:50%;transform:translateX(-50%);z-index:975;display:none;width:min(340px,85vw);background:#10293df4;border:1px solid #9bc0d67c;border-radius:14px;padding:14px 16px;color:#dceaf3;font:12px/1.6 system-ui;box-shadow:0 18px 50px #000a}
.x32-director-note:not([hidden]){display:block}
.x32-director-note[hidden]{display:none}
.x32-director-note strong{color:#f3daac}
body.x32-sobre .x32-celestial-frame{display:none}body.x32-sobre .x32-dust{display:none}
body.x32-equilibre .x32-celestial-frame::before{opacity:.24}body.x32-equilibre .x32-orbital{opacity:.35}
body.x32-cinema .x32-celestial-frame::before{opacity:.66}body.x32-cinema .x32-orbital{opacity:.68}
body.x32-cinema .x32-edge-glow{opacity:.78}
/* Cinematic effect is decorative, never changes observational data. */
body.x32-cinema[data-ael030-mode="voyage"] .x32-director,body.x32-cinema[data-ael030-mode="cosmos"] .x32-director{border-color:#e1c7959e}
.x32-progress{display:flex;gap:4px;align-items:center;font:10px system-ui;color:#99bed2}
.x32-progress i{width:4px;height:12px;border-radius:4px;background:#6bb2ca84;display:inline-block;animation:x32-breathe 2.4s infinite alternate}
.x32-progress i:nth-child(2){animation-delay:.5s;height:18px}.x32-progress i:nth-child(3){animation-delay:1s;height:8px}
/* Landing graphics improvement, make existing primary CTAs breathe */
body[data-ael-mode="portail"] .portal-hero::after{background:radial-gradient(ellipse 44% 57% at 76% 46%,#2b719318,transparent 75%),linear-gradient(90deg,#030a13ca,transparent 82%),linear-gradient(0deg,#040b13,transparent 32%)}
body[data-ael-mode="portail"] .portal-hero .action:first-child{box-shadow:0 0 0 1px #e6d2aa25,0 11px 42px #73c6cf2a}
body[data-ael-mode="portail"] .ael029-sky-instrument{filter:drop-shadow(0 0 38px #8dc4f344)}
@media(max-width:1040px){.x32-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.x32-cards .x32-card:first-child{grid-column:span 2;min-height:275px}.x32-card{min-height:290px}}
@media(max-width:730px){.x32-cards{grid-template-columns:1fr}.x32-cards .x32-card:first-child{grid-column:auto;min-height:280px}.x32-chapters{padding:44px 16px 48px}.x32-chapters-head{display:block}.x32-chapters-badge{display:inline-block;margin-top:13px}.x32-card{min-height:260px}.x32-orbital{display:none}.x32-celestial-frame::after{display:none}.x32-director{bottom:62px;gap:5px;padding:5px 6px;max-width:95vw}.x32-director-label span,.x32-progress,.x32-director button[data-x32-help]{display:none}.x32-director-label strong{font-size:10px}.x32-director select{max-width:112px;font-size:10px;padding:7px}.x32-director button{font-size:10px;padding:7px 8px}}
@media(max-width:420px){.x32-director-label{display:none}.x32-director{bottom:57px}.x32-director select{max-width:132px}}
@media(prefers-reduced-motion:reduce){.x32-chapters::before,.x32-edge-glow,.x32-progress i{animation:none!important}.x32-card,.x32-card::before{transition:none!important}.x32-dust{display:none!important}}
body.ael028-quiet .x32-edge-glow,body.x31-reduced-motion .x32-edge-glow{animation:none!important}