:root {
  --fond: #11151B;
  --surface: #191F29;
  --accent: #8146E0;
  --accent-2: #0BF1EE;
  --accent-chaud: #F29C79;
  --texte: #FFFFFF;
  --texte-doux: rgb(255 255 255 / 0.75);
  --filet: rgb(255 255 255 / 0.15);
  --filet-fort: rgb(255 255 255 / 0.35);
  --degrade: linear-gradient(124deg, #8146E0 0%, #0BF1EE 100%);
  --degrade-chaud: linear-gradient(141deg, rgb(242 156 121 / 0) 0%, #F29C79 100%);
  --voile: linear-gradient(rgb(17 21 27 / 0.53) 0%, #11151B 100%);
  --image-fond: none;
  --ombre-carte: 0 0 20px rgb(0 0 0 / 0.5);
  --ombre-vignette: 0 5px 5px rgb(0 0 0 / 0.3);
  --rayon-pilule: 50px;
  --rayon-carte: 12px;
  --rayon-rond: 50%;
  --marge-page: clamp(1.25rem, 5vw, 4rem);
  --entete-hauteur: 6rem;
  --lecteur-hauteur: 70px;
}

@media (max-width: 40rem) {
  :root {
    --entete-hauteur: 4.5rem;
    --lecteur-hauteur: 64px;
  }
}