@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

@tailwind base;
@tailwind components;
@tailwind utilities;

/* ===== Reset ===== */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
img{max-width:100%;height:auto;display:block}
button{font:inherit;cursor:pointer}
a{text-decoration:none;color:inherit}
::selection{background:#000;color:#fff}

/* ===== Thème (light + dark) ===== */
:root,
[data-theme="light"]{
  --bg:#ffffff; 
  --ink:#000000; 
  --ink-muted:#5f5f5f;
  --card:#ffffff; 
  --stroke:#000000;
  --ok:#66BB6A; 
  --warn:#FF7043; 
  --danger:#E53935; 
  --yellow:#FFCA28;
  --outline:3px; 
  --radius:22px; 
  --radius-lg:28px;
  --shadow:6px 6px 0 #000; 
  --line:#e6e6ea;
  --btn-border:#e5e5ea; 
  --btn-shadow:#d1d1d6;
}

[data-theme="dark"]{
  --bg:#05060a;
  --ink:#f9fafb;
  --ink-muted:#a1a1aa;
  --card:#0b0c12;
  --stroke:#ffffff;
  --shadow:6px 6px 0 #000;
  --line:#27272f;
  --btn-border:#27272f;
  --btn-shadow:#000000;
}

body{
  background:var(--bg);color:var(--ink);
  font-family:Inter, ui-sans-serif, system-ui;
  line-height:1.45;
}

.container{
  max-width:720px;margin:0 auto;padding:28px 18px 64px;
}

/* ===== Boutons ===== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.6rem;
  padding:0.55rem 1.1rem;
  border-radius:0.95rem;
  border:2px solid var(--stroke);
  font-weight:900;
  font-size:0.95rem;
  background:#fff;
  color:#000;
  box-shadow:0 0 0 0 #000;
  transition:
    background .18s ease,
    color .18s ease,
    border-color .18s ease,
    box-shadow .16s ease,
    transform .08s ease;
}

.btn--primary{
  background:#000;
  color:#fff;
  border-color:#000;
}

.btn--primary:hover{
  background:#222;         /* un peu plus gris au hover */
  box-shadow:0 4px 0 #000; /* ombre bien noire décallée */
  transform:translateY(-1px);
}

.btn--primary:active{
  transform:translateY(1px);
  box-shadow:0 1px 0 #000;
}

.btn--ghost{
  background:#fff;
  color:#000;
  border-width:2.5px;
  border-color:#000;
}

.btn--ghost:hover{
  background:#f5f5f5;
  box-shadow:0 4px 0 #000;
  transform:translateY(-1px);
}

.btn--ghost:active{
  transform:translateY(1px);
  box-shadow:0 1px 0 #000;
}

/* ===== Titres & texte ===== */
h1{font-weight:900;font-size:clamp(28px,7.2vw,44px);line-height:1.12;margin:10px 0 14px}
p.lead{color:var(--ink-muted);margin:0 0 18px;font-size:16px}
h2{font-size:22px;font-weight:900;margin:0 0 10px}
.muted{color:var(--ink-muted)}
.mono{font-variant-numeric:tabular-nums}

/* ===== Badge (ancienne version, peut servir encore) ===== */
.badge{
  display:inline-flex;align-items:center;gap:10px;padding:8px 14px;
  background:#fff;border:var(--outline) solid var(--stroke);
  border-radius:999px;box-shadow:var(--shadow);
  font-weight:900;font-size:14px;
}
.badge__dot{
  width:10px;height:10px;background:var(--yellow);
  border:var(--outline) solid var(--stroke);border-radius:999px;
}

/* ===== Cards ===== */
.card{
  background:var(--card);
  border:var(--outline) solid var(--stroke);
  border-radius:var(--radius);
  padding:26px 22px;
  box-shadow:var(--shadow);
  margin:24px 0;
  transition: transform .16s ease, box-shadow .16s ease;
}

/* effet hover partout */
.card:hover{
  transform: translateY(-2px);
  box-shadow: 8px 8px 0 #000;
}

