:root{
/* Papier et encre. Le fond n'est pas blanc : un blanc pur sous du texte serif
   fatigue, et le grain chaud rapproche l'écran du document imprimé, qui est la
   forme sous laquelle ces fiches finiront souvent leur vie. */
--papier:#fbf9f5;--papier-creux:#f2eee6;--encre:#14171c;--doux:#5b626e;
--trait:#e2dccf;--trait-fort:#cdc4b2;
--accent:#1c4a40;--accent-vif:#2b6d5d;--accent-voile:#e9f0ed;
--brique:#8c3223;--brique-voile:#f9ebe8;
--ocre:#7d6216;--ocre-voile:#faf3e0;
/* Les deux fonds sombres : la bande d'identité et le pied. Ils donnent au site
   ses deux bornes, en haut et en bas, et c'est tout ce qu'ils font. */
--sombre:#12211d;--sombre-creux:#1a2d28;
--sur-sombre:#eef3f1;--sur-sombre-doux:#9db2ab;--sur-sombre-trait:#2c433c;
--serif:Georgia,"Iowan Old Style","Palatino Linotype","Book Antiqua","Times New Roman",serif;
--sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
--chiffre:ui-monospace,"SF Mono","Cascadia Mono","Segoe UI Mono",Consolas,monospace;
--mesure:70rem;--lecture:40rem}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
--papier:#121418;--papier-creux:#1a1d22;--encre:#e9e6e0;--doux:#9aa0ab;
--trait:#2b2f36;--trait-fort:#3c414a;
--accent:#7bb9a7;--accent-vif:#96cebd;--accent-voile:#182521;
--brique:#e0917f;--brique-voile:#271a17;
--ocre:#d4b464;--ocre-voile:#241f13;
--sombre:#0b0d10;--sombre-creux:#161a1f;
--sur-sombre:#e9e6e0;--sur-sombre-doux:#8f96a1;--sur-sombre-trait:#272c33}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papier);color:var(--encre);
font:400 17px/1.65 var(--serif);text-rendering:optimizeLegibility;
/* La bande d'accueil déborde de la mesure par marges négatives calculées sur
   la largeur de fenêtre. Celle-ci inclut la barre de défilement : le débord
   dépasse donc de quelques pixels, qui sont coupés ici plutôt que d'ajouter
   un défilement horizontal à toute la page. */
overflow-x:hidden}
a{color:var(--accent);text-underline-offset:2px;text-decoration-thickness:1px}
a:hover{color:var(--accent-vif)}

/* ---- le sceau -------------------------------------------------------------
   Un globe, son méridien et deux parallèles, tracés à même la page en SVG
   plutôt que chargés comme une image : rien à télécharger, rien à mettre en
   cache, et la marque suit la couleur du texte, donc le thème sombre et
   l'impression, sans qu'aucune variante soit à produire. */
.sceau{width:1.5em;height:1.5em;flex:none;fill:none;stroke:currentColor;
stroke-width:1.2;vertical-align:-.32em}

/* ---- en-tête ------------------------------------------------------------ */
header.site{background:var(--sombre);color:var(--sur-sombre);
padding:0 24px;font-family:var(--sans)}
header.site > *{max-width:var(--mesure);margin:0 auto}
header.site .rang{display:flex;gap:22px;align-items:center;flex-wrap:wrap;
padding:14px 0;min-height:60px}
header.site .marque{display:flex;gap:11px;align-items:center;
text-decoration:none;color:var(--sur-sombre);line-height:1.15}
header.site .marque .court{font-family:var(--serif);font-size:19px;
font-weight:700;letter-spacing:-.012em;display:block}
header.site nav{display:flex;gap:20px;margin-left:auto}
header.site nav a{color:var(--sur-sombre-doux);text-decoration:none;
font-size:13.5px;letter-spacing:.02em;padding:4px 0;
border-bottom:2px solid transparent}
header.site nav a:hover{color:var(--sur-sombre);border-bottom-color:var(--sur-sombre-doux)}
header.site .langues{font-size:12px;display:flex;gap:3px;align-items:center}
header.site .langues a{color:var(--sur-sombre-doux);text-decoration:none;
padding:3px 9px;border:1px solid var(--sur-sombre-trait);border-radius:2px}
header.site .langues a:hover{color:var(--sur-sombre);border-color:var(--sur-sombre-doux)}
header.site .langues a[aria-current]{color:var(--sombre);font-weight:700;
background:var(--sur-sombre);border-color:var(--sur-sombre)}

