/**
 * Copyright (C) 2017-2026 Solution Libre
 *
 * Home Page - Unified CSS
 * Design System: Professional multi-domain hub with cohesive color harmony
 *
 * Color Philosophy:
 * - Neutral hero (dark slate) - professional, non-competing
 * - Three vibrant domain colors remain distinct
 * - Unified accent color (deep indigo) ties everything together
 * - Rich gradients create depth and sophistication
 */

/* ============================================
   CSS VARIABLES - Harmonized Multi-Domain System
   ============================================ */
:root {
  /* Formations Theme - Education Blue */
  --color-formations-primary: #3498db;
  --color-formations-dark: #2980b9;
  --color-formations-light: #5dade2;

  /* Infrastructure Theme - Tech Purple */
  --color-infrastructure-primary: #7c3aed;
  --color-infrastructure-dark: #6d28d9;
  --color-infrastructure-light: #8b5cf6;

  /* Vulgarisation Theme - Knowledge Gold */
  --color-vulgarisation-primary: #f59e0b;
  --color-vulgarisation-dark: #d97706;
  --color-vulgarisation-light: #fbbf24;

  /* Home Unified Theme - Teal (professional, modern) */
  --color-home-primary: #14b8a6;
  --color-home-dark: #0d9488;
  --color-home-light: #2dd4bf;

  /* Neutral Foundation */
  --color-slate-darker: #0f172a;
  --color-slate-dark: #1e293b;
  --color-slate-medium: #475569;
  --color-slate-light: #cbd5e1;
  --color-slate-lighter: #f1f5f9;
}

/* ============================================
   HERO SECTION - Teal Professional
   ============================================ */
/* Extends base .hero-section from style.css with home-specific gradient */
.home-hero {
  background: linear-gradient(135deg, var(--color-slate-dark) 0%, var(--color-home-dark) 100%);
}

/* Accent gradient glow (additional to base pattern) */
.home-hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 40%;
  height: 40%;
  background: radial-gradient(ellipse at bottom right, rgba(20, 184, 166, 0.2), transparent 70%);
  pointer-events: none;
  z-index: 1;
}

.home-hero h1 i {
  opacity: 0.9;
  color: var(--color-home-primary);
}

/* Home subtitle styling */
.home-hero-subtitle {
  font-weight: 300;
  opacity: 0.85;
  color: rgba(255, 255, 255, 0.85);
}


/* ============================================
   PAGE SECTION STYLING
   ============================================ */
.page-section-heading {
  font-weight: 700;
  letter-spacing: 1px;
}

/* ============================================
   DOMAIN CARDS - Enhanced Visual Hierarchy
   ============================================ */
.domain-card {
  position: relative;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  cursor: pointer;
  border-radius: 18px !important;
  overflow: hidden;
  background: white;
  box-shadow: 0 2px 16px rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.04);
}

.domain-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  transition: height 0.3s ease;
}

.domain-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 24px 60px rgba(0,0,0,0.12) !important;
  border-color: rgba(0,0,0,0.08);
}

.domain-card:hover::before {
  height: 8px;
}

/* Domain-specific accent bars */
.domain-card-formations::before {
  background: linear-gradient(90deg, var(--color-formations-primary), var(--color-formations-light));
}

.domain-card-infrastructure::before {
  background: linear-gradient(90deg, var(--color-infrastructure-primary), var(--color-infrastructure-light));
}

.domain-card-vulgarisation::before {
  background: linear-gradient(90deg, var(--color-vulgarisation-primary), var(--color-vulgarisation-light));
}

/* Enhanced hover shadows per domain */
.domain-card-formations:hover {
  box-shadow: 0 24px 60px rgba(52, 152, 219, 0.2) !important;
}

.domain-card-infrastructure:hover {
  box-shadow: 0 24px 60px rgba(124, 58, 237, 0.2) !important;
}

.domain-card-vulgarisation:hover {
  box-shadow: 0 24px 60px rgba(245, 158, 11, 0.2) !important;
}