.card--xl{border-radius:var(--radius-lg)}
.card--share{background:#E53935;color:#fff;border-color:#000}
.card--share h2{color:#fff}

.split{display:flex;gap:18px}

/* KPI */
.kpi{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:6px}
.kpi small{display:block;color:var(--ink-muted);font-weight:800}
.kpi .v{font-weight:900;font-size:20px}

/* Progress bars */
.row{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;margin:14px 0}
.progress{height:18px;border:var(--outline) solid var(--stroke);border-radius:12px;padding:2px}
.progress__fill{height:100%;border-radius:8px;width:0;transition:width .8s cubic-bezier(.2,.8,.2,1)}
.progress--ok .progress__fill{background:var(--ok)}
.progress--warn .progress__fill{background:var(--warn)}
.progress--danger .progress__fill{background:var(--danger)}

/* Desktop grid */
@media (min-width:980px){
  .container{max-width:1080px}
  .grid{display:grid;grid-template-columns:1.15fr 1fr;gap:24px}
}

/* ===== Bouton retour haut ===== */
.to-top{
  position:fixed;right:18px;bottom:18px;z-index:50;
  display:inline-flex;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:16px;background:#fff;
  border:3px solid var(--btn-border);
  box-shadow:0 4px 0 var(--btn-shadow);
  transition:transform .07s ease, box-shadow .07s ease;
}
.to-top:hover{transform:translateY(-1px)}
.to-top:active{transform:translateY(2px);box-shadow:0 2px 0 var(--btn-shadow)}
.to-top img{width:22px;height:22px}

/* ===== Footer ===== */
.footer{border-top:3px solid var(--line);margin-top:42px}
.footer__inner{
  max-width:1080px;margin:0 auto;padding:24px 18px 48px;
  display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;
}
.footer__brand{display:flex;align-items:center;gap:16px}
.footer__brand img{height:48px}
.footer__title{font-size:18px;font-weight:900}
.footer__blurb{color:var(--ink);font-size:15px}

.footer__links{display:flex;gap:12px;flex-wrap:wrap}
.footer__iconbtn{
  width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;
  border:2px solid var(--stroke);border-radius:14px;background:#fff;box-shadow:4px 4px 0 #000;
}
.footer__iconbtn img{width:24px;height:24px}

.footer__legal{
  grid-column:1 / -1;color:var(--ink-muted);
  font-size:14px;margin-top:6px;
}

/* Scroll smooth */
html {
  scroll-behavior: smooth;
}

/* ===== TOP BAR (CSS gardé, tu recoderas le composant après si besoin) ===== */
/* ... tu peux remettre ici tout ton CSS topbar si tu veux, je ne le recolle pas
   pour éviter un pavé trop énorme; l’important est que les classes .topbar__* existent
   si tu réutilises ton composant Topbar. */

/* ===== PAGE PAYS ===== */
.pays-hero-title{
  font-size: 26px;
  font-weight: 900;
  margin: 14px 0 8px;
}

.pays-hero-lead{
  color: var(--ink-muted);
  font-size: 15px;
  margin-bottom: 24px;
  max-width: 640px;
}

/* grille : toujours 1 colonne */
.pays-grid{
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

/* card pays */
.pays-card{
  cursor: pointer;
  margin: 0;
}

.pays-card summary{
  list-style: none;
}

.pays-card summary::-webkit-details-marker{
  display: none;
}

.pays-card__header{
  display: flex;
  align-items: center;
  gap: 10px;
}

.pays-card__flag{
  width: 26px;
  height: 26px;
  border-radius: 999px;
  overflow: hidden;
  border: 2px solid var(--stroke);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pays-card__title-group{
  display: flex;
  flex-direction: column;
}

.pays-card__name{
  font-weight: 900;
  font-size: 15px;
}

.pays-card__region{
  font-size: 12px;
  color: var(--ink-muted);
}

.pays-card__tag{
  margin-left: auto;
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 2px solid var(--stroke);
}

.pays-card__body{
  margin-top: 10px;
  font-size: 14px;
  color: var(--ink-muted);
}

.pays-card__section-title{
  font-weight: 800;
  margin-top: 10px;
  margin-bottom: 4px;
}

.pays-card__resources{
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pays-card__link{
  font-size: 13px;
  text-decoration: underline;
}

/* fiche ouverte */
.pays-card[open]{
  transform: translateY(-2px);
  box-shadow: 8px 8px 0 #000;
}

/* === Pill generic badge === */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  border: var(--outline) solid var(--stroke);
  background: var(--card);
  color: var(--ink);
  font-weight: 900;
  font-size: 0.85rem;
  line-height: 1.2;
  box-shadow: var(--shadow);
  white-space: nowrap;
}

.pill__label {
  display: inline-block;
}

.pill__dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: var(--yellow);
  border: var(--outline) solid var(--stroke);
}

.pill--soft {
  background: color-mix(in srgb, var(--card) 80%, var(--yellow) 20%);
}

@media (max-width: 600px) {
  .pill {
    font-size: 0.78rem;
    padding: 0.3rem 0.75rem;
  }
}

html[data-theme="dark"] .pill {
  background: color-mix(in srgb, var(--card) 70%, #000 30%);
}

.hero-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.5rem;
}

/* ===== TOP BAR ===== */
/* Desktop : pill glass détachée des bords
   Mobile : header rectangulaire plein écran
   Mobile menu : overlay plein écran glass
*/

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
}

/* HEADER MOBILE PAR DÉFAUT */
.topbar__inner {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 10px 16px;
  border-radius: 0;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(18px) saturate(150%);
  box-shadow: 0 8px 18px rgba(0,0,0,0.06);
}

[data-theme="dark"] .topbar__inner {
  background: rgba(8,8,12,0.96);
  border-color: rgba(255,255,255,0.10);
  box-shadow: 0 14px 40px rgba(0,0,0,0.85);
}

.topbar__row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.topbar__spacer {
  flex: 1;
}

/* Titre */
.topbar__title {
  font-weight: 900;
  font-size: 13px;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.12);
  background: #000;
  color: #fff;
}

[data-theme="dark"] .topbar__title {
  border-color: rgba(255,255,255,0.35);
}

/* NAV DESKTOP : cachée par défaut */
.topbar__nav-desktop {
  display: none;
  align-items: center;
  gap: 6px;
}

/* Boutons nav desktop */
.topbar__btn {
  position: relative;
  border-radius: 999px;
  border: 1px solid transparent;
  padding: 4px 10px;
  font-size: 13px;
  font-weight: 700;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background .15s ease, transform .08s ease, border-color .15s ease;
}

.topbar__btn:hover {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.12);
  transform: translateY(-1px);
}

