/* ==========================================================================
   STYLE.CSS - Portfolio ROLLAND Tanguy
   --------------------------------------------------------------------------
   Feuille de style globale du site.
   Elle contient :
   - les variables de couleurs ;
   - les polices ;
   - la structure commune header / nav / footer ;
   - la page Accueil et le mini-jeu Spaceships ;
   - les styles des autres pages du portfolio ;
   - les optimisations navigateur et responsive.
   ========================================================================== */

:root {
  /* Variables globales : permet de modifier rapidement la palette du site. */
  --text: #fff; /* White */
    --text-shadow: #0ff; /* Aqua */

  --text-special-01: #0fe; /* Turquoise Blue */
  --text-special-02: #00e673; /* Guppie Green */
    --text-special-02-shadow: #00ec96; /* Medium Spring Green */
  --text-special-03: #ff53cd; /* Light Deep Pink */
  --text-special-04: #d966ff; /* Heliotrope */
    --text-special-04-shadow:  #a38cff; /* Bright Lavender */
  --text-special-05: #fff; /* White */

  --text-header: #0fe; /* Turquoise Blue */

  --text-nav-01: #0fe; /* Turquoise Blue */
  --text-nav-02: #fff; /* White */
  --text-nav-03: #000; /* Black */

  --text-footer-01: #009b88; /* Paolo Veronese Green */
  --text-footer-02: #0fc; /* Sea Green */

  --text-game-designer: #ffff55; /* Dodie Yellow */
    --text-game-designer-shadow:#bfff80 ; /* Yellow-Green*/
  --text-level-designer: #4da6ff; /* Blue Jeans */
    --text-level-designer-shadow: #0079ff; /* Picton Blue */

  --text-diploma: #ff8929; /* Princeton Orange */
    --text-diploma-shadow: #bfa75f; /* Vegas Gold */
  
  --border-01: #0fe; /* Turquoise Blue */
  --border-02: #009b88; /* Paolo Veronese Green */

  --button-inactive: #ff0032; /* Carmien Red */
  --button-inactive-shadow: #ff4065; /* Magic Potion */

  --cursor-default: url('/images/Cursor-32px.png') 16 16, auto;
  --cursor-arrow: url('/images/Cursor-Arrow-32px.png') 16 16, auto;
  --cursor-caret: url('/images/Cursor-Caret-32px.png') 16 16, text;
}

