/* ============================================================
   AFRICA POST — DESIGN SYSTEM (source de verite unique)
   Refonte 2026-07. Charge sur TOUTES les pages.
   Remplace les 26 blocs :root inline concurrents + le moteur
   de repaint runtime (ap-cinema-bg.js). Theme sombre cinema
   deterministe, emeraude + ocre. Composants prefixes ap2-*
   pour cohabiter avec l'ancien style pendant la migration.
   ============================================================ */

:root{
  /* — Fonds / surfaces — */
  --ap-ink:#0B0F14;            /* fond principal near-black, legere teinte froide */
  --ap-surface:#12181F;        /* cartes, panneaux */
  --ap-surface-2:#1A222C;      /* survol / elevation */
  --ap-line:rgba(255,255,255,.09);
  --ap-line-2:rgba(255,255,255,.14);

  /* — Marque : emeraude (correctement nommee, plus de --orange=vert) — */
  --ap-emerald:#10B981;        /* accent principal, eclairci pour contraste sur sombre */
  --ap-emerald-deep:#059669;   /* variante logo / boutons pleins */
  --ap-emerald-hover:#28C996;  /* VRAI hover distinct (avant: identique) */
  --ap-emerald-soft:rgba(16,185,129,.12);

  /* — Accent : ocre chaud (crepuscule africain) — */
  --ap-ocre:#E08D3C;           /* accent secondaire, AA sur fond sombre */
  --ap-ocre-deep:#B45309;
  --ap-ocre-hover:#EEA45B;
  --ap-ocre-soft:rgba(224,141,60,.12);

  /* — Texte (neutres legerement teintes vert = choisis) — */
  --ap-text:#F3F6F4;
  --ap-muted:#9FAAA4;
  --ap-faint:#6C7670;

  /* — Semantiques — */
  --ap-danger:#F87171; --ap-danger-soft:rgba(248,113,113,.12);
  --ap-warn:#FBBF24;   --ap-warn-soft:rgba(251,191,36,.12);
  --ap-ok:var(--ap-emerald);

  /* — Rayons / ombres — */
  --ap-r-sm:10px; --ap-r:16px; --ap-r-lg:22px; --ap-r-pill:999px;
  --ap-shadow-sm:0 8px 24px -12px rgba(0,0,0,.5);
  --ap-shadow:0 24px 60px -24px rgba(0,0,0,.7);

  /* — Typo — */
  --ap-serif:"DM Serif Display",ui-serif,Georgia,"Times New Roman",serif;
  --ap-sans:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  /* — Echelle d'espacement (base 4) — */
  --ap-1:4px; --ap-2:8px; --ap-3:12px; --ap-4:16px; --ap-5:24px;
  --ap-6:32px; --ap-7:48px; --ap-8:64px; --ap-9:96px;

  /* — Layout — */
  --ap-maxw:1120px;

  /* Contexte sombre : indique au navigateur de rendre les controles natifs
     (scrollbars, select, autofill) en sombre — coherent avec le fond. */
  color-scheme:dark;
}

/* Accessibilite : focus clavier visible partout (WCAG 2.4.7). */
.ap2 :focus-visible,
a.ap2-btn:focus-visible,
.ap2-nav a:focus-visible,
.ap2-card:focus-visible{
  outline:2px solid var(--ap-emerald);
  outline-offset:3px;
  border-radius:6px;
}

/* Respect du confort de mouvement. */
@media (prefers-reduced-motion:reduce){
  .ap2-rise{opacity:1!important;transform:none!important;animation:none!important}
}

/* ---- Conteneur ---- */
.ap2-wrap{max-width:var(--ap-maxw);margin:0 auto;padding:0 var(--ap-5)}
.ap2-eyebrow{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ap-muted)}

/* ---- Boutons ---- */
.ap2-btn{display:inline-flex;align-items:center;gap:9px;padding:13px 22px;border-radius:12px;font-family:var(--ap-sans);font-weight:700;font-size:15px;line-height:1;cursor:pointer;border:1px solid transparent;text-decoration:none;transition:transform .18s,background .18s,border-color .18s,color .18s}
.ap2-btn svg{width:17px;height:17px;stroke:currentColor;stroke-width:2;fill:none}
.ap2-btn-primary{background:var(--ap-emerald);color:#04110C;box-shadow:0 12px 30px -12px var(--ap-emerald)}
.ap2-btn-primary:hover{background:var(--ap-emerald-hover);transform:translateY(-2px)}
.ap2-btn-ocre{background:var(--ap-ocre);color:#1c0f02}
.ap2-btn-ocre:hover{background:var(--ap-ocre-hover);transform:translateY(-2px)}
.ap2-btn-ghost{border-color:var(--ap-line-2);color:var(--ap-text);background:transparent}
.ap2-btn-ghost:hover{border-color:var(--ap-ocre);color:var(--ap-ocre)}

/* ---- Cartes ---- */
.ap2-card{position:relative;display:block;background:linear-gradient(180deg,var(--ap-surface),rgba(18,24,31,.6));border:1px solid var(--ap-line);border-radius:var(--ap-r);padding:var(--ap-5);transition:transform .2s,border-color .2s;overflow:hidden;color:inherit;text-decoration:none}
.ap2-card::before{content:"";position:absolute;left:0;top:0;height:100%;width:3px;background:var(--ap-accent,var(--ap-emerald));opacity:0;transition:opacity .2s}
.ap2-card:hover{transform:translateY(-4px);border-color:var(--ap-line-2)}
.ap2-card:hover::before{opacity:1}

/* ---- Sections ---- */
.ap2-sec{padding:var(--ap-8) 0}
.ap2-sec-head{max-width:640px;margin-bottom:var(--ap-7)}
.ap2-sec-head h2{font-family:var(--ap-serif);font-weight:400;font-size:clamp(30px,4vw,44px);line-height:1.08;letter-spacing:-.01em;margin:var(--ap-3) 0 0;text-wrap:balance;color:var(--ap-text)}
.ap2-sec-head p{margin-top:var(--ap-4);color:var(--ap-muted);font-size:16px}

/* ---- Grille auto-fit (responsive natif, sans media queries par page) ---- */
.ap2-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}

/* ---- Animation d'apparition ---- */
.ap2-rise{opacity:0;transform:translateY(16px);animation:ap2Rise .7s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes ap2Rise{to{opacity:1;transform:none}}