/* Accueil Aiskill Academy : univers « flux lumineux » bleu nuit. */
:root{
  --sc-canvas:#050d1d; --sc-surface:#0b1830; --sc-ink:#e8f1ff; --sc-ink-soft:#93a7c4;
  --sc-accent:#38bdf8; --sc-accent-ink:#03101f;
  --sc-font-display:"Space Grotesk","Inter",system-ui,sans-serif;
  --sc-font-text:"Inter",system-ui,sans-serif;
  --sc-shadow-color:218 70% 3%;
  --glass:rgba(12,26,50,.62); --glass-line:rgba(125,180,255,.16);
  --grad:linear-gradient(100deg,#3b82f6,#38bdf8 50%,#2dd4bf);
  color-scheme:dark;
}
main{position:relative;z-index:1}
.skip{position:fixed;left:-999px;top:8px;z-index:100;background:var(--sc-ink);color:var(--sc-canvas);padding:10px 16px;border-radius:8px}
.skip:focus{left:8px}
.glassy,.board,.row,.frag,.viz,.big,.panel{background:var(--glass);border:1px solid var(--glass-line);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}

/* barre */
.site-bar{position:fixed;inset:0 0 auto 0;z-index:var(--sc-z-chrome);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px var(--sc-gutter);background:rgba(5,13,29,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--glass-line)}
.site-bar nav{display:flex;align-items:center;gap:var(--sc-4)}
.mark{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--sc-font-display);font-weight:700;font-size:1.05rem}
.mark img{width:48px;height:48px}
/* titre du menu : même lettrage en relief semi-transparent que le titre central, en petit */
.brand3d--sm{font-family:var(--sc-font-display);font-weight:700;font-size:1.12rem;letter-spacing:.08em;white-space:nowrap;line-height:1;
  color:rgba(255,255,255,.55);-webkit-text-stroke:.6px rgba(255,255,255,.8);
  text-shadow:0 1px 0 rgba(190,226,255,.45),0 2px 0 rgba(140,196,252,.35),0 3px 0 rgba(84,156,238,.26),0 4px 2px rgba(0,8,24,.5),0 0 14px rgba(56,189,248,.3)}
@media (max-width:560px){.brand3d--sm{font-size:.92rem;letter-spacing:.05em}.mark img{width:40px;height:40px}}
.navlink{text-decoration:none;color:var(--sc-ink-soft);padding:10px 6px;font-size:var(--sc-t-sm);transition:color var(--sc-d-fast) var(--sc-ease-out)}
.navlink:hover{color:var(--sc-ink)}
@media (max-width:560px){.navlink{display:none}.mark{font-size:.95rem}}

/* CTA */
.cta{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 var(--sc-6);border-radius:12px;background:var(--grad);color:var(--sc-accent-ink);font-family:var(--sc-font-display);font-weight:700;font-size:var(--sc-t-base);text-decoration:none;box-shadow:0 0 0 1px rgba(125,211,252,.4),0 8px 30px rgba(56,189,248,.35);transition:transform var(--sc-d-base) var(--sc-ease-out)}
.cta:hover{transform:translateY(-2px)}
.cta:active{transform:scale(.97)}
.cta--sm{min-height:44px;padding:0 var(--sc-5);font-size:var(--sc-t-sm)}
.cta--lg{min-height:60px;padding:0 var(--sc-8);font-size:var(--sc-t-lg)}
.hero__copy .cta{margin-top:var(--sc-6)}

