/* Site vitrine Neonium. Un ciel de nuit : étoiles, constellations au trait fin, détails d'atlas céleste.
   Le cyan du launcher sert aux actions et aux états, le rouge adouci n'appartient qu'à la lune.
   Aucune lueur colorée : une étoile est un petit point clair, rien de plus. */
:root{
  --bg:#0b0b10; --bande:#101017; --surface:#15151d; --surface-2:#1c1c26; --edge:#262633;
  --text:#f2f2f7; --muted:#a3a3b8;
  --accent:#7cf5ff; --accent-2:#b56cff;
  --degrade:linear-gradient(100deg,#7cf5ff 0%,#9cb0ff 50%,#b56cff 100%);
  --lune:#ff5a62; --etoile:#f2f2f7; --trait:rgba(242,242,247,.34);
  --erreur:#ffb454;
  --display:"Sora","Segoe UI Variable Display","Segoe UI",system-ui,sans-serif;
  --body:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",sans-serif;
  --gouttiere:clamp(1.25rem,5vw,4rem);
  --rythme:clamp(4.5rem,10vw,9rem);
  --sortie:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
/* Tout est en rem : au-delà de 1920 px la page grandit d'un bloc (1440p, 4K) au lieu de flotter au milieu. */
html{font-size:clamp(16px,calc(16px + (100vw - 1920px) * .0073),30px);scroll-padding-top:5rem;
  -webkit-text-size-adjust:100%;color-scheme:dark}
html{background:var(--bg)}
body{color:var(--text);font-family:var(--body);font-size:1.0625rem;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{padding:0;list-style:none}
h1,h2{font-family:var(--display);font-weight:800;letter-spacing:-.035em;line-height:1.04;text-wrap:balance}
p{text-wrap:pretty}
::selection{background:var(--accent);color:var(--bg)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

.cadre{width:min(100% - 2 * var(--gouttiere),78rem);margin-inline:auto}
.evitement{position:fixed;left:1rem;top:-4rem;z-index:30;padding:.7rem 1rem;border-radius:.6rem;
  background:var(--text);color:var(--bg);font-weight:600}
.evitement:focus{top:1rem}

/* Barre */
.barre{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:1px solid var(--edge)}
.barre-ligne{display:flex;align-items:center;gap:2rem;height:4.25rem}
.marque{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--display);font-weight:800;
  font-size:1.2rem;letter-spacing:-.02em}
.marque img{width:1.75rem;height:1.75rem}
.barre nav{display:flex;gap:1.75rem;margin-left:auto;font-size:.95rem;font-weight:600;color:var(--muted)}
.barre nav a{position:relative;padding:.8rem 0;transition:color .15s}
.barre nav a::after{content:"";position:absolute;left:0;right:0;bottom:.45rem;height:2px;border-radius:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--sortie)}
.barre nav a:hover,.barre nav a:focus-visible{color:var(--text)}
.barre nav a:hover::after,.barre nav a:focus-visible::after{transform:scaleX(1)}

/* Ciel : un canvas fixe derrière toute la page (site.js). Sans JS il reste vide, le fond uni suffit. */
.ciel{position:fixed;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}

/* Progression du défilement : six étoiles, une par section, qui s'allument quand le trait les atteint ; la lune au bout
   passe de nouvelle à pleine. --p (0 à 1) est posé par site.js ; sans JS la barre n'existe pas. */
.progression{display:none;position:absolute;left:0;right:0;bottom:-4px;height:7px;pointer-events:none;
  background:radial-gradient(circle,rgba(242,242,247,.3) 1.5px,transparent 2px) 0 0/calc(100% / 6) 100%}
.js .progression{display:block}
.progression::before{content:"";position:absolute;inset:0;
  background:radial-gradient(circle,var(--etoile) 2px,transparent 2.6px) 0 0/calc(100% / 6) 100%,
    linear-gradient(var(--trait),var(--trait)) 0 50%/100% 1px no-repeat;
  clip-path:inset(0 calc((1 - var(--p,0)) * 100%) 0 0)}
.progression .phase{position:absolute;top:50%;left:clamp(.6rem,calc(var(--p,0) * 100%),calc(100% - .6rem));
  font-size:.95rem;transform:translate(-50%,-50%)}
/* Une phase de lune : disque masqué par un disque sombre qui glisse. --p : 0 nouvelle, 1 pleine. */
.phase{display:block;position:relative;width:1em;height:1em;border-radius:50%;overflow:hidden;background:var(--lune);
  outline:1px solid rgba(255,90,98,.6)}
.phase::after{content:"";position:absolute;inset:-1px;border-radius:50%;background:var(--bg);
  transform:translateX(calc(var(--p,0) * 104%))}

/* Boutons : la matière du bouton LAUNCH */
.bouton{display:inline-flex;align-items:center;justify-content:center;min-height:3.25rem;padding:.85rem 1.75rem;
  font-family:var(--display);font-size:1rem;font-weight:700;letter-spacing:-.01em;color:#0b0b10;
  background:var(--degrade);background-size:160% 100%;border:0;border-radius:.8rem;cursor:pointer;
  transition:transform .18s var(--sortie),background-position .4s var(--sortie)}
.bouton:hover{transform:translateY(-2px);background-position:100% 0}
.bouton:active{transform:translateY(1px) scale(.985);transition-duration:.06s}
.bouton:focus-visible{outline-offset:4px;border-radius:.8rem}
.bouton-petit{min-height:2.75rem;padding:.5rem 1.1rem;font-size:.9rem;border-radius:.65rem}
.lien-fleche{display:inline-flex;align-items:center;gap:.5rem;min-height:2.75rem;font-weight:600;
  background:linear-gradient(var(--accent),var(--accent)) no-repeat 0 calc(100% - .55rem)/0 2px;
  transition:background-size .3s var(--sortie)}
.lien-fleche::after{content:"";width:.5rem;height:.5rem;border:solid currentColor;border-width:0 2px 2px 0;
  transform:rotate(45deg) translate(-.1rem,-.1rem);transition:transform .25s var(--sortie)}
.lien-fleche:hover{background-size:100% 2px}
.lien-fleche:hover::after{transform:rotate(45deg) translate(.08rem,.08rem)}

/* Hero : la lune est le seul objet chaud de la page */
.hero{position:relative;display:grid;align-items:center;min-height:calc(100svh - 4.25rem);
  padding-block:clamp(2.5rem,6vh,5rem);overflow:clip}
.hero-grille{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;gap:clamp(1.5rem,4vw,4rem)}
.hero h1{font-size:clamp(3rem,7vw,6.5rem)}
.hero h1 span{display:block}
.hero h1 .genre{margin-top:1.1rem;font-size:clamp(1.15rem,2.5vw,2.35rem);font-weight:700;letter-spacing:-.025em;line-height:1.15}
.accroche{max-width:34rem;margin-top:1.4rem;font-size:clamp(1.0625rem,1.35vw,1.25rem);color:var(--muted)}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem;margin-top:2.4rem}
.cta-note{margin-top:1.1rem;font-size:.9rem;color:var(--muted)}
/* Carte du ciel : le croissant du logo tracé au trait, ses étoiles, un cercle gradué, les points cardinaux. */
.carte{display:block;width:min(100%,34rem);margin-left:auto;overflow:visible}
.carte circle,.carte path{fill:none;vector-effect:non-scaling-stroke}
.c-bord{stroke:var(--edge);stroke-width:1}
.c-grad{stroke:rgba(242,242,247,.22);stroke-width:5;stroke-dasharray:.8 9.2}
.c-grad-fort{stroke:rgba(242,242,247,.5);stroke-width:11;stroke-dasharray:1 59}
.c-orbite{stroke:rgba(242,242,247,.16);stroke-width:1;stroke-dasharray:2 7}
.c-cardinaux text,.e-noms text{fill:var(--muted);font:600 11px var(--display);letter-spacing:.14em;text-anchor:middle}
.c-voisine{stroke:var(--trait);stroke-width:1}
.carte .c-etoiles circle,.epee .e-etoiles circle{fill:var(--etoile)}
.c-lointaines{opacity:.75}
.carte .c-lune{fill:rgba(255,90,98,.1);stroke:var(--lune);stroke-width:1.6;stroke-linejoin:round}

/* Sections */
.section{padding-block:var(--rythme)}
.section-bande{background:rgba(242,242,247,.028)}
.section h2{font-size:clamp(2rem,3.7vw,3.25rem)}
.entete{max-width:44rem;margin-bottom:clamp(2rem,4vw,3.5rem)}
.entete p,.chapo{margin-top:1.1rem;max-width:36rem;font-size:1.125rem;color:var(--muted)}
.entete-double{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;max-width:none}
.entete-double>div:first-child{max-width:44rem}

/* Captures : un bord, une ombre neutre, rien d'autre */
.ecran{border:1px solid var(--edge);border-radius:.9rem;overflow:hidden;background:var(--surface);
  box-shadow:0 2.5rem 5rem -1.5rem rgba(0,0,0,.7)}
.ecran img{width:100%}
.ecran img[hidden]{display:none}

/* Onglets : le soulignement cyan de la navigation du launcher */
.onglets{display:flex;gap:1.75rem;flex:none;border-bottom:1px solid var(--edge)}
.onglets button{position:relative;min-height:2.75rem;padding:.5rem .1rem;font:600 1rem var(--body);
  color:var(--muted);background:none;border:0;cursor:pointer;transition:color .15s}
.onglets button::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:2px;
  background:var(--accent);transform:scaleX(0);transition:transform .3s var(--sortie)}