[data-theme="dark"] .topbar__btn:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.2);
}

.topbar__btn--active {
  background: rgba(0,0,0,0.08);
  border-color: rgba(0,0,0,0.35);
}

[data-theme="dark"] .topbar__btn--active {
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.5);
}

/* Tooltip raccourcis (desktop, au survol long) */
.topbar__shortcut {
  display: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -20px;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.1);
  background: rgba(255,255,255,0.96);
  color: #000;
  white-space: nowrap;
}

[data-theme="dark"] .topbar__shortcut {
  background: rgba(0,0,0,0.9);
  color: #fff;
  border-color: rgba(255,255,255,0.2);
}

/* Icônes (thème + burger) */
.topbar__icon-btn {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.18);
  background: rgba(255,255,255,0.92);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s ease,
              border-color .15s ease,
              transform .08s ease,
              box-shadow .12s ease;
}

[data-theme="dark"] .topbar__icon-btn {
  background: rgba(10,10,15,0.96);
  border-color: rgba(255,255,255,0.3);
  color: #fef3c7;
}

.topbar__icon-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.14);
}

.topbar__icon-btn:active {
  transform: translateY(1px);
  box-shadow: none;
}

/* Burger uniquement mobile/tablette ; caché en desktop */
.topbar__icon-btn--burger {
  margin-left: 6px;
}

.topbar__icon-btn--active {
  background: rgba(0,0,0,0.06);
}

[data-theme="dark"] .topbar__icon-btn--active {
  background: rgba(255,255,255,0.15);
}

