/* ===== BTM Racing — thème néon ===== */
:root {
  --bg: #0b0b12;
  --bg-alt: #11121c;
  --panel: #171827;
  --panel-edge: #262840;
  --text: #e8e9f2;
  --text-dim: #9a9db5;
  --yellow: #ffe600;
  --pink: #ff2fb9;
  --action-start: #c41689;
  --action-end: #9f19d5;
  --control-height: 44px;
  --cyan: #35e0d0;
  --glow-yellow: 0 0 6px rgba(255, 230, 0, 0.8), 0 0 24px rgba(255, 230, 0, 0.35);
  --glow-pink: 0 0 6px rgba(255, 47, 185, 0.8), 0 0 24px rgba(255, 47, 185, 0.35);
  --glow-cyan: 0 0 6px rgba(53, 224, 208, 0.8), 0 0 24px rgba(53, 224, 208, 0.35);
  --font-display: "Orbitron", "Orbitron Fallback", sans-serif;
  --font-body: "Rajdhani", "Rajdhani Fallback", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

[hidden] { display: none !important; }

/* Polices de secours calées sur la largeur d’Orbitron et de Rajdhani (mesurée face à Arial) :
   quand la vraie police arrive, le texte change de dessin mais la mise en page ne bouge plus. */
@font-face { font-family: "Orbitron Fallback"; font-weight: 100 500; src: local("Arial"), local("Liberation Sans"), local("Roboto"); size-adjust: 116%; }
@font-face { font-family: "Orbitron Fallback"; font-weight: 600 900; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Roboto Bold"); size-adjust: 116%; }
@font-face { font-family: "Rajdhani Fallback"; font-weight: 100 500; src: local("Arial"), local("Liberation Sans"), local("Roboto"); size-adjust: 90%; }
@font-face { font-family: "Rajdhani Fallback"; font-weight: 600 900; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Roboto Bold"); size-adjust: 79%; }

/* Fondu entre deux pages du site : le changement d’onglet ne donne plus l’impression d’une page qui se reconstruit. */
@media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } }
/* Le menu est le même partout : il reste en place pendant le fondu au lieu de se redessiner avec la page. */


/* La place de la barre de défilement est toujours réservée : la page ne se décale pas de côté
   quand son contenu s’allonge ou d’un onglet à l’autre (Windows surtout). */
html { scroll-behavior: smooth; scrollbar-gutter: stable; }

html, body { overflow-x: clip; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.1rem;
  line-height: 1.6;
}

a { color: inherit; }

.neon-yellow { color: var(--yellow); text-shadow: var(--glow-yellow); }
.neon-pink   { color: var(--pink);   text-shadow: var(--glow-pink); }
.neon-cyan   { color: var(--cyan);   text-shadow: var(--glow-cyan); }

/* ===== Boutons ===== */
.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.85rem 1.8rem;
  border-radius: 8px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn:hover { transform: translateY(-2px); }

.btn-primary {
  background: linear-gradient(100deg, var(--action-start), var(--action-end));
  /* Le dégradé couvre aussi la bordure transparente : sinon il se répète dessous et laisse un liseré rose à droite. */
  background-origin: border-box;
  color: #fff;
  box-shadow: 0 0 18px rgba(255, 47, 185, 0.45);
}
.btn-primary:hover { box-shadow: 0 0 28px rgba(255, 47, 185, 0.7); }
.btn-primary:disabled {
  background: #2a2b3d;
  color: var(--text-dim);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

.btn-ghost {
  background: transparent;
  color: var(--cyan);
  border-color: var(--cyan);
  box-shadow: inset 0 0 10px rgba(53, 224, 208, 0.15);
}
.btn-ghost:hover { box-shadow: var(--glow-cyan), inset 0 0 10px rgba(53, 224, 208, 0.25); }

.btn-small { padding: 0.5rem 1.2rem; font-size: 0.8rem; }
.btn-full { width: 100%; }


:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
.skip-link { position: fixed; top: 0.5rem; left: 0.5rem; z-index: 100; padding: 0.6rem 1rem; background: var(--bg); color: var(--cyan); transform: translateY(-150%); }
.skip-link:focus { transform: none; }
#contenu { scroll-margin-top: 6rem; }
.text-link { color: var(--cyan); }
.text-center { text-align: center; }
.text-left { text-align: left; }
.space-before { margin-top: 1.2rem; }
.space-before-large { margin-top: 2rem; }
.align-start { align-self: flex-start; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

.text-strong { font-weight: 600; }