/* ==========================================================================
   Base — tokens, reset et police partagés par index.php et /profile
   ========================================================================== */

/* Alex Brush reste déclarée mais n'est plus utilisée : un @font-face sans
   usage n'est pas téléchargé par le navigateur, elle ne coûte donc rien et
   reste disponible en repassant --font-display sur "Alex Brush". */
@font-face {
  font-family: "Alex Brush";
  src: url("../font/AlexBrush-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Fonds communs aux deux pages */
  --bg-1: #0e0f17;
  --bg-2: #16182a;
  --bg-3: #1f2240;

  --font-sans: Manrope, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Cinzel Decorative", Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box }

body {
  margin: 0;
  font-family: var(--font-sans);
}

a { color: inherit; text-decoration: none }

img { max-width: 100% }

.container {
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(16px, 2.5vw, 28px);
}

/* Accessibilité : respecte le réglage système de réduction des animations */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* --------------------------------------------------------------------------
   Icônes sociales (SVG inline — voir includes/social.php)
   -------------------------------------------------------------------------- */
.ico { width: 100%; height: 100%; display: block }

.ico--whatsapp { color: #25d366 }
.ico--mail     { color: #1769ff }
.ico--spotify  { color: #1db954 }
/* TikTok est monochrome : il suit l'encre de la page pour rester visible
   aussi bien sur fond clair que sur fond sombre. */
.ico--tiktok   { color: var(--ico-ink, #000) }

/* Texte réservé aux lecteurs d'écran */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* L'attribut hidden doit l'emporter sur les display: flex/grid des composants. */
[hidden] { display: none !important }