/* ============================================================
   Landing Themes (Design Tokens)
   - Keep legacy variables for backward compatibility
   - Add small, per-speciality overrides via .theme-*
   ============================================================ */

.modele-landing{
  /* --- Legacy variables (existing code expects these) --- */
  --violet-mystique: #5B21B6;
  --violet-profond: #4C1D95;
  --dore-lumineux:  #F59E0B;
  --dore-brillant:  #FBBF24;
  --turquoise-energie: #06B6D4;
  --turquoise-clair:   #22D3EE;
  --indigo-profond: #312E81;
  --rose-mystique:  #EC4899;
  --emeraude-sacre: #10B981;
  --blanc-lumiere:  #FFFFFF;
  --noir-cosmos:    #1a0b2e;
  --noir-base:      #1f2937;
  --transition-base: all 0.3s ease;

  /* --- Aliases (used in some templates / premium sections) --- */
  --or-vieux:      var(--dore-lumineux);
  --glass-bg:      rgba(255,255,255,.06);
  --glass-border:  rgba(255,255,255,.14);
  --violet-nuit:   var(--violet-profond);
  --blanc-kasse:   rgba(255,255,255,.92);

  /* --- New design tokens (for future-proof theming) --- */
  --bg:        var(--noir-cosmos);
  --text:      rgba(255,255,255,.92);
  --muted:     rgba(255,255,255,.72);
  --card-bg:   var(--glass-bg);
  --card-border: var(--glass-border);

  --accent:    var(--dore-lumineux);
  --accent-2:  var(--turquoise-clair);

  --btn-grad:  linear-gradient(135deg, var(--dore-lumineux) 0%, var(--dore-brillant) 100%);
  --hero-grad: radial-gradient(1200px 600px at 15% 15%, rgba(245,158,11,.18), transparent 60%),
               radial-gradient(900px 500px at 85% 30%, rgba(34,211,238,.12), transparent 55%),
               linear-gradient(180deg, #0b1020 0%, #070a12 100%);
}

/* =======================
   Speciality Themes
   Apply on <main class="modele-landing theme-XYZ">
   ======================= */

.modele-landing.theme-magnetisme{
  /* Magnétisme : Or + Turquoise (énergie) */
  --accent: var(--dore-lumineux);
  --accent-2: var(--turquoise-clair);
  --btn-grad: linear-gradient(135deg, var(--dore-lumineux) 0%, var(--dore-brillant) 100%);
  --hero-grad: radial-gradient(1200px 600px at 15% 15%, rgba(245,158,11,.22), transparent 60%),
              radial-gradient(900px 500px at 85% 30%, rgba(34,211,238,.14), transparent 55%),
              linear-gradient(180deg, #0b1020 0%, #070a12 100%);
}

.modele-landing.theme-hypno{
  /* Hypno-magnétisme : Violet + Turquoise (transformation) */
  --accent: #a855f7;
  --accent-2: var(--turquoise-clair);
  --btn-grad: linear-gradient(135deg, #a855f7 0%, var(--turquoise-clair) 100%);
  --hero-grad: radial-gradient(1200px 600px at 15% 15%, rgba(168,85,247,.24), transparent 60%),
              radial-gradient(900px 500px at 85% 30%, rgba(34,211,238,.12), transparent 55%),
              linear-gradient(180deg, #0b1020 0%, #070a12 100%);
}

/* Optional: a neutral catalogue look */
.modele-landing.theme-catalogue{
  --accent: #22d3ee;
  --accent-2: #fbbf24;
  --btn-grad: linear-gradient(135deg, #22d3ee 0%, #fbbf24 100%);
}
/* ==========================================================
   LANDING THEMES — SET FINAL “VERROUILLÉ”
   Objectif : 1 classe sur .modele-landing => univers couleurs complet
   ========================================================== */

/* ---------- Defaults (sécurité) ---------- */
.modele-landing {
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.72);

  --surface: rgba(255,255,255,.06);
  --surface-2: rgba(255,255,255,.04);
  --border: rgba(255,255,255,.12);

  --btn-text: #0b0616;
  --btn-outline-text: #ffffff;
  --btn-outline-border: rgba(255,255,255,.35);

  --badge-text: rgba(255,255,255,.92);
  --badge-bg: rgba(255,255,255,.10);
  --badge-border: rgba(255,255,255,.22);

  --btn-grad: linear-gradient(135deg, #d4b071 0%, #b58d4c 100%);

  /* fallback hero */
  --hero-bg: linear-gradient(135deg,#0b0616 0%, #130a2e 55%, #07030f 100%);

  /* Legacy mapping (compat avec tes variables existantes) */
  --dore-lumineux: #d4b071;
  --dore-brillant: #b58d4c;
  --turquoise-energie: rgba(255,255,255,.35);
  --turquoise-clair: rgba(255,255,255,.92);
}


.modele-landing.mag-hub,
.modele-landing.mag-n1,
.modele-landing.mag-n2,
.modele-landing.mag-pack {
  --accent: #D4AF37;
  --accent-2: #F3D062;
  --accent-soft: rgba(212,175,55,.18);

  --btn-text: #1a0b2e;
  --btn-outline-text: #EAFBFF;
  --btn-outline-border: rgba(34,211,238,.55);

  --badge-text: #FDEEC8;
  --badge-bg: rgba(212,175,55,.14);
  --badge-border: rgba(212,175,55,.35);

  --btn-grad: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);

  /* CORRECTION ICI : gradient plus opaque */
  --hero-bg: linear-gradient(135deg,
    rgba(76,29,149,0.90) 0%,
    rgba(91,33,182,0.85) 52%,
    rgba(212,175,55,0.40) 100%
  );

  /* Legacy mapping */
  --dore-lumineux: var(--accent);
  --dore-brillant: var(--accent-2);
  --turquoise-energie: rgba(34,211,238,.55);
  --turquoise-clair: #A5F3FC;
}

/* ==========================================================
   2) HYPNO-MAGNÉTISME — Indigo / Cyan (mental + énergie)
   Classes : hypno-hub, hypno-n1, hypno-n2, hypno-pack
   ========================================================== */
.modele-landing.hypno-hub,
.modele-landing.hypno-n1,
.modele-landing.hypno-n2,
.modele-landing.hypno-pack {
  --accent: #38BDF8;     /* cyan lumineux */
  --accent-2: #6366F1;   /* indigo */
  --accent-soft: rgba(56,189,248,.16);

  --btn-text: #0b0616;
  --btn-outline-text: #E0E7FF;
  --btn-outline-border: rgba(165,180,252,.55);

  --badge-text: #E0F2FE;
  --badge-bg: rgba(56,189,248,.14);
  --badge-border: rgba(99,102,241,.35);

  --btn-grad: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);

  --hero-bg: linear-gradient(135deg,
    rgba(17,24,39,0.92) 0%,
    rgba(49,46,129,0.88) 45%,
    rgba(56,189,248,0.20) 100%
  );

  /* Legacy mapping */
  --dore-lumineux: var(--accent);
  --dore-brillant: var(--accent-2);
  --turquoise-energie: rgba(165,180,252,.55);
  --turquoise-clair: #BAE6FD;
}


/* ==========================================================
   3) MÉDIUMNITÉ — Violet / Rose (subtil, intuitif)
   Classes : med-hub, med-n1, med-n2, med-pack
   ========================================================== */
.modele-landing.med-hub,
.modele-landing.med-n1,
.modele-landing.med-n2,
.modele-landing.med-pack {
  --accent: #D8B4FE;     /* lavande */
  --accent-2: #F472B6;   /* rose */
  --accent-soft: rgba(216,180,254,.16);

  --btn-text: #16081f;
  --btn-outline-text: #FDF2F8;
  --btn-outline-border: rgba(244,114,182,.40);

  --badge-text: #FAE8FF;
  --badge-bg: rgba(216,180,254,.14);
  --badge-border: rgba(216,180,254,.35);

  --btn-grad: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);

  --hero-bg: linear-gradient(135deg,
    rgba(24,10,38,0.95) 0%,
    rgba(76,29,149,0.86) 50%,
    rgba(244,114,182,0.20) 100%
  );

  /* Legacy mapping */
  --dore-lumineux: var(--accent);
  --dore-brillant: var(--accent-2);
  --turquoise-energie: rgba(244,114,182,.40);
  --turquoise-clair: #F5D0FE;
}


/* ==========================================================
   4) GÉOBIOLOGIE — Émeraude / Vert (terre, harmonisation)
   Classes : geo-hub, geo-n1, geo-n2, geo-pack
   ========================================================== */
.modele-landing.geo-hub,
.modele-landing.geo-n1,
.modele-landing.geo-n2,
.modele-landing.geo-pack {
  --accent: #34D399;   /* emerald */
  --accent-2: #A3E635; /* lime */
  --accent-soft: rgba(52,211,153,.14);

  --btn-text: #052e2b;
  --btn-outline-text: #ECFDF5;
  --btn-outline-border: rgba(52,211,153,.50);

  --badge-text: #D1FAE5;
  --badge-bg: rgba(52,211,153,.14);
  --badge-border: rgba(163,230,53,.28);

  --btn-grad: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);

  --hero-bg: linear-gradient(135deg,
    rgba(6,46,37,0.95) 0%,
    rgba(6,95,70,0.88) 52%,
    rgba(163,230,53,0.18) 100%
  );

  /* Legacy mapping */
  --dore-lumineux: var(--accent);
  --dore-brillant: var(--accent-2);
  --turquoise-energie: rgba(52,211,153,.50);
  --turquoise-clair: #6EE7B7;
}


/* ==========================================================
   5) COMMUNICATION ANIMALE — Teal / Corail (lien + douceur)
   Classes : ca-hub, ca-n1, ca-n2, ca-pack
   ========================================================== */
.modele-landing.ca-hub,
.modele-landing.ca-n1,
.modele-landing.ca-n2,
.modele-landing.ca-pack {
  --accent: #2DD4BF;   /* teal */
  --accent-2: #FB7185; /* corail/rose */
  --accent-soft: rgba(45,212,191,.14);

  --btn-text: #052e2b;
  --btn-outline-text: #F0FDFA;
  --btn-outline-border: rgba(45,212,191,.55);

  --badge-text: #FFF1F2;
  --badge-bg: rgba(251,113,133,.14);
  --badge-border: rgba(251,113,133,.30);

  --btn-grad: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);

  --hero-bg: linear-gradient(135deg,
    rgba(6,78,74,0.95) 0%,
    rgba(15,118,110,0.86) 52%,
    rgba(251,113,133,0.18) 100%
  );

  /* Legacy mapping */
  --dore-lumineux: var(--accent);
  --dore-brillant: var(--accent-2);
  --turquoise-energie: rgba(45,212,191,.55);
  --turquoise-clair: #99F6E4;
}


/* ==========================================================
   OVERRIDES MINIMAUX (pour “dé-hardcoder” la base sans la réécrire)
   ========================================================== */

/* HERO: remplace le gradient figé de la base par --hero-bg */
.modele-landing .hero-mystique {
    position: relative;
}

.modele-landing .hero-mystique::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--hero-bg);
    z-index: 1;
    pointer-events: none;
}

.modele-landing .hero-mystique > * {
    position: relative;
    z-index: 2;
}
/* BADGES: remplace les rgba(245,158,11,...) figés */
.modele-landing .badge-premium,
.modele-landing .section-badge {
  background: var(--badge-bg) !important;
  border-color: var(--badge-border) !important;
  color: var(--badge-text) !important;
}

/* BOUTONS: force le gradient et l’outline via variables */
.modele-landing .btn-primary {
  background: var(--btn-grad) !important;
  color: var(--btn-text) !important;
}

.modele-landing .btn-secondary {
  border-color: var(--btn-outline-border) !important;
  color: var(--btn-outline-text) !important;
}
.section-mentor {
    background: var(--surface-2);
}

.modele-landing.mag-hub .section-mentor {
    --accent-soft: rgba(212,175,55,.18); /* Or translucide */
}

.mentor-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

@media (max-width: 768px) {
    .mentor-grid {
        grid-template-columns: 1fr;
    }
}