.onglets button:hover{color:var(--text)}
.onglets [aria-selected="true"]{color:var(--text)}
.onglets [aria-selected="true"]::after{transform:scaleX(1)}

.liste-modules{display:flex;flex-wrap:wrap;gap:.6rem 0;margin-top:2.25rem;font-family:var(--display);
  font-weight:600;font-size:clamp(1rem,1.5vw,1.3rem);letter-spacing:-.01em}
.liste-modules li{display:flex;align-items:center}
.liste-modules li:not(:last-child)::after{content:"";width:.3rem;height:.3rem;margin-inline:1rem;border-radius:50%;background:var(--edge)}

/* Performances */
.duo{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:clamp(2rem,6vw,6rem)}
.faits{margin-top:2.25rem}
.faits>div{display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;padding:.9rem 0;border-top:1px solid var(--edge)}
.faits>div:last-child{border-bottom:1px solid var(--edge)}
.faits dt{font-weight:600}
.faits dd{color:var(--muted);text-align:right}
.faits-ligne{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1.5rem,3vw,3rem);margin-top:clamp(2rem,4vw,3.5rem)}
.faits-ligne>div,.faits-ligne>div:last-child{display:block;padding:1.25rem 0 0;border-bottom:0}
.faits-ligne dt{font-family:var(--display);font-size:1.2rem;font-weight:700;letter-spacing:-.01em}
.faits-ligne dd{margin-top:.5rem;text-align:left}