/* Domain icon styling with gradient backgrounds */
.domain-icon {
  font-size: 3.5rem;
  transition: all 0.3s ease;
  width: 90px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  border-radius: 20px;
  position: relative;
}

.domain-card-formations .domain-icon {
  background: linear-gradient(135deg, rgba(52, 152, 219, 0.12), rgba(93, 173, 226, 0.08));
  color: var(--color-formations-primary);
}

.domain-card-infrastructure .domain-icon {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.12), rgba(139, 92, 246, 0.08));
  color: var(--color-infrastructure-primary);
}

.domain-card-vulgarisation .domain-icon {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(251, 191, 36, 0.08));
  color: var(--color-vulgarisation-primary);
}

.domain-card:hover .domain-icon {
  transform: scale(1.08) rotate(-2deg);
}

/* Domain-specific button styling */
.btn-formations {
  background: linear-gradient(135deg, var(--color-formations-primary), var(--color-formations-dark)) !important;
  border: none !important;
  transition: all 0.3s ease;
  box-shadow: 0 4px 14px rgba(52, 152, 219, 0.25);
}

.btn-formations:hover {
  background: linear-gradient(135deg, var(--color-formations-dark), #1f6fa8) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(52, 152, 219, 0.35);
}

.btn-infrastructure {
  background: linear-gradient(135deg, var(--color-infrastructure-primary), var(--color-infrastructure-dark)) !important;
  border: none !important;
  transition: all 0.3s ease;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.25);
}

.btn-infrastructure:hover {
  background: linear-gradient(135deg, var(--color-infrastructure-dark), #5b21b6) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(124, 58, 237, 0.35);
}

.btn-vulgarisation {
  background: linear-gradient(135deg, var(--color-vulgarisation-primary), var(--color-vulgarisation-dark)) !important;
  border: none !important;
  transition: all 0.3s ease;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.25);
}

.btn-vulgarisation:hover {
  background: linear-gradient(135deg, var(--color-vulgarisation-dark), #b45309) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(245, 158, 11, 0.35);
}

/* Card text styling */
.domain-card .card-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--color-slate-dark);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-top: 0.5rem;
}

.domain-card .card-text {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--color-slate-medium);
}

/* ============================================
   CONTACT FORM
   ============================================ */
.contact-message {
  height: 10rem;
}

/* ============================================
   ABOUT SECTION & ICON OVERRIDES
   ============================================ */
/* À propos section - solid dark slate (professional, distinct from CTA) */
#about.bg-primary {
  background: var(--color-slate-dark) !important;
}

/* Fix "Nos Domaines" icon - use teal */
.page-section-heading .text-primary {
  color: var(--color-home-primary) !important;
}

/* ============================================
   CTA SECTION - Home Theme Colors
   ============================================ */
/* Home page CTA - use body or page-specific class to avoid overriding base styles */
#page-top .cta-section {
  background: linear-gradient(135deg, var(--color-home-dark) 0%, var(--color-home-primary) 50%, var(--color-home-light) 100%);
}

#page-top .cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.4;
  background: url('data:image/svg+xml,<svg width="60" height="60" xmlns="http://www.w3.org/2000/svg"><circle cx="3" cy="3" r="1.5" fill="rgba(255,255,255,0.12)"/></svg>');
}

/* Radial glow accent for home */
#page-top .cta-section::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, rgba(255,255,255,0.08), transparent 60%);
  pointer-events: none;
  z-index: 1;
}

#page-top .btn-cta {
  color: var(--color-home-primary);
}

#page-top .btn-cta:hover {
  background: rgba(255,255,255,0.95);
  color: var(--color-home-dark);
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */
@media (max-width: 768px) {
  .home-hero {
    min-height: 35vh;
    padding: 110px 0 30px;
  }

  .home-hero::before {
    width: 100%;
  }

  .domain-card {
    margin-bottom: 1.5rem;
  }

  .domain-icon {
    width: 80px;
    height: 80px;
    font-size: 3rem;
  }
}