/* ========================================================================== CHARTE INITIATIVES AFRICA — feuille mère Version 1.0 · 22 août 2026 -------------------------------------------------------------------------- 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 : 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')} /* -------------------------------------------------------------------------- 2 · JETONS -------------------------------------------------------------------------- */ :root{ /* Palette — les huit couleurs de la charte, et rien d'autre */ --ia-bleu:#0A3D91; /* Bleu Afrique — couleur principale */ --ia-minuit:#062B5B; /* Bleu Minuit — fonds sombres, bandeaux */ --ia-horizon:#3A7BFF; /* Bleu Horizon — liens, états actifs */ --ia-or:#C9A227; /* Or Prestige — accent, jamais pour du texte long */ --ia-blanc:#FFFFFF; --ia-nuage:#F4F6FB; /* fond de section alterné */ --ia-argent:#DCE2EA; /* filets, bordures */ --ia-anthracite:#222831; /* 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:#5A6472; /* texte secondaire, contraste 5.1:1 sur blanc */ --ia-encre-inv:var(--ia-blanc); --ia-trait:var(--ia-argent); --ia-lien:var(--ia-bleu); --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-bleu); --ia-accent-2:var(--ia-or); /* Familles — trois, pas davantage */ --ia-titre:'Manrope',system-ui,-apple-system,sans-serif; --ia-corps:'Inter',system-ui,-apple-system,sans-serif; --ia-chiffre:'IBM Plex Sans','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:#B8931F;color:var(--ia-minuit)} .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} }