/* La mesure de lecture borne le TEXTE, jamais la mise en page : une grille de
   27 juridictions enfermée dans 40rem devient une colonne interminable, alors
   qu'une phrase qui court sur 70rem ne se lit plus. Les deux contraintes sont
   distinctes, et elles doivent le rester. */
main{padding:34px 24px 64px;max-width:var(--mesure);margin:0 auto}
.chapeau,.statut p,.statut .attestation,.vide,.une .mission{max-width:var(--lecture)}
h1{max-width:30ch}
dl.champs,.source{max-width:54rem}
ul.liste{max-width:58rem}

/* ---- fil d'Ariane ------------------------------------------------------- */
.fil{font-family:var(--sans);font-size:13px;color:var(--doux);margin:0 0 20px;
display:flex;gap:7px;flex-wrap:wrap;align-items:baseline}
.fil a{color:var(--doux);text-decoration:none}
.fil a:hover{color:var(--accent);text-decoration:underline}
.fil span[aria-hidden]{color:var(--trait-fort)}

/* ---- titres ------------------------------------------------------------- */
h1{font-size:33px;line-height:1.22;margin:0 0 10px;font-weight:700;
letter-spacing:-.014em}
h2{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.11em;
text-transform:uppercase;color:var(--doux);margin:46px 0 16px;
padding-bottom:8px;border-bottom:1px solid var(--trait);
display:flex;align-items:baseline;gap:10px}
h3{font-size:19px;margin:30px 0 8px;font-weight:700}
.chapeau{color:var(--doux);margin:0 0 26px;font-size:16px;font-style:italic}
.surtitre{font-family:var(--sans);font-size:11.5px;font-weight:700;
letter-spacing:.11em;text-transform:uppercase;color:var(--accent);margin:0 0 11px}

/* ---- la une ---------------------------------------------------------------
   L'accueil n'est pas une page comme les autres : c'est la seule qui ait à
   dire ce qu'est ce site et pourquoi on devrait le croire. Elle s'ouvre donc
   sur une bande pleine largeur, seul endroit du site où la mise en page prend
   la parole avant le contenu. */
.une{background:var(--sombre);color:var(--sur-sombre);
margin:-34px calc(50% - 50vw) 34px;padding:52px 24px 44px}
.une .dedans{max-width:var(--mesure);margin:0 auto}
.une .sceau{width:44px;height:44px;stroke-width:1;color:var(--sur-sombre-doux);
display:block;margin-bottom:22px}
.une h1{font-size:42px;line-height:1.12;letter-spacing:-.022em;max-width:20ch;
color:var(--sur-sombre);margin:0}
.une .mission{font-size:18px;line-height:1.6;color:var(--sur-sombre-doux);
margin:18px 0 0}
.une .mission b{color:var(--sur-sombre);font-weight:400}

/* ---- chiffres ------------------------------------------------------------ */
.chiffres{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));
gap:1px;margin:34px 0 0;background:var(--sur-sombre-trait);
border:1px solid var(--sur-sombre-trait)}
.chiffres div{background:var(--sombre);padding:17px 19px}
.chiffres b{display:block;font-family:var(--chiffre);font-size:30px;
font-weight:600;line-height:1.1;color:var(--sur-sombre);letter-spacing:-.025em}
.chiffres span{display:block;font-family:var(--sans);font-size:11.5px;
color:var(--sur-sombre-doux);margin-top:7px;letter-spacing:.05em}
/* Hors de la une — état des portails — les mêmes pastilles sur papier clair. */
main > .chiffres{background:var(--trait);border-color:var(--trait);margin:20px 0}
main > .chiffres div{background:var(--papier-creux)}
main > .chiffres b{color:var(--accent)}
main > .chiffres span{color:var(--doux)}

