/* ------------------------------------------------------------------
   V32 — Polices hébergées sur le site
   ------------------------------------------------------------------
   Cinzel et Inter étaient chargées depuis les serveurs de Google, ce
   qui transmettait l'adresse IP de chaque visiteur à Google à chaque
   page. Les fichiers sont désormais servis depuis assets/fonts/.

   Format WOFF, reconnu par tous les navigateurs depuis 2010, et
   sous-ensemble aux caractères latins, grecs et cyrilliques employés
   par le site : 1 576 Ko d'origine, 559 Ko servis.

   Cinzel n'existe qu'en trois graisses. La plage 400-500 fait porter
   au Regular la graisse 500 demandée par le site, plutôt que de
   laisser le navigateur en fabriquer une approximation.

   font-display:swap : le texte s'affiche immédiatement dans la police
   de secours, puis bascule à l'arrivée du fichier — jamais de page
   vide en attendant.                                                  */
@font-face{font-family:Cinzel;font-style:normal;font-weight:400 500;font-display:swap;
  src:url(assets/fonts/cinzel-400.woff) format("woff")}
@font-face{font-family:Cinzel;font-style:normal;font-weight:600 700;font-display:swap;
  src:url(assets/fonts/cinzel-700.woff) format("woff")}
@font-face{font-family:Cinzel;font-style:normal;font-weight:800 900;font-display:swap;
  src:url(assets/fonts/cinzel-900.woff) format("woff")}
@font-face{font-family:Inter;font-style:normal;font-weight:300;font-display:swap;
  src:url(assets/fonts/inter-300.woff) format("woff")}
@font-face{font-family:Inter;font-style:normal;font-weight:400 500;font-display:swap;
  src:url(assets/fonts/inter-400.woff) format("woff")}
@font-face{font-family:Inter;font-style:normal;font-weight:600 700;font-display:swap;
  src:url(assets/fonts/inter-600.woff) format("woff")}
@font-face{font-family:Inter;font-style:normal;font-weight:800 900;font-display:swap;
  src:url(assets/fonts/inter-800.woff) format("woff")}

/* ------------------------------------------------------------------
   V33 — Les drapeaux du tableau, servis par le site
   ------------------------------------------------------------------
   Le tableau des 179 pays affiche des émojis de drapeau. Ils dépendent
   d'une police que tous les systèmes n'ont pas : sous Windows, Firefox
   n'affiche pas un drapeau mais les deux lettres du code pays, et
   certains systèmes n'affichent rien du tout. C'est le même défaut que
   la V12 avait corrigé sur les cartes en passant aux images.

   Ici les images ne suffisent pas : le site ne possède que 62 fichiers
   de drapeau, pour 179 lignes. Les glyphes sont donc fournis par le
   site, dans une police réduite aux 175 drapeaux effectivement
   employés — Noto Color Emoji, licence SIL OFL, 10,3 Mo à la source,
   806 Ko une fois réduite. Elle ne sert qu'aux drapeaux.

   Les polices du système restent déclarées derrière, au cas où le
   fichier ne se chargerait pas.                                      */
@font-face{font-family:"AR Drapeaux";font-style:normal;font-weight:400;font-display:swap;
  src:url(assets/fonts/drapeaux.woff) format("woff")}

/* ------------------------------------------------------------------
   V37 — Les écritures non latines, servies par le site
   ------------------------------------------------------------------
   Le khmer, l'arabe et l'éthiopien dépendaient jusqu'ici des polices
   du visiteur : présentes sur la plupart des systèmes, absentes sur
   certains, et jamais accordées au reste de la page.

   Chaque bloc d'écriture est repris en entier, non les seuls
   caractères employés aujourd'hui : un nom ajouté plus tard
   s'affichera sans qu'il faille refaire les fichiers. Les tables de
   rendu sont conservées — sans elles l'arabe ne se lierait pas et le
   khmer n'empilerait pas ses signes.

   La plage unicode-range limite chaque police à son écriture : le
   navigateur ne télécharge que celle dont la page a besoin.

      656 Ko à la source  ->  180 Ko servis, jamais tous à la fois   */
@font-face{font-family:"AR Khmer";font-style:normal;font-weight:400;font-display:swap;
  src:url(assets/fonts/khmer.woff) format("woff");
  unicode-range:U+1780-17FF,U+19E0-19FF}
@font-face{font-family:"AR Arabe";font-style:normal;font-weight:400;font-display:swap;
  src:url(assets/fonts/arabe.woff) format("woff");
  unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"AR Ethiopien";font-style:normal;font-weight:400;font-display:swap;
  src:url(assets/fonts/ethiopien.woff) format("woff");
  unicode-range:U+1200-139F,U+2D80-2DDF,U+AB00-AB2F}

/* Chinois et coréen — parti pris inverse des trois précédentes. Leurs
   blocs comptent des milliers de signes et pèsent de 6 à 10 Mo : on ne
   garde ici que les seize caractères que le corpus emploie, y compris
   pour les fiches pas encore basculées — Hirohito, Xi Jinping,
   Kim Jong-un. Il faudra refaire ces deux fichiers à chaque nom chinois
   ou coréen ajouté.

      16 335 Ko à la source  ->  5,2 Ko servis                        */
@font-face{font-family:"AR Chinois";font-style:normal;font-weight:400;font-display:swap;
  src:url(assets/fonts/chinois.woff) format("woff");
  unicode-range:U+3400-4DBF,U+4E00-9FFF,U+F900-FAFF}
@font-face{font-family:"AR Coreen";font-style:normal;font-weight:400;font-display:swap;
  src:url(assets/fonts/coreen.woff) format("woff");
  unicode-range:U+1100-11FF,U+3130-318F,U+A960-A97F,U+AC00-D7AF}
