/* =========================================================================
   DIRECTION D : « LE QUOTIDIEN »
   -------------------------------------------------------------------------
   Construite sur des mesures relevees chez le Guardian, Jeune Afrique,
   Rest of World et Le Monde, pas sur une intuition :

   1. LES TITRES SONT PETITS. Aucune de ces redactions ne depasse 24 px sur une
      carte ; Le Monde s'arrete a 18. La modernite est dans la densite, pas
      dans l'echelle. Mes premieres propositions montaient a 48 px : c'etait
      une erreur de lecture du genre.

   2. TROIS ROLES TYPOGRAPHIQUES, pas deux. Un display employe avec retenue
      (Bodoni Moda, reservee au logotype et aux titres), une grotesque de labeur
      (Archivo) pour tous les autres titres, et surtout une MONO (IBM Plex Mono)
      qui prend en charge TOUTE la meta : heures, rubriques, compteurs. C'est
      la constante la plus nette du corpus etudie, et ce qui date le plus un
      site quand elle manque.

   3. LE FOND N'EST PAS BLANC. #F5F6F8 chez Le Monde, #F2F0ED a Jeune Afrique.
      Ici un gris papier legerement froid.

   4. PLUSIEURS REGISTRES SIMULTANES. Le fil, la une, les modules maison, puis
      les blocs de rubrique. Une grille uniforme ne sait dire qu'une chose.

   Couleur : vert profond pour la structure, ocre pour la meta, rouge signal
   reserve a la verification. Trois roles, trois couleurs, aucune decoration.
   ========================================================================= */

/* Bodoni Moda 900 porte le logotype ET les titres. Une seule Didone pour les
   deux evite une quatrieme police, et c'est le registre de presse de Semafor et
   du Monde. Employee uniquement au-dessus de 1,1 rem : les deliees d'une Didone
   ne survivent pas aux petits corps, ou Archivo prend le relais. */
@font-face { font-family:'Bodoni'; src:url('/assets/fonts/bodoni-900.woff2') format('woff2');
             font-weight:900; font-display:swap; }
@font-face { font-family:'Archivo'; src:url('/assets/fonts/archivo-600.woff2') format('woff2');
             font-weight:600; font-display:swap; }
/* Une seule graisse de mono et une seule d'Archivo : chaque fichier supprime
   est ~15 Ko que le premier visiteur ne telecharge pas. A 10-12 px en
   capitales, l'ecart entre 500 et 600 ne se voit pas. */
@font-face { font-family:'PlexMono'; src:url('/assets/fonts/plexmono-600.woff2') format('woff2');
             font-weight:600; font-display:swap; }

:root {
  --paper:  #f4f5f7;
  --card:   #ffffff;
  --ink:    #101215;
  --muted:  #626873;
  --rule:   #dcdfe4;
  --green:  #0b6e4f;   /* structure et marque */
  --ochre:  #b07a12;   /* meta : surtitres, heures, compteurs */
  --signal: #c8102e;   /* reserve a la verification et a l'urgent */

  --t0:#0b6e4f; --t1:#1d3f74; --t2:#8f3a1d; --t3:#4d3f7d; --t4:#0f5f6d; --t5:#6b5410;

  --disp: 'Bodoni', 'Didot', Georgia, serif;
  --sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'PlexMono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
  --body: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--body);
       font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased; }
