/* ==========================================================================
   Jetons de design AURA
   --------------------------------------------------------------------------
   Source unique de vérité pour les couleurs, la typographie et les rythmes.
   Valeurs relevées sur les templates de référence (docs/templates/).

   Changer l'accent de la marque, c'est changer --acc, une seule fois.
   ========================================================================== */

:root {
  /* ---- Fonds et surfaces ------------------------------------------------ */
  --bg:            #0C0C0C;  /* fond général */
  --surface:       #121212;  /* cartes */
  --surface-2:     #151515;  /* champs de saisie, cartes esport */
  --surface-3:     #1E1E1E;  /* boutons sombres, préfixes de champ */
  --surface-4:     #2A2A2A;  /* rails d'interrupteur, survol sombre */
  --ghost:         #1C1C1C;  /* le mot AURA en filigrane du pied de page */

  /* ---- Texte ------------------------------------------------------------ */
  --text:          #F3F1EA;  /* texte principal */
  --text-bright:   #FFFFFF;  /* survol de lien */
  --text-2:        #E2E0D8;  /* texte posé sur une image */
  --text-3:        #D6D4CC;  /* corps d'article */
  --muted:         #B5B3AC;  /* texte secondaire */
  --muted-2:       #8C8A84;  /* légendes, pied de page */
  --faint:         #76746E;  /* texte de substitution des champs */

  /* ---- Bordures --------------------------------------------------------- */
  --line:          #2A2A2A;  /* séparateurs de section */
  --line-2:        #3A3A3A;  /* contours de champ */
  --line-3:        #5A5A5A;  /* cases à cocher au repos */
  --line-hover:    #8C8A84;

  /* ---- Accent ----------------------------------------------------------- */
  --acc:           #D4FF3A;  /* le vert acide AURA */
  --ink:           #0C0C0C;  /* texte posé sur l'accent */

  /* ---- Couleurs de sens ------------------------------------------------- */
  --err:           #FF5A4D;
  --err-text:      #FF7A6E;
  --ok:            #3DDC97;
  --danger:        #FF4D3D;

  /* ---- Typographie ------------------------------------------------------ */
  --font-display:  'Big Shoulders Display', 'Arial Narrow', Impact, sans-serif;
  --font-text:     Archivo, system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Échelle d'affichage. Les bornes basses sont dimensionnées pour un
     téléphone de 360 px, les hautes pour un écran large. */
  --d-hero:        clamp(4.5rem, 19vw, 20.625rem);  /* 72 → 330 px */
  --d-xxl:         clamp(3.5rem, 12vw, 13.125rem);  /* 56 → 210 px */
  --d-xl:          clamp(3rem,   9vw,  8.75rem);    /* 48 → 140 px */
  --d-lg:          clamp(2.5rem, 6vw,  5rem);       /* 40 → 80 px  */
  --d-md:          clamp(2rem,   5vw,  3.5rem);     /* 32 → 56 px  */
  --d-sm:          1.75rem;                         /* 28 px       */
  --d-ghost:       clamp(5rem, 25vw, 25rem);        /* filigrane   */

  /* Échelle de texte */
  --t-xl:          1.25rem;   /* 20 px — accroche du hero */
  --t-lg:          1.125rem;  /* 18 px — chapô, corps d'article */
  --t-md:          1.0625rem; /* 17 px — texte de carte */
  --t-base:        1rem;      /* 16 px */
  --t-sm:          0.9375rem; /* 15 px */
  --t-xs:          0.875rem;  /* 14 px */
  --t-2xs:         0.8125rem; /* 13 px — surtitres */
  --t-3xs:         0.75rem;   /* 12 px — étiquettes */

  /* Interlignes serrés, signature du display condensé */
  --lh-hero:       0.78;
  --lh-tight:      0.85;
  --lh-snug:       0.9;
  --lh-normal:     1.5;
  --lh-prose:      1.7;

  /* Interlettrages */
  --ls-display:   -0.01em;
  --ls-label:      0.08em;
  --ls-wide:       0.16em;
  --ls-wider:      0.2em;
  --ls-widest:     0.22em;

  /* ---- Rythme ----------------------------------------------------------- */
  --container:     85rem;   /* 1360 px */
  --gutter:        2.5rem;  /* 40 px — marge latérale sur grand écran */
  --gutter-sm:     1.25rem; /* 20 px — marge latérale sur téléphone */

  --sp-1:          0.25rem;
  --sp-2:          0.5rem;
  --sp-3:          0.75rem;
  --sp-4:          1rem;
  --sp-5:          1.25rem;
  --sp-6:          1.5rem;
  --sp-7:          1.75rem;
  --sp-8:          2rem;
  --sp-10:         2.5rem;
  --sp-12:         3rem;
  --sp-14:         3.5rem;
  --sp-16:         4rem;
  --sp-18:         4.5rem;
  --sp-section:    clamp(4rem, 9vw, 7.5rem); /* 64 → 120 px */

  /* Hauteur du bandeau défilant. Fixée plutôt que déduite du contenu, parce
     que le hero la soustrait de 100svh pour que le bandeau tombe pile en bas
     du premier écran. */
  --ticker-h:      4.25rem;

  /* Hauteur de la barre de navigation. Fixée pour la même raison : la barre
     est en position fixe, donc les pages sans hero doivent réserver sa place. */
  --nav-h:         4.5rem;

  /* ---- Divers ----------------------------------------------------------- */
  --cut:           14px;  /* profondeur du coin coupé */
  --cut-sm:        12px;
  --tap:           44px;  /* cible tactile minimale */
  --ease:          cubic-bezier(0.2, 0.7, 0.2, 1);
  --z-nav:         100;
  --z-menu:        200;
}

/* Sur grand écran, le bandeau et la barre grandissent avec leur typographie. */
@media (min-width: 48rem) {
  :root {
    --ticker-h: 5.25rem;
    --nav-h:    5.5rem;
  }
}