/* pro.css : retouches de presentation (septembre 2026).
   Feuille separee : index.html n'y fait qu'un renvoi, et les pages de
   donnees en heritent. Supprimer le renvoi suffit a revenir en arriere. */

/* 1. Le bandeau de mots-cles, rogne sur les bords, est retire. */
.banner{display:none !important;}

/* 2. Le nom et le portrait figurent deja dans la colonne de gauche (ou le
      bandeau du haut sur telephone) : on ne les repete pas au-dessus du
      texte. Le titre reste lisible par les moteurs de recherche et les
      lecteurs d'ecran. */
.ident .site-focus,.ident hr,.ident .portrait,.ident .monogram{display:none !important;}
.ident{padding:0 !important;margin:0 !important;height:0;overflow:hidden;}
.ident .site-name{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
main{padding-top:36px;}

/* 3. Le paragraphe d'ouverture, a une taille de lecture. */
.lede{
  font-size:clamp(1.18rem,1.7vw,1.4rem) !important;
  line-height:1.55 !important;
  color:var(--ink-soft) !important;
  padding-left:18px;border-left:2px solid var(--brass);
  margin-bottom:34px !important;
  /* meme largeur que le texte courant : 86 caracteres d'IBM Plex Sans a 16 px */
  box-sizing:border-box;max-width:51.6rem !important;margin-left:auto !important;margin-right:auto !important;
}

/* 4. Titres de section : l'etiquette et le titre sur le meme axe. */
.view p.eyebrow{text-align:center !important;}
main > section:first-of-type{padding-top:20px;}
h2{font-size:1.6rem;}

/* 5. Publications : titre, revue et auteurs alignes a gauche, sur le meme
      bord que le resume. */
.paper .paper-title,.paper h3,.paper h4{text-align:left !important;margin-left:0 !important;}
.paper-title{font-size:1.14rem;line-height:1.4;}
.paper{padding:30px 0;}

/* 6. Colonne de gauche : compteur plus lisible, respiration entre blocs. */
.side-visits .vrow{color:var(--on-pine-soft,#BFCBDA) !important;}
.side-block{margin-top:30px;}

/* 7. Pages de donnees : cartes plus nettes au survol. */
.dcard{transition:border-color .15s,transform .15s;}
.dcard:hover{transform:translateY(-1px);}

/* 8. Telephone et tablette : le menu passe a la ligne au lieu de defiler
      a l'horizontale, pour que Donnees RD Congo et Contact restent visibles. */
@media (max-width:1040px){
  .sidenav{flex-wrap:wrap !important;overflow-x:visible !important;gap:4px 20px !important;}
  .sidenav a{padding:9px 0 !important;}
}
@media (max-width:520px){
  .lede{padding-left:14px;}
  h2{font-size:1.4rem;}
}

/* 9. Un seul filet sous les titres de section. */
.paper:first-of-type{border-top:none !important;}

/* 10. Resumes des publications repliables (voir pro.js). */
.paper .pabs{margin:8px 0 2px;}
.paper .pabs > summary{cursor:pointer;display:inline-block;list-style:none;
  font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--pine);}
.paper .pabs > summary::-webkit-details-marker{display:none;}
.paper .pabs > summary::before{content:"+";margin-right:8px;color:var(--brass);}
.paper .pabs[open] > summary::before{content:"\2212";}
.paper .pabs > summary:hover,.paper .pabs > summary:focus-visible{color:var(--brass);}
.paper .pabs > .abs{margin-top:10px;}
@media print{ .paper .pabs > .abs{display:block !important;} }

/* 11. Enseignement : intitules de cours dans la meme police que les titres
       de publications, code du cours en etiquette discrete. */
.course strong{font-family:var(--display);font-weight:600;font-size:1.1rem;letter-spacing:-.005em;}
.course .code{align-self:start;justify-self:start;padding:3px 7px;border:1px solid var(--line);
  background:var(--pine-wash);color:var(--pine-deep);font-size:.66rem;letter-spacing:.08em;line-height:1.4;}

/* 11. Le nom sur une seule ligne dans la colonne de gauche. pro.js ajuste
       la taille si la police du visiteur est plus large que prevu. */
.side-name{white-space:nowrap;font-size:1.22rem;letter-spacing:-.02em;}
@media (max-width:1040px){ .side-name{font-size:1.15rem;} }

/* 12. Donnees RD Congo : sur la page d'accueil des donnees, les cartes
       suffisent ; la rangee de boutons ne sert que dans les pages de theme. */
.dnav:has(.dnav-home[aria-current="page"]){display:none;}
/* seize cartes : quatre colonnes sur grand ecran, sans carte orpheline */
.dcards{grid-template-columns:1fr !important;}
@media (min-width:700px){ .dcards{grid-template-columns:repeat(2,minmax(0,1fr)) !important;} }
@media (min-width:1280px){ .dcards{grid-template-columns:repeat(4,minmax(0,1fr)) !important;} }
.dcard,.dcard:hover,.dcard:focus-visible,.dcard *{text-decoration:none !important;}
.dcard:hover{border-color:var(--pine) !important;}
/* tableaux : la premiere colonne (periode, pays, poste) ne se coupe pas
   au milieu d'une date */
.view table td:first-child,.view table th:first-child{min-width:13.5em;}

/* 13. Texte justifie : la derniere ligne d'un paragraphe reste alignee a
       gauche, sans grands blancs entre les mots. */
.view p,.view li,.view .note,.view figcaption{text-align-last:left;}

/* 14. Telephone et tablette : le compteur de visites reste visible sous le
       menu, sur une ligne compacte, alors que les autres blocs du bandeau
       lateral sont masques. */
@media (max-width:1040px){
  .sidebar .side-visits{
    display:flex !important;grid-area:block;flex-wrap:wrap;justify-content:center;
    gap:4px 18px;margin:16px 0 0;padding:0;
    text-align:center;
  }
  .sidebar .side-visits h2{display:none;}
  .sidebar .side-visits .vrow{margin:0;font-size:.78rem;white-space:nowrap;}
  .sidebar .side-visits .vnote{flex-basis:100%;margin:4px 0 0;font-size:.66rem;opacity:.8;}
}
@media print{.sidebar .side-visits{display:none !important;}}

/* 15. Telephone : le texte suivi est justifie comme sur ordinateur, avec
       coupure des mots pour eviter les grands blancs ; la derniere ligne
       reste a gauche. Le cadre de focus des sections atteintes par le menu
       (tabindex -1) est retire. */
@media (max-width:480px){
  .view p:not([class]),.view p.l-en,.view p.l-fr,.view .abs,.view .desc,
  .view li:not([class]) > p{
    text-align:justify !important;text-align-last:left;
    -webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:6 3 2;
    overflow-wrap:break-word;
  }
  .view pre,.view .vrow,.view td,.view th{text-align:left !important;-webkit-hyphens:manual;hyphens:manual;}
  .shell{padding-left:20px;padding-right:20px;}
}
[tabindex="-1"]:focus,[tabindex="-1"]:focus-visible,.view:focus,main:focus{outline:none;}

/* 16. Le bloc du document de l'onglet « Situation économique » : titre,
       mention de l'édition et les deux liens de téléchargement. */
.docbox{
  border:1px solid var(--line);background:var(--card,#fff);
  padding:18px 20px;margin:22px 0 28px;border-left:3px solid var(--brass);
}
.docbox .doctitre{
  margin:0 0 6px;font-family:var(--display);font-size:1.06rem;
  font-weight:600;color:var(--ink);
}
.docbox .docnote{margin:0 0 12px;font-size:.86rem;color:var(--muted);}
.docbox .doclinks{display:flex;gap:10px;margin:0;flex-wrap:wrap;}
.docbox .docdl{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;text-decoration:none;color:var(--pine);
  border:1px solid var(--line);padding:7px 16px;border-radius:2px;
}
.docbox .docdl:hover{background:var(--pine);border-color:var(--pine);color:var(--on-pine,#fff);}

/* 17. La lecture d'une figure : ce que la courbe dit, sous la planche et
       au-dessus de la ligne de source. */
.fig-lect{
  font-size:.9rem;line-height:1.62;color:var(--ink-soft);
  margin:12px auto 8px;max-width:51.6rem;
  border-left:2px solid var(--brass);padding-left:14px;text-align:left;
}
@media (max-width:480px){ .fig-lect{padding-left:10px;} }


/* ---------- survol interactif des figures ---------- */
.fig-interactif{ cursor: crosshair; }
.fig-bulle{
  position: fixed; z-index: 9999; display: none; pointer-events: none;
  max-width: 320px; padding: 9px 11px; border-radius: 7px;
  background: rgba(20,24,30,0.96); color: #F4F1EA;
  font-family: var(--mono, ui-monospace, monospace); font-size: .72rem;
  line-height: 1.45; box-shadow: 0 6px 20px rgba(0,0,0,.30);
  border: 1px solid rgba(255,255,255,.08);
}
.fig-bulle .fb-t{
  display:block; font-family: var(--sans, system-ui, sans-serif);
  font-weight:600; font-size:.74rem; color:#E7C877;
  margin-bottom:4px; padding-bottom:4px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.fig-bulle .fb-x{
  display:block; font-weight:600; color:#CFE3F5; margin:3px 0 2px;
}
.fig-bulle .fb-row{ display:flex; justify-content:space-between; gap:16px; }
.fig-bulle .fb-l{ opacity:.85; }
.fig-bulle .fb-v{ font-weight:600; white-space:nowrap; }
@media (hover: none){ .fig-interactif{ cursor:auto; } }
/* Reperes de survol : trait vertical, point sur la courbe, contour de la barre */
.fig-guide{
  position: fixed; z-index: 9998; display: none; pointer-events: none;
  width: 0; border-left: 1px dashed rgba(20,24,30,.55);
}
.fig-dot{
  position: fixed; z-index: 9998; display: none; pointer-events: none;
  width: 9px; height: 9px; margin: -5px 0 0 -5px; border-radius: 50%;
  background: #E7C877; border: 2px solid #14181E;
}
.fig-hl{
  position: fixed; z-index: 9998; display: none; pointer-events: none;
  box-sizing: border-box; border: 2px solid #14181E; border-radius: 2px;
  background: rgba(231,200,119,.28);
}
.fig-bulle .fb-p{ display:block; opacity:.9; font-style:italic; margin:1px 0 2px; max-width:260px; white-space:normal; }