/* --- FONTS --- */
/* Polices locales utilisées pour l'identité rétro / arcade du portfolio. */
@font-face {
  font-family: 'Press Start 2P';
  src: url('/assets/fonts/PressStart2P-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Pr Start';
  src: url('/assets/fonts/PrStart.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'pr Startk';
  src: url('/assets/fonts/prstartk.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Dlx Font';
  src: url('/assets/fonts/DlxFont.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'kongtext';
  src: url('/assets/fonts/kongtext.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'lunchds';
  src: url('/assets/fonts/lunchds.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'manaspc';
  src: url('/assets/fonts/manaspc.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'pcsenior';
  src: url('/assets/fonts/pcsenior.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Ret Ganon';
  src: url('/assets/fonts/RetGanon.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

/* --- BASE RESET --- */
/* Reset minimal : supprime les marges par défaut et stabilise le calcul des tailles. */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

/* --- BACKGROUND, CRT EFFECTS, CURSEURS, FX --- */
/* Zone des effets globaux : fond radial, grain, bordures CRT, curseurs et canvas FX. */
body {
    /* Curseur vert classique du portfolio. */
    cursor: var(--cursor-default);
    font-family: 'Press Start 2P', monospace;
    color: var(--text);
    text-shadow: 0 0 5px var(--text-shadow);
    background: radial-gradient(circle at center,
      #0f493b 0%,
      #0F3E33 20%,
      #10332A 40%,
      #102722 60%,
      #111C19 80%,
      #111111 100%);
    overflow: hidden;
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 3rem;
    text-align: center;
}
/* Grain overlay */
body::before {
  /* Grain visuel par-dessus la page. Désactivé pendant le jeu pour préserver les FPS. */
  content: "";
  position: fixed;
  inset: 0;
  background: url('grain.png');
  mix-blend-mode: overlay;
  opacity: 0.1;
  pointer-events: none;
  z-index: 998;
}

/* CRT bordures (PNG image) */
.crt-borders {
  /* Image de bordure CRT fixe, au-dessus de la page et des canvas. */
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  object-fit: fill;
  z-index: 1000;
  pointer-events: none;
  filter:
    drop-shadow(0.5rem 0 0.2rem rgba(0, 0, 0, 0.6))
    drop-shadow(-0.5rem 0 0.2rem rgba(0, 0, 0, 0.6))
    drop-shadow(0.1rem 0 1.8rem rgba(0, 255, 224, 0.15))
    drop-shadow(-0.1rem 0 1.8rem rgba(0, 255, 224, 0.15));
}

#cursor-interactive {
  /* Curseur rouge animé. Il suit la souris et s'active sur les zones interactives. */
  position: fixed;
  width: 32px;
  height: 32px;
  pointer-events: none;
  background-image: url(''); /* IMPORTANT : Simule l'utilisation du curseur, mais le vrai curseur est dans body */
  background-size: cover;
  z-index: 10000;
  transform: translate(-50%, -50%);
  transition: transform 0.15s ease;
}
#cursor-interactive.active {
  background-image: url('/images/Cursor-Interactive-64px.gif'); /* Curseur animé */
  width: 64px;
  height: 64px;
}

/* Verrou temporaire utilisé après certains clics Game Over pour forcer le curseur vert. */
body.force-default-cursor,
body.force-default-cursor * {
  cursor: url("/images/Cursor-32px.png") 16 16, auto !important;
}

body.force-default-cursor #cursor-interactive {
  background-image: none !important;
}

body.force-caret-cursor .go-input {
  cursor: var(--cursor-caret) !important;
}

body.force-caret-cursor #cursor-interactive {
  background-image: none !important;
}

#fx-canvas {
  /* Canvas dédié aux effets de tir : il ne doit jamais bloquer les clics. */
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none; /* ne bloque pas les clics */
  z-index: 999; /* au-dessus du canvas ships, sous les bordures CRT */
}

/* --- CONTENT --- */
.site-content {
  /* Contenu HTML principal, placé au-dessus du canvas de vaisseaux d'intro. */
  position: relative;
  z-index: 1;
  width: 100%;
}

span.diploma {
  color: var(--text-diploma);
  text-shadow: 0 0 3px var(--text-diploma-shadow);
}

span.game-designer {
  color: var(--text-game-designer);
  text-shadow: 0 0 3px var(--text-game-desinger-shadow);
}

span.level-designer {
  color: var(--text-level-designer);
  text-shadow: 0 0 3px var(--text-level-designer-shadow);
}

span.text-special-01 {
  color: var(--text-special-01);
  text-shadow: 0 0 3px var(--text-shadow);
}

span.text-special-02 {
  color: var(--text-special-02);
  text-shadow: 0 0 3px var(--text-special-02-shadow);
}

span.text-special-04 {
  color: var(--text-special-04);
  text-shadow: 0 0 3px var(--text-special-04-shadow);
}

span.text-special-05 {
  color: var(--text-special-05);
  text-shadow: 0 0 3px var(--text-game-desinger-shadow);
}

.icon {
  font-size: 1.5em;
  text-top: middle;
  text-shadow: 0 0 4px rgba(0, 255, 255, 0.5);
  line-height: 1;
}

/* --- HEADER --- */
header {
  /* En-tête commun à toutes les pages. */
  padding-top: 2.5rem;
  font-family: 'pcsenior', monospace;
}

header h1 {
  font-size: 1rem;
  color: var(--text-header);
  text-shadow: 0 0 4px var(--text-shadow);
  margin-bottom: 2.5rem;
}

/* --- NAVIGATION --- */
nav {
  font-family: 'kongtext', monospace;
}

nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  gap: 1rem;
  margin: 1rem;
}

nav ul li a {
  /* Boutons de navigation. Le curseur natif est caché au profit du curseur personnalisé. */
  cursor: none;
  display: inline-block;
  padding: 0.75rem 1rem;
  border: 2px solid var(--border-01);
  color: var(--text-nav-01);
  text-decoration: none;
  transition: all 0.3s ease;
}
nav ul li a:hover {
  background: var(--border-01);
  color: var(--text-nav-03);
  text-decoration: underline;
}
nav ul li a.active {
  background: rgba(0, 255, 238, 0.2); /* --border-01 with transparency */
  color: var(--text-nav-02);
  text-shadow: 0 0 5px var(--text-shadow);
  font-weight: bold;
}
nav ul li a.active:hover {
  background: rgba(0, 255, 238, 0.4); /* --border-01 with transparency */
  color: var(--text-nav-02);
  text-shadow: 0 0 5px var(--text-shadow);
  font-weight: bold;
  text-decoration: underline;
}

.instant-click-blink {
  /* Feedback visuel court déclenché au mousedown par MouseDownActivation.js. */
  animation: instantClickBlink 120ms steps(1, end) infinite;
}

@keyframes instantClickBlink {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: 0.25;
  }
}

/* --- MAIN --- */
main {
  /* Centre verticalement la zone principale de chaque page. */
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- CONTAINER ACCUEIL --- */
.welcome-box-accueil {
  /* Cadre principal de la page Accueil. Il devient aussi l'arène du mini-jeu. */
  position: relative;
  border: 2px solid var(--border-01);
  padding: 2rem;
  margin: 2rem auto;
  width: 80vw;
  max-width: 80vw;
  height: 60vh;
  min-height: 30vh;
  max-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 50ms ease-in-out;
}

.welcome-text-accueil {
  /* Message affiché avant le lancement du mini-jeu. */
  font-size: 1.6rem;
  line-height: 3.5rem;
  color: var(--text);
  text-shadow: 0 0 5px var(--text-shadow);
}

/* --- --- GAME --- */
/* Styles du HUD et des états visuels du mini-jeu Spaceships. */
.welcome-box-accueil .hud-lives{
  /* HUD des vies affiché en haut à gauche pendant la partie. */
  position: absolute;
  top: 1.75em;
  left: 3em;
  z-index: 10;
  pointer-events: none;
  user-select: none;

  font-family: 'Press Start 2P', monospace;
  font-size: 0.9rem;
  color: var(--text);
  text-shadow: 0 0 5px var(--text-shadow);

  display: flex;
  align-items: center;
  gap: 10px;
}

.welcome-box-accueil .hud-position{
  /* Position temporaire affichée après le Game Over. */
  position: absolute;
  top: 1.75em;
  left: 3em;
  z-index: 10;
  pointer-events: none;
  user-select: none;

  font-family: 'Press Start 2P', monospace;
  font-size: 0.9rem;
  color: var(--text);
  text-shadow: 0 0 5px var(--text-shadow);
}

.welcome-box-accueil .hud-ranking {
  /* Bouton Classement du Game Over, affiché seulement à la fin d'une partie. */
  position: absolute;
  top: 2em;
  right: 3em;
  z-index: 10;
  pointer-events: auto;

  font-family: 'pr Start', monospace;
  font-size: 0.8rem;

  color: var(--text-footer-01);
  text-shadow: 0px 0px 1px var(--text-footer-02);

  background: transparent;
  border: 2px solid var(--text-footer-01);
  padding: 0.5rem 0.75rem;

  cursor: none;

  transition: all 0.3s ease;
}

.game-start-message {
  /* Message central affiché au lancement ou au retry de la partie. */
  position: absolute;
  inset: 0;
  z-index: 20;

  display: flex;
  align-items: center;
  justify-content: center;

  pointer-events: none;
  user-select: none;

  font-family: 'Press Start 2P', monospace;
  font-size: 1.6rem;
  line-height: 3.5rem;
  color: var(--text);
  text-shadow: 0 0 5px var(--text-shadow);

  /*opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 1000ms ease,
    transform 1000ms ease;*/
}

.game-start-message.show {
  opacity: 1;
  transform: translateY(0);
}

/*.game-start-message.hide {
  opacity: 0;
  transform: translateY(-8px);
}*/

/* Pendant le jeu, on désactive la sélection de texte et le drag d'images/canvas. */
body.game-playing,
body.game-playing * {
  user-select: none;
  -webkit-user-select: none;
}

body.game-playing img,
body.game-playing canvas {
  -webkit-user-drag: none;
}

.hud-button {
  /* Base commune des boutons PORTFOLIO et RÉESSAYER. */
  font-family: 'kongtext', monospace;
  font-size: 1rem;
  color: var(--text-nav-01);
  text-shadow: none;
  background: transparent;
  border: 2px solid var(--border-01);
  padding: 0.75rem 1rem;
  cursor: none;
  transition: all 0.3s ease;
}

.welcome-box-accueil .hud-portfolio {
  /* Bouton de retour vers le portfolio après le Game Over. */
  position: absolute;
  bottom: 1.5em;
  left: 2.5em;
  z-index: 10;
  pointer-events: auto;
  text-shadow: 0 0 5px var(--text-shadow);
  font-weight: bold;
}

.welcome-box-accueil .hud-retry {
  /* Bouton pour relancer immédiatement une partie après le Game Over. */
  position: absolute;
  bottom: 1.5em;
  right: 2.5em;
  z-index: 10;
  pointer-events: auto;
  text-shadow: 0 0 5px var(--text-shadow);
  font-weight: bold;
}

.welcome-box-accueil .hud-portfolio.hud-hover,
.welcome-box-accueil .hud-retry.hud-hover {
  background: var(--border-01);
  color: var(--text-nav-03);
}

.welcome-box-accueil .hud-ranking.hud-hover {
  background: var(--text-footer-01);
  color: var(--text-nav-03);
  font-weight: bold;
}

.welcome-box-accueil .hud-portfolio:hover,
.welcome-box-accueil .hud-retry:hover {
  background: var(--border-01);
  color: var(--text-nav-03);
}

.welcome-box-accueil .hud-ranking:hover {
  background: var(--text-footer-01);
  color: var(--text-nav-03);
  font-weight: bold;
}

.hud-lives .hearts {
  display: inline-flex;
  gap: 6px;
}

.hud-lives .heart {
  width: 24px;
  height: 24px;
  filter: drop-shadow(0 0 5px var(--text-shadow)); /* petit glow optionnel */
}

.welcome-box-accueil .hud-score {
  /* Score affiché en haut à droite pendant la partie. */
  position: absolute;
  top: 2em;
  right: 3em;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.9rem;
  color: var(--text);
  text-shadow: 0 0 5px var(--text-shadow);
  pointer-events: none;
  user-select: none;
  z-index: 10;
}

/* Halos visibles quand le jeu est actif */
.welcome-box-accueil.game-active::before,
.welcome-box-accueil.game-active::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1.2vw; /* Largeur du halo */
  pointer-events: none;
  z-index: 5; /* Sous le HUD */

  /* Dégradé */
  --edge-flash: 0;
  --edge-flash-p: calc(var(--edge-flash) * 100%);
  --edge-base-p: calc(100% - var(--edge-flash-p));
  --edge-target: #ffffff; /* cible par défaut (inutile quand --edge-flash=0, mais pratique) */

  background: linear-gradient(
    to right,
    color-mix(
      in srgb,
      var(--border-01) var(--edge-base-p),
      var(--edge-target) var(--edge-flash-p)
    ) 0%,
    transparent 100%
  );

  /* Pulsation */
  animation: glowPulse 6s ease-in-out infinite;
}

/* Bord gauche : colle à gauche */
.welcome-box-accueil.game-active::before { left: -2px; }
/* Bord droit : colle à droite */
.welcome-box-accueil.game-active::after {
  right: -2px;
  transform: scaleX(-1);
}

/* Permet d'animer une variable numérique en CSS */
@property --edge-flash {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

@keyframes edgeFlashVar {
  0%   { --edge-flash: 0; opacity: 1; }
  10%  { --edge-flash: 0.8; opacity: 1; } 
  50%  { --edge-flash: 1; opacity: 1; }       
  90%  { --edge-flash: 0.8; opacity: 1; }
  100% { --edge-flash: 0; opacity: 1; }
}

/* Animation : on ne fait varier que l’opacité */
@keyframes glowPulse {
  0%, 25%, 75%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

@keyframes frameLossFlash {
  0%   { border-color: var(--border-01); }
  10%  { border-color: var(--button-inactive); }
  50%  { border-color: var(--button-inactive); }
  90%  { border-color: var(--button-inactive); }
  100% { border-color: var(--border-01); }
}

/* Entrée = flash BLANC (déjà existant, on fixe juste la cible) */
.welcome-box-accueil.game-active.edge-flash-left::before {
  --edge-target: #ffffff;
  animation: glowPulse 6s ease-in-out infinite, edgeFlashVar 500ms ease-in-out;
}

.welcome-box-accueil.game-active.edge-flash-right::after {
  --edge-target: #ffffff;
  animation: glowPulse 6s ease-in-out infinite, edgeFlashVar 500ms ease-in-out;
}

/* Entrée = flash VERT */
.welcome-box-accueil.game-active.edge-flash-green-left::before {
  --edge-target: #00ffcc;
  animation: glowPulse 6s ease-in-out infinite, edgeFlashVar 500ms ease-in-out;
}

.welcome-box-accueil.game-active.edge-flash-green-right::after {
  --edge-target: #00ffcc;
  animation: glowPulse 6s ease-in-out infinite, edgeFlashVar 500ms ease-in-out;
}

/* Sortie = flash ROUGE (perte) */
.welcome-box-accueil.game-active.edge-loss-left::before {
  --edge-target: var(--button-inactive); /* ton rouge déjà défini: #ff0032 */
  animation: glowPulse 6s ease-in-out infinite, edgeFlashVar 500ms ease-in-out;
}

.welcome-box-accueil.game-active.edge-loss-right::after {
  --edge-target: var(--button-inactive);
  animation: glowPulse 6s ease-in-out infinite, edgeFlashVar 500ms ease-in-out;
}

/* Game Over : on coupe complètement les glows latéraux du cadre */
.welcome-box-accueil.game-active.game-over::before,
.welcome-box-accueil.game-active.game-over::after {
  display: none;
  animation: none;
  background: none;
}

/*.welcome-box-accueil.game-active.edge-loss-left,
.welcome-box-accueil.game-active.edge-loss-right {
  animation: frameLossFlash 500ms ease-in-out;
}*/
.welcome-box-accueil.game-active.edge-loss-left,
.welcome-box-accueil.game-active.edge-loss-right {
  animation: frameLossFlash 500ms ease-in-out;
}

#ships-canvas {
  /* Canvas plein écran des vaisseaux d'intro avant le lancement du jeu. */
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: auto;  /* important pour capter les clics */
  z-index: 0;
}

#ship-colliders {
  /* Couche invisible où JS place les colliders des vaisseaux. */
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 1;
}

/* Pour voir le collider de Ship01 */
/* .ship-collider {
  background-image: url("/images/ShipCollider.jpg") !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: 100% 100% !important;

  border: 2px solid red !important;
  background-color: rgba(0, 255, 0, 0.2) !important;
  opacity: 0.9 !important;
  z-index: 9999 !important;
} */

/* Clignotement de transition utilisé après un clic sur RÉESSAYER. */
body.retry-restart-blink .spaceships-hud,
body.retry-restart-blink .gameover-overlay.show {
  animation: retryRestartBlink 250ms steps(1, end) infinite;
}

@keyframes retryRestartBlink {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: 0.15;
  }
}

/* =========================
   GAME OVER overlay (UI)
   ========================= */
.welcome-box-accueil { position: relative; }

.gameover-overlay{
  /* Overlay Game Over masqué par défaut, affiché par GameOver.js. */
  position:absolute;
  inset:0;
  display:none;
  z-index:3; /* CRT overlay should be above this */
  padding:28px 34px;
  box-sizing:border-box;

  color:var(--border-01);
  text-transform:uppercase;
  font-family:"Press Start 2P", monospace;
  background:rgba(0,0,0,0.10);
}

.gameover-overlay.show{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.go-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

.go-position{ font-size:14px; }

.go-center{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  margin-top:-10px;
}

.go-title {
  font-size:56px;
  line-height:1;
  letter-spacing:2px;
  color: var(--text);
  text-shadow: 0 0 8px var(--text-shadow);
}

.go-score {
  font-size:18px;
  color: var(--text);
  text-shadow: 0 0 8px var(--text-shadow);
}

.go-row {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.go-input {
  width: min(520px, 60vw);
  max-width: none;
  flex: 0 0 min(520px, 60vw);

  height: 42px;
  padding: 0 14px;
  box-sizing: border-box;

  background: transparent;
  border: 2px solid var(--border-01);
  color: var(--border-01);
  outline: none;

  font-family: inherit;
  font-size: 14px;
  text-transform: none;

  cursor: var(--cursor-caret);
}

.go-input::placeholder {
  color: color-mix(in srgb, var(--border-01) 65%, transparent);
}

.go-input.go-placeholder-hidden::placeholder {
  color: transparent;
}

.go-btn {
  width: 4.7rem;
  min-width: 4.7rem;
  flex: 0 0 4.7rem;

  height: 42px;
  padding: 0 14px;
  box-sizing: border-box;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: transparent;
  border: 2px solid var(--border-01);
  color: var(--border-01);
  text-shadow: 0 0 5px var(--text-shadow);

  font-family: inherit;
  font-size: 14px;
  line-height: 1;
  text-transform: uppercase;

  cursor: none;

  transition:
    background 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease,
    text-shadow 0.3s ease;
}

.go-btn-in {
  padding: 0 14px;
}

.go-btn:hover,
.go-btn:focus,
.go-btn.hud-hover {
  background: var(--border-01);
  color: var(--text-nav-03);
  text-shadow: none;
}

.go-btn:disabled {
  opacity: 1;
}

.go-btn.go-saved,
.go-btn.go-saved:hover,
.go-btn.go-saved:focus,
.go-btn.go-saved.hud-hover {
  background: transparent;
  border-color: transparent;
  color: var(--text-special-02);
  text-shadow: 0 0 4px var(--text-special-02-shadow);
  box-shadow: none;

  font-size: 2rem;
  padding-bottom: 0.8rem;

  cursor: var(--cursor-default) !important;
  pointer-events: none;
}
.go-btn.go-saved:disabled {
  cursor: var(--cursor-default) !important;
  pointer-events: none;
}

.go-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

/* =========================
   CLASSEMENT overlay (UI)
   ========================= */

.ranking-overlay {
  /* Overlay Classement masqué par défaut.
     Il est placé dans .welcome-box-accueil par Game.js. */
  position: absolute;
  inset: 0;
  display: none;
  z-index: 3;

  padding: 0;
  box-sizing: border-box;

  color: var(--border-01);
  text-transform: none;
  font-family: "Press Start 2P", monospace;
  background: rgba(0, 0, 0, 0.10);
}

.ranking-overlay.show {
  display: block;
}

.ranking-content {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  pointer-events: auto;
}

.ranking-title {
  position: absolute;
  top: 7%;
  left: 50%;
  transform: translateX(-50%);

  margin: 0;

  font-family: "Press Start 2P", monospace;
  font-size: 1.85rem;
  line-height: 1;
  color: var(--text-footer-01);
  text-shadow: 0 0 2px var(--border-02);
}

.ranking-layout {
  position: absolute;
  left: 3.2%;
  right: 5.6%;
  top: 22%;

  height: 54%;

  display: grid;
  grid-template-columns: 4.8rem 1fr 3rem;
  align-items: center;
  gap: 2rem;
}

.ranking-arrows {
  height: 100%;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}

.ranking-arrow {
  width: 3.9rem;
  height: 3.9rem;
  padding: 0;
  box-sizing: border-box;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: transparent;
  border: 2px solid var(--border-01);
  border-radius: 20px;
  color: var(--text-nav-01);
  text-shadow: none;

  cursor: none;

  transition:
    background 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease,
    text-shadow 0.3s ease;
}

.ranking-arrow-symbol {
  display: inline-block;

  font-size: 3.4rem;
  line-height: 1;
  text-shadow: 0 0 5px var(--text-shadow);

  pointer-events: none;
  transform-origin: center;
}

.ranking-arrow-symbol-up {
  transform: rotate(-90deg);
}

.ranking-arrow-symbol-down {
  transform: rotate(90deg);
}

.ranking-arrow:hover,
.ranking-arrow:focus,
.ranking-arrow.hud-hover {
  background: var(--border-01);
  color: var(--text-nav-03);
  text-shadow: none;
}

.ranking-arrow-disabled,
.ranking-arrow-disabled:hover,
.ranking-arrow-disabled:focus,
.ranking-arrow-disabled.hud-hover {
  background: transparent;
  border-color: var(--button-inactive);
  color: var(--button-inactive);
  text-shadow: 0 0 3px var(--button-inactive-shadow);

  cursor: var(--cursor-default) !important;
  pointer-events: none;
}

.ranking-arrow:hover .ranking-arrow-symbol,
.ranking-arrow:focus .ranking-arrow-symbol,
.ranking-arrow.hud-hover .ranking-arrow-symbol {
  text-shadow: none;
}

.ranking-arrow-disabled .ranking-arrow-symbol,
.ranking-arrow-disabled:hover .ranking-arrow-symbol,
.ranking-arrow-disabled:focus .ranking-arrow-symbol,
.ranking-arrow-disabled.hud-hover .ranking-arrow-symbol {
  text-shadow: 0 0 3px var(--button-inactive-shadow);
}

.ranking-table-wrap {
  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;
}

.ranking-table {
  width: 100%;
  height: 100%;

  border-collapse: collapse;
  table-layout: fixed;

  font-family: "Press Start 2P", monospace;
  color: var(--border-01);
  text-shadow: 0 0 5px var(--text-shadow);
}

.ranking-table th,
.ranking-table td {
  padding: 0.75rem 1rem;

  font-size: 1rem;
  line-height: 1.4rem;
  text-align: center;
  vertical-align: middle;
}

.ranking-table th {
  height: 18%;

  color: var(--text);
  text-shadow: 0 0 5px var(--text-shadow);

  font-size: 1.2rem;
  line-height: 1.5rem;

  border-bottom: 2px solid var(--border-01);
}

.ranking-table td {
  height: 20.5%;

  border-bottom: 2px solid var(--border-01);
}

.ranking-table tbody tr:last-child td {
  border-bottom: none;
}

.ranking-table th:nth-child(1),
.ranking-table td:nth-child(1) {
  width: 20%;
  border-right: 2px solid var(--border-01);
}

.ranking-table th:nth-child(2),
.ranking-table td:nth-child(2) {
  width: 60%;
  border-right: 2px solid var(--border-01);
}

.ranking-table th:nth-child(3),
.ranking-table td:nth-child(3) {
  width: 20%;
}

.ranking-scroll {
  position: relative;

  width: 16px;
  height: 100%;

  background: transparent !important;
  border: none !important;
  box-shadow: none !important;

  cursor: none !important;
  user-select: none;
  -webkit-user-select: none;
}

.ranking-scroll,
.ranking-scroll * {
  cursor: none !important;
}

.ranking-scroll-track {
  position: absolute;
  left: 0;
  right: 0;
  top: 18px;
  bottom: 18px;

  width: auto;
  height: auto;
  margin: 0;

  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.ranking-scroll-arrow {
  position: absolute;
  left: 0;

  width: 100%;
  height: 18px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: transparent !important;
  border: none !important;
  box-shadow: none !important;

  font-size: 0;
  line-height: 1;
  text-shadow: none;
}

.ranking-scroll-arrow-up {
  top: 0;
}

.ranking-scroll-arrow-down {
  bottom: 0;
}

.ranking-scroll-arrow::before {
  content: "";
  width: 0;
  height: 0;

  filter: none !important;
}

.ranking-scroll-arrow-up::before {
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 7px solid rgba(0, 255, 255, 0.65);
}

.ranking-scroll-arrow-down::before {
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid rgba(0, 255, 255, 0.65);
}

.ranking-scroll:hover .ranking-scroll-arrow-up::before,
.ranking-scroll.is-dragging .ranking-scroll-arrow-up::before {
  border-bottom-color: #00FFFF;
}

.ranking-scroll:hover .ranking-scroll-arrow-down::before,
.ranking-scroll.is-dragging .ranking-scroll-arrow-down::before {
  border-top-color: #00FFFF;
}

.ranking-scroll-thumb {
  position: absolute;

  left: 4px !important;
  right: 4px !important;
  top: 0;

  width: auto !important;
  min-height: 42px;
  border-radius: 999px;

  transform: none;

  background: rgba(0, 255, 255, 0.65) !important;

  border: none !important;
  box-shadow: none !important;
}

.ranking-scroll:hover .ranking-scroll-thumb,
.ranking-scroll.is-dragging .ranking-scroll-thumb {
  background: #00FFFF !important;

  border: none !important;
  box-shadow: none !important;
}

.ranking-scroll-disabled {
  opacity: 0.35;
}

.ranking-return {
  position: absolute;
  left: 50%;
  bottom: 7.5%;
  transform: translateX(-50%);

  min-width: 10rem;
  height: 2.4rem;
  padding: 0 1.2rem;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: transparent;
  border: 2px solid var(--border-02);
  color: var(--text-footer-01);

  font-family: "Pr Start", monospace;
  font-size: 0.85rem;
  text-transform: none;

  cursor: none;

  transition:
    background 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease,
    text-shadow 0.3s ease;
}

.ranking-return:hover,
.ranking-return:focus,
.ranking-return.hud-hover {
  background: var(--border-02);
  color: var(--text-nav-03);
  text-shadow: none;
}

/* Clignotement court lors du passage Game Over <-> Classement */
.ranking-transition-blink {
  animation: rankingTransitionBlink 150ms steps(1, end) infinite;
}

@keyframes rankingTransitionBlink {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: 0.15;
  }
}

/* HUD classique (vies + score) */
.game-hud {
  transition: opacity 0.2s ease;
}

/* Caché pendant Game Over */
.welcome-box-accueil.game-over .game-hud {
  opacity: 0;
  pointer-events: none;
}

/* HUD Game Over dans le cadre */
.gameover-hud-frame {
  position: absolute;
  top: 1rem;
  left: 1rem;
  right: 1rem;

  display: flex;
  justify-content: space-between;
  align-items: center;

  opacity: 0;
  pointer-events: none;
}

/* Visible uniquement en Game Over */
.welcome-box-accueil.game-over .gameover-hud-frame {
  opacity: 1;
  pointer-events: auto;
}

/* Style position */
.gof-position {
  font-size: 0.7rem;
  color: var(--text);
}

/* Bouton classement */
.gof-ranking {
  cursor: none;
}

.hud-position {
  color: var(--text);
  text-shadow: 0 0 5px var(--text-shadow);
}

/* --- CONTAINER PROFIL --- */
/* Styles de la page Profil. */

.welcome-box-profil {
  border: 2px solid var(--border-01);
  padding: 2rem;
  margin: 2rem auto;
  width: 80vw;
  max-width: 80vw;
  height: 60vh;
  min-height: 30vh;
  max-height: 60vh;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  overflow-y: auto;
  overflow-x: hidden;

  scrollbar-width: auto; /* Pour Firefox */
  scrollbar-color: #00ffff88 transparent;
}

.presentation {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.picture-profile-alive {
  height: 12rem;
  border: 2px solid var(--border-01);
  box-shadow: 0 0 8px var(--text-shadow);
  object-fit: cover;
  flex-shrink: 0;
  cursor: none;
}
.picture-profile-alive:hover {
  /* transform: scale(1.02);
  box-shadow: 0 0 4rem rgba(0, 255, 238, 0.2); */
}

.picture-profile-dead {
  height: 12rem;
  border: 2px solid #ff0000;
  box-shadow: 0 0 8px #ff0040;
  object-fit: cover;
  flex-shrink: 0;
}

.welcome-text-profil {
  font-size: 1rem;
  line-height: 2rem;
  color: var(--text);
  text-align: left;
}

.para-1 {
  flex: 1;
  max-width: 100;
  margin-left: 4rem;
}

span.salut {
  position: relative;
  display: inline-block;
  font-size: 1.4rem;
  margin-bottom: 0.8rem;
}

span.salut::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0.1em;
  width: 100%;
  height: 0.15rem;
  background: currentColor;
  box-shadow: 0 0 5px var(--text-shadow); /* Ombre verte fluo */
}

.para-2 {
  width: 100%;
  margin-top: 2rem;
  margin-bottom: 1.5rem;
}

.skills {
  width: 100%;
  margin-top: 2rem;
  margin-bottom: 4rem;
}

.skills-table-container {
  width: fit-content; /* s'adapte à la largeur du tableau */
  max-width: 100%;
  text-align: left;
}

.title-skills-table-underline {
  text-decoration: underline;
}

.title-skills-table {
  margin-bottom: -0.5rem;
  font-size: 1rem;
  font-weight: bold;
  color: var(--text-special-01);
  text-shadow: 0 0 4px var(--text-shadow);
}

.skills-table {
  font-family: 'Dlx Font';
  /* font-size: 1rem; */
  width: 100%;
  margin-top: 2rem;
  border-collapse: collapse;
  text-align: left;
  color: var(--text-special-01);
  border: 2px solid var(--border-01);
}

.skills-table th,
.skills-table td {
  padding: 1rem;
  border: 2px solid var(--border-01);
  vertical-align: top;
  text-shadow: 0 0 2px var(--text-shadow);
  line-height: 2rem;
  width: 50%;
}

.skills-table th {
  background-color: rgba(0, 255, 238, 0.2);
}

.td-para-gd,
.td-para-methods {
  font-size: 0.8em;
  display: flex;
  align-items: flex-start;
  margin-bottom: 2em;
  margin-right: 1em;
}

.td-para-gd-sublist {
  display: flex;
  align-items: flex-start;
}

.td-arrow {
  flex-shrink: 0;
  margin-right: 1em;
  color: currentColor;
}

.td-text {
  flex: 1;
  text-align: left;
  text-indent: 0;
}

.title-softwares {
  text-align: left;
  text-decoration: underline;
  margin-bottom: 1rem;
}

.softwares-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.softwares-row {
  display: contents;
}

.softwares-left, 
.softwares-right {
  text-align: left;
}

.softwares-left ul, .softwares-right ul {
  margin-left: 1.5rem;
  padding-left: 0;
  list-style-type: disc;
}

.softwares-left span.icon,
.softwares-right span.icon {
  margin-right: 0.3rem;
}

.softwares-field {
  margin-top: 0.5rem;
}

.softwares-field-contents {
  font-size: 0.8rem;
  margin-top: 0.5rem;
  line-height: 1.6rem;
  list-style-type: none;
  position: relative;
  padding-left: 1.2rem;
  text-indent: -1.6rem;
  list-style: none;
  line-height: 1.6rem;
}

.diplomas {
  margin-top: 4rem;
  display: inline;
}

.title-diplomas {
  text-align: left;
  text-decoration: underline;
  padding-bottom: 2rem;
    color: var(--text-diploma);
  text-shadow: 0 0 3px var(--text-diploma-shadow);

}

.diploma-01 {
  width: 70%;
  height: auto;
  display: block;
  margin: 0;
  border: 2px solid var(--border-01);
  box-shadow: 0 0 8px var(--text-shadow);
}

/* --- CONTAINER EXPERIENCES PROFESSIONNELLES --- */
/* Styles de la page Expériences professionnelles. */

.welcome-box-exp {
  border: 2px solid var(--border-01);
  padding: 2rem;
  margin: 2rem auto;
  width: 80vw;
  max-width: 80vw;
  height: 60vh;
  min-height: 30vh;
  max-height: 60vh;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  overflow-y: auto;
  overflow-x: hidden;

  scrollbar-width: auto; /* Pour Firefox */
  scrollbar-color: #00ffff88 transparent;
}

.welcome-text-exp {
  text-align: left;
  line-height: 2rem;
}

.years {
  text-decoration: underline;
}

.cv-line {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap; /* pour éviter le débordement sur petit écran */
}

.cv-title {
  font-weight: bold;
  font-size: 1rem;
  white-space: nowrap;
}
.cv-title-underline {
  text-decoration: underline;
}

.arrow-right {
  font-size: 1.2rem;
  text-decoration: none;
}

.cv-section {
  margin-top: 2rem;
  width: 100%;
}

.cv-buttons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.cv-button {
  padding: 0.6rem 1.2rem;
  border: 2px solid var(--border-01);
  border-radius: 1rem;
  text-decoration: none;
  color: var(--border-01);
  background-color: transparent;
  transition: all 0.3s ease;
  font-size: 0.9rem;
}
.cv-button:hover {
  background-color: var(--border-01);
  color: black;
  box-shadow: 0 0 5px var(--border-01), 0 0 10px var(--border-01);
}

/* --- CONTAINER PROJETS --- */

.welcome-box-projets {
  border: 2px solid var(--border-01);
  padding: 2rem;
  margin: 2rem auto;
  width: 80vw;
  max-width: 80vw;
  height: 60vh;
  min-height: 30vh;
  max-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh; 
  overflow-y: auto;
  overflow-x: hidden;

  scrollbar-width: auto;
  scrollbar-color: #00ffff88 transparent;

  gap: 2rem;
}

.project-button {
  padding: 0.6rem 1.2rem;
  border: 2px solid var(--border-01);
  border-radius: 2rem;
  text-decoration: none;
  color: var(--border-01);
  background-color: transparent;
  transition: all 0.3s ease;
  font-size: 1.1rem;
  height: 10vh;
  width: 40vw;
  display: flex;
  align-items: center;
  justify-content: center;
}
.project-button:hover {
  background-color: var(--border-01);
  color: black;
  box-shadow: 0 0 5px var(--border-01), 0 0 10px var(--border-01);
}

.project-button.inactive {
  pointer-events: none;
  background-color: transparent;
  border: 2px solid var(--button-inactive);
  color: var(--button-inactive);
  text-shadow: 0px 0px 3px var(--button-inactive-shadow);
  cursor: not-allowed;
  box-shadow: none;
}

/* --- --- CONTAINER PROJETS CREASUP --- */
/* Styles du carrousel des projets Créasup. */

.welcome-box-creasup {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  gap: 1rem;
  width: 80vw;
  max-width: 80vw;
  height: 60vh;
  margin: 2rem auto;
  border: 2px solid var(--border-01);
  background-color: transparent;
  overflow: hidden;
}

.arrow-box {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 4rem;
  flex-shrink: 0;
  border: 2px solid var(--border-01);
}

.projets-slider {
  position: relative;
  height: 100%;
}

.carousel-track {
  display: flex;
  transition: transform 0.5s ease-in-out;
  width: 100%;
  height: 100%;
  display: flex;
  transition: transform 0.5s ease-in-out;
  width: 100%;
  height: 100%;
  padding: 0 15.5rem;
  box-sizing: border-box;
}

.image-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-width: 100%;
  max-width: 100%;
  flex-shrink: 0;
  flex-shrink: 0;
  background-color: black;
  border: 3px solid var(--border-01);
  border-radius: 1rem;
  overflow: hidden;
  transition: transform 0.5s ease, box-shadow 0.8s ease;
  cursor: pointer;
}
.image-wrapper:not(:first-child) {
  margin-left: 31rem;
}
.image-wrapper:hover {
  transform: scale(1.02);
  box-shadow: 0 0 4rem rgba(0, 255, 238, 0.2);
}

.image-wrapper a {
  display: block;
  height: 100%;
}

.projet-image {
  height: 100%;
  width: auto;
  object-fit: contain;
  border-radius: 1rem;
  display: block;
  background-color: black;
  transition: transform 1s ease;
}
.projet-image:hover {
  transform: scale(1.02);
  box-shadow: 0 0 5rem rgba(0, 255, 238, 0.2);
}

.slider-arrow-box {
  position: relative;
  height: 80%;
  width: 4rem; /* largeur fixe */
  background: none;
  border: none;
  cursor: pointer;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--border-01);
  transition: background-color 0.2s ease;
}
.slider-arrow-box.left {
  position: absolute;
  left: 2rem;
  top: 1;
  height: 60%;
  width: 8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  order: -1;
}
.slider-arrow-box.right {
  position: absolute;
  right: 2rem;
  top: 1;
  height: 60%;
  width: 8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  order: 1;
}
.slider-arrow-box {
  background-color: transparent;
  border: 2px solid var(--border-01);
  border-radius: 20px;
  color: var(--text-nav-01);
  transition: all 0.3s ease;
}
.slider-arrow-box:hover {
  background: var(--border-01);
  color: var(--text-nav-03);
  text-decoration: none;
}

.slider-arrow {
  font-size: 2.8rem;
  text-shadow: 0 0 5px var(--text-shadow);
  pointer-events: none;
}

/* --- --- --- FOR ALL PROJECTS --- */
/* Structure commune des pages projet détaillées. */

.welcome-box-projects {
  border: 2px solid var(--border-01);
  padding: 2rem;
  margin: 2rem auto;
  width: 80vw;
  max-width: 80vw;
  height: 60vh;
  min-height: 30vh;
  max-height: 60vh;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  overflow-y: auto;
  overflow-x: hidden;

  scrollbar-width: auto;
  scrollbar-color: #00ffff88 transparent;
}

.image-title-box-projects {
  width: 100%;
  max-height: 100%;
}

.image-title-projects {
  width: 60%;
  height: auto;
  display: block;
  object-fit: contain;
  margin-left: auto;
  margin-right: auto;
  margin-top: -1.2rem;
}

.text-title-projects {
  text-align: left;
  box-sizing: border-box;
  margin-top: 2.5rem; 
}

h2 {
  font-size: 1.4rem;
}
.ver-projects {
  font-size: 1rem;
}

h3 {
  font-size: 1rem;
  margin-top: 1rem;
}

.logo-steam {
  height: auto;
  width: 2rem;
  top: -0.2rem;
  vertical-align: middle;
  position: relative;
  box-shadow: 0 0.3px 5px var(--text-shadow);
  border-radius: 20px;
}

.infos-projects {
  margin-top: 2.5rem;
  margin-left: auto;
  text-align: left;
  font-size: 0.9rem;
  padding-left: 3rem;
  border-left: 2px solid var(--border-01);
  max-width: 35vw;
  flex-shrink: 0;
  line-height: 1.5rem;
}

.text-presentation-projects {
  text-align: left;
  box-sizing: border-box;
  margin-top: 2.5rem;
  margin-bottom: 3rem;
  line-height: 2rem;
}

.skills {
  width: 100%;
  margin-top: 2rem;
  margin-bottom: 4rem;
}

.skills-table-container {
  width: fit-content; /* s'adapte à la largeur du tableau */
  max-width: 100%;
  text-align: left;
}

.title-skills-table-projects {
  margin-bottom: -0.5rem;
  font-size: 1rem;
  font-weight: bold;
  color: var(--text-footer-02);
  text-shadow: 0 0 4px var(--text-shadow);
}
.title-skills-table-projects-underline {
  text-decoration: underline;
}

.skills-table-projects {
  width: 100%;
  margin-top: 2rem;
  border-collapse: collapse;
  text-align: left;
  color: var(--text-special-01);
  border: 2px solid var(--border-02);
}
.skills-table-projects th,
.skills-table-projects td {
  padding: 1rem;
  border: 2px solid var(--border-02);
  vertical-align: top;
  text-shadow: 0 0 2px var(--text-shadow);
  line-height: 2rem;
  width: 50%;
}
.skills-table-projects th {
  background-color: rgba(0, 155, 136, 0.2);
}

.td-para-gd,
.td-para-methods {
  font-size: 0.8em;
  display: flex;
  align-items: flex-start;
  margin-bottom: 2em;
  margin-right: 1em;
}

.td-para-gd-sublist {
  display: flex;
  align-items: flex-start;
}

.title-team-projects {
  text-align: left;
  text-decoration: underline;
  margin-bottom: 1rem;
}

.team-name-projects {
  font-size: 0.8rem;
  margin-top: 0.5rem;
  line-height: 1.6rem;
  list-style-type: none;
  position: relative;
  padding-left: 1.2rem;
  text-indent: -1.6rem;
  list-style: none;
  line-height: 1.6rem;
}

.line-projects {
  height: 2px;
  background-color: #ffffff;
  box-shadow: 0 0 5px var(--text-shadow);
  width: 60%;
  margin-top: 3rem;
  margin-left: auto;
  margin-right: auto;
}

.download-projects {
  margin-top: 2.5rem;
  width: 100%;
}
.download-text-projects {
  text-align: left;
}

.download-buttons-projects {
  text-align: center;
  margin-top: 2rem;
}

.docs-button-projects {
  margin-right: 1rem;
}
.poc-button-projects {
  margin-left: 1rem;
}

.docs-button-projects,
.poc-button-projects {
  padding: 0.6rem 1.2rem;
  border: 2px solid var(--border-01);
  border-radius: 1rem;
  text-decoration: none;
  color: var(--border-01);
  background-color: transparent;
  transition: all 0.3s ease;
  font-size: 0.9rem;
}
.docs-button-projects:hover,
.poc-button-projects:hover {
  background-color: var(--border-01);
  color: black;
  box-shadow: 0 0 5px var(--border-01), 0 0 10px var(--border-01);
}

/* --- --- --- CONTAINER PROHIBEAST --- */

.dash-prohibeast {
  padding-top: 4rem;
  text-align: center;
  width: 100%;
  font-size: 1.2rem;
}

.team-grid-prohibeast {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.team-grid-row-prohibeast {
  display: contents;
}

.column-01-team-prohibeast, 
.column-02-team-prohibeast,
.column-03-team-prohibeast {
  text-align: left;
  margin-top: 0.5rem;
}

.column-01-team-prohibeast ul,
.column-02-team-prohibeast ul,
.column-03-team-prohibeast ul {
  margin-left: 1.5rem;
  padding-left: 0;
  list-style-type: disc;
}

.column-01-team-prohibeast span.icon,
.column-02-team-prohibeast span.icon,
.column-03-team-prohibeast span.icon {
  margin-right: 0.3rem;
}

.key-mapping-prohibeast {
  text-align: left;
  box-sizing: border-box;
  margin-top: 3rem;
}

/* --- --- --- CONTAINER BABEL TOWER --- */

.dash-babeltower {
  padding-top: 5rem;
  text-align: center;
  /*margin: 1rem auto;*/
  width: 100%;
  font-size: 1.2rem;
}

.team-grid-babeltower {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18.5rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.team-grid-row-babeltower {
  display: contents;
}

.column-01-team-babeltower, 
.column-02-team-babeltower {
  text-align: left;
  margin-top: 0.5rem;
}
.column-01-team-babeltower ul,
.column-02-team-babeltower ul {
  margin-left: 1.5rem;
  padding-left: 0;
  list-style-type: disc;
}
.column-01-team-babeltower span.icon,
.column-02-team-babeltower span.icon {
  margin-right: 0.3rem;
}

.key-mapping-babeltower {
  text-align: left;
  box-sizing: border-box;
  margin-top: 3rem;
}

/* --- --- --- CONTAINER SPECIES --- */

.dash-species {
  padding-top: 5rem;
  text-align: center;
  /*margin: 1rem auto;*/
  width: 100%;
  font-size: 1.2rem;
}

.team-grid-species {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18.5rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.team-grid-row-species {
  display: contents;
}

.column-01-team-species, 
.column-02-team-species {
  text-align: left;
  margin-top: 0.5rem;
}
.column-01-team-species ul,
.column-02-team-species ul {
  margin-left: 1.5rem;
  padding-left: 0;
  list-style-type: disc;
}
.column-01-team-species span.icon,
.column-02-team-species span.icon {
  margin-right: 0.3rem;
}

.key-mapping-species {
  text-align: left;
  box-sizing: border-box;
  margin-top: 3rem;
}

/* --- --- CONTAINER PROJETS STUDIOS --- */

.welcome-box-studios {
  border: 2px solid var(--border-01);
  padding: 2rem;
  margin: 2rem auto;
  width: 80vw;
  max-width: 80vw;
  height: 60vh;
  min-height: 30vh;
  max-height: 60vh;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  overflow-y: auto;
  overflow-x: hidden;

  scrollbar-width: auto;
  scrollbar-color: #00ffff88 transparent;
}


/* --- --- CONTAINER PROJETS PERSO --- */

.welcome-box-perso {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  gap: 1rem;
  width: 80vw;
  max-width: 80vw;
  height: 60vh;
  margin: 2rem auto;
  border: 2px solid var(--border-01);
  background-color: transparent;
  overflow: hidden;
}

.disable-click {
  pointer-events: none;
}

.slider-arrow.perso {
  text-shadow: 0px 0px 4px var(--button-inactive-shadow);
}
.slider-arrow-box.perso {
  pointer-events: none;
  background-color: transparent;
  border: 2px solid var(--button-inactive);
  color: var(--button-inactive);
  text-shadow: 0px 0px 3px var(--button-inactive-shadow);
  cursor: not-allowed;
  box-shadow: none;
}

/* --- CONTAINER CONTACT --- */

.welcome-box-contact {
  border: 2px solid var(--border-01);
  padding: 2rem;
  margin: 2rem auto;
  width: 80vw;
  max-width: 80vw;
  height: 60vh;
  min-height: 30vh;
  max-height: 60vh;

  display: block;
  overflow-y: auto;
  overflow-x: hidden;

  scrollbar-width: auto; /* Pour Firefox */
  scrollbar-color: #00ffff88 transparent;
}

.contact-form {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.8rem;
  text-align: left;
}

.contact-fields-row {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
}

.contact-field {
  min-width: 0;
}

.contact-label {
  display: block;
  margin-bottom: 0.85rem;
  color: var(--text);
  font-family: 'Press Start 2P', monospace;
  font-size: 1rem;
  line-height: 1.4rem;
  text-shadow: 0 0 5px var(--text-shadow);
  cursor: var(--cursor-default) !important;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

.contact-input,
.contact-textarea {
  width: 100%;
  box-sizing: border-box;

  background: transparent;
  border: 2px solid var(--border-01);
  color: var(--text-special-01);
  outline: none;

  font-family: 'Dlx Font', monospace;
  font-size: 0.7rem;
  text-shadow: 0 0 4px var(--text-shadow);
  caret-color: var(--border-01);
}

.contact-input {
  height: 1.5rem;
  padding: 0 0.5rem;
}

.contact-textarea {
  min-height: 18vh;
  padding: 0.8rem;
  resize: none;
  overflow-y: hidden !important;
  line-height: 1.6rem;
}

.contact-input:focus,
.contact-textarea:focus {
  box-shadow: 0 0 6px var(--border-01), inset 0 0 5px rgba(0, 255, 238, 0.15);
}

.contact-input:-webkit-autofill,
.contact-input:-webkit-autofill:hover,
.contact-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text-special-01);
  caret-color: var(--border-01);
  box-shadow: 0 0 0 1000px #0f3e33 inset;
}

.contact-message-block {
  width: 100%;
}

.contact-message-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.85rem;
}

.contact-label-message {
  margin-bottom: 0;
}

/* Bouton Envoyer : base commune */
.contact-submit {
  min-width: 9rem;
  padding: 0.25rem 1rem;

  background: transparent;

  font-family: 'kongtext', monospace;
  font-size: 0.65rem;

  box-shadow: none;
  opacity: 1;

  transition:
    background 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

/* Inactif : rouge + curseur classique + tir possible */
.contact-submit:disabled,
.contact-submit:disabled:hover,
.contact-submit:disabled:focus {
  background: transparent;
  border: 2px solid var(--button-inactive);
  color: var(--button-inactive);
  text-shadow: 0 0 3px var(--button-inactive-shadow);
  box-shadow: none;

  cursor: var(--cursor-default) !important;

  /*
    Important :
    le bouton reste disabled, mais il ne bloque plus le mousedown.
    Le clic passe à travers et Fire.js peut déclencher le tir.
  */
  pointer-events: none;
}

/* Actif : bleu + curseur interactif */
.contact-submit:not(:disabled) {
  background: transparent;
  border: 2px solid var(--border-01);
  color: var(--text-nav-01);
  text-shadow: 0 0 4px var(--text-shadow);

  cursor: none;
  pointer-events: auto;
}

/* Actif + survol : comportement bleu actuel */
.contact-submit:not(:disabled):hover,
.contact-submit:not(:disabled):focus {
  background: var(--border-01);
  color: var(--text-nav-03);
  text-shadow: none;
  box-shadow: 0 0 5px var(--border-01), 0 0 10px var(--border-01);

  cursor: none;
}

.dash-contact {
  text-align: center;
  width: 100%;
  font-size: 1.2rem;
}

.contact-privacy {
  width: 100%;
  color: var(--text);
  font-family: 'Press Start 2P', monospace;
  font-size: 0.72rem;
  line-height: 1.65rem;
  text-align: left;
  text-shadow: 0 0 4px var(--text-shadow);
}

.contact-feedback {
  width: 100%;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.7rem;
  line-height: 1.5rem;
  text-align: left;
}

.contact-feedback-success {
  color: var(--text-special-02);
  text-shadow: 0 0 4px var(--text-special-02-shadow);
}

.contact-feedback-error {
  color: var(--button-inactive);
  text-shadow: 0 0 3px var(--button-inactive-shadow);
}

.contact-honeypot {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;

  width: 1px !important;
  height: 1px !important;

  overflow: hidden !important;
  opacity: 0 !important;

  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

@media screen and (max-width: 1024px) {
  .welcome-box-contact {
    height: auto;
    min-height: 50vh;
  }

  .contact-fields-row {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .contact-form {
    height: auto;
  }

  .contact-label {
    font-size: 0.85rem;
  }

  .contact-textarea {
    min-height: 14rem;
  }

  .site-footer {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .footer-social-links {
    gap: 1.5rem;
  }
}

@media screen and (max-width: 600px) {
  .welcome-box-contact {
    width: calc(100vw - 2rem);
    max-width: calc(100vw - 2rem);
    padding: 1rem;
    margin: 1rem auto;
  }

  .contact-message-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .contact-submit {
    width: 100%;
    min-width: 0;
    padding: 0.6rem 1rem;
  }

  .contact-input,
  .contact-textarea,
  .contact-privacy {
    font-size: 0.62rem;
  }

  .contact-separator {
    letter-spacing: 0.25rem;
  }

  .site-footer {
    width: calc(100vw - 2rem);
    max-width: calc(100vw - 2rem);
  }

  .footer-social-link {
    width: 2.5rem;
    height: 2.5rem;
  }
}

/* --- FOOTER --- */
/* Footer commun aux pages, avec option fixed-bottom pendant le mini-jeu. */

footer {
  font-family: 'pr Start', monospace;
  font-size: 0.8rem;
  color: var(--text-footer-01);
  text-shadow: 0px 0px 1px var(--text-footer-02);
  padding-top: 1rem;
}

footer .name {
  font-family: 'kongtext', monospace;
  color: var(--text-footer-02);
  text-shadow: 0px 0px 2px var(--text-footer-02);
  font-weight: bold;
}

.site-footer {
  width: 80vw;
  max-width: 80vw;
  margin: -0.1rem auto 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2rem;
  padding-top: 0;
}

.site-footer .footer-copyright {
  white-space: nowrap;
}

.footer-social-links {
  display: flex;
  align-items: center;
  gap: 3.5rem;
}

.footer-social-links-left {
  justify-content: flex-end;
}

.footer-social-links-right {
  justify-content: flex-start;
}

.footer-social-link {
  width: 3rem;
  height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: var(--text);
  border: 2px solid var(--text);
  border-radius: 0.45rem;
  text-decoration: none;
  cursor: none;

  box-shadow: 0 0 5px rgba(255, 255, 255, 0.45);
  transition: all 0.3s ease;
}

.footer-social-link:hover,
.footer-social-link:focus {
  background: var(--border-01);
  border-color: var(--border-01);
  box-shadow: 0 0 5px var(--border-01), 0 0 10px var(--border-01);
}

.footer-social-placeholder {
  display: block;
  width: 100%;
  height: 100%;
}

/* Pour mini-jeu */
footer.fixed-bottom {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
}

#crt-overlay {
  /* Canvas de l'effet CRT calculé côté JavaScript. */
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;     /* Taille viewport */
  height: 100vh;
  z-index: 1000;     /* Toujours au-dessus */
  pointer-events: none;  /* Important pour ne pas bloquer les clics */
  image-rendering: pixelated; /* Pour éviter lissage */
}

/* =======================
       SPECIAL CURSORS 
   ======================= */

/* Textbox : curseur caret personnalisé */
input[type="text"],
input[type="email"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="password"],
textarea,
.contact-input,
.contact-textarea {
  cursor: var(--cursor-caret);
}


/* =========================================================
   SCROLLBARS NATIVES CACHÉES
   ---------------------------------------------------------
   Les vraies scrollbars sont invisibles pour éviter
   l'apparition du curseur Windows.
   Le scroll reste possible à la molette / clavier / trackpad.
   ========================================================= */

.welcome-box-contact,
.welcome-box-profil,
.welcome-box-exp,
.welcome-box-projets,
.welcome-box-projects,
.welcome-box-studios,
.contact-textarea {
  scrollbar-width: none !important;      /* Firefox */
  -ms-overflow-style: none !important;   /* Ancien Edge / IE */
}

.welcome-box-contact::-webkit-scrollbar,
.welcome-box-profil::-webkit-scrollbar,
.welcome-box-exp::-webkit-scrollbar,
.welcome-box-projets::-webkit-scrollbar,
.welcome-box-projects::-webkit-scrollbar,
.welcome-box-studios::-webkit-scrollbar,
.contact-textarea::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}


/* =========================================================
   CURSEUR FLÈCHE POUR SCROLLBAR CUSTOM
   ========================================================= */

#cursor-scrollbar {
  position: fixed;
  width: 32px;
  height: 32px;
  pointer-events: none;

  background-image: url('/images/Cursor-Arrow-32px.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;

  z-index: 10050;
  transform: translate(-50%, -50%);
  display: none;
}

body.scrollbar-hover,
body.scrollbar-hover * {
  cursor: none !important;
}

body.scrollbar-hover #cursor-scrollbar {
  display: block;
}

body.scrollbar-hover #cursor-interactive {
  display: none !important;
}


/* =========================================================
   SCROLLBAR CUSTOM
   ---------------------------------------------------------
   Fausse scrollbar visuelle :
   - pas de bordure ;
   - pas de glow ;
   - couleur #00FFFF ;
   - transparente au repos ;
   - opaque au survol / drag.
   ========================================================= */

.custom-scrollbar {
  position: fixed;
  z-index: 997;

  display: none;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;

  cursor: none !important;
  user-select: none;
  -webkit-user-select: none;
}

.custom-scrollbar.visible {
  display: block;
}

.custom-scrollbar,
.custom-scrollbar * {
  cursor: none !important;
}


/* Cadre désactivé : on garde l'élément car le JS le crée,
   mais il ne doit rien afficher. */
.custom-scrollbar-frame {
  display: none !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}


/* Zone de piste invisible */
.custom-scrollbar-track {
  position: absolute;
  left: 0;
  right: 0;
  top: 18px;
  bottom: 18px;

  background: transparent !important;
  border: none !important;
  box-shadow: none !important;

  cursor: none !important;
}


/* Flèches haut / bas */
.custom-scrollbar-arrow {
  position: absolute;
  left: 0;
  width: 100%;
  height: 18px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: transparent !important;
  border: none !important;
  box-shadow: none !important;

  cursor: none !important;
}

.custom-scrollbar-arrow-up {
  top: 0;
}

.custom-scrollbar-arrow-down {
  bottom: 0;
}

.custom-scrollbar-arrow::before {
  content: "";
  width: 0;
  height: 0;

  filter: none !important;
}

.custom-scrollbar-arrow-up::before {
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 7px solid rgba(0, 255, 255, 0.65);
}

.custom-scrollbar-arrow-down::before {
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid rgba(0, 255, 255, 0.65);
}

.custom-scrollbar:hover .custom-scrollbar-arrow-up::before,
.custom-scrollbar.is-dragging .custom-scrollbar-arrow-up::before {
  border-bottom-color: #00FFFF;
}

.custom-scrollbar:hover .custom-scrollbar-arrow-down::before,
.custom-scrollbar.is-dragging .custom-scrollbar-arrow-down::before {
  border-top-color: #00FFFF;
}


/* Thumb : barre centrale */
.custom-scrollbar-thumb {
  position: absolute;

  left: 4px !important;
  right: 4px !important;

  min-height: 42px;
  border-radius: 999px;

  background: rgba(0, 255, 255, 0.65) !important;

  border: none !important;
  box-shadow: none !important;

  cursor: none !important;
}


/* Hover / drag : #00FFFF opaque */
.custom-scrollbar:hover .custom-scrollbar-thumb,
.custom-scrollbar.is-dragging .custom-scrollbar-thumb {
  background: #00FFFF !important;

  border: none !important;
  box-shadow: none !important;
}


/* Sécurité : aucun cadre/glow au hover */
.custom-scrollbar:hover .custom-scrollbar-frame,
.custom-scrollbar.is-dragging .custom-scrollbar-frame {
  display: none !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}