/* ═══════════════════════════════════════════════════════════════════
   ONG PLAYDOO INTERNATIONAL — Système de Thèmes
   5 thèmes : light | dark | forest | ocean | sunset
   v3 — Identité Vert · Or · Bleu appliquée au thème par défaut (light)
        + variable --accent-3 (3ᵉ couleur de marque) sur les 5 thèmes
═══════════════════════════════════════════════════════════════════ */

/* ── Thème CLAIR (défaut) — Identité Forum-Chantier Vert·Or·Bleu ── */
:root,
[data-theme="light"],
.theme-light {
  --bg-primary:       #ffffff;
  --bg-secondary:     #f6f8f6;
  --bg-card:          #ffffff;
  --bg-navbar:        #0d2818;      /* Navbar toujours sombre → liens blancs */
  --bg-footer:        #0a2015;
  --bg-topbar:        #0d2818;      /* Topbar sombre → texte blanc */
  --bg-section-alt:   #eef4ef;

  --text-primary:     #16241c;
  --text-secondary:   #4a5c50;
  --text-muted:       #87988f;
  --text-inverse:     #ffffff;
  --text-footer:      rgba(255,255,255,0.80);
  --topbar-text:      rgba(255,255,255,0.90);

  /* Vert (primaire) — Or (accent/mise en valeur) — Bleu (institutionnel/ONU) */
  --accent:           #0f7a45;
  --accent-rgb:       15,122,69;
  --accent-hover:     #0a5c34;
  --accent-light:     #e6f4ec;
  --accent-2:         #d4a017;
  --accent-2-hover:   #a67c12;
  --accent-2-light:   #fbf1d7;
  --accent-3:         #1d4e89;
  --accent-3-hover:   #163c69;
  --accent-3-light:   #e7eff9;

  --border-color:     #e2e9e4;
  --shadow-sm:        0 1px 3px rgba(15,45,30,.06), 0 1px 2px rgba(15,45,30,.04);
  --shadow-md:        0 4px 16px rgba(15,45,30,.08);
  --shadow-lg:        0 12px 40px rgba(15,45,30,.12);
  --shadow-card:      0 2px 12px rgba(15,45,30,.07);

  --hero-overlay:     linear-gradient(135deg, rgba(13,40,24,.80) 0%, rgba(29,78,137,.55) 100%);
  --navbar-shadow:    0 2px 20px rgba(0,0,0,.15);
  --topbar-border:    1px solid rgba(255,255,255,.10);

  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-xl:  32px;
}

/* ── Thème SOMBRE ───────────────────────────────────────────────── */
[data-theme="dark"],
.theme-dark {
  --bg-primary:       #0f0f1a;
  --bg-secondary:     #1a1a2e;
  --bg-card:          #1e1e35;
  --bg-navbar:        #0a0a14;
  --bg-footer:        #080812;
  --bg-topbar:        #0a0a14;
  --bg-section-alt:   #161624;

  --text-primary:     #e8e8f0;
  --text-secondary:   #b0b0cc;
  --text-muted:       #666688;
  --text-inverse:     #0f0f1a;
  --text-footer:      rgba(232,232,240,.75);
  --topbar-text:      rgba(232,232,240,0.90);

  --accent:           #f59e0b;
  --accent-rgb:       245,158,11;
  --accent-hover:     #fbbf24;
  --accent-light:     rgba(245,158,11,.15);
  --accent-2:         #60a5fa;
  --accent-2-light:   rgba(96,165,250,.15);
  --accent-3:         #34d399;
  --accent-3-light:   rgba(52,211,153,.15);

  --border-color:     #2a2a45;
  --shadow-sm:        0 1px 3px rgba(0,0,0,.4);
  --shadow-md:        0 4px 16px rgba(0,0,0,.5);
  --shadow-lg:        0 12px 40px rgba(0,0,0,.6);
  --shadow-card:      0 2px 12px rgba(0,0,0,.4);

  --hero-overlay:     linear-gradient(135deg, rgba(8,8,18,.85) 0%, rgba(180,83,9,.6) 100%);
  --navbar-shadow:    0 2px 20px rgba(0,0,0,.5);
  --topbar-border:    1px solid rgba(255,255,255,.08);
}

/* ── Thème FORÊT ────────────────────────────────────────────────── */
[data-theme="forest"],
.theme-forest {
  --bg-primary:       #f0f4ec;
  --bg-secondary:     #e8f0e4;
  --bg-card:          #f8fbf5;
  --bg-navbar:        #1a2f10;      /* Vert très sombre → liens blancs */
  --bg-footer:        #122009;
  --bg-topbar:        #1a2f10;      /* Topbar sombre → texte blanc */
  --bg-section-alt:   #deebd8;

  --text-primary:     #1a2f10;
  --text-secondary:   #3a5c28;
  --text-muted:       #6a8a58;
  --text-inverse:     #f0f4ec;
  --text-footer:      rgba(240,244,236,.80);
  --topbar-text:      rgba(240,244,236,0.90);

  --accent:           #4a7c2e;
  --accent-rgb:       74,124,46;
  --accent-hover:     #3a6020;
  --accent-light:     #d8ecc8;
  --accent-2:         #8b5a2b;
  --accent-2-light:   #f5e6d0;
  --accent-3:         #1d4e89;
  --accent-3-light:   #dce7f5;

  --border-color:     #c5d8b8;
  --shadow-sm:        0 1px 3px rgba(26,47,16,.08);
  --shadow-md:        0 4px 16px rgba(26,47,16,.12);
  --shadow-lg:        0 12px 40px rgba(26,47,16,.18);
  --shadow-card:      0 2px 12px rgba(26,47,16,.09);

  --hero-overlay:     linear-gradient(135deg, rgba(26,47,16,.80) 0%, rgba(74,124,46,.5) 100%);
  --navbar-shadow:    0 2px 20px rgba(26,47,16,.30);
  --topbar-border:    1px solid rgba(255,255,255,.10);
}

