/* nova-universe.fr — feuille de style v2 (01/11/2026).
   Elvis : « plus design, moderne, futuriste, ultra premium… mais sobre, cohérent, qualitatif, pas flashy ».
   → nuit profonde, lignes fines, une seule couleur d'accent (cyan de la charte Nova), vidéos de fond assombries.
   Typo de la charte de l'univers : Outfit (titres et textes), Orbitron (étiquettes, chiffres). Aucun style en ligne (CSP). */

@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/assets/fonts/outfit-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/assets/fonts/outfit-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+A720-A7FF; }
@font-face { font-family: 'Orbitron'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('/assets/fonts/orbitron-latin.woff2') format('woff2'); }

:root {
  --nuit: #050a1c;
  --nuit-2: #0a1128;
  --nuit-3: #111a3a;
  --surface: rgba(255, 255, 255, .035);
  --surface-2: rgba(255, 255, 255, .06);
  --ligne: rgba(255, 255, 255, .08);
  --ligne-2: rgba(255, 255, 255, .14);
  --texte: #eef3ff;
  --doux: #a3afcf;
  --tres-doux: #6f7a9c;
  --cyan: #41f4ff;
  --cyan-doux: rgba(65, 244, 255, .14);
  --bleu: #3b7bff;
  --rose: #ff4fd8;
  --or: #ffc93d;
  --rayon: 18px;
  --ombre: 0 24px 60px rgba(0, 0, 0, .45);
  --largeur: 1240px;
  --titre: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --tech: 'Orbitron', 'Outfit', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
body {
  margin: 0; min-height: 100vh; color: var(--texte); font: 400 17px/1.7 var(--titre);
  background: var(--nuit);
  background-image: radial-gradient(1400px 700px at 50% -20%, rgba(59, 123, 255, .14), transparent 70%);
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--cyan); text-decoration: none; }
a:hover { color: #9ff8ff; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--titre); font-weight: 800; line-height: 1.08; letter-spacing: -.015em; margin: 0 0 .5em; }
h1 { font-size: clamp(2.3rem, 5.4vw, 4.2rem); }
h2 { font-size: clamp(1.9rem, 3.8vw, 3rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); letter-spacing: -.01em; }
p { margin: 0 0 1em; }
strong { font-weight: 700; color: #fff; }
.passer { position: absolute; left: -999px; top: 0; background: var(--cyan); color: #00121a; padding: .6em 1em; z-index: 100; }
.passer:focus { left: 0; }
.conteneur { width: min(var(--largeur), 100% - 40px); margin-inline: auto; }
.etroit { width: min(800px, 100% - 40px); margin-inline: auto; }
.accent { color: var(--cyan); }
.sr-titre { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ---------------------------------------------------------------- en-tête */
.entete { position: fixed; inset: 0 0 auto 0; z-index: 50; transition: background .3s ease, border-color .3s ease; border-bottom: 1px solid transparent; }
.entete.opaque, .page-interieure .entete { background: rgba(5, 10, 28, .82); backdrop-filter: blur(16px) saturate(130%); -webkit-backdrop-filter: blur(16px) saturate(130%); border-bottom-color: var(--ligne); }
.entete-int { display: flex; align-items: center; gap: 20px; min-height: 76px; }
.marque img { height: 44px; width: auto; }
.menu { margin-left: auto; }
.menu ul { list-style: none; display: flex; gap: 2px; margin: 0; padding: 0; align-items: center; }
.menu a { position: relative; display: block; padding: .5em .9em; color: #d6def5; font: 600 .95rem var(--titre); letter-spacing: .01em; }
.menu a::after { content: ''; position: absolute; left: .9em; right: .9em; bottom: .2em; height: 1px; background: var(--cyan); transform: scaleX(0); transition: transform .25s ease; }
.menu a:hover { color: #fff; }
.menu a:hover::after, .menu a[aria-current="page"]::after { transform: scaleX(1); }
.menu a[aria-current="page"] { color: #fff; }
.menu .menu-yt { display: none; }
.burger { display: none; margin-left: auto; background: transparent; border: 1px solid var(--ligne-2); color: #fff; width: 46px; height: 46px; border-radius: 12px; cursor: pointer; }
.burger svg { width: 22px; height: 22px; }

/* ---------------------------------------------------------------- boutons */
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: .6em; padding: .85em 1.5em; border-radius: 12px; font: 700 .98rem var(--titre); letter-spacing: .01em; border: 0; cursor: pointer; transition: transform .2s ease, background .2s ease, box-shadow .25s ease, color .2s ease; white-space: nowrap; }
.bouton svg { width: 1.15em; height: 1.15em; flex: none; }
.bouton-jouer { color: #00131b; background: var(--cyan); }
.bouton-jouer:hover { color: #00131b; background: #8ff9ff; box-shadow: 0 0 0 6px rgba(65, 244, 255, .12); transform: translateY(-1px); }
.bouton-clair, .bouton-rose { color: #fff; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px var(--ligne-2); }
.bouton-clair:hover, .bouton-rose:hover { color: #fff; background: rgba(255, 255, 255, .09); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); }
.bouton-yt { color: #fff; background: transparent; box-shadow: inset 0 0 0 1px var(--ligne-2); }
.bouton-yt svg { color: #ff3b52; }
.bouton-yt:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---------------------------------------------------------------- étiquettes « tech » */
.surtitre { display: inline-flex; align-items: center; gap: .8em; font: 600 .74rem var(--tech); letter-spacing: .28em; text-transform: uppercase; color: var(--cyan); margin: 0 0 1.1em; }
.surtitre::before { content: ''; width: 28px; height: 1px; background: currentColor; opacity: .7; }
.numero { font: 700 .8rem var(--tech); letter-spacing: .2em; color: var(--tres-doux); }
.chapo { font-size: clamp(1.08rem, 1.7vw, 1.25rem); line-height: 1.65; color: #c3cde8; max-width: 760px; }

/* ---------------------------------------------------------------- accueil : bandeau vidéo */
.une { position: relative; min-height: 100vh; min-height: 100svh; display: grid; align-items: center; overflow: hidden; isolation: isolate; }
.une-fond { position: absolute; inset: 0; z-index: -2; background: var(--nuit); }
.une-fond img, .une-fond video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.une-fond video { opacity: 0; transition: opacity 1.2s ease; }
.une-fond video.prete { opacity: 1; }
.une::before { content: ''; position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(180deg, rgba(5, 10, 28, .6) 0%, rgba(5, 10, 28, .22) 36%, rgba(5, 10, 28, .38) 68%, var(--nuit) 100%),
  radial-gradient(55% 45% at 50% 48%, rgba(5, 10, 28, .45), rgba(5, 10, 28, .2) 60%, rgba(5, 10, 28, .5)); }
.une::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
  background-size: 64px 64px; mask-image: radial-gradient(70% 60% at 50% 45%, #000, transparent); -webkit-mask-image: radial-gradient(70% 60% at 50% 45%, #000, transparent); }
.une-int { padding: 120px 0 90px; text-align: center; }
.une-titre { margin: 0; }
.une-logo { width: min(600px, 88%); margin: 0 auto 18px; filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .6)); }
.une-texte { font: 400 clamp(1.08rem, 2vw, 1.3rem)/1.6 var(--titre); color: #dbe3f8; max-width: 680px; margin: 0 auto 32px; text-shadow: 0 2px 20px rgba(0, 0, 0, .7); }
.une .actions { justify-content: center; }
.une-bas { position: absolute; left: 0; right: 0; bottom: 26px; display: flex; justify-content: space-between; align-items: end; pointer-events: none; }
.une-bas span { font: 600 .68rem var(--tech); letter-spacing: .3em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.defiler { width: 22px; height: 36px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .4); position: relative; }
.defiler::after { content: ''; position: absolute; left: 50%; top: 7px; width: 2px; height: 7px; margin-left: -1px; border-radius: 2px; background: #fff; animation: defile 1.8s ease-in-out infinite; }
@keyframes defile { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(10px); opacity: 0; } 100% { opacity: 0; } }
.chiffres { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; margin: 46px auto 0; padding: 0; list-style: none; max-width: 760px; border-top: 1px solid var(--ligne); }
.chiffres li { flex: 1; min-width: 140px; padding: 16px 10px 0; text-align: center; }
.chiffres strong { display: block; font: 700 1.6rem var(--tech); color: #fff; letter-spacing: .02em; }
.chiffres span { font: 500 .85rem var(--titre); color: var(--doux); }

/* ---------------------------------------------------------------- sections */
.section { padding: clamp(72px, 10vw, 140px) 0; position: relative; }
.section + .section { border-top: 1px solid var(--ligne); }
.section-sombre { background: linear-gradient(180deg, rgba(10, 17, 40, .7), rgba(5, 10, 28, .2)); }
.tete-section { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); align-items: end; gap: 28px 60px; margin-bottom: 48px; }
.tete-section h2 { margin: 0; }
.tete-section p { color: var(--doux); margin: 0; }
.tete-section .actions { justify-self: end; }

/* page intérieure : tête */
.tete-page { position: relative; padding: calc(76px + clamp(48px, 7vw, 96px)) 0 clamp(44px, 6vw, 76px); overflow: hidden; isolation: isolate; border-bottom: 1px solid var(--ligne); }
.tete-page::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 120% at 85% 0%, rgba(59, 123, 255, .2), transparent 60%); }
.tete-page.avec-image { min-height: min(78vh, 720px); display: grid; align-items: end; }
.tete-page .tete-image { position: absolute; inset: 0; z-index: -2; }
.tete-page .tete-image img, .tete-page .tete-image video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tete-page .tete-image img.lent { animation: lent 24s ease-in-out infinite alternate; }
@keyframes lent { from { transform: scale(1.02); } to { transform: scale(1.1) translateX(-1.5%); } }
.tete-page .tete-image video { opacity: 0; transition: opacity 1s ease; }
.tete-page .tete-image video.prete { opacity: 1; }
.tete-page.avec-image::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(5, 10, 28, .94) 0%, rgba(5, 10, 28, .7) 42%, rgba(5, 10, 28, .2) 100%), linear-gradient(0deg, var(--nuit) 0%, transparent 45%); }
.fil-ariane { list-style: none; display: flex; flex-wrap: wrap; gap: .5em; padding: 0; margin: 0 0 22px; font: 500 .85rem var(--titre); color: var(--tres-doux); }
.fil-ariane li + li::before { content: '/'; margin-right: .5em; color: var(--tres-doux); }
.fil-ariane a { color: var(--doux); }
.fil-ariane a:hover { color: #fff; }

/* ---------------------------------------------------------------- cartes de jeux */
.grille-jeux { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; }
.carte-jeu { position: relative; display: flex; flex-direction: column; border-radius: var(--rayon); overflow: hidden; background: var(--nuit-2); box-shadow: inset 0 0 0 1px var(--ligne); color: var(--texte); transition: transform .3s ease, box-shadow .3s ease; }
.carte-jeu:hover { transform: translateY(-4px); color: var(--texte); box-shadow: inset 0 0 0 1px rgba(65, 244, 255, .35), 0 30px 60px rgba(0, 0, 0, .5); }
.carte-jeu .visuel { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.carte-jeu .visuel > img:not(.logo-jeu), .carte-jeu .visuel > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease, opacity .5s ease; }
.carte-jeu .visuel > video { opacity: 0; }
.carte-jeu.lecture .visuel > video { opacity: 1; }
.carte-jeu:hover .visuel > img:not(.logo-jeu) { transform: scale(1.04); }
.carte-jeu .visuel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 17, 40, 0) 45%, rgba(10, 17, 40, .92)); pointer-events: none; }
.carte-jeu .logo-jeu { position: absolute; z-index: 1; left: 18px; bottom: 10px; width: 46%; height: auto; max-height: 46%; object-fit: contain; object-position: left bottom; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .7)); transition: transform .3s ease; }
.carte-jeu:hover .logo-jeu { transform: translateY(-2px); }
.carte-jeu .infos { padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.carte-jeu .infos p { color: var(--doux); margin: 0; font-size: .96rem; line-height: 1.55; }
.carte-jeu .bas { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.etiquettes { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; list-style: none; }
.etiquettes li { font: 600 .68rem var(--tech); letter-spacing: .1em; text-transform: uppercase; padding: .45em .7em; border-radius: 6px; background: rgba(255, 255, 255, .05); color: #c9d3ef; }
.etiquettes li.enligne { color: var(--cyan); background: var(--cyan-doux); }
.faux-bouton { font: 700 .9rem var(--titre); color: #fff; white-space: nowrap; display: inline-flex; align-items: center; gap: .4em; }
.faux-bouton::after { content: '→'; color: var(--cyan); transition: transform .25s ease; }
.carte-jeu:hover .faux-bouton::after { transform: translateX(4px); }

/* ---------------------------------------------------------------- page d'un jeu */
.titre-logo { margin: 0 0 14px; line-height: 0; }
.jeu-logo { width: min(480px, 86%); margin: 0; filter: drop-shadow(0 14px 30px rgba(0, 0, 0, .6)); }
.bloc-jeu { position: relative; border-radius: var(--rayon); overflow: hidden; background: #000; box-shadow: var(--ombre), inset 0 0 0 1px var(--ligne-2); aspect-ratio: 16 / 9; }
.bloc-jeu .couverture { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.bloc-jeu .couverture > img, .bloc-jeu .couverture > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bloc-jeu .couverture::before { content: ''; position: absolute; inset: 0; z-index: 1; background: radial-gradient(55% 55% at 50% 52%, rgba(5, 10, 28, .25), rgba(5, 10, 28, .78)); }
.bloc-jeu .couverture-int { position: relative; z-index: 2; display: grid; justify-items: center; gap: 14px; padding: 20px; }
.bloc-jeu .couverture-int p { margin: 0; font: 500 .9rem var(--titre); color: #d5ddf3; }
.bloc-jeu iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: #000; }
.bloc-jeu.plein { position: fixed; inset: 0; z-index: 200; border-radius: 0; aspect-ratio: auto; }
.bloc-jeu .barre { position: absolute; z-index: 3; top: 10px; right: 10px; display: flex; gap: 8px; }
.bloc-jeu .barre button { background: rgba(5, 10, 28, .75); color: #fff; border: 1px solid var(--ligne-2); border-radius: 10px; padding: .45em .8em; font: 600 .85rem var(--titre); cursor: pointer; }
.jeu-grille { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.panneau { background: var(--surface); border-radius: var(--rayon); padding: 26px 28px; box-shadow: inset 0 0 0 1px var(--ligne); }
.panneau h2 { font-size: 1.35rem; }
.panneau h3 { font-size: 1.05rem; }
.liste-coches { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.liste-coches li { padding-left: 1.6em; position: relative; color: #dbe3f8; }
.liste-coches li::before { content: ''; position: absolute; left: 0; top: .62em; width: 9px; height: 9px; border: 2px solid var(--cyan); transform: rotate(45deg); }
.commandes { color: var(--doux); font-size: .94rem; }

/* ---------------------------------------------------------------- l'histoire */
.histoire { position: relative; display: grid; gap: clamp(56px, 8vw, 110px); }
.histoire::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, transparent, var(--ligne-2) 8%, var(--ligne-2) 92%, transparent); }
.chapitre { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 90px); align-items: center; position: relative; }
.chapitre::before { content: ''; position: absolute; left: 50%; top: 50%; width: 11px; height: 11px; margin: -5px 0 0 -5px; border: 2px solid var(--cyan); background: var(--nuit); transform: rotate(45deg); }
.chapitre:nth-child(even) > .chapitre-image { order: 2; }
.chapitre-image { border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre), inset 0 0 0 1px var(--ligne); aspect-ratio: 16 / 10; position: relative; background: #000; }
.chapitre-image img, .chapitre-image video { width: 100%; height: 100%; object-fit: cover; }
.chapitre-texte h3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-bottom: .45em; }
.chapitre-texte p { color: var(--doux); }
.chapitre-texte .numero { display: block; margin-bottom: 12px; color: var(--cyan); }
.citation { margin: 0; padding: 26px 0 0; font: 300 clamp(1.4rem, 3vw, 2.2rem)/1.3 var(--titre); color: #fff; text-align: center; letter-spacing: -.01em; }
.citation strong { font-weight: 700; color: var(--cyan); }

/* ---------------------------------------------------------------- les mondes */
.mondes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.monde { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 3 / 4; background: #000; box-shadow: inset 0 0 0 1px var(--ligne); }
.monde img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.monde:hover img { transform: scale(1.05); }
.monde::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(5, 10, 28, .92)); }
.monde div { position: absolute; z-index: 1; left: 18px; right: 18px; bottom: 16px; }
.monde h3 { font-size: 1.15rem; margin: 0 0 4px; }
.monde p { margin: 0; color: var(--doux); font-size: .88rem; line-height: 1.45; }

/* ---------------------------------------------------------------- héros */
.grille-heros { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
.carte-heros { position: relative; border-radius: var(--rayon); overflow: hidden; background: var(--nuit-2); box-shadow: inset 0 0 0 1px var(--ligne); padding: 18px 20px 22px; display: flex; flex-direction: column; transition: box-shadow .3s ease; }
.carte-heros::before { content: ''; position: absolute; left: -20%; right: -20%; top: 18%; height: 60%; background: radial-gradient(50% 50% at 50% 60%, var(--teinte, #3b7bff), transparent 70%); opacity: .22; pointer-events: none; }
.carte-heros:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.carte-heros .portrait { position: relative; aspect-ratio: 3 / 4; display: grid; place-items: end center; margin-bottom: 12px; }
.carte-heros .portrait img { max-height: 100%; width: auto; filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .5)); transition: transform .4s ease; }
.carte-heros:hover .portrait img { transform: translateY(-5px); }
.carte-heros h3 { margin: 0 0 6px; font-size: 1.4rem; position: relative; }
.carte-heros .role { font: 600 .66rem var(--tech); color: var(--teinte-claire, var(--cyan)); text-transform: uppercase; letter-spacing: .16em; margin: 0 0 10px; position: relative; }
.carte-heros p { color: var(--doux); font-size: .93rem; line-height: 1.55; margin: 0; position: relative; }
.t-nova { --teinte: #3b7bff; --teinte-claire: #8fd8ff; }
.t-rosie { --teinte: #ff4fb8; --teinte-claire: #ffa6dd; }
.t-yuki { --teinte: #5fd8ff; --teinte-claire: #aeeeff; }
.t-rako { --teinte: #ff6a2b; --teinte-claire: #ffb38a; }
.t-bip { --teinte: #6fd6ff; --teinte-claire: #bdf2ff; }
.t-jeanne { --teinte: #5ed65a; --teinte-claire: #aff2a8; }
.t-kira { --teinte: #ff3355; --teinte-claire: #ff9aab; }
.t-maya { --teinte: #ffb347; --teinte-claire: #ffd9a0; }
.t-kael { --teinte: #d6a338; --teinte-claire: #f2d590; }
.t-glitch { --teinte: #c42bd6; --teinte-claire: #f0a2ff; }
.t-bug { --teinte: #9b2bd6; --teinte-claire: #d8a2ff; }
.t-voss { --teinte: #d98a1a; --teinte-claire: #ffcb80; }
.t-axiom { --teinte: #2fd6e0; --teinte-claire: #a6f6ff; }

/* bande des héros sur l'accueil */
.bande-heros { display: flex; justify-content: center; align-items: end; gap: clamp(2px, 1.2vw, 16px); margin: 0 auto 10px; max-width: 1100px; position: relative; }
.bande-heros::after { content: ''; position: absolute; left: 5%; right: 5%; bottom: 34px; height: 1px; background: linear-gradient(90deg, transparent, var(--ligne-2), transparent); }
.bande-heros a { flex: 1; max-width: 170px; color: var(--texte); text-align: center; }
.bande-heros img { width: 100%; height: auto; filter: drop-shadow(0 16px 20px rgba(0, 0, 0, .55)); transition: transform .35s ease; }
.bande-heros a:hover img { transform: translateY(-6px); }
.bande-heros span { display: block; font: 600 .68rem var(--tech); letter-spacing: .2em; text-transform: uppercase; margin-top: 14px; color: var(--doux); }
.bande-heros a:hover span { color: #fff; }

/* ---------------------------------------------------------------- blocs mis en avant */
.duo { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 80px); align-items: center; }
.duo.inverse > :first-child { order: 2; }
.image-cadre { border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre), inset 0 0 0 1px var(--ligne); position: relative; aspect-ratio: 16 / 9; background: #000; }
.image-cadre img, .image-cadre video { width: 100%; height: 100%; object-fit: cover; }
.image-cadre video, .chapitre-image video { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease; }
.image-cadre video.prete, .chapitre-image video.prete { opacity: 1; }
.badge { display: inline-flex; align-items: center; gap: .6em; font: 600 .68rem var(--tech); letter-spacing: .24em; text-transform: uppercase; padding: .55em .9em; border-radius: 6px; background: rgba(255, 201, 61, .1); color: var(--or); margin-bottom: 18px; }
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--or); box-shadow: 0 0 0 4px rgba(255, 201, 61, .15); }
.cartes-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--ligne); border-radius: var(--rayon); overflow: hidden; box-shadow: inset 0 0 0 1px var(--ligne); }
.carte { background: var(--nuit); padding: 30px 30px 32px; }
.section-sombre .carte { background: #070d22; }
.carte h3 { font-size: 1.2rem; }
.carte p { color: var(--doux); margin: 0; font-size: .96rem; }
.carte .icone { display: block; font: 700 .78rem var(--tech); letter-spacing: .2em; color: var(--cyan); margin-bottom: 18px; }
.niveaux { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 22px 0; list-style: none; }
.niveaux li { font: 700 .9rem var(--tech); letter-spacing: .08em; padding: .6em 1.05em; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(65, 244, 255, .35); color: #dffcff; }
.appel { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; padding: clamp(28px, 4vw, 48px); border-radius: 22px; background: linear-gradient(120deg, rgba(59, 123, 255, .16), rgba(65, 244, 255, .06) 60%, rgba(255, 255, 255, .02)); box-shadow: inset 0 0 0 1px var(--ligne-2); }
.appel h2 { margin-bottom: .25em; font-size: clamp(1.6rem, 3vw, 2.3rem); }
.appel p { margin: 0; color: var(--doux); max-width: 640px; }

/* ---------------------------------------------------------------- vidéos */
.grille-videos { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 22px; }
.grille-videos.shorts { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.video { margin: 0; }
.video .lecteur { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #000; box-shadow: inset 0 0 0 1px var(--ligne); }
.video.short .lecteur { aspect-ratio: 9 / 16; }
.video .lecteur img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.video:hover .lecteur img { transform: scale(1.03); }
.video .lecteur button { position: absolute; inset: 0; width: 100%; border: 0; background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, .5)); cursor: pointer; display: grid; place-items: center; color: #fff; }
.video .lecteur button span { width: 58px; height: 58px; border-radius: 50%; background: rgba(5, 10, 28, .6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); transition: transform .25s ease, background .25s ease; }
.video:hover .lecteur button span { transform: scale(1.08); background: rgba(65, 244, 255, .85); color: #00131b; }
.video .lecteur button svg { width: 22px; height: 22px; margin-left: 3px; }
.video .lecteur iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video figcaption { font: 600 .98rem/1.4 var(--titre); margin-top: 12px; }
.video figcaption small { display: block; font: 600 .64rem var(--tech); letter-spacing: .14em; text-transform: uppercase; color: var(--tres-doux); margin-top: 6px; }
.note-video { color: var(--tres-doux); font-size: .9rem; }

/* ---------------------------------------------------------------- texte long */
.texte h2 { margin-top: 1.7em; font-size: clamp(1.45rem, 2.4vw, 1.85rem); }
.texte h2:first-child { margin-top: 0; }
.texte p, .texte li { color: #ccd5ee; }
.texte ul { padding-left: 1.2em; }
.texte li { margin-bottom: .5em; }
.texte li::marker { color: var(--cyan); }
.encart { background: var(--surface); border-radius: 14px; padding: 18px 22px; box-shadow: inset 0 0 0 1px var(--ligne-2); margin: 22px 0; }
.encart p:last-child { margin: 0; }

/* ---------------------------------------------------------------- pied */
.pied { border-top: 1px solid var(--ligne); padding: 64px 0 28px; }
.pied-grille { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 34px; }
.pied img { height: 46px; width: auto; margin-bottom: 16px; }
.pied p { color: var(--doux); font-size: .93rem; }
.pied h3 { font: 600 .7rem var(--tech); letter-spacing: .22em; text-transform: uppercase; color: #fff; margin-bottom: 16px; }
.pied ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.pied a { color: var(--doux); font-size: .93rem; }
.pied a:hover { color: #fff; }
.pied-bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--ligne); color: var(--tres-doux); font-size: .84rem; }

/* ---------------------------------------------------------------- apparition douce */
.js .apparait { opacity: 0; transform: translateY(16px); transition: opacity .8s ease, transform .8s ease; }
.js .apparait.vu { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- 404 */
.perdu { text-align: center; padding: 180px 0 100px; }
.perdu img { width: 200px; margin: 0 auto 22px; }

/* utilitaires */
[data-centre] { justify-content: center; margin-top: 36px; }
[data-espace] { margin-top: 34px; }

/* ---------------------------------------------------------------- tailles d'écran */
@media (max-width: 1080px) {
  .pied-grille { grid-template-columns: 1fr 1fr; }
  .jeu-grille { grid-template-columns: 1fr; }
  .mondes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 920px) {
  .burger { display: grid; place-items: center; }
  .menu { position: fixed; inset: 76px 0 auto 0; background: rgba(5, 10, 28, .98); border-bottom: 1px solid var(--ligne); padding: 12px 20px 24px; transform: translateY(-130%); transition: transform .3s ease; margin: 0; max-height: calc(100vh - 76px); overflow: auto; }
  .menu.ouvert { transform: none; }
  .entete.menu-ouvert { background: rgba(5, 10, 28, .98); }
  .menu ul { flex-direction: column; align-items: stretch; }
  .menu a { font-size: 1.1rem; padding: .85em 0; border-bottom: 1px solid var(--ligne); }
  .menu a::after { display: none; }
  .menu .menu-yt { display: block; margin-top: 14px; }
  .menu .menu-yt a { border: 0; }
  .entete .bouton-yt-entete { display: none; }
  .duo, .duo.inverse, .tete-section, .chapitre { grid-template-columns: 1fr; }
  .duo.inverse > :first-child, .chapitre:nth-child(even) > .chapitre-image { order: 0; }
  .tete-section .actions { justify-self: start; }
  .histoire::before, .chapitre::before { display: none; }
  .cartes-3 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .marque img { height: 36px; }
  .une-int { padding: 110px 0 100px; }
  .une-bas span { display: none; }
  .une-bas { justify-content: center; }
  .chiffres li { min-width: 50%; padding-bottom: 6px; }
  .pied-grille { grid-template-columns: 1fr; }
  .bande-heros a:nth-child(n+6) { display: none; }
  .bloc-jeu { aspect-ratio: 4 / 3; }
  .grille-jeux { grid-template-columns: 1fr; }
  .mondes { grid-template-columns: 1fr 1fr; gap: 10px; }
  .monde p { display: none; }
}

/* accueil : le logo de l'en-tête n'apparaît qu'au défilement (le grand logo est déjà au centre) */
body:not(.page-interieure) .entete .marque { transition: opacity .3s ease; }
body:not(.page-interieure) .entete:not(.opaque):not(.menu-ouvert) .marque { opacity: 0; pointer-events: none; }

/* ligne « compte NexioLabs » sous le bloc de jeu */
.compte-jeu { margin: 14px 2px 0; font-size: .92rem; color: var(--doux); }
.lien-compte { background: none; border: 0; padding: 0; font: 700 .92rem var(--titre); color: var(--cyan); cursor: pointer; text-decoration: underline; text-underline-offset: .2em; }
.lien-compte:hover { color: #9ff8ff; }
.bloc-jeu.en-jeu { box-shadow: var(--ombre), inset 0 0 0 1px rgba(65, 244, 255, .35); }
.bloc-jeu:fullscreen { border-radius: 0; }

/* page d'un jeu : le bloc en pleine largeur, les outils dessous */
.section-jeu { padding-top: clamp(36px, 5vw, 64px); padding-bottom: clamp(36px, 5vw, 64px); }
.section-jeu .bloc-jeu { aspect-ratio: 16 / 9; max-height: calc(100vh - 120px); margin-inline: auto; }
.sous-jeu { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-top: 14px; }
.sous-jeu .compte-jeu { margin: 0; }
.outils-jeu { display: flex; gap: 10px; }
.outils-jeu[hidden] { display: none; }
.outils-jeu .bouton { padding: .6em 1.1em; font-size: .9rem; }
.bloc-jeu .barre { display: none; }
.bloc-jeu.plein .barre { display: flex; }