/* 1 · hero : nœuds + hexagone au point de convergence des faisceaux (26 % de la hauteur) */
.hero__copy{max-width:min(58rem,88vw)}
/* titre du hero réduit de 30 % (taille --sc-t-3xl × 0,7) */
.hero__copy h1{font-size:clamp(1.96rem,1.33rem + 2.94vw,3.5rem)}
.hero__copy .sc-lede{margin-top:var(--sc-5)}
/* portail AISA : fixe, toujours visible, piloté par js/bg.js (plongée, flash, monde à l'envers) */
.hub{position:fixed;left:50%;top:26%;width:clamp(84px,9vw,120px);height:auto;translate:-50% -50%;z-index:40;pointer-events:none;filter:drop-shadow(0 0 24px rgba(56,189,248,.55));will-change:transform,top,filter}
.nodes{position:absolute;inset:0;z-index:2;pointer-events:none}
.node{position:absolute;top:calc(26% - clamp(84px,9vw,120px) / 2 - 4.5rem);display:flex;flex-direction:column;gap:2px}
.node b{font-family:var(--sc-font-display);font-weight:700;font-size:var(--sc-t-lg);letter-spacing:.06em;text-transform:uppercase}
.node span{font-size:var(--sc-t-sm);color:var(--sc-ink-soft)}
.node--l{left:var(--sc-gutter);top:12%}
.node--r{right:var(--sc-gutter);top:12%;text-align:right}
/* titre central, posé sur la boule de lumière (26 % de la hauteur) */
.node--c{left:50%;top:26%;translate:-50% -50%;text-align:center;align-items:center;gap:.5rem}
.node--c .brand3d{
  font-size:clamp(1.35rem,5.4vw,4.4rem);letter-spacing:.08em;white-space:nowrap;line-height:1;
  color:rgba(255,255,255,.5);-webkit-text-stroke:1px rgba(255,255,255,.75);
  /* relief 3D : tranches successives bleutées sous la lettre semi-transparente, puis ombre portée */
  text-shadow:0 1px 0 rgba(200,232,255,.45),0 2px 0 rgba(170,214,255,.4),0 3px 0 rgba(140,196,252,.35),
    0 4px 0 rgba(110,176,246,.3),0 5px 0 rgba(84,156,238,.26),0 6px 0 rgba(60,136,230,.22),
    0 8px 2px rgba(0,8,24,.45),0 14px 24px rgba(0,8,24,.55),0 0 30px rgba(56,189,248,.35)}