/* ── Thème OCÉAN ────────────────────────────────────────────────── */
[data-theme="ocean"],
.theme-ocean {
  --bg-primary:       #eef6fb;
  --bg-secondary:     #e0f0f8;
  --bg-card:          #f5fafd;
  --bg-navbar:        #062038;      /* Bleu marine très sombre → liens blancs */
  --bg-footer:        #031525;
  --bg-topbar:        #062038;      /* Topbar sombre → texte blanc */
  --bg-section-alt:   #d0e8f5;

  --text-primary:     #062038;
  --text-secondary:   #0c4a6e;
  --text-muted:       #4a80a0;
  --text-inverse:     #eef6fb;
  --text-footer:      rgba(238,246,251,.80);
  --topbar-text:      rgba(238,246,251,0.90);

  --accent:           #0284c7;
  --accent-rgb:       2,132,199;
  --accent-hover:     #0369a1;
  --accent-light:     #bae6fd;
  --accent-2:         #0e9488;
  --accent-2-light:   #ccfbf1;
  --accent-3:         #d4a017;
  --accent-3-light:   #faedc4;

  --border-color:     #bae0f0;
  --shadow-sm:        0 1px 3px rgba(6,32,56,.08);
  --shadow-md:        0 4px 16px rgba(6,32,56,.12);
  --shadow-lg:        0 12px 40px rgba(6,32,56,.18);
  --shadow-card:      0 2px 12px rgba(6,32,56,.09);

  --hero-overlay:     linear-gradient(135deg, rgba(6,32,56,.82) 0%, rgba(2,132,199,.55) 100%);
  --navbar-shadow:    0 2px 20px rgba(6,32,56,.30);
  --topbar-border:    1px solid rgba(255,255,255,.10);
}

/* ── Thème COUCHER DE SOLEIL ────────────────────────────────────── */
[data-theme="sunset"],
.theme-sunset {
  --bg-primary:       #fff8f0;
  --bg-secondary:     #fff1e6;
  --bg-card:          #fffaf5;
  --bg-navbar:        #4a0e04;      /* Rouge très sombre → liens blancs */
  --bg-footer:        #300800;
  --bg-topbar:        #4a0e04;      /* Topbar sombre → texte blanc */
  --bg-section-alt:   #ffe8d0;

  --text-primary:     #4a0e04;
  --text-secondary:   #7c1d0a;
  --text-muted:       #b05a3a;
  --text-inverse:     #fff8f0;
  --text-footer:      rgba(255,248,240,.80);
  --topbar-text:      rgba(255,248,240,0.90);

  --accent:           #ea580c;
  --accent-rgb:       234,88,12;
  --accent-hover:     #c2410c;
  --accent-light:     #fed7aa;
  --accent-2:         #d97706;
  --accent-2-light:   #fef3c7;
  --accent-3:         #0e7490;
  --accent-3-light:   #cffafe;

  --border-color:     #fcd5a8;
  --shadow-sm:        0 1px 3px rgba(74,14,4,.08);
  --shadow-md:        0 4px 16px rgba(74,14,4,.12);
  --shadow-lg:        0 12px 40px rgba(74,14,4,.18);
  --shadow-card:      0 2px 12px rgba(74,14,4,.09);

  --hero-overlay:     linear-gradient(135deg, rgba(74,14,4,.80) 0%, rgba(234,88,12,.55) 100%);
  --navbar-shadow:    0 2px 20px rgba(74,14,4,.30);
  --topbar-border:    1px solid rgba(255,255,255,.10);
}

/* ── Transition fluide entre les thèmes ───────────────────────── */
body,
.main-navbar,
.topbar,
.main-footer,
.card,
.ong-card,
.hero-slide {
  transition:
    background-color 0.35s ease,
    color 0.35s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

/* ── Indicateurs de thème dans le menu déroulant ─────────────── */
.theme-dot {
  display: inline-block;
  width: 14px; height: 14px;
  border-radius: 50%;
  margin-right: 6px;
  border: 2px solid rgba(0,0,0,.12);
  vertical-align: middle;
  flex-shrink: 0;
}
.theme-dot-light   { background: linear-gradient(135deg, #0f7a45, #d4a017); border-color: #c8d8c8; }
.theme-dot-dark    { background: #1a1a2e; border-color: #2a2a45; }
.theme-dot-forest  { background: linear-gradient(135deg, #4a7c2e, #2d4a1e); }
.theme-dot-ocean   { background: linear-gradient(135deg, #0284c7, #062038); }
.theme-dot-sunset  { background: linear-gradient(135deg, #ea580c, #4a0e04); }