/* Webfaya — jetons de design
   Source : charte-graphique.html (sections 01, 02, 08, 10)
   Aucune valeur de couleur, d'espacement ou de durée ne doit être écrite
   en dur ailleurs dans le projet. */

:root {
  /* ---- Couleurs ---- */
  --wf-coco: #FAF4E8;          /* fond principal */
  --wf-jungle: #12221A;        /* encre + sections sombres */
  --wf-braise: #D93A11;        /* accent de marque — AUCUN texte < 24px dessus */
  --wf-braise-foncee: #B5300B; /* accent porteur de petits textes (coco dessus : 5,65:1) */
  --wf-braise-profonde: #A82A08; /* aplats avec légendes (coco dessus : 6,39:1) */
  --wf-ambre: #E9A227;         /* second accent, chiffres */
  --wf-braise-claire: #FF7A4D; /* accent SUR fond jungle */
  --wf-vert: #15583A;          /* signal positif sur coco */
  --wf-vert-clair: #4CC48C;    /* signal positif sur jungle */
  --wf-encre-2: #4C5449;       /* texte secondaire sur coco */
  --wf-encre-3: #535B52;       /* étiquettes sur coco */

  /* ---- Typographie ---- */
  --wf-font-titre: 'Bricolage Grotesque', sans-serif;   /* 800, BAS DE CASSE */
  --wf-font-accent: 'Newsreader', Georgia, serif;        /* 300 italique */
  --wf-font-texte: 'Schibsted Grotesk', Helvetica, sans-serif;
  --wf-font-mono: 'Martian Mono', monospace;

  --wf-titre-tracking: -0.04em;
  --wf-titre-leading: 0.88;
  --wf-texte-leading: 1.55;
  --wf-mono-tracking: 0.04em;

  /* Échelle de titrage (fluide) */
  --wf-t-hero: clamp(46px, 9.5vw, 132px);
  --wf-t-section: clamp(32px, 5.4vw, 74px);
  --wf-t-bloc: clamp(26px, 2.8vw, 36px);
  --wf-t-texte: clamp(16px, 1.5vw, 19px);
  --wf-t-mono: 10px;   /* 10–12px, jamais plus */

  /* ---- Espacement (échelle de 8) ---- */
  --wf-e-1: 8px;
  --wf-e-2: 16px;
  --wf-e-3: 24px;
  --wf-e-4: 40px;
  --wf-e-5: 64px;
  --wf-e-6: 96px;
  --wf-section-y: clamp(48px, 7vw, 110px);
  --wf-section-x: clamp(16px, 4vw, 56px);
  --wf-contenu-max: 1280px;
  --wf-gouttiere: 24px;

  /* ---- Rayons ---- */
  --wf-r-bloc: 0;      /* cartes, sections, images */
  --wf-r-action: 999px; /* boutons, pastilles, étiquettes */

  /* ---- Motion ---- */
  --wf-d-survol: 150ms;
  --wf-d-apparition: 300ms;
  --wf-d-volet: 550ms;
  --wf-c-entree: cubic-bezier(0, 0, 0.2, 1);      /* ease-out */
  --wf-c-boucle: cubic-bezier(0.4, 0, 0.6, 1);     /* ease-in-out */
  --wf-c-volet: cubic-bezier(0.76, 0, 0.24, 1);
  --wf-c-compteur: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- Points de rupture ----
   <= 480px  : une colonne
   768px     : deux colonnes
   1080px    : grille complète
   >= 1440px : marges fixes, contenu 1280px
*/

/* ---- Base ---- */
body {
  margin: 0;
  background: var(--wf-coco);
  color: var(--wf-jungle);
  font-family: var(--wf-font-texte);
  font-size: 16px;
  line-height: var(--wf-texte-leading);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--wf-font-titre);
  font-weight: 800;
  letter-spacing: var(--wf-titre-tracking);
  line-height: var(--wf-titre-leading);
  text-transform: none; /* jamais de capitales */
  text-wrap: balance;
  margin: 0;
}

a { color: var(--wf-braise-foncee); text-decoration: none; }
a:hover { color: var(--wf-jungle); }

:focus-visible { outline: 2px solid var(--wf-ambre); outline-offset: 3px; }

/* Aucune ombre portée sur le site : ne pas ajouter de box-shadow. */

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