/*
 * Jetons de la charte — SOURCE UNIQUE de toutes les valeurs (invariant n°11, arbitrage A12).
 * Marque Fidélité Péi (14/09/2026, piste A « Les trois accents ») : voir docs/CHARTE.md.
 * Aucune autre feuille ne contient de couleur en dur ; un test y veille (tests/Feature/Charte).
 */

/* Polices auto-hébergées : Bricolage Grotesque pour les titres (celle du logo), DM Sans pour le texte.
   Pas de monospace : la charte l'interdit pour les données (§4 et §10). */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../brand/fonts/dmsans-400-normal.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../brand/fonts/bricolage-grotesque-normal.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Replis aux métriques ajustées : pendant le chargement, le texte occupe déjà la place de la police
   finale, et la page ne saute pas quand elle arrive. Bricolage : largeur moyenne d'un texte français
   en 700 mesurée contre Arial gras (fontTools, 14/09/2026) ; DM Sans : valeurs du site d'origine. */
@font-face {
  font-family: 'Bricolage Grotesque Fallback';
  src: local('Arial'), local('Helvetica Neue'), local('sans-serif');
  size-adjust: 100.5%;
  ascent-override: 93%;
  descent-override: 27%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'DM Sans Fallback';
  src: local('Helvetica Neue'), local('Arial'), local('sans-serif');
  size-adjust: 104.4%;
  ascent-override: 96%;
  descent-override: 24%;
  line-gap-override: 0%;
}

:root {
  /* Palette Fidélité Péi : lagon (actions), écume (fonds), basalte (encre). */
  --lagon: #00695F;
  --lagon-profond: #004D45;
  --ecume: #F2F7F6;
  --ecume-profonde: #E2EEEB;
  --surface: #FAFCFB;
  --blanc: #FFFFFF;
  --encre: #18232A;
  --encre-douce: #56646A;
  --ligne: #D3E0DD;
  /* Bordure de champ : 3:1 au moins sur tous les fonds clairs (WCAG 1.4.11). */
  --ligne-forte: #6F8581;

  /* Sémantique (charte §3) — toujours accompagnée d'un texte, jamais seule */
  --succes: #2F6B3A;
  --alerte: #B26A00;
  --erreur: #B3261E;

  /* Rôles par défaut ; bbp.css et tenant.css les réaffectent à leur identité.
     --accent est un FOND (bouton principal) et --accent-texte le texte posé dessus ; le couple a un
     contraste garanti. --accent-sur-blanc est l'accent employé comme texte sur un fond clair : le
     fond d'un commerçant n'a de contraste garanti qu'avec sa propre couleur de texte, pas avec le
     blanc de la page, d'où un rôle distinct. */
  --accent: var(--lagon);
  --accent-texte: var(--ecume);
  --accent-survol: var(--lagon-profond);
  --accent-sur-blanc: var(--lagon);
  --focus: var(--lagon);

  /* Typographie */
  --police-titre: 'Bricolage Grotesque', 'Bricolage Grotesque Fallback', system-ui, sans-serif;
  --police-corps: 'DM Sans', 'DM Sans Fallback', system-ui, sans-serif;
  --graisse-normale: 400;
  --graisse-forte: 600;
  --taille-14: .875rem;
  --taille-16: 1rem;
  --taille-18: 1.125rem;
  --taille-22: 1.375rem;
  --taille-28: 1.75rem;
  --taille-36: 2.25rem;
  --taille-48: 3rem;
  --interligne: 1.5;
  --interligne-titre: 1.12;
  --interlettrage-titre: -.015em;
  --mesure: 68ch;

  /* Formes */
  --rayon-petit: .75rem;
  --rayon-grand: 1rem;
  --ombre: 0 4px 14px -4px rgba(0, 105, 95, .18), 0 1px 3px rgba(24, 35, 42, .06);
  --ombre-forte: 0 8px 30px -8px rgba(0, 77, 69, .22), 0 4px 12px -4px rgba(24, 35, 42, .08);
  --trait: 1px;
  --trait-focus: 3px;

  /* Espacements (charte §5) */
  --espace-1: 4px;
  --espace-2: 8px;
  --espace-3: 12px;
  --espace-4: 16px;
  --espace-6: 24px;
  --espace-8: 32px;
  --espace-12: 48px;

  /* Gabarits */
  --cible-tactile: 48px;
  --cote-case: 24px;
  --colonne-tenant: 480px;
  --largeur-bbp: 1200px;
  --largeur-etroite: 440px;
  --largeur-message: 34rem;
  --hauteur-logo: 48px;
  /* Le logo Fidélité Péi est un mot (rapport 4,9:1) : 28 px de haut font 137 px de large. */
  --hauteur-logo-marque: 28px;
  --hauteur-logo-tenant: 64px;
  --trait-repere: 4px;
  --duree: .2s;

  /* La vitrine de fidelitepei.re (14/09/2026) : une surface éditoriale, ses règles au §13 de docs/CHARTE.md.
     Mêmes couleurs de marque ; en plus, l'accent et le texte doux posés sur le basalte, et les couleurs des
     objets qu'elle dessine (téléphone, carte en carton, carte d'un snack imaginaire). */
  --lagon-clair: #4FD1BF;
  --ecume-douce: #B8C7C4;
  --vanille: #F4E3B5;
  --vitrine-cadre: #0B1115;
  --vitrine-carton: #EFE4CF;
  --vitrine-tampon: #9A3B2E;
  --vitrine-exemple-fond: #3A2418;
  --vitrine-exemple-texte: #F6E9DA;
  --vitrine-exemple-accent: #E3A21A;
  --vitrine-titre-une: clamp(2.5rem, 5.4vw, 4.5rem);
  --vitrine-titre: clamp(2rem, 3.4vw, 3rem);
  --vitrine-titre-bloc: clamp(1.375rem, 1.8vw, 1.625rem);
  --vitrine-interlettrage-titre: -.03em;
  --vitrine-interlettrage-surtitre: .14em;
  --vitrine-rayon: 1.375rem;
  --vitrine-ombre: 0 18px 40px -24px rgba(24, 35, 42, .35);
  --vitrine-hauteur-logo: 30px;
}

/* Variables du commerçant. Le layout tenant les remplace par les couleurs validées du tenant ;
   ces replis ne servent que si l'une des trois est malformée, et forment un trio lisible. */
.tenant {
  --tenant-fond: var(--encre);
  --tenant-texte: var(--blanc);
  --tenant-label: var(--ligne);
}

/* Kit d'affiches (contrat D8), imprimé sur papier blanc : l'encre de la marque, que le générateur
   remplace par la couleur du commerçant corrigée au contraste sur blanc. Repli : l'encre. */
.kit {
  --kit-encre-marque: var(--encre);
}