/* ==========================================================================
   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 */
}

/* --- 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: url('/images/Cursor-32px.png') 16 16, auto;
    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;
}

#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{
  /* Champ de saisie du nom, prévu pour le futur classement en ligne. */
  width:520px;
  max-width: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:uppercase;
}

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

.go-btn{
  background:transparent;
  border:2px solid var(--border-01);
  color:var(--border-01);
  font-family:inherit;
  text-transform:uppercase;
  padding:12px 18px;
  cursor:pointer;
  height:3.2em;
}

.go-btn-small{ padding:10px 14px; }

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

/* 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 --- */
/* Styles de la page de choix des catégories de 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: 5rem;
  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;
}

/* --- 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;
}

/* 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 */
}

/* --- ANIMATIONS --- */
@keyframes flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    opacity: 1;
  }
  20%, 22%, 24%, 55% {
    opacity: 0.4;
  }
}

/* ################################
   ########## RESPONSIVE ##########
   ################################ */
/* Ajustements pour grands écrans, tablettes et mobiles. */

/* ÉCRANS 4K (3840x2160) */
@media screen and (min-width: 3840px) {
  header {
    padding-top: 8rem;
  }

  header h1 {
    font-size: 3.2rem;
    color: var(--crt-border);
    text-shadow: 0 0 16px var(--crt-shadow);
    margin-bottom: 8rem;
  }

  nav ul {
    gap: 3.2rem;
    margin: 6rem;
  }

  nav ul li a {
    padding: 2.4rem 3.2rem;
    font-size: 3.4rem;
    border: 6.4px solid var(--crt-border);
  }

  .welcome-box {
    padding: 4rem;
    margin: 4rem auto;
    border: 6.4px solid var(--crt-border);
  }

  .welcome-text {
    font-size: 5.12rem;
    line-height: 11.2rem;
    text-shadow: 0 0 16px var(--crt-shadow);
  }

  footer {
    font-size: 2.3rem;
    padding-top: 6.8rem;
  }
}



/* TABLETTES */
@media screen and (max-width: 1024px) {
  .welcome-box {
    min-height: 50vh;
    padding: 1.5rem;
  }

  .welcome-text {
    font-size: 1.2rem;
  }

  nav ul {
    gap: 0.5rem;
  }

  nav ul li a {
    padding: 0.5rem 0.8rem;
    font-size: 0.8rem;
  }
}

/* MOBILES */
@media screen and (max-width: 600px) {
  header h1 {
    font-size: 0.8rem;
    margin: 1rem 0;
  }

  .welcome-box {
    padding: 1rem;
    margin: 1rem;
    min-height: 45vh;
  }

  .welcome-text {
    font-size: 1rem;
    line-height: 1.8;
    max-width: 40rem;
    margin: auto;
  }

  nav ul {
    flex-direction: column;
    gap: 0.5rem;
  }

  nav ul li a {
    width: 100%;
    font-size: 0.75rem;
  }

  footer {
    font-size: 0.6rem;
  }
}

/* =========================
   Optimisations runtime mini-jeu
   ========================= */
body.game-playing::before {
  /* Optimisation : enlève le grain pendant le canvas animé. */
  display: none; /* évite le mix-blend-mode/grain pendant le canvas animé */
}

body.game-playing .crt-borders {
  filter: none; /* les drop-shadows plein écran coûtent cher sur Firefox/Edge/Opera */
}

body.game-playing #cursor-interactive {
  transition: none; /* évite une transition CSS à chaque mouvement de souris */
  will-change: left, top;
}

body.game-playing #fx-canvas,
body.game-playing #ships-canvas,
body.game-playing .welcome-box-accueil > canvas {
  image-rendering: pixelated;
}


/* =========================================================
   Optimisation Firefox - Page Accueil / idle
   ---------------------------------------------------------
   Firefox est plus sensible aux effets plein écran composités
   avec mix-blend-mode + gros drop-shadow + canvas animés.
   Ces règles ne changent rien dans Chrome / Edge / Opera.
   ========================================================= */
@-moz-document url-prefix() {
  /* Optimisations spécifiques Firefox en état idle / accueil. */
  body::before {
    display: none;
  }

  .crt-borders {
    filter: none;
  }

  #cursor-interactive {
    transition: none;
  }

  .welcome-box-accueil {
    transition: none;
  }
}



/* Réactivation du glow CRT pendant le mini-jeu, après validation FPS. */
body.game-playing .crt-borders {
  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));
}

/* TEST Firefox : remettre le glow CRT partout */
@-moz-document url-prefix() {
  .crt-borders {
    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)) !important;
  }
}