/* Capes : la face que le client dessine en jeu (fond noir, lune au-dessus du milieu) */
.capes{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(1rem,2.4vw,2.25rem)}
.capes li{display:grid;align-content:start;gap:.15rem}
.capes b{margin-top:1rem;font-family:var(--display);font-weight:700;letter-spacing:-.01em}
.capes li>span:last-child{font-size:.95rem;color:var(--muted)}
.cape{display:grid;place-items:center;aspect-ratio:160/256;padding-bottom:6%;background:#050507;
  border:1px solid var(--edge);border-radius:.5rem;overflow:hidden;transition:transform .35s var(--sortie)}
.cape img{width:80%}
.cape-planche{padding:0}
.cape-planche img{width:100%;height:100%;object-fit:cover}
.capes li:hover .cape{transform:translateY(-4px)}
.cape-rgb img{filter:hue-rotate(40deg)}

/* Launcher */
.ecran-bande img{aspect-ratio:2280/300;object-fit:cover}

/* Accès */
.etapes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.5rem,4vw,4rem);
  margin-bottom:clamp(2.5rem,4vw,3.5rem);counter-reset:e}
.etapes li{counter-increment:e;display:grid;align-content:start;gap:.5rem;padding-top:1.25rem;border-top:1px solid var(--edge)}
.etapes .phase{font-size:2.25rem}
.section-bande .phase::after{background:var(--bande)}
.etapes b::before{content:counter(e) ". "}
.etapes b{margin-top:1rem;font-family:var(--display);font-size:1.2rem;font-weight:700;letter-spacing:-.01em}
.etapes span{color:var(--muted)}

/* Pied : la constellation de l'Épée. Chaque trait se relie quand --t (0 à 1, site.js) atteint son rang --d. */
.pied{padding-block:clamp(3rem,7vw,6rem) 2.5rem;border-top:1px solid var(--edge);overflow:clip}
.epee{display:block;width:100%;height:auto;overflow:visible}
.e-traits path{fill:none;stroke:var(--trait);stroke-width:1.2;vector-effect:non-scaling-stroke;stroke-dasharray:1;
  stroke-dashoffset:clamp(0,calc(1 - (var(--t,1) * 6 - var(--d,0))),1)}
