/* Design system La Bicycl'Est — variables CSS
   Version 0.9.
   SOURCE DE VÉRITÉ pour le site en production : c'est ce fichier qui est
   déployé. Référence design : ../../../Livrables/design/DESIGN.md (spécification
   humaine) et Livrables/design/design-tokens.css (copie livrée à l'agence, dont
   seuls les chemins de polices diffèrent). En cas de changement de token,
   éditer ici, puis reporter dans le livrable si besoin. */

@font-face {
  font-family: "CCRegeneration";
  src: url("../fonts/ccregeneration-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "CCRegeneration";
  src: url("../fonts/ccregeneration-bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("../fonts/dmsans-variable.woff2") format("woff2-variations");
  font-weight: 100 1000; font-style: normal; font-display: swap;
}

:root {
  /* Couleurs */
  --color-primary: #1f3c89;
  --color-primary-dark: #172c64;
  --color-on-primary: #ffffff;
  --color-surface: #ffffff;
  --color-surface-alt: #f7f7f8;
  --color-sky: #9ccbee;
  --color-sun: #fbdc08;
  --color-forest: #008575;
  --color-meadow: #afca10;
  --color-rose: #f4aaab;
  --color-plum: #962445;
  --color-border: #dbdce1;
  --color-muted: #5e6578;
  --color-ink: #1e2129;

  /* Typographie — familles */
  --font-display: "CCRegeneration", Georgia, serif;
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Typographie — échelle */
  --text-display-size: 3rem;
  --text-display-weight: 400;
  --text-display-leading: 1.05;
  --text-display-tracking: -0.01em;
  --text-h1-size: 2.25rem;
  --text-h1-weight: 400;
  --text-h1-leading: 1.1;
  --text-h2-size: 1.375rem;
  --text-h2-weight: 600;
  --text-h2-leading: 1.25;
  --text-h2-tracking: 0.04em;
  --text-h3-size: 1.25rem;
  --text-h3-weight: 600;
  --text-h3-leading: 1.3;
  --text-h4-size: 1.0625rem;
  --text-h4-weight: 600;
  --text-h4-leading: 1.4;
  --text-stat-size: 2.5rem;
  --text-stat-weight: 700;
  --text-stat-leading: 1;
  --text-body-lg-size: 1.125rem;
  --text-body-lg-weight: 400;
  --text-body-lg-leading: 1.65;
  --text-body-md-size: 1rem;
  --text-body-md-weight: 400;
  --text-body-md-leading: 1.6;
  --text-body-sm-size: 0.875rem;
  --text-body-sm-weight: 400;
  --text-body-sm-leading: 1.55;
  --text-label-size: 0.8125rem;
  --text-label-weight: 500;
  --text-label-leading: 1.4;
  --text-label-tracking: 0.02em;

  /* Rayons */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Espacements */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;
  --space-xxxl: 96px;

  /* Mesure de lecture */
  --measure: 68ch;
}

/* Formes de marque — tracés livrés par l'agence, normalisés en boîte englobante. */
/* À utiliser avec un <clipPath clipPathUnits="objectBoundingBox"> inline. */
.shape-fenetre { clip-path: url(#bx-fenetre); }
.shape-colline { clip-path: url(#bx-colline); }

/* Le titre de niveau 2 est en capitales — guide p. 38. */
.h2, h2 { text-transform: uppercase; letter-spacing: var(--text-h2-tracking); }

/* Focus visible uniforme sur tous les contrôles interactifs. */
:where(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Titres identitaires agrandis d'un cran au-delà de 768 px. */
@media (min-width: 768px) {
  :root { --text-display-size: 4rem; --text-h1-size: 3rem; --text-h2-size: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}