img { max-width:100%; height:auto; display:block; }
a { color:inherit; }
.muted { color:var(--muted); }
.skip { position:absolute; left:-9999px; }
.skip:focus { left:1rem; top:1rem; background:var(--ink); color:#fff; padding:.6rem 1rem; z-index:20; }
:focus-visible { outline:2px solid var(--green); outline-offset:2px; }

.wrap { max-width:720px; margin:0 auto; padding:0 1.1rem; }
.wrap--wide { max-width:1240px; }

/* --- Surtitre mono : L'IDIOME du systeme --------------------------------- */
.eyebrow { font-family:var(--mono); font-weight:600; font-size:.68rem; letter-spacing:.09em;
           text-transform:uppercase; color:var(--ochre); text-decoration:none; display:inline-block; }
.eyebrow--strong { color:var(--signal); }
.eyebrow:hover { text-decoration:underline; }

/* --- Masthead ------------------------------------------------------------- */
.masthead { background:var(--card); border-bottom:1px solid var(--rule); }
.masthead__inner { display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap; padding:.9rem 1.1rem; }
.logo { font-family:var(--disp); font-weight:700; font-size:clamp(1.3rem,3vw,1.75rem);
        letter-spacing:-.015em; text-decoration:none; line-height:1; }
.nav { display:flex; gap:.95rem; flex-wrap:wrap; margin-left:auto; }
.nav a { font-family:var(--mono); font-weight:600; font-size:.7rem; letter-spacing:.06em;
         text-transform:uppercase; text-decoration:none; color:var(--muted); }
.nav a:hover { color:var(--green); }

/* =========================================================================
   LA UNE : trois registres cote a cote
   ========================================================================= */
.front { display:grid; grid-template-columns:1fr; gap:1.6rem; padding:1.5rem 0 0; }
@media (min-width:900px)  { .front { grid-template-columns:15rem 1fr; } .side { grid-column:1/-1; } }
@media (min-width:1180px) { .front { grid-template-columns:15rem 1fr 17rem; } .side { grid-column:auto; } }

/* --- Le fil --------------------------------------------------------------- */
.module__head { margin:0 0 .6rem; padding-bottom:.4rem; border-bottom:2px solid var(--ink); }
.module__label { font-family:var(--mono); font-weight:600; font-size:.72rem; letter-spacing:.1em;
                 text-transform:uppercase; }
.module__label--check { color:var(--signal); }
.module__note { font-size:.78rem; color:var(--muted); margin:.4rem 0 .7rem; }
.module__more { font-family:var(--mono); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase;
                color:var(--ochre); text-decoration:none; display:inline-block; margin-top:.7rem; }
.module__more:hover { text-decoration:underline; }

.fil__list { list-style:none; margin:0; padding:0; }
.fil__item { display:grid; grid-template-columns:3.4rem 1fr; gap:.6rem; padding:.5rem 0;
             border-bottom:1px solid var(--rule); align-items:baseline; }
/* L'heure en mono tabulaire : les colonnes s'alignent sans effort. */
.fil__time { font-family:var(--mono); font-weight:600; font-size:.7rem; color:var(--ochre);
             font-variant-numeric:tabular-nums; }
.fil__link { font-family:var(--sans); font-weight:600; font-size:.86rem; line-height:1.3; text-decoration:none; }
.fil__link:hover { color:var(--green); }

/* --- La une --------------------------------------------------------------- */
.une__lead { background:var(--card); padding:1.2rem 1.2rem 1.4rem; border-top:3px solid var(--tint,var(--green)); }
.une__title { font-family:var(--disp); font-weight:900; letter-spacing:-.02em; line-height:1.16;
              /* 34 px maximum : c'est l'echelle du Guardian, pas celle d'une affiche. */
              font-size:clamp(1.5rem,3.2vw,2.05rem); margin:.5rem 0 .9rem; }
.une__title a { text-decoration:none; }
.une__title a:hover { color:var(--green); }
.une__media { display:block; aspect-ratio:16/9; overflow:hidden; background:var(--rule); }
.une__media img { width:100%; height:100%; object-fit:cover; }
.une__lede { margin:.9rem 0 0; color:var(--muted); font-size:.95rem; max-width:60ch; }

.une__rest { display:grid; grid-template-columns:1fr; gap:1px; background:var(--rule); margin-top:1px; }
@media (min-width:620px) { .une__rest { grid-template-columns:repeat(2,1fr); } }

/* --- La carte compacte : l'unite de base --------------------------------- */
.mini { background:var(--card); padding:.85rem .95rem 1rem; display:flex; flex-direction:column; gap:.4rem; }
.mini__media { display:block; aspect-ratio:16/9; overflow:hidden; background:var(--rule); margin:-.85rem -.95rem .3rem; }
.mini__media img { width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.mini:hover .mini__media img { transform:scale(1.03); }
/* Titres a 15 px : la densite relevee chez Le Monde et Jeune Afrique. */
.mini__title { font-family:var(--sans); font-weight:600; font-size:.94rem; line-height:1.34;
               letter-spacing:-.005em; margin:0; }
.mini__title a { text-decoration:none; }
.mini__title a:hover { color:var(--green); }

/* --- Modules de droite ---------------------------------------------------- */
.side { display:grid; gap:1.6rem; align-content:start; }
@media (min-width:900px) and (max-width:1179px) { .side { grid-template-columns:1fr 1fr; } }
.module { background:var(--card); padding:1rem; }
.module .mini { padding:.7rem 0; border-bottom:1px solid var(--rule); background:none; }
.module .mini:last-child { border-bottom:0; padding-bottom:0; }
/* Le module de verification porte un filet rouge : c'est le seul endroit du
   site ou cette couleur apparait, ce qui la rend lisible comme un statut. */
.module--check { border-left:3px solid var(--signal); }

/* --- Blocs de rubrique ---------------------------------------------------- */
.block { margin-top:2.4rem; }
.block__head { display:flex; align-items:center; gap:.9rem; margin:0 0 .9rem;
               font-family:var(--disp); font-weight:900; font-size:1.15rem; letter-spacing:-.01em; }
.block__head > a { text-decoration:none; }
.block__head > a:hover { color:var(--green); }
.block__rule { flex:1; height:1px; background:var(--rule); }
.block__more { font-family:var(--mono); font-weight:600; font-size:.68rem; letter-spacing:.06em;
               text-transform:uppercase; color:var(--muted); text-decoration:none; white-space:nowrap; }
.block__grid { display:grid; grid-template-columns:1fr; gap:1px; background:var(--rule); }
@media (min-width:560px)  { .block__grid { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px) { .block__grid { grid-template-columns:repeat(4,1fr); } }

/* =========================================================================
   ARCHIVES ET ARTICLE
   ========================================================================= */
.archive__head { padding:1.7rem 0 .9rem; border-bottom:2px solid var(--ink); margin-bottom:1.3rem; }
.archive__title { font-family:var(--disp); font-weight:900; font-size:clamp(1.5rem,3.6vw,2.1rem);
                  line-height:1.18; letter-spacing:-.02em; margin:0; }
.archive__lede { color:var(--muted); max-width:58ch; margin:.5rem 0 0; font-size:.92rem; }

.grid { display:grid; grid-template-columns:1fr; gap:1px; background:var(--rule); }
@media (min-width:560px)  { .grid { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px) { .grid { grid-template-columns:repeat(3,1fr); } }

.card { background:var(--card); padding:.9rem 1rem 1.1rem; display:flex; flex-direction:column; gap:.45rem; }
.card__media { display:block; aspect-ratio:16/9; overflow:hidden; background:var(--rule);
               margin:-.9rem -1rem .35rem; }
.card__media img { width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.card:hover .card__media img { transform:scale(1.03); }
/* --- L'AFFICHE : encart des articles sans image -----------------------------
   2 973 articles n'ont pas de couverture, le fichier n'ayant jamais ete depose
   sur le serveur d'origine. Plutot qu'une image cassee, le bloc porte le TITRE
   en police d'affichage sur la couleur de la rubrique.
   Regle qui commande tout le reste : le titre n'est ecrit qu'ICI. La carte qui
   porte une affiche masque son propre titre, sinon il apparaissait deux fois
   de suite. Le corps suit la longueur du titre, en trois paliers poses par le
   serveur (data-l), parce qu'un corps fixe couperait les longs et perdrait les
   courts dans le vide. */
.affiche { display:grid; grid-template-rows:auto auto; align-content:space-between; gap:.6rem;
           min-height:11.4rem; padding:.85rem .95rem 1rem; text-decoration:none;
           background:var(--tint,var(--t0)); }
.affiche small { font-family:var(--mono); font-weight:600; font-size:.6rem; letter-spacing:.12em;
                 text-transform:uppercase; color:#ffffffc0; }
.affiche b { font-family:var(--disp); font-weight:900; color:#fff; align-self:end;
             font-size:1.3rem; line-height:1.08; letter-spacing:-.012em;
             display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden; }
.affiche[data-l="m"] b { font-size:1.1rem; -webkit-line-clamp:6; }
/* Au-dela de 72 signes, le corps descend pour laisser passer 130 signes
   entiers : c'est la borne mesuree sur le fonds. */
.affiche[data-l="l"] b { font-size:.86rem; line-height:1.2; -webkit-line-clamp:7; }
.affiche:hover b { text-decoration:underline; text-underline-offset:3px; }

.card--affiche > .affiche { margin:-.9rem -1rem .35rem; }
.mini--affiche > .affiche { margin:-.85rem -.95rem 0; min-height:9.6rem; }
.mini--affiche > .affiche b { font-size:1.06rem; }
.mini--affiche > .affiche[data-l="m"] b { font-size:.98rem; }
.mini--affiche > .affiche[data-l="l"] b { font-size:.84rem; }
.card__kicker { display:flex; align-items:baseline; gap:.55rem; margin:0; }
.card__kicker time { font-family:var(--mono); font-weight:600; font-size:.66rem; color:var(--muted);
                     letter-spacing:.04em; }
.chip { font-family:var(--mono); font-weight:600; font-size:.66rem; letter-spacing:.09em;
        text-transform:uppercase; color:var(--tint,var(--ochre)); text-decoration:none; }
.card__title { font-family:var(--sans); font-weight:600; font-size:.98rem; line-height:1.32; margin:0; }
.card__title a { text-decoration:none; }
.card__title a:hover { color:var(--green); }
.card__excerpt { margin:0; color:var(--muted); font-size:.85rem; line-height:1.45;
                 display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.pager { display:flex; align-items:center; gap:1rem; justify-content:center; padding:2rem 0 3rem; }
.pager__link { font-family:var(--mono); font-weight:600; font-size:.72rem; letter-spacing:.06em;
               text-transform:uppercase; text-decoration:none; border:1px solid var(--ink); padding:.5rem .9rem; }
.pager__link:hover { background:var(--ink); color:var(--paper); }
.pager__pos { font-family:var(--mono); font-size:.72rem; color:var(--muted); }

.crumbs { display:flex; gap:.45rem; padding:1.2rem 0 0; font-family:var(--mono); font-weight:600;
          font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.crumbs a { text-decoration:none; }
.crumbs a:hover { color:var(--green); }

.post__head { padding:.7rem 0 1.1rem; }
.post__title { font-family:var(--disp); font-weight:900; letter-spacing:-.024em; line-height:1.16;
               font-size:clamp(1.7rem,4.2vw,2.5rem); margin:0; }
.post__lede { font-size:1.05rem; color:var(--muted); margin:.8rem 0 0; max-width:58ch; }
.post__meta { font-family:var(--mono); font-size:.72rem; color:var(--muted); margin:1rem 0 0;
              padding-top:.8rem; border-top:1px solid var(--rule); letter-spacing:.03em; }
.post__meta a { color:var(--ink); text-decoration:none; border-bottom:1px solid var(--rule); }
/* « Mis a jour le » se detache legerement de la date de publication : c'est la
   plus recente des deux et donc celle qui repond a « est-ce a jour ? ». Sans
   contraste, elle se lit comme une seconde date sans savoir laquelle prime. */
.post__revu { color:var(--ink); }

/* --- Avis de correction ----------------------------------------------------- */
/* Il doit se DISTINGUER du texte sans crier. Un encadre gris qui se confond
   avec une citation le ferait rater ; du rouge vif en ferait un incident. Un
   filet et un fond neutre suffisent : ce qui attire l'oeil, c'est le mot
   « Correction » en gras au debut de la ligne. */
.corr { margin:2rem 0 0; padding:0; border:0; }
.corr__i { margin:0 0 .6rem; padding:.75rem .9rem; font-size:.88rem; line-height:1.55;
           background:var(--paper-2, #f6f3ee); border-left:3px solid var(--rule);
           border-radius:0 4px 4px 0; }
.corr__i b { font-weight:700; }
.corr__i time { font-family:var(--mono); font-size:.76rem; color:var(--muted);
                margin-left:.4rem; }
.corr__q { font-size:.76rem; color:var(--muted); margin-left:.4rem; }
.corr__t { display:block; margin-top:.3rem; }
/* Une correction est un aveu, une mise a jour n'en est pas un : la premiere
   porte l'ocre du signal editorial, la seconde reste neutre. Les confondre
   reviendrait a s'accuser chaque fois que les faits evoluent. */
.corr__i--correction { border-left-color:var(--ocre, #b8860b); }

/* Couverture bornee a 16/9.
   Sans contrainte, une image carree (les visuels WhatsApp du fonds le sont
   souvent : 1080x1080) occupait 690 px de haut dans une colonne de 720, soit
   tout l'ecran avant le premier mot. Aucun des quatre journaux etudies ne
   laisse une photo repousser le texte sous la ligne de flottaison. */
.post__cover { margin:0 0 1.5rem; }
.post__cover img { width:100%; aspect-ratio:16/9; object-fit:cover; background:var(--rule); }
.post__cover figcaption { font-family:var(--mono); font-size:.7rem; color:var(--muted); padding-top:.45rem; }

/* --- Bandeau de verification --------------------------------------------- */
/* Affiche uniquement sur les articles de la rubrique de fact-checking. Le
   rouge signal n'existe que la et dans le module de la une : il devient donc
   lisible comme un STATUT et non comme une decoration. */
.verdict { display:flex; align-items:baseline; gap:.7rem; margin:0 0 1.1rem;
           padding:.6rem .8rem; background:#fff; border-left:3px solid var(--signal); }
.verdict__label { font-family:var(--mono); font-weight:600; font-size:.66rem; letter-spacing:.1em;
                  text-transform:uppercase; color:var(--signal); white-space:nowrap; }
.verdict__text { font-size:.82rem; color:var(--muted); margin:0; }

/* --- Articles lies : meme carte que la une, pas un troisieme motif -------- */
.related__grid { display:grid; grid-template-columns:1fr; gap:1px; background:var(--rule); }
@media (min-width:560px)  { .related__grid { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px) { .related__grid { grid-template-columns:repeat(3,1fr); } }

.prose { max-width:66ch; font-size:1.05rem; line-height:1.72; }
.prose p { margin:0 0 1.1rem; }
.prose h2 { font-family:var(--disp); font-weight:900; font-size:1.4rem; line-height:1.26; margin:2.1rem 0 .6rem; letter-spacing:-.015em; }
.prose h3 { font-family:var(--sans); font-weight:600; font-size:1.1rem; margin:1.7rem 0 .45rem; }
.prose a { color:var(--green); text-underline-offset:2px; }
.prose img, .prose figure { margin:1.5rem 0; }
.prose figcaption { font-family:var(--mono); font-size:.7rem; color:var(--muted); padding-top:.4rem; }
.prose blockquote { margin:1.6rem 0; padding-left:1.05rem; border-left:3px solid var(--green);
                    font-family:var(--disp); font-weight:900; font-size:1.15rem; line-height:1.4; }
.prose ul, .prose ol { padding-left:1.15rem; margin:0 0 1.1rem; }
.prose li { margin:.3rem 0; }
.prose iframe { width:100%; aspect-ratio:16/9; height:auto; border:0; margin:1.5rem 0; }

/* --- Videos ----------------------------------------------------------------
   Le cadre porte le ratio et l'iframe le remplit : la place est reservee AVANT
   que la plateforme ne reponde, donc le texte ne saute pas sous le lecteur
   quand la video finit par se charger. Le fond sombre evite le rectangle blanc
   clignotant pendant l'attente. */
.prose .video { margin:1.6rem 0; }
.prose .video iframe { display:block; width:100%; margin:0; background:#0d0f12; border-radius:3px; }
/* SoundCloud n'a pas de ratio : son lecteur a une hauteur fixe. */
.prose .video--soundcloud iframe { aspect-ratio:auto; height:120px; background:none; }
/* Pas de style pour la plateforme non reconnue : elle ressort en lien ordinaire,
   l'assainisseur retirant sa classe comme toutes les autres. */
.prose table { width:100%; border-collapse:collapse; margin:1.4rem 0; font-size:.93rem; }
.prose th, .prose td { border-bottom:1px solid var(--rule); padding:.45rem .35rem; text-align:left; }

.tags { display:flex; flex-wrap:wrap; gap:.35rem; margin:2rem 0 0; padding-top:1.1rem; border-top:1px solid var(--rule); }
.tag { font-family:var(--mono); font-size:.68rem; text-decoration:none; color:var(--muted);
       background:var(--card); padding:.22rem .5rem; }
.tag:hover { color:var(--green); }

.share { display:flex; flex-wrap:wrap; align-items:center; gap:.8rem; margin:1.5rem 0 2.4rem; }
.share__label { font-family:var(--mono); font-weight:600; font-size:.66rem; letter-spacing:.1em;
                text-transform:uppercase; color:var(--muted); }
.share a { font-family:var(--mono); font-size:.72rem; text-decoration:none; border-bottom:1px solid var(--rule); }
.share a:hover { border-bottom-color:var(--green); }

.related { padding-top:1.9rem; margin-top:1rem; border-top:2px solid var(--ink); }
.related__title { font-family:var(--mono); font-weight:600; font-size:.72rem; letter-spacing:.1em;
                  text-transform:uppercase; margin:0 0 1.1rem; }

.foot { border-top:1px solid var(--rule); margin-top:3rem; padding:1.7rem 0 2.4rem;
        font-family:var(--mono); font-size:.72rem; color:var(--muted); }
.foot a { color:var(--green); }

.card, .mini, .une__lead { --tint:var(--t0); }
[style*="--t:1"] { --tint:var(--t1); } [style*="--t:2"] { --tint:var(--t2); }
[style*="--t:3"] { --tint:var(--t3); } [style*="--t:4"] { --tint:var(--t4); }
[style*="--t:5"] { --tint:var(--t5); }

.archive__head--home { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }

@media (prefers-reduced-motion:reduce) { * { transition:none !important; animation:none !important; } }

/* =========================================================================
   MOBILE : deux corrections issues de la mesure, pas de l'oeil
   ========================================================================= */
@media (max-width: 899px) {
  /* 1. ORDRE DES REGISTRES.
     En une seule colonne, l'ordre du DOM place « Le fil » avant la une : le
     lecteur qui arrive tombe sur 14 titres chronologiques avant de savoir ce
     que la redaction met en avant. Sur mobile la hierarchie editoriale passe
     donc devant, et le fil suit. L'ordre du DOM reste correct pour le clavier
     et les lecteurs d'ecran, seul l'affichage change. */
  .front { display:flex; flex-direction:column; }
  .une  { order:1; }
  .fil  { order:2; margin-top:.6rem; }
  .side { order:3; }

  /* 2. ZONES TACTILES.
     Mesure a 390 px : un lien du fil faisait 13,8 px de haut de texte pour
     ~18 px de hauteur cliquable, tres en dessous des 44 px recommandes. Sur un
     site lu majoritairement au pouce, c'est une source d'erreurs de clic. */
  .fil__link { font-size:.95rem; line-height:1.35; }
  .fil__item { padding:.7rem 0; min-height:2.75rem; align-items:center; }
  .fil__time { font-size:.72rem; }

  /* 3. PARTAGE.
     Mesure : 18 px de haut pour cinq liens cote a cote. WhatsApp est le
     principal canal de partage au Benin ; rater le bouton est un partage perdu.
     On passe en pastilles de 44 px, la cible tactile recommandee. */
  .share { gap:.5rem; }
  .share__label { flex-basis:100%; margin-bottom:.1rem; }
  .share a { display:inline-flex; align-items:center; min-height:44px; padding:0 .85rem;
             border:1px solid var(--rule); border-bottom-color:var(--rule); background:var(--card); }
  .share a:hover, .share a:focus-visible { border-color:var(--green); }

  /* Les etiquettes aussi : elles sont cliquables. */
  .tag { min-height:38px; display:inline-flex; align-items:center; padding:0 .6rem; }
}

/* --- Page auteur ---------------------------------------------------------- */
/* Un bandeau de signature, pas un titre de rubrique : sur un media, savoir qui
   ecrit est une information, et l'un des rares signaux de confiance que ce site
   peut gagner sans rien produire de neuf. */
.byline { background:var(--card); padding:1.5rem 1.4rem; margin:1.5rem 0 1.4rem;
          border-left:3px solid var(--green); }
.byline__name { font-family:var(--disp); font-weight:900; letter-spacing:-.02em; line-height:1.18;
                font-size:clamp(1.6rem,4vw,2.2rem); margin:.35rem 0 .4rem; }
.byline__count { font-family:var(--mono); font-weight:600; font-size:.72rem; letter-spacing:.05em;
                 color:var(--ochre); margin:0; }
.byline__bio { margin:.8rem 0 0; color:var(--muted); font-size:.95rem; max-width:62ch; }

/* INTERLIGNE ET CAPITALES ACCENTUEES
   Mesure : « À propos » en Bodoni 40 px produit des glyphes de 61 px dans une
   boite de 43, soit 9 px de debordement qui viennent percuter le fil d'Ariane.
   409 de tes titres (6 %) portent une capitale accentuee, dont 137 en premiere
   lettre. Sur un site francophone l'interligne doit donc laisser passer les
   accents : 1,08 etait un reglage pense pour de l'anglais. */

/* --- Le logotype -----------------------------------------------------------
   Le nom reste du TEXTE, jamais une image : selectionnable, lisible sans CSS,
   et net sur tout ecran. Le drapeau est un SVG en pourcentage, donc il epouse
   la largeur du mot a toute taille de police, sans reglage.

   Construction respectee : bande verte VERTICALE sur 2/5, jaune et rouge
   empiles sur les 3/5 restants. C'est ce qui fait lire « Benin » plutot que
   « trois couleurs ». */
.logo { display:inline-block; text-decoration:none; }
/* Le nom porte seul, sans descripteur : il peut donc prendre plus de place. */
.logo b { display:block; font-family:var(--disp); font-weight:900; line-height:.88;
          font-size:clamp(1.4rem,3.4vw,1.95rem); letter-spacing:.012em;
          text-transform:uppercase; white-space:nowrap; }
.logo .flag { display:block; width:100%; height:7px; margin-top:.3rem; }
@media (max-width:520px) { .logo .flag { height:6px; } }

/* --- Pied de page ---------------------------------------------------------- */
.foot__inner { display:flex; flex-wrap:wrap; gap:.6rem 1.6rem; align-items:baseline; justify-content:space-between; }
.foot__legal { margin:0; }
.foot__nav { display:flex; flex-wrap:wrap; gap:.4rem 1.1rem; }
.foot__nav a { text-decoration:none; }
.foot__nav a:hover { color:var(--green); text-decoration:underline; }
/* Le surlignage des informations que la redaction doit encore fournir. */
mark { background:#fff3cd; color:#7a5b00; padding:.05em .3em; font-family:var(--mono); font-size:.9em; }

/* --------------------------------------------------------------------------
   EMPLACEMENTS PUBLICITAIRES
   --------------------------------------------------------------------------
   LA PLACE EST RESERVEE AVANT LE CHARGEMENT. min-height porte la hauteur
   declaree de l'emplacement : sans elle, la publicite arrive apres le texte et
   le pousse vers le bas au moment ou le lecteur commence a lire. C'est la faute
   la plus repandue des sites d'information, et Google la sanctionne par le
   Cumulative Layout Shift.

   Sur mobile, la largeur ne peut pas etre imposee : un encart de 970 px sur un
   ecran de 360 px deborderait la page. On borne, et la hauteur reservee suit.
   -------------------------------------------------------------------------- */
.pub {
  display: block;
  margin: 2.2rem auto;
  max-width: min(100%, calc(var(--pub-l, 970) * 1px));
  text-align: center;
}
/* La reserve suit le RAPPORT DE FORME et non une hauteur fixe. Sur un ecran
   plus etroit que la banniere - c'est-a-dire sur tout telephone - une hauteur
   figee laissait un blanc sous l'image : 89 px mesures pour un 970x250 reduit
   a 546 px de large. aspect-ratio garde la reserve exacte a toute largeur. */
.pub__cadre {
  display: block;
  aspect-ratio: var(--pub-l, 970) / var(--pub-h, 250);
}
.pub__cadre > a, .pub__cadre > img, .pub__cadre > ins { display: block; height: 100%; }
.pub__cadre img { width: 100%; height: 100%; object-fit: contain; }
.pub__mention {
  display: block;
  font: 600 .62rem/1 ui-monospace, Consolas, monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted, #6b7280);
  margin-bottom: .4rem;
}
.pub ins { display: block; }

/* En colonne, l'encart suit la largeur disponible et non sa taille declaree. */
.side .pub { margin: 1.4rem 0; max-width: 100%; }

@media (max-width: 700px) {
  .pub { margin: 1.6rem auto; }
}

/* Le bloc des archives se distingue des rubriques d'actualite : meme grille,
   ton plus sourd, pour qu'on ne prenne pas un article de 2019 pour du jour. */
.block--relire .block__head { color: var(--muted, #6b7280); }

/* --------------------------------------------------------------------------
   CARTE DE DOCUMENT
   --------------------------------------------------------------------------
   Un PDF ne s'affiche pas, il se telecharge. La carte annonce le format et le
   POIDS avant le clic : le fonds contient des listes de 36 Mo, et laisser un
   lecteur au forfait mobile decouvrir cela apres avoir clique n'est pas
   acceptable. Zero JavaScript, comme le reste du site.
   -------------------------------------------------------------------------- */
.doc {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin: 1.6rem 0;
  padding: .85rem 1rem;
  border: 1px solid var(--rule, #dcdfe4);
  border-left: 4px solid var(--ocre, #b07a12);
  border-radius: 6px;
  background: var(--paper, #faf9f7);
  text-decoration: none;
  color: inherit;
}
.doc:hover { border-left-color: var(--vert, #0b6e4f); background: #fff; }
.doc__type {
  flex: 0 0 auto;
  font: 700 .7rem/1 ui-monospace, Consolas, monospace;
  letter-spacing: .06em;
  padding: .5rem .55rem;
  border-radius: 4px;
  background: var(--ocre, #b07a12);
  color: #fff;
}
.doc--pdf .doc__type { background: #c8102e; }
.doc--doc .doc__type, .doc--docx .doc__type { background: #1d3f74; }
.doc--xls .doc__type, .doc--xlsx .doc__type, .doc--csv .doc__type { background: #0b6e4f; }
.doc__corps { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
/* Les noms du fonds vont jusqu'a 110 caracteres : sans cette coupure, la carte
   deborde la colonne de lecture sur telephone. */
.doc__nom  { font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.doc__meta { font-size: .8rem; color: var(--muted, #6b7280); }

/* =========================================================================
   AIDES A LA LECTURE : « L'essentiel » et le sommaire
   -------------------------------------------------------------------------
   Deux encarts qui encadrent le texte sans lui voler la vedette. Ils
   reprennent la grammaire deja en place - surtitre en mono, filet gauche de
   3px, fond papier - pour que le lecteur les reconnaisse comme du mobilier du
   journal et non comme des blocs rapportes.

   AUCUNE COULEUR D'ACCENT ICI. Le vert porte la marque, l'ocre les meta, le
   rouge la verification et l'urgent. Un resume n'est aucun des trois : lui
   donner une couleur diluerait le seul endroit ou le rouge veut dire quelque
   chose. Le filet reste a l'encre.
   ========================================================================= */

/* « L'essentiel » : l'article en quatre puces, pour qui ne lira pas tout.
   Filet a l'encre pleine - c'est le seul encart de la page qui parle au nom de
   la redaction, il a droit au trait le plus franc. */
.essentiel { margin:0 0 1.8rem; padding:.9rem 1.1rem .9rem 1.15rem;
             background:var(--card); border-left:3px solid var(--ink);
             border-radius:0 4px 4px 0; }
.essentiel__label { font-family:var(--mono); font-weight:600; font-size:.68rem;
                    letter-spacing:.1em; text-transform:uppercase;
                    color:var(--muted); margin:0 0 .55rem; }
.essentiel ul { margin:0; padding-left:1.05rem; }
.essentiel li { margin:0 0 .4rem; line-height:1.5; font-size:.95rem; }
.essentiel li:last-child { margin-bottom:0; }

/* Sommaire : mecanique, discret, il annonce sans se faire remarquer. Filet
   plus clair que « L'essentiel » car il ne dit rien, il oriente. */
.toc { margin:0 0 1.8rem; padding:.8rem 1.1rem .8rem 1.15rem;
       background:var(--paper); border-left:3px solid var(--rule);
       border-radius:0 4px 4px 0; }
.toc__title { font-family:var(--mono); font-weight:600; font-size:.68rem;
              letter-spacing:.1em; text-transform:uppercase;
              color:var(--muted); margin:0 0 .5rem; }
.toc ol { margin:0; padding-left:1.15rem; }
.toc li { margin:0 0 .3rem; line-height:1.45; }
.toc li:last-child { margin-bottom:0; }
.toc a { color:var(--ink); text-decoration:none; font-size:.9rem;
         border-bottom:1px solid transparent; }
.toc a:hover { border-bottom-color:var(--ink); }

/* Lecteur d'ecoute. Meme grammaire que « L'essentiel » et le sommaire : filet
   gauche, surtitre en mono. Filet a l'ocre - la couleur des meta - parce que
   ce bloc ne porte pas d'information, il propose un autre chemin vers elle. */
.ecoute { margin:0 0 1.8rem; padding:.8rem 1.1rem .85rem 1.15rem;
          background:var(--card); border-left:3px solid var(--ochre);
          border-radius:0 4px 4px 0; }
.ecoute__label { font-family:var(--mono); font-weight:600; font-size:.68rem;
                 letter-spacing:.1em; text-transform:uppercase;
                 color:var(--muted); margin:0 0 .5rem; }
.ecoute__duree { color:var(--ochre); letter-spacing:.06em; }
.ecoute audio { width:100%; height:36px; display:block; }
.ecoute__note { font-size:.72rem; color:var(--muted); margin:.4rem 0 0; }

/* Bandeau de la version d'essai. Rouge signal ASSUME : c'est le seul cas où
   cette couleur ne désigne pas une information vérifiée mais un avertissement
   à celui qui travaille. Il ne paraît jamais sur le vrai site, donc il ne
   dispute rien au rouge éditorial. */
.preprod { margin:0; padding:.5rem 1rem; background:var(--signal); color:#fff;
           font-family:var(--mono); font-size:.74rem; letter-spacing:.04em;
           text-align:center; }
.preprod b { font-weight:700; margin-right:.5rem; text-transform:uppercase; }
.preprod a { color:#fff; text-decoration:underline; margin-left:.6rem; }

/* =========================================================================
   LA BARRE DU POUCE
   -------------------------------------------------------------------------
   Navigation de telephone, posee en BAS de l'ecran. Le raisonnement est dans
   app/views/layout.php ; ici la mise en forme.

   Elle emprunte au logotype sa seule signature : le drapeau. Le filet de 3 px
   qui la coiffe reprend la construction exacte de la marque - vert sur les deux
   cinquiemes, jaune et rouge empiles sur les trois cinquiemes restants - de
   sorte que cette barre appartienne visiblement a ce journal et non a
   n'importe quelle application. Deux degrades, aucune image, aucun octet de
   plus a telecharger.
   ========================================================================= */

/* PAS de scroll-behavior:smooth, et c'est un choix mesure.
   Il avait ete pose ici, puis retire : la page d'accueil fait 10 157 px et un
   article courant 5 157. Animer un retour de dix mille pixels n'apprend rien au
   lecteur - le defilement est trop rapide pour qu'on y lise quoi que ce soit -
   et coute une seconde de flou sur les telephones modestes qui font l'essentiel
   de l'audience. Quelqu'un qui appuie sur « Haut » demande a y etre, pas a voir
   le trajet. Le saut est instantane, comme l'appui sur la barre d'etat d'une
   application. Une regle en moins, et rien a prevoir pour prefers-reduced-motion. */

.pouce {
  display: flex;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  background: var(--card);
  /* La barre systeme d'iOS mange le bas de l'ecran : sans cette reserve, les
     libelles passent sous l'indicateur d'accueil. */
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-shadow: 0 -1px 12px rgba(16, 18, 21, .10);
}

/* Le filet du drapeau. Couche du dessus : le vert sur 40 % puis transparent,
   ce qui laisse voir la couche du dessous, jaune sur rouge, calee a droite. */
.pouce::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background:
    linear-gradient(to right, var(--green) 0 40%, transparent 40%),
    linear-gradient(to bottom, #f2c53d 0 50%, #c8102e 50% 100%);
  background-size: 100% 100%, 60% 100%;
  background-position: 0 0, 100% 0;
  background-repeat: no-repeat;
}

.pouce__item {
  flex: 1 1 0;
  display: flex; align-items: center; justify-content: center;
  /* 52 px : au-dessus des 44 px recommandes, sans manger la page. */
  min-height: 52px;
  font-family: var(--mono); font-weight: 600; font-size: .68rem;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
  border-left: 1px solid var(--rule);
  /* Le doigt reste pose une fraction de seconde : sans cela, aucun retour ne
     confirme que la cible a bien ete touchee. */
  -webkit-tap-highlight-color: transparent;
}
.pouce__item:first-child { border-left: 0; }
.pouce__item:active { background: var(--paper); color: var(--green); }
.pouce__item:focus-visible { outline: 2px solid var(--green); outline-offset: -3px; }

/* Le chevron dit une direction, ce qu'un mot seul rend mal. Dessine au bord,
   pas en SVG : deux traits suffisent. */
.pouce__item--haut::before {
  content: "";
  width: .42em; height: .42em;
  border-left: 2px solid currentColor; border-top: 2px solid currentColor;
  transform: rotate(45deg);
  margin-right: .5em; margin-top: .18em;
}

/* --- Le menu des rubriques, en <details> natif ----------------------------- */
.pouce__det { flex: 1 1 0; display: flex; }
.pouce__det > summary { flex: 1 1 0; list-style: none; cursor: pointer; }
.pouce__det > summary::-webkit-details-marker { display: none; }
.pouce__det[open] > summary { background: var(--paper); color: var(--green); }

.pouce__panneau {
  position: absolute; left: 0; right: 0; bottom: 100%;
  background: var(--card);
  border-top: 1px solid var(--rule);
  box-shadow: 0 -8px 24px rgba(16, 18, 21, .12);
  /* Huit rubriques tiennent dans un ecran ; au-dela le panneau defile plutot
     que de sortir par le haut. */
  max-height: 62vh; overflow-y: auto;
}
.pouce__panneau a {
  display: flex; align-items: center;
  min-height: 48px; padding: 0 1.1rem;
  font-family: var(--sans); font-weight: 600; font-size: .95rem;
  color: var(--ink); text-decoration: none;
  border-top: 1px solid var(--rule);
}
.pouce__panneau a:first-child { border-top: 0; }
.pouce__panneau a:active { background: var(--paper); color: var(--green); }

/* LE SEUIL DE LA NAVIGATION EST A 1000 px, ET IL DIFFERE DE CELUI DE LA GRILLE.
   Mesure : le bandeau reclame 993 px pour tenir sur UNE ligne - 191 px de
   logotype, 661 de rubriques, 39 de « Haut », plus les gouttieres. En dessous
   il se replie sur deux lignes et passe de 69 a 131 px, soit 16 % d'un ecran
   d'ordinateur portable, occupes en permanence puisqu'il est colle.
   La grille de la une bascule a 900 px pour d'autres raisons, qui lui
   appartiennent. Deux questions differentes, deux seuils differents. */
@media (min-width: 1000px) {
  .pouce { display: none; }
}

@media (max-width: 999px) {
  /* La barre du haut n'a plus a porter les rubriques : elles repliaient sur
     deux lignes de 17 px de haut. Le bandeau se reduit au titre du journal,
     ce qui rend 65 px de hauteur au contenu des la premiere impression. */
  .nav { display: none; }
  .masthead__inner { padding: .75rem 1.1rem; }

  /* La barre est fixe : sans cette reserve elle couvrirait la fin du pied de
     page, c'est-a-dire les mentions legales. */
  body { padding-bottom: calc(52px + env(safe-area-inset-bottom, 0px)); }
}

/* =========================================================================
   NAVIGATION SUR ORDINATEUR
   -------------------------------------------------------------------------
   Meme demarche que pour la barre du pouce : trois defauts mesures a 1440 px,
   pas trois idees.

     1. Le bandeau du titre etait en position:static. Il fait 69 px, donc passe
        la premiere hauteur d'ecran il n'existait plus aucun chemin vers
        l'accueil ni vers les rubriques. Un article courant fait 4,1 ecrans,
        une page de rubrique 3,4.
     2. Aucun retour en haut : la barre du pouce est masquee au-dela de 900 px.
     3. Sur /rubrique/societe/, le lien « Societe » etait rendu comme les sept
        autres. Le lecteur ne pouvait pas savoir ou il etait.

   Le bandeau devient donc la SEULE surface de navigation, et porte les trois
   memes taches que la barre du pouce : accueil, rubriques, haut de page.
   ========================================================================= */

.masthead {
  position: sticky; top: 0; z-index: 30;
}

/* Le bandeau passe au-dessus du contenu : sans fond opaque il laisserait voir
   les titres defiler dessous. */
.masthead { background: var(--card); }

/* Une ancre visee dans un article se retrouverait cachee sous le bandeau
   collant. La reserve vaut un peu plus que sa hauteur. */
:target { scroll-margin-top: 5.5rem; }

/* --- Les rubriques : zone de survol et repere de position ------------------ */
.nav a {
  /* 17 px de texte offraient une cible de 17 px. Le remplissage vertical porte
     la zone sensible a 38 px sans changer une seule mesure typographique. */
  padding: .65rem 0;
  border-bottom: 2px solid transparent;
  transition: color .12s, border-color .12s;
}
.nav a:hover { border-bottom-color: var(--rule); }
.nav a:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 2px; }

/* LA RUBRIQUE COURANTE porte le vert de la marque et le filet du drapeau, le
   meme motif que la barre du pouce. Ce n'est pas un ornement : c'est la seule
   chose sur la page qui reponde a « ou suis-je ». */
.nav a[aria-current="page"] {
  color: var(--green);
  border-bottom-color: var(--green);
}

/* --- Le retour en haut, sur ordinateur ------------------------------------- */
.haut-ordi {
  margin-left: 1.4rem;
  padding: .65rem 0;
  font-family: var(--mono); font-weight: 600; font-size: .7rem;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); text-decoration: none;
  display: inline-flex; align-items: center;
  border-bottom: 2px solid transparent;
}
.haut-ordi::before {
  content: "";
  width: .4em; height: .4em;
  border-left: 2px solid currentColor; border-top: 2px solid currentColor;
  transform: rotate(45deg);
  margin-right: .45em; margin-top: .16em;
}
.haut-ordi:hover { color: var(--green); border-bottom-color: var(--rule); }
.haut-ordi:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

@media (max-width: 999px) {
  /* La barre du pouce porte deja « Haut ». */
  .haut-ordi { display: none; }
  /* Le bandeau reste immobile en dessous du seuil : 55 px de hauteur d'ecran
     valent plus qu'une navigation collante redondante avec la barre du bas. */
  .masthead { position: static; }
}