/* =========================
   EKIORA — DEEP SPACE & SOLAR POWER
   Theme: Noir cosmique + energie solaire

   PALETTE:
   --ek-void:        #030305    (noir spatial profond)
   --ek-space:       #0A0B10    (espace secondaire)
   --ek-nebula:      #0F1118    (cards/surfaces)
   --ek-edge:        #1A1D28    (bordures subtiles)
   --ek-dust:        #2A2E3D    (bordures actives)

   --ek-star:        #F8F9FB    (texte titres)
   --ek-light:       #C8CCD6    (texte corps)
   --ek-dim:         #7A8194    (texte secondaire)

   --ek-solar-core:  #FFD93D    (jaune soleil)
   --ek-solar-mid:   #FFAB00    (orange chaud)
   --ek-solar-edge:  #FF6B00    (orange profond)
   --ek-solar-glow:  rgba(255,170,0,0.12)
   ========================= */

:root {
  --ek-void: #030305;
  --ek-space: #0A0B10;
  --ek-nebula: #0F1118;
  --ek-edge: #1A1D28;
  --ek-dust: #2A2E3D;
  --ek-star: #F8F9FB;
  --ek-light: #C8CCD6;
  --ek-dim: #7A8194;
  --ek-solar-core: #FFD93D;
  --ek-solar-mid: #FFAB00;
  --ek-solar-edge: #FF6B00;
  --ek-solar-glow: rgba(255,170,0,0.12);
}

/* ============================================
   BASE & GLOBAL
   ============================================ */

body {
  background: var(--ek-void);
  color: var(--ek-light);
}

/* Etoiles subtiles en fond (pattern CSS) */
.ek-section {
  background: var(--ek-void);
  color: var(--ek-light);
  padding: 100px 0;
  position: relative;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */

.ek-section h1,
.ek-section h2,
.ek-section h3 {
  color: var(--ek-star) !important;
  letter-spacing: -0.025em;
  font-weight: 700;
}

.ek-section h1 {
  font-size: clamp(40px, 6vw, 64px);
  line-height: 1.05;
  margin: 0 0 24px 0;
  /* Reflet solaire sur les titres principaux */
  background: linear-gradient(
    135deg,
    var(--ek-star) 0%,
    var(--ek-star) 40%,
    var(--ek-solar-core) 50%,
    var(--ek-star) 60%,
    var(--ek-star) 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.ek-section h2 {
  font-size: clamp(28px, 4vw, 38px);
  line-height: 1.15;
  margin: 0 0 20px 0;
}

.ek-section p,
.ek-section li {
  color: var(--ek-light);
  font-size: 17px;
  line-height: 1.75;
}

/* ============================================
   HERO SECTION - Effet soleil levant
   ============================================ */

.ek-hero {
  min-height: 90vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(
      ellipse 120% 80% at 80% 100%,
      rgba(255,107,0,0.08) 0%,
      rgba(255,171,0,0.04) 30%,
      transparent 60%
    ),
    var(--ek-void);
}

.ek-hero::before {
  content: '';
  position: absolute;
  bottom: -20%;
  right: -10%;
  width: 70%;
  height: 70%;
  background: radial-gradient(
    circle,
    rgba(255,171,0,0.06) 0%,
    rgba(255,107,0,0.03) 40%,
    transparent 70%
  );
  pointer-events: none;
}

/* ============================================
   BUTTONS - Gradient solaire
   ============================================ */

.ek-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
}

.ek-btn-primary {
  background: linear-gradient(
    135deg,
    var(--ek-solar-edge) 0%,
    var(--ek-solar-mid) 50%,
    var(--ek-solar-core) 100%
  );
  color: var(--ek-void);
  border: none;
  box-shadow:
    0 4px 20px rgba(255,140,0,0.25),
    0 0 40px rgba(255,171,0,0.1);
}

.ek-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow:
    0 6px 30px rgba(255,140,0,0.35),
    0 0 60px rgba(255,171,0,0.15);
}

.ek-btn-secondary {
  background: transparent;
  color: var(--ek-star);
  border: 1px solid var(--ek-dust);
}

.ek-btn-secondary:hover {
  border-color: var(--ek-solar-mid);
  color: var(--ek-solar-mid);
  background: rgba(255,171,0,0.05);
}

/* ============================================
   CARDS - Surfaces avec reflet subtil
   ============================================ */

.ek-card {
  background: linear-gradient(
    165deg,
    var(--ek-nebula) 0%,
    var(--ek-space) 100%
  );
  border: 1px solid var(--ek-edge);
  border-radius: 16px;
  padding: 32px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.ek-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,171,0,0.2) 50%,
    transparent 100%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
}