.node--c .tagline{font-family:var(--sc-font-display);font-weight:700;font-size:clamp(1.2rem,2.9vw,2.2rem);letter-spacing:.02em;
  background:linear-gradient(100deg,#60a5fa,#38bdf8 45%,#5eead4);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 6px rgba(3,10,25,.95)) drop-shadow(0 0 14px rgba(3,10,25,.8)) drop-shadow(0 2px 12px rgba(45,212,191,.4))}
@media (max-width:560px){.node--c .brand3d{letter-spacing:.04em}}
.frags{position:absolute;inset:0;z-index:1}
.frag{position:absolute;left:var(--x);top:var(--y);rotate:var(--r);white-space:nowrap;padding:.55rem 1rem;border-radius:10px;color:var(--sc-ink-soft);font-size:var(--sc-t-sm);box-shadow:var(--sc-e2)}
@media (max-width:860px){
  .node--l,.node--r{display:none}
  .frags{display:none}
}

/* 2 · tournant */
.panel{border-radius:20px;padding:clamp(1.5rem,4vw,3.5rem);box-shadow:var(--sc-e3)}
.turn .sc-wrap.panel{width:calc(100% - 2 * var(--sc-gutter));padding-inline:clamp(1.5rem,4vw,3.5rem)}
.turn__grid{display:grid;grid-template-columns:1.3fr 1fr;gap:var(--sc-8);align-items:end}
@media (max-width:860px){.turn__grid{grid-template-columns:1fr;gap:var(--sc-6)}}

/* 3 · pic */
.peak{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--sc-7);align-items:center;padding:6rem var(--sc-gutter) 3rem}
.peak__copy{display:grid}
.peak__copy>*{grid-area:1/1;max-width:16ch}
.board{position:relative;padding:var(--sc-5);border-radius:18px;--board:clamp(0, calc((var(--sc-p) - .52) / .22), 1);background:rgba(12,26,50,calc(var(--board) * .62));border-color:rgba(125,180,255,calc(var(--board) * .16));box-shadow:0 20px 60px rgba(0,8,24,calc(var(--board) * .6))}
.board__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--sc-4);font-family:var(--sc-font-display);font-weight:700;opacity:var(--board)}
.live{display:inline-flex;align-items:center;gap:8px;font-size:var(--sc-t-xs);letter-spacing:.1em;text-transform:uppercase;color:#5eead4;padding:4px 10px;border:1px solid rgba(94,234,212,.35);border-radius:8px}
.live i{width:7px;height:7px;border-radius:50%;background:#2dd4bf;box-shadow:0 0 10px #2dd4bf}
.board__prompt{position:relative;margin:0 0 var(--sc-4);padding:var(--sc-3) var(--sc-4);border-radius:12px;background:rgba(59,130,246,.16);border:1px solid rgba(56,189,248,.4);display:flex;gap:var(--sc-3);flex-wrap:wrap;align-items:baseline;font-size:var(--sc-t-sm)}
.board__prompt .sc-label{color:var(--sc-accent)}
.board__rows{list-style:none;margin:0;padding:0;display:grid;gap:var(--sc-2)}
.row{--t:clamp(0, calc((var(--sc-p) - var(--s)) / .26), 1);--e:calc(var(--t) * var(--t) * (3 - 2 * var(--t)));
  display:flex;justify-content:space-between;gap:var(--sc-3);align-items:center;padding:.8rem 1rem;border-radius:10px;font-size:var(--sc-t-sm);
  width:calc((.58 + .42 * var(--e)) * 100%);
  transform:translate(calc((1 - var(--e)) * var(--dx)),calc((1 - var(--e)) * var(--dy))) rotate(calc((1 - var(--e)) * var(--rot)));
  color:color-mix(in oklab,var(--sc-ink-soft),var(--sc-ink) calc(var(--e) * 100%));will-change:transform}
.row::before{content:"";width:8px;height:8px;border-radius:2px;rotate:45deg;background:var(--grad);flex:none;transform:scale(var(--e));box-shadow:0 0 10px rgba(56,189,248,.8)}
.row span{flex:1}
.row em{font-style:normal;font-family:var(--sc-font-mono);font-size:var(--sc-t-xs);letter-spacing:var(--sc-track-wide);text-transform:uppercase;color:#5eead4;opacity:var(--e);white-space:nowrap}
@media (max-width:860px){
  .peak{grid-template-columns:1fr;align-content:start;gap:var(--sc-4);padding-top:5rem}
  .peak__copy>*{max-width:none;font-size:var(--sc-t-xl)}
  .row{--dx:0px!important;--dy:0px!important}
}
@media (prefers-reduced-motion:reduce){
  .row{--e:1!important;transform:none!important}
  .board{--board:1}
}

/* 4 · programmes (les cartes sont en 3D derrière ; ici le texte lisible et les liens) */
.progs__title{position:absolute;top:5.5rem;left:var(--sc-gutter);margin:0;color:#c4b5fd;font-size:var(--sc-t-sm)}
.progs__list{list-style:none;margin:0;padding:0}
.prog{position:absolute;left:var(--sc-gutter);bottom:clamp(2rem,7vh,5rem);max-width:min(26rem,80vw);display:flex;flex-direction:column;align-items:flex-start;gap:var(--sc-2);
  padding:var(--sc-5);border-radius:16px;background:rgba(10,8,28,.55);border:1px solid rgba(196,181,253,.22);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.prog .sc-label{color:#f0abfc}
.prog h3{margin:0;font-size:var(--sc-t-xl)}
.prog p{margin:0;color:var(--sc-ink-soft)}
.prog .cta{margin-top:var(--sc-3)}
@media (max-width:860px){
  .prog{right:var(--sc-gutter);max-width:none;bottom:clamp(4.5rem,12vh,7rem);padding:var(--sc-4)}
  .prog p{font-size:var(--sc-t-sm)}
}

/* liens des programmes : masqués (les cartes 3D sont cliquables), affichés au focus clavier */
.progs__list{position:absolute;left:var(--sc-gutter);bottom:2rem;z-index:5}
.prog-link{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.prog-link:focus{position:static;width:auto;height:auto;clip:auto;white-space:normal;display:block;max-width:min(26rem,80vw);padding:var(--sc-4);border-radius:12px;background:rgba(10,8,28,.85);border:1px solid rgba(196,181,253,.4);text-decoration:none}

/* 4 bis · niveaux (ancien rail, non utilisé) */
.rail{height:100%;align-items:center;gap:var(--sc-7);padding:0 var(--sc-gutter)}
.rail__lead{flex:none;width:min(30rem,78vw)}
.item{flex:none;width:min(24rem,78vw);display:flex;flex-direction:column;gap:var(--sc-3)}
.item p{margin:0;color:var(--sc-ink-soft);max-width:34ch}
.more{align-self:flex-start;margin-top:var(--sc-2);padding:.65rem 0;color:var(--sc-accent);font-weight:500;text-underline-offset:.3em}
.viz{height:12rem;border-radius:16px;box-shadow:var(--sc-e2);display:flex;gap:var(--sc-2);padding:var(--sc-5);font-family:var(--sc-font-mono);font-size:var(--sc-t-xs);color:var(--sc-ink-soft);margin-bottom:var(--sc-3)}
.viz span{padding:.5rem .8rem;border-radius:8px;border:1px solid rgba(125,180,255,.28);width:max-content}
.viz--1{align-items:center;justify-content:center;font-size:var(--sc-t-base)}
.viz--1 span{border-color:#3b82f6;color:#bfdbfe;box-shadow:0 0 18px rgba(59,130,246,.35)}
.viz--2{flex-direction:column;justify-content:center}
.viz--2 span:nth-child(2){margin-left:1.6rem}
.viz--2 span:nth-child(3){margin-left:3.2rem;border-color:#38bdf8;color:#bae6fd;box-shadow:0 0 18px rgba(56,189,248,.35)}
.viz--3{align-items:center;justify-content:center}
.viz--3 span:last-child{border-color:#2dd4bf;color:#99f6e4;box-shadow:0 0 18px rgba(45,212,191,.35)}
.viz--3 b{width:1.4rem;height:2px;background:var(--grad);flex:none}

/* 5 · choix */
.choice__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sc-8);align-items:center}
@media (max-width:860px){.choice__grid{grid-template-columns:1fr;gap:var(--sc-6)}}
.choice__panel{display:grid;gap:var(--sc-4)}
.big{display:flex;flex-direction:column;gap:var(--sc-2);padding:var(--sc-6);border-radius:16px;box-shadow:var(--sc-e2);text-decoration:none;color:var(--sc-ink-soft);transition:border-color var(--sc-d-base) var(--sc-ease-out),transform var(--sc-d-base) var(--sc-ease-out)}
.big .sc-display{color:var(--sc-ink);padding-bottom:.1em}
.big:hover{border-color:rgba(56,189,248,.6);transform:translateY(-3px)}

/* 6 · fermeture */
.close{display:grid;place-items:center;text-align:center}
.close__inner{display:flex;flex-direction:column;align-items:center;gap:var(--sc-7);padding:0 var(--sc-gutter);max-width:70rem}
/* pied de page : même verre sombre que l'en-tête, mais plus discret */
.foot{position:fixed;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:4px 24px;padding:8px var(--sc-gutter);color:var(--sc-ink-soft);font-size:.8rem;z-index:60;border-top:1px solid var(--glass-line);background:rgba(5,13,29,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.foot__mark{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--sc-ink-soft);opacity:.85}
.foot__mark img{width:24px;height:24px}
.foot__legal{display:flex;flex-wrap:wrap;gap:0 20px}
.foot a{padding:8px 0;color:var(--sc-ink-soft);text-decoration:none;transition:color var(--sc-d-fast) var(--sc-ease-out)}
.foot a:hover,.foot a:focus-visible{color:var(--sc-ink)}
@media (max-width:560px){.foot{justify-content:center;text-align:center}.foot__legal{justify-content:center;gap:0 14px}}

/* le pied de page fixe ne doit pas masquer le bouton du hero */
.sc-copy--lead.hero__copy{bottom:clamp(4.5rem,13vh,9rem)}

/* ===== Écran de chargement : sous le header et le footer (z-index 60), au-dessus de tout le reste ===== */
html.is-loading{overflow:hidden}
#loader{position:fixed;inset:0;z-index:50;background:#050d1d;transition:opacity .7s cubic-bezier(.23,1,.32,1)}
#loader canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#loader.is-done{opacity:0;pointer-events:none}
.ld-pct{position:absolute;translate:-50% -50%;font-family:var(--sc-font-display);font-weight:700;font-size:clamp(.95rem,2.4vw,1.4rem);letter-spacing:.02em;color:#04101f;font-variant-numeric:tabular-nums;
  text-shadow:0 0 8px rgba(255,255,255,.55);pointer-events:none}

/* bouton final : statique (ni aimant, ni soulèvement au survol) */
.cta--lg,.cta--lg:hover,.cta--lg:active{transform:none!important;translate:none}

@media (max-width:560px){.foot{padding:4px 12px;gap:0 12px}.foot__mark span{display:none}.foot__legal{gap:0 12px;justify-content:center}.foot a{font-size:.72rem;padding:9px 0}}

@media (max-width:560px){footer.site-foot .foot__mark,.foot .foot__mark{display:none}}