/* ============================================================
   DEBUNK'ONOMY — THEME GLOBAL UNIFIÉ
   Palette maîtresse inspirée de NEMO IMS.
   Ce fichier doit être chargé EN DERNIER dans les pages HTML.
   Modifier prioritairement les variables ci-dessous pour changer
   l'identité visuelle globale du site.
   ============================================================ */

/* ------------------------------------------------------------
   1. Variables centrales
   ------------------------------------------------------------ */
:root {
  /* Couleurs dominantes */
  --color-deep: #061f1a;
  --color-dark: #0b3028;
  --color-mid: #145246;
  --color-forest: #183f37;
  --color-teal: #1f7a73;
  --color-duck: #2f8f88;

  /* Neutres froids */
  --color-charcoal: #1e2524;
  --color-slate: #2f3a38;
  --color-grey: #d9dfdd;
  --color-light: #f2f5f4;
  --color-white: #f8fbfa;

  /* Texte */
  --color-text: #17211f;
  --color-muted: #6d7a77;

  /* Alias pour compatibilité avec les anciens CSS */
  --ink-deep: var(--color-deep);
  --ink: var(--color-dark);
  --ink-mid: var(--color-mid);
  --teal: var(--color-teal);
  --duck: var(--color-duck);
  --mint: #9fd8d4;
  --mint-soft: var(--color-grey);
  --cream: var(--color-light);
  --cream-deep: var(--color-grey);
  --sand: var(--color-grey);
  --rust: var(--color-duck);
  --ochre: var(--color-teal);

  /* Effets */
  --border-soft: rgba(47, 143, 136, 0.22);
  --border-strong: rgba(47, 143, 136, 0.42);
  --shadow-soft: 0 24px 70px rgba(6, 31, 26, 0.14);
  --shadow-strong: 0 28px 90px rgba(6, 31, 26, 0.28);

  /* Rythme */
  --radius-sm: 14px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --section-pad: clamp(76px, 8vw, 122px);
}

/* ------------------------------------------------------------
   2. Base globale
   ------------------------------------------------------------ */
html { scroll-behavior: smooth; }

body {
  background: var(--color-light) !important;
  color: var(--color-text);
}

::selection {
  background: rgba(47, 143, 136, 0.32);
  color: var(--color-deep);
}

/* ------------------------------------------------------------
   3. Navigation globale — unifiée vert profond
   ------------------------------------------------------------ */
.inav,
.site-header,
.nav,
.header,
.main-nav,
.site-nav,
.navbar {
  background:
    radial-gradient(circle at top left, rgba(47, 143, 136, 0.10), transparent 36%),
    linear-gradient(135deg, var(--color-deep) 0%, var(--color-dark) 100%) !important;
  border-bottom: 1px solid rgba(47, 143, 136, 0.35) !important;
  color: var(--color-grey) !important;
}

.inav a,
.site-header a,
.nav a,
.header a,
.main-nav a,
.site-nav a,
.navbar a,
.inav__brand,
.inav__brand span {
  color: var(--color-grey) !important;
}

.inav a:hover,
.inav a.current,
.inav a.is-active,
.site-header a:hover,
.nav a:hover,
.nav a.current,
.nav a.is-active,
.inav__brand:hover span {
  color: var(--color-duck) !important;
}

.inav__cta,
.nav__cta {
  background: var(--color-duck) !important;
  color: #ffffff !important;
  border-color: var(--color-duck) !important;
}

.inav__cta:hover,
.nav__cta:hover {
  background: var(--color-teal) !important;
  border-color: var(--color-teal) !important;
  color: #ffffff !important;
}

/* Sélecteur de langue */
.lang-switch__current {
  color: var(--color-grey) !important;
}

.lang-switch__menu {
  background: var(--color-deep) !important;
  border: 1px solid rgba(47, 143, 136, 0.35) !important;
  box-shadow: var(--shadow-strong) !important;
}

.lang-switch__menu a {
  color: var(--color-grey) !important;
}

.lang-switch__menu a:hover {
  background: rgba(47, 143, 136, 0.18) !important;
  color: var(--color-white) !important;
}

