/* APENF — Charte graphique alignée sur le logo
   Vert #009018 · Rouge #CC0C0C · Jaune/Or #E8C21A
   (échantillonnage Logo.png / logo_refonte.png) */
@import url("https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,400;0,600;0,700;1,400&display=swap");

:root {
  /* Couleurs logo / drapeau Burkina */
  --ap-green: #009018;
  --ap-green-dark: #007514;
  --ap-green-deep: #0a2f18;
  --ap-green-deeper: #061f10;
  --ap-red: #cc0c0c;
  --ap-red-dark: #a30a0a;
  --ap-gold: #e8c21a;
  --ap-gold-soft: #f7e58a;

  /* Sémantique UI */
  --ap-brand: var(--ap-green-deep);
  --ap-brand-deep: var(--ap-green-deeper);
  --ap-cta: var(--ap-green);
  --ap-cta-hover: var(--ap-green-dark);
  --ap-accent: var(--ap-red);
  --ap-accent-soft: var(--ap-gold);
  --ap-focus: #1a7a3a;

  --ap-ink: #142018;
  --ap-muted: #5a6b5f;
  --ap-line: #d5e0d8;
  --ap-surface: #f4f8f5;
  --ap-surface-2: #e8f0ea;
  --ap-white: #ffffff;

  --ap-font: "Source Sans 3", "Segoe UI", sans-serif;
  --ap-fs-xs: 0.8125rem;
  --ap-fs-sm: 0.9375rem;
  --ap-fs-base: 1.0625rem;
  --ap-fs-md: 1.25rem;
  --ap-fs-lg: clamp(1.5rem, 2.2vw, 2rem);
  --ap-fs-xl: clamp(2rem, 4vw, 3rem);
  --ap-fs-hero: clamp(2.25rem, 5vw, 3.75rem);

  --ap-lh: 1.65;
  --ap-lh-tight: 1.2;

  --ap-space-1: 0.5rem;
  --ap-space-2: 1rem;
  --ap-space-3: 1.5rem;
  --ap-space-4: 2rem;
  --ap-space-5: 3rem;
  --ap-space-6: clamp(3.5rem, 7vw, 5.5rem);

  --ap-container: min(1120px, calc(100% - 2rem));
  --ap-radius: 4px;
  --ap-transition: 220ms ease;
}

body.apenf-home,
body.apenf-page {
  font-family: var(--ap-font);
  color: var(--ap-ink);
  background: var(--ap-white);
  line-height: var(--ap-lh);
}

.apenf-home h1,
.apenf-home h2,
.apenf-home h3,
.apenf-home h4,
.apenf-page h1,
.apenf-page h2,
.apenf-page h3,
.apenf-page h4 {
  font-family: var(--ap-font);
  color: var(--ap-ink);
  line-height: var(--ap-lh-tight);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.ap-container {
  width: var(--ap-container);
  margin-inline: auto;
}

.ap-section {
  padding-block: var(--ap-space-6);
}

.ap-section--surface {
  background: var(--ap-surface);
}

.ap-section__head {
  max-width: 40rem;
  margin-bottom: var(--ap-space-4);
}

.ap-section__head h2 {
  font-size: var(--ap-fs-lg);
  margin: 0 0 var(--ap-space-1);
  position: relative;
  padding-bottom: 0.55rem;
}

.ap-section__head h2::after {
  content: "";
  display: block;
  width: 2.75rem;
  height: 3px;
  margin-top: 0.55rem;
  background: var(--ap-gold);
}

.ap-section__head p {
  margin: 0;
  color: var(--ap-muted);
  font-size: var(--ap-fs-base);
}

.ap-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.65rem 1.35rem;
  font-family: var(--ap-font);
  font-size: var(--ap-fs-sm);
  font-weight: 600;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--ap-radius);
  transition: background var(--ap-transition), color var(--ap-transition), border-color var(--ap-transition), transform var(--ap-transition);
}

.ap-btn--primary {
  background: var(--ap-cta);
  color: var(--ap-white);
}

.ap-btn--primary:hover,
.ap-btn--primary:focus {
  background: var(--ap-cta-hover);
  color: var(--ap-white);
}

.ap-btn--accent {
  background: var(--ap-red);
  color: var(--ap-white);
}

.ap-btn--accent:hover,
.ap-btn--accent:focus {
  background: var(--ap-red-dark);
  color: var(--ap-white);
}

.ap-btn--ghost {
  background: transparent;
  color: var(--ap-white);
  border-color: rgba(255, 255, 255, 0.7);
}

.ap-btn--ghost:hover,
.ap-btn--ghost:focus {
  background: var(--ap-white);
  color: var(--ap-green-deep);
  border-color: var(--ap-white);
}

.ap-btn--outline {
  background: transparent;
  color: var(--ap-green);
  border-color: var(--ap-green);
}

.ap-btn--outline:hover,
.ap-btn--outline:focus {
  background: var(--ap-green);
  color: var(--ap-white);
}

.ap-link {
  color: var(--ap-green);
  font-weight: 600;
  text-decoration: none;
}

.ap-link:hover,
.ap-link:focus {
  color: var(--ap-red);
  text-decoration: underline;
}

/* Accessibilité */
.ap-skip-link {
  position: absolute;
  left: 0.75rem;
  top: -3rem;
  z-index: 10000;
  padding: 0.55rem 0.9rem;
  background: var(--ap-green);
  color: var(--ap-white);
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--ap-radius);
  transition: top var(--ap-transition);
}

.ap-skip-link:focus {
  top: 0.75rem;
  outline: 3px solid var(--ap-gold);
  outline-offset: 2px;
}

:focus-visible {
  outline: 3px solid var(--ap-focus);
  outline-offset: 2px;
}

.apenf-home a:focus:not(:focus-visible),
.apenf-page a:focus:not(:focus-visible) {
  outline: none;
}