/* ============================================================
   PepTrust — tokens (noir et violet)
   Seule source de vérité. Aucune couleur écrite ailleurs.
   ============================================================ */

:root{

  /* ══════════════════════════════════════════════════════════
     ▼ LA POLICE — c'est la LIGNE 13 qu'il faut changer, et elle
       seule. Si tu mets autre chose qu'Inter, préviens-moi : le
       lien Google Fonts de chaque page doit charger la même.
     ══════════════════════════════════════════════════════════ */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* --- moitié sombre --- */
  --ink:         #05050B;
  --ink-2:       #0B0718;   /* fond des illustrations */
  --ink-3:       #140E28;   /* fond de la carte 3 */
  --text-light:  #F2F1FA;
  --muted-light: #A39FC4;

  /* --- moitié claire --- */
  --paper:      #FFFFFF;
  --paper-2:    #F4F4FA;
  --text-dark:  #0B0718;
  --muted-dark: #615D80;

  /* --- violets --- */
  --violet:       #7C5CFF;
  --violet-2:     #5B7CFF;
  --violet-soft:  #7FD4FF;
  --violet-pale:  #E4DFFA;   /* carte 2, milieu du dégradé */
  --violet-deep:  #6B57E0;   /* bas du dégradé, pied de page */
  --on-violet:    #0B0718;   /* texte posé sur un fond violet vif */
  --alert:        #FF5C7A;

  /* --- surfaces translucides de la moitié sombre --- */
  --glass:      rgba(150,130,255,0.08);
  --glass-bord: rgba(150,130,255,0.26);
  --filet:      rgba(150,130,255,0.28);
  --points:     rgba(163,159,196,0.40);   /* lignes à points, sur sombre */
  --points-b:   rgba(11,7,24,0.18);       /* les mêmes, sur clair */

  /* --- formes : aucune autre valeur --- */
  --r-illu:  13px;     /* blocs d'illustration */
  --r-media: 16px;     /* photos et vidéos des transformations */
  --r-etape: 18px;     /* les quatre étapes */
  --r-card:  20px;     /* cartes, et la vidéo du hero */
  --r-pill:  9999px;   /* boutons, pilules, barre de recherche */

  /* --- rythme --- */
  --gutter:   20px;
  --entre:    56px;    /* écart entre deux sections, sur téléphone */
  --hairline: 0.5px;
}

@media (min-width: 780px){
  :root{ --entre: 88px; }
}