/* ---- statut : le bloc qui porte la réserve ------------------------------- */
.statut{margin:28px 0 32px;padding:17px 21px;border:1px solid var(--trait);
border-left:4px solid var(--doux);background:var(--papier-creux);border-radius:2px}
.statut .etiquette{display:inline-block;font-family:var(--sans);font-size:11px;
font-weight:700;letter-spacing:.1em;text-transform:uppercase;
padding:3px 9px;border-radius:2px;margin-bottom:9px;
background:var(--doux);color:var(--papier)}
.statut p{margin:0;font-size:16px;line-height:1.6}
.statut .attestation{margin-top:10px;font-size:14px;color:var(--doux);
font-family:var(--sans)}
.statut.terminal{border-left-color:var(--brique);background:var(--brique-voile)}
.statut.terminal .etiquette{background:var(--brique)}
.statut.indetermine{border-left-color:var(--ocre);background:var(--ocre-voile)}
.statut.indetermine .etiquette{background:var(--ocre)}
.statut.altere{border-left-color:var(--accent);background:var(--accent-voile)}
.statut.altere .etiquette{background:var(--accent)}

/* ---- champs -------------------------------------------------------------- */
dl.champs{display:grid;grid-template-columns:13rem 1fr;gap:0;margin:0;
border-top:1px solid var(--trait);font-size:16px}
dl.champs dt{font-family:var(--sans);font-size:12px;font-weight:600;
letter-spacing:.07em;text-transform:uppercase;color:var(--doux);
padding:12px 18px 12px 0;border-bottom:1px solid var(--trait)}
dl.champs dd{margin:0;padding:12px 0;border-bottom:1px solid var(--trait);
overflow-wrap:anywhere}
dl.champs dd.numero{font-family:var(--chiffre);font-size:15px}

/* ---- listes -------------------------------------------------------------- */
ul.liste{list-style:none;padding:0;margin:0}
ul.liste li{padding:14px 0;border-bottom:1px solid var(--trait)}
ul.liste li:last-child{border-bottom:none}
ul.liste a{text-decoration:none;font-weight:600}
ul.liste a:hover{text-decoration:underline}
ul.liste .meta{display:block;font-family:var(--sans);font-size:13px;
color:var(--doux);margin-top:4px;letter-spacing:.01em}
.vide{color:var(--doux);font-style:italic;margin:10px 0;font-size:15px}

/* ---- tableau : état des portails ------------------------------------------
   Un tableau large sur un téléphone déborde ou devient illisible. Il défile
   horizontalement dans son propre cadre plutôt que d'élargir la page entière,
   et chaque cellule garde une largeur minimale qui préserve la lecture. */
.tableau{width:100%;border-collapse:collapse;margin:16px 0;
font-family:var(--sans);font-size:14px;display:block;overflow-x:auto;
white-space:normal}
.tableau th,.tableau td{text-align:left;vertical-align:top;padding:11px 16px 11px 0;
border-bottom:1px solid var(--trait);min-width:7rem}
.tableau th{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
color:var(--doux);font-weight:700;border-bottom:1px solid var(--trait-fort)}
.tableau tbody tr:hover td{background:var(--papier-creux)}
.tableau td:first-child{font-weight:600;min-width:11rem}
.tableau td.numero{font-family:var(--chiffre);text-align:right;min-width:4rem}
.tableau td:last-child{word-break:break-all;font-size:13px}
.tableau .sobre{color:var(--doux);font-style:italic}
.avertissement{max-width:var(--lecture);font-size:15px;color:var(--doux);
border-left:2px solid var(--trait-fort);padding-left:16px;margin:26px 0 0}

