/* ═══════════════════════════════════════════════════════════════════
   custom.css — Crypto & Finance Quantitative — Mars 2026
   Design premium · Montserrat + Inter · Navy/Bleu/Or · Effets pro
   Inspiré style Bassetti Groupe — scroll animations, parallax, glass
   ═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700&family=DM+Serif+Display&display=swap');

/* Hide Rmd auto-generated title (duplicate of hero h1) */
h1.title, .title.toc-ignore, .fluid-row > h1:first-child, #header > h1 { display: none !important; }
.fluid-row:first-child { margin-top: 0 !important; padding-top: 0 !important; }

/* ── Variables ──────────────────────────────────────────────────── */
:root {
  --navy:    #0b1929;
  --navy2:   #102035;
  --blue:    #2558d9;
  --blue-l:  #4a82ff;
  --blue-xl: #93c5fd;
  --gold:    #f5a623;
  --teal:    #00c4d8;
  --green:   #0ab572;
  --red:     #e53e3e;
  --purple:  #7c3aed;
  --white:   #ffffff;
  --bg:      #f0f4fa;
  --bg2:     #e8edf6;
  --text:    #1e2a3a;
  --muted:   #5a6a80;
  --border:  #d8e2f0;
  --r:       12px;
  --sh:      0 2px 18px rgba(11,25,41,0.09);
  --sh-lg:   0 10px 48px rgba(11,25,41,0.18);
}

/* ── Dark mode variables ────────────────────────────────────────── */
body.dark-mode {
  --bg:      #0b1222;
  --bg2:     #101c2e;
  --text:    #d0dae8;
  --muted:   #8a9bb4;
  --white:   #111d2e;
  --border:  #1e3250;
  --navy:    #e2eaf4;
  --navy2:   #0d1a2e;
  --sh:      0 2px 18px rgba(0,0,0,0.30);
  --sh-lg:   0 10px 48px rgba(0,0,0,0.40);
}
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3,
body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 { color: #e2eaf4; }
body.dark-mode h3 { color: #c8d8ea !important; }
body.dark-mode p { color: #8a9bb4; }
body.dark-mode code { background: #172236; color: #74b9ff; }
body.dark-mode pre { background: #060e1a !important; }
body.dark-mode #TOC { background: #111d2e; border-color: #1e3250; }
body.dark-mode #TOC a { color: #8a9bb4; }
body.dark-mode .table { background: #111d2e; border-color: #1e3250 !important; color: #d0dae8; }
body.dark-mode .table thead th { color: #d0dae8 !important; background: #0a1525 !important; border-color: #1e3250 !important; }
body.dark-mode .table th[colspan] { color: #d0dae8 !important; background: #070f1c !important; border-color: #1e3250 !important; }
body.dark-mode .table tbody td { border-color: #1a2a42 !important; color: #c0cee0; }
body.dark-mode .table-striped > tbody > tr:nth-of-type(odd) { background: #0f1a2c; }
body.dark-mode .table > tbody > tr:hover { background: rgba(74,130,255,0.08) !important; }
body.dark-mode .insight { background: #0e1a2e; color: #a0c0e0; }
body.dark-mode .success-box { background: #0a1e18; color: #7cd4a8; }
body.dark-mode .warning-box { background: #1a1808; color: #d4a852; }
body.dark-mode .danger-box { background: #1e0e0e; color: #e08a7a; }
body.dark-mode .method-box { background: #0e1525; color: #a0b8d4; }
body.dark-mode hr::after { background: var(--bg); }
body.dark-mode .kpi-card { border-top-color: #2a5aaa; }
body.dark-mode .analysis-card { border-top-color: #2a5aaa; }
body.dark-mode .analysis-card h4 { color: #e2eaf4 !important; }
body.dark-mode .analysis-card .card-desc { color: #8a9bb4; }
body.dark-mode .q-card h5 { color: #e2eaf4 !important; }
body.dark-mode .q-number { color: rgba(74,130,255,0.15); }
body.dark-mode .feature-card h5 { color: #e2eaf4 !important; }
body.dark-mode ::selection { background: rgba(74,130,255,0.30); color: #fff; }

/* ══════════════════════════════════════════════════════════════════
   NAVBAR TOGGLE BUTTON — discret, non intrusif (toutes pages)
   Petit bouton circulaire en haut à droite, semi-transparent au repos,
   plein opacité au survol. Le dark-toggle a été supprimé sur demande.
   ══════════════════════════════════════════════════════════════════ */
.dark-toggle-btn { display: none !important; }

.navbar-toggle-btn {
  position: fixed; top: 16px; right: 16px; z-index: 1050;
  width: 26px !important; height: 26px !important; border-radius: 50% !important;
  cursor: pointer;
  border: 1px solid rgba(116,185,255,0.20) !important;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px !important;
  color: rgba(116,185,255,0.85) !important;
  background:
    radial-gradient(circle at 30% 25%, rgba(116,185,255,0.10), transparent 60%),
    linear-gradient(135deg, rgba(15,30,50,0.55), rgba(9,18,32,0.70)) !important;
  backdrop-filter: saturate(140%) blur(4px);
  -webkit-backdrop-filter: saturate(140%) blur(4px);
  box-shadow: 0 4px 12px -4px rgba(0,0,0,0.45);
  opacity: 0.40;
  transition: opacity 0.25s ease, transform 0.25s ease, border-color 0.25s, background 0.25s;
  outline: none;
  left: auto !important;
}
.navbar-toggle-btn:hover {
  opacity: 1;
  transform: scale(1.10);
  border-color: rgba(116,185,255,0.55) !important;
  background:
    radial-gradient(circle at 30% 25%, rgba(116,185,255,0.25), transparent 60%),
    linear-gradient(135deg, rgba(20,40,70,0.90), rgba(12,24,42,0.95)) !important;
  box-shadow:
    0 0 0 3px rgba(116,185,255,0.10),
    0 8px 20px -4px rgba(0,0,0,0.55);
}
.navbar-toggle-btn:active { transform: scale(0.95); }
.navbar-toggle-btn:focus-visible {
  opacity: 1;
  border-color: rgba(116,185,255,0.65) !important;
  box-shadow: 0 0 0 3px rgba(116,185,255,0.25);
}
.navbar-toggle-btn i {
  font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', FontAwesome, sans-serif !important;
  font-weight: 900 !important;
  font-style: normal !important;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.navbar-toggle-btn:hover i { transform: scale(1.15); }

/* Quand la navbar est cachée, le bouton remonte en haut pour rester
   accessible et devient plus visible (single anchor). */
body.navbar-hidden .navbar-toggle-btn {
  top: 12px;
  opacity: 0.65;
  border-color: rgba(116,185,255,0.32) !important;
}
body.navbar-hidden .navbar-toggle-btn:hover { opacity: 1; }

/* Variantes thématiques par page hero (or chaud / kintsugi) */
body:has(.hero-landing) .navbar-toggle-btn {
  border-color: rgba(255,217,110,0.35) !important;
  color: rgba(255,217,110,0.90) !important;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,217,110,0.10), transparent 60%),
    linear-gradient(135deg, rgba(15,25,40,0.55), rgba(7,17,29,0.75)) !important;
}
body:has(.hero-landing) .navbar-toggle-btn:hover {
  border-color: rgba(255,217,110,0.65) !important;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,217,110,0.22), transparent 60%),
    linear-gradient(135deg, rgba(20,35,60,0.92), rgba(12,24,42,0.97)) !important;
  box-shadow: 0 0 0 3px rgba(255,217,110,0.12), 0 8px 20px -4px rgba(0,0,0,0.55);
}
body:has(.th-hub) .navbar-toggle-btn {
  border-color: rgba(212,160,23,0.40) !important;
  color: rgba(245,197,75,0.90) !important;
  background:
    radial-gradient(circle at 30% 25%, rgba(212,160,23,0.10), transparent 60%),
    linear-gradient(135deg, rgba(28,25,23,0.55), rgba(20,17,13,0.75)) !important;
}
body:has(.th-hub) .navbar-toggle-btn:hover {
  border-color: rgba(245,197,75,0.70) !important;
  background:
    radial-gradient(circle at 30% 25%, rgba(245,197,75,0.22), transparent 60%),
    linear-gradient(135deg, rgba(35,30,25,0.92), rgba(25,21,17,0.97)) !important;
  box-shadow: 0 0 0 3px rgba(245,197,75,0.12), 0 8px 20px -4px rgba(0,0,0,0.55);
}
/* Mobile : bouton un peu plus accessible */
@media (max-width: 640px) {
  .navbar-toggle-btn { width: 30px !important; height: 30px !important; font-size: 11px !important; top: 14px; right: 14px; opacity: 0.55; }
}

/* ═════════════════════════════════════════════════════════════════════════
   FIX MOBILE 2026-06-08 : .navbar-toggle-btn (œil hide/show) INTERCEPTE
   le burger Bootstrap au même endroit → burger inutilisable sur tap iPhone.
   Solution : cacher l'œil sur mobile, le hide/show navbar n'a pas de sens
   quand la navbar est déjà collapsed par défaut sur mobile.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .navbar-toggle-btn { display: none !important; }
}

/* ── Reset ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
::selection { background: rgba(37,88,217,0.18); color: var(--navy); }

body {
  font-family: 'Inter', 'Montserrat', system-ui, -apple-system, sans-serif !important;
  background: var(--bg);
  color: var(--text);
  line-height: 1.78;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.35s ease, color 0.35s ease;
}

/* ── Titres ─────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', sans-serif !important;
  color: var(--navy);
  font-weight: 700;
  letter-spacing: -0.3px;
}
h1 { font-size: 2.2em; }
h2 {
  font-size: 1.6em;
  margin-top: 3rem;
  padding-bottom: 16px;
  border-bottom: none;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--navy);
  position: relative;
}
h2 .h2-icon {
  width: 34px; height: 34px;
  background: linear-gradient(135deg, var(--blue), var(--teal));
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  color: white; font-size: 15px; flex-shrink: 0;
}
h3 { font-size: 1.2em; color: #1a2e50; margin-top: 1.8rem; }
h4 { font-size: 1.05em; }
p  { color: var(--muted); }

/* ── Container (overridden below in responsive block) ──────────── */

/* ══════════════════════════════════════════════════════════════════
   NAVBAR — Design premium (glassmorphism, gradients, micro-animations)
   ══════════════════════════════════════════════════════════════════ */

/* Anti-FOUC : masque la navbar plate avant que navbar_regroup.js ne la transforme
   Le script pose data-regrouped="1" sur .navbar-nav une fois les 6 menus thématiques construits */
.navbar-nav:not([data-regrouped="1"]) { visibility: hidden !important; }

/* ══════════════════════════════════════════════════════════════════
   JETONS DE LA NAVBAR (2026-08-13) — « une navbar, N palettes »
   ------------------------------------------------------------------
   AVANT : la couleur des libellés (.nav-txt), des icônes (.nav-ico) et
   du soulignement actif était CODÉE EN DUR en bleu/cyan/or/magenta dans
   cette feuille. Une page qui repeignait sa navbar (Narrative violet,
   TradFi cuivre, Google Trends prune…) n'obtenait QUE le fond : le texte
   restait un dégradé blanc-bleuté (.nav-txt force
   -webkit-text-fill-color:transparent, donc tout `color:` de page est
   inopérant) et les icônes gardaient l'arc-en-ciel bleu/cyan/or/magenta.
   D'où « la navbar dénote » sur ces onglets.
   MAINTENANT : tout passe par des variables. Le défaut reproduit à
   l'identique la navbar navy historique ; une page change sa DA en
   redéfinissant 6 jetons (bloc « SKINS » plus bas), sans re-knit.
   Le skin est posé par navbar_regroup.js → body[data-nav-skin].
   ══════════════════════════════════════════════════════════════════ */
:root {
  --nav-base:        rgba(9,18,32,0.72);   /* fond de la barre            */
  --nav-base-scroll: rgba(9,18,32,0.94);   /* fond une fois scrollé       */
  --nav-tint-a:      rgba(37,88,217,0.08); /* halo gauche                 */
  --nav-tint-b:      rgba(0,180,216,0.05); /* halo droit                  */
  --nav-border:      rgba(116,185,255,0.10);
  --nav-border-scroll: rgba(116,185,255,0.18);
  --nav-accent:      #74b9ff;              /* accent principal            */
  --nav-accent-2:    #00cec9;              /* accent secondaire           */
  --nav-glow:        rgba(116,185,255,.5); /* halo hover/actif des icônes */
  --nav-ink:         rgba(220,230,245,0.70);   /* libellés au repos       */
  --nav-ink-strong:  #ffffff;                  /* libellés hover/actif    */
  --nav-ink-grad-a:  rgba(255,255,255,1);      /* dégradé .nav-txt (haut) */
  --nav-ink-grad-b:  rgba(220,230,245,.85);    /* dégradé .nav-txt (bas)  */
  --nav-ico:         #a5c9ff;              /* icône par défaut            */
  /* Icônes par famille — par défaut l'arc-en-ciel historique.
     Un skin peut les ramener à une seule teinte (voir SKINS). */
  --nav-ico-2: #74b9ff;  /* Valorisation */
  --nav-ico-3: #00cec9;  /* Macro        */
  --nav-ico-4: #f6b93b;  /* Marché       */
  --nav-ico-5: #e056fd;  /* Narratifs    */
  --nav-ico-6: #55efc4;  /* Portefeuille */
  --nav-menu-bg-a:   rgba(15,30,50,0.96);      /* menus déroulants        */
  --nav-menu-bg-b:   rgba(9,18,32,0.97);
  --nav-menu-ink:    rgba(220,230,245,0.82);
  --nav-brand-a: #ffffff; /* dégradé du wordmark */
  --nav-brand-b: #a5c9ff;
  --nav-brand-c: #6fc9d1;
}

/* ── Conteneur principal ───────────────────────────────────────── */
.navbar {
  background:
    radial-gradient(ellipse 600px 100% at 10% 0%, var(--nav-tint-a), transparent 60%),
    radial-gradient(ellipse 500px 100% at 85% 0%, var(--nav-tint-b), transparent 60%),
    var(--nav-base) !important;
  border-bottom: 1px solid var(--nav-border) !important;
  box-shadow:
    0 1px 0 0 rgba(255,255,255,0.03) inset,
    0 12px 40px -8px rgba(0,0,0,0.45) !important;
  min-height: 56px; /* refonte navbar 1-ligne 2026-07-20 (ex-64) */
  /* PERF · blur abaissé de 28px à 8px. La navbar est position:fixed donc le
     blur se recalcule à chaque frame de scroll (énorme coût sur 60 fps sur
     toutes les pages du site). 8px préserve l'effet glassmorphism — on a
     déjà rgba(9,18,32,0.72) qui assombrit suffisamment derrière. */
  backdrop-filter: saturate(160%) blur(8px);
  -webkit-backdrop-filter: saturate(160%) blur(8px);
  transition: transform .4s cubic-bezier(.2,.8,.25,1),
              background .4s ease, box-shadow .4s ease,
              border-color .4s ease, min-height .3s ease;
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 1030;
}
.navbar::before {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg,
    transparent,
    color-mix(in srgb, var(--nav-accent) 35%, transparent) 15%,
    color-mix(in srgb, var(--nav-accent-2) 35%, transparent) 50%,
    color-mix(in srgb, var(--nav-accent) 35%, transparent) 85%,
    transparent);
  opacity: .6; pointer-events: none;
}
.navbar.navbar-hidden { transform: translateY(-100%); }
.navbar:hover { transform: translateY(0) !important; }
.navbar.navbar-scrolled {
  min-height: 50px;
  background:
    radial-gradient(ellipse 600px 100% at 10% 0%, var(--nav-tint-a), transparent 60%),
    var(--nav-base-scroll) !important;
  border-bottom-color: var(--nav-border-scroll) !important;
  box-shadow:
    0 1px 0 0 rgba(255,255,255,0.04) inset,
    0 16px 48px -12px rgba(0,0,0,0.65) !important;
}
body { padding-top: 66px; } /* refonte navbar 1-ligne 2026-07-20 (ex-90) */
/* La page Pensée (th-hub) garde une navbar un peu plus haute (min-height 68) */
body:has(.th-hub) { padding-top: 76px; }

/* ── Brand ─────────────────────────────────────────────────────── */
.navbar-brand {
  color: #fff !important; font-weight: 800 !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 15px !important; padding: 18px 20px !important; letter-spacing: .35px;
  background: linear-gradient(135deg, var(--nav-brand-a) 0%, var(--nav-brand-b) 45%, var(--nav-brand-c) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: opacity .3s, letter-spacing .3s;
  position: relative;
}
.navbar-brand::after {
  content: ''; position: absolute; left: 20px; right: 20px; bottom: 10px; height: 1px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--nav-accent) 60%, transparent),
    color-mix(in srgb, var(--nav-accent-2) 30%, transparent),
    transparent);
  opacity: 0; transform: scaleX(0); transform-origin: left;
  transition: opacity .3s, transform .4s cubic-bezier(.2,.8,.25,1);
}
.navbar-brand:hover::after { opacity: 1; transform: scaleX(1); }
.navbar-brand .nb-hi { color: var(--nav-accent); }

/* ── Menu principal aligné à DROITE (demande 2026-07-21) ────────
   .navbar-collapse est un conteneur FLEX ici (pas les floats BS3). On veut le
   menu principal FLUSH contre le bord droit. On réordonne : le dim .navbar-right
   ("Mai 2026") passe avant le menu et absorbe l'espace libre à sa gauche via
   margin-left:auto ; le menu, placé en dernier (order:2), touche le bord droit.
   La marque reste à gauche. */
.navbar-collapse .navbar-nav:not(.navbar-right) { order: 2; margin-left: 0 !important; }
.navbar-collapse .navbar-nav.navbar-right { order: 1; margin-left: auto !important; }
/* Le dropdown le plus à droite (Narratifs, dernier .nav-dropdown) est près du
   bord : on l'ancre à droite pour qu'il s'ouvre vers la gauche et ne sorte pas
   du viewport sur les grands écrans. */
.navbar-nav:not(.navbar-right) > li.nav-dropdown:last-of-type .nav-dropdown-menu { left: auto; right: 0; }

/* ── Liens navbar principaux ───────────────────────────────────── */
.navbar-nav > li > a {
  color: var(--nav-ink) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 11.5px !important; font-weight: 600 !important;
  padding: 20px 14px !important;
  letter-spacing: .5px; text-transform: uppercase;
  display: inline-flex !important; align-items: center; gap: 8px;
  transition: color .25s cubic-bezier(.2,.8,.25,1);
  position: relative; background: transparent !important;
}

/* Indicateur actif : barre gradient en BAS, animée */
.navbar-nav > li > a::after {
  content: ''; position: absolute;
  bottom: 10px; left: 50%; right: auto; height: 2px; width: 0;
  background: linear-gradient(90deg, var(--nav-accent), var(--nav-accent-2));
  border-radius: 2px; opacity: 0;
  transform: translateX(-50%);
  transition: width .35s cubic-bezier(.2,.8,.25,1), opacity .25s;
  box-shadow: 0 0 10px var(--nav-glow);
}
.navbar-nav > li > a:hover { color: var(--nav-ink-strong) !important; }
.navbar-nav > li > a:hover::after { width: 60%; opacity: .9; }
.navbar-nav > li.active > a::after,
.nav-dropdown.active > a::after { width: 70%; opacity: 1; }
.navbar-nav > li.active > a,
.nav-dropdown.active > a { color: var(--nav-ink-strong) !important; }

.navbar-right > li > a { color: rgba(220,230,245,0.32) !important; font-size: 10.5px !important; cursor: default; letter-spacing: .8px; }

/* ── Icônes par groupe (accent couleur) ────────────────────────── */
.nav-ico {
  font-size: 12px; opacity: .78;
  transition: opacity .25s, transform .3s cubic-bezier(.2,.8,.25,1), color .25s, filter .3s;
  color: var(--nav-ico);
}
.navbar-nav > li > a:hover .nav-ico {
  opacity: 1; transform: translateY(-1px) scale(1.08);
  filter: drop-shadow(0 0 6px var(--nav-glow));
}
.navbar-nav > li.active > a .nav-ico,
.nav-dropdown.active > a .nav-ico {
  opacity: 1;
  filter: drop-shadow(0 0 8px var(--nav-glow));
}
/* Couleur par famille (via ordre dans le DOM : 2=Valo bleu · 3=Macro cyan · 4=Marché or · 5=Narratifs magenta) */
.navbar-nav > li:nth-child(2) .nav-ico { color: var(--nav-ico-2); }
.navbar-nav > li:nth-child(3) .nav-ico { color: var(--nav-ico-3); }
.navbar-nav > li:nth-child(4) .nav-ico { color: var(--nav-ico-4); }
.navbar-nav > li:nth-child(5) .nav-ico { color: var(--nav-ico-5); }
.navbar-nav > li:nth-child(6) .nav-ico { color: var(--nav-ico-6); }

.nav-txt {
  font-weight: 600; letter-spacing: .45px;
  background: linear-gradient(180deg, var(--nav-ink-grad-a), var(--nav-ink-grad-b));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.navbar-nav > li > a:hover .nav-txt,
.navbar-nav > li.active > a .nav-txt,
.nav-dropdown.active > a .nav-txt {
  background: linear-gradient(180deg, var(--nav-ink-strong), var(--nav-ink-strong));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.nav-chev {
  font-size: 9px !important; margin-left: 3px; opacity: .5;
  transition: transform .3s cubic-bezier(.2,.8,.25,1), opacity .25s;
}

/* ── Dropdowns ─────────────────────────────────────────────────── */
.nav-dropdown { position: relative; }
.nav-dropdown.open > a .nav-chev,
.nav-dropdown:hover > a .nav-chev { transform: rotate(180deg); opacity: 1; }
.nav-dropdown.open > a,
.nav-dropdown:hover > a { color: var(--nav-ink-strong) !important; }
.nav-dropdown.open > a::after,
.nav-dropdown:hover > a::after { width: 60%; opacity: .9; }

.nav-dropdown-menu {
  position: absolute; top: calc(100% - 4px); left: 0; min-width: 260px;
  list-style: none; padding: 8px; margin: 0;
  background:
    linear-gradient(180deg, var(--nav-menu-bg-a), var(--nav-menu-bg-b)) !important;
  backdrop-filter: saturate(150%) blur(8px);
  -webkit-backdrop-filter: saturate(150%) blur(8px);
  border: 1px solid rgba(116,185,255,0.18); /* repli navigateurs sans color-mix */
  border: 1px solid color-mix(in srgb, var(--nav-accent) 18%, transparent);
  border-radius: 14px;
  box-shadow:
    0 1px 0 0 rgba(255,255,255,.05) inset,
    0 20px 60px -12px rgba(0,0,0,.7),
    0 0 0 1px color-mix(in srgb, var(--nav-accent) 4%, transparent);
  opacity: 0; visibility: hidden;
  transform: translateY(-8px) scale(.97);
  transform-origin: top center;
  transition:
    opacity .25s, visibility .25s,
    transform .3s cubic-bezier(.2,.8,.25,1);
  z-index: 1050;
  overflow: hidden;
}
.nav-dropdown-menu::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent,
    color-mix(in srgb, var(--nav-accent) 40%, transparent) 30%,
    color-mix(in srgb, var(--nav-accent-2) 40%, transparent) 70%, transparent);
  opacity: .7;
}
/* Auto-flip : quand le dropdown sort à droite du viewport, navbar_regroup.js
   ajoute la classe .nav-dropdown--right au parent. Le menu s'aligne alors
   sur le bord droit du parent au lieu du bord gauche, et l'animation part
   du coin haut-droit pour cohérence visuelle. */
.nav-dropdown.nav-dropdown--right > .nav-dropdown-menu {
  left: auto !important;
  right: 0 !important;
  transform-origin: top right !important;
}
.nav-dropdown.open .nav-dropdown-menu,
.nav-dropdown:hover .nav-dropdown-menu {
  opacity: 1; visibility: visible;
  transform: translateY(0) scale(1);
}
.nav-dropdown-menu li { list-style: none; position: relative; }
.nav-dropdown-menu li a {
  display: flex !important; align-items: center; gap: 11px;
  padding: 11px 14px !important; border-radius: 9px !important;
  color: var(--nav-menu-ink) !important; font-size: 12.5px !important;
  font-family: 'Montserrat', sans-serif !important; font-weight: 500 !important;
  letter-spacing: .25px; text-transform: none !important;
  transition: background .2s, color .2s, transform .25s cubic-bezier(.2,.8,.25,1), padding-left .25s;
  position: relative; overflow: hidden;
}
.nav-dropdown-menu li a::after { display: none !important; }
.nav-dropdown-menu li a::before {
  content: ''; position: absolute;
  left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 0;
  background: linear-gradient(180deg, var(--nav-accent), var(--nav-accent-2));
  border-radius: 0 2px 2px 0;
  transition: height .25s cubic-bezier(.2,.8,.25,1);
}
.nav-dropdown-menu li a:hover {
  background: linear-gradient(90deg, rgba(37,88,217,0.22), rgba(37,88,217,0.08)) !important; /* repli */
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--nav-accent) 22%, transparent),
    color-mix(in srgb, var(--nav-accent) 7%, transparent)) !important;
  color: var(--nav-ink-strong) !important;
  padding-left: 18px !important;
}
.nav-dropdown-menu li a:hover::before { height: 70%; }
.nav-dropdown-menu li.active a {
  background: linear-gradient(90deg, rgba(37,88,217,0.35), rgba(37,88,217,0.10)) !important; /* repli */
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--nav-accent) 32%, transparent),
    color-mix(in srgb, var(--nav-accent) 10%, transparent)) !important;
  color: var(--nav-ink-strong) !important;
  padding-left: 18px !important;
}
.nav-dropdown-menu li.active a::before { height: 70%; }
.nav-dd-ico {
  width: 18px; text-align: center; font-size: 11.5px;
  opacity: .75; color: var(--nav-accent);
  transition: transform .25s, color .2s;
}
.nav-dropdown-menu li a:hover .nav-dd-ico {
  transform: scale(1.15) rotate(-4deg);
  color: var(--nav-ico);
}

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 1180px){
  .navbar-nav > li > a { padding: 14px 10px !important; font-size: 11px !important; }
  .nav-txt { letter-spacing: .3px; }
}
@media (max-width: 960px){
  .nav-txt { display: none; }
  .navbar-nav > li > a { padding: 14px 13px !important; }
  .nav-ico { font-size: 15px; }
  .nav-chev { font-size: 8px !important; }
  .nav-dropdown-menu { left: -20px; min-width: 220px; }
}

/* ── Refonte navbar 1-LIGNE (2026-07-20) ─────────────────────────────
   Bootstrap 3 empilait .navbar-header (brand) AU-DESSUS de .navbar-collapse
   (menu) → 122px de haut. On les remet sur une seule rangée en flex, desktop
   uniquement (≥768px). En dessous, l'overlay plein écran mobile reste intact.
   NB : .navbar-collapse.collapse porte un display:block!important Bootstrap
   qu'il faut battre en spécificité (.navbar .navbar-collapse.collapse). */
@media (min-width: 768px){
  .navbar .container{ display:flex !important; align-items:center; flex-wrap:nowrap; }
  .navbar .navbar-header{ float:none !important; display:flex; align-items:center; flex:0 0 auto; }
  .navbar .navbar-collapse.collapse{
    flex:1 1 auto; display:flex !important; flex-wrap:nowrap;
    align-items:center; padding:0; min-height:0;
  }
  .navbar .navbar-nav{
    float:none !important; display:flex !important; flex-wrap:nowrap;
    align-items:center; margin:0 !important;
  }
  .navbar .navbar-collapse > .navbar-nav:first-child{ flex:0 1 auto; }
  .navbar .navbar-nav.navbar-right{ flex:0 0 auto; margin-left:auto; }
  .navbar-brand{
    padding:0 22px 0 0 !important; height:auto; line-height:1;
    display:flex; align-items:center;
  }
  .navbar-nav > li > a{ padding:15px 12px !important; white-space:nowrap; }
}
@media (max-width: 640px){
  .nav-dropdown-menu { left: auto; right: 0; }
}

/* ── Animations ─────────────────────────────────────────────────── */
@keyframes fadeUp   { from{opacity:0;transform:translateY(32px)} to{opacity:1;transform:none} }
@keyframes fadeDown { from{opacity:0;transform:translateY(-24px)} to{opacity:1;transform:none} }
@keyframes fadeLeft { from{opacity:0;transform:translateX(-40px)} to{opacity:1;transform:none} }
@keyframes fadeRight{ from{opacity:0;transform:translateX(40px)} to{opacity:1;transform:none} }
@keyframes fadeScale{ from{opacity:0;transform:scale(0.92)} to{opacity:1;transform:none} }
@keyframes gradMove { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes float    { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes drawLine { to { stroke-dashoffset: 0; } }
@keyframes popDot   { from{r:0;opacity:0} to{opacity:1} }
@keyframes fadeArea { to { opacity: 1; } }
@keyframes shimmer  { from{transform:translateX(-100%)} to{transform:translateX(200%)} }
@keyframes pulse    { 0%,100%{opacity:1} 50%{opacity:0.6} }
@keyframes slideIn  { from{transform:scaleX(0)} to{transform:scaleX(1)} }
@keyframes glowPulse{ 0%,100%{box-shadow:0 0 20px rgba(37,88,217,0.15)} 50%{box-shadow:0 0 40px rgba(37,88,217,0.30)} }
@keyframes particleFloat {
  0%   { transform: translate(0, 0) scale(1); opacity: 0; }
  10%  { opacity: 0.6; }
  90%  { opacity: 0.6; }
  100% { transform: translate(var(--tx), var(--ty)) scale(0.3); opacity: 0; }
}

/* ── Page transitions ───────────────────────────────────────────── */
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }
body {
  animation: pageIn 0.4s ease forwards;
}
body.page-leaving {
  opacity: 0 !important;
  transition: opacity 0.25s ease;
}

/* ── Scroll-triggered reveal (IntersectionObserver) ────────────── */
.reveal, .scroll-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(.16,1,.3,1), transform 0.7s cubic-bezier(.16,1,.3,1);
}
.reveal.reveal-left, .scroll-reveal.reveal-left {
  transform: translateX(-50px);
}
.reveal.reveal-right, .scroll-reveal.reveal-right {
  transform: translateX(50px);
}
.reveal.reveal-scale, .scroll-reveal.reveal-scale {
  transform: scale(0.92);
}
.reveal.is-visible, .scroll-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Staggered children */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(.16,1,.3,1), transform 0.6s cubic-bezier(.16,1,.3,1);
}
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0.04s; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.10s; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.16s; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.22s; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 0.28s; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 0.34s; }
.reveal-stagger.is-visible > * {
  opacity: 1;
  transform: none;
}

/* ── Hero ───────────────────────────────────────────────────────── */
.hero-landing {
  background: radial-gradient(ellipse at 80% 20%, rgba(37,88,217,0.12) 0%, transparent 50%), radial-gradient(ellipse at 20% 80%, rgba(0,196,216,0.06) 0%, transparent 50%), #050a12;
  border-radius: 22px;
  padding: 0;
  margin-top: 24px;
  margin-bottom: 56px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(0,0,0,0.60);
  display: flex;
  justify-content: center;
  min-height: 420px;
}
/* Grid overlay — disabled */
.hero-landing::before {
  display: none;
}
/* Glow orb top-right */
.hero-landing::after {
  display: none;
}
/* Particles canvas overlay */
.hero-particles {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 1;
  overflow: hidden;
}
.hero-particle {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: rgba(74,130,255,0.5);
  animation: particleFloat var(--dur, 8s) linear infinite;
  animation-delay: var(--delay, 0s);
}
.hero-content {
  padding: 64px 68px;
  flex: 1;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.hero-content > * {
  animation: fadeUp 0.8s cubic-bezier(.2,.8,.25,1) both;
}
.hero-content > *:nth-child(1) { animation-delay: 0.1s; }
.hero-content > *:nth-child(2) { animation-delay: 0.25s; }
.hero-content > *:nth-child(3) { animation-delay: 0.4s; }
.hero-content > *:nth-child(4) { animation-delay: 0.55s; }
.hero-content > *:nth-child(5) { animation-delay: 0.7s; }
.hero-visual {
  width: 340px; flex-shrink: 0;
  display: flex; align-items: flex-end;
  padding: 0 40px 40px 0;
  position: relative; z-index: 2;
  animation: fadeRight 1s cubic-bezier(.2,.8,.25,1) 0.5s both;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase;
  font-family: 'Montserrat', sans-serif;
  color: var(--blue-l);
  background: rgba(37,88,217,0.14);
  border: 1px solid rgba(74,130,255,0.28);
  border-radius: 6px; padding: 6px 16px;
  margin-bottom: 20px; width: fit-content;
  backdrop-filter: blur(8px);
}
.hero-eyebrow::before { content: ''; width:6px; height:6px; border-radius:50%; background:var(--blue-l); animation: pulse 2s ease infinite; box-shadow: 0 0 8px var(--blue-l); }
.hero-landing h1 {
  color: #fff !important; border: none !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 3.2em !important; font-weight: 900;
  margin: 0 0 16px; padding: 0;
  line-height: 1.08; letter-spacing: -2px;
}
.hero-landing h1 .h1-light { font-weight: 300; color: var(--blue-xl); }
.hero-sub {
  font-size: 17px; color: #8cb4d8;
  font-family: 'Inter', sans-serif;
  max-width: 580px; line-height: 1.62; margin-bottom: 18px; font-weight: 400;
}
.hero-desc {
  font-size: 14px; color: #638aae;
  font-family: 'Inter', sans-serif;
  line-height: 1.88; max-width: 620px; margin-bottom: 32px;
}
.hero-tags { display: flex; flex-wrap: wrap; gap: 9px; }
.hero-tag {
  font-size: 11.5px; font-weight: 600; color: #8cb4d8;
  font-family: 'Montserrat', sans-serif;
  background: rgba(37,88,217,0.10);
  border: 1px solid rgba(74,130,255,0.20);
  border-radius: 6px; padding: 5px 14px;
  transition: all .3s cubic-bezier(.2,.8,.25,1);
  backdrop-filter: blur(4px);
}
.hero-tag {
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  background: rgba(37,88,217,0.12);
  border: 1px solid rgba(74,130,255,0.22);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.04);
}
.hero-tag:hover { background: rgba(37,88,217,0.30); color: #d0e8f8; transform: translateY(-2px) scale(1.05); box-shadow: 0 6px 24px rgba(37,88,217,0.25), 0 0 12px rgba(74,130,255,0.15); }
/* Source logos */
.hero-src-logo {
  width: 28px; height: 28px; border-radius: 6px;
  filter: grayscale(100%) brightness(0.7);
  transition: all .3s ease;
  cursor: default;
}
.hero-src-logo:hover { filter: grayscale(0%) brightness(1); transform: scale(1.15); }
/* CTA button */
.hero-cta {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 13px; font-weight: 700; font-family: 'Montserrat', sans-serif;
  color: #93c5fd; letter-spacing: 0.5px;
  background: transparent;
  border: 1.5px solid rgba(147,197,253,0.35);
  border-radius: 10px; padding: 10px 28px;
  text-decoration: none;
  transition: all .35s cubic-bezier(.2,.8,.25,1);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  animation: fadeUp .8s ease .8s both;
}
.hero-cta:hover {
  color: #fff; border-color: rgba(147,197,253,0.7);
  background: rgba(37,88,217,0.18);
  box-shadow: 0 0 20px rgba(74,130,255,0.25), 0 4px 16px rgba(0,0,0,0.2);
  transform: translateY(-2px);
}

/* ── KPI grid ───────────────────────────────────────────────────── */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(155px,1fr));
  gap: 16px; margin: 40px 0;
}
.kpi-card {
  background: var(--white); border-radius: var(--r);
  padding: 22px 18px; text-align: center;
  box-shadow: var(--sh); border: 1px solid var(--border);
  border-top: 3px solid var(--blue);
  transition: transform .28s ease, box-shadow .28s ease;
  animation: fadeUp .6s ease both;
  position: relative; overflow: hidden;
}
.kpi-card::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--teal));
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s ease;
}
.kpi-card:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); }
.kpi-card:hover::after { transform: scaleX(1); }
.kpi-icon-wrap {
  width: 46px; height: 46px; border-radius: 11px;
  background: rgba(37,88,217,0.09);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 12px; font-size: 18px; color: var(--blue);
  animation: float 3.5s ease-in-out infinite;
}
.kpi-value { font-size: 2.15em; font-weight: 800; color: var(--navy); line-height: 1; display: block; }
.kpi-label { font-size: 11.5px; color: var(--muted); margin-top: 5px; font-weight: 600; letter-spacing: 0.2px; display: block; }

/* ── Section "Questions clés" ───────────────────────────────────── */
.questions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
  gap: 18px; margin: 28px 0;
}
.q-card {
  background: var(--white); border-radius: 14px; padding: 24px 22px;
  box-shadow: var(--sh); border: 1px solid var(--border);
  transition: transform .25s, box-shadow .25s;
  position: relative; overflow: hidden;
}
.q-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }
.q-number {
  font-size: 3em; font-weight: 800; line-height: 1;
  color: rgba(37,88,217,0.10);
  position: absolute; top: 10px; right: 16px;
  font-family: 'DM Serif Display', serif;
}
.q-icon { font-size: 24px; color: var(--blue); margin-bottom: 12px; display: block; }
.q-card h5 { font-size: 14px; font-weight: 700; margin: 0 0 8px; color: var(--navy) !important; }
.q-card p  { font-size: 13px; color: var(--muted); margin: 0 0 14px; line-height: 1.6; }
.q-link    { font-size: 12.5px; font-weight: 700; color: var(--blue); text-decoration: none; transition: gap .2s; display: inline-flex; align-items: center; gap: 5px; }
.q-link:hover { gap: 8px; text-decoration: none; }

