@font-face {
  font-family: "Pliant";
  src: url("../fonts/Pliant-VariableFont_wdth,wght.ttf") format("truetype-variations"),
       url("../fonts/Pliant-VariableFont_wdth,wght.ttf") format("truetype");
  font-weight: 100 900;
  font-stretch: 100% 125%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Pliant";
  src: url("../fonts/Pliant-Italic-VariableFont_wdth,wght.ttf") format("truetype-variations"),
       url("../fonts/Pliant-Italic-VariableFont_wdth,wght.ttf") format("truetype");
  font-weight: 100 900;
  font-stretch: 100% 125%;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Palette refonte Figma "POG_02_BRANDING_CONCEPT" (home, 08/2026) : thème
     beige/noir minimal, unique pour tout le site (remplace le split
     clair/sombre par page). Le vert sapin et le rouge argile ne servent
     plus qu'à la bande drapeau décorative, plus aux textes/accents. */
  --color-bg: #d6cfc4;
  --color-bg-alt: #cfc6b8;
  --color-surface: #a3a29c;
  --color-text: #251816;
  --color-text-muted: #5c5248;
  --color-accent-green: #23450f;
  --color-accent-green-bright: #23450f;
  --color-accent-gold: #d6cfc4;
  --color-accent-red: #902b1c;
  --color-accent-red-bright: #902b1c;
  --color-accent-noir: #251816;
  --color-border: rgba(37, 24, 22, 0.25);
  --header-overlay: rgba(214, 207, 196, 0.7);
  --nav-panel-bg: #d6cfc4;

  /* Typography — "Pliant" est la police officielle du Figma, chargée via
     @font-face ci-dessus (variable font wdth/wght, extraite du kit de
     marque People Of Gaza). Work Sans reste en fallback si le fichier ne
     charge pas. */
  --font-display: "Pliant", "Work Sans", "Segoe UI", sans-serif;
  --font-body: "Pliant", "Work Sans", "Segoe UI", sans-serif;

  /* Spacing scale — en px, volontairement découplé du font-size racine
     pour que celui-ci puisse doubler les tailles de texte sans gonfler
     aussi les espacements */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 64px;
  --space-6: 96px;

  /* Layout — pas de plafond : le Figma est en full-bleed avec juste le
     padding-inline comme marge, quelle que soit la largeur d'écran.
     (Un plafond à 1440px avait été testé mais crée de grandes marges
     mortes sur les écrans larges, absentes de la maquette — à ne pas
     réintroduire.) */
  --max-width: none;
  --radius: 4px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Texture de grain, réutilisée sur les fonds pleins */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}