/* ============================================================
   Ateliers Ricochets — tokens du design system
   Source : publications Instagram de l'asso (programme, détails
   des ateliers, logo) + police d'identité Cabrio (HvD Fonts).
   ============================================================ */

@font-face { font-family: "Cabrio"; src: url("../fonts/cabrio-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Cabrio"; src: url("../fonts/cabrio-regularitalic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Cabrio"; src: url("../fonts/cabrio-medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Cabrio"; src: url("../fonts/cabrio-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Cabrio"; src: url("../fonts/cabrio-black.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }

:root {
  /* Couleurs — relevées sur les visuels de l'asso */
  --ciel:       #CAD9EE;  /* fond des affiches programme */
  --ciel-clair: #E4ECF7;
  --bleu:       #8AACDC;  /* onglets d'horaires, numéros de jours */
  --bleu-fonce: #3E5F95;
  --vert:       #27AB60;  /* pastille du logo */
  --vert-fonce: #18723F;
  --jaune:      #FFD84D;  /* titrage portes ouvertes */
  --corail:     #F26B4F;  /* poisson de Margaux, tomates de Marion */
  --encre:      #141414;
  --papier:     #FFFFFF;
  --gris:       #5A6170;

  /* Rôles */
  --fond:        var(--ciel);
  --surface:     var(--papier);
  --texte:       var(--encre);
  --texte-doux:  var(--gris);
  --trait:       var(--encre);
  --accent:      var(--vert);
  --focus:       var(--bleu-fonce);

  /* Typographie — Cabrio, échelle 1.25 */
  --font: "Cabrio", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --t-xs:  0.8rem;
  --t-sm:  0.9rem;
  --t-md:  1.0625rem;  /* corps : 17 px */
  --t-lg:  1.33rem;
  --t-xl:  1.66rem;
  --t-2xl: clamp(1.9rem, 1.4rem + 2vw, 2.6rem);
  --t-3xl: clamp(2.4rem, 1.6rem + 3.6vw, 4.2rem);
  --lh:    1.5;
  --track-titre: 0.01em;

  /* Espacements — base 8 */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

  /* Formes */
  --trait-w:   1.5px;
  --r-carte:   18px;
  --r-pilule:  999px;
  --r-champ:   12px;
  --arche:     999px 999px 0 0;  /* l'arche du logo, pour les portraits */

  --ombre: 4px 4px 0 var(--encre);  /* ombre « imprimée », pas de flou */

  /* Mouvement */
  --ease-out:    cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --d-court: .25s;
  --d-morph: 1.6s;

  --largeur: 1200px;
  --gouttiere: clamp(16px, 4vw, 40px);
}