/* ===== OVERLAY MOBILE ===== */
.topbar__overlay {
  position: fixed;
  inset: 0;
  z-index: 59;
  background: rgba(255,255,255,0.86);
  backdrop-filter: blur(20px) saturate(160%);
  display: flex;
  justify-content: center;
  padding: 72px 16px 24px;
}

[data-theme="dark"] .topbar__overlay {
  background: rgba(4,4,8,0.86);
}

.topbar__overlay-inner {
  width: 100%;
  max-width: 420px;
  border-radius: 26px;
  border: 1px solid rgba(0,0,0,0.16);
  background: rgba(255,255,255,0.96);
  box-shadow: 0 22px 50px rgba(0,0,0,0.35);
  padding: 18px 20px 26px;
}

[data-theme="dark"] .topbar__overlay-inner {
  background: rgba(10,10,16,0.98);
  border-color: rgba(255,255,255,0.18);
}

.topbar__overlay-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.topbar__overlay-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.topbar__overlay-menu {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.topbar__overlay-link {
  width: 100%;
  padding: 8px 4px;
  text-align: left;
  border-radius: 999px;
  border: none;
  background: transparent;
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
  cursor: pointer;
  transition: color .12s ease, transform .08s ease;
}

.topbar__overlay-link:hover {
  transform: translateY(-1px);
  color: #111111;
}

[data-theme="dark"] .topbar__overlay-link:hover {
  color: #f9fafb;
}

.topbar__overlay-link--active {
  text-decoration: underline;
}

/* ===== BREAKPOINTS TOPBAR ===== */

/* Desktop (>= 900px) : pill glass centrée */
@media (min-width: 900px) {
  .topbar__inner {
    width: min(100% - 24px, 1080px);
    max-width: 1080px;
    margin: 8px auto 0;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 8px 22px rgba(0,0,0,0.06);
  }

  .topbar__nav-desktop {
    display: flex;
  }

  .topbar__icon-btn--burger {
    display: none;
  }

  .topbar__overlay {
    display: none;
  }

  .topbar__shortcut {
    display: inline-block;
  }
}

/* Laisser respirer le contenu sous la topbar sur écrans moyens/grands */
@media (min-width: 640px) {
  .container {
    padding-top: 72px;
  }
}

/* Layout générique des pages collecte */
.page {
  padding: 1.75rem 1.5rem 2rem;
  /* espace pour la topbar fixe */
  margin-top: 64px;
}

@media (min-width: 900px) {
  .page {
    padding: 2rem 2.25rem 2.5rem;
    margin-top: 72px; /* un peu plus d’air en desktop */
  }
}
.page__inner {
  max-width: 1120px;
  margin: 0 auto;
}

/* Header */
.page__header {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.page__title {
  font-size: 1.6rem;
  font-weight: 700;
}

.page__subtitle {
  margin-top: 0.25rem;
  font-size: 0.95rem;
  color: hsl(var(--muted-foreground));
}

/* Résumé chiffres clés */
.page__summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.page__summary-item {
  padding: 0.9rem 1rem;
  border-radius: 0.9rem;
  background: hsl(var(--muted) / 0.4);
  border: 1px solid hsl(var(--border));
}

.page__summary-label {
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
}

.page__summary-value {
  display: block;
  margin-top: 0.25rem;
  font-size: 1.1rem;
  font-weight: 600;
}

/* Grille cartes */
.page__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}

@media (min-width: 960px) {
  .page__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page__card--wide {
    grid-column: 1 / -1;
  }
}

@theme inline {--radius-sm:calc(var(--radius) - 4px);--radius-md:calc(var(--radius) - 2px);--radius-lg:var(--radius);--radius-xl:calc(var(--radius) + 4px);--color-background:var(--background);--color-foreground:var(--foreground);--color-card:var(--card);--color-card-foreground:var(--card-foreground);--color-popover:var(--popover);--color-popover-foreground:var(--popover-foreground);--color-primary:var(--primary);--color-primary-foreground:var(--primary-foreground);--color-secondary:var(--secondary);--color-secondary-foreground:var(--secondary-foreground);--color-muted:var(--muted);--color-muted-foreground:var(--muted-foreground);--color-accent:var(--accent);--color-accent-foreground:var(--accent-foreground);--color-destructive:var(--destructive);--color-border:var(--border);--color-input:var(--input);--color-ring:var(--ring);--color-chart-1:var(--chart-1);--color-chart-2:var(--chart-2);--color-chart-3:var(--chart-3);--color-chart-4:var(--chart-4);--color-chart-5:var(--chart-5);--color-sidebar:var(--sidebar);--color-sidebar-foreground:var(--sidebar-foreground);--color-sidebar-primary:var(--sidebar-primary);--color-sidebar-primary-foreground:var(--sidebar-primary-foreground);--color-sidebar-accent:var(--sidebar-accent);--color-sidebar-accent-foreground:var(--sidebar-accent-foreground);--color-sidebar-border:var(--sidebar-border);--color-sidebar-ring:var(--sidebar-ring);}

:root {--radius:0.625rem;--background:oklch(1 0 0);--foreground:oklch(0.145 0 0);--card:oklch(1 0 0);--card-foreground:oklch(0.145 0 0);--popover:oklch(1 0 0);--popover-foreground:oklch(0.145 0 0);--primary:oklch(0.205 0 0);--primary-foreground:oklch(0.985 0 0);--secondary:oklch(0.97 0 0);--secondary-foreground:oklch(0.205 0 0);--muted:oklch(0.97 0 0);--muted-foreground:oklch(0.556 0 0);--accent:oklch(0.97 0 0);--accent-foreground:oklch(0.205 0 0);--destructive:oklch(0.577 0.245 27.325);--border:oklch(0.922 0 0);--input:oklch(0.922 0 0);--ring:oklch(0.708 0 0);--chart-1:oklch(0.646 0.222 41.116);--chart-2:oklch(0.6 0.118 184.704);--chart-3:oklch(0.398 0.07 227.392);--chart-4:oklch(0.828 0.189 84.429);--chart-5:oklch(0.769 0.188 70.08);--sidebar:oklch(0.985 0 0);--sidebar-foreground:oklch(0.145 0 0);--sidebar-primary:oklch(0.205 0 0);--sidebar-primary-foreground:oklch(0.985 0 0);--sidebar-accent:oklch(0.97 0 0);--sidebar-accent-foreground:oklch(0.205 0 0);--sidebar-border:oklch(0.922 0 0);--sidebar-ring:oklch(0.708 0 0);}

.dark {--background:oklch(0.145 0 0);--foreground:oklch(0.985 0 0);--card:oklch(0.205 0 0);--card-foreground:oklch(0.985 0 0);--popover:oklch(0.205 0 0);--popover-foreground:oklch(0.985 0 0);--primary:oklch(0.922 0 0);--primary-foreground:oklch(0.205 0 0);--secondary:oklch(0.269 0 0);--secondary-foreground:oklch(0.985 0 0);--muted:oklch(0.269 0 0);--muted-foreground:oklch(0.708 0 0);--accent:oklch(0.269 0 0);--accent-foreground:oklch(0.985 0 0);--destructive:oklch(0.704 0.191 22.216);--border:oklch(1 0 0 / 10%);--input:oklch(1 0 0 / 15%);--ring:oklch(0.556 0 0);--chart-1:oklch(0.488 0.243 264.376);--chart-2:oklch(0.696 0.17 162.48);--chart-3:oklch(0.769 0.188 70.08);--chart-4:oklch(0.627 0.265 303.9);--chart-5:oklch(0.645 0.246 16.439);--sidebar:oklch(0.205 0 0);--sidebar-foreground:oklch(0.985 0 0);--sidebar-primary:oklch(0.488 0.243 264.376);--sidebar-primary-foreground:oklch(0.985 0 0);--sidebar-accent:oklch(0.269 0 0);--sidebar-accent-foreground:oklch(0.985 0 0);--sidebar-border:oklch(1 0 0 / 10%);--sidebar-ring:oklch(0.556 0 0);}

:root {
  --radius:22px;    /* ton radius normal */
  --radius-lg:28px; /* grand radius des grosses cards */
}

@layer base {
  * {
    @apply border-border outline-ring/50;}
  body {
    @apply bg-background text-foreground;}}































/* Flag déjà centré : on renforce juste le flex */
.pays-card__flag {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  overflow: hidden;
  border: 2px solid var(--stroke);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Ligne titre + icônes dans la carte */
.pays-card__name-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 900;
  font-size: 15px;
}

.pays-card__open-icon {
  margin-left: 4px;
  opacity: 0.7;
}

/* ===== COUNTRY LAYER (vrai layer par dessus tout) ===== */

.country-layer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  background: rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(18px) saturate(140%);
}