/* ── Analysis cards ─────────────────────────────────────────────── */
.nav-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(285px,1fr));
  gap: 24px; margin: 36px 0;
}
.analysis-card {
  background: var(--white); border-radius: 16px; padding: 30px 28px 26px;
  box-shadow: 0 4px 24px rgba(11,25,41,0.08); border: 1px solid var(--border);
  border-top: 4px solid var(--blue);
  text-decoration: none !important; color: var(--navy);
  display: flex; flex-direction: column;
  transition: transform .35s cubic-bezier(.2,.8,.25,1), box-shadow .35s ease;
  position: relative; overflow: hidden;
}
/* Shimmer effect on hover */
.analysis-card::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.18) 50%, transparent 65%);
  transform: translateX(-100%);
  transition: transform .8s cubic-bezier(.2,.8,.25,1);
}
.analysis-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 60px rgba(11,25,41,0.16), 0 0 0 1px rgba(37,88,217,0.10);
  text-decoration: none !important;
}
.analysis-card:hover::before { transform: translateX(200%); }
.card-icon-box {
  width: 56px; height: 56px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 23px; margin-bottom: 18px;
  background: rgba(37,88,217,0.09); color: var(--blue);
  transition: transform .35s cubic-bezier(.2,.8,.25,1), box-shadow .35s;
}
.analysis-card:hover .card-icon-box { transform: scale(1.12) rotate(-4deg); box-shadow: 0 6px 20px rgba(37,88,217,0.15); }
.analysis-card h4 { color: var(--navy) !important; margin: 0 0 10px; font-size: 16px; font-weight: 700; line-height: 1.3; font-family: 'Montserrat', sans-serif !important; }
.analysis-card .card-desc { color: var(--muted); font-size: 13.5px; margin: 0; line-height: 1.68; flex: 1; }
.card-cta {
  margin-top: 20px; font-size: 13px; font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  display: inline-flex; align-items: center; gap: 7px;
  transition: gap .3s cubic-bezier(.2,.8,.25,1), transform .3s;
}
.analysis-card:hover .card-cta { gap: 12px; transform: translateX(4px); }

/* ── Feature grid ───────────────────────────────────────────────── */
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); gap: 15px; margin: 26px 0; }
.feature-card {
  background: var(--white); border-radius: var(--r); padding: 20px 18px;
  box-shadow: var(--sh); border: 1px solid var(--border);
  text-align: center; transition: transform .22s, box-shadow .22s;
}
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }
.feat-icon { font-size: 26px; color: var(--blue); display: block; margin-bottom: 10px; }
.feature-card h5 { font-size: 13.5px; margin: 0 0 5px; color: var(--navy) !important; }
.feature-card p  { font-size: 12.5px; color: var(--muted); margin: 0; line-height: 1.55; }

