/* ============================================================
   V2 — COSMIQUE
   Nuit profonde, dorés, étoiles, lune. Plus mystique et premium.
   ============================================================ */

:root {
  --night: #1B1610;
  --night-2: #2A2218;
  --night-3: #3B3023;
}

body.mood-cosmique {
  background: var(--night);
  color: #E8DCC0;
  --fg-1: #E8DCC0;
  --fg-2: #C1B49A;
  --fg-3: #948770;
  --fg-accent: #E8CC85;
  --fg-inverse: #1B1610;

  --bg-1: var(--night);
  --bg-2: var(--night-2);
  --bg-3: var(--night-3);

  --border-1: rgba(232, 204, 133, 0.14);
  --border-strong: rgba(232, 204, 133, 0.28);

  --nav-bg: rgba(27, 22, 16, 0.78);
  --nav-border: rgba(232, 204, 133, 0.12);
  --nav-active-bg: rgba(232, 204, 133, 0.12);

  --card-bg: var(--night-2);
  --card-border: rgba(232, 204, 133, 0.14);

  --lecture-bg: #16110C;
  --forwho-bg: #16110C;
  --booking-bg: #100C08;
  --footer-bg: #0C0906;

  --btn-secondary-border: rgba(232, 204, 133, 0.3);
  --btn-secondary-hover: rgba(232, 204, 133, 0.1);

  --portrait-bg: linear-gradient(135deg, #6B4D1E, #2A2218);

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 6px 18px rgba(0,0,0,0.5);
  --shadow-lg: 0 22px 48px -16px rgba(0,0,0,0.7);
  --shadow-gold: 0 8px 28px -10px rgba(232, 204, 133, 0.5);
}

/* Override TSC gold to the warmer night-gold */
body.mood-cosmique .mi-pillar__glyph,
body.mood-cosmique .mi-pillar__tag,
body.mood-cosmique .mi-step__num,
body.mood-cosmique .mi-eyebrow,
body.mood-cosmique .mi-about__sig,
body.mood-cosmique .mi-section__head h2 em,
body.mood-cosmique .mi-about__text h2 em { color: #E8CC85; }

body.mood-cosmique .mi-pricing__price strong,
body.mood-cosmique .mi-summary__total .val { color: #E8CC85; }

body.mood-cosmique .mi-step__icon { background: rgba(232, 204, 133, 0.12); color: #E8CC85; }
body.mood-cosmique .mi-confirm__icon { background: rgba(232, 204, 133, 0.16); color: #E8CC85; }

body.mood-cosmique .mi-pricing__badge,
body.mood-cosmique .mi-btn--primary,
body.mood-cosmique .mi-nav__cta { background: linear-gradient(135deg, #E8CC85, #C89232); color: var(--night); }
body.mood-cosmique .mi-btn--primary:hover,
body.mood-cosmique .mi-nav__cta:hover { background: linear-gradient(135deg, #F4E4BE, #DDB55A); }

body.mood-cosmique .mi-topic.is-selected,
body.mood-cosmique .mi-slot.is-selected,
body.mood-cosmique .mi-pricing__features li svg,
body.mood-cosmique .mi-faq__icon { color: #E8CC85; }
body.mood-cosmique .mi-topic.is-selected { background: linear-gradient(135deg, #E8CC85, #C89232); color: var(--night); border-color: transparent; }
body.mood-cosmique .mi-slot.is-selected { background: rgba(232, 204, 133, 0.14); border-color: #E8CC85; color: #E8CC85; }
body.mood-cosmique .mi-pm.is-selected { background: rgba(232, 204, 133, 0.08); border-color: #E8CC85; }
body.mood-cosmique .mi-pm.is-selected .mi-pm__radio { border-color: #E8CC85; }
body.mood-cosmique .mi-pm.is-selected .mi-pm__radio::after { background: #E8CC85; }

body.mood-cosmique .mi-quote svg.mark { color: rgba(232, 204, 133, 0.55); }

/* Sage/terracotta semantic colors get muted for dark mode */
body.mood-cosmique .mi-forwho__col.for .icon { background: rgba(193,180,154,0.12); color: #C1B49A; }
body.mood-cosmique .mi-forwho__col.not .icon { background: rgba(184,85,58,0.18); color: #D67E5C; }
body.mood-cosmique .mi-forwho__col.for li svg { color: #B5C29A; }
body.mood-cosmique .mi-forwho__col.not li svg { color: #D67E5C; }

body.mood-cosmique .mi-footer__brand img { filter: brightness(0) invert(1) opacity(0.7); }

/* ----- HERO Cosmique ----- */
.mi-hero--cosmique {
  position: relative;
  min-height: 780px;
  padding: 100px 28px 110px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at 70% 30%, rgba(106, 77, 30, 0.42), transparent 55%),
    radial-gradient(ellipse at 30% 80%, rgba(75, 55, 20, 0.4), transparent 60%),
    linear-gradient(180deg, #0E0A07 0%, #1B1410 50%, #0B0805 100%);
  color: #E8DCC0;
}
.mi-hero--cosmique .mi-hero__bg { position: absolute; inset: 0; pointer-events: none; }
.mi-hero--cosmique .mi-hero__stars { position: absolute; inset: 0; }
.mi-hero--cosmique .mi-hero__stars span { position: absolute; border-radius: 999px; background: #F4E4BE; box-shadow: 0 0 4px rgba(244,228,190,0.6); animation: cosmique-twinkle 4s ease-in-out infinite; }
@keyframes cosmique-twinkle { 0%, 100% { opacity: var(--o, 0.6); transform: scale(1); } 50% { opacity: 0.15; transform: scale(0.6); } }

.mi-hero--cosmique .mi-hero__moon { position: absolute; top: 6%; right: 8%; width: 280px; height: 280px; opacity: 0.9; }
@media (max-width: 720px) { .mi-hero--cosmique .mi-hero__moon { width: 180px; height: 180px; top: 4%; right: 4%; opacity: 0.6; } }

.mi-hero--cosmique .mi-hero__inner { position: relative; max-width: 780px; text-align: center; display: flex; flex-direction: column; gap: 16px; align-items: center; z-index: 1; }
.mi-hero--cosmique .mi-hero__logo { width: 80px; height: 80px; filter: drop-shadow(0 0 28px rgba(232, 204, 133, 0.4)) brightness(1.1); margin-bottom: 4px; }
.mi-hero--cosmique .mi-hero__eyebrow { font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase; color: #E8CC85; font-weight: 500; }
.mi-hero--cosmique .mi-hero__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(44px, 6.5vw, 84px); line-height: 1.02; letter-spacing: -0.01em; margin: 14px 0 14px; color: #F4E4BE; }
.mi-hero--cosmique .mi-hero__title em { font-style: italic; font-weight: 400; color: #E8CC85; }
.mi-hero--cosmique .mi-hero__sub { font-size: 17px; line-height: 1.6; max-width: 560px; margin: 0 0 12px; color: #C1B49A; }
.mi-hero--cosmique .mi-hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.mi-hero--cosmique .mi-hero__meta { display: flex; gap: 16px; margin-top: 22px; font-size: 13px; color: #948770; flex-wrap: wrap; justify-content: center; }
.mi-hero--cosmique .mi-hero__meta strong { color: #E8DCC0; font-weight: 600; }

@media (max-width: 600px) {
  .mi-hero--cosmique { min-height: 600px; padding-left: 20px; padding-right: 20px; }
  .mi-hero--cosmique .mi-hero__title { font-size: clamp(38px, 11vw, 52px); margin: 10px 0; }
  .mi-hero--cosmique .mi-hero__sub { font-size: 15.5px; }
  .mi-hero--cosmique .mi-hero__sub br { display: none; }
  .mi-hero--cosmique .mi-hero__ctas { width: 100%; flex-direction: column; }
  .mi-hero--cosmique .mi-hero__ctas .mi-btn { width: 100%; justify-content: center; }
  .mi-hero--cosmique .mi-hero__meta { gap: 6px 14px; margin-top: 18px; }
}