.ek-card:hover {
  border-color: var(--ek-dust);
  transform: translateY(-4px);
}

.ek-card:hover::before {
  opacity: 1;
}

/* ============================================
   FEATURE BLURBS avec icône solaire
   ============================================ */

.ek-feature {
  padding: 24px;
  border-radius: 12px;
  background: transparent;
  border: 1px solid transparent;
  transition: all 0.3s ease;
}

.ek-feature:hover {
  background: rgba(255,171,0,0.03);
  border-color: var(--ek-edge);
}

.ek-feature-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(
    135deg,
    rgba(255,107,0,0.15) 0%,
    rgba(255,171,0,0.1) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  color: var(--ek-solar-mid);
  font-size: 24px;
}

.ek-feature h4 {
  color: var(--ek-star);
  margin-bottom: 8px;
}

.ek-feature p {
  color: var(--ek-dim);
  font-size: 15px;
}

/* ============================================
   QUOTE - Citation avec accent solaire
   ============================================ */

.ek-quote {
  margin-top: 32px;
  padding: 20px 24px;
  border-left: 3px solid transparent;
  border-image: linear-gradient(
    180deg,
    var(--ek-solar-edge),
    var(--ek-solar-core)
  ) 1;
  background: linear-gradient(
    90deg,
    rgba(255,171,0,0.05) 0%,
    transparent 100%
  );
  border-radius: 0 12px 12px 0;
}

.ek-quote p {
  color: var(--ek-star) !important;
  font-style: italic;
  font-size: 18px;
  line-height: 1.6;
}

/* ============================================
   NOTE / HIGHLIGHT
   ============================================ */

.ek-note {
  text-align: center;
  padding: 20px;
  margin-top: 40px;
}

.ek-note p {
  color: var(--ek-dim);
  font-size: 14px;
}

/* ============================================
   DIVIDERS - Lignes subtiles
   ============================================ */

.ek-divider {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--ek-edge) 20%,
    var(--ek-edge) 80%,
    transparent 100%
  );
  margin: 60px 0;
}

.ek-divider-glow {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--ek-solar-edge) 20%,
    var(--ek-solar-mid) 50%,
    var(--ek-solar-edge) 80%,
    transparent 100%
  );
  margin: 60px 0;
  box-shadow: 0 0 20px rgba(255,171,0,0.2);
}

/* ============================================
   FOOTER
   ============================================ */

.ek-footer {
  background: var(--ek-void);
  padding: 20px 0 30px;
}

.ek-footer p,
.ek-footer a {
  color: var(--ek-dim);
}

.ek-footer a:hover {
  color: var(--ek-solar-mid);
}

/* ============================================
   EQUILIBRIUM SECTION
   ============================================ */

.ek-equilibrium h2 {
  color: var(--ek-star) !important;
  text-align: center;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 980px) {
  .ek-section {
    padding: 60px 0;
  }

  .ek-hero {
    min-height: 70vh;
  }

  .ek-section h1 {
    font-size: clamp(32px, 5vw, 48px);
  }

  .ek-section h2 {
    font-size: clamp(24px, 4vw, 32px);
  }
}

@media (max-width: 767px) {
  .ek-section {
    padding: 40px 0;
  }

  .ek-hero {
    min-height: auto;
    padding: 80px 0;
  }

  .ek-card {
    padding: 24px;
  }

  .ek-btn {
    padding: 12px 20px;
    font-size: 14px;
  }
}