/* Repli aux métriques de Poppins, pour que le texte ne saute pas au chargement. */
@font-face {
  font-family: "Poppins Repli";
  src: local("Arial");
  size-adjust: 112.16%;
  ascent-override: 93.62%;
  descent-override: 31.21%;
  line-gap-override: 8.92%;
}

:root {
  color-scheme: light;

  /* Palette : la boîte et le logo */
  --carton: #F5F5F2;
  --marine: #0A1470;
  --magenta: #A00A58;
  --cyan: #0098E0;
  --jaune: #F8DB49;
  --rose: #E81078;

  /* Rôles */
  --fond: var(--carton);
  --texte: var(--marine);
  --accent: var(--magenta);
  --sur-accent: var(--carton);
  --filet-couleur: var(--marine);
  --gelule-haut: var(--cyan);
  --gelule-bas: var(--rose);
  --carte: var(--carton);
  --sur-carte: var(--marine);
  --filet-carte: var(--marine);
  --focus: var(--marine);
  --focus-sur-carte: var(--marine);

  /* Typographie */
  --police: "Poppins", "Poppins Repli", system-ui, sans-serif;
  --t-site: clamp(1.5rem, 1.2rem + 1.2vw, 1.9rem);
  --t-titre: clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
  --t-corps: 1rem;
  --t-meta: 0.875rem;
  --l-site: 1.1;
  --l-titre: 1.25;
  --l-corps: 1.55;
  --l-meta: 1.4;
  --ls-site: -0.01em;
  --ls-meta: 0.01em;
  --g-corps: 400;
  --g-meta: 500;
  --g-titre: 600;
  --g-site: 700;

  /* Espacements */
  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 1rem;
  --e-4: 1.5rem;
  --e-5: 2.5rem;
  --e-6: 4rem;
  --gouttiere: clamp(1rem, 4vw, 3.5rem);

  /* Mise en page */
  --l-lecteur: 25rem;
  --h-lecteur: 44rem;
  --ratio-video: 9 / 16;
  --l-legende: 34rem;
  --l-formulaire: 34rem;
  --l-alveole: 3.5rem;
  --h-plaquette: 3.5rem;
  --h-alveole: 5.75rem;
  --h-logo: 6rem;
  --h-logo-mobile: 4rem;
  --h-bande: 0.5rem;
  --fil: 2px;
  --contour: 1.5px;
  --contour-focus: 3px;
  --decalage-focus: 3px;
  --filet: 1px;
  --cible: 2.75rem;
  --mesure: 60ch;
  /* Point de rupture mobile (repris en dur dans les @media, qui ne lisent pas les variables) : 48rem */

  /* Superpositions */
  --z-etiquette: 5;
  --z-grain: 10;
  --z-evitement: 20;

  /* Rayons, par hiérarchie */
  --r-lecteur: 1.25rem;
  --r-carte: 1rem;
  --r-bouton: 999px;
  --r-champ: 0.5rem;

  /* Grain */
  --grain-opacite: 0.03;

  /* Mouvement */
  --d-sortie: 0.7s;

  /* La gélule : survol, sortie, élan et rebond (unités du dessin SVG) */
  --gelule-survol: 3px;
  --gelule-sortie: 32px;
  --gelule-elan: 38px;
  --gelule-rebond: 29px;
  --gelule-angle: -24deg;
  --gelule-angle-elan: -32deg;
  --gelule-angle-rebond: -20deg;
  --souligne: 0.2em;
  --d-survol: 0.15s;
}