/* Road Derby : le site (25/10, tâche 6780). Univers du jeu : nuit néon, rose et cyan. Aucune police externe. */
:root {
  --fond: #0a0814;
  --fond-2: #120e22;
  --carte: #17122b;
  --texte: #f2f0ff;
  --doux: #b9b3d6;
  --rose: #ff52a0;
  --cyan: #42d9ff;
  --jaune: #ffd34d;
  --bord: #2a2347;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--fond); color: var(--texte);
  font: 17px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
img, video { max-width: 100%; display: block; }
a { color: var(--cyan); }

.logo {
  margin: 0; font-weight: 900; font-style: italic; letter-spacing: .12em; line-height: 1;
  font-size: clamp(2.2rem, 10.5vw, 6.5rem); white-space: nowrap;
  background: linear-gradient(100deg, var(--rose) 10%, #c58cff 50%, var(--cyan) 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 18px rgba(255, 82, 160, .45));
}
.logo.petit { font-size: 1rem; letter-spacing: .1em; filter: none; }
.studio { margin: .3rem 0 0; color: var(--doux); letter-spacing: .3em; text-transform: uppercase; font-size: .8rem; }
.studio strong { color: var(--texte); font-weight: 700; }

/* En-tête : vidéo de démonstration en fond. */
.hero { position: relative; min-height: min(92vh, 52rem); background: #0a0814 url(img/affiche.jpg) center / cover; display: flex; flex-direction: column; overflow: hidden; }
.hero-fond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-voile { position: absolute; inset: 0; background:
  linear-gradient(180deg, rgba(10, 8, 20, .55) 0%, rgba(10, 8, 20, .15) 35%, rgba(10, 8, 20, .75) 80%, var(--fond) 100%); }
.menu { position: relative; display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; justify-content: flex-end; align-items: center;
  padding: 1rem clamp(1rem, 4vw, 3rem); }
.menu a { color: var(--texte); text-decoration: none; font-weight: 600; font-size: .95rem; opacity: .85; }
.menu a:hover { opacity: 1; color: var(--cyan); }
.menu .menu-cta { padding: .35rem 1rem; border: 1px solid var(--rose); border-radius: 999px; color: var(--rose); opacity: 1; }
.hero-texte { position: relative; margin-top: auto; padding: 0 clamp(1rem, 6vw, 5rem) clamp(2rem, 8vh, 5rem); max-width: 60rem; }
.accroche { font-size: clamp(1.1rem, 2.4vw, 1.45rem); margin: 1.2rem 0 1.6rem; max-width: 38rem; text-shadow: 0 2px 8px #000; }
.boutons { display: flex; flex-wrap: wrap; gap: .8rem; }
.bouton { display: inline-block; padding: .8rem 1.5rem; border-radius: 14px; font-weight: 700; text-decoration: none;
  color: var(--texte); background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .25); }
.bouton:hover { background: rgba(255, 255, 255, .18); }
.bouton.principal { background: var(--rose); border-color: var(--rose); color: #12061a; box-shadow: 0 0 24px rgba(255, 82, 160, .5); }
.bouton.principal:hover { background: #ff73b4; }
.version { color: var(--doux); font-size: .9rem; margin: .8rem 0 0; }

main { padding: 0 clamp(1rem, 5vw, 4rem); max-width: 80rem; margin: 0 auto; }

.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 1rem; margin: 1rem 0 2rem;
  text-align: center; }
.chiffres div { padding: 1rem; border-radius: 16px; background: var(--fond-2); border: 1px solid var(--bord); }
.chiffres strong { display: block; font-size: 2.6rem; line-height: 1.1; color: var(--cyan); font-variant-numeric: tabular-nums; }
.chiffres span { color: var(--doux); }

.bloc { padding: clamp(2.5rem, 6vw, 4.5rem) 0 0; }
.bloc h2 { font-size: clamp(1.7rem, 4vw, 2.5rem); margin: 0 0 .6rem; text-wrap: balance; }
.bloc h2::after { content: ""; display: block; width: 3.5rem; height: 4px; margin-top: .5rem; border-radius: 2px;
  background: linear-gradient(90deg, var(--rose), var(--cyan)); }
.intro { color: var(--doux); max-width: 46rem; margin: 0 0 1.5rem; }

.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem; }
figure { margin: 0; }
figure img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; border: 1px solid var(--bord); }
figcaption { color: var(--doux); font-size: .92rem; margin-top: .35rem; }
.galerie figure:first-child { grid-column: span 2; grid-row: span 2; }
@media (max-width: 40rem) { .galerie figure:first-child { grid-column: auto; grid-row: auto; } }
.duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.large { margin-top: 1.5rem; }

.cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; }
.cartes article { padding: 1.2rem 1.3rem; border-radius: 16px; background: var(--carte); border: 1px solid var(--bord); }
.cartes h3 { margin: 0 0 .4rem; color: var(--rose); font-size: 1.15rem; }
.cartes p { margin: 0 0 .8rem; color: var(--doux); }
.cartes p:last-child { margin-bottom: 0; }

.date { color: var(--cyan); margin: 1.2rem 0 .3rem; font-size: 1.05rem; }
.nouveautes { margin: 0; padding-left: 1.2rem; color: var(--doux); max-width: 50rem; }
.nouveautes li { margin: .25rem 0; }
.nouveautes li::marker { color: var(--rose); }

.telecharger .bouton { margin-top: .4rem; }

.pied { margin-top: 4rem; padding: 2rem clamp(1rem, 5vw, 4rem); border-top: 1px solid var(--bord); color: var(--doux);
  font-size: .9rem; text-align: center; }
.pied p { margin: .2rem 0; }

.promesse { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; margin: 0 0 1rem; }
.promesse div { padding: 1.1rem 1.3rem; border-radius: 16px; border: 1px solid var(--rose);
  background: linear-gradient(135deg, rgba(255, 82, 160, .14), rgba(66, 217, 255, .08)); }
.promesse strong { display: block; font-size: 1.3rem; color: var(--texte); }
.promesse span { color: var(--doux); }

.demo { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 14px; border: 1px solid var(--bord); background: #000; }
@media (prefers-reduced-motion: reduce) { .hero-fond { display: none; } }

/* Encart des classements (28/10, tâche 6905). */
.podium-accueil { margin: 0 0 1rem; padding-left: 1.4rem; font-variant-numeric: tabular-nums; }
.podium-accueil li { margin: .2rem 0; }
.podium-accueil li::marker { color: var(--jaune); font-weight: 800; }
.podium-accueil strong { color: var(--cyan); margin-left: .4rem; }
.podium-accueil small { color: var(--doux); }

/* Pages de texte : confidentialité, suppression du compte. */
.texte { max-width: 46rem; margin: 0 auto; padding: 2rem clamp(1rem, 5vw, 2rem) 4rem; }
.texte h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); margin: .4rem 0 .2rem; text-wrap: balance; }
.texte h2 { margin: 2.2rem 0 .5rem; font-size: 1.35rem; color: var(--cyan); }
.texte h3 { margin: 1.4rem 0 .3rem; font-size: 1.1rem; color: var(--rose); }
.texte p { color: var(--doux); }
.texte strong { color: var(--texte); }
.retour { text-decoration: none; font-weight: 600; }
.maj { font-size: .9rem; }
.encadre { padding: 1rem 1.2rem; border-radius: 14px; border: 1px solid var(--rose);
  background: linear-gradient(135deg, rgba(255, 82, 160, .12), rgba(66, 217, 255, .06)); }
.formulaire { display: grid; gap: .7rem; margin: 1rem 0; padding: 1.2rem; border-radius: 14px; background: var(--carte);
  border: 1px solid var(--bord); }
.formulaire input[type=text], .formulaire input:not([type]) { font: 600 1.2rem ui-monospace, monospace; letter-spacing: .08em;
  padding: .7rem .9rem; border-radius: 10px; border: 1px solid var(--bord); background: var(--fond); color: var(--texte); }
.formulaire .case { color: var(--doux); display: flex; gap: .6rem; align-items: flex-start; }
.formulaire button { border: 0; cursor: pointer; font: inherit; font-weight: 700; justify-self: start; }
.message { padding: .8rem 1rem; border-radius: 10px; background: rgba(255, 82, 82, .15); border: 1px solid rgba(255, 82, 82, .5); }
.message.reussi { background: rgba(124, 255, 154, .12); border-color: rgba(124, 255, 154, .5); }
.pied a { color: var(--doux); }