/* X-RENT — jetons de design.
   Charte issue du flyer X-RENT 2025 : charbon, jaune industriel, blanc.
   Motifs : bandes hachurées « hazard », grille technique, coins diagonaux. */

:root {
  /* Couleurs */
  --black:    #161616;   /* fond dominant (charbon du flyer) */
  --carbon:   #1e1e1e;   /* surfaces élevées (cartes, barres) */
  --carbon-2: #262626;   /* surfaces au survol */
  --line:     #2e2e2e;   /* filets et bordures */
  --line-2:   #3d3d3d;   /* filets appuyés */
  --amber:     #f5c400;  /* accent unique : jaune industriel */
  --amber-dim: #d9ad00;  /* accent à l'état actif */
  --amber-hi:  #f6ef2b;  /* jaune citron du logotype, réservé au dégradé hazard */
  --white:    #f3f3f2;   /* texte principal */
  --mute:     #9b9b96;   /* texte secondaire */
  --mute-2:   #8a8a85;   /* texte tertiaire — calé à 4,5:1 sur les surfaces carbon (WCAG AA) */

  /* Typographie */
  --font-display: Archivo, "Helvetica Neue", Arial, sans-serif;
  --font-text: "IBM Plex Sans", "Segoe UI", Arial, sans-serif;

  --fs-micro: .75rem;    /* 12 */
  --fs-sm:    .9375rem;  /* 15 */
  --fs-base:  1.0625rem; /* 17 */
  --fs-lead:  1.25rem;   /* 20 */
  --fs-h4:    1.3125rem; /* 21 */
  --fs-h3:    1.6875rem; /* 27 */
  --fs-h2:    clamp(1.875rem, 3.4vw, 2.75rem);
  --fs-hero:  clamp(2.5rem, 6.6vw, 5.25rem);

  /* Rythme */
  --wrap: 1320px;
  --gutter: 24px;
  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 32px;
  --s5: 48px;
  --s6: 64px;
  --s7: 96px;
  --s8: 136px;

  /* Motifs repris du flyer */
  --hazard: repeating-linear-gradient(
    -45deg,
    var(--amber-hi) 0 13px,
    var(--amber) 13px 26px,
    transparent 26px 52px
  );
  --grid-tech:
    linear-gradient(to right, rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .035) 1px, transparent 1px);
  --grid-size: 92px 92px;

  /* Divers */
  --focus: 0 0 0 2px var(--black), 0 0 0 4px var(--amber);
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

@media (max-width: 900px) {
  :root {
    --fs-h3: 1.375rem;
    --fs-h4: 1.1875rem;
    --gutter: 20px;
    --s7: 64px;
    --s8: 80px;
    --grid-size: 62px 62px;
  }
}