/* ==========================================================================
   UNIS — Réseau panafricain de lutte contre la corruption
   Système de design du site (refonte 2026)

   Principe : un magazine d'enquête. La typographie porte l'autorité
   (IBM Plex Serif pour les titres, IBM Plex Sans pour le texte), le
   tricolore du logo sert de signature, et chaque publication garde sa
   propre couleur (Kanyaka : rouge, Afrika Sika : orange).
   ========================================================================== */

/* ---------- 1. Jetons ---------- */
:root {
  --encre: #16130F;
  --encre-douce: #4A443D;
  --gris: #6B645C;            /* texte secondaire, AA sur blanc et grège */
  --papier: #FFFFFF;
  --grege: #F4EFE7;           /* fond des sections éditoriales */
  --filet: #E3DACB;
  --filet-drapeau: #CFCFCF;   /* contour des drapeaux : garde visibles ceux à fond blanc */
  --nuit: #0F1A12;            /* vert-noir de la marque (theme-color) */
  --nuit-2: #17251A;
  --texte-nuit: #D7DDD3;
  --texte-nuit-doux: #D7DDD3;   /* partie 8 : même gris clair que le pied de page (l'ancien #A9B3A4 était trop pâle) */
  --texte-olive: #5A6455;       /* texte secondaire olive sur fond clair (6,2:1 sur blanc) */
  --erreur: #B3261E;            /* erreurs de formulaire sur fond clair */
  --erreur-clair: #FFB4A8;      /* erreurs de formulaire sur fond sombre */

  /* tricolore du logo */
  --unis-vert: #8CC63F;
  --unis-bleu: #27B4E6;
  --unis-orange: #EE7236;

  /* action principale (orange du logo assombri, texte blanc AA) */
  --action: #B84A16;
  --action-fonce: #963B10;
  --lien: #9A3D12;

  /* publications */
  --kanyaka: #C8102E;  --kanyaka-texte: #A50D26;  --kanyaka-or: #C9A24A;  --kanyaka-fond: #1A1311;
  --sika: #E8672A;     --sika-texte: #A8420F;     --sika-vert: #A8D46A;   --sika-fond: #161D2A;
  --rushwa: #2F6B3A;

  /* méthode UNIS (les cinq niveaux de certitude) */
  --etabli: #17804A; --declare: #1F6FB2; --annonce: #9A6A10; --analyse: #5B3F7A; --nondispo: #A8322A;

  --serif: 'IBM Plex Serif', Georgia, 'Times New Roman', serif;
  --sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --maxw: 1280px;
  --gout: clamp(20px, 4.5vw, 56px);
  --section: clamp(56px, 8vw, 104px);
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
body { margin: 0; font-family: var(--sans); font-size: 17px; line-height: 1.6; color: var(--encre); background: var(--papier); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--lien); text-underline-offset: .18em; }
a:hover { color: var(--action-fonce); }
:focus-visible { outline: 3px solid var(--unis-bleu); outline-offset: 3px; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 700; line-height: 1.12; margin: 0; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
.conteneur { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gout); }
.visuellement-cache { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lien-evitement { position: absolute; left: 12px; top: -60px; background: var(--encre); color: #fff; padding: 10px 16px; z-index: 100; }
.lien-evitement:focus { top: 12px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* Signature : le tricolore du logo */
.tricolore { height: 4px; background: linear-gradient(90deg, var(--unis-vert) 0 33.33%, var(--unis-bleu) 33.33% 66.66%, var(--unis-orange) 66.66% 100%); }

/* Rubriquage : un repère court, en petites capitales */
.rubrique { font-family: var(--sans); font-weight: 600; letter-spacing: .08em; font-variant-caps: all-small-caps; font-size: 15px; color: var(--gris); margin: 0 0 12px; display: flex; align-items: center; gap: 10px; }
.rubrique::before { content: ""; width: 22px; height: 3px; background: currentColor; }
.rubrique--kanyaka { color: var(--kanyaka-texte); }
.rubrique--sika { color: var(--sika-texte); }
.rubrique--rushwa { color: var(--rushwa); }
.rubrique--clair { color: var(--texte-nuit-doux); }

/* ---------- 3. Boutons et pastilles ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; font: 600 16px/1 var(--sans); text-decoration: none; border: 2px solid transparent; cursor: pointer; }
.btn--action { background: var(--action); color: #fff; }
.btn--action:hover { background: var(--action-fonce); color: #fff; }
.btn--contour { border-color: currentColor; color: var(--encre); background: transparent; }
.btn--contour:hover { background: var(--encre); color: #fff; }
.btn--clair { border-color: rgba(255,255,255,.6); color: #fff; }
.btn--clair:hover { background: #fff; color: var(--nuit); }
.btn--kanyaka { background: var(--kanyaka); color: #fff; } .btn--kanyaka:hover { background: #9E0C24; color: #fff; }
.btn--sika { background: #C4521A; color: #fff; } .btn--sika:hover { background: #A0420F; color: #fff; }
.pastille { display: inline-block; font: 700 12px/1.3 var(--sans); letter-spacing: .05em; text-transform: uppercase; color: #fff; padding: 4px 8px; white-space: nowrap; }
.pastille--etabli { background: var(--etabli); } .pastille--declare { background: var(--declare); }
.pastille--annonce, .pastille--encours, .pastille--reporte { background: var(--annonce); }
.pastille--analyse { background: var(--analyse); } .pastille--nondispo, .pastille--rompu { background: var(--nondispo); }

/* ---------- 4. En-tête ---------- */
.utilitaire, .entete, .pied { font-family: var(--sans); }
.utilitaire { background: var(--nuit); color: var(--texte-nuit-doux); font-size: 14px; }
.utilitaire .conteneur { display: flex; justify-content: flex-end; gap: 24px; min-height: 40px; align-items: center; }
.utilitaire a { color: var(--texte-nuit); text-decoration: none; }
.utilitaire a:hover { color: #fff; text-decoration: underline; }
.utilitaire .signaler { color: #fff; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.utilitaire .signaler svg { width: 16px; height: 16px; }
.entete { background: #FFFFFF; position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--filet); }
.entete .conteneur { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 84px; }
.entete .logo img { height: 60px; width: auto; }
.nav-principale ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 4px; }
.nav-principale a { display: block; padding: 12px 14px; font-weight: 500; font-size: 16px; color: var(--encre); text-decoration: none; border-bottom: 3px solid transparent; }
.nav-principale a:hover, .nav-principale a[aria-current="page"], .nav-principale a[aria-current="true"] { border-bottom-color: var(--unis-orange); color: var(--encre); }
.nav-principale .btn { margin-left: 12px; }
.nav-principale .sous { font-size: 13px; color: var(--gris); display: block; font-weight: 400; }
.bouton-menu { display: none; background: none; border: 0; width: 48px; height: 48px; align-items: center; justify-content: center; cursor: pointer; }
.bouton-menu svg { width: 28px; height: 28px; }
@media (max-width: 1080px) {
  .bouton-menu { display: inline-flex; }
  .nav-principale { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--papier); border-bottom: 1px solid var(--filet); box-shadow: 0 18px 30px rgba(22,19,15,.12); }
  .nav-principale.ouvert { display: block; }
  .nav-principale ul { flex-direction: column; align-items: stretch; padding: 8px var(--gout) 24px; }
  .nav-principale a { padding: 14px 0; border-bottom: 1px solid var(--filet); font-size: 18px; }
  .nav-principale .btn { margin: 16px 0 0; }
  .entete .logo img { height: 42px; }
  .utilitaire .masquable { display: none; }
}

/* ---------- 5. Une (couverture) ---------- */
.une { background: var(--nuit); color: #fff; }
.une .conteneur { display: grid; grid-template-columns: 1fr; gap: 40px; padding-block: clamp(40px, 6vw, 80px); }
@media (min-width: 1000px) { .une .conteneur { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 56px; } }
.une__principale { display: grid; gap: 22px; align-content: start; }
.une__visuel { position: relative; margin: 0; }
.une__visuel img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; }
.une__visuel figcaption { font-size: 14px; color: var(--texte-nuit-doux); margin-top: 8px; }
.une h1 { font-size: clamp(40px, 6.2vw, 80px); line-height: 1.02; letter-spacing: -.02em; color: #fff; }
.une__chapo { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.55; color: var(--texte-nuit); max-width: 62ch; margin: 0; }
.une__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.une__note { font-size: 15px; color: var(--texte-nuit-doux); margin: -8px 0 0; }
.une__note a { color: var(--texte-nuit); text-underline-offset: .15em; }
/* Carte « Aussi à la une » d'un numéro paru : titre en lien, boutons de lecture dessous. */
.carte-une h3 a { color: #fff; text-decoration: none; }
.carte-une h3 a:hover { text-decoration: underline; text-underline-offset: .15em; }
.une__actions--sm { gap: 8px; margin-top: 6px; }
.une__actions--sm .btn { line-height: 1.2; text-align: center; }
/* Trois façons de lire le numéro : sur téléphone, un bouton par ligne, pleine largeur. */
@media (max-width: 600px) { .une__actions { flex-direction: column; } .une__actions .btn { width: 100%; text-align: center; line-height: 1.25; padding-top: 10px; padding-bottom: 10px; } }
.une__aussi { border-top: 1px solid rgba(255,255,255,.18); display: grid; align-content: start; }
@media (min-width: 1000px) { .une__aussi { border-top: 0; border-left: 1px solid rgba(255,255,255,.18); padding-left: 40px; } }
.une__aussi h2 { font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--texte-nuit-doux); padding: 20px 0 8px; }
.carte-une { display: grid; gap: 8px; padding: 20px 0; border-bottom: 1px solid rgba(255,255,255,.14); color: #fff; text-decoration: none; }
.carte-une:hover h3 { text-decoration: underline; text-underline-offset: .15em; }
.carte-une h3 { font-size: 23px; line-height: 1.22; color: #fff; }
.carte-une p { font-size: 15px; color: var(--texte-nuit-doux); margin: 0; }

/* ---------- 6. Bandeau des dossiers suivis ---------- */
.suivi { background: var(--grege); border-bottom: 1px solid var(--filet); }
.suivi .conteneur { display: grid; grid-template-columns: 1fr; gap: 0; padding-block: 8px; }
@media (min-width: 900px) { .suivi .conteneur { grid-template-columns: 200px repeat(3, minmax(0, 1fr)); align-items: stretch; } }
.suivi__titre { padding: 18px 0; font: 600 15px/1.35 var(--sans); }
.suivi__titre a { display: block; font-weight: 400; font-size: 14px; margin-top: 4px; }
.suivi__item { padding: 18px 0; border-top: 1px solid var(--filet); display: grid; gap: 8px; align-content: start; }
@media (min-width: 900px) { .suivi__item { border-top: 0; border-left: 1px solid var(--filet); padding: 18px 22px; } }
.suivi__item b { font-size: 15px; line-height: 1.4; font-weight: 600; }
.suivi__item small { font-size: 13px; color: var(--gris); }

/* ---------- 7. Sections ---------- */
.section { padding-block: var(--section); }
.section--grege { background: var(--grege); }
.section--nuit { background: var(--nuit); color: var(--texte-nuit); }
.section__tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 40px; margin-bottom: clamp(32px, 4vw, 52px); }
.section__tete h2 { font-size: clamp(32px, 4vw, 52px); max-width: 20ch; }
.section--nuit h2 { color: #fff; }
.section__tete p { max-width: 52ch; color: var(--encre-douce); margin: 0; }
.section--nuit .section__tete p { color: var(--texte-nuit); }

/* ---------- 8. Kiosque des publications ---------- */
.kiosque { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.titre-pub { display: grid; grid-template-rows: auto 1fr; background: var(--papier); border: 1px solid var(--filet); text-decoration: none; color: var(--encre); }
.titre-pub:hover { border-color: var(--encre); color: var(--encre); }
.titre-pub:hover .titre-pub__lire { text-decoration: underline; }
/* Carte d'un titre dont un numéro est paru : la couverture et le texte restent
   un seul lien vers la rubrique, les trois façons de lire le numéro (en ligne,
   PDF téléphone, PDF A4) viennent en dessous, hors du lien. */
.titre-pub--numero { grid-template-rows: 1fr auto; }
.titre-pub__lien { display: grid; grid-template-rows: auto 1fr; color: inherit; text-decoration: none; }
.titre-pub__lien:hover { color: inherit; }
.titre-pub__lien:hover .titre-pub__lire { text-decoration: underline; }
.titre-pub__lectures { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 22px 24px; }
.titre-pub__lectures .btn { line-height: 1.2; text-align: center; }
.titre-pub__note { flex-basis: 100%; font-size: 13px; color: var(--gris); margin: 4px 0 0; }
.titre-pub__note a { color: var(--lien); }
@media (max-width: 600px) { .titre-pub__lectures { flex-direction: column; } .titre-pub__lectures .btn { width: 100%; padding-top: 8px; padding-bottom: 8px; } }
.couv { aspect-ratio: 3 / 4; padding: 22px; display: flex; flex-direction: column; gap: 10px; color: #fff; overflow: hidden; }
.couv__marque { font-family: var(--serif); font-weight: 700; font-size: 26px; line-height: 1; }
.couv__num { font-size: 13px; font-weight: 600; opacity: .85; }
.couv__titre { font-family: var(--serif); font-weight: 700; font-size: 24px; line-height: 1.12; margin-top: auto; }
.couv__devise { font-family: var(--serif); font-style: italic; font-size: 14px; line-height: 1.4; }
.couv--kanyaka { background: var(--kanyaka-fond); border-top: 6px solid var(--kanyaka); }
.couv--kanyaka .couv__marque small { display: block; font-style: italic; font-weight: 600; font-size: 15px; color: var(--kanyaka-or); margin-top: 4px; }
.couv--kanyaka .couv__devise { color: var(--kanyaka-or); }
.couv--kanyaka img { margin: 8px -22px 0; width: calc(100% + 44px); max-width: none; aspect-ratio: 16 / 7; object-fit: cover; }
.couv--sika { background: var(--sika-fond); border-top: 6px solid var(--sika); }
.couv--sika .couv__marque span { color: var(--sika); }
.couv--sika .couv__devise { color: var(--sika-vert); }
.couv--sika .couv__chiffre { font-family: var(--serif); font-weight: 700; font-size: 64px; line-height: 1; }
.couv--sika .couv__chiffre span { font-size: 24px; color: var(--sika); }
.couv--rushwa { background: #13261A; border-top: 6px solid var(--unis-vert); }
.couv--rushwa .couv__devise { color: var(--unis-vert); }
.couv--rapport { background: var(--grege); color: var(--encre); border-top: 6px solid var(--encre); }
.titre-pub__corps { padding: 20px 22px 24px; display: grid; gap: 10px; align-content: start; }
.titre-pub__corps h3 { font-size: 22px; }
.titre-pub__corps p { font-size: 15px; line-height: 1.55; color: var(--encre-douce); margin: 0; }
.titre-pub__meta { font-size: 13px; color: var(--gris); }
.titre-pub__lire { font-weight: 600; font-size: 15px; color: var(--lien); }

@media (max-width: 700px) { .couv { aspect-ratio: auto; min-height: 280px; } }

/* ---------- 9. Impact / contentieux ---------- */
.impact { display: grid; gap: 40px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 960px) { .impact { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 72px; } }
.impact .impact__chiffre { margin: 0; font-family: var(--serif); font-weight: 700; font-size: clamp(96px, 14vw, 180px); line-height: .9; color: #fff; letter-spacing: -.04em; }
.impact .impact__legende { font-size: 20px; line-height: 1.45; color: var(--texte-nuit); max-width: 32ch; margin-top: 16px; }
.impact h3 { font-size: clamp(28px, 3vw, 38px); color: #fff; margin-bottom: 16px; }
.impact p { font-size: 17px; }

/* ---------- 10. Méthode ---------- */
.methode { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; grid-template-columns: 1fr; border-top: 2px solid var(--encre); }
@media (min-width: 760px) { .methode { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.methode li { padding: 20px 20px 20px 0; border-bottom: 1px solid var(--filet); display: grid; gap: 10px; align-content: start; font-size: 15px; line-height: 1.5; color: var(--encre-douce); }
@media (min-width: 760px) { .methode li { border-bottom: 0; } .methode li + li { padding-left: 20px; border-left: 1px solid var(--filet); } }
.methode .pastille { justify-self: start; }

/* ---------- 11. Actualités ---------- */
.fil { display: grid; gap: 0; grid-template-columns: 1fr; }
@media (min-width: 900px) { .fil { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; } }
.article-carte { display: grid; gap: 10px; align-content: start; padding: 24px 0; border-top: 2px solid var(--encre); text-decoration: none; color: var(--encre); }
.article-carte:hover h3 { text-decoration: underline; text-underline-offset: .15em; }
.article-carte h3 { font-size: 24px; line-height: 1.2; }
.article-carte p { font-size: 16px; color: var(--encre-douce); margin: 0; }
.article-carte time, .article-carte .meta { font-size: 14px; color: var(--gris); }

/* ---------- 12. Alerter en sécurité ---------- */
.alerte { display: grid; gap: 32px; grid-template-columns: 1fr; background: var(--papier); border: 1px solid var(--filet); border-left: 6px solid var(--unis-bleu); padding: clamp(28px, 4vw, 48px); }
@media (min-width: 900px) { .alerte { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; } }
.alerte h2 { font-size: clamp(28px, 3.2vw, 40px); margin-bottom: 14px; }
.alerte ul { margin: 0; padding-left: 20px; color: var(--encre-douce); }
.alerte li { margin-bottom: 8px; }

/* ---------- 13. Réseau / président ---------- */
.reseau { display: grid; gap: 48px; grid-template-columns: 1fr; }
@media (min-width: 960px) { .reseau { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 80px; align-items: start; } }
.citation-pres { margin: 0; }
.citation-pres blockquote { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.15; }
.citation-pres p { font-size: 19px; line-height: 1.6; color: var(--encre-douce); margin-top: 20px; }
.citation-pres figcaption { margin-top: 20px; display: flex; align-items: center; gap: 16px; }
.portrait { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: var(--filet); }
.partenaires { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); border-top: 1px solid var(--filet); }
.partenaires li { padding: 16px 12px 16px 0; border-bottom: 1px solid var(--filet); font-weight: 600; font-size: 16px; }

/* ---------- 14. Lettre d'information ---------- */
.lettre { display: grid; gap: 32px; grid-template-columns: 1fr; }
@media (min-width: 960px) { .lettre { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 72px; align-items: center; } }
.lettre h2 { font-size: clamp(30px, 3.6vw, 44px); color: #fff; }
.lettre fieldset { border: 0; padding: 0; margin: 0 0 16px; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.lettre legend { font-size: 15px; margin-bottom: 10px; color: var(--texte-nuit); }
.lettre label { display: inline-flex; gap: 8px; align-items: center; font-size: 16px; color: #fff; min-height: 32px; }
.lettre input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--unis-orange); }
.lettre .ligne { display: flex; flex-wrap: wrap; gap: 8px; }
.lettre input[type=email] { flex: 1 1 240px; min-height: 52px; border: 0; padding: 0 16px; font: inherit; }
.lettre small { display: block; margin-top: 12px; font-size: 14px; color: var(--texte-nuit-doux); }
.champ-piege { display: none; }

/* ---------- 15. Pied de page ---------- */
.pied { background: var(--nuit); color: var(--texte-nuit); font-size: 15px; }
.pied .conteneur { padding-block: 64px 32px; display: grid; gap: 40px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .pied .conteneur { grid-template-columns: 1.3fr repeat(3, minmax(0, 1fr)); } }
.pied img { height: 64px; width: auto; }
.pied h2 { font-family: var(--sans); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: #fff; margin-bottom: 14px; }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pied a { color: var(--texte-nuit); text-decoration: none; }
.pied a:hover { color: #fff; text-decoration: underline; }
.pied__bas { grid-column: 1 / -1; border-top: 1px solid #2A3A2D; padding-top: 20px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--texte-nuit-doux); }
/* Réseaux sociaux : icônes seules, le nom du réseau est porté par aria-label. */
/* Réseaux sociaux : icônes SVG en ligne (tracés Simple Icons, CC0), 22 px dans une zone de 44 × 44 px. */
.pied .pied__reseaux { display: flex; gap: 12px; margin-top: 16px; margin-left: -11px; }
.pied__reseaux a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: #fff; opacity: .8; transition: opacity .15s; }
.pied__reseaux a:hover, .pied__reseaux a:focus-visible { color: #fff; opacity: 1; text-decoration: none; }
.pied__reseaux svg { width: 22px; height: 22px; }

/* ---------- 16. Pages intérieures ---------- */
.page-tete { background: var(--grege); border-bottom: 1px solid var(--filet); }
.page-tete .conteneur { padding-block: clamp(40px, 6vw, 72px); }
.ariane { font-size: 14px; color: var(--gris); margin-bottom: 20px; }
.ariane a { color: var(--gris); }
.page-tete h1 { font-size: clamp(40px, 5.4vw, 68px); max-width: 18ch; }
.page-tete .chapo { font-size: clamp(19px, 1.7vw, 22px); line-height: 1.55; color: var(--encre-douce); max-width: 60ch; margin-top: 20px; }
.corps { display: grid; gap: 48px; grid-template-columns: 1fr; }
@media (min-width: 1000px) { .corps { grid-template-columns: minmax(0, 1fr) 300px; gap: 80px; } }
.prose { max-width: 68ch; font-size: 18px; line-height: 1.7; }
.prose h2 { font-size: 32px; margin: 1.6em 0 .5em; }
.prose h3 { font-size: 24px; margin: 1.4em 0 .4em; }
.prose blockquote { margin: 1.5em 0; padding-left: 24px; border-left: 4px solid var(--unis-orange); font-family: var(--serif); font-style: italic; font-size: 24px; line-height: 1.35; }
.prose figure { margin: 2em 0; } .prose figcaption { font-size: 14px; color: var(--gris); margin-top: 8px; }
.encart { border-top: 4px solid var(--encre); padding-top: 18px; font-size: 15px; }
.encart h2 { font-family: var(--sans); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 12px; }
.encart + .encart { margin-top: 36px; }
.grille-liste { display: grid; gap: 0 40px; grid-template-columns: 1fr; }
@media (min-width: 800px) { .grille-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .grille-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.filtres { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.filtres a { padding: 10px 16px; border: 1px solid var(--filet); text-decoration: none; color: var(--encre); font-size: 15px; font-weight: 500; }
.filtres a[aria-current="true"] { background: var(--encre); color: #fff; border-color: var(--encre); }
.valeurs { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.valeurs li { border-top: 2px solid var(--encre); padding-top: 16px; }
.valeurs h3 { font-size: 22px; margin-bottom: 8px; }
.valeurs p { font-size: 16px; color: var(--encre-douce); margin: 0; }
.etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; grid-template-columns: 1fr; counter-reset: etape; }
@media (min-width: 900px) { .etapes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.etapes li { counter-increment: etape; padding: 24px 24px 24px 0; border-top: 1px solid rgba(255,255,255,.18); }
.etapes li::before { content: counter(etape, decimal-leading-zero); display: block; font: 700 28px var(--serif); color: var(--unis-orange); margin-bottom: 8px; }
.etapes h3 { font-size: 21px; color: #fff; margin-bottom: 6px; }
.etapes p { font-size: 15px; margin: 0; color: var(--texte-nuit-doux); }

/* ---------- 17. Composants intérieurs repris de la version précédente ----------
   Les pages intérieures (fiches, bibliothèque, revue de presse, équipe,
   contentieux, hub Kanyaka) gardent leurs composants ; ils sont redessinés
   ici avec les jetons ci-dessus. Les listes rendues par contenus.js aussi. */
/* ── 03 · TYPOGRAPHIE ─────────────────────────────────────── */
.t-hero{font-size:clamp(2.6rem,7.4vw,5.1rem);font-weight:800;letter-spacing:-.035em}
.t-xl{font-size:clamp(2rem,4.6vw,3.3rem);font-weight:700;letter-spacing:-.03em}
.t-lg{font-size:clamp(1.55rem,3vw,2.1rem);font-weight:700;letter-spacing:-.025em}
.t-md{font-size:clamp(1.2rem,2vw,1.45rem);font-weight:700}
.sect-title{font-size:clamp(1.85rem,4vw,2.9rem);font-weight:700;letter-spacing:-.03em;color:var(--encre);margin-bottom:1rem}
.sect-title--light{color:#fff}
/* Surtitre : catégorie ou nom de section, discret et constant. */
/* Chapeau de section : une seule phrase, large et lisible. */
.lead{font-family:var(--serif);font-size:clamp(1.02rem,1.6vw,1.22rem);
  line-height:1.65;color:var(--encre-douce);max-width:46rem;}
.lead--light{color:rgba(255,255,255,.82)}
.small{font-size:.85rem;color:var(--gris);line-height:1.6}
/* Métadonnée : catégorie · date. L'accent de couleur du site. */
.meta{display:flex;align-items:baseline;flex-wrap:wrap;gap:.5rem .7rem;
  font-family:var(--sans);font-size:.7rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--gris);}
.cat{color:var(--rushwa)}
.cat--o{color:var(--action)}
.cat--b{color:var(--declare)}
.cat--light{color:var(--unis-vert)}
/* ── 04 · MISE EN PAGE ────────────────────────────────────── */
.conteneur--narrow{max-width:54rem}
.sect--tight{padding-block:clamp(2.5rem,4vw,3.5rem)}
.section--nuit .sect-title,.section--nuit h2,.section--nuit h3{color:#fff}
.section--nuit p{color:rgba(255,255,255,.78)}
.sect--line{border-top:1px solid var(--filet)}
.sect__head{margin-bottom:clamp(1.75rem,3vw,2.75rem)}
.sect__head--row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:1rem 2rem;}
.sect__head--row .sect-title{margin-bottom:0}
/* Pied de section : quand une section montre réellement des contenus,
   ses liens de rubrique passent sous les cartes plutôt que dans
   l'en-tête — le regard va d'abord aux contenus. */
.sect__foot{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 2rem;
  margin-top:clamp(2rem,4vw,3rem);padding-top:1.5rem;
  border-top:1px solid var(--filet);}
.rule{border-top:1px solid var(--filet);margin-block:clamp(2rem,4vw,3rem)}
.section--nuit .rule{border-color:rgba(255,255,255,.16)}
.section--nuit .sect__foot{border-color:rgba(255,255,255,.16)}
.stack>*+*{margin-top:1rem}
/* Lien « suite » — la flèche est décorative et avance au survol. */
.more{display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--sans);font-size:.8rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--rushwa);text-decoration:none;}
.more::after{content:'→';transition:transform .18s ease}
.more:hover{text-decoration:none}
.more:hover::after{transform:translateX(4px)}
.more--light{color:#fff}
/* ── 06 · BOUTONS ─────────────────────────────────────────── */
.btn--dark{background:var(--encre);color:var(--papier)}
.btn--dark:hover{background:var(--rushwa);color:#fff}
.btn--sm{padding:.6rem 1rem;font-size:.72rem}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btns{display:flex;flex-wrap:wrap;gap:.7rem}
.suite{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2.5rem;padding-top:2rem;border-top:1px solid var(--filet)}
/* ── 07 · CARTES ÉDITORIALES ──────────────────────────────── */
/* Une seule anatomie, trois tailles : image, catégorie, titre,
   résumé, date, « Lire ». Le titre est le seul lien visible. */
.card{display:flex;flex-direction:column;gap:.85rem;min-width:0}
.card__media{display:block;position:relative;overflow:hidden;background:var(--grege);
  border-radius:0;aspect-ratio:16/10;}
.card__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.card:hover .card__media img{transform:scale(1.03)}
.card__body{display:flex;flex-direction:column;gap:.55rem}
.card__title{font-size:1.12rem;font-weight:700;line-height:1.2;letter-spacing:-.02em;}
.card__title a{color:var(--encre);text-decoration:none}
.card__title a:hover{color:var(--rushwa)}
.card__desc{font-family:var(--serif);font-size:.92rem;line-height:1.55;color:var(--encre-douce)}
.card__foot{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;margin-top:.1rem}
.card--lg .card__title{font-size:clamp(1.5rem,2.8vw,2.15rem);letter-spacing:-.03em}
.card--lg .card__desc{font-size:clamp(.98rem,1.4vw,1.08rem);line-height:1.62}
.card--lg .card__media{aspect-ratio:16/9}
.card--row{flex-direction:row;gap:1.1rem;align-items:flex-start}
.card--row .card__media{flex:0 0 7.5rem;aspect-ratio:1/1}
.card--row .card__title{font-size:1rem}
.card--plain .card__media{display:none}
/* Carte secondaire de « À la une » : image, catégorie, titre, date.
   Ni résumé ni pied de carte — le développement est sur la carte
   principale, et le titre reste le seul lien visible. */
.card--compact{gap:.7rem}
.card--compact .card__title{font-size:1.04rem}
.card--dark .card__title a{color:#fff}
.card--dark .card__title a:hover{color:var(--unis-vert)}
.card--dark .card__desc{color:rgba(255,255,255,.76)}
/* Carte secondaire développée de « À la une » : la couverture du
   document à gauche, catégorie, titre, résumé court, date et lien à
   droite. Elle ne ressemble ni à la carte principale (grande image
   au-dessus du titre) ni aux cartes du fil (trois colonnes égales) :
   la hiérarchie de la section se lit d'un coup d'œil. */
.card--feature{flex-direction:row;gap:1.15rem;align-items:flex-start}
.card--feature .card__cover{flex:0 0 clamp(5.25rem,10vw,7.5rem);display:block;overflow:hidden;
  border-radius:0;background:var(--grege);
  border:1px solid var(--filet);}
.card--feature .card__cover img{width:100%;aspect-ratio:1/1.41;object-fit:cover;display:block;
  transition:transform .5s ease;}
.card--feature:hover .card__cover img{transform:scale(1.02)}
/* Sans couverture, la couverture typographique de la bibliothèque —
   jamais une image générique à la place d'un vrai document. */
.card--feature .card__cover--txt{display:flex;flex-direction:column;justify-content:flex-end;gap:.45rem;
  aspect-ratio:1/1.41;padding:.8rem .75rem;
  background:var(--nuit);border-color:var(--nuit);}
.card--feature .card__cover--txt .pub-card__cover-k{font-size:.58rem;letter-spacing:.14em}
.card--feature .card__cover--txt .pub-card__cover-t{font-size:.84rem;line-height:1.25}
.card--feature .card__body{gap:.45rem}
.card--feature .card__title{font-size:1.02rem}
.card--feature .card__desc{font-size:.88rem;line-height:1.5;
  display:-webkit-box;-webkit-box-orient:vertical;
  -webkit-line-clamp:2;line-clamp:2;overflow:hidden;}
.card--feature .card__foot{margin-top:.15rem}
@media (max-width:420px){
  .card--feature{gap:.9rem}
}
/* Vignette typographique du fil : un contenu sans visuel — un
   communiqué, par exemple — garde le cadrage des autres cartes, aux
   couleurs d'UNIS, plutôt qu'une photographie inventée. */
.card__media--txt{display:flex;flex-direction:column;justify-content:flex-end;gap:.5rem;
  padding:1.15rem;background:var(--nuit);}
.card__media-k{font-family:var(--sans);font-size:.66rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--unis-vert);}
.card__media-t{font-family:var(--sans);font-size:1.05rem;font-weight:700;
  line-height:1.2;letter-spacing:-.02em;color:#fff;}
.grid{display:grid;gap:clamp(1.5rem,3vw,2.5rem)}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid--sep>*{padding-top:1.5rem;border-top:1px solid var(--filet)}
@media (max-width:980px){
  .grid--3,.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .grid--2,.grid--3,.grid--4{grid-template-columns:minmax(0,1fr)}
}
/* ── 08 · ACCUEIL ─────────────────────────────────────────── */
/* Hero : encre sombre, titre très affirmé, emblème en filigrane.
   L'emplacement --hero-img accueille une photographie d'UNIS dès
   qu'elle est disponible (voir le commentaire dans index.html). */
/* Hero éditorial de l'accueil française : la promesse d'UNIS en trois
   phrases, posées l'une sous l'autre. Le titre est l'élément dominant
   de l'écran — d'où une échelle propre, calée pour que « Documenter la
   corruption. » tienne sur une seule ligne dès 320 px de large : sur
   mobile, trois lignes franches valent mieux qu'un titre qui se casse
   en six. Aucune animation, aucun visuel générique : l'emblème en
   filigrane et la typographie suffisent, l'emplacement photographique
   reste commenté dans la page. */
/* Premier accès : plus grand, plein, il se lit avant les deux autres. */
/* À la une : une actualité principale, puis les suivantes en colonne. */
.une-liste{display:grid;gap:clamp(1.75rem,3.5vw,3rem);grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}
.une__side{display:flex;flex-direction:column;gap:1.5rem}
.une__side>*+*{padding-top:1.5rem;border-top:1px solid var(--filet)}
@media (max-width:860px){
  .une-liste{grid-template-columns:minmax(0,1fr)}
}
/* Sur l'accueil, la composition est franchement dissymétrique : un
   dossier principal très large, deux contenus secondaires développés
   dans une colonne étroite. Sur tablette, les deux secondaires
   passent côte à côte sous le dossier ; sur mobile, tout s'empile
   dans l'ordre de lecture. */
/* Comment nous agissons : six blocs numérotés, sans icône générique. */
.how{display:grid;gap:0;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--filet)}
.how__item{padding:1.9rem 1.6rem 1.9rem 0;border-bottom:1px solid var(--filet);
  display:flex;flex-direction:column;gap:.55rem;}
.how__item+.how__item{border-left:1px solid var(--filet);padding-left:1.6rem}
.how__n{font-family:var(--sans);font-size:.72rem;font-weight:700;
  letter-spacing:.14em;color:var(--rushwa);}
.how__t{font-size:1.16rem;font-weight:700;letter-spacing:-.02em}
.how__t a{color:var(--encre);text-decoration:none}
.how__t a:hover{color:var(--rushwa)}
.how__d{font-family:var(--serif);font-size:.9rem;line-height:1.55;color:var(--encre-douce)}
@media (max-width:900px){
  .how{grid-template-columns:repeat(2,minmax(0,1fr))}
  .how__item:nth-child(2n+1){padding-left:0;border-left:0}
  .how__item:nth-child(2n){border-left:1px solid var(--filet);padding-left:1.6rem}
}
@media (max-width:560px){
  .how{grid-template-columns:minmax(0,1fr)}
  .how__item,.how__item+.how__item{padding:1.35rem 0;border-left:0}
}
/* KANYAKA-RUSHWA : identité propre — encre profonde, accent orange. */
.kr{background:var(--nuit);color:#fff;position:relative;overflow:hidden}
.kr__accent{position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--unis-orange)}
.kr__grid{display:grid;gap:clamp(2rem,4vw,3.5rem);grid-template-columns:minmax(0,1fr) minmax(0,.85fr);align-items:start}
.kr__word{font-family:var(--sans);font-size:clamp(1.9rem,4.4vw,3.1rem);font-weight:800;
  letter-spacing:-.02em;color:#fff;margin-bottom:.6rem;}
.kr__sub{font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--unis-orange);margin-bottom:1.5rem}
.kr__lead{font-family:var(--serif);font-size:clamp(1rem,1.5vw,1.14rem);line-height:1.65;color:rgba(255,255,255,.84)}
.kr__list{list-style:none;margin:1.75rem 0 0;display:grid;gap:.75rem}
.kr__list li{display:flex;gap:.7rem;font-size:.93rem;line-height:1.5;color:rgba(255,255,255,.78);}
.kr__list li::before{content:'';flex:0 0 auto;width:.5rem;height:.5rem;margin-top:.48rem;background:var(--unis-orange);border-radius:50%}
.kr__editions{display:grid;gap:1rem;grid-template-columns:repeat(2,minmax(0,1fr))}
.kr__ed{display:block;text-decoration:none;color:#fff;
  border:1px solid rgba(255,255,255,.18);border-radius:0;
  padding:.75rem;background:rgba(255,255,255,.03);}
.kr__ed:hover{border-color:var(--unis-orange);text-decoration:none}
.kr__ed img{width:100%;aspect-ratio:1/1.41;object-fit:cover;border-radius:2px;display:block;margin-bottom:.6rem}
.kr__ed-n{font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--unis-orange);display:block}
.kr__ed-d{font-size:.78rem;color:rgba(255,255,255,.6);display:block;margin-top:.15rem}
@media (max-width:860px){
  .kr__grid{grid-template-columns:minmax(0,1fr)}
}
/* Notre impact : des résultats documentés, jamais de chiffre inventé. */
/* Page /impact : chaque chiffre en grand, en police des titres, sa légende dessous
   (même lecture que .impact__chiffre à l'accueil, sur fond clair). Chaque légende
   renvoie à sa source : aucun chiffre sans publication ou décision derrière lui. */
.resultats{display:grid;gap:clamp(2rem,4vw,3.5rem);grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));margin:0 0 clamp(1.75rem,3vw,2.5rem)}
.resultat__n{margin:0;font-family:var(--serif);font-weight:700;font-size:clamp(76px,9vw,132px);line-height:.9;letter-spacing:-.04em;color:var(--encre)}
.resultat__l{margin:14px 0 0;font-size:18px;line-height:1.5;color:var(--encre-douce);max-width:36ch}
.resultat__src{margin:10px 0 0;font-size:.85rem;color:var(--gris)}
.resultat__l a,.resultat__src a,.impact-texte a{color:var(--lien)}
.impact-texte{max-width:44rem;font-size:18px;line-height:1.6}
.impact-maj{margin-top:18px}
.section--nuit .resultat__n{color:#fff}
.section--nuit .resultat__l{color:var(--texte-nuit)}
/* Procédures judiciaires : drapeaux des pays (SVG flag-icons, 4:3, hébergés
   dans /assets/img/drapeaux/). Toujours décoratifs — alt="" et aria-hidden —,
   le nom du pays est écrit à côté. Contour de 1 px hors boîte (box-shadow) pour
   que les drapeaux à fond blanc restent lisibles sans changer leur taille. */
.drapeau{display:inline-block;height:18px;width:auto;aspect-ratio:4/3;box-shadow:0 0 0 1px var(--filet-drapeau);vertical-align:middle}
.jx__title .drapeau{margin-right:.5em;position:relative;top:-.1em}
.drapeaux{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 22px}
.drapeaux li{display:flex;align-items:center;gap:8px;font-size:15px;line-height:1.3;color:var(--encre-douce)}
.drapeaux .drapeau{height:22px}
.section--nuit .drapeaux li{color:var(--texte-nuit)}
/* Contentieux stratégique : la ligne de deux chiffres au-dessus des fiches. */
.jx-chiffres{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1.1rem;margin:0 0 2rem;font-family:var(--sans);font-size:1.05rem;font-weight:600;color:var(--encre-douce)}
.jx-chiffres strong{font-family:var(--serif);font-size:clamp(2.6rem,5vw,3.4rem);font-weight:700;line-height:1;letter-spacing:-.03em;color:var(--encre);margin-right:.3rem}
.jx-chiffres__sep{color:var(--gris);font-size:1.6rem}
/* Réseau panafricain : portraits et composition du réseau. */
.people{display:flex;gap:1.5rem;flex-wrap:wrap}
.person{width:12rem;max-width:45vw}
.person img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:0;display:block;filter:grayscale(.15)}
.person__n{font-family:var(--sans);font-size:1rem;font-weight:700;margin-top:.7rem}
.person__r{font-size:.8rem;color:var(--gris)}
.person--ph{display:grid;place-items:center;text-align:center;aspect-ratio:3/4;
  border:1px dashed #CDBFA9;border-radius:0;
  font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gris);padding:1rem;}
.compo{list-style:none;display:grid;gap:.6rem;margin-top:1.5rem}
.compo li{display:flex;gap:.6rem;font-size:.95rem;line-height:1.5;color:var(--encre-douce)}
.compo li::before{content:'—';color:var(--rushwa);flex:0 0 auto}
/* Partenaires : une grille de logos calme, pas un mur. */
.logos{display:grid;gap:1px;grid-template-columns:repeat(5,minmax(0,1fr));background:var(--filet);border:1px solid var(--filet);border-radius:0;overflow:hidden}
.logo-cell{display:grid;place-items:center;padding:1.6rem 1.1rem;min-height:6.5rem;
  background:var(--papier);text-decoration:none;}
.logo-cell:hover{background:var(--grege);text-decoration:none}
.logo-cell img{max-height:2.6rem;width:auto;max-width:100%;object-fit:contain;filter:grayscale(1);opacity:.78;transition:filter .2s ease,opacity .2s ease}
.logo-cell:hover img{filter:none;opacity:1}
.logo-cell__txt{font-family:var(--sans);font-size:.76rem;font-weight:700;text-align:center;
  color:var(--encre-douce);letter-spacing:.02em;}
@media (max-width:900px){
  .logos{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:520px){
  .logos{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Variante aérée pour l'accueil : les logos respirent, sans grille
   apparente ni mur de marques. Les points de rupture sont redéclarés
   après ceux de .logos : même spécificité, c'est l'ordre qui tranche. */
/* Fin de page d'accueil : rester informé, puis rejoindre. */
.newsletter{display:grid;gap:clamp(1.5rem,3vw,3rem);grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
.nl-form{display:flex;gap:.6rem;flex-wrap:wrap}
.nl-form input[type=email]{flex:1 1 15rem;min-width:0;font-family:var(--sans);font-size:.95rem;
  padding:.85rem 1rem;color:var(--encre);background:var(--papier);
  border:1px solid #CDBFA9;border-radius:0;}
.join{text-align:center;max-width:44rem;margin:0 auto}
.join .t-xl{margin-bottom:1rem}
@media (max-width:760px){
  .newsletter{grid-template-columns:minmax(0,1fr)}
}
/* Comment nous agissons : les six verbes en une seule chaîne.
   Horizontale sur grand écran, en trois colonnes sur tablette, et
   verticale sur mobile — la flèche disparaît dès qu'elle mentirait
   sur le sens de lecture. */
/* Un seul chiffre clé, et il est sourcé : voir le rapport lui-même. */
/* Dernière édition de KANYAKA-RUSHWA, sur fond sombre. */
.kr-last{display:grid;gap:1.25rem;grid-template-columns:minmax(0,9rem) minmax(0,1fr);
  align-items:start;padding:1.1rem;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.18);border-radius:0;}
.kr-last__cover{display:block;border-radius:2px;overflow:hidden}
.kr-last__cover img{width:100%;aspect-ratio:1/1.41;object-fit:cover;display:block}
.kr-last__in{min-width:0}
.kr-last__k{font-family:var(--sans);font-size:.66rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--unis-orange);display:block;}
.kr-last__t{font-size:1.1rem;font-weight:700;line-height:1.25;letter-spacing:-.02em;margin:.5rem 0}
.kr-last__t a{color:#fff;text-decoration:none}
.kr-last__t a:hover{color:var(--unis-orange)}
.kr-last__d{font-family:var(--serif);font-size:.9rem;line-height:1.6;color:rgba(255,255,255,.72);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;}
.kr-last__meta{font-family:var(--sans);font-size:.76rem;color:rgba(255,255,255,.6);margin-top:.3rem}
.kr-last__foot{margin-top:1rem}
@media (max-width:520px){
  .kr-last{grid-template-columns:minmax(0,1fr)}
  .kr-last__cover{max-width:9rem}
}
/* Une ambition panafricaine : du texte, et l'emblème en filigrane —
   pas une carte de données, que nous n'avons pas à publier. */
/* Respiration et longueur : réservé à l'accueil (body[data-home]),
   pour que les pages intérieures gardent leur rythme. */
/* ── 09 · PAGES INTÉRIEURES ───────────────────────────────── */
/* Sous-titre de fonction, sous le H1 d'une page de membre : lisible
   au premier regard, mais graphiquement secondaire par rapport au nom. */
.page-head__role{font-family:var(--sans);font-size:clamp(.82rem,1.4vw,.95rem);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--unis-vert);margin-top:1.1rem;}
.page-head__byline{display:flex;flex-wrap:wrap;gap:.35rem 1rem;margin-top:1.6rem;
  font-family:var(--sans);font-size:.78rem;color:rgba(255,255,255,.66);}
.page-head__byline strong{color:#fff;font-weight:600}
/* Corps d'article : une colonne étroite, du serif, du rythme. */
.article{max-width:40rem;font-family:var(--serif)}
.article>*+*{margin-top:1.35rem}
.article p{font-size:1.06rem;line-height:1.78;color:var(--encre)}
.article__chapo{font-size:clamp(1.12rem,1.8vw,1.3rem);line-height:1.62;font-weight:400;
  color:var(--encre);padding-bottom:1.35rem;border-bottom:1px solid var(--filet);}
.article h2{font-family:var(--sans);font-size:clamp(1.35rem,2.4vw,1.75rem);font-weight:700;
  letter-spacing:-.025em;margin-top:2.75rem;}
.article h3{font-family:var(--sans);font-size:1.16rem;font-weight:700;margin-top:2rem}
.article ul,.article ol{padding-left:1.15rem;display:grid;gap:.65rem}
.article li{font-size:1.02rem;line-height:1.7;color:var(--encre)}
.article ul{list-style:none;padding-left:0}
.article ul li{display:flex;gap:.7rem}
.article ul li::before{content:'';flex:0 0 auto;width:.4rem;height:.4rem;margin-top:.62rem;background:var(--rushwa);border-radius:50%}
.article a{color:var(--rushwa);text-decoration:underline}
.article img{border-radius:0;display:block}
.article figcaption{font-family:var(--sans);font-size:.8rem;color:var(--gris);margin-top:.5rem}
blockquote.pull,.pull{margin:2.5rem 0;padding:0 0 0 1.5rem;border-left:3px solid var(--rushwa);
  font-family:var(--sans);font-size:clamp(1.2rem,2.2vw,1.6rem);font-weight:600;
  line-height:1.3;letter-spacing:-.02em;color:var(--encre);}
.encadre{margin:2.5rem 0;padding:1.5rem;background:var(--grege);
  border-radius:0;border-top:3px solid var(--rushwa);}
.encadre__t{font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--rushwa);margin-bottom:.6rem}
.encadre h3{margin:0 0 .6rem;font-family:var(--sans)}
.encadre p{font-size:.96rem;line-height:1.65}
.encadre p+p{margin-top:.75rem}
.avertissement{margin:2.25rem 0;padding:1.15rem 1.3rem;
  background:#FBEEE6;border-left:3px solid var(--unis-orange);
  border-radius:0;
  font-family:var(--sans);font-size:.9rem;line-height:1.6;color:var(--encre);}
.avertissement strong{color:var(--action)}
.securite-box{margin-top:2.5rem;padding:1.25rem 1.4rem;
  background:#FBEEE6;border-left:3px solid var(--unis-orange);border-radius:0;
  font-family:var(--sans);font-size:.9rem;line-height:1.65;}
.tags{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;margin-top:2.5rem}
.tags__l{font-family:var(--sans);font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);margin-right:.35rem}
.tag{font-family:var(--sans);font-size:.74rem;font-weight:600;
  padding:.3rem .6rem;border:1px solid var(--filet);border-radius:999px;
  color:var(--encre-douce);background:var(--papier);}
a.tag:hover{border-color:var(--rushwa);color:var(--rushwa);text-decoration:none}
/* Partage : sobre, sans script tiers, sans compteur. */
.share{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--filet)}
.share__l{font-family:var(--sans);font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);margin-right:.35rem}
.share a,.share button{display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--sans);font-size:.74rem;font-weight:700;letter-spacing:.06em;
  padding:.45rem .75rem;border:1px solid var(--filet);border-radius:999px;
  background:var(--papier);color:var(--encre-douce);text-decoration:none;cursor:pointer;}
.share a:hover,.share button:hover{border-color:var(--encre);color:var(--encre);text-decoration:none}
/* Contenus associés, en pied d'article. */
.related{margin-top:clamp(3rem,6vw,4.5rem);padding-top:2rem;border-top:1px solid var(--filet)}
/* Repères institutionnels : jalons, valeurs, gouvernance. */
.timeline{list-style:none;display:grid;gap:0;border-top:1px solid var(--filet)}
.timeline li{display:grid;grid-template-columns:8rem minmax(0,1fr);gap:1.5rem;padding:1.4rem 0;border-bottom:1px solid var(--filet)}
.timeline__y{font-family:var(--sans);font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--rushwa)}
.timeline__b{font-family:var(--serif);font-size:.98rem;line-height:1.65;color:var(--encre-douce)}
@media (max-width:640px){
  .timeline li{grid-template-columns:minmax(0,1fr);gap:.4rem}
}
.values{list-style:none;display:grid;gap:0;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--filet)}
.values li{padding:1.35rem 1.4rem 1.35rem 0;border-bottom:1px solid var(--filet)}
.values li+li{border-left:1px solid var(--filet);padding-left:1.4rem}
.values strong{display:block;font-family:var(--sans);font-size:1.02rem;margin-bottom:.35rem}
.values span{font-family:var(--serif);font-size:.92rem;line-height:1.6;color:var(--encre-douce)}
@media (max-width:860px){
  .values{grid-template-columns:repeat(2,minmax(0,1fr))}
  .values li:nth-child(2n+1){padding-left:0;border-left:0}
  .values li:nth-child(2n){border-left:1px solid var(--filet);padding-left:1.4rem}
}
@media (max-width:540px){
  .values{grid-template-columns:minmax(0,1fr)}
  .values li,.values li+li{padding:1.15rem 0;border-left:0}
}
.quote-card{display:grid;gap:clamp(1.5rem,3vw,2.5rem);grid-template-columns:14rem minmax(0,1fr);
  align-items:start;}
/* Le portrait source est plus vertical (1067 × 1600) que ce cadre 3/4 :
   object-position remonte la fenêtre pour ne pas rogner le haut de la
   tête. Ce cadre ne sert qu'au mot du président. */
.quote-card img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:50% 15%;
  border-radius:0;}
.quote-card blockquote{margin:0;font-family:var(--sans);font-size:clamp(1.25rem,2.6vw,1.9rem);
  font-weight:600;line-height:1.28;letter-spacing:-.025em;color:var(--encre);}
.quote-card__who{margin-top:1.25rem;font-family:var(--sans);font-size:.82rem;color:var(--gris)}
.quote-card__who strong{display:block;font-size:1rem;color:var(--encre)}
.section--nuit .quote-card blockquote,.section--nuit .quote-card__who strong{color:#fff}
@media (max-width:700px){
  .quote-card{grid-template-columns:minmax(0,1fr)}
  .quote-card img{max-width:11rem}
}
.ph-grid{display:grid;gap:1px;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--filet);border:1px solid var(--filet);border-radius:0;overflow:hidden}
.ph{background:var(--papier);padding:1.25rem;min-height:5.5rem}
.ph__l{display:block;font-family:var(--sans);font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--rushwa);margin-bottom:.4rem}
.ph__v{font-family:var(--serif);font-size:.9rem;color:var(--gris)}
@media (max-width:860px){
  .ph-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:480px){
  .ph-grid{grid-template-columns:minmax(0,1fr)}
}
/* Transparence : seuls les documents réellement publiés, chacun un lien.
   La grille se resserre sur eux au lieu de laisser des cases vides. */
.ph-grid--docs{grid-template-columns:repeat(auto-fill,minmax(14rem,18rem));width:fit-content;max-width:100%;margin-top:1.5rem}
a.ph{display:block;text-decoration:none;color:inherit}
a.ph .ph__v{color:var(--lien);text-decoration:underline;text-underline-offset:.15em}
a.ph:hover .ph__v,a.ph:focus-visible .ph__v{color:var(--encre)}
/* Dossiers d'action en justice (page Contentieux stratégique). */
.jx{padding:1.75rem;border:1px solid var(--filet);border-radius:0;background:var(--papier)}
.jx+.jx{margin-top:1.5rem}
.jx__meta{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1rem}
.jx__status,.jx__where{font-family:var(--sans);font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:.3rem .6rem;border-radius:999px;}
.jx__status{background:#EAF1E6;color:var(--rushwa)}
.jx__where{background:var(--grege);color:var(--encre-douce)}
.jx__title{font-size:clamp(1.3rem,2.4vw,1.7rem);font-weight:700;letter-spacing:-.025em;margin-bottom:.9rem}
.jx p{font-family:var(--serif);font-size:.98rem;line-height:1.7;color:var(--encre-douce)}
.jx p+p{margin-top:.85rem}
.jx__actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.4rem}
/* Fiche de procédure : les rubriques (type d'action, date, aux côtés de…) en liste de définitions. */
.jx__fiche{display:grid;grid-template-columns:1fr;margin:0}
.jx__fiche dt{font-family:var(--sans);font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--encre-douce);padding-top:.8rem;border-top:1px solid var(--filet)}
.jx__fiche dd{margin:.3rem 0 .8rem;font-family:var(--serif);font-size:.98rem;line-height:1.65;color:var(--encre-douce)}
@media (min-width:720px){
  .jx__fiche{grid-template-columns:12rem 1fr;column-gap:1.5rem}
  .jx__fiche dd{margin:0;padding:.7rem 0;border-top:1px solid var(--filet)}
  .jx__fiche dt{padding:.95rem 0 .7rem}
}
/* ── 10 · PUBLICATIONS ────────────────────────────────────── */
.pub-grid{display:grid;gap:clamp(1.75rem,3vw,2.75rem);grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){
  .pub-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .pub-grid{grid-template-columns:minmax(0,1fr)}
}
.pub-card{display:flex;flex-direction:column;gap:.9rem;min-width:0}
.pub-card__cover{display:block;overflow:hidden;border-radius:0;background:var(--grege);border:1px solid var(--filet)}
.pub-card__cover img{width:100%;aspect-ratio:1/1.41;object-fit:cover;display:block;transition:transform .5s ease}
.pub-card:hover .pub-card__cover img{transform:scale(1.02)}
.pub-card__in{display:flex;flex-direction:column;gap:.5rem}
.pub-card__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem;
  font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gris);}
.pub-card__n{color:var(--rushwa)}
.pub-card__n--o{color:var(--action)}
.pub-card__n--b{color:var(--declare)}
.pub-card__title{font-size:1.1rem;font-weight:700;line-height:1.22;letter-spacing:-.02em}
.pub-card__title a{color:var(--encre);text-decoration:none}
.pub-card__title a:hover{color:var(--rushwa)}
.pub-card__desc{font-family:var(--serif);font-size:.9rem;line-height:1.6;color:var(--encre-douce)}
.pub-card__foot{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.35rem}
/* Bibliothèque sur l'accueil : trois couvertures, un résumé de deux
   lignes et un seul lien — le téléchargement du PDF reste offert sur
   la page de la publication. */
.pub-card--home{gap:1rem}
.pub-card--home .pub-card__title{font-size:1.06rem}
.pub-card--home .pub-card__desc{display:-webkit-box;-webkit-box-orient:vertical;
  -webkit-line-clamp:2;line-clamp:2;overflow:hidden;}
.pub-card--home .pub-card__foot{margin-top:.5rem}
/* Couverture de secours : une publication sans visuel garde une
   couverture typographique plutôt qu'une image inventée. */
.pub-card__cover--txt{display:flex;flex-direction:column;justify-content:flex-end;gap:.6rem;
  aspect-ratio:1/1.41;padding:1.25rem;
  background:var(--nuit);border-color:var(--nuit);}
.pub-card__cover-k{font-family:var(--sans);font-size:.66rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--unis-vert);}
.pub-card__cover-t{font-family:var(--sans);font-size:1.15rem;font-weight:700;
  line-height:1.2;letter-spacing:-.02em;color:#fff;}
.une__main{min-width:0}
/* Publication en vedette : couverture à gauche, argument à droite. */
/* Même repli que .pub-card : sans visuel, une couverture typographique. */
/* Filtres de bibliothèque — n'apparaissent que s'il y a matière. */
.filters{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:2.25rem}
.filter{font-family:var(--sans);font-size:.74rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;padding:.5rem .9rem;border-radius:999px;cursor:pointer;
  background:var(--papier);border:1px solid var(--filet);color:var(--encre-douce);}
.filter:hover{border-color:#CDBFA9}
.filter[aria-pressed="true"]{background:var(--encre);border-color:var(--encre);color:var(--papier)}
/* Un filtre sans contenu est montré mais désactivé : une catégorie
   encore vide ne doit pas promettre un résultat. */
.filter[disabled]{opacity:.45;cursor:default}
.filter[disabled]:hover{border-color:var(--filet)}
/* Chiffres clés et constats d'un rapport. */
.chiffres{display:grid;gap:1px;grid-template-columns:repeat(3,minmax(0,1fr));background:var(--filet);border:1px solid var(--filet);border-radius:0;overflow:hidden;margin:2rem 0}
.chiffre{background:var(--papier);padding:1.35rem}
.chiffre__n{display:block;font-family:var(--sans);font-size:1.5rem;font-weight:800;letter-spacing:-.03em;color:var(--rushwa);margin-bottom:.5rem;line-height:1.1}
.chiffre__l{font-family:var(--serif);font-size:.85rem;line-height:1.55;color:var(--encre-douce)}
@media (max-width:860px){
  .chiffres{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:520px){
  .chiffres{grid-template-columns:minmax(0,1fr)}
}
.constats{list-style:none;display:grid;gap:0;border-top:1px solid var(--filet);margin:1.5rem 0}
.constats li{padding:1.15rem 0;border-bottom:1px solid var(--filet);font-family:var(--serif);font-size:.98rem;line-height:1.7;color:var(--encre-douce)}
.constats strong{font-family:var(--sans);display:block;color:var(--encre);font-size:1.02rem;margin-bottom:.3rem}
.reco-list{list-style:none;counter-reset:reco;display:grid;gap:0;border-top:1px solid var(--filet);margin:1.5rem 0}
.reco{display:grid;grid-template-columns:2.5rem minmax(0,1fr);gap:1rem;padding:1.15rem 0;border-bottom:1px solid var(--filet)}
.reco::before{counter-increment:reco;content:counter(reco,decimal-leading-zero);
  font-family:var(--sans);font-size:.85rem;font-weight:800;color:var(--rushwa);letter-spacing:.02em;}
.reco strong{font-family:var(--sans);display:block;color:var(--encre);font-size:1.02rem;margin-bottom:.3rem}
.reco span{font-family:var(--serif);font-size:.95rem;line-height:1.65;color:var(--encre-douce)}
/* Bloc de téléchargement d'une édition. */
.edition{display:grid;gap:1.5rem;grid-template-columns:11rem minmax(0,1fr);align-items:center;margin:2rem 0;padding:1.5rem;background:var(--grege);border-radius:0}
.edition__cover{width:100%;border-radius:2px;border:1px solid var(--filet)}
.edition__meta{font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gris);margin-bottom:.9rem}
.edition__side .btns,.edition__side .dossier__actions{display:flex;flex-wrap:wrap;gap:.6rem}
@media (max-width:640px){
  .edition{grid-template-columns:minmax(0,1fr)}
  .edition__cover{max-width:9rem}
}
.dossier__actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.25rem}
/* ── 11 · REVUE DE PRESSE ─────────────────────────────────── */
.presse-bar{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
  align-items:end;padding:1.25rem;background:var(--grege);border-radius:0;margin-bottom:1.5rem;}
.presse-field{display:flex;flex-direction:column;gap:.35rem;min-width:0}
.presse-field label{font-family:var(--sans);font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gris)}
.presse-field select,.presse-field input{font-family:var(--sans);font-size:.9rem;padding:.6rem .7rem;color:var(--encre);
  background:var(--papier);border:1px solid #CDBFA9;border-radius:0;width:100%;}
.presse-status{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem;margin-bottom:1.5rem}
.presse-count{font-family:var(--sans);font-size:.82rem;font-weight:700;color:var(--encre)}
.presse-maj{font-size:.78rem;color:var(--gris)}
.presse-grid{display:grid;gap:0;border-top:1px solid var(--filet)}
.presse-card{padding:1.6rem 0;border-bottom:1px solid var(--filet)}
.presse-card--une{border-left:3px solid var(--rushwa);padding-left:1.25rem}
.presse-card__top{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem;margin-bottom:.7rem;
  font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gris);}
.presse-card__src{color:var(--encre)}
.presse-card__sep{color:#CDBFA9}
.presse-card__type,.presse-card__une{padding:.22rem .5rem;border-radius:999px;background:var(--grege);color:var(--encre-douce)}
.presse-card__une{background:#EAF1E6;color:var(--rushwa)}
.presse-card__date{margin-left:auto}
.presse-card__title{font-size:clamp(1.1rem,1.8vw,1.35rem);font-weight:700;letter-spacing:-.022em;line-height:1.25}
.presse-card__title a{color:var(--encre);text-decoration:none}
.presse-card__title a:hover{color:var(--rushwa)}
.presse-card__resume{font-family:var(--serif);font-size:.95rem;line-height:1.65;color:var(--encre-douce);margin-top:.6rem}
.presse-card__plus{background:none;border:0;padding:0;font-family:var(--sans);font-size:.78rem;font-weight:700;color:var(--rushwa);cursor:pointer}
.presse-card__foot{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;margin-top:.85rem}
.presse-card__tags{display:flex;flex-wrap:wrap;gap:.35rem}
.presse-tag{font-family:var(--sans);font-size:.68rem;font-weight:600;padding:.22rem .5rem;border:1px solid var(--filet);border-radius:999px;color:var(--gris)}
.presse-empty{padding:3rem 1rem;text-align:center;border-bottom:1px solid var(--filet)}
.presse-empty__t{font-family:var(--sans);font-size:1.15rem;font-weight:700;margin-bottom:.5rem}
.presse-more{margin-top:1.75rem;display:flex;justify-content:center}
.presse-note{font-size:.8rem;line-height:1.65;color:var(--gris);margin-top:2rem;max-width:44rem}
/* Résultats de recherche — même anatomie que la revue de presse. */
.result{padding:1.5rem 0;border-bottom:1px solid var(--filet)}
.result__t{font-size:1.2rem;font-weight:700;letter-spacing:-.022em;line-height:1.25;margin:.4rem 0 .5rem}
.result__t a{color:var(--encre);text-decoration:none}
.result__t a:hover{color:var(--rushwa)}
.result__d{font-family:var(--serif);font-size:.94rem;line-height:1.6;color:var(--encre-douce)}
/* ── 12 · FORMULAIRES ─────────────────────────────────────── */
.form{display:flex;flex-direction:column;gap:1rem;max-width:34rem}
.form label{display:block;font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gris);margin-bottom:.4rem}
.form input,.form textarea{width:100%;font-family:var(--sans);font-size:1rem;padding:.8rem .9rem;
  color:var(--encre);background:var(--papier);
  border:1px solid #CDBFA9;border-radius:0;}
.form input:focus,.form textarea:focus{border-color:var(--rushwa);outline-offset:1px}
.form__note{font-size:.76rem;color:var(--gris);line-height:1.55}
.form__status{font-family:var(--sans);font-size:.86rem;font-weight:700;margin:0}
.contact-grid{display:grid;gap:clamp(2rem,4vw,3.5rem);grid-template-columns:minmax(0,.85fr) minmax(0,1fr);align-items:start}
@media (max-width:820px){
  .contact-grid{grid-template-columns:minmax(0,1fr)}
}
.contact-dl{display:grid;grid-template-columns:auto;gap:0;margin:0}
.contact-dl dt{font-family:var(--sans);font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);padding-top:1rem;border-top:1px solid var(--filet)}
.contact-dl dd{margin:.3rem 0 1rem;font-size:.98rem;color:var(--encre)}
.contact-note{margin-top:1.5rem;padding:1.1rem 1.25rem;background:#FBEEE6;border-left:3px solid var(--unis-orange);border-radius:0;font-size:.88rem;line-height:1.6}
/* ── 15 · KANYAKA — IDENTITÉ DE FAMILLE ───────────────────────
   Ce que partage la famille KANYAKA sur le site : l'accent orange et
   la manchette (Archivo très dilaté, filets
   doubles), toutes deux reprises par le hub de la marque (section 17).
   Les rubriques Kanyaka — La Quinzaine et Afrika Sika ont leur propre
   feuille, /assets/css/publications.css, qui reprend la charte de leurs
   éditions PDF. */
:root{--hk-accent:    var(--unis-orange);
  --hk-accent-dk: var(--action);   /* orange lisible en texte sur fond clair */
  --hk-on-dark:   #F9A47C;            /* orange éclairci : la teinte lisible sur --bg-dark */}
/* Manchette de la famille : le nom, les filets doubles, la promesse.
   Utilisée par le hub /kanyaka (.ka-head). */
.hk-mast{background:var(--nuit);color:#fff;
  padding-block:clamp(2.75rem,6vw,5rem);
  border-bottom:1px solid rgba(255,255,255,.12);
  box-shadow:inset 4px 0 0 var(--hk-accent);}
.hk-mast__rule{height:1px;background:rgba(255,255,255,.22);margin-block:1.35rem}
.hk-wordmark{font-family:var(--sans);font-weight:800;
  font-size:clamp(2.35rem,7vw,4.6rem);line-height:.98;
  letter-spacing:-.02em;text-transform:uppercase;color:#fff;margin:0;}
.hk-wordmark em{font-style:normal;color:var(--hk-on-dark)}
.hk-mast__lead{font-family:var(--serif);font-size:clamp(1.02rem,1.7vw,1.22rem);line-height:1.68;
  color:rgba(255,255,255,.82);margin:1.15rem 0 0;max-width:46rem;}
.hk-mast__meta{display:flex;flex-wrap:wrap;gap:.4rem 1.15rem;margin-top:1.6rem;
  font-family:var(--sans);font-size:.74rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(255,255,255,.6);}
/* ── 16 · ÉQUIPE ──────────────────────────────────────────────
   Les responsables d'UNIS. Une seule anatomie, répétée à
   l'identique : portrait, nom, fonction, présentation courte,
   « Voir le parcours ». Les biographies longues vivent sur les
   pages /equipe/<slug> — la rubrique reste légère.
   Ajouter un membre = une carte .team-card de plus et une copie
   d'un dossier de /public/equipe/ ; le design ne change pas. */
.team{display:grid;gap:clamp(1.5rem,3vw,2.25rem);
  grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;}
.team-card{display:flex;flex-direction:column;min-width:0;height:100%;
  background:var(--papier);border:1px solid var(--filet);
  border-radius:0;overflow:hidden;
  transition:border-color .16s ease;}
.team-card:hover{border-color:#CDBFA9}
/* Le cadre du portrait fait tout le travail d'harmonisation : un même
   ratio 4:5 et la même surface pour les trois, quelles que soient les
   dimensions du fichier d'origine. object-fit:cover recadre, il
   n'étire jamais ; object-position se règle portrait par portrait via
   --pos pour garder le visage, les épaules et le haut du corps dans
   le cadre. Le léger désaturé est celui des portraits du site : trois
   photographies prises dans des conditions différentes se lisent
   comme une même série. */
.team-card__ph{display:block;position:relative;overflow:hidden;
  aspect-ratio:4/5;background:var(--grege);
  border-bottom:1px solid var(--filet);}
.team-card__ph img{width:100%;height:100%;display:block;
  object-fit:cover;object-position:var(--pos,50% 25%);
  filter:grayscale(.15);}
/* Portrait non encore fourni : une composition typographique aux
   jetons de la marque, exactement au même format que les autres — on
   n'invente pas un visage et on ne déséquilibre pas la grille.
   Les trois responsables ont désormais leur photographie, donc aucune
   page n'utilise ces classes : elles restent la solution de repli
   documentée pour un membre ajouté avant que son portrait arrive.
   Voir la procédure « AJOUTER UN MEMBRE » dans /qui-sommes-nous. */
.team-card__ph--txt{display:grid;place-items:center;text-align:center;padding:1.25rem;
  background:linear-gradient(160deg,var(--grege) 0%,#EAF1E6 100%);}
.team-card__ini{font-family:var(--sans);font-size:clamp(2.6rem,6vw,3.7rem);font-weight:800;
  letter-spacing:-.04em;line-height:1;color:var(--rushwa);}
.team-card__wait{font-family:var(--sans);font-size:.62rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gris);
  margin-top:.85rem;}
.team-card__body{display:flex;flex-direction:column;flex:1 1 auto;gap:.45rem;
  padding:clamp(1.15rem,2vw,1.5rem);}
/* Hiérarchie : le nom affirmé, la fonction juste dessous et
   immédiatement identifiable mais secondaire, la présentation sobre. */
.team-card__n{font-family:var(--sans);font-size:clamp(1.15rem,1.7vw,1.38rem);font-weight:800;
  letter-spacing:-.025em;line-height:1.15;color:var(--encre);}
.team-card__r{font-family:var(--sans);font-size:.72rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--rushwa);}
.team-card__b{font-family:var(--serif);font-size:.94rem;line-height:1.62;
  color:var(--encre-douce);margin-top:.45rem;}
/* marge auto : les trois boutons s'alignent au même fond de carte,
   donc les trois cartes ont la même hauteur visuelle même si les
   présentations courtes n'ont pas exactement la même longueur. */
.team-card__foot{margin-top:auto;padding-top:1.3rem}
@media (max-width:1000px){
  .team{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  .team{grid-template-columns:minmax(0,1fr)}
}
/* ── Page d'un membre ─────────────────────────────────────── */
/* Grand portrait à gauche, parcours complet à droite. Le portrait
   suit la lecture sur grand écran, puis repasse au-dessus du texte. */
.bio{display:grid;gap:clamp(2rem,4vw,3.5rem);
  grid-template-columns:minmax(0,19rem) minmax(0,1fr);align-items:start;}
.bio__ph{position:sticky;top:calc(84px + 1.75rem)}
.bio__ph>img,.bio__ph>.bio__ph-txt{width:100%;aspect-ratio:4/5;
  border:1px solid var(--filet);border-radius:0;}
.bio__ph>img{display:block;object-fit:cover;object-position:var(--pos,50% 25%);filter:grayscale(.15)}
.bio__ph>.bio__ph-txt{display:grid;place-items:center;text-align:center;padding:1.5rem;
  background:linear-gradient(160deg,var(--grege) 0%,#EAF1E6 100%);}
.bio__cap{font-family:var(--sans);font-size:.72rem;line-height:1.55;
  color:var(--gris);margin-top:.85rem;}
@media (max-width:860px){
  .bio{grid-template-columns:minmax(0,1fr)}
  .bio__ph{position:static;max-width:20rem}
}
/* ── 17 · KANYAKA — LA MARQUE ÉDITORIALE ──────────────────────
   KANYAKA est la marque éditoriale d'UNIS : elle réunit Kanyaka — La
   Quinzaine (l'enquête sur la RDC toutes les deux semaines), Afrika
   Sika (son pendant panafricain) et KANYAKA-RUSHWA (le suivi des
   affaires dans la durée). Le hub n'introduit ni palette ni fonte : il
   reprend l'accent orange et la manchette de la section 15.

   La grille des produits est volontairement modulaire (auto-fit) :
   ajouter un produit — KANYAKA DATA, prévu plus tard — est une carte de
   plus dans .ka-grid, sans refonte de la page. */
.ka-head .hk-wordmark{font-size:clamp(2.6rem,9vw,5.8rem);letter-spacing:-.01em}
.ka-head__from{font-family:var(--sans);font-size:.74rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.62);}
/* Les produits. Une carte = un produit ; même anatomie pour tous, pour
   qu'aucun ne paraisse secondaire et qu'un nouveau s'insère tel quel. */
.ka-grid{display:grid;gap:clamp(1.5rem,3vw,2.5rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,21rem),1fr));
  align-items:stretch;}
.ka-card{display:flex;flex-direction:column;gap:.85rem;min-width:0;
  padding:clamp(1.4rem,2.6vw,2.15rem);
  background:var(--papier);border:1px solid var(--filet);
  border-radius:0;box-shadow:inset 0 3px 0 var(--hk-accent);}
.ka-card__k{font-family:var(--sans);font-size:.7rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gris);}
.ka-card__t{font-family:var(--sans);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.5rem,3.2vw,2.15rem);line-height:1;letter-spacing:-.02em;
  color:var(--encre);}
.ka-card__t a{color:var(--encre);text-decoration:none}
.ka-card__t a:hover{color:var(--hk-accent-dk)}
.ka-card__sig{font-family:var(--sans);font-size:.78rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--hk-accent-dk);}
.ka-card__d{font-family:var(--serif);font-size:1rem;line-height:1.7;color:var(--encre-douce)}
.ka-card__foot{margin-top:auto;padding-top:.6rem}
/* Un produit annoncé et pas encore publié se distingue au premier coup
   d'œil : fond sourd, pas d'accent, pas de bouton. Règle prête pour
   KANYAKA DATA — aucune carte ne l'utilise tant qu'il n'existe pas. */
.ka-card--soon{background:var(--grege);box-shadow:inset 0 3px 0 #CDBFA9}
.ka-card--soon .ka-card__t{color:var(--gris)}
/* Dernier numéro paru, dans la carte du produit. Rendu depuis les
   données : tant qu'aucune édition n'est publiée, le bloc annonce le
   numéro à paraître plutôt que d'afficher un cadre vide. */
.ka-last{padding:.9rem 1.05rem;background:var(--grege);
  border-left:2px solid var(--hk-accent);border-radius:0 0 0 0;}
.ka-last__k{display:block;font-family:var(--sans);font-size:.66rem;font-weight:800;
  letter-spacing:.18em;text-transform:uppercase;color:var(--hk-accent-dk);}
.ka-last__t{font-size:1rem;font-weight:700;line-height:1.3;letter-spacing:-.015em;margin-top:.4rem}
.ka-last__t a{color:var(--encre);text-decoration:none}
.ka-last__t a:hover{color:var(--hk-accent-dk)}
.ka-last__m{font-family:var(--sans);font-size:.74rem;color:var(--gris);margin-top:.35rem}
/* Même bloc pour le bulletin, rendu par contenus.js ([data-kr-latest]) :
   sa version d'origine vit sur fond sombre, celle-ci sur fond clair. */
.kr-last--light{gap:1rem;grid-template-columns:minmax(0,6.5rem) minmax(0,1fr);
  padding:.9rem 1.05rem;background:var(--grege);
  border:0;border-left:2px solid var(--hk-accent);
  border-radius:0 0 0 0;}
.kr-last--light .kr-last__k{color:var(--hk-accent-dk);font-weight:800}
.kr-last--light .kr-last__t{font-size:1rem;margin:.4rem 0 0}
.kr-last--light .kr-last__t a{color:var(--encre)}
.kr-last--light .kr-last__t a:hover{color:var(--hk-accent-dk)}
.kr-last--light .kr-last__d{display:none}
.kr-last--light .kr-last__meta{color:var(--gris);margin-top:.35rem}
.kr-last--light .kr-last__foot{margin-top:.7rem}
@media (max-width:520px){
  .kr-last--light{grid-template-columns:minmax(0,1fr)}
}
/* Hiérarchie de marque : UNIS → KANYAKA → les produits. Du texte et
   deux filets, pas un schéma illustré — et la rangée du bas est une
   grille, donc un troisième produit s'y ajoute sans rien déplacer. */
.ka-tree{display:grid;justify-items:center;text-align:center;gap:.65rem}
.ka-tree__n{font-family:var(--sans);font-weight:800;text-transform:uppercase;line-height:1}
.ka-tree__n--top{font-size:clamp(1.1rem,2.2vw,1.35rem);letter-spacing:.12em;color:var(--encre)}
.ka-tree__n--mid{font-size:clamp(1.7rem,4vw,2.6rem);letter-spacing:-.01em;color:var(--hk-accent-dk)}
.ka-tree__bar{display:block;width:1px;height:2rem;background:#CDBFA9}
.ka-tree__leaves{list-style:none;display:grid;gap:1px;width:100%;margin-top:.35rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));
  background:var(--filet);border:1px solid var(--filet);border-radius:0;
  overflow:hidden;}
.ka-tree__leaves li{background:var(--papier);padding:1.15rem 1rem;display:grid;gap:.3rem}
.ka-tree__l{font-family:var(--sans);font-size:.95rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--encre)}
.ka-tree__d{font-family:var(--serif);font-size:.9rem;line-height:1.55;color:var(--encre-douce)}
.ka-tree__note{font-family:var(--serif);font-size:1rem;line-height:1.7;color:var(--encre-douce);max-width:42rem;margin-top:1.75rem}
/* ---------- 18. Raccords des composants intérieurs ---------- */
/* Les anciens composants partaient d'une remise à zéro des marges et des
   listes : on la rétablit, sans spécificité, à l'intérieur de ces seuls
   composants pour ne pas toucher aux paragraphes des gabarits. */
:where(main) :where(ul[class], ol[class]) { margin: 0; padding: 0; }
:where(.sect__head, .card, .pub-card, .jx, .team-card, .kr-last, .kr, .ka-card, .ka-last, .ka-tree, .chiffre, .how__item,
  .timeline, .values, .ph, .edition, .result, .presse-card, .presse-bar, .encadre, .avertissement, .contact-note, .quote-card,
  .bio, .grid, .stack, .page-tete, .join, .newsletter, .hk-mast, .reco, .constats, .person, .logos, .contact-grid) p { margin: 0; }
.t-hero, .t-xl, .t-lg, .t-md, .sect-title, .card__title, .pub-card__title, .jx__title, .team-card__n, .kr-last__t,
.ka-card__t, .ka-last__t, .result__t, .presse-card__title, .how__t, .quote-card blockquote, .article h2, .article h3,
.encadre h3, .kr__word, .chiffre__n { font-family: var(--serif); letter-spacing: -.01em; }
.sect-title { font-size: clamp(32px, 4vw, 48px); }
.section__tete .sect-title { margin: 0; }
.lead { font-family: var(--sans); }
.section--nuit .lead, .section--nuit .small { color: var(--texte-nuit); }
.section--nuit a:not(.btn) { color: #fff; }
.meta { font-size: 13px; letter-spacing: .08em; }
.more { font-size: 14px; color: var(--lien); }
.btn--sm { min-height: 40px; padding: 0 16px; font-size: 14px; }
.btn--dark { border-color: var(--encre); }

/* En-tête des pages intérieures : dateline, fonction, signature */
.dateline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font: 600 14px/1.4 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--gris); margin-bottom: 16px; }
.dateline__cat { color: var(--rushwa); }
.dateline__cat--o { color: var(--action); }
.page-tete .page-head__role { color: var(--rushwa); }
.page-tete .page-head__byline { color: var(--gris); }
.page-tete .page-head__byline strong { color: var(--encre); }
.page-tete--kr { border-top: 6px solid var(--unis-vert); }
.page-tete .ariane span[aria-hidden] { margin: 0 6px; }
.page-tete .chapo a { color: var(--lien); }

/* Article : colonne de lecture et encarts latéraux (modèle article.html) */
.corps > aside { font-size: 15px; }
.encart ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.encart .share { display: grid; gap: 10px; border: 0; padding: 0; margin: 0; }
.encart .share a { font-size: 15px; }

/* Listes : cartes d'article rendues par contenus.js (modèle liste-actualites.html) */
.grille-liste > p.small { grid-column: 1 / -1; }
.article-carte .article-carte__tete { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 14px; color: var(--gris); }
.article-carte .article-carte__cat { font-weight: 600; color: var(--rushwa); }
.article-carte .article-carte__cat--o { color: var(--action); }
.article-carte .article-carte__plus { font-weight: 600; font-size: 15px; color: var(--lien); }
.article-carte img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin-bottom: 6px; }
.filtres button { padding: 10px 16px; border: 1px solid var(--filet); background: var(--papier); color: var(--encre); font: 500 15px/1.2 var(--sans); cursor: pointer; min-height: 44px; }
.filtres button:hover { border-color: var(--encre); }
.filtres button[aria-pressed="true"] { background: var(--encre); color: #fff; border-color: var(--encre); }
.une-liste .card--lg .card__title { font-size: clamp(28px, 3.4vw, 40px); }
.recherche-form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; max-width: 640px; }
.recherche-form input { flex: 1 1 260px; min-height: 52px; border: 1px solid var(--encre); padding: 0 16px; font: inherit; }

/* Formulaires : messages d'état (formulaires.js pose data-etat) */
.form__status { font-size: 15px; margin-top: 8px; }
.form__status[data-etat="ok"] { color: var(--etabli); }
.form__status[data-etat="echec"] { color: var(--action-fonce); }
.section--nuit .form__status { color: #fff !important; }
.section--nuit .form label { color: #fff; }
.form input, .form textarea { font: inherit; }

/* Contact : bloc pratique de la page d'accueil */
.contact-note { border-left: 4px solid var(--unis-bleu); }
.contact-dl dt { font-weight: 600; }

/* Kanyaka : le hub reste sur son identité de famille */
.hk-mast .hk-wordmark { font-family: var(--serif); }
/* Conteneur resserré (recherche) et rubrique sans filet (repères) */
.conteneur--etroit { max-width: 54rem; }
.rubrique--nue::before { display: none; }
/* Barre de navigation resserrée juste au-dessus du point de bascule : les
   libellés anglais (« Investigations & publications ») sont plus longs. */
@media (min-width: 1081px) and (max-width: 1320px) {
  .entete .conteneur { gap: 16px; }
  .nav-principale a { padding: 12px 8px; font-size: 15px; }
  .nav-principale .btn { margin-left: 6px; }
}

/* Bloc Contact de l'accueil : icônes des réseaux suivies de leur nom, couleur encre. */
.contact-reseaux { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.contact-reseaux a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; min-width: 44px; color: var(--encre); text-decoration: none; }
.contact-reseaux a:hover { text-decoration: underline; text-underline-offset: 3px; }
.contact-reseaux svg { width: 20px; height: 20px; flex: none; }

/* ---------- 19. Un site plus vivant (consigne du 28 septembre 2026) ---------- */
/* La une : la photo s'affiche entière, à son propre format — ni recadrée ni
   écrasée. Sur téléphone, elle passe en pleine largeur sous le titre. */
.une__visuel img { aspect-ratio: auto; height: auto; object-fit: contain; }
@media (max-width: 699px) {
  .une__principale > * { order: 3; }
  .une__principale > .rubrique { order: 0; }
  .une__principale > h1 { order: 1; }
  .une__principale > .une__visuel { order: 2; margin-inline: calc(-1 * var(--gout)); }
}
/* « Aussi à la une » : la dernière brève, sous la carte Afrika Sika */
.une__breve[hidden] { display: none; }
.etiquette-breve { display: inline-block; padding: 2px 8px; border: 1px solid currentColor; font: 700 12px/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
/* Kiosque : la phrase sur les niveaux de certitude, sous le titre */
.section__tete .section__sous-titre { margin-top: 14px; font-size: 17px; }
/* Actualités de l'accueil : trois cartes, chacune avec son image entière
   (les images d'actualité sont au format 16:9). */
.fil--images { gap: 36px; }
@media (scripting: none) { .fil--images noscript { display: contents; } }
.card--fil .card__media, .une-liste .card--lg .card__media { aspect-ratio: 16 / 9; }
/* Cartes de /actualites : la catégorie « Brève » et sa rubrique */
.article-carte .article-carte__cat--breve { color: var(--action-fonce); }
/* Page d'une brève : image de tête, sources, lien vers le dossier */
.article-tete-image { margin: 0 0 28px; }
.article-tete-image img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.article-tete-image figcaption { font-size: 14px; color: var(--gris); margin-top: 8px; }
.breve__sources { border-top: 1px solid var(--filet); margin-top: 32px; padding-top: 16px; font-size: 16px; }
.breve__sources h2 { font: 600 14px/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--gris); margin: 0 0 8px; }
.breve__sources ul { margin: 0; padding-left: 1.1em; }
.breve__suite { margin-top: 20px; }
.apercu-seulement { background: var(--grege); border-left: 4px solid var(--action); padding: 12px 16px; font-size: 15px; margin-bottom: 24px; }

/* ---------- 20. Photos d'actualité (reportages) ---------- */
/* Une photo de reportage (3:2) se montre entière : pas de recadrage 16:9. */
.article-tete-image--photo img { aspect-ratio: 3 / 2; }
.photo-article { margin: 2.25rem 0; }
.photo-article img { width: 100%; height: auto; }
.credit-photo { color: var(--gris); font-style: italic; }
.credit-photo--bloc { font-family: var(--sans); font-size: .8rem; margin-top: .5rem; }
/* Galerie : trois photos 800 px, en grille sur grand écran, empilées sur téléphone. */
.galerie { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin: 2rem 0 0; }
.galerie figure { margin: 0; }
.galerie img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
/* Photo verticale dans le texte : largeur limitée, pour ne pas occuper tout l'écran. */
.photo-article--portrait { max-width: 26rem; }
/* Galerie aux formats mêlés (paysage, portrait, carré) : chaque photo entière, sans recadrage. */
.galerie--entieres { align-items: start; }
.galerie--entieres img { aspect-ratio: auto; }
/* Texte intégral d'une intervention : <details> fermé par défaut, lisible sans JavaScript. */
.intervention { border-top: 2px solid var(--encre); border-bottom: 1px solid var(--filet); background: var(--grege); }
.intervention > summary { cursor: pointer; padding: 1rem 1.25rem; font: 700 1rem/1.4 var(--sans); color: var(--encre); }
.intervention > summary:focus-visible { outline: 3px solid var(--action); outline-offset: 2px; }
.intervention[open] > summary { border-bottom: 1px solid var(--filet); }
.intervention__texte { padding: .5rem 1.25rem 1.5rem; }
.intervention__texte > * + * { margin-top: 1.1rem; }
.intervention__texte h3 { margin-top: 1.25rem; }
.intervention__texte h4 { font: 700 1.05rem/1.35 var(--sans); margin-top: 1.9rem; }
.article .intervention__meta { font-family: var(--sans); font-size: .95rem; line-height: 1.6; }

/* ---------- 21. Cartes illustrées des listes (audit du 28 septembre 2026) ---------- */
/* Une carte de liste sans photo garde le cadrage 16:9 des autres (vignette typographique). */
.article-carte .card__media--txt { aspect-ratio: 16 / 9; margin-bottom: 6px; }
/* « À la une » de /actualites : les cartes secondaires montrent leur image, sans double filet. */
.une__side > .article-carte { padding: 0; border-top: 0; }
.une__side > .article-carte + .article-carte { padding-top: 1.5rem; border-top: 1px solid var(--filet); }
.une__side .article-carte h3 { font-size: 20px; }
.une__side .article-carte p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (scripting: none) { .grille-liste noscript { display: contents; } }

/* ---------- 22. Bande d'identité et Kanyaka Tracker de l'accueil (partie 7, 28 septembre 2026) ---------- */
/* Bande d'identité : fond grège, court filet tricolore en tête (celui de l'en-tête reste
   au-dessus, on ne le double pas). Hauteur visée : ≤ 160 px sur ordinateur, ≤ 220 px sur
   téléphone, pour que la photo de la une reste visible sans défiler. La phrase est un
   paragraphe en police de titre, pas un titre. */
.identite { background: var(--grege); border-bottom: 1px solid var(--filet); }
.identite .conteneur { display: grid; gap: 8px 40px; padding-block: 14px 16px; }
@media (min-width: 900px) { .identite .conteneur { padding-block: 20px 22px; } }
.identite__surtitre { margin: 0 0 6px; font: 600 12px/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--encre-douce); }
.identite__surtitre::before { content: ""; display: block; width: 72px; height: 4px; margin-bottom: 10px; background: linear-gradient(90deg, var(--unis-vert) 0 33.33%, var(--unis-bleu) 33.33% 66.66%, var(--unis-orange) 66.66% 100%); }
.identite__phrase { margin: 0; max-width: 62ch; font: 500 clamp(16px, 1.55vw, 20px)/1.4 var(--serif); color: var(--encre); }

/* Kanyaka Tracker : remplace l'ancien bandeau « Dossiers suivis ». Chiffres et dossiers
   sont rendus par contenus.js depuis la page des dossiers suivis. */
.tracker { background: var(--papier); border-top: 4px solid var(--kanyaka); border-bottom: 1px solid var(--filet); }
.tracker .conteneur { display: grid; gap: 20px 48px; padding-block: clamp(28px, 4vw, 44px); }
@media (min-width: 1000px) { .tracker .conteneur { grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); } }
.tracker__tete h2 { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.1; margin: 0; }
.tracker__accroche { margin: 8px 0 0; font: italic 500 18px/1.4 var(--serif); color: var(--encre-douce); }
.tracker__lien { margin: 14px 0 0; font-weight: 600; font-size: 15px; }
.tracker__chiffres { list-style: none; margin: 0 0 18px; padding: 0 0 16px; border-bottom: 1px solid var(--filet); display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: 15px; color: var(--encre-douce); }
.tracker__chiffres[hidden] { display: none; }
.tracker__chiffres b { display: block; font: 700 clamp(26px, 2.6vw, 34px)/1.1 var(--serif); color: var(--encre); }
.tracker__liste { display: grid; grid-template-columns: 1fr; }
@media (min-width: 760px) { .tracker__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tracker__item { padding: 14px 0; border-top: 1px solid var(--filet); display: grid; gap: 8px; align-content: start; }
.tracker__item:first-child { border-top: 0; }
@media (min-width: 760px) {
  .tracker__item { border-top: 0; border-left: 1px solid var(--filet); padding: 4px 20px; }
  .tracker__item:first-child { border-left: 0; padding-left: 0; }
}
.tracker__item b { font-size: 15px; line-height: 1.4; font-weight: 600; }
.tracker__item small { font-size: 13px; color: var(--gris); }
/* Ligne de garanties sous les boutons de téléchargement des rubriques et des numéros en ligne. */
.pub .pub-garanties { margin: 14px 0 0; font: 500 14px/1.5 var(--sans); color: var(--encre-douce); }
.ed-tete .pub-garanties { color: #D9D1C8; }

/* ---------- 23. Ergonomie (partie 8, audits d'utilisabilité du 28 septembre 2026) ---------- */
/* Bouton « Rejoindre UNIS » : la règle des liens du menu lui imposait l'encre (3,55:1) ; blanc sur orange, 5,21:1. */
.nav-principale .btn--action, .nav-principale .btn--action:hover { color: #fff; border-bottom-color: transparent; }

/* Barre du haut : la langue affichée en gras et soulignée, l'autre en retrait ; la page en cours soulignée. */
/* Sélecteur de langue : un drapeau par langue (nom accessible en .visuellement-cache).
   La langue active est pleine et soulignée, l'autre atténuée. */
.utilitaire .langues { display: inline-flex; align-items: center; gap: 10px; }
.utilitaire .langues > a[lang] { display: inline-flex; align-items: center; min-height: 40px; padding-bottom: 2px; border-bottom: 2px solid transparent; opacity: .55; }
.utilitaire .langues > a[lang]:hover { opacity: 1; }
.utilitaire .langues > a[lang][aria-current] { opacity: 1; border-bottom-color: #fff; }
.drapeau { display: block; width: 24px; height: 16px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .35); }
.utilitaire a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .25em; }
.utilitaire__recherche { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; }
.utilitaire__recherche svg { width: 16px; height: 16px; flex: none; }
/* Sur petit écran, la loupe seule reste visible ; le libellé demeure lu par les lecteurs d'écran. */
@media (max-width: 480px) {
  .utilitaire .conteneur { gap: 18px; }
  .utilitaire__recherche span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .utilitaire__recherche { min-width: 40px; justify-content: center; }
}

/* Formulaires : avertissement avant les champs, erreur sous chaque champ (posée par formulaires.js). */
.form__avertissement { margin: 0 0 16px; padding: 10px 14px; border-left: 4px solid var(--unis-orange); background: #FBEEE6; font: 600 15px/1.5 var(--sans); color: var(--encre); }
.form .form__avertissement { margin: 0; }
.section--nuit .form__avertissement { background: rgba(255,255,255,.08); color: #fff; }
.lettre fieldset, .lettre legend, .lettre label { font-family: var(--sans); }
.lettre input[type=checkbox] { accent-color: var(--unis-orange); }
.champ-erreur { margin: 6px 0 0; font: 600 15px/1.45 var(--sans); color: var(--erreur); }
.champ-erreur[hidden] { display: none; }
.section--nuit .champ-erreur, .pub-abonnement .champ-erreur { color: var(--erreur-clair); }
/* Le trait d'erreur passe par box-shadow, pour ne pas disputer le contour de focus. */
[aria-invalid="true"] { box-shadow: 0 0 0 3px var(--erreur); }
.form [aria-invalid="true"] { border-color: var(--erreur); }
.section--nuit [aria-invalid="true"], .pub-abonnement [aria-invalid="true"] { box-shadow: 0 0 0 3px var(--erreur-clair); }
fieldset[aria-invalid="true"] { padding: 10px 12px; }

/* Lien vers l'explication des statuts (accueil et dossiers suivis). */
.lien-statuts { font-size: 15px; font-weight: 600; }
.tracker__lien + .lien-statuts { margin: 8px 0 0; }

/* ---------- 24. Accueil allégé (1er octobre 2026) ---------- */
/* Le h1 de la page : le nom d'UNIS, dans la bande d'identité, sous le filet tricolore. */
.identite__titre { margin: 0 0 8px; font: 700 clamp(22px, 2.6vw, 32px)/1.15 var(--serif); letter-spacing: -.01em; color: var(--encre); }
.identite__titre::before { content: ""; display: block; width: 72px; height: 4px; margin-bottom: 12px; background: linear-gradient(90deg, var(--unis-vert) 0 33.33%, var(--unis-bleu) 33.33% 66.66%, var(--unis-orange) 66.66% 100%); }
.identite__titre + .identite__phrase { max-width: 78ch; }
/* La une : son titre est désormais un h2, au corps de l'ancien h1. */
.une .une__titre { font-size: clamp(30px, 5.2vw, 68px); overflow-wrap: break-word; line-height: 1.04; letter-spacing: -.02em; color: #fff; }
.une__kicker { display: block; margin-bottom: 10px; font: 600 14px/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--texte-nuit-doux); }
@media (max-width: 699px) { .une__principale > .une__titre { order: 1; } }
@media (max-width: 400px) { .une .une__titre { hyphens: auto; } }
/* Deux chiffres clés côte à côte, à droite de la une (dessous sur téléphone). */
.chiffres-cles { list-style: none; margin: 0; padding: 12px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.chiffres-cles p { margin: 0; }
.chiffre-cle__n { font: 700 clamp(64px, 7vw, 104px)/.9 var(--serif); letter-spacing: -.04em; color: #fff; }
.chiffres-cles .chiffre-cle__l { margin-top: 10px; font-size: 18px; line-height: 1.35; font-weight: 600; color: #fff; }
.chiffres-cles .chiffre-cle__src { margin-top: 8px; font-size: 14px; line-height: 1.45; color: var(--texte-nuit-doux); }
.chiffres-cles__liens { margin: 24px 0 0; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.14); font-size: 15px; line-height: 1.8; color: var(--texte-nuit-doux); }
.chiffres-cles__liens a { color: #fff; text-underline-offset: .15em; }
/* Lanceurs d'alerte : une bande au bleu UNIS, qui ne ressemble à aucune autre. */
.signalement { background: var(--unis-bleu); color: var(--encre); }
.signalement__bloc { display: grid; gap: 24px 48px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .signalement__bloc { grid-template-columns: minmax(0, 1.6fr) auto; align-items: center; } }
.signalement .rubrique { color: var(--encre); }
.signalement h2 { font-size: clamp(28px, 3.2vw, 40px); margin-bottom: 14px; color: var(--encre); }
.signalement__texte { max-width: 62ch; font-size: 18px; line-height: 1.55; color: var(--encre); margin: 0; }
@media (max-width: 600px) { .signalement .btn { width: 100%; } }
/* Comment nous travaillons : les trois étapes dans un encadré clair. */
.encadre-travail { background: var(--grege); border: 1px solid var(--filet); padding: clamp(24px, 4vw, 44px); }
.encadre-travail h2 { font-size: clamp(26px, 2.8vw, 34px); margin-bottom: 20px; }
.etapes--clair { gap: 0 32px; }
.etapes--clair li { padding: 20px 0; border-top: 2px solid var(--encre); }
.etapes--clair li::before { content: counter(etape) "."; font-size: 24px; color: var(--encre); }
.etapes--clair h3 { color: var(--encre); }
.etapes--clair p { font-size: 16px; line-height: 1.55; color: var(--encre-douce); }
/* Les liens qui nomment leur destination ne sont pas en capitales. */
.more--explicite { text-transform: none; letter-spacing: 0; font-size: 15px; line-height: 1.4; }
/* Suivez nos enquêtes : l'adhésion, en petit sous le formulaire. */
.lettre__adhesion { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.14); font-size: 14px; line-height: 1.5; color: var(--texte-nuit-doux); }
.lettre__adhesion a { color: #fff; font-weight: 600; }

/* ---------- 25. Documents à télécharger dans un article (10 octobre 2026) ----------
   Première utilisation : /actualites/note-plaidoyer-loi-anticorruption-rdc.
   Une carte par document — vignette de couverture, titre, format, bouton —,
   côte à côte sur ordinateur, l'une sous l'autre sur téléphone. Le même bloc
   sert dans l'encadré sous le chapeau et dans la section « Téléchargements ». */
.telechargements { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: 1.25rem; }
@media (min-width: 700px) { .telechargements { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.telechargement { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: start; padding: 16px; background: var(--papier); border: 1px solid var(--filet); }
.telechargement__vignette { width: 96px; height: auto; aspect-ratio: 600 / 849; object-fit: cover; border: 1px solid var(--filet); }
.telechargement__corps { display: grid; gap: 6px; justify-items: start; }
.article .telechargement__titre { margin: 0; font-family: var(--sans); font-size: 1rem; font-weight: 700; line-height: 1.35; color: var(--encre); }
.article .telechargement__format { margin: 0; font-family: var(--sans); font-size: 14px; line-height: 1.4; color: var(--texte-olive); }
.telechargement .btn { margin-top: 6px; min-height: 44px; padding-block: 8px; line-height: 1.3; text-align: left; white-space: normal; }
.article .telechargement .btn { color: #fff; text-decoration: none; }
.encadre--telechargements { margin-top: 0; }
/* Deux versions d'un même document (A4 à imprimer, mobile) : boutons côte à
   côte, l'un sous l'autre sur téléphone. */
.telechargement__boutons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.telechargement__boutons .btn { margin-top: 0; }
.article .telechargement .btn--contour { color: var(--encre); }
.article .telechargement .btn--contour:hover { color: #fff; }
@media (max-width: 600px) { .telechargement__boutons { flex-direction: column; align-items: stretch; } }
.encadre--telechargements .encadre__t { font-size: 1.05rem; letter-spacing: 0; text-transform: none; color: var(--encre); }
.pull__auteur { margin-top: .75rem; font-size: .95rem; font-weight: 400; letter-spacing: 0; color: var(--encre-douce); }
.contacts-presse { margin-top: 1.5rem; font-size: .96rem; line-height: 1.65; }

/* ---------- 26. Analyses & Décryptages (octobre 2026) ----------
   Rubrique /actualites/analyses-decryptages/ et ses analyses (gabarit :
   unis-refonte/modeles/analyse.html). Le reste vient des composants
   d'article existants : .article, .pull, .encadre, .tags, .share. */
.analyses-champs { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 40px; grid-template-columns: 1fr; border-top: 1px solid var(--filet); }
@media (min-width: 800px) { .analyses-champs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .analyses-champs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.analyses-champs li { padding: 16px 0; border-bottom: 1px solid var(--filet); font: 600 17px/1.4 var(--serif); color: var(--encre); }
a.dateline__cat { text-decoration: none; }
a.dateline__cat:hover { text-decoration: underline; }
.page-tete .page-head__byline span + span::before { content: "·"; margin-right: 1rem; }
.page-tete .page-head__byline { font-size: 15px; gap: .35rem 1rem; }
.analyse-couverture-attente { display: grid; place-items: center; aspect-ratio: 16 / 9; background: var(--grege); border: 1px dashed var(--filet); font: 600 15px/1.4 var(--sans); color: var(--texte-olive); }
/* Tableaux : défilement horizontal sur téléphone plutôt qu'une page élargie. */
.tableau { margin: 2.25rem 0; }
.tableau__defilant { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tableau table { width: 100%; min-width: 30rem; border-collapse: collapse; font: 400 15px/1.5 var(--sans); color: var(--encre); }
.tableau caption { text-align: left; font-weight: 700; font-size: 16px; padding-bottom: .6rem; }
.tableau th, .tableau td { padding: .6rem .75rem; border-bottom: 1px solid var(--filet); text-align: left; vertical-align: top; }
.tableau thead th { border-bottom: 2px solid var(--encre); font-weight: 700; }
.tableau tbody th { font-weight: 600; }
.tableau__defilant:focus-visible { outline: 2px solid var(--lien); outline-offset: 2px; }
/* Références et sources, en pied d'analyse. */
.sources { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--filet); }
.article .sources h2 { margin-top: 0; font-size: 1.2rem; }
.article .sources ol { list-style: decimal; padding-left: 1.4rem; gap: .5rem; }
.article .sources li { font: 400 15px/1.6 var(--sans); color: var(--encre-douce); }
.article .sources li:target { background: var(--grege); }
.article .appel-note { font-family: var(--sans); font-size: .75em; vertical-align: super; line-height: 0; text-decoration: none; }
.article .share a { color: var(--encre-douce); text-decoration: none; min-height: 44px; }