.lang-switch__menu strong {
  color: var(--color-duck) !important;
}

/* ------------------------------------------------------------
   4. Héros / grandes entrées de page
   ------------------------------------------------------------ */
.hero,
.page-hero,
.home-hero,
.book-hero,
.article-hero,
.media-hero,
.newsletter-hero,
.contact-hero,
.about-hero,
.nemo-hero,
.cta-book {
  background:
    radial-gradient(circle at top left, rgba(47, 143, 136, 0.18), transparent 34%),
    radial-gradient(circle at bottom right, rgba(20, 82, 70, 0.28), transparent 40%),
    linear-gradient(135deg, var(--color-deep) 0%, var(--color-dark) 52%, var(--color-mid) 100%) !important;
  color: var(--color-grey) !important;
}

.hero h1,
.page-hero h1,
.home-hero h1,
.book-hero h1,
.article-hero h1,
.media-hero h1,
.newsletter-hero h1,
.contact-hero h1,
.about-hero h1,
.nemo-hero h1,
.cta-book h2 {
  color: var(--color-white) !important;
}

.hero p,
.page-hero p,
.home-hero p,
.book-hero p,
.article-hero p,
.media-hero p,
.newsletter-hero p,
.contact-hero p,
.about-hero p,
.nemo-hero p,
.cta-book p {
  color: var(--color-grey) !important;
}

/* ------------------------------------------------------------
   5. Sections génériques
   ------------------------------------------------------------ */
.section--dark,
.theme-section--dark,
.hero--dark,
.cta-section,
.final-cta,
.dark-section,
.manifest-section {
  background:
    radial-gradient(circle at top left, rgba(47, 143, 136, 0.18), transparent 34%),
    linear-gradient(135deg, var(--color-deep) 0%, var(--color-dark) 52%, var(--color-mid) 100%) !important;
  color: var(--color-grey) !important;
}

.section--mid,
.theme-section--mid {
  background:
    radial-gradient(circle at top right, rgba(47, 143, 136, 0.14), transparent 36%),
    linear-gradient(135deg, var(--color-dark) 0%, var(--color-mid) 100%) !important;
  color: var(--color-grey) !important;
}

.section--light,
.theme-section--light,
.section--cream,
.section--cream-deep,
.light-section,
.content-section,
.article-section {
  background: var(--color-light) !important;
  color: var(--color-text) !important;
}

