/* =========================================================================
   TOKENS — toutes les variables de design du site.
   POUR CHANGER LES COULEURS OU LES TAILLES : c'est ici, et nulle part ailleurs.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. POLICES — fichiers locaux, aucune requête réseau.
      Trois familles variables (un seul fichier couvre toutes les graisses).
      ------------------------------------------------------------------- */

/* Titres — grotesque large, coupée en majuscules pour les intertitres. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 100% 125%;
  font-display: swap;
  src: url('../assets/fonts/archivo-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 100% 125%;
  font-display: swap;
  src: url('../assets/fonts/archivo-var-latin-ext.woff2') format('woff2');
  /* Indispensable au catalan (ŀ) et aux langues voisines. */
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Texte courant — hauteur d'x généreuse, très lisible sur fond sombre. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../assets/fonts/inter-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../assets/fonts/inter-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Données, étiquettes, chiffres — donne le ton technique. */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../assets/fonts/jetbrainsmono-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../assets/fonts/jetbrainsmono-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* -----------------------------------------------------------------------
     2. COULEURS — thème « nuit andorrane ».
        Le cyan sert aux données et aux courbes.
        Le violet sert aux surfaces et aux lueurs.
        L'ambre ne sert QU'À UN SEUL élément par écran.
        --------------------------------------------------------------------- */
  --fond: #070b14; /* fond profond      */
  --fond-2: #0e1626; /* fond secondaire   */
  --fond-3: #16203a; /* survol, bordures  */
  --cyan: #22e1e1; /* cyan signal       */
  --cyan-clair: #7ff0f0; /* cyan lisible en petit texte (7,9:1 sur --fond) */
  --violet: #7b5cff; /* violet altitude   */
  --violet-clair: #b3a2ff; /* violet lisible en texte (7,4:1 sur --fond)   */
  --ambre: #ffb547; /* ambre alerte      */
  --texte: #e8eef7; /* 14,8:1 sur --fond */
  --texte-2: #8a99b0; /* 6,1:1 sur --fond — au-dessus du minimum 4,5:1 */
  --texte-sur-clair: #070b14; /* texte posé sur un aplat cyan ou ambre */

  /* Teintes translucides, pour les bordures et les lueurs. */
  --cyan-08: rgba(34, 225, 225, 0.08);
  --cyan-18: rgba(34, 225, 225, 0.18);
  --cyan-35: rgba(34, 225, 225, 0.35);
  --violet-10: rgba(123, 92, 255, 0.1);
  --violet-25: rgba(123, 92, 255, 0.25);
  --blanc-06: rgba(232, 238, 247, 0.06);
  --blanc-12: rgba(232, 238, 247, 0.12);

  /* Dégradés récurrents. */
  --degrade-marque: linear-gradient(115deg, var(--cyan) 0%, var(--violet) 100%);
  --degrade-bordure: linear-gradient(
    135deg,
    var(--cyan-35) 0%,
    var(--violet-25) 45%,
    var(--blanc-06) 100%
  );

  /* -----------------------------------------------------------------------
     3. TYPOGRAPHIE
        --------------------------------------------------------------------- */
  --police-titre: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --police-texte: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --police-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Échelle fluide : chaque taille s'adapte de 320px à 2560px. */
  --t-h1: clamp(2.35rem, 1.7rem + 3.1vw, 4.6rem);
  --t-h2: clamp(1.85rem, 1.35rem + 2.4vw, 3.35rem);
  --t-h3: clamp(1.2rem, 1.08rem + 0.55vw, 1.55rem);
  --t-h4: clamp(1.05rem, 1rem + 0.25vw, 1.2rem);
  --t-corps: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --t-petit: clamp(0.875rem, 0.85rem + 0.12vw, 0.95rem);
  --t-etiquette: 0.75rem; /* monospace, en majuscules */
  --t-chiffre: clamp(2.2rem, 1.5rem + 3vw, 4rem);

  /* -----------------------------------------------------------------------
     4. ESPACEMENTS ET GABARIT
        --------------------------------------------------------------------- */
  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 0.75rem;
  --e-4: 1rem;
  --e-5: 1.5rem;
  --e-6: 2rem;
  --e-7: 3rem;
  --e-8: 4rem;
  --e-9: 6rem;

  --largeur-max: 1240px;
  --marge-page: clamp(1.25rem, 4vw, 3rem);
  --hauteur-nav: 4.5rem;
  --espace-section: clamp(4.5rem, 9vw, 8.5rem);

  /* -----------------------------------------------------------------------
     5. FORMES, OMBRES, MOUVEMENT
        --------------------------------------------------------------------- */
  --rayon-s: 4px;
  --rayon-m: 6px;
  --rayon-l: 8px;
  --rayon-rond: 999px;

  --ombre-carte: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.35);
  --ombre-flottante: 0 20px 60px rgba(7, 11, 20, 0.7);
  --lueur-cyan: 0 0 0 1px var(--cyan-35), 0 0 32px rgba(34, 225, 225, 0.22);

  --duree-courte: 160ms;
  --duree-moyenne: 320ms;
  --duree-longue: 700ms;
  --sortie: cubic-bezier(0.22, 1, 0.36, 1); /* décélération franche */
  --doux: cubic-bezier(0.65, 0, 0.35, 1);

  /* Couche d'empilement, déclarée une fois pour toutes. */
  --z-fond: 0;
  --z-contenu: 1;
  --z-nav: 60;
  --z-menu: 70;
  --z-curseur: 90;
  --z-grain: 100;
}

/* Le site est conçu en sombre. On le déclare pour que les contrôles natifs
   (barres de défilement, sélecteurs) suivent. */
:root {
  color-scheme: dark;
}