/*
Theme Name: Afriolea
Theme URI: https://afriolea.com
Description: Thème enfant Afriolea, sur base GeneratePress. Registre de karité : la preuve datée à la place du discours.
Author: Afriolea
Template: generatepress
Version: 1.0.0
Text Domain: afriolea
*/

:root {
  color-scheme: light;
  /* Couleur */
  --couleur-fond: #FAF9F5;
  --couleur-fond-2: #F0EEE6;
  --couleur-encre: #26221B;
  --couleur-encre-2: #5C554A;
  --couleur-trait: #D8D0BF;
  --couleur-accent: #C27A16;      /* graphique seulement, jamais de texte dessus */
  --couleur-accent-fort: #7A4E10; /* fonds interactifs, texte ivoire dessus */
  --couleur-accent-lien: #8A560F; /* liens, toujours soulignés */
  --couleur-verifie: #2E6B45;   /* réservé statut vérifié */
  --couleur-non-verifie: #6B675E;
  --couleur-alerte: #8C3B2E;    /* réservé alertes */
  /* Dataviz (ordre fixe des circuits) */
  --viz-circuit-1: #C27A16; /* épicerie africaine */
  --viz-circuit-2: #3B6FB5; /* marketplace */
  --viz-circuit-3: #1F8A6B; /* boutique bio */
  --viz-circuit-4: #C24E2B; /* site de la marque */
  --viz-circuit-5: #9A4D8F; /* pharmacie */
  /* Typographie */
  --fonte-titres: "IBM Plex Serif", Georgia, serif;
  --fonte-texte: "IBM Plex Sans", Arial, sans-serif;
  --fonte-donnees: "IBM Plex Mono", "Courier New", monospace;
  --taille-xs: 0.75rem;  --taille-s: 0.875rem; --taille-base: 1rem;
  --taille-m: 1.125rem;  --taille-l: 1.3125rem; --taille-xl: 1.625rem;
  --taille-xxl: 2rem;    /* H1 mobile ; desktop : 2.5rem via media query */
  /* Espacement (base 4) */
  --espace-1: 4px; --espace-2: 8px; --espace-3: 12px; --espace-4: 16px;
  --espace-5: 24px; --espace-6: 32px; --espace-7: 48px; --espace-8: 64px;
  /* Formes */
  --rayon: 4px; --rayon-tampon: 2px;
  --trait: 1px solid var(--couleur-trait);
  --trait-tampon: 1.5px solid var(--couleur-trait);
  /* Interaction */
  --cible-min: 44px;
  --focus: 2px solid var(--couleur-accent);
}
/* Règle d'usage : sur fond --couleur-accent-fort, le texte est toujours
   --couleur-fond (papier). Sur --couleur-accent, jamais de texte. */

/* Fontes IBM Plex auto-hébergées (design system §3, budget §8) :
   5 fichiers woff2 sous-ensemble latin, ≤ 150 Ko cumulés (95,5 Ko constatés,
   subset+woff2 le 26/08/2026), font-display: swap, fallbacks métriques déclarés
   pour un CLS nul au chargement. Aucun appel à un CDN de fontes (règle 2, RGPD). */

@font-face {
  font-family: "IBM Plex Serif";
  src: url("fonts/IBMPlexSerif-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/IBMPlexSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/IBMPlexSans-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Base */
html { color-scheme: light; }
body {
  background: var(--couleur-fond);
  color: var(--couleur-encre);
  font-family: var(--fonte-texte);
  font-size: var(--taille-base);
  line-height: 1.6;
}
h1, h2, h3, .site-title, .site-title a {
  font-family: var(--fonte-titres);
  font-weight: 600;
  line-height: 1.25;
  color: var(--couleur-encre);
}
h1 { font-size: var(--taille-xxl); }
@media (min-width: 768px) {
  h1 { font-size: 2.5rem; }
  h2 { font-size: 1.875rem; }
}
h2 { font-size: var(--taille-xl); }
h3 { font-size: var(--taille-l); }

/* La Mono est réservée aux données relevées (dates, prix, statuts, tableaux) */
.donnee, time, .prix, .badge-date, table.releves {
  font-family: var(--fonte-donnees);
  font-variant-numeric: tabular-nums;
  line-height: 1.45;
}

a { color: var(--couleur-accent-lien); text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: var(--focus);
  outline-offset: 2px;
}

.btn-primaire {
  background: var(--couleur-accent-fort);
  color: var(--couleur-fond);
  font-family: var(--fonte-texte);
  font-weight: 600;
  min-height: var(--cible-min);
  border-radius: var(--rayon);
  border: none;
  padding: var(--espace-3) var(--espace-4);
}
.btn-secondaire {
  background: transparent;
  color: var(--couleur-encre);
  border: var(--trait);
  min-height: var(--cible-min);
  border-radius: var(--rayon);
  padding: var(--espace-3) var(--espace-4);
}

.tampon-date {
  display: inline-flex;
  gap: var(--espace-2);
  border: var(--trait-tampon);
  border-radius: var(--rayon-tampon);
  padding: var(--espace-1) var(--espace-2);
  font-family: var(--fonte-donnees);
  font-size: var(--taille-s);
}

.statut-verifie { color: var(--couleur-verifie); }
.statut-non-verifie { color: var(--couleur-non-verifie); }
.bandeau-alerte { border: 1px solid var(--couleur-alerte); color: var(--couleur-encre); }

.container-lecture { max-width: 680px; margin-inline: auto; padding-inline: var(--espace-4); }
.container-large { max-width: 1080px; margin-inline: auto; padding-inline: var(--espace-4); }

section + section { margin-top: var(--espace-7); }
@media (min-width: 768px) {
  section + section { margin-top: var(--espace-8); }
}

/* En-tête (header.php) */
.site-header { border-bottom: var(--trait); padding: var(--espace-3) 0; margin-bottom: var(--espace-2); }
.hrow { display: flex; justify-content: space-between; align-items: center; }
.wordmark { font-family: var(--fonte-titres); font-weight: 600; font-size: var(--taille-l); text-decoration: none; color: var(--couleur-encre); }
.langue { font-family: var(--fonte-donnees); font-size: var(--taille-s); }
.langue a { text-decoration: none; }
.langue { display: inline-flex; align-items: center; gap: var(--espace-2); }
.langue li { list-style: none; }
.langue li.current-lang a,
.langue li.current-lang { font-weight: 700; color: var(--couleur-encre); }
nav.principale { display: flex; gap: var(--espace-4); flex-wrap: wrap; font-size: 0.9375rem; margin-top: var(--espace-2); }
nav.principale a { color: var(--couleur-encre); text-decoration: none; font-weight: 600; min-height: var(--cible-min); display: inline-flex; align-items: center; }

/* Pied de page (footer.php) */
.site-footer { background: var(--couleur-encre); color: var(--couleur-fond); margin-top: var(--espace-8); padding: var(--espace-5) var(--espace-4); font-size: var(--taille-s); }
.site-footer .wordmark-footer { font-family: var(--fonte-titres); font-size: var(--taille-m); }
.site-footer .baseline, .site-footer .divulgation { opacity: 0.85; margin-top: var(--espace-2); }
.site-footer .liens-footer { margin-top: var(--espace-2); }
.site-footer a { color: var(--couleur-fond); }