/* ---- zones : l'accueil groupe les 27 juridictions --------------------------
   Vingt-sept cartes à la file sont un mur. Groupées par zone d'intégration —
   UEMOA, CEMAC, Maghreb, Océan Indien — elles deviennent une carte du terrain,
   et le lecteur qui cherche l'Afrique de l'Ouest n'a plus à lire les autres. */
.zone{margin:0 0 30px}
.zone > h3{font-family:var(--sans);font-size:12px;font-weight:700;
letter-spacing:.1em;text-transform:uppercase;color:var(--doux);
margin:0 0 12px;display:flex;align-items:baseline;gap:9px}
.zone > h3 .combien{font-family:var(--chiffre);font-size:12px;
letter-spacing:0;color:var(--trait-fort);text-transform:none}

/* ---- grilles de navigation ----------------------------------------------- */
.grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));
gap:10px;margin:4px 0}
.grille a,.grille .carte-sans-page{display:block;padding:15px 17px;
border:1px solid var(--trait);border-radius:3px;text-decoration:none;
color:var(--encre);font-weight:600;font-size:16px;line-height:1.35;
background:var(--papier)}
.grille a:hover{border-color:var(--accent);background:var(--accent-voile)}
.grille .carte-sans-page{border-style:dashed;color:var(--doux);font-weight:400}
.grille .compte{display:block;font-family:var(--sans);font-size:11.5px;
font-weight:400;color:var(--doux);margin-top:6px;letter-spacing:.05em}

/* ---- source officielle ---------------------------------------------------- */
.source{border:1px solid var(--trait);border-radius:3px;padding:15px 19px;
background:var(--papier-creux)}
.source a{font-weight:600;text-decoration:none;font-family:var(--sans);
font-size:15px}
.source a:hover{text-decoration:underline}
.source .adresse{display:block;font-family:var(--chiffre);font-size:12px;
color:var(--doux);margin-top:7px;overflow-wrap:anywhere}
.source .constat{display:block;font-family:var(--sans);font-size:13px;
color:var(--doux);margin-top:11px;padding-top:11px;
border-top:1px solid var(--trait)}

/* ---- pied -----------------------------------------------------------------
   Le pied reprend l'identité et porte la méthode. C'est là, et pas ailleurs,
   qu'un lecteur venu d'un moteur vérifie à qui il a affaire. */
footer{background:var(--sombre);color:var(--sur-sombre-doux);
margin-top:64px;padding:40px 24px 34px;font-family:var(--sans);
font-size:13px;line-height:1.65}
footer .dedans{max-width:var(--mesure);margin:0 auto;display:grid;
grid-template-columns:minmax(16rem,22rem) 1fr;gap:34px 44px}
footer .identite .marque{display:flex;gap:10px;align-items:center;
color:var(--sur-sombre);font-family:var(--serif);font-size:16px;
font-weight:700;line-height:1.3;margin-bottom:12px}
footer .identite .editeur{color:var(--sur-sombre);font-weight:600;margin:0 0 4px}
footer .identite .arrete{margin:0}
footer .propos p{margin:0 0 10px}
footer .propos p:last-child{margin-bottom:0}
footer nav.pied{grid-column:1/-1;border-top:1px solid var(--sur-sombre-trait);
padding-top:18px;display:flex;flex-wrap:wrap;gap:8px 22px}
footer nav.pied a{color:var(--sur-sombre-doux);text-decoration:none}
footer nav.pied a:hover{color:var(--sur-sombre);text-decoration:underline}

/* ---- accès clavier ---------------------------------------------------------
   Le lien d'évitement est hors écran tant qu'il n'a pas le focus. Il n'est pas
   masqué par display:none, qui le retirerait aussi de l'ordre de tabulation et
   le rendrait donc inatteignable — ce qui annulerait son objet. */