/* ── Timeline halvings ──────────────────────────────────────────── */
.halving-timeline { margin: 36px 0; position: relative; }
.halving-timeline::before {
  content: '';
  position: absolute; left: 140px; top: 20px; bottom: 20px; width: 3px;
  background: linear-gradient(180deg, var(--blue), var(--teal), var(--gold));
  border-radius: 3px;
  box-shadow: 0 0 12px rgba(37,88,217,0.20);
}
.tl-item {
  display: flex; align-items: flex-start;
  gap: 0; margin-bottom: 32px;
  position: relative;
}
.tl-left {
  width: 130px; flex-shrink: 0; text-align: right;
  padding-right: 16px; padding-top: 2px;
}
.tl-date { font-size: 12px; font-weight: 700; color: var(--blue); display: block; font-family: 'Montserrat', sans-serif; }
.tl-price { font-size: 11px; color: var(--muted); display: block; margin-top: 2px; }
.tl-dot-wrap {
  width: 22px; flex-shrink: 0;
  display: flex; justify-content: center; padding-top: 4px;
}
.tl-dot {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--blue); border: 3px solid white;
  box-shadow: 0 0 0 3px var(--blue), 0 0 12px rgba(37,88,217,0.30);
  flex-shrink: 0;
  transition: transform 0.3s, box-shadow 0.3s;
}
.tl-item:hover .tl-dot { transform: scale(1.3); }
.tl-dot.gold  { background: var(--gold); box-shadow: 0 0 0 3px var(--gold), 0 0 12px rgba(245,166,35,0.30); }
.tl-dot.teal  { background: var(--teal); box-shadow: 0 0 0 3px var(--teal), 0 0 12px rgba(0,196,216,0.30); }
.tl-dot.green { background: var(--green); box-shadow: 0 0 0 3px var(--green), 0 0 12px rgba(10,181,114,0.30); }
.tl-right {
  flex: 1; background: var(--white); border-radius: 12px;
  padding: 16px 20px; margin-left: 14px;
  box-shadow: 0 4px 20px rgba(11,25,41,0.08); border: 1px solid var(--border);
  border-left: 3px solid var(--blue);
  transition: transform 0.3s cubic-bezier(.2,.8,.25,1), box-shadow 0.3s;
}
.tl-item:hover .tl-right { transform: translateX(6px); box-shadow: 0 8px 32px rgba(11,25,41,0.14); }
.tl-right.gold-border  { border-left-color: var(--gold); }
.tl-right.teal-border  { border-left-color: var(--teal); }
.tl-right.green-border { border-left-color: var(--green); }
.tl-right strong { font-size: 14px; color: var(--navy); display: block; margin-bottom: 4px; }
.tl-right p { font-size: 12.5px; color: var(--muted); margin: 0; line-height: 1.55; }
.tl-perf { font-size: 12px; font-weight: 700; display: inline-block; margin-top: 6px; padding: 2px 8px; border-radius: 4px; }
.tl-perf.up   { background: rgba(10,181,114,0.12); color: var(--green); }
.tl-perf.down { background: rgba(229,62,62,0.10);  color: var(--red); }