.section--grey,
.theme-section--grey {
  background: var(--color-grey) !important;
  color: var(--color-text) !important;
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.theme-section--dark h1,
.theme-section--dark h2,
.theme-section--dark h3,
.hero--dark h1,
.hero--dark h2,
.cta-section h2,
.final-cta h2,
.dark-section h1,
.dark-section h2,
.dark-section h3,
.manifest-section h1,
.manifest-section h2,
.manifest-section h3 {
  color: var(--color-white) !important;
}

.section--dark p,
.section--dark li,
.theme-section--dark p,
.theme-section--dark li,
.hero--dark p,
.cta-section p,
.final-cta p,
.dark-section p,
.dark-section li,
.manifest-section p,
.manifest-section li {
  color: var(--color-grey) !important;
}

.section--light h1,
.section--light h2,
.section--light h3,
.theme-section--light h1,
.theme-section--light h2,
.theme-section--light h3,
.section--cream h1,
.section--cream h2,
.section--cream h3,
.section--cream-deep h1,
.section--cream-deep h2,
.section--cream-deep h3,
.light-section h1,
.light-section h2,
.light-section h3 {
  color: var(--color-deep) !important;
}

.section--light p,
.section--light li,
.theme-section--light p,
.theme-section--light li,
.section--cream p,
.section--cream li,
.section--cream-deep p,
.section--cream-deep li,
.light-section p,
.light-section li {
  color: var(--color-slate) !important;
}

/* ------------------------------------------------------------
   6. Titres, sourcils, accents
   ------------------------------------------------------------ */
.section-eyebrow,
.eyebrow,
.kicker,
.label,
.overline {
  color: var(--color-teal) !important;
}

.section--dark .section-eyebrow,
.theme-section--dark .section-eyebrow,
.hero--dark .section-eyebrow,
.hero .section-eyebrow,
.page-hero .section-eyebrow,
.nemo-hero__eyebrow,
.cta-book__eyebrow {
  color: var(--color-duck) !important;
}

.section-title,
.title,
.page-title {
  color: var(--color-deep);
}

.section-title em,
.hero-title em,
.title em,
.page-title em {
  color: var(--color-teal) !important;
}

.section--dark .section-title,
.theme-section--dark .section-title,
.hero .section-title,
.page-hero .section-title,
.nemo-hero .section-title {
  color: var(--color-white) !important;
}

.section--dark .section-title em,
.theme-section--dark .section-title em,
.hero .section-title em,
.page-hero .section-title em,
.nemo-hero .section-title em {
  color: var(--color-grey) !important;
}

/* ------------------------------------------------------------
   7. Citations / callouts
   ------------------------------------------------------------ */
blockquote,
.manifesto-quote,
.side-quote,
.callout,
.theme-callout,
.nemo-manifesto-quote,
.nemo-side-quote,
.nemo-insight-box {
  border-left: 4px solid var(--color-duck) !important;
}

blockquote,
.callout,
.theme-callout,
.nemo-insight-box {
  background: #ffffff !important;
  color: var(--color-deep) !important;
}

.section--dark blockquote,
.theme-section--dark blockquote,
.dark-section blockquote,
.nemo-section--ink blockquote,
.nemo-section--ink .nemo-side-quote,
.nemo-section--ink .nemo-manifesto-quote {
  background: rgba(242, 245, 244, 0.06) !important;
  border-color: rgba(47, 143, 136, 0.36) !important;
  color: var(--color-grey) !important;
}

/* ------------------------------------------------------------
   8. Cartes globales
   ------------------------------------------------------------ */
.card,
.feature-card,
.route-card,
.article-card,
.media-card,
.book-card,
.theme-card,
.news-card,
.home-card,
.nemo-gateway-card,
.pillar-card,
.nemo-knot-card,
.nemo-institution-card,
.nemo-is-card,
.nemo-stability-grid > div,
.nemo-cycle__step,
.nemo-faq-mini details {
  background: #ffffff !important;
  color: var(--color-text) !important;
  border: 1px solid rgba(20, 82, 70, 0.16) !important;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

.card h3,
.feature-card h3,
.route-card h3,
.article-card h3,
.media-card h3,
.book-card h3,
.theme-card h3,
.news-card h3,
.home-card h3,
.nemo-gateway-card h3,
.pillar-card__title,
.nemo-knot-card h3,
.nemo-institution-card h3,
.nemo-is-card h3,
.nemo-stability-grid h3,
.nemo-cycle__step h3 {
  color: var(--color-deep) !important;
}

.card p,
.feature-card p,
.route-card p,
.article-card p,
.media-card p,
.book-card p,
.theme-card p,
.news-card p,
.home-card p,
.nemo-gateway-card p,
.pillar-card__desc,
.nemo-knot-card p,
.nemo-institution-card p,
.nemo-is-card li,
.nemo-stability-grid p,
.nemo-cycle__step p,
.nemo-faq-mini p {
  color: var(--color-slate) !important;
}

.section--dark .card,
.theme-section--dark .card,
.dark-section .card,
.nemo-section--ink .nemo-gateway-card,
.nemo-section--ink .nemo-institution-card,
.nemo-section--ink .nemo-stability-grid > div,
.nemo-section--ink .nemo-cycle__step {
  background: rgba(242, 245, 244, 0.055) !important;
  color: var(--color-grey) !important;
  border: 1px solid rgba(47, 143, 136, 0.28) !important;
  box-shadow: var(--shadow-strong);
}

.section--dark .card h3,
.theme-section--dark .card h3,
.dark-section .card h3,
.nemo-section--ink .nemo-gateway-card h3,
.nemo-section--ink .nemo-institution-card h3,
.nemo-section--ink .nemo-stability-grid h3,
.nemo-section--ink .nemo-cycle__step h3 {
  color: var(--color-white) !important;
}

.section--dark .card p,
.theme-section--dark .card p,
.dark-section .card p,
.nemo-section--ink .nemo-gateway-card p,
.nemo-section--ink .nemo-institution-card p,
.nemo-section--ink .nemo-stability-grid p,
.nemo-section--ink .nemo-cycle__step p {
  color: var(--color-grey) !important;
}

.card:hover,
.feature-card:hover,
.route-card:hover,
.article-card:hover,
.media-card:hover,
.book-card:hover,
.theme-card:hover,
.news-card:hover,
.home-card:hover,
.nemo-gateway-card:hover,
.pillar-card--link:hover {
  border-color: rgba(47, 143, 136, 0.56) !important;
}

/* ------------------------------------------------------------
   9. Boutons
   ------------------------------------------------------------ */
.btn,
.button,
.cta-button {
  border-radius: 999px;
}

.btn--primary,
.button--primary,
.cta-primary,
.btn--solid-dark,
.inav__cta {
  background: var(--color-duck) !important;
  color: #ffffff !important;
  border-color: var(--color-duck) !important;
}

.btn--primary:hover,
.button--primary:hover,
.cta-primary:hover,
.btn--solid-dark:hover,
.inav__cta:hover {
  background: var(--color-teal) !important;
  border-color: var(--color-teal) !important;
  color: #ffffff !important;
}

.btn--secondary,
.btn--ghost,
.button--secondary,
.btn--ghost-dark {
  color: var(--color-deep) !important;
  border-color: rgba(47, 143, 136, 0.45) !important;
  background: transparent !important;
}

.section--dark .btn--secondary,
.section--dark .btn--ghost,
.section--dark .button--secondary,
.section--dark .btn--ghost-dark,
.theme-section--dark .btn--secondary,
.theme-section--dark .btn--ghost,
.theme-section--dark .button--secondary,
.theme-section--dark .btn--ghost-dark,
.hero .btn--secondary,
.hero .btn--ghost,
.page-hero .btn--secondary,
.page-hero .btn--ghost,
.cta-book .btn--ghost {
  color: var(--color-grey) !important;
  border-color: rgba(47, 143, 136, 0.45) !important;
  background: rgba(242, 245, 244, 0.04) !important;
}

.btn--secondary:hover,
.btn--ghost:hover,
.button--secondary:hover,
.btn--ghost-dark:hover {
  color: #ffffff !important;
  background: rgba(47, 143, 136, 0.22) !important;
  border-color: var(--color-duck) !important;
}

/* ------------------------------------------------------------
   10. Footer
   ------------------------------------------------------------ */
.footer {
  background: var(--color-deep) !important;
  color: var(--color-grey) !important;
  border-top: 1px solid rgba(47, 143, 136, 0.30) !important;
}

.footer a {
  color: var(--color-grey) !important;
}

.footer a:hover {
  color: var(--color-duck) !important;
}

.footer h4 {
  color: var(--color-white) !important;
}

.footer__bottom {
  border-top-color: rgba(47, 143, 136, 0.22) !important;
  color: rgba(217, 223, 221, 0.78) !important;
}

/* ------------------------------------------------------------
   11. Utilitaires
   ------------------------------------------------------------ */
.text-duck { color: var(--color-duck) !important; }
.text-teal { color: var(--color-teal) !important; }
.text-deep { color: var(--color-deep) !important; }
.bg-deep { background: var(--color-deep) !important; color: var(--color-grey) !important; }
.bg-dark { background: var(--color-dark) !important; color: var(--color-grey) !important; }
.bg-mid { background: var(--color-mid) !important; color: var(--color-grey) !important; }
.bg-light { background: var(--color-light) !important; color: var(--color-text) !important; }
.bg-grey { background: var(--color-grey) !important; color: var(--color-text) !important; }

/* ------------------------------------------------------------
   12. Responsive
   ------------------------------------------------------------ */
@media (max-width: 760px) {
  :root { --section-pad: 72px; }
}