.e-noms text{font-size:15px;text-anchor:start}
.e-noms .e-titre{font-size:13px;letter-spacing:.3em}
.pied-ligne{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);align-items:start;
  gap:1rem clamp(1.5rem,4vw,4rem);margin-top:clamp(2.5rem,5vw,4.5rem);padding-top:1.5rem;
  border-top:1px solid var(--edge);font-size:.875rem;color:var(--muted)}
.pied .marque{font-size:1rem;color:var(--text)}
.pied .marque img{width:1.4rem;height:1.4rem}

/* Dialogue de connexion (contenu injecté par telecharger.js) */
.dlg{margin:auto;border:1px solid var(--edge);border-radius:1.1rem;background:var(--surface);color:var(--text);
  padding:0;max-width:27.5rem;width:calc(100% - 2rem);box-shadow:0 2.5rem 6rem rgba(0,0,0,.6)}
.dlg::backdrop{background:rgba(5,5,8,.78)}
#dlg-contenu{padding:2.5rem 1.9rem 1.9rem;text-align:center}
.dlg-fermer{position:absolute;top:.6rem;right:.6rem;display:grid;place-items:center;width:2.75rem;height:2.75rem;
  background:none;border:0;border-radius:.6rem;color:var(--muted);cursor:pointer;transition:color .15s,background-color .15s}
.dlg-fermer:hover{color:var(--text);background:var(--surface-2)}
.dlg h3{font-family:var(--display);font-size:1.4rem;font-weight:700;letter-spacing:-.02em;line-height:1.15;margin-bottom:.65rem}
.dlg p{color:var(--muted);font-size:.95rem}
.dlg p b{color:var(--text)}
.dlg-code{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:1.9rem;font-weight:700;letter-spacing:.14em;
  color:var(--accent);background:var(--bg);border:1px solid var(--edge);border-radius:.75rem;
  padding:1.1rem 1rem 1.1rem calc(1rem + .14em);margin:1.15rem 0;user-select:all;overflow-wrap:anywhere}
.dlg a.lien{color:var(--accent);font-weight:600}
.dlg .bouton{margin-top:1.25rem;width:100%}
.dlg-erreur{color:var(--erreur);font-size:.9rem;margin-top:.9rem}
.spin{width:1.9rem;height:1.9rem;margin:.65rem auto 0;border:3px solid var(--edge);border-top-color:var(--accent);
  border-radius:50%;animation:tour 1s linear infinite}
@keyframes tour{to{transform:rotate(360deg)}}

/* Éclipse d'entrée : cachée par défaut, elle n'existe que si le mouvement est permis (voir plus bas). */
.chargement{display:none}