/* ── Info boxes ─────────────────────────────────────────────────── */
.insight, .success-box, .warning-box, .danger-box, .method-box {
  border-radius: var(--r); padding: 20px 26px; margin: 24px 0;
  font-size: 14.5px; line-height: 1.78; animation: fadeUp .5s ease both;
  position: relative;
}
.insight     { background:#eff6ff; border-left:5px solid var(--blue);   color:#1a3060; box-shadow:0 3px 16px rgba(37,88,217,0.08); }
.success-box { background:#f0fdf7; border-left:5px solid var(--green);  color:#064e2a; box-shadow:0 3px 16px rgba(10,181,114,0.08); }
.warning-box { background:#fffbf0; border-left:5px solid #d48000;       color:#6b3f00; box-shadow:0 3px 16px rgba(212,128,0,0.08); }
.danger-box  { background:#fff4f4; border-left:5px solid var(--red);    color:#6b1a10; box-shadow:0 3px 16px rgba(229,62,62,0.08); }
.method-box  { background:#f8f9ff; border-left:5px solid var(--blue);   color:var(--navy); box-shadow:0 3px 16px rgba(37,88,217,0.06); }

/* ── Key quote block ────────────────────────────────────────────── */
.key-quote {
  background: linear-gradient(135deg, var(--navy2) 0%, #0f2a50 100%);
  border-radius: 14px; padding: 28px 32px; margin: 28px 0;
  color: white; position: relative; overflow: hidden;
  box-shadow: 0 8px 32px rgba(11,25,41,0.28);
}
.key-quote::before {
  content: '\201C';
  position: absolute; top: -10px; left: 18px;
  font-size: 100px; color: rgba(37,88,217,0.18);
  font-family: 'DM Serif Display', serif; line-height: 1;
}
.key-quote p { color: #b0c8e4; font-size: 15px; line-height: 1.85; margin: 0; position: relative; z-index: 1; }
.key-quote strong { color: white; }

/* ── Dark section ───────────────────────────────────────────────── */
.section-dark {
  background: var(--navy2);
  border-radius: 14px; padding: 32px 36px; margin: 36px 0;
  color: white; box-shadow: 0 6px 28px rgba(11,25,41,0.24);
}
.section-dark h3 { color: white !important; }
.section-dark p  { color: #8aaac8; }

/* ── Séparateur ─────────────────────────────────────────────────── */
hr {
  border: none; height: 2px; margin: 64px 0; position: relative;
  background: linear-gradient(90deg, transparent 0%, var(--border) 20%, var(--blue) 50%, var(--border) 80%, transparent 100%);
  opacity: 0.5;
}
hr::after {
  content: '\25C6';
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%,-50%);
  color: var(--blue); font-size: 11px;
  background: var(--bg); padding: 0 16px;
}

/* ── Code ───────────────────────────────────────────────────────── */
pre {
  background: #0b1929 !important; color: #c4d4e8 !important;
  border: none !important; border-left: 4px solid var(--blue) !important;
  border-radius: 10px !important; font-size: 11.5px !important;
  padding: 16px 20px !important; box-shadow: 0 6px 24px rgba(0,0,0,0.24) !important;
}
code { background:#eef2fc; border-radius:4px; padding:2px 7px; font-size:13px; color:var(--blue); font-weight:600; }
pre code { background:transparent !important; color:#c4d4e8 !important; padding:0; font-weight:400; }

/* ── TOC ────────────────────────────────────────────────────────── */
#TOC { background:var(--white); border-radius:var(--r); padding:16px 18px; box-shadow:var(--sh); border:1px solid var(--border); font-size:13px; }
#TOC a { color:#3a4a64; } #TOC a:hover { color:var(--blue); text-decoration:none; }
#TOC .active { color:var(--blue); font-weight:700; }

/* ── Tables ─────────────────────────────────────────────────────── */
.table { background:var(--white); border-radius:var(--r); overflow:hidden; box-shadow:var(--sh); border:1px solid var(--border) !important; font-size:13.5px; }
.table thead th { font-weight:700 !important; padding:13px 18px !important; text-transform:uppercase; font-size:11px !important; letter-spacing:0.5px; color:#fff !important; background:#1a2744 !important; border-color:#253a5a !important; }
.table thead th span { color: inherit !important; }
.table tbody td { padding:11px 18px !important; vertical-align:middle; }
.table-striped > tbody > tr:nth-of-type(odd) { background:#f8faff; }
.table > tbody > tr:hover { background:rgba(37,88,217,0.04) !important; }
/* kableExtra header groups */
.table th[colspan] { color:#fff !important; background:#0f1d33 !important; border-color:#253a5a !important; }

/* ── Figures ────────────────────────────────────────────────────── */
.figure { border-radius:14px; overflow:hidden; box-shadow:0 10px 44px rgba(11,25,41,0.22); margin:28px 0; background:var(--navy); }

/* ── Badges ─────────────────────────────────────────────────────── */
.badge-new    { background:rgba(0,196,216,0.14); color:#00a8ba; border:1px solid rgba(0,196,216,0.32); border-radius:4px; padding:2px 8px; font-size:10.5px; font-weight:700; letter-spacing:0.5px; margin-left:7px; vertical-align:middle; }
.badge-update { background:rgba(10,181,114,0.14); color:var(--green); border:1px solid rgba(10,181,114,0.32); border-radius:4px; padding:2px 8px; font-size:10.5px; font-weight:700; letter-spacing:0.5px; margin-left:7px; vertical-align:middle; }

/* ── Footer ─────────────────────────────────────────────────────── */
.site-footer {
  background: linear-gradient(135deg, var(--navy) 0%, #0a1525 100%);
  color:#6a8ab0; text-align:center; padding:56px 40px;
  margin-top:100px; border-radius:22px; font-size:13.5px; line-height:2;
  border-top:3px solid var(--blue);
  box-shadow: 0 -8px 40px rgba(11,25,41,0.22), inset 0 1px 0 rgba(37,88,217,0.15);
  position:relative; overflow:hidden;
}
.site-footer::before {
  content:''; position:absolute; inset:0;
  background-image: linear-gradient(rgba(37,88,217,0.04) 1px,transparent 1px), linear-gradient(90deg,rgba(37,88,217,0.04) 1px,transparent 1px);
  background-size:40px 40px; pointer-events:none;
}
/* Glow orb in footer */
.site-footer::after {
  content:''; position:absolute; bottom:-80px; left:50%; transform:translateX(-50%);
  width:500px; height:250px;
  background:radial-gradient(ellipse, rgba(37,88,217,0.12) 0%, transparent 70%);
  pointer-events:none;
}
.footer-brand {
  font-family: 'Montserrat', sans-serif;
  font-size:1.85em; font-weight:900; color:#fff; letter-spacing:-0.5px; display:block; margin-bottom:6px;
  position: relative; z-index: 1;
}
.footer-sub { font-size:12.5px; color:#3a5a7a; margin-bottom:20px; display:block; position:relative; z-index:1; }
.footer-links { position:relative; z-index:1; }
.footer-links a {
  color:#5a9cde; margin:0 12px; font-size:13px; font-weight:500;
  transition: color .3s, transform .3s; display:inline-block;
}
.footer-links a:hover { color:white; transform: translateY(-2px); text-decoration: none; }
.footer-sep { color:#1e3a5a; margin:0 2px; }

/* ── Container max-width ─────────────────────────────────────────── */
.main-container { max-width: 1260px !important; padding: 40px 32px 100px; }

/* ── Smooth page entrance ──────────────────────────────────────── */
.main-container > .hero-landing { animation: fadeScale 0.8s cubic-bezier(.2,.8,.25,1) both; }

/* ── Enhanced h2 bottom gradient line ──────────────────────────── */
h2::after {
  content: '';
  position: absolute; bottom: 0; left: 0;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--teal) 40%, transparent 100%);
  border-radius: 2px;
}

/* ── Print ───────────────────────────────────────────────────────── */
@media print { .navbar,#TOC,.site-footer{display:none} .main-container{max-width:100% !important} }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width:960px){
  .hero-visual{display:none} .hero-content{padding:42px 28px}
  .hero-landing h1{font-size:2.2em !important} .main-container{padding:0 18px 60px}
  .nav-cards-grid{grid-template-columns:1fr} .kpi-row{grid-template-columns:repeat(3,1fr)}
  .halving-timeline::before{left:110px}
  .tl-left{width:100px}
  .hero-landing{min-height:340px;border-radius:16px;}
}
@media (max-width:600px){
  .kpi-row{grid-template-columns:repeat(2,1fr)} .hero-landing h1{font-size:1.75em !important}
  .questions-grid{grid-template-columns:1fr}
  .hero-content{padding:32px 22px}
}

/* ── Large screen (PC fixe / ultrawide >= 1600px) ──────────────────
   Adapte la largeur max du contenu pour mieux exploiter les grands ecrans
   sans modifier le rendu sur MacBook (1440-1512px). La variable --max-w
   pilote .ca-section et .ca-kintsugi (accueil.css), .main-container ici. */
@media (min-width: 1600px) {
  :root { --max-w: 1700px; }
  .main-container { max-width: 1700px !important; }
}

/* ── Reduce motion for accessibility ───────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .reveal-stagger > * { opacity: 1; transform: none; }
}

/* ── Google Trends Widget Styling ─────────────────────────────── */
/* Target the Google Trends widget containers and their iframes */
[id^="gt-w-"] {
  min-height: 300px;
}
[id^="gt-w-"] iframe {
  width: 100% !important;
  min-height: 300px !important;
  height: 320px !important;
  border: none !important;
  display: block !important;
}
/* Fix Google Trends widget internal overflow */
[id^="gt-w-"] > div {
  width: 100% !important;
}

/* ── Navbar hidden : masque et ajuste padding (boutons dock gérés plus haut) ──── */
body.navbar-hidden .navbar-fixed-top,
body.navbar-hidden .navbar {
  transform: translateY(-100%);
  opacity: 0; pointer-events: none;
  transition: transform .35s cubic-bezier(.2,.8,.25,1), opacity .3s;
}
body.navbar-hidden .main-container { padding-top: 10px !important; }
body.navbar-hidden #TOC { top: 10px !important; }

/* ════════════════════════════════════════════════════════════════
   PERF GLOBAL · pause animations + GPU compositing
   Appliqué à toutes les pages du site (mai 2026)
   ════════════════════════════════════════════════════════════════ */

/* 1. Quand l'onglet n'est pas visible, pause toutes les animations infinite.
      La classe html.tab-hidden est posée par perf-utils.js (cf <script>
      inline dans la navbar). */
html.tab-hidden *,
html.tab-hidden *::before,
html.tab-hidden *::after {
  animation-play-state: paused !important;
}

/* 2. PERF DÉSACTIVÉ · contain: paint sur Plotly empêchait l'affichage des
      graphes sur certains Chrome (clipping incorrect du SVG). */
/* .plotly, .plot-container, .js-plotly-plot { contain: layout paint; } */

/* 3. Particules hero · réduit la quantité animée. Les particles infinite
      coûtent en GPU même si chacune est simple ; à l'unité c'est OK, à 20
      simultanées sur certains hero c'est sensible. */
.hero-particle:nth-child(n+8) { display: none; }

/* 4. Respecte prefers-reduced-motion : coupe les animations infinite
      (Apple+Microsoft accessibility setting). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   NAVBAR · OVERRIDES PAGES HERO
   1. Accueil principal (body:has(.hero-landing))  → aurora navy + or chaud
   2. Thèse hub (body:has(.th-hub))                → marble & kintsugi
   Les autres pages gardent la navbar tech navy par défaut.
   ════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────
   1. NAVBAR ACCUEIL PRINCIPAL — Aurora Navy + Or Chaud
   Cinéma : fond navy cosmique avec aurore verte/violette en bas,
   wordmark serif doré, liens dorés caps espacés, transparente
   pour fondu avec l'image hero.
   ────────────────────────────────────────────────────────────── */
/* Jetons de la DA Accueil — BLEU ÉLECTRIQUE, pas or (corrigé 2026-08-13).
   La palette de l'accueil est passée du cyan au bleu #3d8bff le 14/07/2026
   pour épouser l'image/vidéo hero (voir accueil.css, vars --gold/--cyan qui
   portent encore leur nom d'origine mais valent du bleu). Ce bloc de navbar,
   lui, était resté sur la DA « or chaud » d'avant : libellés crème, icônes,
   soulignement, filet du bas et boutons flottants dorés au-dessus d'un globe
   bleu — la barre jurait avec sa propre page. Tout est ramené sur le bleu
   signature ; la personnalité typographique (mono, capitales espacées) ne
   change pas. */
body:has(.hero-landing) {
  --nav-accent:   #3d8bff;
  --nav-accent-2: #74aeff;
  --nav-glow:     rgba(61,139,255,.45);
  --nav-ink:        rgba(219,233,255,0.85);
  --nav-ink-strong: #eaf3ff;
  --nav-ink-grad-a: rgba(245,250,255,1);
  --nav-ink-grad-b: rgba(198,220,255,.88);
  --nav-ico:   #74aeff;
  --nav-ico-2: #3d8bff; --nav-ico-3: #74aeff; --nav-ico-4: #5aa0ff;
  --nav-ico-5: #8fc0ff; --nav-ico-6: #4f96ff;
  --nav-menu-ink: rgba(219,233,255,0.82);
}
body:has(.hero-landing) .navbar {
  background:
    /* Aurore subtile en bas de la navbar — vert teal + violet */
    linear-gradient(180deg,
      transparent 0%,
      rgba(61, 139, 255, 0.05) 70%,
      rgba(116, 174, 255, 0.06) 88%,
      rgba(61, 139, 255, 0.12) 100%
    ),
    /* Brume étoilée */
    radial-gradient(ellipse 1200px 100% at 50% 0%, rgba(20, 35, 60, 0.55), transparent 80%),
    /* Base bleu nuit profond */
    rgba(7, 17, 29, 0.85) !important;
  border-bottom: 1px solid rgba(61, 139, 255, 0.22) !important;
  box-shadow:
    0 1px 0 0 rgba(116, 174, 255, 0.15) inset,
    0 12px 40px -8px rgba(0, 0, 0, 0.55) !important;
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  position: relative;
}
/* Ligne aurore subtile animée en bas de la navbar */
body:has(.hero-landing) .navbar::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(61, 139, 255, 0.0) 10%,
    rgba(61, 139, 255, 0.5) 30%,
    rgba(116, 174, 255, 0.9) 50%,
    rgba(61, 139, 255, 0.5) 70%,
    rgba(61, 139, 255, 0.0) 90%,
    transparent 100%);
  background-size: 200% 100%;
  animation: navAuroraSlide 18s linear infinite;
  pointer-events: none;
  opacity: 0.7;
}
@keyframes navAuroraSlide {
  0%   { background-position:   0% 50%; }
  100% { background-position: 200% 50%; }
}
/* Wordmark "Crypto & Finance Quantitative" en haut à gauche — serif doré */
body:has(.hero-landing) .navbar-brand,
body:has(.hero-landing) .navbar-header .navbar-brand {
  font-family: 'DM Serif Display', 'Playfair Display', serif !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
  background: linear-gradient(135deg, #eaf3ff 0%, #74aeff 35%, #3d8bff 75%, #1a5fd0 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  text-shadow: 0 0 24px rgba(61, 139, 255, 0.18);
  text-transform: none !important;
}
body:has(.hero-landing) .navbar-brand:hover {
  filter: brightness(1.12) drop-shadow(0 0 8px rgba(61, 139, 255, 0.45));
}
/* Liens du menu — caps espacés couleur crème, accent or au hover */
body:has(.hero-landing) .navbar-nav > li > a {
  font-family: 'JetBrains Mono', 'Public Sans', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: rgba(219, 233, 255, 0.85) !important;
  padding: 15px 14px !important; /* refonte navbar 1-ligne 2026-07-20 (ex-22px) */
  position: relative;
  white-space: nowrap;
  transition: color 0.3s ease, transform 0.25s ease;
}
body:has(.hero-landing) .navbar-nav > li > a::before {
  content: '';
  position: absolute;
  left: 18px; right: 18px; bottom: 14px;
  height: 1px;
  background: linear-gradient(90deg, rgba(61, 139, 255, 0), rgba(116, 174, 255, 0.95), rgba(61, 139, 255, 0));
  transform: scaleX(0);
  transition: transform 0.4s cubic-bezier(.2,.8,.25,1);
}
body:has(.hero-landing) .navbar-nav > li > a:hover,
body:has(.hero-landing) .navbar-nav > li.active > a {
  color: #eaf3ff !important;
  background: transparent !important;
}
body:has(.hero-landing) .navbar-nav > li > a:hover::before,
body:has(.hero-landing) .navbar-nav > li.active > a::before {
  transform: scaleX(1);
}
/* Dropdown menus harmonisés à l'aurore */
body:has(.hero-landing) .nav-dropdown-menu {
  background:
    linear-gradient(180deg, rgba(7, 17, 29, 0.96), rgba(5, 12, 22, 0.98)) !important;
  border: 1px solid rgba(61, 139, 255, 0.24) !important;
  box-shadow:
    0 12px 40px -8px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(116, 174, 255, 0.10) inset !important;
}
body:has(.hero-landing) .nav-dropdown-menu a {
  font-family: 'JetBrains Mono', sans-serif;
  color: rgba(219, 233, 255, 0.78) !important;
  letter-spacing: 0.05em;
}
body:has(.hero-landing) .nav-dropdown-menu a:hover {
  background: rgba(61, 139, 255, 0.12) !important;
  color: #eaf3ff !important;
}

/* ──────────────────────────────────────────────────────────────
   2. NAVBAR THÈSE HUB — Marble & Kintsugi
   Charbon cosmique + texture marbre subtile + or kintsugi.
   Wordmark Playfair Display, souligns animés au hover.
   ────────────────────────────────────────────────────────────── */
/* Idem pour la Thèse : gamme kintsugi (or sur charbon) au lieu du bleu. */
body:has(.th-hub) {
  --nav-accent:   #d4a017;
  --nav-accent-2: #f5c54b;
  --nav-glow:     rgba(245,197,75,.42);
  --nav-ink:        rgba(240,236,224,0.75);
  --nav-ink-strong: #ffe9a3;
  --nav-ink-grad-a: rgba(250,246,236,1);
  --nav-ink-grad-b: rgba(224,214,192,.88);
  --nav-ico:   #d4a017;
  --nav-ico-2: #d4a017; --nav-ico-3: #c9932a; --nav-ico-4: #f5c54b;
  --nav-ico-5: #e0b04a; --nav-ico-6: #b98f23;
  --nav-menu-ink: rgba(240,236,224,0.80);
}
body:has(.th-hub) .navbar {
  background:
    /* Veines kintsugi très subtiles */
    linear-gradient(95deg,
      transparent 30%, rgba(212, 160, 23, 0.05) 41%, rgba(245, 197, 75, 0.08) 42%, rgba(212, 160, 23, 0.05) 43%, transparent 54%
    ),
    linear-gradient(80deg,
      transparent 50%, rgba(212, 160, 23, 0.03) 64%, rgba(245, 197, 75, 0.06) 65%, transparent 80%
    ),
    /* Halo or central */
    radial-gradient(ellipse 800px 80% at 50% 0%, rgba(212, 160, 23, 0.07), transparent 75%),
    /* Charbon profond stratifié */
    linear-gradient(180deg, #1c1917 0%, #14110d 100%) !important;
  border-bottom: 1px solid rgba(212, 160, 23, 0.28) !important;
  box-shadow:
    0 1px 0 0 rgba(245, 197, 75, 0.10) inset,
    0 16px 50px -10px rgba(0, 0, 0, 0.75) !important;
  backdrop-filter: saturate(150%) blur(6px);
  -webkit-backdrop-filter: saturate(150%) blur(6px);
  position: relative;
  min-height: 68px;
}
/* Marbre subtil — texture SVG turbulence inline, 4% opacity */
body:has(.th-hub) .navbar::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='80'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23m)' opacity='0.7'/></svg>");
  background-size: 300px 80px;
  opacity: 0.04;
  mix-blend-mode: overlay;
  pointer-events: none;
}
/* Ligne or kintsugi fine en bas */
body:has(.th-hub) .navbar::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(212, 160, 23, 0.0) 8%,
    rgba(212, 160, 23, 0.4) 25%,
    rgba(245, 197, 75, 0.85) 50%,
    rgba(212, 160, 23, 0.4) 75%,
    rgba(212, 160, 23, 0.0) 92%,
    transparent 100%);
  pointer-events: none;
}
/* Wordmark "CAPITAL ANTIFRAGILE" — Playfair caps + kintsugi gold */
body:has(.th-hub) .navbar-brand,
body:has(.th-hub) .navbar-header .navbar-brand {
  font-family: 'Playfair Display', 'DM Serif Display', serif !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  background: linear-gradient(180deg, #f5c54b 0%, #d4a017 55%, #8a6710 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  padding: 18px 24px !important;
  position: relative;
  text-shadow: none;
}
/* Eyebrow " · THÈSE · " sous le wordmark (placé via pseudo) */
body:has(.th-hub) .navbar-brand::after {
  content: '·  THÈSE  ·';
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.42em;
  color: rgba(212, 160, 23, 0.7);
  margin-top: 1px;
  -webkit-text-fill-color: rgba(212, 160, 23, 0.7);
  text-transform: uppercase;
}
body:has(.th-hub) .navbar-brand:hover {
  filter: brightness(1.10);
}
/* Liens du menu — mono caps espacés, kintsugi underline au hover */
body:has(.th-hub) .navbar-nav > li > a {
  font-family: 'JetBrains Mono', 'Public Sans', sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: rgba(240, 236, 224, 0.75) !important;
  padding: 24px 18px !important;
  position: relative;
  transition: color 0.35s ease, transform 0.25s ease;
}
body:has(.th-hub) .navbar-nav > li > a::before {
  content: '';
  position: absolute;
  left: 50%; right: 50%; bottom: 16px;
  height: 1.5px;
  background: linear-gradient(90deg,
    rgba(245, 197, 75, 0) 0%,
    rgba(245, 197, 75, 1) 30%,
    rgba(212, 160, 23, 1) 70%,
    rgba(212, 160, 23, 0) 100%);
  box-shadow: 0 0 8px rgba(245, 197, 75, 0.6);
  transition: left 0.45s cubic-bezier(.2,.8,.25,1), right 0.45s cubic-bezier(.2,.8,.25,1);
}
body:has(.th-hub) .navbar-nav > li > a:hover,
body:has(.th-hub) .navbar-nav > li.active > a {
  color: #ffe9a3 !important;
  background: transparent !important;
}
body:has(.th-hub) .navbar-nav > li > a:hover::before,
body:has(.th-hub) .navbar-nav > li.active > a::before {
  left: 18px; right: 18px;
}
/* Dropdown menus — fond charbon avec veines or */
body:has(.th-hub) .nav-dropdown-menu {
  background:
    linear-gradient(95deg, transparent 30%, rgba(212,160,23,0.06) 50%, transparent 70%),
    linear-gradient(180deg, rgba(28, 25, 23, 0.97), rgba(20, 17, 13, 0.99)) !important;
  border: 1px solid rgba(212, 160, 23, 0.30) !important;
  box-shadow:
    0 16px 48px -10px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(245, 197, 75, 0.10) inset !important;
}
body:has(.th-hub) .nav-dropdown-menu a {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(240, 236, 224, 0.78) !important;
}
body:has(.th-hub) .nav-dropdown-menu a:hover {
  background: rgba(212, 160, 23, 0.10) !important;
  color: #ffe9a3 !important;
}

/* ── Toggle button styling pour les deux pages héros ─────────── */
body:has(.hero-landing) .dark-toggle-btn,
body:has(.hero-landing) .navbar-toggle-btn {
  border-color: rgba(61, 139, 255, 0.38) !important;
  color: #74aeff !important;
}
body:has(.th-hub) .dark-toggle-btn,
body:has(.th-hub) .navbar-toggle-btn {
  border-color: rgba(212, 160, 23, 0.40) !important;
  color: #d4a017 !important;
}

/* ── Thèse (th-hub) : la rangée débordait de l'écran ──────────────
   Mesuré au CDP en 1440×800 : le bord droit de .navbar-nav tombait à
   1509 px, soit 69 px HORS viewport — « PENSÉE ANTIFRAGILE » était
   coupée en deux. La DA kintsugi paie plus cher que la navy (wordmark
   Playfair 19px + padding 24px, liens en 0.22em de chasse et 18px de
   padding). On resserre progressivement sous 1600px : la DA est
   conservée, seuls l'interlettrage et les gouttières se réduisent. */
@media (max-width: 1600px){
  body:has(.th-hub) .navbar-brand,
  body:has(.th-hub) .navbar-header .navbar-brand { font-size: 17px !important; padding: 18px 16px !important; letter-spacing: 0.10em !important; }
  body:has(.th-hub) .navbar-nav > li > a { padding: 24px 12px !important; letter-spacing: 0.16em !important; }
}
@media (max-width: 1360px){
  body:has(.th-hub) .navbar-brand,
  body:has(.th-hub) .navbar-header .navbar-brand { font-size: 15px !important; padding: 18px 10px !important; letter-spacing: 0.06em !important; }
  body:has(.th-hub) .navbar-nav > li > a { padding: 24px 9px !important; letter-spacing: 0.10em !important; font-size: 10px !important; }
}

/* ════════════════════════════════════════════════════════════════
   SKINS DE NAVBAR PAR PAGE (2026-08-13)
   ----------------------------------------------------------------
   navbar_regroup.js pose body[data-nav-skin] d'après le nom du
   fichier. Chaque skin ne fait que REDÉFINIR LES JETONS déclarés en
   haut de cette feuille : structure, typo et gabarit restent
   strictement identiques d'un onglet à l'autre — seule la teinte
   suit la DA de la page. Les pages non listées gardent « navy ».
   Les deux DA historiques (Accueil hero / Thèse th-hub) restent
   pilotées par leurs blocs body:has(...) juste au-dessus.
   ════════════════════════════════════════════════════════════════ */

/* ── Narratifs crypto (Narrative_Tracker) — violet améthyste ──── */
body[data-nav-skin="violet"] {
  --nav-base:        rgba(10,7,17,0.88);
  --nav-base-scroll: rgba(10,7,17,0.96);
  --nav-tint-a:      rgba(140,90,250,0.10);
  --nav-tint-b:      rgba(167,139,250,0.06);
  --nav-border:      rgba(167,139,250,0.16);
  --nav-border-scroll: rgba(167,139,250,0.26);
  --nav-accent:      #a78bfa;
  --nav-accent-2:    #7d8cff;
  --nav-glow:        rgba(167,139,250,.50);
  --nav-ink:         rgba(226,216,247,0.72);
  --nav-ink-strong:  #f3eefe;
  --nav-ink-grad-a:  rgba(248,244,255,1);
  --nav-ink-grad-b:  rgba(214,201,242,.85);
  --nav-ico:         #b9a6ff;
  --nav-ico-2: #a78bfa; --nav-ico-3: #8b9dff; --nav-ico-4: #c98bfa;
  --nav-ico-5: #d4a6ff; --nav-ico-6: #9d8bfa;
  --nav-brand-a: #f5f0ff; --nav-brand-b: #c4b5fd; --nav-brand-c: #8b7ff0;
  --nav-menu-bg-a: rgba(24,17,40,0.97); --nav-menu-bg-b: rgba(16,11,28,0.98);
  --nav-menu-ink:  rgba(232,224,247,0.84);
}

/* ── Narratifs actions (TradFi_Tracker) — noir & cuivre ───────── */
body[data-nav-skin="copper"] {
  --nav-base:        rgba(8,8,10,0.90);
  --nav-base-scroll: rgba(8,8,10,0.97);
  --nav-tint-a:      rgba(240,165,60,0.07);
  --nav-tint-b:      rgba(201,164,74,0.05);
  --nav-border:      rgba(201,164,74,0.18);
  --nav-border-scroll: rgba(201,164,74,0.28);
  --nav-accent:      #f0a53c;
  --nav-accent-2:    #c9a44a;
  --nav-glow:        rgba(240,165,60,.45);
  --nav-ink:         rgba(240,232,220,0.70);
  --nav-ink-strong:  #fdf6ea;
  --nav-ink-grad-a:  rgba(255,250,240,1);
  --nav-ink-grad-b:  rgba(233,220,200,.85);
  --nav-ico:         #e8b473;
  --nav-ico-2: #f0a53c; --nav-ico-3: #d9b45e; --nav-ico-4: #e8944a;
  --nav-ico-5: #f0c060; --nav-ico-6: #c9a44a;
  --nav-brand-a: #fff6e6; --nav-brand-b: #f0c48a; --nav-brand-c: #c98a3c;
  --nav-menu-bg-a: rgba(22,18,14,0.97); --nav-menu-bg-b: rgba(12,10,8,0.98);
  --nav-menu-ink:  rgba(240,232,220,0.82);
}

/* ── Google Trends — prune & crème (typo mordorée de la page) ─── */
body[data-nav-skin="plum"] {
  --nav-base:        rgba(8,5,14,0.92);
  --nav-base-scroll: rgba(8,5,14,0.97);
  --nav-tint-a:      rgba(167,139,250,0.08);
  --nav-tint-b:      rgba(232,213,168,0.04);
  --nav-border:      rgba(232,213,168,0.12);
  --nav-border-scroll: rgba(232,213,168,0.20);
  --nav-accent:      #a78bfa;
  --nav-accent-2:    #e8d5a8;
  --nav-glow:        rgba(167,139,250,.45);
  --nav-ink:         rgba(232,213,168,0.72);
  --nav-ink-strong:  #f5ecd5;
  --nav-ink-grad-a:  rgba(245,236,213,1);
  --nav-ink-grad-b:  rgba(200,178,140,.88);
  --nav-ico:         #a08d72;
  --nav-ico-2: #a78bfa; --nav-ico-3: #c3a6f5; --nav-ico-4: #d9c08a;
  --nav-ico-5: #b89bd8; --nav-ico-6: #a08d72;
  --nav-brand-a: #f5ecd5; --nav-brand-b: #d9c08a; --nav-brand-c: #a78bfa;
  --nav-menu-bg-a: rgba(20,13,32,0.97); --nav-menu-bg-b: rgba(10,6,18,0.98);
  --nav-menu-ink:  rgba(232,213,168,0.80);
}

/* ── Bulle IA — vert phosphore (aligne texte/wordmark sur les
      icônes que la page repeignait déjà toute seule) ──────────── */
body[data-nav-skin="emerald"] {
  --nav-base:        rgba(5,12,8,0.90);
  --nav-base-scroll: rgba(5,12,8,0.96);
  --nav-tint-a:      rgba(74,222,128,0.07);
  --nav-tint-b:      rgba(45,212,191,0.05);
  --nav-border:      rgba(74,222,128,0.16);
  --nav-border-scroll: rgba(74,222,128,0.26);
  --nav-accent:      #4ade80;
  --nav-accent-2:    #2dd4bf;
  --nav-glow:        rgba(74,222,128,.45);
  --nav-ink:         rgba(214,240,224,0.72);
  --nav-ink-strong:  #eafff1;
  --nav-ink-grad-a:  rgba(240,255,246,1);
  --nav-ink-grad-b:  rgba(199,232,212,.85);
  --nav-ico:         #8fd7b6;
  --nav-ico-2: #4ade80; --nav-ico-3: #2dd4bf; --nav-ico-4: #a3e635;
  --nav-ico-5: #5eead4; --nav-ico-6: #34d399;
  --nav-brand-a: #f2fff7; --nav-brand-b: #8fd7b6; --nav-brand-c: #4ade80;
  --nav-menu-bg-a: rgba(10,26,18,0.97); --nav-menu-bg-b: rgba(5,14,10,0.98);
  --nav-menu-ink:  rgba(214,240,224,0.84);
}

/* ── Structure de marché (OrderFlow) — noir & ambre ───────────── */
body[data-nav-skin="amber"] {
  --nav-base:        rgba(5,7,10,0.88);
  --nav-base-scroll: rgba(5,7,10,0.96);
  --nav-tint-a:      rgba(240,165,0,0.07);
  --nav-tint-b:      rgba(201,164,74,0.04);
  --nav-border:      rgba(240,165,0,0.16);
  --nav-border-scroll: rgba(240,165,0,0.26);
  --nav-accent:      #f0a500;
  --nav-accent-2:    #c9a44a;
  --nav-glow:        rgba(240,165,0,.42);
  --nav-ink:         rgba(226,232,240,0.72);
  --nav-ink-strong:  #ffffff;
  --nav-ink-grad-a:  rgba(255,255,255,1);
  --nav-ink-grad-b:  rgba(205,211,220,.85);
  --nav-ico:         #f0b840;
  --nav-ico-2: #f0a500; --nav-ico-3: #d9b45e; --nav-ico-4: #f0a500;
  --nav-ico-5: #e8c06a; --nav-ico-6: #c9a44a;
  --nav-brand-a: #ffffff; --nav-brand-b: #f0c470; --nav-brand-c: #c9a44a;
  --nav-menu-bg-a: rgba(16,15,12,0.97); --nav-menu-bg-b: rgba(8,8,8,0.98);
  --nav-menu-ink:  rgba(226,232,240,0.82);
}

/* ═════════════════════════════════════════════════════════════════════════════
   MOBILE GLOBAL — Refonte 2026-06-08 (site-wide, toutes les pages)
   ═════════════════════════════════════════════════════════════════════════════
   custom.css est chargé partout (vs accueil.css uniquement sur Accueil), donc
   on met ici toutes les règles mobile qui doivent s'appliquer à TOUTES les
   pages : navbar burger + overlay, typographie lisible, tables scrollables,
   images max-width, etc.
   Desktop ≥768px : aucune règle ici n'active, tout reste @media (max-width:767px).
   ═════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px){
  /* ─── BURGER BUTTON (badge cyan visible avec label MENU) ─────────────── */
  .navbar-toggle,
  .navbar-default .navbar-toggle,
  .navbar-inverse .navbar-toggle{
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    position: relative !important;
    margin: 10px 12px !important;
    padding: 9px 14px 9px 12px !important;
    border: 1.5px solid rgba(30, 197, 255, 0.55) !important;
    border-radius: 8px !important;
    background: rgba(7, 17, 29, 0.85) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.6),
                0 0 0 1px rgba(30, 197, 255, 0.10) !important;
    z-index: 100 !important;
    float: right !important;
    cursor: pointer !important;
  }
  .navbar-toggle:hover, .navbar-toggle:focus{
    background: rgba(30, 197, 255, 0.18) !important;
    border-color: rgba(30, 197, 255, 0.85) !important;
  }
  .navbar-toggle .icon-bar,
  .navbar-default .navbar-toggle .icon-bar,
  .navbar-inverse .navbar-toggle .icon-bar{
    background: #5dd6ff !important;
    width: 18px !important;
    height: 2.5px !important;
    margin-top: 4px !important;
    border-radius: 1.5px !important;
    box-shadow: 0 0 4px rgba(93, 214, 255, 0.4) !important;
  }
  .navbar-toggle .icon-bar:first-child{ margin-top: 0 !important; }
  .navbar-toggle::after{
    content: 'MENU';
    display: inline-block !important;
    font-family: 'JetBrains Mono', 'Inter', monospace !important;
    font-size: 9.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
    color: #5dd6ff !important;
    margin-left: 4px !important;
  }

  /* ─── NAVBAR FULL-SCREEN OVERLAY ─────────────────────────────────────── */
  .navbar-collapse{
    position: fixed !important;
    top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    background: linear-gradient(135deg, #07111d 0%, #0a1424 60%, #0f1d33 100%) !important;
    transform: translateX(100%) !important;
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: block !important;
    visibility: hidden !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    z-index: 1100 !important;
    box-shadow: none !important;
    border: none !important;
  }
  .navbar-collapse.in, .navbar-collapse.collapsing{
    visibility: visible !important;
    transform: translateX(0) !important;
  }
  .navbar-collapse .navbar-nav{
    padding: max(env(safe-area-inset-top, 16px), 16px) 0
             max(env(safe-area-inset-bottom, 24px), 24px) 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }
  .navbar-collapse::before{
    content: 'CAPITAL ANTIFRAGILE';
    position: absolute !important;
    top: max(env(safe-area-inset-top, 22px), 22px) !important;
    left: 24px !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 800 !important;
    font-size: 13.5px !important;
    letter-spacing: 0.18em !important;
    color: #eaf2fb !important;
    z-index: 2 !important;
    pointer-events: none !important;
  }
  /* IMPORTANT : .navbar-nav (Bootstrap) a display:none par défaut sur mobile,
     même quand .navbar-collapse est .in. On force display:block sur les items
     pour qu'ils apparaissent dans l'overlay fullscreen. */
  .navbar-collapse .navbar-nav{
    display: block !important;
    width: 100% !important;
    float: none !important;
  }
  .navbar-collapse .navbar-nav > li{
    display: block !important;
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    border: none !important;
    border-bottom: 1px solid rgba(30, 197, 255, 0.06) !important;
    position: relative !important;
  }
  .navbar-collapse .navbar-nav > li:last-child{ border-bottom: none !important; }
  /* LIBELLÉS DE L'OVERLAY (fix 2026-08-13) — le média 960px cache .nav-txt
     pour condenser la navbar DESKTOP étroite en icônes seules ; il s'appliquait
     aussi à l'overlay plein écran mobile, où il ne reste alors qu'une colonne
     d'icônes sans aucun mot (constaté au CDP en 390×780 : « Accueil »,
     « Valorisation »… invisibles). On les rétablit ici, en texte plein :
     le dégradé background-clip du desktop rendrait la couleur inopérante. */
  .navbar-collapse .navbar-nav > li > a .nav-txt{
    display: inline !important;
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: currentColor !important;
    color: inherit !important;
  }
  .navbar-collapse .navbar-nav > li > a,
  .navbar-default .navbar-collapse .navbar-nav > li > a,
  .navbar-inverse .navbar-collapse .navbar-nav > li > a{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 18px 24px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: #cfd8e8 !important;
    background: transparent !important;
    border: none !important;
    line-height: 1.3 !important;
    min-height: 56px !important;
    box-sizing: border-box !important;
    transition: background 0.15s ease, color 0.15s ease, padding 0.15s ease !important;
  }
  .navbar-collapse .navbar-nav > li > a::after{
    content: '›';
    display: inline-block !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 22px !important;
    font-weight: 300 !important;
    color: rgba(116, 185, 255, 0.35) !important;
    line-height: 1 !important;
    transition: transform 0.2s ease, color 0.2s ease !important;
  }
  .navbar-collapse .navbar-nav > li > a:hover,
  .navbar-collapse .navbar-nav > li > a:active,
  .navbar-collapse .navbar-nav > li > a:focus{
    background: rgba(30, 197, 255, 0.06) !important;
    color: #ffffff !important;
    padding-left: 28px !important;
  }
  .navbar-collapse .navbar-nav > li > a:hover::after{
    color: rgba(116, 185, 255, 0.85) !important;
    transform: translateX(3px) !important;
  }
  .navbar-collapse .navbar-nav > li.active > a,
  .navbar-default .navbar-collapse .navbar-nav > li.active > a,
  .navbar-inverse .navbar-collapse .navbar-nav > li.active > a{
    color: #5dd6ff !important;
    background: rgba(30, 197, 255, 0.08) !important;
    font-weight: 600 !important;
  }
  .navbar-collapse .navbar-nav > li.active > a::before{
    content: '';
    position: absolute !important;
    left: 0 !important; top: 12px !important; bottom: 12px !important;
    width: 3px !important;
    background: linear-gradient(180deg, #1ec5ff 0%, #5dd6ff 100%) !important;
    border-radius: 0 2px 2px 0 !important;
    box-shadow: 0 0 12px rgba(30, 197, 255, 0.6) !important;
  }
  .navbar-default .navbar-collapse .navbar-nav > li.active > a::after,
  .navbar-inverse .navbar-collapse .navbar-nav > li.active > a::after{
    content: '›' !important;
    position: static !important;
    left: auto !important; right: auto !important; top: auto !important; bottom: auto !important;
    width: auto !important; height: auto !important;
    background: none !important;
    box-shadow: none !important;
    color: #5dd6ff !important;
    font-size: 22px !important;
    font-weight: 300 !important;
    line-height: 1 !important;
    border-radius: 0 !important;
  }
  .navbar-collapse .navbar-nav::after{
    content: 'Capital Antifragile · 2026';
    display: block !important;
    text-align: center !important;
    padding: 32px 24px max(env(safe-area-inset-bottom, 20px), 20px) !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 9.5px !important;
    letter-spacing: 0.18em !important;
    color: rgba(116, 185, 255, 0.4) !important;
    text-transform: uppercase !important;
  }
  body:has(.navbar-collapse.in){ overflow: hidden !important; }
  .navbar-collapse.collapse,
  .navbar-collapse.collapsing{
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important;
    height: 100vh !important;
  }

  /* ─── LISIBILITÉ GLOBALE PAGES ───────────────────────────────────────── */
  /* Container Bootstrap : padding latéral correct sur mobile */
  .container, .container-fluid, .main-container{
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* Typographie de base */
  body{
    font-size: 15px !important;
    line-height: 1.55 !important;
  }
  h1{ font-size: clamp(22px, 5.5vw, 32px) !important; line-height: 1.2 !important; }
  h2{ font-size: clamp(19px, 4.5vw, 26px) !important; line-height: 1.25 !important; margin-top: 1.5em !important; }
  h3{ font-size: clamp(16px, 4vw, 22px) !important; line-height: 1.3 !important; }
  h4{ font-size: 15px !important; }
  p{ font-size: 14.5px !important; line-height: 1.6 !important; }

  /* Tables : scrollables horizontalement (sinon débordent et cassent layout) */
  .table-responsive, .table-wrapper, .dataTables_wrapper{
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  table:not(.no-mobile-scroll){
    display: block !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    font-size: 12px !important;
  }
  table th, table td{
    padding: 6px 10px !important;
    font-size: 12px !important;
  }

  /* Images : never overflow */
  img:not(.no-mobile-fluid){
    max-width: 100% !important;
    height: auto !important;
  }

  /* Plotly graphs : forcer responsive et hauteur acceptable */
  .plotly, .plotly-graph-div, .js-plotly-plot{
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .plotly .main-svg{ max-width: 100% !important; }

  /* Hide native tooltip/labels qui dépassent */
  .plotly .legend{ font-size: 9px !important; }

  /* Tabs (Bootstrap nav-tabs) : scroll horizontal sur mobile */
  .nav-tabs, .nav-pills{
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    white-space: nowrap !important;
    border-bottom: 1px solid rgba(116,185,255,0.1) !important;
  }
  .nav-tabs > li, .nav-pills > li{
    flex-shrink: 0 !important;
    float: none !important;
  }
  .nav-tabs > li > a, .nav-pills > li > a{
    padding: 8px 12px !important;
    font-size: 12.5px !important;
  }

  /* DataTables filtres + pagination : stack vertical */
  .dataTables_filter, .dataTables_length, .dataTables_info, .dataTables_paginate{
    float: none !important;
    text-align: left !important;
    margin-bottom: 8px !important;
  }
  .dataTables_filter input{ width: 100% !important; max-width: none !important; }

  /* Iframes (TradingView etc.) : full-width */
  iframe{
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Hide elements explicitly tagged for desktop-only */
  .hide-on-mobile, .desktop-only{ display: none !important; }

  /* Pre/code blocks scrollables */
  pre, code{
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    font-size: 11.5px !important;
  }

  /* Cards / sections padding réduit */
  .card, .panel{ padding: 12px !important; }

  /* Boutons : tap-friendly */
  button, .btn, input[type="button"], input[type="submit"]{
    min-height: 44px !important;
  }

  /* Forms */
  input, select, textarea{
    font-size: 16px !important; /* Évite zoom iOS sur focus */
  }
}

/* ─── HORS @media : assurer que body.navbar-hidden ne casse pas le burger ─── */
body.navbar-hidden .navbar-toggle{ display: flex !important; }

/* ═════════════════════════════════════════════════════════════════════════
   MOBILE GLOBAL ROUND 2 — 2026-06-08 soir (anti-vides + titres)
   ════════════════════════════════════════════════════════════════════════
   Plusieurs pages ont des sections min-height 100vh qui créent des vides
   énormes sur mobile (Macro_Trends, TradFi_Tracker, Modeles_Valorisation,
   etc., 15 000+ px de hauteur CSS). On cap intelligemment.
   ════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px){
  /* ─── Cap les min-height excessifs (sections forcées 100vh) ──────────── */
  /* Sur desktop ces hauteurs forcées créent un effet "1 section = 1 écran"
     qui marche bien. Sur mobile portrait, elles font des vides énormes
     quand le contenu est court. On force max 60vh pour qu'il y ait toujours
     du contenu visible quand on scroll. */
  section[style*="min-height:100vh"],
  section[style*="min-height: 100vh"],
  div[style*="min-height:100vh"],
  div[style*="min-height: 100vh"],
  .nar-page,
  .l1-page,
  .bia-page,
  .per-page,
  .bt-v2-root{
    min-height: auto !important;
  }

  /* Sections génériques avec min-height vh : cap à 50vh max */
  section, .section, [class*="section-"]{
    min-height: auto !important;
  }

  /* Plotly charts : limiter hauteur pour éviter 800px+ vides sur mobile */
  .plotly-graph-div,
  .js-plotly-plot,
  div[class*="plotly"]{
    max-height: 480px !important;
    min-height: 0 !important;
  }

  /* Charts custom (Chart.js, lightweight-charts) : pareil */
  .chartjs-render-monitor,
  canvas{
    max-width: 100% !important;
  }
  .chart-container,
  .chart-wrap,
  [class*="chart-wrap"]:not(.bm-chartwrap){
    max-height: 480px !important;
  }

  /* ─── Titres h1 trop longs : force wrap propre ──────────────────────── */
  h1, .h1, [class*="hero-title"], [class*="page-title"]{
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    -webkit-hyphens: auto !important;
    max-width: 100% !important;
    font-size: clamp(20px, 5.5vw, 32px) !important;
    line-height: 1.15 !important;
  }
  /* Spécifique titres avec span colorés (gradient text) : tenir sur une ou
     2 lignes au max, pas plus */
  h1 > span, h1 > em, h1 > b{
    display: inline !important;
    max-width: 100% !important;
  }

  /* ─── Padding sections excessif → réduire ───────────────────────────── */
  section, .section, .container-fluid > *, .main-container > *{
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* Header pages : réduire padding-top excessif (souvent 80-120px desktop) */
  .page-header, .ca-page-header, [class*="-hero"]{
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }

  /* Plus de marges aggressives mobile pour blocs */
  .row{ margin-left: 0 !important; margin-right: 0 !important; }
  .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6,
  .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12,
  .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6,
  .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12{
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
}

/* ═════════════════════════════════════════════════════════════════════════
   NAVBAR MOBILE POLISH ROUND 3 — 2026-06-08 (UX app-native)
   ════════════════════════════════════════════════════════════════════════
   - Burger → X transformation (affordance close claire)
   - Icônes Font Awesome devant chaque item (scan visuel)
   - Header sticky brand + close en haut du menu
   - Animation cubic-bezier polish
   ════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  /* ─── BURGER → X transformation quand menu ouvert ─────────────────────── */
  /* On utilise body:has(.navbar-collapse.in) pour détecter l'état */
  body:has(.navbar-collapse.in) .navbar-toggle{
    /* Quand menu ouvert : déplace le bouton dans l'overlay */
    position: fixed !important;
    top: max(env(safe-area-inset-top, 14px), 14px) !important;
    right: 14px !important;
    z-index: 1200 !important;
    margin: 0 !important;
    background: rgba(30, 197, 255, 0.12) !important;
    border-color: rgba(30, 197, 255, 0.7) !important;
  }
  /* Masque le label MENU quand ouvert (remplacé par X visuel) */
  body:has(.navbar-collapse.in) .navbar-toggle::after{
    content: 'FERMER' !important;
    color: #5dd6ff !important;
  }
  /* Transform 3 barres → X */
  body:has(.navbar-collapse.in) .navbar-toggle .icon-bar{
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease !important;
  }
  body:has(.navbar-collapse.in) .navbar-toggle .icon-bar:nth-child(1),
  body:has(.navbar-collapse.in) .navbar-toggle .icon-bar:nth-child(2){
    /* Première barre devient ligne haut du X */
    transform: translateY(6px) rotate(45deg) !important;
  }
  body:has(.navbar-collapse.in) .navbar-toggle .icon-bar:nth-child(3){
    /* Barre du milieu : masquée */
    opacity: 0 !important;
  }
  body:has(.navbar-collapse.in) .navbar-toggle .icon-bar:nth-child(4){
    /* Dernière barre devient ligne bas du X */
    transform: translateY(-6px) rotate(-45deg) !important;
  }
  /* Animation des barres au close aussi (transition baseline) */
  .navbar-toggle .icon-bar{
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease !important;
  }

  /* ─── ICÔNES Font Awesome devant chaque onglet (via attribute selector) ─── */
  /* On utilise content: '\fXXX' avec Font Awesome 6 Free Solid (font-weight 900) */
  .navbar-collapse .navbar-nav > li > a{
    position: relative !important;
    padding-left: 56px !important; /* libère 32px pour icon + 12px gap */
  }
  .navbar-collapse .navbar-nav > li > a::before{
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', FontAwesome !important;
    font-weight: 900 !important;
    font-style: normal !important;
    font-size: 14px !important;
    color: rgba(116, 185, 255, 0.55) !important;
    width: 24px !important;
    text-align: center !important;
    position: absolute !important;
    left: 22px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    transition: color 0.2s ease !important;
  }
  /* Hover/active : icône cyan brighter */
  .navbar-collapse .navbar-nav > li > a:hover::before,
  .navbar-collapse .navbar-nav > li.active > a::before{
    color: #5dd6ff !important;
  }
  /* Override le ::before active de la règle ROUND 2 (border-left cyan) qui
     entre en conflit avec mon nouveau ::before icon. On déplace en ::after-2
     impossible, donc on utilise border-left direct sur l'<a>. */
  .navbar-collapse .navbar-nav > li.active > a{
    border-left: 3px solid #5dd6ff !important;
    box-shadow: inset 0 0 14px rgba(30, 197, 255, 0.12),
                -3px 0 12px -3px rgba(30, 197, 255, 0.5) !important;
  }
  /* Cancel le previous ::before active (border accent) qui crée doublon icon */
  .navbar-collapse .navbar-nav > li.active > a::before{
    /* Remet le ::before en mode icon FA (pas border accent) */
    content: '\f015' !important; /* default: home, sera override par règle href spécifique */
  }

  /* MAPPING ICÔNES PAR ONGLET (via href) */
  .navbar-collapse a[href="index.html"]::before                       { content: '\f015' !important; } /* home */
  .navbar-collapse a[href="Indicateur.html"]::before                  { content: '\f200' !important; } /* chart-pie */
  .navbar-collapse a[href="Bulle_IA.html"]::before                    { content: '\f544' !important; } /* robot */
  .navbar-collapse a[href="Cycle_Tracker.html"]::before               { content: '\f1da' !important; } /* history */
  .navbar-collapse a[href="Valorisation_L1_Blockchain.html"]::before  { content: '\f0c1' !important; } /* link */
  .navbar-collapse a[href="Modeles_Valorisation_Crypto.html"]::before { content: '\f201' !important; } /* chart-line */
  .navbar-collapse a[href="Comparaison_PER_Crypto_TradFi.html"]::before { content: '\f24e' !important; } /* balance-scale */
  .navbar-collapse a[href="Macro_Trends.html"]::before                { content: '\f201' !important; } /* chart-line */
  .navbar-collapse a[href="Correlations_Macro_Crypto.html"]::before   { content: '\f5fd' !important; } /* layer-group */
  .navbar-collapse a[href="OrderFlow_Crypto.html"]::before            { content: '\f362' !important; } /* exchange */
  .navbar-collapse a[href="Stablecoins_Flows.html"]::before           { content: '\f155' !important; } /* dollar */
  .navbar-collapse a[href="ETF_Crypto.html"]::before                  { content: '\f4d3' !important; } /* funnel-dollar */
  .navbar-collapse a[href="News_Crypto.html"]::before                 { content: '\f1ea' !important; } /* newspaper */
  .navbar-collapse a[href="Google_Trends.html"]::before               { content: '\f002' !important; } /* search */
  .navbar-collapse a[href="Backtest.html"]::before                    { content: '\f0d0' !important; } /* magic */
  .navbar-collapse a[href="Narrative_Tracker.html"]::before           { content: '\f02b' !important; } /* tag */
  .navbar-collapse a[href="TradFi_Tracker.html"]::before              { content: '\f19c' !important; } /* university */
  .navbar-collapse a[href="Ecosysteme_Crypto.html"]::before           { content: '\f5fc' !important; } /* sitemap */
  .navbar-collapse a[href="AI_Models.html"]::before                   { content: '\f7d9' !important; } /* microchip */

  /* ─── HEADER STICKY EN HAUT DU MENU (brand + indicateur) ────────────────── */
  /* Le brand "CAPITAL ANTIFRAGILE" déjà via ::before, on l'enrichit */
  .navbar-collapse::before{
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: max(env(safe-area-inset-top, 60px), 60px) !important;
    width: 100% !important;
    padding: max(env(safe-area-inset-top, 18px), 18px) 24px 0 !important;
    background: linear-gradient(180deg, rgba(7, 17, 29, 0.95) 0%, rgba(7, 17, 29, 0.85) 80%, transparent 100%) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(30, 197, 255, 0.08) !important;
    z-index: 1 !important;
    box-sizing: border-box !important;
  }
  /* Pad le contenu pour pas qu'il passe sous le sticky header */
  .navbar-collapse .navbar-nav{
    padding-top: calc(max(env(safe-area-inset-top, 60px), 60px) + 12px) !important;
  }
}

/* ═════════════════════════════════════════════════════════════════════════
   MOBILE NAV ENHANCE — Round 4 (2026-06-08 fin de soirée)
   ════════════════════════════════════════════════════════════════════════
   CSS pour le JS d'enhancement (mobile_nav_enhance.js) :
   - Section headers (catégories : Tableaux de bord, Crypto, TradFi, etc.)
   - Search input + clear button
   - Tab bar bottom fixed (Accueil, Indicateur, Bulle IA, Backtest, Menu)
   - Animation overlay accélérée (200ms au lieu de 320ms)
   ════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  /* ─── ANIMATION OVERLAY SNAPPY 200ms ─────────────────────────────────── */
  .navbar-collapse,
  .navbar-collapse.collapse,
  .navbar-collapse.collapsing{
    transition: transform 0.2s cubic-bezier(0.32, 0.72, 0, 1) !important;
  }

  /* ─── SECTION HEADERS (catégories) ───────────────────────────────────── */
  .navbar-collapse .navbar-nav > li.mne-section-header{
    display: block !important;
    width: 100% !important;
    padding: 18px 24px 6px !important;
    margin: 0 !important;
    border: none !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: rgba(116, 185, 255, 0.45) !important;
    background: transparent !important;
    pointer-events: none !important;
  }
  /* Premier header : moins de padding-top (collé au header sticky) */
  .navbar-collapse .navbar-nav > li.mne-section-header:first-of-type{
    padding-top: 12px !important;
  }

  /* ─── SEARCH BAR EN HAUT DU MENU ─────────────────────────────────────── */
  .navbar-collapse .navbar-nav > li.mne-search-wrap{
    display: block !important;
    width: 100% !important;
    padding: 8px 14px 4px !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    /* sticky pendant le scroll du menu */
    position: sticky !important;
    top: max(env(safe-area-inset-top, 60px), 60px) !important;
    z-index: 2 !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
  }
  .navbar-collapse .mne-search{
    position: relative !important;
    width: 100% !important;
  }
  .navbar-collapse .mne-search-input{
    width: 100% !important;
    padding: 11px 38px 11px 38px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(30, 197, 255, 0.18) !important;
    border-radius: 10px !important;
    color: #eaf2fb !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    outline: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) inset !important;
    transition: border-color 0.2s ease, background 0.2s ease !important;
  }
  .navbar-collapse .mne-search-input::placeholder{
    color: rgba(180, 200, 230, 0.45) !important;
  }
  .navbar-collapse .mne-search-input:focus{
    border-color: rgba(30, 197, 255, 0.5) !important;
    background: rgba(255, 255, 255, 0.09) !important;
  }
  /* Loupe icon (Font Awesome via ::before sur span.mne-search-icon) */
  .navbar-collapse .mne-search-icon::before{
    content: '\f002' !important;  /* magnifying-glass */
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', FontAwesome !important;
    font-weight: 900 !important;
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: rgba(116, 185, 255, 0.55) !important;
    font-size: 13px !important;
    pointer-events: none !important;
  }
  /* Clear button (×) */
  .navbar-collapse .mne-search-clear{
    position: absolute !important;
    right: 6px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    border: none !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: #cfd8e8 !important;
    font-size: 18px !important;
    font-weight: 300 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    transition: background 0.15s ease !important;
  }
  .navbar-collapse .mne-search-wrap.has-query .mne-search-clear{
    display: flex !important;
  }
  .navbar-collapse .mne-search-clear:hover{
    background: rgba(255, 255, 255, 0.15) !important;
  }

  /* ─── TAB BAR BOTTOM (style Instagram/Twitter) ───────────────────────── */
  .mne-tabbar{
    display: flex !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 1050 !important;
    background: linear-gradient(180deg, rgba(7, 17, 29, 0.92) 0%, rgba(7, 17, 29, 0.98) 100%) !important;
    backdrop-filter: blur(14px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(160%) !important;
    border-top: 1px solid rgba(30, 197, 255, 0.15) !important;
    box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.4) !important;
    padding: 6px 4px max(env(safe-area-inset-bottom, 6px), 6px) !important;
    box-sizing: border-box !important;
  }
  .mne-tab{
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    padding: 6px 4px !important;
    min-height: 50px !important;
    text-decoration: none !important;
    color: rgba(180, 200, 230, 0.6) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em !important;
    transition: color 0.18s ease, background 0.18s ease !important;
    border-radius: 8px !important;
    margin: 0 2px !important;
  }
  .mne-tab:hover, .mne-tab:active, .mne-tab:focus{
    color: #eaf2fb !important;
    background: rgba(30, 197, 255, 0.07) !important;
    text-decoration: none !important;
  }
  .mne-tab.active{
    color: #5dd6ff !important;
    background: rgba(30, 197, 255, 0.10) !important;
  }
  .mne-tab-icon{
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', FontAwesome !important;
    font-weight: 900 !important;
    font-style: normal !important;
    font-size: 18px !important;
    line-height: 1 !important;
  }
  .mne-tab-label{
    font-size: 10px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }
  .mne-tab.active .mne-tab-icon{
    color: #5dd6ff !important;
  }
  /* Decale le contenu du body pour pas qu'il passe SOUS la tab bar */
  body{
    padding-bottom: calc(56px + max(env(safe-area-inset-bottom, 6px), 6px)) !important;
  }
}

/* Desktop : pas de tabbar */
@media (min-width: 768px) {
  .mne-tabbar{ display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE CONTENT LAYER — piloté par mobile_content.js (2026-06-15)
   Cartes / scroll+colonne figée / plein écran graphes / pills scrollables.
   Tout sous @media (max-width:767px) → desktop strictement intact.
   ═══════════════════════════════════════════════════════════════════════════ */

/* — Overlay PLEIN ÉCRAN (Plotly + SVG) — styles globaux, boutons ajoutés ≤767px — */
#mob-fs-overlay{ position:fixed; inset:0; z-index:100000; display:flex; align-items:center; justify-content:center;
  background:rgba(3,8,15,0); -webkit-backdrop-filter:blur(0); backdrop-filter:blur(0); opacity:0; pointer-events:none;
  transition:background .3s ease, opacity .25s ease; }
#mob-fs-overlay.active{ background:rgba(3,8,15,.93); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  opacity:1; pointer-events:auto; }
#mob-fs-card{ width:96vw; height:92vh; max-width:1500px; background:#0b1626; border:1px solid #1e3656;
  border-radius:14px; display:flex; flex-direction:column; padding:12px 12px 8px;
  box-shadow:0 20px 70px rgba(0,0,0,.6); transform:scale(.96); transition:transform .3s ease; }
#mob-fs-overlay.active #mob-fs-card{ transform:scale(1); }
#mob-fs-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex:0 0 auto; margin-bottom:6px; }
#mob-fs-title{ font-family:'Inter',sans-serif; font-size:13px; font-weight:700; color:#93c5fd; letter-spacing:.3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#mob-fs-close{ flex:0 0 auto; width:36px; height:36px; border-radius:50%; border:1px solid #24395a;
  background:#16243a; color:#dce6f5; font-size:22px; line-height:1; cursor:pointer; }
#mob-fs-body{ flex:1 1 auto; min-height:0; position:relative; }
#mob-fs-hint{ flex:0 0 auto; font-size:10px; color:#6f88a8; text-align:center; padding-top:5px; }
.mob-fs-btn{ position:absolute; top:6px; right:6px; z-index:6; width:30px; height:30px; border-radius:8px;
  border:1px solid rgba(120,180,255,.35); background:rgba(10,20,34,.72); color:#9fc4ff; font-size:15px; line-height:1;
  cursor:pointer; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; padding:0; }
.mob-fs-btn:active{ background:rgba(30,120,200,.5); }

@media (max-width: 767px){
  /* ─── ANTI-DÉZOOM : clip horizontal à la racine ───
     Tue le shrink-to-fit (page rétrécie) + tout débordement fantôme
     (menu off-canvas, marges parasites). Les tables larges scrollent dans
     leur propre .mob-xwrap, donc ce clip ne masque pas leur contenu.
     overflow-y reste visible → position:sticky vertical intact. */
  html, body{ overflow-x: hidden !important; max-width: 100% !important; }
  body{ position: relative; }

  /* ─── TABLES → CARTES (table data-rows) ─── */
  table.mob-card{ display:block !important; width:100% !important; min-width:0 !important; border:0 !important;
    background:transparent !important; white-space:normal !important; box-shadow:none !important;
    overflow:visible !important; font-size:13px !important; }
  table.mob-card thead{ display:none !important; }
  table.mob-card tbody{ display:block !important; width:100% !important; }
  table.mob-card tbody tr{ display:block !important; width:auto !important; margin:0 0 10px !important;
    border:1px solid var(--mob-card-bd,#1e3250) !important; border-radius:10px !important; overflow:hidden !important;
    background:var(--mob-card-bg,#0f1a2c) !important; }
  table.mob-card tbody td{ display:flex !important; width:auto !important; gap:14px;
    justify-content:space-between !important; align-items:baseline !important; padding:8px 12px !important;
    border:0 !important; border-bottom:1px solid rgba(120,160,220,.08) !important;
    white-space:normal !important; text-align:right !important; font-size:12.8px !important; line-height:1.45 !important; }
  table.mob-card tbody tr td:last-child{ border-bottom:0 !important; }
  table.mob-card tbody td::before{ content:attr(data-mlabel); flex:0 0 auto; text-align:left;
    font-weight:700; color:#8fb0d8; font-size:11.5px; letter-spacing:0; text-transform:none;
    opacity:.85; white-space:nowrap; }
  table.mob-card tbody td[data-mlabel=""]::before{ display:none; }
  /* 1ère cellule = titre de carte (pleine largeur, pas de label) */
  table.mob-card tbody td:first-child{ justify-content:flex-start !important; text-align:left !important;
    background:rgba(120,160,220,.06) !important; font-weight:700 !important; font-size:14px !important; color:#eaf2fb; }
  table.mob-card tbody td:first-child::before{ display:none !important; }

  /* ─── TABLES → SCROLL HORIZONTAL + 1ère colonne FIGÉE (matrices/heatmaps) ─── */
  .mob-xwrap{ overflow-x:auto !important; -webkit-overflow-scrolling:touch; max-width:100%; position:relative; }
  .mob-xwrap::-webkit-scrollbar{ height:6px; }
  .mob-xwrap::-webkit-scrollbar-thumb{ background:rgba(120,160,220,.35); border-radius:3px; }
  table.mob-scroll{ display:table !important; width:auto !important; min-width:max-content !important;
    white-space:nowrap !important; }
  table.mob-scroll th:first-child, table.mob-scroll td:first-child{ position:sticky !important; left:0; z-index:2;
    background:var(--mob-sticky-bg,#0c1626) !important; box-shadow:1px 0 0 rgba(120,160,220,.18); }
  table.mob-scroll thead th:first-child{ z-index:3; }

  /* ─── PILL GROUPS / ONGLETS INTERNES custom : scroll-x au lieu de déborder ─── */
  .per-subnav, .per-tab-anchors, .pm-pills, .ct-tabs, .bt-v2-pill-group, .ind-pill-group,
  .ctrl-bar, [class*="pill-group"]{
    flex-wrap:nowrap !important; overflow-x:auto !important; -webkit-overflow-scrolling:touch; max-width:100%; }
  .per-subnav::-webkit-scrollbar, .pm-pills::-webkit-scrollbar, .ct-tabs::-webkit-scrollbar,
  [class*="pill-group"]::-webkit-scrollbar{ height:0; }

  /* ─── GRAPHES : jamais plus large que l'écran ─── */
  .js-plotly-plot, .plotly{ max-width:100% !important; }

  /* ─── RAFFINEMENTS PAR ONGLET (sûrs, scopés) ─── */
  /* AI_Models leaderboard : figer rang + nom du modèle (2 colonnes) */
  #aim-lb-table th:nth-child(-n+2), #aim-lb-table td:nth-child(-n+2),
  #aim2-lb-tbl th:nth-child(-n+2), #aim2-lb-tbl td:nth-child(-n+2){
    position:sticky !important; background:var(--mob-sticky-bg,#0c1626) !important; z-index:2; }
  #aim-lb-table th:first-child, #aim-lb-table td:first-child,
  #aim2-lb-tbl th:first-child, #aim2-lb-tbl td:first-child{ left:0; }
  #aim-lb-table th:nth-child(2), #aim-lb-table td:nth-child(2),
  #aim2-lb-tbl th:nth-child(2), #aim2-lb-tbl td:nth-child(2){ left:44px; box-shadow:1px 0 0 rgba(120,160,220,.18); }

  /* Écosystème : NE PAS forcer une hauteur courte ! Le force-graph 2D a un layout
     FIXE en pixels (nœuds jusqu'à y≈660) dimensionné pour height:900px (inline).
     Forcer 460px coupait tous les nœuds du bas → carte "vide". On laisse la hauteur
     native → graphe entier visible + pannable/draggable au doigt (handlers touch OK). */
  #cryEcoPanelContent{ width:100% !important; max-width:100vw !important; }

  /* Confort de lecture : valeurs de carte alignées proprement sur les longues listes */
  table.mob-card tbody td{ align-items:flex-start !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   POLISH FIN PAR ONGLET — planchers de texte, hauteurs de graphes, grilles,
   cibles tactiles (2026-06-15). Tout sous @media (max-width:767px), scopé,
   desktop intact. On ne sur-grossit PAS les micro-labels « par design » des
   Thèses/Accueil (parti-pris esthétique) : seulement le texte fonctionnel.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px){
  /* — Effondrement des grilles inline à 3+ colonnes (trop serrées à 390px) — */
  div[style*="grid-template-columns:1fr 1fr 1fr"],
  div[style*="grid-template-columns: 1fr 1fr 1fr"],
  div[style*="grid-template-columns:repeat(3"],
  div[style*="grid-template-columns:repeat(4"],
  div[style*="grid-template-columns:repeat(5"]{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }

  /* — Comparaison PER — */
  .per-page .per-stats-band{ grid-template-columns:1fr !important; }
  .per-page .per-subnav button, .per-page .per-anchor-btn{ font-size:12px !important; min-height:38px !important; padding:9px 13px !important; }
  #perPriceHistBrush-l, #perPriceHistBrush-r, .per-rb-handle{ min-width:24px !important; }

  /* — Corrélations Macro — */
  .cmc-table-caption, .cond-tbl thead th, .cond-verdict-lbl{ font-size:11px !important; }

  /* — Cycle Tracker — */
  .ct-m-formula, .ct-thr, .ct-tile-sub{ font-size:11px !important; }
  .ct-chart-wrap{ height:300px !important; } .ct-chart-wrap.sm{ height:260px !important; } .ct-chart-wrap.rb-light{ height:360px !important; }
  .ct-tabs{ flex-wrap:wrap !important; }

  /* — Écosystème Crypto — */
  .ce-flabel, .ce-legend-grouplabel, .ce-legend-sect-title, .ce-legend-sect-act{ font-size:11px !important; }
  .ce-toolbar-hint{ display:none !important; }
  .ce-toolbar .rfb-d{ min-height:40px !important; font-size:12px !important; padding:8px 12px !important; }
  .ce-search-wrap{ width:100% !important; }
  .crypto-eco details.ce-sub-detail table{ table-layout:fixed !important; }
  .crypto-eco details.ce-sub-detail table td, .crypto-eco details.ce-sub-detail table th{ word-break:break-word !important; }

  /* — Modèles de Valorisation — bande de zones / stats lisibles — */
  div[style*="font-size:10px"], div[style*="font-size: 10px"]{ font-size:11.5px !important; }

  /* — Prediction Markets — */
  .mkt-cat, .mkt-label, .mkt-multi, .pm-kpi .k, .pm-kpi .s, .liq-badge{ font-size:11px !important; }
  .pm-search{ width:100% !important; }

  /* — AI Models — */
  .aim-lb-creator{ font-size:11px !important; } .aim-card-sub, .aim-lb-pager{ font-size:12px !important; }

  /* — ETF — */
  .etf-table thead th{ font-size:11px !important; } .etf-table .num, .etf-table .etf-issuer{ font-size:13px !important; }

  /* — Macro Trends — */
  .sr-card-sub, .fw-card-sub, .mt-audit-table th, .mt-audit-table td, #mtFCIZoneTable td, #mtFCIZoneTable th{ font-size:11px !important; }
  .rfb-d, .mt-tab, .mt-signal-tab, .mt-asset-tab{ min-height:36px !important; }

  /* — Narrative Tracker & TradFi Tracker (classes .nar-*) — */
  .nar-region-btn, .nar-region-all-btn, .nar-axis-label, .nar-corr-cell,
  .nar-corr-label-x, .nar-corr-label-y, #nar-region-hint{ font-size:11px !important; }
  .nar-corr-label-y{ position:sticky !important; left:0; z-index:2; background:var(--mob-sticky-bg,#0c1626) !important; }

  /* — News — badges/labels lisibles + grilles 340px en 1 col — */
  .news-src, .news-time, .news-badge-new, .im-asset-label, .signal-fact-live{ font-size:max(0.72em, 11px) !important; }
  #panel-crypto > div[style*="340px"], #panel-macro > div[style*="340px"]{ grid-template-columns:1fr !important; }

  /* — OrderFlow — */
  .hmt{ font-size:11px !important; } .hmt td, .hmt thead th{ padding:6px 7px !important; }
  .pn, .mc-l, .oi-stat .label, .liq-t th, .t2, .liq-source-badge, .hmt .cat td{ font-size:11px !important; }
  .oi-chart-wrap, .cvd-chart-wrap{ height:280px !important; }

  /* — Portefeuille — */
  .ptf-update{ font-size:12px !important; }
  .patrimoine-item .pi-value{ white-space:nowrap !important; flex-shrink:0 !important; }
  .ptf-period-btn, .ptf-kpi{ min-height:40px !important; }

  /* — Stablecoins — */
  .dd-kpi-l, .lp-kpi-l{ font-size:10.5px !important; } .dd-stack-h, .dd-tag, .lp-tag{ font-size:10px !important; }
  .tb{ min-height:34px !important; display:inline-flex !important; align-items:center; }

  /* — Treasury — */
  .tc-table th{ font-size:11px !important; } .tc-table th, .tc-table td{ padding:11px 12px !important; }
  .tc-kpi-label, .tc-ccard-kpi-sub, .tc-chart-note{ font-size:11px !important; }
  .tc-pill-group button{ min-height:34px !important; }

  /* — Valorisation L1 — scorecard compact — */
  .scorecard table{ font-size:12px !important; } .scorecard thead th, .scorecard tbody td{ padding:8px 6px !important; }

  /* — Indicateur — */
  .tradfi-kpi-l, .tradfi-kpi-d, .ind-kpi-scale{ font-size:11px !important; }
  .tradfi-hist-canvas{ height:260px !important; }

  /* — Thèses (classes .th-c-* partagées) — texte FONCTIONNEL seulement + place + plein écran Plotly — */
  .th-c-table thead th, .th-c-chart-src, .th-c-kpi-source{ font-size:11px !important; }
  .th-chapter{ padding-left:16px !important; padding-right:16px !important; }
  .th-c-chart{ padding:16px 14px !important; }
  .th-c-deepen-body{ padding-left:18px !important; padding-right:18px !important; }
  .th-c-chart-head{ flex-direction:column !important; align-items:flex-start !important; }
  .th-c-chart .modebar, .js-plotly-plot .modebar{ display:none !important; }   /* on a le plein écran au tap */
}

/* ═══════════════════════════════════════════════════════════════════════════
   GRAPHES/WIDGETS MOBILE — anti-écrasement & proportions (2026-06-15 v2)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px){
  /* Plotly : hauteur mini décente pour ne pas être écrasé */
  .js-plotly-plot{ min-height: 300px !important; }
}
/* Téléphones étroits : grilles de cartes denses → 1 colonne (sinon ~180px = écrasé) */
@media (max-width: 520px){
  .ca-mi-grid{ grid-template-columns: 1fr !important; }
  .ca-mi-card .mi-chips{ grid-template-columns: 1fr 1fr 1fr !important; }   /* 3 mini-stats : ok en pleine largeur */
}

/* ═══════════════════════════════════════════════════════════════════════════
   CORRECTIFS DÉFAUTS MOBILE — audit adversarial (2026-06-15 v3)
   Cible les clusters : micro-texte illisible, grilles 2-col coupées,
   tables sans affordance de scroll, graphes aplatis, débordements.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px){
  /* — Plancher de texte : rien sous 11px (sources, légendes, footers, labels) — */
  [style*="font-size:8px"], [style*="font-size: 8px"],
  [style*="font-size:9px"], [style*="font-size: 9px"],
  [style*="font-size:10px"], [style*="font-size: 10px"],
  [style*="font-size:8.5px"], [style*="font-size:9.5px"], [style*="font-size:10.5px"]{
    font-size: 11px !important;
  }
  /* — Affordance de scroll sur les tables/matrices scrollables — */
  .mob-xwrap{ box-shadow: inset -16px 0 14px -14px rgba(0,0,0,.6); }
  .mob-xwrap::-webkit-scrollbar{ height: 7px; }
  .mob-xwrap::-webkit-scrollbar-thumb{ background: rgba(120,170,255,.45); border-radius: 4px; }
  /* — Plotly : hauteur décente (anti-écrasement) — */
  .js-plotly-plot{ min-height: 300px !important; }
}

/* — Téléphones étroits : grilles inline multi-colonnes → 1 colonne (sinon contenu coupé) — */
@media (max-width: 540px){
  div[style*="grid-template-columns:1fr 1fr"], div[style*="grid-template-columns: 1fr 1fr"],
  div[style*="grid-template-columns:repeat(2"], div[style*="grid-template-columns: repeat(2"],
  div[style*="grid-template-columns:repeat(3"], div[style*="grid-template-columns: repeat(3"],
  div[style*="grid-template-columns:repeat(4"], div[style*="grid-template-columns: repeat(4"],
  div[style*="grid-template-columns:repeat(5"]{
    grid-template-columns: 1fr !important;
  }

  /* — TradFi/Narrative Tracker : chips régions, pills de tri, recherche qui débordent — */
  .nar-region-btn, .nar-region-all-btn{ white-space: nowrap; }
  .nar-region-row, .nar-regions, [class*="region"]{ flex-wrap: wrap !important; }
  .nar-sort-pills, .nar-pills, [class*="sort-pills"]{ flex-wrap: wrap !important; row-gap: 6px; }
  .nar-search, .nar-search input, input[type="search"], input[placeholder*="echerch"]{
    max-width: 100% !important; box-sizing: border-box !important; }

  /* — Valorisation L1 : hero + KPI cards coupés à droite — */
  .l1-hero h1, .l1-hero .l1-title, h1.l1-title{ font-size: clamp(22px, 7vw, 30px) !important; line-height: 1.15 !important; padding-right: 8px; }
  .l1-kpis, .l1-kpi-row, [class*="l1-kpi"]{ grid-template-columns: 1fr 1fr !important; }
}

/* ═══ CORRECTIFS v6 (2026-06-16) ═══ */
@media (max-width: 767px){
  /* Cartes : valeur longue (ex. seuils Cycle "≥4 · ≥1.2 · …") wrappe en pleine
     largeur au lieu de cascader un token par ligne. */
  table.mob-card tbody td{ flex-wrap: wrap !important; }
  table.mob-card tbody td::before{ flex: 0 0 auto; }
  /* AI Models : scatters à légende fournie → wrapper plus haut pour que le tracé
     ne soit pas écrasé même quand la légende prend de la place. */
  .aim-chart-wrap{ height: 440px !important; }
  .aim-chart-wrap-sm{ height: 360px !important; }
  /* Graphes "vignette" trop courts ailleurs : plancher de hauteur raisonnable */
  .tradfi-hist-canvas{ height: 280px !important; }
}

/* ═══ v8 : titres héros qui se coupaient (Valo L1, TradFi) ═══ */
@media (max-width: 767px){
  .l1hero h1, .nar-method-hero h1, .nar-method-hero .nar-hero-title{
    font-size: clamp(22px, 7vw, 40px) !important; line-height: 1.12 !important;
    word-break: normal !important; overflow-wrap: break-word !important; }
  .l1hero, .l1hero-content, .nar-method-hero{ padding-left: 14px !important; padding-right: 14px !important; box-sizing: border-box; }
}

/* ═══ Cartes systémiques (Écosystème / Bulle IA) : plein écran mobile fiable ═══ */
@media (max-width: 767px){
  .mob-map-cta{ display:block; width:100%; margin:0 0 10px; padding:13px 16px; cursor:pointer;
    border:1px solid rgba(94,175,246,.45); border-radius:12px;
    background:linear-gradient(135deg, rgba(94,175,246,.16), rgba(167,139,250,.10));
    color:#cfe6ff; font-family:'Inter',sans-serif; font-weight:700; font-size:13.5px; letter-spacing:.3px; }
  .mob-map-cta:active{ background:rgba(94,175,246,.30); }
  /* plein écran CSS (pas l'API Fullscreen → marche sur iOS) */
  .mob-map-fs{ position:fixed !important; inset:0 !important; margin:0 !important;
    width:100vw !important; height:100vh !important; height:100dvh !important;
    z-index:99999 !important; border-radius:0 !important; }
  .mob-map-fs > canvas{ width:100vw !important; height:100vh !important; height:100dvh !important; }
  .mob-map-x{ position:fixed; top:max(env(safe-area-inset-top,12px),12px); right:14px; z-index:100000;
    width:44px; height:44px; border-radius:50%; border:1px solid #2a3d5a; background:rgba(10,16,26,.92);
    color:#fff; font-size:20px; line-height:1; display:flex; align-items:center; justify-content:center; cursor:pointer; }
  body.mob-mapfs{ overflow:hidden !important; }
}


/* ══════════════════════════════════════════════════════════════════════════
   DRAPEAUX EMOJI — police de secours auto-hébergée            (2026-08-03)
   ──────────────────────────────────────────────────────────────────────────
   BUG CORRIGÉ : sur le site public, AUCUN drapeau (🇺🇸 🇨🇳 🇫🇷 …) ne s'affichait
   sur les OS dépourvus de glyphes de drapeaux — Windows en tête : sa police
   système « Segoe UI Emoji » ne contient AUCUN drapeau, donc 🇺🇸 y sort en deux
   lettres encadrées « US » (ou en carrés vides). Linux et vieux Android : idem.
   Audit CDP du 2026-08-03 sur les pages live : les 6 piles de polices qui
   portent des drapeaux (Montserrat/sans-serif · Inter,Montserrat… ·
   "DM Mono"/monospace · "DM Sans",Inter… · "Instrument Serif"/serif ·
   "Source Serif 4"/Georgia/serif) ne contenaient AUCUNE police emoji de
   secours. C'était donc vrai sur 100 % des drapeaux du site — pas « souvent ».

   MÉTHODE — on n'écrase AUCUNE typographie, et zéro re-knit des 33 pages.
   Une famille CSS peut être composée de PLUSIEURS @font-face couvrant des
   plages Unicode disjointes (c'est ainsi que Google Fonts sert ses sous-jeux).
   On ÉTEND donc chaque famille du site par une face supplémentaire limitée par
   `unicode-range` aux 26 indicateurs régionaux U+1F1E6–U+1F1FF. Le texte latin
   continue de venir de Montserrat/DM Mono/… : la face drapeaux ne peut PAS
   servir hors de sa plage (vérifié en capture).

   ⚠️ PIÈGE VÉRIFIÉ EN CAPTURE — ne PAS « simplifier » ces 9 graisses en une
   seule face `font-weight: 100 900` : ça ne marche pas dès que la famille
   possède déjà des faces (Montserrat/Inter viennent de Google Fonts). Chrome
   apparie d'abord la GRAISSE, retient la face Google, n'y trouve pas le glyphe,
   puis saute à la famille SUIVANTE de la pile au lieu d'essayer notre face : le
   drapeau retombe sur l'emoji système. Test du 2026-08-03 : plage 100 900 →
   échec (emoji Apple ondulé) ; graisses EXACTES → succès (Twemoji plat).
   Le fichier est le même pour les 9 : UN seul téléchargement, reste en cache.

   POURQUOI L'ANCIENNE TENTATIVE NE FAISAIT RIEN : Bulle_IA.Rmd portait
   `font-family: inherit, "Apple Color Emoji", …` — `inherit` est INTERDIT dans
   une liste de familles, donc le parseur CSS rejetait la déclaration ENTIÈRE,
   en silence. (Supprimée le 2026-08-03.)

   COÛT : 78 Ko auto-hébergés (aucune ressource externe → CSP-safe), +3,2 Ko
   gzippés sur custom.css, et grâce à `unicode-range` le fichier n'est
   TÉLÉCHARGÉ QUE si un drapeau est réellement rendu : les pages sans drapeau ne
   paient rien. `font-display: block` = bref instant invisible plutôt qu'un
   flash « US » → 🇺🇸.

   Police : Twemoji Country Flags (COLRv1, 26 indicateurs régionaux).
   Artwork Twemoji © Twitter, CC-BY 4.0 · assets/fonts/TwemojiCountryFlags.woff2
   GARDE-FOU : ./check_flag_font_coverage.py — à relancer dès qu'on ajoute une
   police au site : il échoue si une famille en tête de pile n'est pas étendue
   ici. Vérif visuelle : test_flag_font.html (exclu du déploiement).
   ══════════════════════════════════════════════════════════════════════════ */

/* Famille nommée, à préfixer dans toute NOUVELLE pile de polices :
   font-family: 'Twemoji Country Flags', 'Ma Police', sans-serif; */
@font-face{font-family:'Twemoji Country Flags';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:100;font-style:normal;font-display:block}
@font-face{font-family:'Twemoji Country Flags';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:200;font-style:normal;font-display:block}
@font-face{font-family:'Twemoji Country Flags';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:300;font-style:normal;font-display:block}
@font-face{font-family:'Twemoji Country Flags';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:'Twemoji Country Flags';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:500;font-style:normal;font-display:block}
@font-face{font-family:'Twemoji Country Flags';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:600;font-style:normal;font-display:block}
@font-face{font-family:'Twemoji Country Flags';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:700;font-style:normal;font-display:block}
@font-face{font-family:'Twemoji Country Flags';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:800;font-style:normal;font-display:block}
@font-face{font-family:'Twemoji Country Flags';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:900;font-style:normal;font-display:block}

/* Extension des familles du site — une face par graisse (cf. piège ci-dessus) */
/* Montserrat */
@font-face{font-family:'Montserrat';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:100;font-style:normal;font-display:block}
@font-face{font-family:'Montserrat';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:200;font-style:normal;font-display:block}
@font-face{font-family:'Montserrat';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:300;font-style:normal;font-display:block}
@font-face{font-family:'Montserrat';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:'Montserrat';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:500;font-style:normal;font-display:block}
@font-face{font-family:'Montserrat';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:600;font-style:normal;font-display:block}
@font-face{font-family:'Montserrat';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:700;font-style:normal;font-display:block}
@font-face{font-family:'Montserrat';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:800;font-style:normal;font-display:block}
@font-face{font-family:'Montserrat';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:900;font-style:normal;font-display:block}
/* Inter */
@font-face{font-family:'Inter';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:100;font-style:normal;font-display:block}
@font-face{font-family:'Inter';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:200;font-style:normal;font-display:block}
@font-face{font-family:'Inter';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:300;font-style:normal;font-display:block}
@font-face{font-family:'Inter';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:'Inter';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:500;font-style:normal;font-display:block}
@font-face{font-family:'Inter';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:600;font-style:normal;font-display:block}
@font-face{font-family:'Inter';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:700;font-style:normal;font-display:block}
@font-face{font-family:'Inter';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:800;font-style:normal;font-display:block}
@font-face{font-family:'Inter';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:900;font-style:normal;font-display:block}
/* DM Sans */
@font-face{font-family:'DM Sans';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:100;font-style:normal;font-display:block}
@font-face{font-family:'DM Sans';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:200;font-style:normal;font-display:block}
@font-face{font-family:'DM Sans';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:300;font-style:normal;font-display:block}
@font-face{font-family:'DM Sans';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:'DM Sans';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:500;font-style:normal;font-display:block}
@font-face{font-family:'DM Sans';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:600;font-style:normal;font-display:block}
@font-face{font-family:'DM Sans';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:700;font-style:normal;font-display:block}
@font-face{font-family:'DM Sans';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:800;font-style:normal;font-display:block}
@font-face{font-family:'DM Sans';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:900;font-style:normal;font-display:block}
/* DM Mono */
@font-face{font-family:'DM Mono';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:100;font-style:normal;font-display:block}
@font-face{font-family:'DM Mono';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:200;font-style:normal;font-display:block}
@font-face{font-family:'DM Mono';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:300;font-style:normal;font-display:block}
@font-face{font-family:'DM Mono';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:'DM Mono';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:500;font-style:normal;font-display:block}
@font-face{font-family:'DM Mono';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:600;font-style:normal;font-display:block}
@font-face{font-family:'DM Mono';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:700;font-style:normal;font-display:block}
@font-face{font-family:'DM Mono';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:800;font-style:normal;font-display:block}
@font-face{font-family:'DM Mono';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:900;font-style:normal;font-display:block}
/* DM Serif Display */
@font-face{font-family:'DM Serif Display';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:100;font-style:normal;font-display:block}
@font-face{font-family:'DM Serif Display';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:200;font-style:normal;font-display:block}
@font-face{font-family:'DM Serif Display';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:300;font-style:normal;font-display:block}
@font-face{font-family:'DM Serif Display';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:'DM Serif Display';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:500;font-style:normal;font-display:block}
@font-face{font-family:'DM Serif Display';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:600;font-style:normal;font-display:block}
@font-face{font-family:'DM Serif Display';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:700;font-style:normal;font-display:block}
@font-face{font-family:'DM Serif Display';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:800;font-style:normal;font-display:block}
@font-face{font-family:'DM Serif Display';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:900;font-style:normal;font-display:block}
/* Instrument Serif */
@font-face{font-family:'Instrument Serif';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:100;font-style:normal;font-display:block}
@font-face{font-family:'Instrument Serif';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:200;font-style:normal;font-display:block}
@font-face{font-family:'Instrument Serif';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:300;font-style:normal;font-display:block}
@font-face{font-family:'Instrument Serif';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:'Instrument Serif';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:500;font-style:normal;font-display:block}
@font-face{font-family:'Instrument Serif';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:600;font-style:normal;font-display:block}
@font-face{font-family:'Instrument Serif';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:700;font-style:normal;font-display:block}
@font-face{font-family:'Instrument Serif';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:800;font-style:normal;font-display:block}
@font-face{font-family:'Instrument Serif';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:900;font-style:normal;font-display:block}
/* Source Serif 4 */
@font-face{font-family:'Source Serif 4';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:100;font-style:normal;font-display:block}
@font-face{font-family:'Source Serif 4';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:200;font-style:normal;font-display:block}
@font-face{font-family:'Source Serif 4';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:300;font-style:normal;font-display:block}
@font-face{font-family:'Source Serif 4';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:'Source Serif 4';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:500;font-style:normal;font-display:block}
@font-face{font-family:'Source Serif 4';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:600;font-style:normal;font-display:block}
@font-face{font-family:'Source Serif 4';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:700;font-style:normal;font-display:block}
@font-face{font-family:'Source Serif 4';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:800;font-style:normal;font-display:block}
@font-face{font-family:'Source Serif 4';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:900;font-style:normal;font-display:block}
/* Source Sans Pro */
@font-face{font-family:'Source Sans Pro';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:100;font-style:normal;font-display:block}
@font-face{font-family:'Source Sans Pro';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:200;font-style:normal;font-display:block}
@font-face{font-family:'Source Sans Pro';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:300;font-style:normal;font-display:block}
@font-face{font-family:'Source Sans Pro';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:'Source Sans Pro';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:500;font-style:normal;font-display:block}
@font-face{font-family:'Source Sans Pro';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:600;font-style:normal;font-display:block}
@font-face{font-family:'Source Sans Pro';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:700;font-style:normal;font-display:block}
@font-face{font-family:'Source Sans Pro';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:800;font-style:normal;font-display:block}
@font-face{font-family:'Source Sans Pro';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:900;font-style:normal;font-display:block}
/* JetBrains Mono */
@font-face{font-family:'JetBrains Mono';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:100;font-style:normal;font-display:block}
@font-face{font-family:'JetBrains Mono';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:200;font-style:normal;font-display:block}
@font-face{font-family:'JetBrains Mono';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:300;font-style:normal;font-display:block}
@font-face{font-family:'JetBrains Mono';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:'JetBrains Mono';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:500;font-style:normal;font-display:block}
@font-face{font-family:'JetBrains Mono';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:600;font-style:normal;font-display:block}
@font-face{font-family:'JetBrains Mono';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:700;font-style:normal;font-display:block}
@font-face{font-family:'JetBrains Mono';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:800;font-style:normal;font-display:block}
@font-face{font-family:'JetBrains Mono';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:900;font-style:normal;font-display:block}
/* Space Grotesk */
@font-face{font-family:'Space Grotesk';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:100;font-style:normal;font-display:block}
@font-face{font-family:'Space Grotesk';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:200;font-style:normal;font-display:block}
@font-face{font-family:'Space Grotesk';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:300;font-style:normal;font-display:block}
@font-face{font-family:'Space Grotesk';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:'Space Grotesk';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:500;font-style:normal;font-display:block}
@font-face{font-family:'Space Grotesk';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:600;font-style:normal;font-display:block}
@font-face{font-family:'Space Grotesk';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:700;font-style:normal;font-display:block}
@font-face{font-family:'Space Grotesk';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:800;font-style:normal;font-display:block}
@font-face{font-family:'Space Grotesk';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:900;font-style:normal;font-display:block}
/* Playfair Display */
@font-face{font-family:'Playfair Display';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:100;font-style:normal;font-display:block}
@font-face{font-family:'Playfair Display';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:200;font-style:normal;font-display:block}
@font-face{font-family:'Playfair Display';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:300;font-style:normal;font-display:block}
@font-face{font-family:'Playfair Display';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:'Playfair Display';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:500;font-style:normal;font-display:block}
@font-face{font-family:'Playfair Display';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:600;font-style:normal;font-display:block}
@font-face{font-family:'Playfair Display';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:700;font-style:normal;font-display:block}
@font-face{font-family:'Playfair Display';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:800;font-style:normal;font-display:block}
@font-face{font-family:'Playfair Display';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:900;font-style:normal;font-display:block}
/* Open Sans */
@font-face{font-family:'Open Sans';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:100;font-style:normal;font-display:block}
@font-face{font-family:'Open Sans';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:200;font-style:normal;font-display:block}
@font-face{font-family:'Open Sans';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:300;font-style:normal;font-display:block}
@font-face{font-family:'Open Sans';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:'Open Sans';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:500;font-style:normal;font-display:block}
@font-face{font-family:'Open Sans';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:600;font-style:normal;font-display:block}
@font-face{font-family:'Open Sans';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:700;font-style:normal;font-display:block}
@font-face{font-family:'Open Sans';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:800;font-style:normal;font-display:block}
@font-face{font-family:'Open Sans';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:900;font-style:normal;font-display:block}
/* Lato */
@font-face{font-family:'Lato';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:100;font-style:normal;font-display:block}
@font-face{font-family:'Lato';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:200;font-style:normal;font-display:block}
@font-face{font-family:'Lato';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:300;font-style:normal;font-display:block}
@font-face{font-family:'Lato';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:'Lato';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:500;font-style:normal;font-display:block}
@font-face{font-family:'Lato';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:600;font-style:normal;font-display:block}
@font-face{font-family:'Lato';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:700;font-style:normal;font-display:block}
@font-face{font-family:'Lato';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:800;font-style:normal;font-display:block}
@font-face{font-family:'Lato';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:900;font-style:normal;font-display:block}
/* Roboto */
@font-face{font-family:'Roboto';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:100;font-style:normal;font-display:block}
@font-face{font-family:'Roboto';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:200;font-style:normal;font-display:block}
@font-face{font-family:'Roboto';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:300;font-style:normal;font-display:block}
@font-face{font-family:'Roboto';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:'Roboto';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:500;font-style:normal;font-display:block}
@font-face{font-family:'Roboto';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:600;font-style:normal;font-display:block}
@font-face{font-family:'Roboto';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:700;font-style:normal;font-display:block}
@font-face{font-family:'Roboto';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:800;font-style:normal;font-display:block}
@font-face{font-family:'Roboto';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:900;font-style:normal;font-display:block}
/* Raleway */
@font-face{font-family:'Raleway';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:100;font-style:normal;font-display:block}
@font-face{font-family:'Raleway';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:200;font-style:normal;font-display:block}
@font-face{font-family:'Raleway';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:300;font-style:normal;font-display:block}
@font-face{font-family:'Raleway';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:'Raleway';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:500;font-style:normal;font-display:block}
@font-face{font-family:'Raleway';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:600;font-style:normal;font-display:block}
@font-face{font-family:'Raleway';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:700;font-style:normal;font-display:block}
@font-face{font-family:'Raleway';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:800;font-style:normal;font-display:block}
@font-face{font-family:'Raleway';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:900;font-style:normal;font-display:block}
/* Ubuntu */
@font-face{font-family:'Ubuntu';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:100;font-style:normal;font-display:block}
@font-face{font-family:'Ubuntu';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:200;font-style:normal;font-display:block}
@font-face{font-family:'Ubuntu';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:300;font-style:normal;font-display:block}
@font-face{font-family:'Ubuntu';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:'Ubuntu';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:500;font-style:normal;font-display:block}
@font-face{font-family:'Ubuntu';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:600;font-style:normal;font-display:block}
@font-face{font-family:'Ubuntu';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:700;font-style:normal;font-display:block}
@font-face{font-family:'Ubuntu';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:800;font-style:normal;font-display:block}
@font-face{font-family:'Ubuntu';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:900;font-style:normal;font-display:block}
/* News Cycle */
@font-face{font-family:'News Cycle';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:100;font-style:normal;font-display:block}
@font-face{font-family:'News Cycle';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:200;font-style:normal;font-display:block}
@font-face{font-family:'News Cycle';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:300;font-style:normal;font-display:block}
@font-face{font-family:'News Cycle';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:'News Cycle';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:500;font-style:normal;font-display:block}
@font-face{font-family:'News Cycle';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:600;font-style:normal;font-display:block}
@font-face{font-family:'News Cycle';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:700;font-style:normal;font-display:block}
@font-face{font-family:'News Cycle';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:800;font-style:normal;font-display:block}
@font-face{font-family:'News Cycle';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:900;font-style:normal;font-display:block}
/* Georgia */
@font-face{font-family:'Georgia';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:100;font-style:normal;font-display:block}
@font-face{font-family:'Georgia';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:200;font-style:normal;font-display:block}
@font-face{font-family:'Georgia';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:300;font-style:normal;font-display:block}
@font-face{font-family:'Georgia';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:'Georgia';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:500;font-style:normal;font-display:block}
@font-face{font-family:'Georgia';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:600;font-style:normal;font-display:block}
@font-face{font-family:'Georgia';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:700;font-style:normal;font-display:block}
@font-face{font-family:'Georgia';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:800;font-style:normal;font-display:block}
@font-face{font-family:'Georgia';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:900;font-style:normal;font-display:block}
/* Arial */
@font-face{font-family:'Arial';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:100;font-style:normal;font-display:block}
@font-face{font-family:'Arial';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:200;font-style:normal;font-display:block}
@font-face{font-family:'Arial';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:300;font-style:normal;font-display:block}
@font-face{font-family:'Arial';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:'Arial';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:500;font-style:normal;font-display:block}
@font-face{font-family:'Arial';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:600;font-style:normal;font-display:block}
@font-face{font-family:'Arial';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:700;font-style:normal;font-display:block}
@font-face{font-family:'Arial';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:800;font-style:normal;font-display:block}
@font-face{font-family:'Arial';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:900;font-style:normal;font-display:block}
/* Helvetica */
@font-face{font-family:'Helvetica';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:100;font-style:normal;font-display:block}
@font-face{font-family:'Helvetica';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:200;font-style:normal;font-display:block}
@font-face{font-family:'Helvetica';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:300;font-style:normal;font-display:block}
@font-face{font-family:'Helvetica';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:'Helvetica';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:500;font-style:normal;font-display:block}
@font-face{font-family:'Helvetica';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:600;font-style:normal;font-display:block}
@font-face{font-family:'Helvetica';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:700;font-style:normal;font-display:block}
@font-face{font-family:'Helvetica';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:800;font-style:normal;font-display:block}
@font-face{font-family:'Helvetica';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:900;font-style:normal;font-display:block}
/* Helvetica Neue */
@font-face{font-family:'Helvetica Neue';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:100;font-style:normal;font-display:block}
@font-face{font-family:'Helvetica Neue';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:200;font-style:normal;font-display:block}
@font-face{font-family:'Helvetica Neue';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:300;font-style:normal;font-display:block}
@font-face{font-family:'Helvetica Neue';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:'Helvetica Neue';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:500;font-style:normal;font-display:block}
@font-face{font-family:'Helvetica Neue';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:600;font-style:normal;font-display:block}
@font-face{font-family:'Helvetica Neue';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:700;font-style:normal;font-display:block}
@font-face{font-family:'Helvetica Neue';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:800;font-style:normal;font-display:block}
@font-face{font-family:'Helvetica Neue';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:900;font-style:normal;font-display:block}
/* Segoe UI */
@font-face{font-family:'Segoe UI';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:100;font-style:normal;font-display:block}
@font-face{font-family:'Segoe UI';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:200;font-style:normal;font-display:block}
@font-face{font-family:'Segoe UI';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:300;font-style:normal;font-display:block}
@font-face{font-family:'Segoe UI';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:'Segoe UI';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:500;font-style:normal;font-display:block}
@font-face{font-family:'Segoe UI';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:600;font-style:normal;font-display:block}
@font-face{font-family:'Segoe UI';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:700;font-style:normal;font-display:block}
@font-face{font-family:'Segoe UI';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:800;font-style:normal;font-display:block}
@font-face{font-family:'Segoe UI';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:900;font-style:normal;font-display:block}
/* Times New Roman */
@font-face{font-family:'Times New Roman';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:100;font-style:normal;font-display:block}
@font-face{font-family:'Times New Roman';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:200;font-style:normal;font-display:block}
@font-face{font-family:'Times New Roman';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:300;font-style:normal;font-display:block}
@font-face{font-family:'Times New Roman';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:'Times New Roman';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:500;font-style:normal;font-display:block}
@font-face{font-family:'Times New Roman';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:600;font-style:normal;font-display:block}
@font-face{font-family:'Times New Roman';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:700;font-style:normal;font-display:block}
@font-face{font-family:'Times New Roman';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:800;font-style:normal;font-display:block}
@font-face{font-family:'Times New Roman';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:900;font-style:normal;font-display:block}
/* Times */
@font-face{font-family:'Times';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:100;font-style:normal;font-display:block}
@font-face{font-family:'Times';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:200;font-style:normal;font-display:block}
@font-face{font-family:'Times';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:300;font-style:normal;font-display:block}
@font-face{font-family:'Times';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:'Times';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:500;font-style:normal;font-display:block}
@font-face{font-family:'Times';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:600;font-style:normal;font-display:block}
@font-face{font-family:'Times';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:700;font-style:normal;font-display:block}
@font-face{font-family:'Times';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:800;font-style:normal;font-display:block}
@font-face{font-family:'Times';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:900;font-style:normal;font-display:block}
/* Tahoma */
@font-face{font-family:'Tahoma';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:100;font-style:normal;font-display:block}
@font-face{font-family:'Tahoma';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:200;font-style:normal;font-display:block}
@font-face{font-family:'Tahoma';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:300;font-style:normal;font-display:block}
@font-face{font-family:'Tahoma';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:'Tahoma';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:500;font-style:normal;font-display:block}
@font-face{font-family:'Tahoma';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:600;font-style:normal;font-display:block}
@font-face{font-family:'Tahoma';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:700;font-style:normal;font-display:block}
@font-face{font-family:'Tahoma';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:800;font-style:normal;font-display:block}
@font-face{font-family:'Tahoma';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:900;font-style:normal;font-display:block}
/* Calibri */
@font-face{font-family:'Calibri';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:100;font-style:normal;font-display:block}
@font-face{font-family:'Calibri';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:200;font-style:normal;font-display:block}
@font-face{font-family:'Calibri';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:300;font-style:normal;font-display:block}
@font-face{font-family:'Calibri';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:'Calibri';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:500;font-style:normal;font-display:block}
@font-face{font-family:'Calibri';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:600;font-style:normal;font-display:block}
@font-face{font-family:'Calibri';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:700;font-style:normal;font-display:block}
@font-face{font-family:'Calibri';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:800;font-style:normal;font-display:block}
@font-face{font-family:'Calibri';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:900;font-style:normal;font-display:block}
/* Candara */
@font-face{font-family:'Candara';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:100;font-style:normal;font-display:block}
@font-face{font-family:'Candara';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:200;font-style:normal;font-display:block}
@font-face{font-family:'Candara';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:300;font-style:normal;font-display:block}
@font-face{font-family:'Candara';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:'Candara';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:500;font-style:normal;font-display:block}
@font-face{font-family:'Candara';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:600;font-style:normal;font-display:block}
@font-face{font-family:'Candara';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:700;font-style:normal;font-display:block}
@font-face{font-family:'Candara';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:800;font-style:normal;font-display:block}
@font-face{font-family:'Candara';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:900;font-style:normal;font-display:block}
/* Consolas */
@font-face{font-family:'Consolas';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:100;font-style:normal;font-display:block}
@font-face{font-family:'Consolas';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:200;font-style:normal;font-display:block}
@font-face{font-family:'Consolas';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:300;font-style:normal;font-display:block}
@font-face{font-family:'Consolas';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:'Consolas';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:500;font-style:normal;font-display:block}
@font-face{font-family:'Consolas';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:600;font-style:normal;font-display:block}
@font-face{font-family:'Consolas';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:700;font-style:normal;font-display:block}
@font-face{font-family:'Consolas';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:800;font-style:normal;font-display:block}
@font-face{font-family:'Consolas';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:900;font-style:normal;font-display:block}
/* Courier New */
@font-face{font-family:'Courier New';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:100;font-style:normal;font-display:block}
@font-face{font-family:'Courier New';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:200;font-style:normal;font-display:block}
@font-face{font-family:'Courier New';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:300;font-style:normal;font-display:block}
@font-face{font-family:'Courier New';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:'Courier New';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:500;font-style:normal;font-display:block}
@font-face{font-family:'Courier New';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:600;font-style:normal;font-display:block}
@font-face{font-family:'Courier New';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:700;font-style:normal;font-display:block}
@font-face{font-family:'Courier New';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:800;font-style:normal;font-display:block}
@font-face{font-family:'Courier New';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:900;font-style:normal;font-display:block}
/* Menlo */
@font-face{font-family:'Menlo';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:100;font-style:normal;font-display:block}
@font-face{font-family:'Menlo';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:200;font-style:normal;font-display:block}
@font-face{font-family:'Menlo';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:300;font-style:normal;font-display:block}
@font-face{font-family:'Menlo';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:'Menlo';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:500;font-style:normal;font-display:block}
@font-face{font-family:'Menlo';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:600;font-style:normal;font-display:block}
@font-face{font-family:'Menlo';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:700;font-style:normal;font-display:block}
@font-face{font-family:'Menlo';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:800;font-style:normal;font-display:block}
@font-face{font-family:'Menlo';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:900;font-style:normal;font-display:block}
/* Monaco */
@font-face{font-family:'Monaco';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:100;font-style:normal;font-display:block}
@font-face{font-family:'Monaco';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:200;font-style:normal;font-display:block}
@font-face{font-family:'Monaco';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:300;font-style:normal;font-display:block}
@font-face{font-family:'Monaco';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:'Monaco';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:500;font-style:normal;font-display:block}
@font-face{font-family:'Monaco';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:600;font-style:normal;font-display:block}
@font-face{font-family:'Monaco';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:700;font-style:normal;font-display:block}
@font-face{font-family:'Monaco';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:800;font-style:normal;font-display:block}
@font-face{font-family:'Monaco';src:url('assets/fonts/TwemojiCountryFlags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-weight:900;font-style:normal;font-display:block}

/* ═══════════════════════════════════════════════════════════════════════════
   COUCHE RESPONSIVE UNIVERSELLE — 2026-08-11
   ═══════════════════════════════════════════════════════════════════════════
   Écrite après un audit MESURÉ (.responsive/audit.py, 245 états : 35 pages ×
   7 largeurs de 390 à 2560 px). Chaque règle ci-dessous répond à un défaut
   chiffré, pas à une impression. Le chiffre est cité en commentaire.

   Principe d'architecture : la MISE EN PAGE suit la largeur, l'INTERACTION suit
   le type de pointeur. Un portable tactile et un iPad en paysage affichent une
   mise en page de bureau mais réclament tous deux des cibles au doigt — d'où
   une couche @media (pointer: coarse) séparée des paliers de largeur.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────────
   1. MENU MOBILE — alignement des entrées
   Défaut : `justify-content: space-between` (l. ~1529) répartit icône, libellé
   et chevron sur toute la largeur → libellés plaqués à droite, trou au milieu.
   La règle d'origine visait un lien SANS icône ; depuis le correctif de
   collecte (mobile_nav_enhance.js), chaque entrée porte icône + libellé.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px){
  .navbar-collapse .navbar-nav > li.mne-item > a{
    justify-content: flex-start !important;
    gap: 14px !important;
    text-align: left !important;
  }
  /* le chevron reprend sa place à droite */
  .navbar-collapse .navbar-nav > li.mne-item > a::after{
    margin-left: auto !important;
  }
  /* icône : largeur fixe pour que tous les libellés s'alignent verticalement */
  .navbar-collapse .navbar-nav > li.mne-item > a > i,
  .navbar-collapse .navbar-nav > li.mne-item > a > .nav-icon,
  .navbar-collapse .navbar-nav > li.mne-item > a > svg{
    flex: 0 0 22px !important;
    width: 22px !important;
    text-align: center !important;
  }
  .navbar-collapse .navbar-nav > li.mne-item > a > span{
    flex: 1 1 auto !important;
    text-align: left !important;
    white-space: normal !important;
  }
  /* hauteur de frappe confortable. On ne touche PAS à `display` : le masquage
     du lien vers la page courante (règle `body:has(.hero-landing) …`) est un
     choix assumé, vérifié avant de conclure à un défaut. */
  .navbar-collapse .navbar-nav > li.mne-item{
    min-height: 56px !important;
  }
}

/* ───────────────────────────────────────────────────────────────────────────
   2. MESURE DE LECTURE
   Défaut mesuré : 174 blocs de texte dépassent 95 caractères par ligne dès
   1440 px ; pires cas 256, 285, 312 caractères. Au-delà de ~95 le retour à la
   ligne devient coûteux (l'œil perd la ligne suivante).
   L'unité `ch` cale la limite sur le NOMBRE de caractères, donc elle reste
   juste quelle que soit la taille de police du bloc.
   Seules les légendes/notes/listes de prose sont visées : ni tableaux, ni
   cartes, ni tuiles de tableau de bord.
   ─────────────────────────────────────────────────────────────────────────── */
@media (min-width: 1024px){
  .th-c-chart-sub, .th-c-h-sub, .th-c-table-foot, .gf-tl-desc, .gf-note p,
  .bia-src, .ce-sub-src, .ce-sub-desc, .ep-note, .ep-foot, .pm-hint, .pm-note,
  .ct-sec-meta, .etf-hero-desc, .gt-hero-tldr, .per-section-lead, .ae-rk-def,
  .nar-section-desc, .nar-footer-disclaimer, .adv-callout, .rep-callout{
    max-width: 82ch;
  }
  /* légende sous un graphe : on la garde centrée sous son tracé */
  .th-c-chart > .th-c-chart-sub, .th-c-chart > p{
    margin-left: auto; margin-right: auto;
  }
  /* prose des chapitres et des blocs dépliants */
  .th-c-deepen-body > p, .th-c-deepen-body > ul > li,
  .th-c-callout > p, .th-c-implications > li,
  .bia-sub-body > p, .bia-sub-body > ul > li,
  .ce-sub-body > p, .ce-sub-body > ul > li,
  .ep-take > p, .nar-insight > div > p, main.wrap > p{
    max-width: 82ch;
  }
}

/* ───────────────────────────────────────────────────────────────────────────
   3. PALIER TABLETTE ET PAYSAGE (768 – 1180 px)
   Défaut : le site n'avait qu'UN point de rupture (767 px). Entre 768 et 1180
   une tablette reçoit la mise en page de bureau à pleine densité, jamais
   auditée. On resserre les marges et on empêche les grilles larges de tomber
   sous une largeur de colonne exploitable.
   ─────────────────────────────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1180px){
  .main-container{
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  /* une grille dont les colonnes descendent sous ~150 px n'est plus lisible :
     on laisse le contenu se replier au lieu de comprimer. */
  .ca-mi-grid, #bt-macroind-grid, #tsy-grid, .nar-grid, .per-grid, .etf-grid{
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) !important;
  }
  /* graphes : une hauteur utile, sinon la tendance s'aplatit
     (mesuré : « aplati » = tracé sous 150 px pour une largeur > 320 px) */
  .ct-chart-wrap, .js-plotly-plot, .indicator-chart-wrap, .th-c-chart{
    min-height: 320px;
  }
  /* tables larges : scroll horizontal dédié plutôt qu'une compression illisible */
  .main-container table{
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ───────────────────────────────────────────────────────────────────────────
   4. COUCHE TACTILE — indépendante de la largeur
   Un portable tactile ou un iPad en paysage affichent une mise en page de
   bureau mais se manipulent au doigt. On cible donc le POINTEUR, pas la
   largeur. Défauts mesurés : curseur de réglage haut de 3 px, flèche de tuile
   de 10 × 22 px, entrées de liste à 21 px.
   ─────────────────────────────────────────────────────────────────────────── */
@media (pointer: coarse){
  /* curseurs de réglage : 3 px de haut = impossible à saisir au doigt */
  input[type="range"]{
    height: 32px !important;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
  }
  input[type="range"]::-webkit-slider-runnable-track{
    height: 5px;
    border-radius: 3px;
    background: rgba(120, 180, 255, 0.28);
  }
  input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance: none;
    appearance: none;
    width: 22px; height: 22px;
    margin-top: -8.5px;
    border-radius: 50%;
    background: #5dd6ff;
    border: 2px solid #0b1626;
    box-shadow: 0 1px 4px rgba(0,0,0,.5);
  }
  /* petites flèches / liens « tout voir » : surface de frappe élargie SANS
     changer la mise en page (le pseudo-élément déborde, il ne pousse rien) */
  .ca-tile-arrow, .ca-news-feed-link, .ca-newlist-close,
  .bub-expand, .mob-fs-btn{
    position: relative;
  }
  .ca-tile-arrow::before, .ca-news-feed-link::before, .ca-newlist-close::before,
  .bub-expand::before, .mob-fs-btn::before{
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 44px; height: 44px;
    transform: translate(-50%, -50%);
    /* zone de frappe invisible, au-dessus de rien : n'intercepte que son propre clic */
    z-index: 1;
  }
  /* boutons de segment (1H / 24H / 7J…) : 22 px de haut mesurés */
  #mf-seg > button, .bub-seg > button, .indicator-range-btn,
  .tab-btn, [role="tab"]{
    min-height: 36px !important;
  }
}

/* ───────────────────────────────────────────────────────────────────────────
   5. PLANCHER DE LISIBILITÉ DU TEXTE FONCTIONNEL
   Défaut mesuré sur mobile : 32 composants de texte porteur de DONNÉES sous
   10 px (jusqu'à 7,5 px), 348 occurrences — surtout dans les widgets ajoutés
   après la refonte mobile de juin (calendrier, indicateurs macro US).
   Les micro-libellés en capitales interlettrées sont un parti pris graphique
   assumé et ne sont PAS touchés (vérifié en capture avant décision).
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px){
  .ca-cal-elbl, .ca-cal-efc, .ca-cal-tz, .ca-cal-sess, .ca-cal-mcap,
  .ca-cal-btc, .ca-cal-dayrel, .ca-cal-tick, .ca-news-src,
  .mi-bl, .ca-tile-meta, .ca-tile-name, .ca-modepick-tk, .ca-narr-leader,
  .ca-movers-col-head, .ca-tile-delta, .ca-etf-kpi-lab, .ca-tile-sub{
    font-size: 11px !important;
    line-height: 1.35 !important;
  }
}

/* ── 2 bis. MESURE DE LECTURE — passe structurelle ──────────────────────────
   La passe par classes n'avait ramené These_Financiarisation que de 38 à 37
   blocs : ses coupables sont de la prose NUE (`p`, `li`) dans les sections de
   dossier. On vise donc les CONTENEURS de prose plutôt que chaque classe.
   `max-width` seul : un bloc déjà plus étroit que 82ch n'est pas touché, donc
   cartes, cellules et tuiles étroites restent intactes.
   ─────────────────────────────────────────────────────────────────────────── */
@media (min-width: 1024px){
  .th-c-section > p, .th-c-section > ul > li, .th-c-section > ol > li,
  .th-c-deepen-body p, .th-c-deepen-body li,
  .ep-sec > p, .ep-sec > ul > li, .ep-sec-lede, .ep-quote p, #ep-cov-list li,
  .per-section > p, .per-section > div > p, .per-section > ul > li,
  .fa-central > p, .gf-takeaway > p, .gf-note,
  .th-c-chart > p, .th-c-callout > p,
  .ce-sub-body p, .ce-sub-body li, .bia-sub-body p, .bia-sub-body li{
    max-width: 82ch;
  }
}

/* ── 5 bis. PLANCHER DE LISIBILITÉ — passe résiduelle ───────────────────────
   Reste après la 1re passe : badges à 8 px, valeurs de données à 9-9,5 px.
   On sépare les deux : une pastille compacte tolère 10 px, une VALEUR que
   l'utilisateur doit lire mérite 11 px.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px){
  /* valeurs et libellés porteurs d'information */
  .ca-radar-sig-state, .ca-cyc-dim-name, .ca-news-age, .ca-tsy-age,
  #ca-newlist-upd, .ca-radar-signals-hint, .rfb-d, .cryEcoZ,
  .ca-cal-vals small, .ca-tile small{
    font-size: 11px !important;
  }
  /* pastilles d'état : compactes par dessin, mais 8 px est illisible */
  .ca-cal-earnbadge, .mi-state-badge{
    font-size: 10px !important;
    letter-spacing: 0.04em !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   COUCHE MOBILE — PASSE 2 (2026-08-11)
   Défauts relevés en INSPECTION VISUELLE des 35 onglets en 390 px, puis
   confirmés par la mesure dans le DOM. Ce qui n'a PAS été confirmé n'est pas
   corrigé (ex. les prétendues icônes « tofu » de la barre basse : FontAwesome
   se résout partout, c'était une sur-interprétation d'image).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 6. HÉROS TRONQUÉS ──────────────────────────────────────────────────────
   Trois pages plafonnent leur bandeau d'ouverture à `max-height:480px` avec
   `overflow:hidden` : un réglage de bureau qui, à 390 px, DÉCOUPE le contenu.
   Mesuré : 496 px perdus sur Comparaison_PER (titre coupé, chapô invisible),
   224 px sur Correlations_Macro, 222 px sur Valorisation_L1.
   Sur mobile un bandeau doit s'étendre à son contenu, pas le trancher.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px){
  .per-page .per-page-header,
  #cmc-main, .corr-hero,
  header.l1hero{
    max-height: none !important;
    overflow: visible !important;
    height: auto !important;
    aspect-ratio: auto !important;
  }
  /* un bandeau resté en deux colonnes coince son texte dans une gouttière */
  header.l1hero, .corr-hero-content, .per-page-header{
    display: block !important;
  }
  .l1hero-meta, .corr-hero-meta{
    position: static !important;
    width: auto !important;
    margin-top: 12px !important;
  }
}

/* ── 7. MARGES EMBOÎTÉES QUI DÉVORENT LA LARGEUR ────────────────────────────
   Chaque niveau d'imbrication applique une marge de bureau, et elles
   s'additionnent. Mesuré à 390 px :
     Bulle_IA        8 niveaux → colonne utile 175 px (55 % de l'écran perdus)
     These_Energie   6 niveaux → 208 px  ·  Narrative_Tracker 3 niveaux → 229 px
     Google_Trends   2 niveaux → 176 px  ·  Atlas 3 niveaux → 170 px
   On ne supprime pas les marges (le texte ne doit pas toucher le bord) : on
   les ramène à une valeur unique et non cumulative.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px){
  .container-fluid.main-container{
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  /* conteneurs de second niveau et au-delà : marge minimale, jamais cumulée */
  .bulle-ia, .bia-container, .bia-sub-body,
  .th-chapter, .ep-root, .ep-sec, .ep-cov, .ep-card,
  .nar-page, .nar-container, .nar-insight,
  .gt-section, #aeApp, #aeMetric,
  .per-section, .ce-sub-body, .th-c-section, .th-c-deepen-body{
    padding-left: 8px !important;
    padding-right: 8px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* le 3e niveau et suivants ne rajoutent plus rien horizontalement */
  .bia-sub-body > div, .ep-cov > *, .nar-insight > div,
  .th-c-deepen-body > div{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ── 8. TABLES DÉFILANTES : RENDRE LE DÉFILEMENT VISIBLE ────────────────────
   Défaut mesuré : `.mob-xwrap` fonctionne (colonne figée en sticky, contenu
   atteignable) MAIS sa barre de défilement est masquée — hauteur mesurée 0 px.
   Treasury cache ainsi 714 px à droite, AI_Models 650 px, sans le moindre
   indice visuel. Le lecteur voit une table qui a l'air complète et ne
   découvre jamais 7 colonnes sur 10.
   Deux indices complémentaires : une barre fine VISIBLE (Android/bureau) et
   une ombre de bord permanente (iOS masque les barres jusqu'au geste).
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px){
  .mob-xwrap{
    /* ombre de bord : signale que le contenu continue au-delà du cadre */
    /* thème sombre : une ombre NOIRE sur fond noir ne se voit pas.
       On signale le bord par un liseré clair, dans le bleu de la charte. */
    background-image:
      linear-gradient(to left,  rgba(93,214,255,.30), rgba(93,214,255,0)),
      linear-gradient(to right, rgba(93,214,255,.16), rgba(93,214,255,0));
    background-position: right center, left center;
    background-size: 18px 100%, 10px 100%;
    background-repeat: no-repeat;
    background-attachment: scroll, scroll;
  }
  .mob-xwrap::-webkit-scrollbar{ height: 5px !important; }
  .mob-xwrap::-webkit-scrollbar-track{
    background: rgba(120,180,255,.10); border-radius: 3px;
  }
  .mob-xwrap::-webkit-scrollbar-thumb{
    background: rgba(120,180,255,.50); border-radius: 3px;
  }
  .mob-xwrap{ scrollbar-width: thin; scrollbar-color: rgba(120,180,255,.5) rgba(120,180,255,.10); }
}