.demo-flag,.reg-flag-emoji{
  font-family:"AR Drapeaux","Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}


:root{
  --bg:#050506; --ink:#e9e1d1; --soft:#b8ad98; --dim:#827868;
  --gold:#c9a15a; --gold2:#f0d08a; --red:#8e2020;
  --line:rgba(205,168,92,.28); --panel:rgba(13,13,14,.88); --panel2:rgba(22,20,18,.94);
  --shadow:0 28px 80px rgba(0,0,0,.58);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;min-height:100vh;overflow-x:hidden}
a{color:inherit;text-decoration:none} button,input{font:inherit}
body:before{content:"";position:fixed;inset:0;z-index:-3;pointer-events:none;background:radial-gradient(circle at 20% 2%,rgba(201,161,90,.13),transparent 25%),radial-gradient(circle at 80% 6%,rgba(142,32,32,.17),transparent 25%),linear-gradient(180deg,#060607,#0b0908 55%,#050506)}
body:after{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.055;background-image:linear-gradient(rgba(255,255,255,.42) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.35) 1px,transparent 1px);background-size:54px 54px}
.wrap{width:min(1180px,calc(100% - 42px));margin:0 auto}.hidden{display:none!important}
.topbar{position:fixed;top:0;left:0;right:0;z-index:50;height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 42px;background:linear-gradient(180deg,rgba(4,4,5,.91),rgba(4,4,5,.58),transparent);backdrop-filter:blur(8px)}
.brand{display:flex;gap:10px;align-items:baseline;letter-spacing:.18em;text-transform:uppercase;font-family:Cinzel,Georgia,serif;color:var(--gold2);font-weight:800;flex-shrink:0}.brand small{font-family:Inter,sans-serif;letter-spacing:.12em;color:var(--dim);font-size:10px}.nav{display:flex;gap:17px;align-items:center;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;scrollbar-color:rgba(201,161,90,.35) transparent;min-width:0;padding-bottom:4px}.nav::-webkit-scrollbar{height:3px}.nav::-webkit-scrollbar-track{background:transparent}.nav::-webkit-scrollbar-thumb{background:rgba(201,161,90,.35);border-radius:2px}.nav::-webkit-scrollbar-thumb:hover{background:rgba(201,161,90,.6)}.nav a,.lang a{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#d9ccaf;opacity:.88;white-space:nowrap;flex-shrink:0}.nav a:hover,.lang a:hover{color:var(--gold2);opacity:1}.lang{display:flex;gap:10px;align-items:center;flex-shrink:0}.sep{color:var(--dim)}.mobile-toggle{display:none;background:transparent;color:var(--gold);border:1px solid var(--line);padding:8px 10px}
.hero{min-height:100vh;position:relative;display:grid;place-items:center;overflow:hidden;padding:100px 24px 54px}.hero-bg{position:absolute;inset:0;background-image:radial-gradient(ellipse at 50% 30%,rgba(120,40,30,.22),transparent 55%),radial-gradient(ellipse at 15% 85%,rgba(201,161,90,.12),transparent 50%),linear-gradient(180deg,#0b0b0c,#050506 60%,#000)}.hero:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 12%,rgba(0,0,0,.20) 46%,rgba(0,0,0,.9) 100%)}.hero-content{position:relative;text-align:center;max-width:1200px;width:100%;margin:auto}.eyebrow{letter-spacing:.42em;text-transform:uppercase;color:var(--gold2);font-size:12px;margin-bottom:18px}
.dateline{color:var(--dim);font-size:12.5px;letter-spacing:.14em;text-transform:capitalize;margin-bottom:14px;opacity:.8}.title{font-family:Cinzel,Georgia,serif;font-size:clamp(52px,9vw,132px);line-height:.9;margin:0;color:var(--gold2);letter-spacing:.08em;padding-right:.08em;text-shadow:0 5px 28px rgba(0,0,0,.85)}.subtitle{font-size:clamp(16px,2.2vw,26px);letter-spacing:.2em;text-transform:uppercase;color:#efe0b8;margin:24px 0 34px}.searchbox{max-width:760px;margin:0 auto;display:flex;background:rgba(8,8,9,.82);border:1px solid rgba(240,208,138,.42);box-shadow:var(--shadow)}.searchbox input{flex:1;background:transparent;border:0;color:var(--ink);padding:18px 20px;outline:0}.searchbox button{background:linear-gradient(180deg,#d9b366,#8f6b2f);color:#15100a;border:0;text-transform:uppercase;letter-spacing:.12em;font-weight:800;padding:0 24px}.quick{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:28px}.quick a{border:1px solid var(--line);background:rgba(0,0,0,.48);padding:13px 20px;text-transform:uppercase;letter-spacing:.14em;font-size:12px;color:#eee0be}.quick a:hover{border-color:var(--gold2);background:rgba(201,161,90,.13)}
main{position:relative}.section{padding:72px 0;border-top:1px solid rgba(201,161,90,.16);clear:both}.section-title{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:26px}.section-title h2{font-family:Cinzel,Georgia,serif;text-transform:uppercase;letter-spacing:.16em;font-size:26px;color:var(--gold2);margin:0}.section-title p{color:var(--soft);max-width:560px;margin:0;font-size:14px;line-height:1.65}.home-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px;align-items:stretch}.block{background:linear-gradient(180deg,var(--panel2),rgba(10,10,11,.96));border:1px solid var(--line);box-shadow:var(--shadow);padding:26px;position:relative;overflow:hidden;min-height:210px}.block:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(201,161,90,.1),transparent 31%,rgba(142,32,32,.08));pointer-events:none}.block>*{position:relative}.block h3{font-family:Cinzel,Georgia,serif;color:#f1dca6;text-transform:uppercase;letter-spacing:.14em;font-size:18px;margin:0 0 14px}.block p{color:var(--soft);line-height:1.65}.block-link{display:inline-block;margin-top:16px;color:var(--gold2);letter-spacing:.14em;text-transform:uppercase;font-size:12px;border-bottom:1px solid var(--gold)}
.study-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.study-card{display:grid;grid-template-columns:150px 1fr;gap:18px;min-height:230px;background:linear-gradient(180deg,rgba(20,19,18,.95),rgba(9,9,10,.96));border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden;position:relative}.study-card:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(201,161,90,.10),transparent 35%,rgba(142,32,32,.07));pointer-events:none}.study-img{position:relative;aspect-ratio:2/3;align-self:start;background:#111}.study-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;filter:saturate(.82) contrast(1.04)}.study-img:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 45%,rgba(0,0,0,.48))}.study-copy{position:relative;padding:22px 20px 20px 0;display:flex;flex-direction:column}.study-copy h3{font-family:Cinzel,Georgia,serif;margin:9px 0 7px;color:#fff0c8;font-size:22px}.study-copy p{font-size:13px;line-height:1.6;color:#cfc4ae;margin:8px 0 0;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}.meta{display:flex;gap:10px;flex-wrap:wrap;color:#cbbd9f;font-size:13px}.tag{border:1px solid rgba(201,161,90,.34);padding:5px 8px;background:rgba(0,0,0,.35)}
.page-hero{padding:138px 0 50px;background:radial-gradient(ellipse at 20% 0%,rgba(120,40,30,.20),transparent 55%),linear-gradient(180deg,#0d0d0e,#050506);border-bottom:1px solid var(--line);position:relative}.page-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.87),rgba(0,0,0,.34),rgba(0,0,0,.87))}.page-hero .wrap{position:relative}.page-hero h1{font-family:Cinzel,Georgia,serif;color:var(--gold2);font-size:clamp(36px,6vw,72px);letter-spacing:.12em;text-transform:uppercase;margin:0}.page-hero p{color:#d6c9ac;max-width:730px;line-height:1.7}.status-title{font-family:Cinzel,Georgia,serif;color:#fff1c8;letter-spacing:.2em;text-transform:uppercase;margin:54px 0 26px;font-size:32px}.continent-title{display:flex;align-items:center;gap:16px;margin:36px 0 18px;color:var(--gold2);font-family:Cinzel,Georgia,serif;letter-spacing:.14em;text-transform:uppercase}.continent-title:after{content:"";height:1px;background:var(--line);flex:1}.dict-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px}.dict-card{aspect-ratio:2/3;position:relative;overflow:hidden;border:1px solid var(--line);background:#111;box-shadow:var(--shadow);display:flex;align-items:end}.dict-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;filter:saturate(.85) contrast(1.05)}.dict-card:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.03),rgba(0,0,0,.74) 60%,rgba(0,0,0,.96))}.card-info{position:relative;z-index:2;padding:20px;width:100%}.card-info h3{font-family:Cinzel,Georgia,serif;margin:8px 0 5px;color:#fff0c8;font-size:19px}.dict-card:hover{transform:translateY(-3px);border-color:rgba(240,208,138,.65);transition:.18s ease}
/* La colonne de l'affiche est ce qui imposait la hauteur de la page : une
   fiche en 2:3 large de 380 px fait 570 px à elle seule, avant même le
   texte. Ramenée à 300 px, plus des marges resserrées, la fiche courante
   tient dans un écran sans défilement.

   Le rembourrage haut de 96 px n'est pas décoratif : la barre de liens est
   en position fixe sur 72 px de haut, avec un fond flouté. C'est la seule
   page du site à ne pas commencer par un .page-hero, qui ailleurs dégage
   la barre avec ses 138 px. Sans ces 96 px, le haut de la fiche passe
   sous le flou. */
.profile{display:grid;grid-template-columns:minmax(240px,300px) 1fr;gap:28px;
  align-items:start;padding:96px 0 40px}.profile-portrait{position:sticky;top:84px;border:1px solid var(--line);background:#111;box-shadow:var(--shadow);overflow:hidden}.profile-portrait img{width:100%;display:block}.profile-card{padding:15px 17px;background:linear-gradient(180deg,rgba(21,20,18,.94),rgba(9,9,10,.96));border-top:1px solid var(--line)}.profile-card dl{display:grid;grid-template-columns:130px 1fr;gap:10px 14px}.profile-card dt{color:var(--dim);text-transform:uppercase;font-size:11px;letter-spacing:.12em}.profile-card dd{margin:0;color:#eadcbf}.article{background:rgba(10,10,11,.84);border:1px solid rgba(201,161,90,.18);padding:26px 30px;box-shadow:var(--shadow)}.article h1{font-family:Cinzel,Georgia,serif;color:var(--gold2);font-size:clamp(28px,3.6vw,44px);letter-spacing:.07em;margin:0 0 4px;line-height:1.06}.original{color:var(--soft);font-size:18px;margin-bottom:24px}.article h2{font-family:Cinzel,Georgia,serif;color:#f3ddab;text-transform:uppercase;letter-spacing:.14em;font-size:16px;margin:20px 0 8px}.article p{line-height:1.66;color:#d8cfbf;font-size:15px;white-space:pre-line;margin:0}.points{display:grid;gap:7px;margin:0}.point{border-left:3px solid var(--gold);background:rgba(201,161,90,.07);padding:9px 13px;color:#ddd0b6;font-size:14px;line-height:1.5}.notice{color:var(--soft);font-size:12px;margin-top:9px;font-style:italic;line-height:1.5}.empty{color:var(--soft);padding:24px;border:1px dashed var(--line)}
.footer{border-top:1px solid var(--line);padding:40px 0;color:var(--soft);text-align:center;letter-spacing:.08em;font-size:12px;text-transform:uppercase}
@media (max-width:1050px){.study-list{grid-template-columns:1fr}.study-card{grid-template-columns:160px 1fr}.home-grid{grid-template-columns:1fr}}
@media (max-width:900px){.topbar{padding:0 18px}.mobile-toggle{display:block}.nav{display:none;position:absolute;top:60px;left:18px;right:18px;background:#080808;border:1px solid var(--line);padding:18px;flex-direction:column;align-items:flex-start}.nav.open{display:flex}.brand small{display:none}.profile{grid-template-columns:1fr}.profile-portrait{position:relative;top:0}.title{letter-spacing:.03em;padding-right:.03em}.searchbox{flex-direction:column}.searchbox button{padding:14px}.section{padding:50px 0}.page-hero{padding-top:112px}.profile-card dl{grid-template-columns:1fr}.hero{min-height:92vh}.dict-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}}
@media (max-width:620px){.study-card{grid-template-columns:1fr}.study-img{aspect-ratio:16/9;max-height:220px}.study-img img{object-position:50% 12%}.study-copy{padding:20px}.section-title{display:block}.section-title p{margin-top:14px}.topbar{height:64px}.brand{font-size:13px}.lang{font-size:11px}}

/* Localized country caption overlay removed per user request — images already show country context */
.dict-card{position:relative}
.study-img{position:relative}
.profile-img-wrap{position:relative}

/* V5 additions */
.news-card{
  background:linear-gradient(180deg,rgba(22,20,18,.94),rgba(8,8,9,.96));
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  padding:32px;
  min-height:160px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  position:relative;
  overflow:hidden;
}
.news-card:before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(201,161,90,.11),transparent 34%,rgba(142,32,32,.08));
  pointer-events:none;
}
.news-card>*{position:relative}
.news-card h3{font-family:Cinzel,Georgia,serif;color:#f1dca6;text-transform:uppercase;letter-spacing:.14em;margin:0 0 12px}
.news-card p{color:var(--soft);line-height:1.7;max-width:780px;margin:0}

/* V6 additions — Droite (right-wing governments) category */
:root{ --blue:#5a7ea3; --blue2:#8fb3d6; --blue-line:rgba(90,126,163,.34); }
.badge-droite{display:inline-block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#0d1216;background:linear-gradient(180deg,var(--blue2),var(--blue));padding:4px 8px;border-radius:2px;font-weight:800}
.dict-card .badge-droite{position:absolute;top:14px;right:14px;z-index:3}
.card-info .badge-droite{margin-bottom:8px}
.profile-badge{margin:4px 0 10px}
.methodology{background:linear-gradient(180deg,rgba(18,22,26,.92),rgba(8,9,10,.96));border:1px solid var(--blue-line);box-shadow:var(--shadow);padding:24px 28px;margin:0 0 40px;color:#c9d6e2;line-height:1.7;font-size:14px}
.methodology strong{color:var(--blue2)}
.section-title.droite h2{color:var(--blue2)}
.continent-title.droite{color:var(--blue2)}
.continent-title.droite:after{background:var(--blue-line)}

/* V7 additions — Doctrines page */
.doctrines-page .status-title{margin-top:60px}
.doctrines-page .status-title:first-child{margin-top:8px}
.doctrine-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}
.doctrine-card{background:linear-gradient(180deg,var(--panel2),rgba(10,10,11,.96));border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column}
.doctrine-icon{background:#0b0c0c;padding:22px;display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--line)}
.doctrine-icon img{width:96px;height:96px;object-fit:contain}
.doctrine-copy{padding:20px 22px 24px;position:relative}
.doctrine-copy h3{font-family:Cinzel,Georgia,serif;color:#f1dca6;text-transform:uppercase;letter-spacing:.08em;font-size:17px;margin:10px 0 10px}
.doctrine-copy p{color:var(--soft);line-height:1.68;font-size:13.5px;margin:0}
.nature-badge{display:inline-block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:4px 8px;border-radius:2px;font-weight:800}
.nature-badge.nature-revo{background:linear-gradient(180deg,#e0a7a7,var(--red));color:#1a0a0a}
.nature-badge.nature-reac{background:linear-gradient(180deg,var(--gold2),var(--gold));color:#1a1204}
.current-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.current-card{background:rgba(10,10,11,.7);border:1px solid rgba(201,161,90,.16);border-left:3px solid var(--gold);padding:16px 18px}
.current-card h4{margin:0 0 8px;font-family:Cinzel,Georgia,serif;color:#f1dca6;font-size:14px;letter-spacing:.04em;text-transform:uppercase}
.current-card h4 .figs{display:block;color:var(--dim);text-transform:none;letter-spacing:0;font-family:Inter,sans-serif;font-size:12px;margin-top:3px}
.current-card p{margin:0;color:var(--soft);font-size:13px;line-height:1.66}
.concepts-grid{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.methodology-gold{border-color:var(--line);color:#e2d6bb;margin-top:52px}
.methodology-gold strong{color:var(--gold2)}
@media (max-width:900px){.doctrine-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}}

/* Sources page */
.source-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px;margin-bottom:8px}
.source-card{display:flex;flex-direction:column;background:linear-gradient(180deg,var(--panel2),rgba(10,10,11,.96));border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden;text-decoration:none;transition:border-color .15s}
.source-card:hover{border-color:var(--gold2)}
.source-logo{background:#fff;padding:14px;height:118px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--line)}
.source-logo img{width:100%;height:100%;display:block;object-fit:contain}
.source-copy{padding:16px 18px 20px}
.source-copy h4{margin:0 0 8px;font-family:Cinzel,Georgia,serif;color:#f1dca6;font-size:14px;text-transform:uppercase;letter-spacing:.05em}
.source-copy p{margin:0;color:var(--soft);font-size:12.5px;line-height:1.6}

/* Readings page */
.book-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:24px}
.book-card{display:flex;flex-direction:column;background:linear-gradient(180deg,var(--panel2),rgba(10,10,11,.96));border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden;text-decoration:none;transition:border-color .15s,transform .15s}
.book-card:hover{border-color:var(--gold2);transform:translateY(-3px)}
.book-cover{aspect-ratio:2/3;overflow:hidden;background:#000}
.book-cover img{width:100%;height:100%;object-fit:cover}
.book-copy{padding:18px 20px 22px}
.book-copy h4{margin:0 0 4px;font-family:Cinzel,Georgia,serif;color:#f1dca6;font-size:17px;text-transform:uppercase;letter-spacing:.04em}
.book-subtitle{color:var(--gold2);font-size:12.5px;font-style:italic;margin-bottom:8px;line-height:1.4}
.book-meta{color:var(--dim);font-size:11px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px}
.book-orig{color:var(--dim);font-size:11.5px;font-style:italic;opacity:.8;margin:-6px 0 12px}
.book-copy p{margin:0;color:var(--soft);font-size:13px;line-height:1.65}

/* Chronologie page */
.timeline-full{max-width:820px;margin:0 auto;border-left:2px solid var(--line);padding-left:0}
.timeline-row{position:relative;display:grid;grid-template-columns:150px 1fr;gap:28px;padding:0 0 34px 28px;border-left:2px solid var(--line);margin-left:-2px}
.timeline-row:last-child{padding-bottom:2px}
.timeline-row:before{content:"";position:absolute;left:-7px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--red);border:2px solid #050506}
.timeline-date{display:flex;flex-direction:column}
.timeline-date .ty{font-family:Cinzel,Georgia,serif;color:var(--gold2);font-size:26px;letter-spacing:.04em}
.timeline-date .tm{color:var(--dim);text-transform:uppercase;letter-spacing:.12em;font-size:12px;margin-top:2px}
.timeline-text{color:var(--soft);line-height:1.7;font-size:14.5px;padding-top:4px}
@media (max-width:620px){.timeline-row{grid-template-columns:1fr;gap:6px;padding-left:20px}.timeline-date{flex-direction:row;gap:8px;align-items:baseline}}

/* V7 additions — homepage dashboard */
.dashboard-grid{display:grid;grid-template-columns:2fr 1fr;gap:28px;align-items:start}
.dashboard-solo{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
.analysis-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.analysis-card{display:block;background:linear-gradient(180deg,var(--panel2),rgba(10,10,11,.96));border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden}
.analysis-img{aspect-ratio:16/9;overflow:hidden;background:#111}
.analysis-img img{width:100%;height:100%;object-fit:cover;object-position:50% 15%;filter:saturate(.85) contrast(1.05)}
.analysis-copy{padding:16px 18px 18px}
.analysis-tag{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--red);font-weight:800}
.analysis-copy h3{font-family:Cinzel,Georgia,serif;color:#f1dca6;margin:8px 0 6px;font-size:17px}
.analysis-copy p{color:var(--soft);font-size:12.5px;line-height:1.6;margin:0 0 10px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.analysis-date{color:var(--dim);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.dashboard-side{display:flex;flex-direction:column;gap:20px}
.side-box{background:linear-gradient(180deg,var(--panel2),rgba(10,10,11,.96));border:1px solid var(--line);box-shadow:var(--shadow);padding:22px}
.side-box h3{font-family:Cinzel,Georgia,serif;color:#f1dca6;text-transform:uppercase;letter-spacing:.12em;font-size:15px;margin:0 0 16px}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.stat-tile{display:flex;align-items:center;gap:12px;text-align:left;border:1px solid var(--line);background:rgba(0,0,0,.35);padding:14px 12px}
.stat-tile:hover{border-color:var(--gold2)}
.stat-icon{flex:0 0 34px;width:34px;height:34px;color:var(--gold);transition:color .2s}
.stat-tile:hover .stat-icon{color:var(--gold2)}
.stat-text{display:block;min-width:0}
.stat-label{display:block;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--soft);white-space:nowrap}
.stat-num{display:block;font-family:Cinzel,Georgia,serif;font-size:22px;color:var(--gold2);line-height:1.15;margin-top:3px}
@media (max-width:620px){.stat-tile{gap:9px;padding:12px 9px}.stat-icon{flex:0 0 27px;width:27px;height:27px}.stat-label{font-size:9px;letter-spacing:.06em}.stat-num{font-size:19px}}
.mini-timeline{list-style:none;margin:0 0 14px;padding:0;border-left:2px solid var(--line);padding-left:16px}
.mini-timeline li{position:relative;margin-bottom:16px}
.mini-timeline li:before{content:"";position:absolute;left:-20px;top:4px;width:8px;height:8px;border-radius:50%;background:var(--red)}
.mini-timeline .ty{display:block;color:var(--gold2);font-family:Cinzel,Georgia,serif;font-size:13px;letter-spacing:.06em}
.mini-timeline p{margin:3px 0 0;color:var(--soft);font-size:12.5px;line-height:1.5}
.trio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.doctrine-feature-body{display:flex;gap:14px;align-items:center;margin:6px 0 14px}
.doctrine-feature-body img{width:86px;height:86px;object-fit:contain;flex-shrink:0}
.doctrine-feature-body h4{margin:0 0 4px;font-family:Cinzel,Georgia,serif;color:#f1dca6;font-size:14px;text-transform:uppercase;letter-spacing:.06em}
.doctrine-feature-body p{margin:0;color:var(--soft);font-size:12.5px;line-height:1.55}
.cont-bars{display:flex;flex-direction:column;gap:10px;margin:6px 0 14px}
.cont-bar-row{display:grid;grid-template-columns:80px 1fr 26px;align-items:center;gap:10px}
.cont-bar-label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--soft)}
.cont-bar-track{height:8px;background:rgba(255,255,255,.06);position:relative}
.cont-bar-fill{height:100%;background:linear-gradient(90deg,var(--gold),var(--gold2))}
.cont-bar-num{font-size:12px;color:var(--gold2);text-align:right;font-family:Cinzel,Georgia,serif}
.quote-feature{display:flex;flex-direction:column;justify-content:center;text-align:center}
.quote-mark{font-family:Cinzel,Georgia,serif;font-size:48px;color:var(--gold);line-height:1;margin-bottom:6px}
.quote-feature p{color:#e9dcbc;font-family:Cinzel,Georgia,serif;font-size:15px;line-height:1.7;margin:0 0 14px}
.quote-source{color:var(--dim);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
@media (max-width:1050px){.dashboard-grid{grid-template-columns:1fr}.dashboard-solo{grid-template-columns:1fr}.analysis-grid{grid-template-columns:1fr 1fr}.trio-grid{grid-template-columns:1fr}}
@media (max-width:620px){.analysis-grid{grid-template-columns:1fr}.stat-grid{grid-template-columns:1fr 1fr}}

/* Contact page */
.contact-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:32px;align-items:start}
.contact-form{display:flex;flex-direction:column;gap:18px;background:linear-gradient(180deg,var(--panel2),rgba(10,10,11,.96));border:1px solid var(--line);box-shadow:var(--shadow);padding:28px}
.contact-form label{display:flex;flex-direction:column;gap:8px;color:var(--gold2);font-family:Cinzel,Georgia,serif;font-size:12px;text-transform:uppercase;letter-spacing:.1em}
.contact-form input,.contact-form textarea{background:rgba(0,0,0,.4);border:1px solid var(--line);color:var(--ink);padding:12px 14px;font-family:Inter,sans-serif;font-size:14px;resize:vertical}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--gold2)}
.contact-form button{align-self:flex-start;background:linear-gradient(180deg,#d9b366,#8f6b2f);color:#15100a;border:0;text-transform:uppercase;letter-spacing:.12em;font-weight:800;padding:13px 30px;cursor:pointer;font-family:Inter,sans-serif;font-size:13px}
.contact-form button:hover{filter:brightness(1.08)}
.contact-form button:disabled{opacity:.55;cursor:default;filter:none}
/* champ appât : hors écran plutôt que display:none, que certains robots détectent */
.contact-form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{margin:0;font-size:13.5px;line-height:1.55;min-height:1px}
.form-status:empty{display:none}
.form-status.wait{color:var(--soft)}
.form-status.ok{color:#8fd39a}
.form-status.err{color:#e2a0a0}
.form-privacy{margin:0;color:var(--dim);font-size:11.5px;line-height:1.5;font-style:italic}
.contact-faq{background:rgba(10,10,11,.5);border:1px solid var(--line);padding:26px 28px}
.contact-faq h3{margin:0 0 18px;font-family:Cinzel,Georgia,serif;color:#f1dca6;text-transform:uppercase;letter-spacing:.1em;font-size:15px}
.faq-item{margin-bottom:18px}
.faq-item:last-child{margin-bottom:0}
.faq-q{margin:0 0 6px;color:#e9dcbc;font-size:13.5px;font-weight:600}
.faq-a{margin:0;color:var(--soft);font-size:13px;line-height:1.6}
@media (max-width:800px){.contact-grid{grid-template-columns:1fr}}

/* Quiz */
.quiz-teaser-block{text-align:center}
.quiz-teaser-block h3{margin-bottom:10px}
.quiz-wrap{max-width:600px;margin:0 auto;background:linear-gradient(180deg,var(--panel2),rgba(10,10,11,.96));border:1px solid var(--line);box-shadow:var(--shadow);padding:32px 30px}
.quiz-intro{color:var(--soft);line-height:1.7;margin:0 0 22px}
.quiz-progress{display:flex;gap:6px;margin-bottom:22px}
.quiz-dot{height:3px;flex:1;background:rgba(201,161,90,.22);border-radius:2px}
.quiz-dot.done{background:var(--gold)}
.quiz-round{font-family:Cinzel,Georgia,serif;text-transform:uppercase;letter-spacing:.14em;font-size:11px;color:var(--gold);margin:0 0 8px}
.quiz-q{font-family:Cinzel,Georgia,serif;color:var(--gold2);font-size:19px;line-height:1.4;margin:0 0 8px}
.quiz-sub{color:var(--soft);font-size:13.5px;line-height:1.6;margin:0 0 20px}
.quiz-opt{display:block;width:100%;text-align:left;background:rgba(255,255,255,.03);border:1px solid var(--line);color:var(--ink);font-family:Inter,sans-serif;font-size:14px;padding:12px 16px;border-radius:2px;margin-bottom:10px;cursor:pointer}
.quiz-opt:hover:not(:disabled){border-color:var(--gold2)}
.quiz-opt.correct{border-color:#5a9a6b;background:rgba(90,154,107,.15);color:#bfe3c8}
.quiz-opt.wrong{border-color:#a35050;background:rgba(163,80,80,.15);color:#e3b7b7}
.quiz-opt:disabled{cursor:default}
.quiz-btn{background:linear-gradient(180deg,#d9b366,#8f6b2f);color:#15100a;border:0;text-transform:uppercase;letter-spacing:.12em;font-weight:800;padding:13px 26px;cursor:pointer;font-family:Inter,sans-serif;font-size:13px;margin-top:6px}
.quiz-btn:hover{filter:brightness(1.08)}
.quiz-final{text-align:center}
.quiz-score{font-family:Cinzel,Georgia,serif;color:var(--gold2);font-size:36px;margin:10px 0 4px}
.quiz-score-label{color:var(--soft);font-size:13px;margin:0 0 16px;text-transform:uppercase;letter-spacing:.08em}
.quiz-score-msg{color:#d8cfbf;font-size:14px;margin:0 0 22px}
@media (max-width:680px){.quiz-wrap{padding:24px 20px}}

/* Support box (About page) */
.support-box{margin-top:32px;padding:26px 28px;background:linear-gradient(180deg,var(--panel2),rgba(10,10,11,.96));border:1px solid var(--line);text-align:center}
.support-box h3{margin:0 0 10px;font-family:Cinzel,Georgia,serif;color:var(--gold2);font-size:15px;text-transform:uppercase;letter-spacing:.1em}
.support-box p{margin:0 0 18px;color:var(--soft);font-size:14px;line-height:1.7}
.support-link{display:inline-block;background:linear-gradient(180deg,#d9b366,#8f6b2f);color:#15100a;text-decoration:none;font-weight:800;font-size:13px;letter-spacing:.06em;padding:12px 24px}
.support-link:hover{filter:brightness(1.08)}

/* Hero world map */
.hero-map{margin-top:36px;max-width:900px;width:100%;margin-left:auto;margin-right:auto}
.hero-map img{width:100%;height:auto;display:block;border:1px solid var(--line);box-shadow:var(--shadow)}
.hero-map-caption{margin:10px 0 0;font-size:11.5px;letter-spacing:.03em;color:var(--dim);text-align:center}
.hero-map-caption a{color:var(--gold);text-decoration:underline;text-underline-offset:2px}
.hero-map-caption a:hover{color:var(--gold2)}

/* ============================================================
   Répertoires — Figures autoritaires / Gouvernements de droite
   ============================================================ */
.reg-rule{width:78px;height:2px;background:var(--gold);margin:0 0 26px}
/* Deux colonnes. Le drapeau est réduit de moitié et conserve le format de
   vos fichiers, 912 x 453 : ni déformation, ni rognage, ni vide autour.
   C'est le texte qui donne sa hauteur à la carte. */
/* min(500px,100%) : sur un écran plus étroit que 500 px — un téléphone tenu
   à la verticale — la colonne se contente de la largeur disponible au lieu
   d'imposer ses 500 px et de pousser la page hors de l'écran. */
.reg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(500px,100%),1fr));gap:16px}
.reg-card{position:relative;display:block;padding:22px 26px;border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(21,20,18,.62),rgba(9,9,10,.86));
  box-shadow:var(--shadow);transition:border-color .18s ease,transform .18s ease}
.reg-card:hover{border-color:rgba(240,208,138,.55);transform:translateY(-2px)}
.reg-hit{position:absolute;inset:0;z-index:3}          /* zone cliquable pleine carte */
/* Un seul point d'entrée vers le profil, en bas à droite : le libellé
   suivi du chevron, qui était auparavant seul en haut de la carte. */
.reg-chevron{font-size:20px;line-height:0;position:relative;top:2px;margin-left:9px}

/* La colonne de gauche portait le drapeau et, sous lui, le nom du pays.
   Les deux redisaient le titre de la page, qui ne parle que de ce pays.
   Elle est supprimée : la carte tient sur une seule colonne et le texte
   occupe toute la largeur. */

/* Filet doré de 3 px, à la couleur du site. C'est lui qui rattache le
   drapeau à la page, sans toucher à l'image elle-même. */
.reg-flag{position:relative;display:block;width:100%;aspect-ratio:912/453;
  overflow:hidden;background:#0a0a0b;border:3px solid var(--gold)}
.reg-flag-emoji{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;font-size:58px;line-height:1;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}

/* Les drapeaux sont des aplats vectoriels : à côté du fond sombre et du
   doré du site, leurs rouges et leurs verts sortiraient en fluo. Une
   désaturation légère suffit à les faire tenir dans la page ; ils se
   raniment au survol. Retirer le filtre pour les couleurs brutes. */
.reg-flag img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;
  filter:saturate(.82) brightness(.9) contrast(.97);transition:filter .2s ease}
.reg-card:hover .reg-flag img{filter:saturate(.96) brightness(1) contrast(1)}

.reg-body{min-width:0;display:flex;flex-direction:column}                                  /* laisse le texte se replier */
.reg-body h3{font-family:Cinzel,Georgia,serif;text-transform:uppercase;letter-spacing:.05em;
  color:#fff0c8;font-size:20px;margin:0 0 2px;overflow-wrap:break-word;hyphens:auto}
.reg-life{color:#e6dcc6;font-size:15px;margin-top:8px}
.reg-power{color:#e6dcc6;font-size:13.5px;letter-spacing:.04em;margin-top:6px}
.reg-desc{color:#c9c0b0;font-size:14px;line-height:1.62;margin:11px 0 13px;
  display:-webkit-box;-webkit-line-clamp:4;line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.reg-more{display:inline-flex;align-items:center;align-self:flex-end;margin-top:auto;
  color:var(--gold2);text-transform:uppercase;letter-spacing:.14em;font-size:11px}
.reg-card:hover .reg-more{color:#ffe6ac}

.pager{display:flex;justify-content:center;align-items:center;gap:8px;margin:44px 0 8px;
  flex-wrap:wrap}
.pg{min-width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);color:#d9ccaf;font-size:13px;padding:0 10px}
.pg:hover{border-color:rgba(240,208,138,.6);color:var(--gold2)}
.pg.on{background:var(--gold);border-color:var(--gold);color:#131108;font-weight:600}
.pg-arrow.off{opacity:.3}
.pg-gap{color:var(--dim);padding:0 4px}

/* Correction du débordement horizontal sur les fiches à nom long
   (Berdimouhamedov) : sans min-width:0, la cellule de grille ne peut pas
   descendre sous la largeur du mot le plus long et élargit toute la page. */
.profile{min-width:0}
.profile>*{min-width:0}
.article{min-width:0}
.article h1{overflow-wrap:break-word;hyphens:auto}
.reg-card{min-width:0}

@media (max-width:560px){
  .reg-card{padding:18px}
  .reg-chevron{top:auto;bottom:18px}
}
@media (max-width:640px){
  .reg-body h3{font-size:19px}
  .reg-flag-emoji{font-size:60px}
  .reg-body h3{font-size:18px}
}

/* ============================================================
   Téléphone tenu à l'horizontale — fiches de dirigeants
   ============================================================
   Sous 900 px, la fiche passe sur une seule colonne : à la verticale
   le portrait prend toute la largeur de l'écran, et c'est très bien.
   Mais un téléphone couché mesure de 650 à 900 px de large, et le même
   portrait devenait démesuré. Dans cette plage, on rétablit donc les
   deux colonnes du bureau avec une colonne de gauche resserrée : le
   portrait reprend une taille raisonnable et le texte l'accompagne. */
@media (min-width:560px) and (max-width:900px){
  .profile{grid-template-columns:minmax(190px,250px) minmax(0,1fr);gap:22px}
  .article{padding:22px 20px}   /* la colonne de texte étant plus étroite */
}
/* Filet de sécurité pour les rares écrans couchés plus étroits que
   560 px, où la mise en page reste sur une seule colonne. */
@media (max-width:559px) and (orientation:landscape){
  .profile-portrait{max-width:340px;margin:0 auto}
}

/* ============================================================
   Drapeaux — l'émoji redevient un vrai filet de secours
   ============================================================
   L'émoji était posé sous l'image et donc visible pendant tout le
   chargement du drapeau. Sur les systèmes dépourvus de police d'émoji
   drapeau — Firefox sous Windows, notamment — il ne s'affichait même pas
   comme un drapeau, mais comme les deux lettres du code du pays : « PH »,
   « DE ». D'où ces remplissages en lettres qui précédaient les images.
   Il est désormais masqué par défaut et ne reparaît que si le fichier du
   drapeau est introuvable : la classe est posée par l'attribut onerror
   de l'image, dans flagFor(). */
.reg-flag-emoji{opacity:0}
.reg-flag.sans-image .reg-flag-emoji{opacity:1}

/* Répertoires scindés (V13) : la note méthodologique ouvre la page du
   répertoire historique, elle ne doit donc pas garder la marge haute
   qu'elle porte en fin de page Doctrines. Les intertitres de la recherche
   groupée suivent la même règle pour le premier d'entre eux. */
.methodology-flush{margin-top:0}
/* Page d'index des répertoires : le compteur coiffe le titre de chaque bloc,
   et les trois blocs ne descendent jamais sous deux colonnes sur grand écran. */
.rep-count{display:block;letter-spacing:.28em;text-transform:uppercase;color:var(--soft);font-size:11px;margin-bottom:10px}
.rep-index{margin-bottom:44px}
.search-groups>.status-title:first-child{margin-top:0}

/* ==================================================================
   V17 — Section « L'état de la démocratie dans le monde »,
   page d'index à bannières, suggestions de recherche.
   ================================================================== */

/* --- Page d'index : deux entrées, chacune coiffée de sa bannière --- */
.rep-index{display:grid;grid-template-columns:1fr;gap:26px;margin-bottom:44px}
.rep-entry{display:block;background:linear-gradient(180deg,var(--panel2),rgba(10,10,11,.96));border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden;transition:border-color .18s ease,transform .18s ease}
.rep-entry:hover{border-color:rgba(240,208,138,.62);transform:translateY(-2px)}
.rep-banner{display:block;width:100%;height:auto;border-bottom:1px solid var(--line)}
.rep-entry-body{padding:24px 26px 26px}
.rep-entry-body h3{font-family:Cinzel,Georgia,serif;color:#f1dca6;text-transform:uppercase;letter-spacing:.14em;font-size:19px;margin:0 0 12px}
.rep-entry-body p{color:var(--soft);line-height:1.65;margin:0}
.rep-count{display:block;letter-spacing:.28em;text-transform:uppercase;color:var(--soft);font-size:11px;margin-bottom:10px}

/* --- Bannière en tête de la page démocratie --- */
.demo-hero{padding-bottom:34px}
.demo-banner{display:block;width:100%;height:auto;border:1px solid var(--line);box-shadow:var(--shadow);margin-bottom:22px}
.demo-hero p{color:#d6c9ac;max-width:730px;line-height:1.7;margin:0}

/* --- Compteurs par type de régime --- */
.demo-totaux{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:34px 0 12px}
.demo-total{display:flex;flex-direction:column;gap:7px;align-items:flex-start;text-align:left;padding:18px 18px 16px;background:linear-gradient(180deg,rgba(22,20,18,.94),rgba(10,10,11,.96));border:1px solid var(--line);border-top-width:3px;color:inherit;cursor:pointer;transition:border-color .16s ease,background .16s ease}
.demo-total:hover{background:rgba(201,161,90,.09)}
.demo-total.actif{border-color:var(--gold2);background:rgba(201,161,90,.14)}
.demo-total-num{font-family:Cinzel,Georgia,serif;font-size:34px;line-height:1;color:var(--gold2)}
.demo-total-lab{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--soft);line-height:1.35}
.demo-total.r-LD{border-top-color:#6d9b6a}.demo-total.r-ED{border-top-color:#a8b268}
.demo-total.r-EA{border-top-color:#c78a3c}.demo-total.r-CA{border-top-color:#8e2020}
.demo-balance{color:var(--soft);letter-spacing:.08em;text-transform:uppercase;font-size:12px;margin:0 0 26px}
.demo-balance strong{color:var(--gold2);font-size:15px}

/* --- Filtres --- */
.demo-filtres{display:flex;flex-direction:column;gap:14px;padding:20px;border:1px solid var(--line);background:rgba(10,10,11,.62);margin-bottom:22px}
.demo-filtre-groupe{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.demo-filtre-lab{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);min-width:150px}
.demo-chip{background:rgba(0,0,0,.42);border:1px solid var(--line);color:#ded0b2;padding:7px 13px;font-size:12px;letter-spacing:.09em;text-transform:uppercase;cursor:pointer;transition:.15s ease}
.demo-chip:hover{border-color:var(--gold2);background:rgba(201,161,90,.13)}
.demo-chip.actif{background:linear-gradient(180deg,#d9b366,#8f6b2f);color:#15100a;border-color:var(--gold2);font-weight:700}
.demo-filtre-texte{gap:10px}
.demo-filtre-texte input{flex:1;min-width:200px;background:rgba(0,0,0,.5);border:1px solid var(--line);color:var(--ink);padding:9px 13px;outline:0}
.demo-filtre-texte input:focus{border-color:var(--gold2)}

/* --- Tableau --- */
.demo-compte{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-bottom:12px}
.demo-scroll{overflow-x:auto;border:1px solid var(--line);background:rgba(8,8,9,.6)}
.demo-table{width:100%;border-collapse:collapse;font-size:14px;min-width:700px}
.demo-table thead th{position:sticky;top:0;z-index:2;background:#121110;text-align:left;padding:13px 16px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold2);border-bottom:1px solid var(--line);white-space:nowrap}
.demo-table td{padding:11px 16px;border-bottom:1px solid rgba(201,161,90,.11);color:#ddd2ba;vertical-align:middle}
.demo-table tbody tr:hover{background:rgba(201,161,90,.07)}
.demo-table tbody tr:last-child td{border-bottom:0}
.demo-pays{white-space:nowrap}
.demo-flag{margin-right:10px;font-size:17px;line-height:1}
.demo-sym{text-align:center;width:96px}
/* Rang et indice. La jauge donne la mesure d'un coup d'œil ; sans elle, une
   colonne de nombres à deux décimales ne se compare pas de ligne à ligne. */
.demo-rang{width:62px;text-align:right;color:var(--dim);font-variant-numeric:tabular-nums;white-space:nowrap}
.demo-table thead th.demo-rang{text-align:right}
.demo-score{width:150px;white-space:nowrap}
.demo-jauge{display:inline-block;vertical-align:middle;width:74px;height:6px;background:rgba(201,161,90,.14);border:1px solid rgba(201,161,90,.22);margin-right:10px}
.demo-jauge-fill{display:block;height:100%}
.demo-jauge-fill.r-LD{background:#6d9b6a}.demo-jauge-fill.r-ED{background:#a8b268}
.demo-jauge-fill.r-EA{background:#c78a3c}.demo-jauge-fill.r-CA{background:#8e2020}
.demo-score-val{font-variant-numeric:tabular-nums;color:#e2d6bb}
.demo-vide{color:var(--soft);padding:30px;border:1px dashed var(--line);text-align:center}

/* Pastille du type de régime. Les couleurs ordonnent les quatre catégories
   du plus ouvert au plus fermé ; elles ne portent aucun jugement au-delà de
   ce que la typologie elle-même établit. */
.demo-badge{display:inline-block;min-width:46px;text-align:center;padding:4px 9px;font-size:12px;font-weight:700;letter-spacing:.07em;border:1px solid}
.demo-badge.r-LD{color:#9fd39b;border-color:rgba(109,155,106,.6);background:rgba(109,155,106,.15)}
.demo-badge.r-ED{color:#d6dc9e;border-color:rgba(168,178,104,.6);background:rgba(168,178,104,.15)}
.demo-badge.r-EA{color:#eab871;border-color:rgba(199,138,60,.6);background:rgba(199,138,60,.15)}
.demo-badge.r-CA{color:#e08b8b;border-color:rgba(142,32,32,.75);background:rgba(142,32,32,.22)}

.demo-mark{font-size:14px;line-height:1;cursor:help}
.demo-mark.up{color:#6fbb6a}.demo-mark.down{color:#d05a5a}
.demo-mark.autoc{color:#d05a5a;font-size:17px}.demo-mark.democ{color:#9b8ad6;font-size:17px}

/* --- Légende et source --- */
.demo-legende{margin-top:34px;padding:24px 26px;border:1px solid var(--line);background:rgba(13,13,14,.72)}
.demo-legende h3{font-family:Cinzel,Georgia,serif;color:#f1dca6;text-transform:uppercase;letter-spacing:.16em;font-size:15px;margin:0 0 16px}
.demo-legende ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
/* Deux colonnes, deux éléments : la pastille, puis un bloc de texte unique.
   Un troisième enfant — un nœud de texte nu — deviendrait un élément de
   grille anonyme et retomberait dans la colonne étroite, où l'explication
   se lirait à la verticale. D'où le .demo-leg-txt qui enveloppe le tout. */
.demo-legende li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:16px;align-items:baseline;color:var(--soft);font-size:13.5px;line-height:1.65}
.demo-legende li>.demo-leg-txt{min-width:0}
.demo-legende li strong{color:#e9dcc0}
.demo-legende-sym{margin-top:16px;padding-top:16px;border-top:1px solid rgba(201,161,90,.16)}
.demo-legende-sym .demo-mark{display:inline-block;text-align:center;width:100%}
/* Mise en garde sur l'ordre : au-dessus du tableau, dans le fil de lecture. */
.demo-avis{margin:0 0 18px;padding:14px 18px;border-left:3px solid var(--gold);background:rgba(201,161,90,.07);color:var(--soft);font-size:13.5px;line-height:1.7}
.demo-avis strong{color:#eadcbf}
.demo-source{margin-top:20px;color:var(--dim);font-size:12.5px;line-height:1.7}
.demo-source a{color:var(--gold2);border-bottom:1px solid var(--gold);margin-left:6px}

/* --- Suggestions du champ de recherche --- */
.searchbox-wrap{position:relative;max-width:760px;margin:0 auto}
.searchbox-wrap .searchbox{margin:0}
.sugg{position:absolute;top:100%;left:0;right:0;z-index:40;margin:2px 0 0;padding:0;list-style:none;background:#0a0a0b;border:1px solid rgba(240,208,138,.42);box-shadow:var(--shadow);max-height:340px;overflow-y:auto;text-align:left}
.sugg li{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:11px 18px;cursor:pointer;border-bottom:1px solid rgba(201,161,90,.11)}
.sugg li:last-child{border-bottom:0}
.sugg li:hover,.sugg li.actif{background:rgba(201,161,90,.15)}
.sugg-label{color:#eaddc0;font-size:14.5px}
.sugg-cat{color:var(--dim);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap}

@media (max-width:900px){
  .demo-totaux{grid-template-columns:repeat(2,1fr)}
  .demo-filtre-lab{min-width:100%}
  .demo-legende li{grid-template-columns:52px 1fr;gap:10px}
  .demo-hero{padding-bottom:26px}
}
@media (max-width:620px){
  .demo-total-num{font-size:27px}
  .demo-table{font-size:13px}
  .demo-table td,.demo-table thead th{padding:10px 12px}
  .demo-sym{width:50px}
  .demo-rang{width:44px}
  .demo-score{width:112px}
  .demo-jauge{width:48px}
  .rep-entry-body{padding:20px}
}

/* ==================================================================
   V21 — Fiche réagencée, et fiche en surimpression depuis le tableau
   ================================================================== */

/* Le portrait occupe seul la colonne de gauche : l'état civil est passé à
   droite. Sa proportion est fixe — 2:3, celle des fichiers d'origine — et
   ne dépend donc pas de la longueur du texte : tous les portraits ont
   exactement les mêmes dimensions d'une fiche à l'autre, sans déformation
   ni recadrage. Le portrait reste au regard pendant que le texte défile. */
.profile{align-items:start}
.profile-portrait{position:sticky;top:84px;display:block;min-height:0}
.profile-img-wrap{display:block;overflow:hidden;aspect-ratio:2/3}
.profile-portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.article{display:flex;flex-direction:column}

/* État civil en bandeau : quatre colonnes qui se replient. */
.profile-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:18px 0 6px;padding:14px 0;border-top:1px solid rgba(201,161,90,.2);border-bottom:1px solid rgba(201,161,90,.2)}
.profile-facts>div{padding:0 16px;border-left:1px solid rgba(201,161,90,.14);min-width:0}
.profile-facts>div:first-child{padding-left:0;border-left:0}
.profile-facts dt{color:var(--dim);text-transform:uppercase;font-size:10.5px;letter-spacing:.14em;margin-bottom:5px}
.profile-facts dd{margin:0;color:#eadcbf;font-size:14.5px;line-height:1.4;overflow-wrap:break-word}
.article .notice{margin-top:auto;padding-top:18px}

@media (max-width:900px){
  .profile-portrait{position:relative;top:0}
  .profile-facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 0}
  .profile-facts>div:nth-child(3){padding-left:0;border-left:0}
}
@media (max-width:480px){
  .profile-facts{grid-template-columns:1fr;gap:12px 0}
  .profile-facts>div{padding-left:0;border-left:0}
}

/* --- Pays du tableau qui ouvre une fiche --- */

/* --- Fiche en surimpression ---
   Format rectangulaire : portrait à gauche, texte à droite, la boîte
   centrée et bornée à la hauteur de la fenêtre. Le texte défile seul si
   le résumé est long, pour que la boîte garde ses proportions. */

/* ==================================================================
   V23 — Abréviations traduites, et tableau des régimes empilé sur mobile
   ================================================================== */

/* Rappel du code d'origine dans la légende française. */
.demo-leg-src{color:var(--dim);font-size:12px;letter-spacing:.04em}

/* Sur un écran étroit, six colonnes ne tiennent pas : le tableau les
   empilait derrière un défilement horizontal, et le tiers droit restait
   invisible. Chaque pays devient donc une fiche de deux lignes —
   rang, pays et régime en haut ; indice et symboles en dessous — sans
   rien perdre du contenu ni recourir au défilement latéral. */
/* Seuil calé sur la largeur minimale du tableau (700 px) plus ses marges :
   en deçà, le défilement latéral reviendrait, et c'est précisément ce qu'on
   veut éviter. */
@media (max-width:740px){
  .demo-scroll{overflow-x:visible;border:0;background:none}
  .demo-table{min-width:0;width:100%;display:block;font-size:14px}
  .demo-table thead{display:none}
  .demo-table tbody{display:block}

  .demo-table tbody tr{
    display:grid;
    grid-template-columns:38px minmax(0,1fr) auto auto;
    align-items:center;
    column-gap:10px;row-gap:8px;
    padding:13px 14px;
    border:1px solid var(--line);
    border-top:0;
    background:rgba(8,8,9,.6);
  }
  .demo-table tbody tr:first-child{border-top:1px solid var(--line)}
  .demo-table tbody tr:hover{background:rgba(201,161,90,.07)}
  .demo-table td{display:block;padding:0;border:0}

  /* Le rang tient la colonne de gauche sur les deux lignes. */
  .demo-table td.demo-rang{grid-area:1/1/3/2;width:auto;text-align:center;
    font-size:15px;color:var(--gold2);align-self:center}
  .demo-table td.demo-pays{grid-area:1/2/2/3;white-space:normal}
  .demo-table td.demo-regime{grid-area:1/3/2/5;justify-self:end}
  .demo-table td.demo-score{grid-area:2/2/3/3;width:auto}
  .demo-table td.demo-chg{grid-area:2/3/3/4;width:auto;text-align:right}
  .demo-table td.demo-ep{grid-area:2/4/3/5;width:auto;text-align:right;min-width:18px}

  .demo-jauge{width:calc(100% - 52px);max-width:150px}
  .demo-flag{font-size:16px;margin-right:8px}
  
  /* L'en-tête étant masqué, les deux symboles reçoivent leur étiquette
     quand ils sont présents — sans elle, une flèche isolée ne se
     rattache plus à aucune colonne. */
  .demo-table td.demo-chg:not(:empty):before,
  .demo-table td.demo-ep:not(:empty):before{
    content:attr(data-lab);
    margin-right:6px;
    font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);
  }
}

/* ==================================================================
   V25 — Noms longs sur les cartes
   ================================================================== */

/* « Berdimouhamedov » fait 15 caractères, contre 12 au mot le plus long
   qui suit dans le corpus. À 22 px, il dépassait la largeur de texte de la
   carte (199 px), et le débordement était coupé par l'overflow:hidden de
   celle-ci — d'où un nom de famille amputé.

   Deux garde-fous plutôt qu'un réglage taillé pour ce seul nom : la taille
   suit la largeur de la fenêtre, et la césure automatique prend le relais
   si un nom plus long apparaissait un jour. L'attribut lang du document
   étant tenu à jour par app.js, la coupure suit les règles du français ou
   de l'anglais selon la version consultée. */
.study-copy{min-width:0}
.study-copy h3{font-size:clamp(18px,1.6vw,22px);overflow-wrap:break-word;hyphens:auto}

/* Même défaut, plus marqué, sur les vignettes du répertoire : 150 px de
   texte pour un mot qui en réclame 165 à 19 px. */
.card-info{min-width:0}
.card-info h3{font-size:clamp(15px,1.25vw,19px);overflow-wrap:break-word;hyphens:auto}

/* ==================================================================
   V26 — Téléphone tenu à l'horizontale
   ==================================================================
   Deux causes distinctes se cumulaient.

   1. 100vh, sur un téléphone, désigne l'écran barres de navigateur
      masquées. Une boîte calée dessus dépasse donc ce qu'on voit
      réellement, et il faut faire défiler ou pincer pour la lire en
      entier. 100dvh suit la hauteur réellement disponible. La
      déclaration en vh reste écrite en premier : elle sert de repli
      aux navigateurs qui ignorent dvh.

   2. Sous 820 px de large, la fiche flottante s'empilait — une bande
      de portrait de 190 px, puis le texte. Un téléphone couché mesure
      souvent moins de 820 px de large pour 360 de haut : il ne restait
      qu'une centaine de pixels au texte, tronqué faute de place.
   ================================================================== */



/* Le seuil de 600 px de haut isole les téléphones couchés : une
   tablette à l'horizontale en fait 768 et garde la mise en page large. */
@media (orientation:landscape) and (max-height:600px){

  /* --- Fiche flottante : deux colonnes, calées sur la hauteur visible.
         La fiche entière tient à l'écran ; seul le texte défile, ce qu'un
         résumé de 1300 caractères impose de toute façon. --- */
  /* La colonne fait ici exactement 2:3, comme le fichier : l'image la
     remplit sans rien perdre. On retablit explicitement le remplissage,
     que les regles du mode portrait auraient sinon laisse en « contain ». */

  /* --- Fiche pleine page : le portrait se cale sur la hauteur visible
         au lieu de la largeur, sans quoi il dépasse l'écran. --- */
  .profile{grid-template-columns:minmax(0,calc(62vh * 2 / 3)) minmax(0,1fr);gap:20px}
  .profile{grid-template-columns:minmax(0,calc(62dvh * 2 / 3)) minmax(0,1fr)}
  .profile-portrait{max-width:none;margin:0}
  .article{padding:20px 18px}

  /* --- Bandeaux : 92vh sur 360 px de haut ne laissait pas la place au
         contenu, coincé entre 100 px et 54 px de marge. --- */
  .hero{min-height:0;padding:92px 20px 40px}
  .page-hero{padding-top:94px;padding-bottom:26px}
}

/* Le menu déroulant dépasse l'écran quand le téléphone est couché : il
   compte huit entrées empilées pour 360 px de haut. Il défile désormais. */
@media (max-width:900px){
  .nav.open{
    max-height:calc(100vh - 76px);
    max-height:calc(100dvh - 76px);
    overflow-y:auto;
  }
}

/* ==================================================================
   V29 — Répertoire historique par pays
   ================================================================== */

.pays-compteur{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin:0 0 18px}

.pays-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
.pays-tuile{display:flex;flex-direction:column;gap:12px;padding:14px 14px 16px;
  background:linear-gradient(180deg,#141210,#0a0a0b);
  border:1px solid rgba(201,161,90,.62);border-radius:10px;box-shadow:var(--shadow);
  transition:border-color .16s ease,transform .16s ease,background .16s ease}
.pays-tuile:hover{border-color:var(--gold2);transform:translateY(-2px);background:rgba(201,161,90,.07)}
.pays-tuile .reg-flag{width:100%;aspect-ratio:912/453;border-radius:5px;
  border:1px solid rgba(201,161,90,.62)}
.pays-nom{font-family:Cinzel,Georgia,serif;font-weight:700;text-transform:uppercase;
  color:var(--gold2);font-size:clamp(14px,1.15vw,17px);letter-spacing:.05em;
  line-height:1.2;overflow-wrap:break-word;hyphens:auto}
/* Le point doré tient lieu de puce : il rattache le compte au nom sans
   ajouter de balise. */
.pays-compte{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);margin-top:auto;display:flex;align-items:center;gap:7px}
.pays-compte::before{content:"";width:4px;height:4px;border-radius:50%;
  background:var(--gold);flex:0 0 auto}

/* --- Page d'un pays --- */
.pays-hero .wrap{position:relative}
.pays-retour{display:inline-block;margin-bottom:16px;color:var(--gold2);font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;border-bottom:1px solid transparent}
.pays-retour:hover{border-bottom-color:var(--gold)}
.pays-hero-tete{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.pays-hero-tete .reg-flag{width:132px;flex:0 0 auto;aspect-ratio:912/453;
  border:1px solid var(--line);box-shadow:var(--shadow)}
.pays-hero-tete h1{margin:0}
.pays-hero-tete p{margin:8px 0 0;color:var(--soft);font-size:12px;
  letter-spacing:.16em;text-transform:uppercase}

@media (max-width:620px){
  .pays-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
  .pays-tuile{padding:12px 12px 14px;gap:9px}
  .pays-hero-tete{gap:16px}
  .pays-hero-tete .reg-flag{width:96px}
}

/* ------------------------------------------------------------------
   V30 — Titre lu par les lecteurs d'écran
   ------------------------------------------------------------------
   La page du tableau des régimes s'ouvre sur une bannière : elle porte
   le titre, mais en image. Le <h1> est donc présent dans la page et
   retiré de l'affichage, sans display:none, qui l'aurait rendu muet.   */
.titre-lecteur{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
  margin:-1px; padding:0; border:0;
}

/* ------------------------------------------------------------------
   V33 — La barre passe de huit à neuf entrées
   ------------------------------------------------------------------
   « Répertoires » cède la place à deux entrées sœurs, « Répertoire » et
   « Démocratie ». La barre réclame 883 px là où elle en réclamait 790 :
   entre 900 et 1400 px de large, la dernière entrée passait sous le
   sélecteur de langue et devenait illisible.

   L'écartement et l'interlettrage se resserrent dans cette plage, ce
   qui ramène la barre sous la place disponible. Au-delà de 1400 px
   rien ne change ; en dessous de 900 px, le menu déroulant prend le
   relais, comme avant.                                                */
@media (min-width:901px) and (max-width:1400px){
  .nav{gap:11px}
  .nav a{letter-spacing:.10em;font-size:11.5px}
  .topbar{padding:0 26px}
}
@media (min-width:901px) and (max-width:1180px){
  .nav{gap:8px}
  .nav a{letter-spacing:.06em;font-size:11px}
  .topbar{padding:0 16px}
  .brand small{display:none}
}

/* ==================================================================
   V34 — Fiche documentaire
   ==================================================================
   Deux colonnes en haut : le portrait à gauche, l'identité, l'état
   civil et les quatre volets à droite. La synthèse et les points
   marquants suivent dans leurs propres plaques.

   La colonne de droite fixe la hauteur, le portrait la remplit. Si
   c'était l'inverse — le portrait ayant un rapport fixe — il devien-
   drait plus haut que le texte dès que l'écran s'élargit, et un blanc
   s'ouvrirait sous l'état civil.

   RÈGLE D'ESPACEMENT — la plaque du haut, celle du portrait, tient
   toujours dans l'écran ; c'est elle qu'on ne doit jamais avoir à
   chercher. La synthèse et les points marquants suivent, et peuvent
   déborder d'un cran quand le texte est long : les serrer davantage
   rendrait la fiche illisible, ce qui coûte plus qu'un léger
   défilement.                                                        */
.fiche{max-width:1560px;margin:0 auto;padding:88px 28px 26px;display:grid;gap:16px}
.fiche>*,.fiche .haut>*,.fiche .bloc>*,.fiche .volets>*,
.fiche .marquants>*,.fiche .civil>*,.fiche .civil div>div{min-width:0}
.fiche .plaque{background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
.fiche .haut{display:grid;grid-template-columns:clamp(206px,18.5vw,290px) minmax(0,1fr);
  overflow:hidden}

.fiche .portrait{position:relative;padding:0}
.fiche .portrait-cadre{position:absolute;top:22px;left:22px;right:0;bottom:40px;
  border:1px solid rgba(205,168,92,.5);border-radius:4px;overflow:hidden;background:#14110c}
/* 12 % : le recadrage vertical mord d'abord sur le bas de l'image, pour ne
   jamais entamer le haut de la tête. */
.fiche .portrait-cadre img{width:100%;height:100%;object-fit:cover;object-position:50% 12%}
.fiche .portrait-note{position:absolute;left:24px;right:0;bottom:20px;margin:0;
  font-size:10.5px;color:var(--dim);font-style:italic;line-height:1.4}

.fiche .identite{padding:22px 28px 22px 24px;display:flex;flex-direction:column}
.fiche .eyebrow{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--dim);margin:0 0 9px}
.fiche h1{font-family:Cinzel,Georgia,serif;font-weight:700;font-variant:small-caps;
  color:var(--gold2);font-size:clamp(32px,3.5vw,52px);line-height:1;
  letter-spacing:.02em;margin:0}
.fiche .role{color:var(--gold);font-size:clamp(14px,1.15vw,17px);margin:8px 0 0}

.fiche .civil{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.4fr;margin:18px 0 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.fiche .civil>div{display:flex;align-items:center;gap:14px;padding:12px 16px}
.fiche .civil>div+div{border-left:1px solid var(--line)}
.fiche .civil .ic{flex:0 0 auto;height:42px;width:auto;display:block}
.fiche .civil .drapeau{flex:0 0 auto;width:66px}
/* Le cadre doré des vignettes n'a rien à faire ici : le drapeau est une
   donnée d'état civil, pas une image encadrée. */
.fiche .civil .drapeau .reg-flag{width:66px;aspect-ratio:912/453;border:0;
  border-radius:2px}
.fiche .civil .lab{font-size:10px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--dim);display:block;margin-bottom:3px;white-space:nowrap}
.fiche .civil .val{font-size:16px;color:var(--ink);white-space:nowrap;display:block}
/* « Serbie et République fédérale de Yougoslavie » ne tient pas sur une
   ligne : les noms de pays s'enroulent, les dates restent d'un bloc. */
.fiche .civil>div:first-child .val{white-space:normal;line-height:1.2;
  font-size:clamp(13px,1.05vw,16px)}

.fiche h2{font-family:Cinzel,Georgia,serif;font-weight:700;color:var(--gold2);
  text-transform:uppercase;letter-spacing:.16em;font-size:14px;margin:0 0 10px}
.fiche .bloc{padding:18px 28px}
.fiche .bloc p{margin:0;color:#dcd2ba;font-size:14.5px;line-height:1.75;max-width:125ch}

.fiche .volets{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;padding-top:20px}
.fiche .volet{border-radius:10px;padding:17px 16px;border:1px solid rgba(255,255,255,.07);
  display:flex;flex-direction:column}
.fiche .volet:nth-child(1){background:linear-gradient(160deg,#5a1a0d,#3a1107)}
.fiche .volet:nth-child(2){background:linear-gradient(160deg,#1b3140,#101f28)}
.fiche .volet:nth-child(3){background:linear-gradient(160deg,#27391c,#172410)}
.fiche .volet:nth-child(4){background:linear-gradient(160deg,#6b470f,#412907)}
.fiche .volet svg{display:block;width:42px;height:42px;margin-bottom:11px}
.fiche .volet h3{font-family:Inter,sans-serif;font-weight:600;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:#f3e8cd;margin:0 0 8px}
.fiche .volet p{margin:0;font-size:13px;line-height:1.6;color:#ddd3bd}
.fiche .i-clair{fill:#f2e7cd}
.fiche .i-fonce{fill:#f2e7cd;opacity:.5}
.fiche .s-clair{fill:none;stroke:#f2e7cd;stroke-width:3.6;stroke-linecap:round;
  stroke-linejoin:round}

.fiche .marquants{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px 34px;margin:0;padding:0;list-style:none}
.fiche .marquants li{position:relative;padding-left:20px;font-size:13.5px;
  line-height:1.6;color:#d5cbb4}
.fiche .marquants li::before{content:"";position:absolute;left:2px;top:.66em;
  width:6px;height:6px;background:var(--gold);transform:rotate(45deg)}

/* La note du portrait figure dans la plaque : l'avis générique de bas de
   fiche ferait doublon, il est retiré du gabarit V34. */
.fiche-avis{display:none}

/* Deux paliers seulement, et légers : ils gardent la plaque du portrait
   entière à l'écran sur les portables, sans écraser la lecture. */
@media (min-width:901px) and (max-height:900px){
  .fiche{gap:12px;padding:76px 28px 20px}
  .fiche .portrait-cadre{top:19px;left:19px;bottom:37px}
  .fiche .portrait-note{left:21px;bottom:18px}
  .fiche .identite{padding:19px 26px 19px 22px}
  .fiche .civil{margin-top:15px}
  .fiche .civil>div{padding:9px 16px}
  .fiche .volets{padding-top:16px;gap:12px}
  .fiche .volet{padding:15px 14px}
  .fiche .volet svg{margin-bottom:9px}
  .fiche .volet p{font-size:12.6px;line-height:1.55}
  .fiche .bloc{padding:13px 26px}
  .fiche .bloc p{font-size:13.9px;line-height:1.62}
  .fiche .marquants{gap:6px 32px}
  .fiche .marquants li{font-size:13px;line-height:1.5}
  .fiche h2{margin-bottom:8px}
}
@media (min-width:901px) and (max-height:800px){
  .fiche{gap:11px;padding:72px 26px 18px}
  .fiche .portrait-cadre{top:16px;left:16px;bottom:34px}
  .fiche .portrait-note{left:18px;bottom:15px}
  .fiche .identite{padding:16px 22px 16px 20px}
  .fiche h1{font-size:clamp(30px,3vw,44px)}
  .fiche .civil{margin-top:13px}
  .fiche .civil>div{padding:8px 14px;gap:12px}
  .fiche .civil .ic{height:36px}
  .fiche .civil .drapeau,.fiche .civil .drapeau .reg-flag{width:58px}
  .fiche .civil .val{font-size:15px}
  .fiche .volets{padding-top:14px;gap:11px}
  .fiche .volet{padding:13px 12px}
  .fiche .volet svg{width:36px;height:36px;margin-bottom:8px}
  .fiche .volet p{font-size:12.2px;line-height:1.52}
  .fiche .bloc{padding:12px 22px}
  .fiche .bloc p{font-size:13.4px;line-height:1.6}
  .fiche .marquants{gap:5px 30px}
  .fiche .marquants li{font-size:12.5px;line-height:1.5}
  .fiche h2{font-size:13px;margin-bottom:7px}
}

/* Téléphone, tenu droit : l'identité se loge à droite du portrait,
   l'état civil passe en deux colonnes, les volets aussi. */
@media (max-width:900px){
  .fiche{padding:74px 13px 24px;gap:13px}
  .fiche .haut{grid-template-columns:1fr}
  .fiche .portrait{position:static;padding:16px 16px 0;display:grid;
    grid-template-columns:37% minmax(0,1fr);gap:15px;align-items:start}
  .fiche .portrait-cadre{position:static;width:100%;aspect-ratio:2/3;inset:auto}
  .fiche .portrait-note{display:none}
  .fiche .identite{padding:0 16px 18px}
  .fiche .portrait-texte h1{font-size:clamp(25px,7vw,34px)}
  .fiche .portrait-texte .role{font-size:13.5px;margin-top:6px}
  .fiche .civil{grid-template-columns:repeat(2,1fr);margin-top:16px}
  .fiche .civil>div{gap:11px;padding:11px 12px}
  .fiche .civil>div:nth-child(3){border-left:0}
  .fiche .civil>div:nth-child(n+3){border-top:1px solid var(--line)}
  .fiche .civil .ic{height:34px}
  .fiche .civil .drapeau,.fiche .civil .drapeau .reg-flag{width:52px}
  .fiche .civil .val{font-size:14px}
  .fiche .civil .lab{white-space:normal;font-size:9px;letter-spacing:.1em}
  .fiche .volets{grid-template-columns:repeat(2,1fr);gap:11px;padding-top:16px}
  .fiche .volet{padding:14px 13px}
  .fiche .volet svg{width:34px;height:34px;margin-bottom:9px}
  .fiche .bloc{padding:16px 17px}
  .fiche .marquants{grid-template-columns:1fr;gap:10px}
}

/* La graphie d'origine accompagne le nom sans le concurrencer : plus
   petite, sans petites capitales — elles n'ont pas de sens hors de
   l'alphabet latin — et dans les polices du système, qui seules
   couvrent le khmer, l'arabe et l'éthiopien. */
.fiche h1 .nom-origine{font-family:"AR Khmer","AR Arabe","AR Ethiopien","AR Chinois",
  "AR Coreen",Inter,"Noto Sans Hebrew",system-ui,sans-serif;
  font-variant:normal;font-weight:400;font-size:.46em;line-height:1;
  color:var(--gold);opacity:.82;letter-spacing:0;white-space:nowrap;
  margin-left:.35em;vertical-align:.12em}
@media (max-width:900px){
  .fiche h1 .nom-origine{display:block;margin:5px 0 0;font-size:.62em;white-space:normal}
}

/* ------------------------------------------------------------------
   V38 — Les drapeaux nus sur la page d'un pays
   ------------------------------------------------------------------
   Le cadre doré de .reg-flag convient aux vignettes du répertoire, où
   il fait la carte. Sur la page d'un pays il n'a rien à encadrer : le
   drapeau y accompagne un titre et une fiche, comme une donnée.

   La règle ne vise que cette page — les vignettes de l'index gardent
   leur liseré, conformément au dessin fourni.                        */
.pays-hero-tete .reg-flag,
.reg-card .reg-flag{border:0;border-radius:3px}

/* ------------------------------------------------------------------
   Taille par écriture
   ------------------------------------------------------------------
   0,46 em convient au cyrillique, dont la hauteur d'œil est celle du
   latin. L'arabe, lui, tire l'essentiel de son dessin sous la ligne et
   se lisait à peine ; le khmer et l'éthiopien sont dans le même cas,
   moins nettement. La correction se fait écriture par écriture, plutôt
   qu'en grossissant tout — ce qui déséquilibrerait le titre.          */
.fiche h1 .nom-origine[lang="ar"]{font-size:.68em;vertical-align:.02em}
.fiche h1 .nom-origine[lang="km"]{font-size:.56em;vertical-align:.06em}
.fiche h1 .nom-origine[lang="am"]{font-size:.54em;vertical-align:.08em}
.fiche h1 .nom-origine[lang="zh"],
.fiche h1 .nom-origine[lang="ko"]{font-size:.50em;vertical-align:.09em}
@media (max-width:900px){
  .fiche h1 .nom-origine[lang="ar"]{font-size:.78em}
  .fiche h1 .nom-origine[lang="km"]{font-size:.7em}
  .fiche h1 .nom-origine[lang="am"]{font-size:.68em}
  .fiche h1 .nom-origine[lang="zh"],
  .fiche h1 .nom-origine[lang="ko"]{font-size:.64em}
}

/* ------------------------------------------------------------------
   V104 — Emplacement de portrait en attente, et note propre à une fiche
   ------------------------------------------------------------------ */
.fiche .portrait-cadre.portrait-vide{display:flex;align-items:center;justify-content:center;
  border-style:dashed;border-color:rgba(205,168,92,.34);background:rgba(255,255,255,.015)}
.fiche .portrait-attente{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);text-align:center;padding:0 12px;line-height:1.5}
/* La note tient d'un avertissement, non d'un contenu : mêmes marges que
   les autres plaques, mais un ton en retrait et un filet doré à gauche. */
.fiche .note-fiche{border-left:3px solid var(--gold)}
.fiche .note-fiche h2{font-size:12.5px;letter-spacing:.18em}
.fiche .note-fiche p{font-size:13px;line-height:1.7;color:var(--soft);font-style:italic;
  max-width:112ch}

/* ------------------------------------------------------------------
   V104 — Bannière du répertoire, titre posé par-dessus
   ------------------------------------------------------------------
   L'image fournie ne porte aucun texte : un seul fichier sert les deux
   langues, et le titre suit celle de la page. */
.banniere{position:relative;margin-bottom:22px}
.banniere .demo-banner{margin-bottom:0}
.banniere-titre{position:absolute;left:0;right:0;bottom:0;padding:38px 4% 4%;
  font-family:Cinzel,Georgia,serif;font-weight:700;text-transform:uppercase;
  font-size:clamp(18px,2.5vw,40px);line-height:1.1;letter-spacing:.06em;
  color:var(--gold2);text-align:center;text-shadow:0 2px 18px rgba(0,0,0,.9),0 1px 3px rgba(0,0,0,.95);
  background:linear-gradient(180deg,transparent,rgba(4,4,5,.72))}
@media (max-width:700px){.banniere-titre{padding:24px 4% 5%;letter-spacing:.03em}}