/* Mouvement : l'écran de chargement, l'entrée du hero, la cape qui change de couleur au survol. */
@keyframes monte{from{opacity:0;transform:translateY(1.25rem)}}
@keyframes monte-b{from{opacity:0;transform:translateY(1.25rem)}}
@keyframes teinte{from{filter:hue-rotate(40deg)}to{filter:hue-rotate(400deg)}}
@keyframes fondu{from{opacity:0}}
@keyframes fondu-b{from{opacity:0}}
@keyframes rideau{to{opacity:0;visibility:hidden}}
@keyframes trace{to{stroke-dashoffset:0}}
@keyframes trace-b{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes parait{to{opacity:1}}
@media(prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  /* Écran de chargement. Sans JS : le trait se trace en 1 s, le logo se remplit, le rideau se lève à 2,2 s.
     Avec JS (.pilote) : trait, étoiles et remplissage suivent le vrai chargement ; le rideau CSS reste le garde-fou. */
  :root{--entree:1.95s}
  .deja,.entre{--entree:0s}
  .chargement{display:grid;place-content:center;justify-items:center;position:fixed;inset:0;z-index:50;
    background:var(--bg);animation:rideau .3s 1.9s ease-in forwards}
  .deja .chargement{display:none}
  .chargement.leve{opacity:0;pointer-events:none;transition:opacity .3s ease-in}
  .chargement svg{width:min(52vmin,15rem);overflow:visible}
  .chargement .trace{fill:none;stroke:url(#deg-lune);stroke-width:2;stroke-linejoin:round;stroke-dasharray:1;
    stroke-dashoffset:1;animation:trace 1s .3s ease-in-out forwards}
  .chargement .points circle{fill:var(--etoile);opacity:0;animation:parait .2s calc(.3s + var(--i) * .11s) forwards}
  .chargement .remplissage{fill:url(#deg-lune);opacity:0;animation:parait .25s 1.4s forwards}
  .chargement.pilote .trace,.chargement.pilote .points circle,.chargement.pilote .remplissage{animation:none}
  .chargement.pilote .points circle{transition:opacity .2s}
  .chargement.pilote .remplissage{transition:opacity .25s}
  .chargement.plein .remplissage{opacity:1}
  .charge-titre{margin-top:2rem;font-family:var(--display);font-size:1.9rem;font-weight:700;letter-spacing:-.02em}
  .charge-titre b{font-weight:inherit;color:var(--accent)}
  .charge-etat{margin-top:.5rem;font-size:.95rem;color:var(--muted);font-variant-numeric:tabular-nums}

  /* Entrée du hero : le texte monte, le croissant se trace, ses étoiles paraissent une à une. */
  .hero-texte>*{animation:monte .9s var(--entree) var(--sortie) both}
  .hero-texte>:nth-child(2){animation-delay:calc(var(--entree) + .09s)}
  .hero-texte>:nth-child(3){animation-delay:calc(var(--entree) + .18s)}
  .hero-texte>:nth-child(4){animation-delay:calc(var(--entree) + .27s)}
  .carte{animation:fondu 1s var(--entree) ease-out both}
  .carte .c-lune{stroke-dasharray:1;stroke-dashoffset:1;animation:trace-b 1.8s calc(var(--entree) + .2s) cubic-bezier(.6,0,.2,1) both}
  .carte .c-contour circle{animation:fondu .4s calc(var(--entree) + .3s + var(--i) * .2s) both}
  /* .entre (posé par site.js quand le rideau se lève) : mêmes animations sous un autre nom, donc relancées. */
  .entre .hero-texte>*{animation-name:monte-b}
  .entre .carte,.entre .carte .c-contour circle{animation-name:fondu-b}
  .entre .carte .c-lune{animation-name:trace}
  .ecran img:not([hidden]){animation:fondu .35s ease-out}
  .capes li:hover .cape-rgb img{animation:teinte 3.2s linear infinite}
  .dlg[open]{animation:monte .4s var(--sortie)}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important}
  .spin{animation-duration:2.5s}
}

/* Tablette */
@media(max-width:60rem){
  .faits-ligne{grid-template-columns:repeat(2,minmax(0,1fr))}
  .barre nav{display:none}
  .barre .bouton{margin-left:auto}
  .hero-grille{grid-template-columns:minmax(0,1fr) minmax(0,.6fr)}
  .duo{grid-template-columns:1fr}
  .entete-double{flex-direction:column;align-items:flex-start}
  .capes{grid-template-columns:repeat(5,minmax(8.5rem,1fr));overflow-x:auto;margin-inline:calc(-1 * var(--gouttiere));
    padding:.5rem var(--gouttiere) 1rem;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:var(--edge) transparent}
  .capes li{scroll-snap-align:center}
  .pied-ligne{grid-template-columns:1fr}
}
/* Téléphone */
@media(max-width:40rem){
  .hero{min-height:0;padding-block:1.5rem 4rem}
  .hero-grille{grid-template-columns:1fr}
  .hero-lune{order:-1}
  .carte{width:min(64vw,16rem);margin-inline:0 auto}
  .c-cardinaux,.e-noms{display:none}
  .cta{flex-direction:column;align-items:stretch;gap:.5rem}
  .cta .lien-fleche{justify-content:center}
  .section>.cadre>.bouton{width:100%}
  .faits-ligne,.etapes{grid-template-columns:1fr}
  .faits:not(.faits-ligne)>div{flex-direction:column;gap:.1rem}
  .faits dd{text-align:left}
  .ecran{border-radius:.6rem}
  /* Le menu entier serait illisible à cette largeur : on recadre sur les cartes de modules. */
  #modules .ecran img{aspect-ratio:1;object-fit:cover;object-position:42% 70%}
  /* La bande du launcher est trop fine sur un téléphone : on recadre sur le bouton LAUNCH. */
  .ecran-bande img{aspect-ratio:980/300}
  .liste-modules li:not(:last-child)::after{margin-inline:.7rem}
}