.evitement{position:absolute;left:-9999px;top:0;z-index:10;
background:var(--accent);color:var(--papier);padding:10px 16px;
font-family:var(--sans);font-size:14px;text-decoration:none;border-radius:0 0 3px 0}
.evitement:focus{left:0}
a:focus-visible,.grille a:focus-visible{outline:2px solid var(--accent-vif);
outline-offset:2px}

/* Texte destiné aux seuls lecteurs d'écran. */
.pour-lecteur{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- pages de texte suivi (à propos, mentions, introuvable) ---------------- */
.suivi{max-width:var(--lecture)}
.suivi h2{margin-top:36px}
.suivi p{margin:0 0 15px}
.suivi ul{padding-left:20px}
.suivi li{margin-bottom:7px}

@media (max-width:760px){
footer .dedans{grid-template-columns:1fr;gap:26px}
}
@media (max-width:640px){
body{font-size:16px}
main{padding:24px 18px 44px}
h1{font-size:27px}
.une{margin:-24px calc(50% - 50vw) 26px;padding:38px 18px 32px}
.une h1{font-size:31px}
.une .mission{font-size:16.5px}
.une .sceau{width:36px;height:36px;margin-bottom:18px}
.chiffres{margin-top:26px}
dl.champs{grid-template-columns:1fr}
dl.champs dt{padding-bottom:0;border-bottom:none}
dl.champs dd{padding-top:4px}
header.site{padding:0 18px}
header.site .rang{gap:14px;padding:12px 0}
header.site nav{gap:16px;margin-left:0;order:3;width:100%;
border-top:1px solid var(--sur-sombre-trait);padding-top:10px}
header.site .langues{margin-left:auto}
footer{padding:32px 18px 28px}
}

/* ---- impression -------------------------------------------------------------
   Ce lecteur imprime, ou produit un PDF pour l'annexer à une note. Il doit
   obtenir un document : sans navigation, sans sélecteur de langue, et avec
   l'adresse de la source en toutes lettres plutôt qu'un lien mort sur papier.
   Les deux bandes sombres redeviennent du papier : elles coûteraient une
   cartouche d'encre et ne portent aucune information que le texte ne porte. */
@media print{
:root{--papier:#fff;--papier-creux:#fff;--encre:#000;--doux:#444;--trait:#bbb;
--trait-fort:#888;--sombre:#fff;--sombre-creux:#fff;--sur-sombre:#000;
--sur-sombre-doux:#444;--sur-sombre-trait:#bbb}
body{font-size:11pt}
header.site nav,header.site .langues,.fil{display:none}
header.site{border-bottom:1pt solid #000;padding:0;margin-bottom:14pt}
header.site .rang{padding:0 0 8pt;min-height:0}
header.site .marque .long{color:#000}
main{max-width:none;padding:0}
.une{background:none;color:#000;margin:0 0 18pt;padding:0 0 10pt;
border-bottom:1pt solid #000}
.une h1{font-size:22pt;color:#000}
.une .mission,.une .mission b{color:#000}
.une .sceau{color:#000;width:30pt;height:30pt}
h1{font-size:18pt}
h2{margin-top:18pt}
a{color:#000;text-decoration:none}
.statut{border:1px solid #000;border-left-width:3pt;background:none}
.statut .etiquette{background:none;color:#000;border:1px solid #000}
.source a::after{content:" — " attr(href);font-family:var(--chiffre);
font-size:9pt;word-break:break-all}
.source .adresse{display:none}
.chiffres,.chiffres div,main > .chiffres,main > .chiffres div{background:none;
border-color:#888}
.chiffres b,main > .chiffres b{color:#000}
.grille,.chiffres,.zone{break-inside:avoid}
.grille a{background:none}
ul.liste li{break-inside:avoid}
.tableau{display:table}
.tableau tbody tr:hover td{background:none}
footer{background:none;color:#000;border-top:1pt solid #000;margin-top:20pt;
padding:12pt 0 0}
footer .dedans{display:block}
footer nav.pied,.evitement{display:none}
}