/* ==========================================================================
   CHARTE INITIATIVES AFRICA — feuille mère
   Version 2.0 · 26 août 2026 — palette sombre / or / crème (remplace la
   version 1.0, bleue, restée orpheline sur une seule page)
   --------------------------------------------------------------------------
   Fichier unique dont dépendent toutes les pages du site. Une évolution de
   charte se fait ici, pas dans les pages.

   Appel dans une page :
     <link rel="stylesheet" href="/assets/charte/charte-ia.css">

   Les observatoires sont hors périmètre à ce jour et n'appellent pas cette
   feuille. Les fiches pays l'appellent et surchargent le seul jeton
   --ia-accent par la couleur nationale.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · POLICES, hébergées sur le domaine
   Aucune requête vers un service tiers : la page s'affiche même si
   fonts.googleapis.com est inaccessible, et aucune adresse IP de visiteur
   n'est transmise à un tiers.
   -------------------------------------------------------------------------- */
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/charte/polices/manrope-400.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;
  src:url('/assets/charte/polices/manrope-600.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;
  src:url('/assets/charte/polices/manrope-800.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/charte/polices/inter-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;
  src:url('/assets/charte/polices/inter-500.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;
  src:url('/assets/charte/polices/inter-600.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url('/assets/charte/polices/ibmplexsans-700.woff2') format('woff2')}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:600 700;font-display:swap;
  src:url('/assets/charte/polices/playfairdisplay-normal.woff2') format('woff2')}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:600 700;font-display:swap;
  src:url('/assets/charte/polices/playfairdisplay-italic.woff2') format('woff2')}

/* --------------------------------------------------------------------------
   2 · JETONS
   -------------------------------------------------------------------------- */
:root{
  /* Palette — les huit couleurs de la charte, et rien d'autre
     Version 2.0 · 26 août 2026 · alignée sur la charte sombre/or/crème */
  --ia-bleu:#0A0A0A;           /* Fond Sombre — couleur principale (ex-Bleu Afrique) */
  --ia-minuit:#141414;         /* Fond Sombre alt — bandeaux, pied de page */
  --ia-horizon:#D4A24A;        /* Or clair — liens, états actifs (ex-Bleu Horizon) */
  --ia-or:#C9A24A;             /* Or Prestige — accent, jamais pour du texte long */
  --ia-blanc:#FFFFFF;
  --ia-nuage:#F7F5EF;          /* fond de section alterné — crème charte */
  --ia-argent:#E3D6B0;         /* filets, bordures — beige-or charte */
  --ia-anthracite:#26261F;     /* texte courant */

  /* Rôles — les pages appellent ceux-ci, pas les couleurs brutes.
     Changer un rôle ici se répercute partout. */
  --ia-fond:var(--ia-blanc);
  --ia-fond-alt:var(--ia-nuage);
  --ia-fond-sombre:var(--ia-minuit);
  --ia-encre:var(--ia-anthracite);
  --ia-encre-2:#6B6B62;       /* texte secondaire, gris chaud charte */
  --ia-encre-inv:var(--ia-blanc);
  --ia-trait:var(--ia-argent);
  --ia-lien:var(--ia-or);
  --ia-lien-survol:var(--ia-horizon);

  /* Accent — surchargé par fiche pays avec la couleur nationale.
     Défaut : la couleur principale de la charte. */
  --ia-accent:var(--ia-or);
  --ia-accent-2:var(--ia-or);

  /* Familles — trois, pas davantage */
  --ia-titre:'Playfair Display',Georgia,serif;
  --ia-corps:'Inter',system-ui,-apple-system,sans-serif;
  --ia-chiffre:'Playfair Display','Inter',system-ui,sans-serif;

  /* Échelle typographique — rapport 1.25, fluide entre mobile et bureau */
  --ia-t-xs:clamp(.69rem,.66rem + .12vw,.75rem);
  --ia-t-s:clamp(.81rem,.78rem + .15vw,.875rem);
  --ia-t-m:clamp(.94rem,.9rem + .2vw,1rem);
  --ia-t-l:clamp(1.13rem,1.05rem + .35vw,1.25rem);
  --ia-t-xl:clamp(1.4rem,1.25rem + .7vw,1.75rem);
  --ia-t-2xl:clamp(1.75rem,1.45rem + 1.4vw,2.5rem);
  --ia-t-3xl:clamp(2.2rem,1.6rem + 2.8vw,3.75rem);

  /* Espacement — pas de valeurs isolées dans les pages */
  --ia-e-1:.25rem; --ia-e-2:.5rem;  --ia-e-3:.75rem; --ia-e-4:1rem;
  --ia-e-5:1.5rem; --ia-e-6:2rem;   --ia-e-7:3rem;   --ia-e-8:4.5rem;
  --ia-e-9:6rem;

  --ia-largeur:1240px;        /* largeur utile maximale */
  --ia-rayon:6px;
  --ia-rayon-l:12px;
  --ia-ombre:0 1px 2px rgba(6,43,91,.05),0 8px 24px rgba(6,43,91,.07);
  --ia-ombre-l:0 4px 8px rgba(6,43,91,.04),0 16px 48px rgba(6,43,91,.12);
  --ia-transition:180ms cubic-bezier(.2,0,.2,1);
}

/* --------------------------------------------------------------------------
   3 · SOCLE
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}

body.ia-charte{
  margin:0;
  background:var(--ia-fond);
  color:var(--ia-encre);
  font-family:var(--ia-corps);
  font-size:var(--ia-t-m);
  font-weight:400;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.ia-charte h1,.ia-charte h2,.ia-charte h3,.ia-charte h4{
  font-family:var(--ia-titre);
  font-weight:800;
  line-height:1.1;
  letter-spacing:-.022em;
  color:var(--ia-bleu);
  margin:0 0 var(--ia-e-4);
  text-wrap:balance;
}
.ia-charte h1{font-size:var(--ia-t-3xl)}
.ia-charte h2{font-size:var(--ia-t-2xl)}
.ia-charte h3{font-size:var(--ia-t-xl)}
.ia-charte h4{font-size:var(--ia-t-l);font-weight:600}
.ia-charte p{margin:0 0 var(--ia-e-4);max-width:72ch}

.ia-charte a{color:var(--ia-lien);text-decoration-thickness:1px;text-underline-offset:.18em}
.ia-charte a:hover{color:var(--ia-lien-survol)}
.ia-charte :focus-visible{outline:2px solid var(--ia-horizon);outline-offset:3px;border-radius:3px}
.ia-charte ::selection{background:rgba(58,123,255,.22)}

/* Les chiffres portent leur propre famille et s'alignent en colonne.
   Sur un site de données, une valeur mal alignée se lit comme une erreur. */
.ia-chiffre,.ia-charte .ia-stat-v{
  font-family:var(--ia-chiffre);
  font-weight:700;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
}

/* --------------------------------------------------------------------------
   4 · MISE EN PAGE
   -------------------------------------------------------------------------- */
.ia-enveloppe{width:100%;max-width:var(--ia-largeur);margin-inline:auto;padding-inline:var(--ia-e-5)}
.ia-section{padding-block:var(--ia-e-8)}
.ia-section--alt{background:var(--ia-fond-alt)}
.ia-section--sombre{background:var(--ia-fond-sombre);color:var(--ia-encre-inv)}
.ia-section--sombre h1,.ia-section--sombre h2,
.ia-section--sombre h3,.ia-section--sombre h4{color:var(--ia-encre-inv)}
.ia-section--sombre a{color:var(--ia-or)}

/* Le surtitre porte l'accent national sur les fiches pays. */
.ia-surtitre{
  display:flex;align-items:center;gap:var(--ia-e-3);
  font-family:var(--ia-corps);
  font-size:var(--ia-t-xs);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--ia-encre-2);
  margin-bottom:var(--ia-e-3);
}
.ia-surtitre::before{
  content:'';width:28px;height:2px;flex:none;
  background:var(--ia-accent);
}
.ia-section--sombre .ia-surtitre{color:rgba(255,255,255,.72)}

/* --------------------------------------------------------------------------
   5 · COMMANDES
   Un bouton dit ce qui se passe quand on l'actionne, et garde le même nom
   d'un bout à l'autre du parcours.
   -------------------------------------------------------------------------- */
.ia-btn{
  display:inline-flex;align-items:center;gap:var(--ia-e-2);
  padding:var(--ia-e-3) var(--ia-e-5);
  font-family:var(--ia-corps);font-size:var(--ia-t-s);font-weight:600;
  letter-spacing:.01em;
  border:1px solid transparent;border-radius:var(--ia-rayon);
  text-decoration:none;cursor:pointer;
  transition:background var(--ia-transition),color var(--ia-transition),
             border-color var(--ia-transition),transform var(--ia-transition);
}
.ia-btn--premier{background:var(--ia-bleu);color:var(--ia-blanc)}
.ia-btn--premier:hover{background:var(--ia-minuit);color:var(--ia-blanc)}
.ia-btn--second{background:transparent;color:var(--ia-bleu);border-color:var(--ia-trait)}
.ia-btn--second:hover{border-color:var(--ia-bleu);background:var(--ia-nuage)}
.ia-btn--or{background:var(--ia-or);color:var(--ia-minuit)}
.ia-btn--or:hover{background:#8A6423;color:var(--ia-blanc)}
.ia-btn:active{transform:translateY(1px)}

/* --------------------------------------------------------------------------
   6 · SURFACES
   -------------------------------------------------------------------------- */
.ia-carte{
  background:var(--ia-blanc);
  border:1px solid var(--ia-trait);
  border-radius:var(--ia-rayon-l);
  padding:var(--ia-e-5);
  box-shadow:var(--ia-ombre);
  transition:box-shadow var(--ia-transition),border-color var(--ia-transition);
}
.ia-carte:hover{box-shadow:var(--ia-ombre-l);border-color:var(--ia-accent)}

/* Le filet supérieur reprend l'accent national : sur une fiche pays, il
   identifie le pays avant même la lecture du titre. */
.ia-carte--accent{border-top:3px solid var(--ia-accent)}

.ia-etiq{
  display:inline-block;
  padding:var(--ia-e-1) var(--ia-e-3);
  font-size:var(--ia-t-xs);font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--ia-bleu);background:var(--ia-nuage);
  border-radius:100px;
}

.ia-tableau{width:100%;border-collapse:collapse;font-size:var(--ia-t-s)}
.ia-tableau th{
  font-family:var(--ia-corps);font-size:var(--ia-t-xs);font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  text-align:left;color:var(--ia-encre-2);
  padding:var(--ia-e-3) var(--ia-e-4);
  border-bottom:1px solid var(--ia-trait);
}
.ia-tableau td{padding:var(--ia-e-3) var(--ia-e-4);border-bottom:1px solid var(--ia-trait)}
.ia-tableau td.n,.ia-tableau th.n{text-align:right;font-family:var(--ia-chiffre);
  font-variant-numeric:tabular-nums}
.ia-tableau tbody tr:hover{background:var(--ia-nuage)}

/* --------------------------------------------------------------------------
   7 · PIED DE PAGE
   -------------------------------------------------------------------------- */
.ia-pied{
  background:var(--ia-minuit);color:rgba(255,255,255,.78);
  padding-block:var(--ia-e-7);font-size:var(--ia-t-s);
}
.ia-pied a{color:var(--ia-or);text-decoration:none}
.ia-pied a:hover{text-decoration:underline}
.ia-pied-mention{
  margin-top:var(--ia-e-5);padding-top:var(--ia-e-4);
  border-top:1px solid rgba(255,255,255,.14);
  font-size:var(--ia-t-xs);color:rgba(255,255,255,.6);
}

/* --------------------------------------------------------------------------
   8 · PLANCHER DE QUALITÉ
   -------------------------------------------------------------------------- */
@media (max-width:640px){
  .ia-section{padding-block:var(--ia-e-7)}
  .ia-enveloppe{padding-inline:var(--ia-e-4)}
}
@media (prefers-reduced-motion:reduce){
  .ia-charte *,.ia-charte *::before,.ia-charte *::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
}
@media print{
  .ia-charte{background:#fff;color:#000}
  .ia-btn,.ia-pied{display:none}
}

/* --------------------------------------------------------------------------
   9 · LUMIÈRE & PROFONDEUR
   Module partagé auparavant recopié tel quel dans chaque page ia-pages/
   (ombres, halos, cartes, boutons dégradés, sections sombres). Consolidé
   ici le 26 août 2026 pour que les pages migrées le chargent au lieu de
   le dupliquer.
   -------------------------------------------------------------------------- */
/* ══ LUMIÈRE & PROFONDEUR ══ */
:root{
  --sh-sm:0 1px 2px rgba(0,29,58,.05),0 2px 8px rgba(0,29,58,.05);
  --sh-md:0 2px 4px rgba(0,29,58,.04),0 8px 22px rgba(0,29,58,.07);
  --sh-lg:0 4px 8px rgba(0,29,58,.04),0 16px 40px rgba(0,29,58,.10),0 32px 64px rgba(0,29,58,.06);
  --glow-o:0 8px 26px rgba(242,161,23,.32);--glow-b:0 8px 26px rgba(0,154,220,.28);
  --ease:cubic-bezier(.16,1,.3,1);--r-sm:10px;--r-md:14px;--r-lg:18px;
}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
::selection{background:rgba(242,161,23,.26)}
:focus-visible{outline:2px solid #C9A24A;outline-offset:3px;border-radius:4px}
.hero-title{letter-spacing:-.022em}
.stitle,.stitle-wh{letter-spacing:-.016em}
.hero-pill{border-radius:999px!important;backdrop-filter:blur(10px) saturate(1.3);
  background:rgba(255,255,255,.11)!important;border:1px solid rgba(255,255,255,.26)!important}
.btn{border-radius:var(--r-sm)!important;transition:transform .34s var(--ease),box-shadow .34s var(--ease),background .24s ease}
.btn-gold{background:linear-gradient(135deg,#D4A24A,#C9A24A 58%,#D4A24A);color:#231400!important;border:none;box-shadow:var(--glow-o)}
.btn-gold:hover{transform:translateY(-3px);box-shadow:0 14px 36px rgba(242,161,23,.44)}
.btn-vert{background:linear-gradient(135deg,#C9A24A,#C9A24A 60%,#141414);color:#fff!important;border:none;box-shadow:var(--glow-b)}
.btn-vert:hover{transform:translateY(-3px);box-shadow:0 14px 36px rgba(0,154,220,.42)}
.btn-out{backdrop-filter:blur(10px);background:rgba(255,255,255,.10);border:1.5px solid rgba(255,255,255,.42)}
.btn-out:hover{transform:translateY(-3px);background:rgba(255,255,255,.20)}
.btn-out-vert{border:1.5px solid #C9A24A;color:#141414}
.btn-out-vert:hover{transform:translateY(-3px);background:#F7F5EF;box-shadow:var(--sh-md)}
.hero-kpi{background:rgba(255,255,255,.085)!important;border:1px solid rgba(255,255,255,.20)!important;
  border-radius:var(--r-md);backdrop-filter:blur(14px) saturate(1.25);
  box-shadow:0 2px 10px rgba(0,7,31,.22),inset 0 1px 0 rgba(255,255,255,.13);
  transition:transform .38s var(--ease),background .3s ease}
.hero-kpi:hover{transform:translateY(-3px);background:rgba(255,255,255,.13)!important}
.hero-kpi-val{background:linear-gradient(120deg,#f7cd7a,#D4A24A 52%,#C9A24A);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#D4A24A}
.hero-bottom{backdrop-filter:blur(16px) saturate(1.2);background:rgba(0,7,31,.42)!important}
.hb-item:hover{background:rgba(255,255,255,.10)!important}
.sommaire{backdrop-filter:blur(18px) saturate(1.5);background:rgba(253,250,247,.90)!important;
  box-shadow:0 1px 0 rgba(0,29,58,.05)}
.sommaire-inner a{border-radius:999px;transition:all .26s var(--ease)}
.sommaire-inner a:hover{background:#F7F5EF;color:#8A6423}
.eyebrow{color:#8A6423}.eyebrow-wh{color:#f7cd7a}
.hr-or{background:linear-gradient(90deg,#C9A24A,#f7cd7a);border:none;height:3px;border-radius:2px;width:56px}
.hr-vert{background:linear-gradient(90deg,#C9A24A,#E3D6B0);border:none;height:3px;border-radius:2px;width:56px}
.eco-card,.opport-card,.macro-card,.classement-card,.sub-sect-card,.iamap-wrap,.bnd-strip,.bnd-card,.dir-block,.min-item{
  border-radius:var(--r-md)!important;box-shadow:var(--sh-sm);
  transition:transform .38s var(--ease),box-shadow .38s var(--ease),border-color .3s ease}
.eco-card:hover,.opport-card:hover,.macro-card:hover,.classement-card:hover,.min-item:hover{
  transform:translateY(-4px);box-shadow:var(--sh-lg);border-color:#E3D6B0}
.macro-val,.oc-ticket,.cc-rang,.s-kpi-val{background:linear-gradient(120deg,#141414,#C9A24A);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#C9A24A}
.secteur-block{border-radius:var(--r-lg)!important;overflow:hidden;box-shadow:var(--sh-sm);transition:box-shadow .38s var(--ease)}
.secteur-block:hover{box-shadow:var(--sh-md)}
.secteur-header{transition:filter .3s ease}
.secteur-header:hover{filter:brightness(1.10)}
.sh-ico{border-radius:var(--r-sm)}
.opport-box{border-radius:var(--r-md);box-shadow:var(--sh-sm)}
.section-dark,.section-vert,.cta-section{position:relative;overflow:hidden}
.section-dark::before,.section-vert::before,.cta-section::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 58% 48% at 16% 8%,rgba(0,154,220,.22) 0%,transparent 62%),
             radial-gradient(ellipse 52% 44% at 88% 92%,rgba(242,161,23,0.024) 0%,transparent 60%)}
.section-dark>.container,.section-vert>.container,.cta-section>.container{position:relative;z-index:2}
.vision-item{transition:background .3s ease,transform .38s var(--ease)}
.vision-item:hover{transform:translateY(-3px)}
.vi-num{background:linear-gradient(120deg,#f7cd7a,#C9A24A);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#D4A24A}
.id-item{transition:background .26s ease}
.id-item:hover{background:#F7F5EF}
.nav{backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.10)}
.nav-links a{transition:color .24s ease,border-color .24s ease}
.nav-links a:hover,.nav-links a.active{color:#D4A24A!important;border-bottom-color:#D4A24A!important}
.nav-cta{border-radius:999px!important;background:linear-gradient(135deg,#D4A24A,#C9A24A)!important;color:#231400!important;
  box-shadow:0 3px 14px rgba(242,161,23,.36);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(242,161,23,.48)}
.dir-photo img{transition:transform .5s var(--ease)}
.dir-block:hover .dir-photo img{transform:scale(1.04)}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* == LISIBILITE DES MENTIONS SECONDAIRES == */
.hero-kpi-sub{color:rgba(255,255,255,.68)!important;font-size:.62rem!important;letter-spacing:.4px}
.section-dark .macro-sub,.section-vert .macro-sub,.cta-section .macro-sub{color:rgba(255,255,255,.68)!important}
.hb-txt{color:rgba(255,255,255,.70)!important}
.ftr-bot-l,.ftr-bot-r{color:rgba(255,255,255,.62)!important}
.ftr-bot-m a{color:rgba(255,255,255,.62)!important}
.ftr-p,.nl-p{color:rgba(255,255,255,.70)!important}
.ftr-ct li{color:rgba(255,255,255,.72)!important}
.ec-cat,.oc-secteur,.cc-source{letter-spacing:1.4px}
.section-dark .ec-cat,.section-vert .ec-cat{color:rgba(255,255,255,.70)!important}
.s-kpi-lbl,.acc-kl{color:#6B6B62}
.section-dark .s-kpi-lbl,.section-vert .s-kpi-lbl{color:rgba(255,255,255,.70)!important}
.ia-tip-d{color:rgba(255,255,255,.80)!important}
.bnd-foot,.iamap-foot{color:#6B6B62}