.country-layer-panel {
  width: 100%;
  max-width: 760px;
  background: var(--card);
  border-radius: var(--radius-lg);
  border: var(--outline) solid var(--stroke);
  box-shadow: var(--shadow);
  padding: 22px 22px 18px;
  max-height: 82vh;
  overflow: auto;
}

/* Header */
.country-layer-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.country-layer-flag {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  overflow: hidden;
  border: 2px solid var(--stroke);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.country-layer-title-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.country-layer-title {
  font-weight: 900;
  font-size: 1.02rem;
}

.country-layer-region {
  font-size: 0.8rem;
  color: var(--ink-muted);
}

.country-layer-spacer {
  flex: 1;
}

.country-layer-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.country-layer-iconbtn {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 2px solid var(--stroke);
  background: var(--card);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 4px 4px 0 #000;
  transition: transform 0.08s ease, box-shadow 0.12s ease, background 0.15s ease;
}

.country-layer-iconbtn:hover {
  transform: translateY(-1px);
  box-shadow: 6px 6px 0 #000;
}

.country-layer-iconbtn:active {
  transform: translateY(1px);
  box-shadow: 2px 2px 0 #000;
}

/* Corps */
.country-layer-body {
  font-size: 0.94rem;
  color: var(--ink-muted);
}

.country-layer-section-title {
  font-weight: 800;
  margin-top: 12px;
  margin-bottom: 4px;
  color: var(--ink);
  font-size: 0.9rem;
}

.country-layer-resources {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pays-card__flag {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  overflow: hidden;
  border: 2px solid var(--stroke);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.country-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

/* Grosse pastille à gauche avec Maximize */
.country-card__left {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: var(--outline) solid var(--stroke);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--card);
  transition:
    background 0.15s ease,
    transform 0.08s ease,
    box-shadow 0.12s ease;
}

/* Partie principale : flag + texte */
.country-card__main {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

/* Ligne titre + icône folder */
.pays-card__name-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 900;
  font-size: 15px;
}

/* Effet hover synchronisé avec la card */
.country-card:hover .country-card__left {
  transform: translateY(-1px);
  box-shadow: 0 4px 0 #000; /* ombre verticale comme les btn */
}

.country-card:active .country-card__left {
  transform: translateY(1px);
  box-shadow: 0 1px 0 #000;
}

.country-layer-iconbtn {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 2px solid var(--stroke);
  background: var(--card);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 0 0 0 #000; /* pas d'ombre de base */
  transition:
    background 0.15s ease,
    transform 0.08s ease,
    box-shadow 0.12s ease;
}

.country-layer-iconbtn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 0 #000; /* ombre verticale comme les btn */
}

.country-layer-iconbtn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 #000;
}

.country-layer-videos {
  margin-top: 16px;
}

.country-layer-videos-strip {
  margin-top: 8px;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.country-layer-video-card {
  min-width: 180px;
  max-width: 220px;
  text-decoration: none;
  color: inherit;
}

.country-layer-video-thumb {
  position: relative;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid var(--stroke);
  box-shadow: 4px 4px 0 #000;
  background: #000;
}

.country-layer-video-thumb img {
  width: 100%;
  height: auto;
  display: block;
}

.country-layer-video-title {
  margin-top: 6px;
  font-size: 0.8rem;
  font-weight: 700;
}