{% extends "core/base.html" %}
{% load static %}

{% block title %}Accueil - Portfolio{% endblock %}

{% block extra_css %}
<style>
/* ===== VARIABLES CYBERPUNK AMÉLIORÉES ===== */
:root {
  --neon-cyan: #00f0ff;
  --neon-magenta: #ff00ea;
  --neon-purple: #b026ff;
  --neon-green: #00ff41;
  --neon-gold: #ffd700;
  --dark-bg: #0a0a0f;
  --card-bg: rgba(15, 15, 25, 0.85);
  --glass-border: rgba(0, 240, 255, 0.3);
}

/* ===== BACKGROUND ANIMÉ AVEC PARTICULES ===== */
body {
  background: #0a0a0f;
  color: #e0e0e0;
  overflow-x: hidden;
  position: relative;
}

/* Particules animées en arrière-plan */
body::before,
body::after {
  content: '';
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 0;
}

body::before {
  background: 
    radial-gradient(2px 2px at 20% 30%, var(--neon-cyan), transparent),
    radial-gradient(2px 2px at 60% 70%, var(--neon-purple), transparent),
    radial-gradient(1px 1px at 50% 50%, var(--neon-magenta), transparent),
    radial-gradient(1px 1px at 80% 10%, var(--neon-cyan), transparent),
    radial-gradient(2px 2px at 90% 60%, var(--neon-purple), transparent),
    radial-gradient(1px 1px at 33% 50%, var(--neon-cyan), transparent),
    radial-gradient(1px 1px at 70% 40%, var(--neon-magenta), transparent);
  background-size: 200% 200%;
  animation: particle-drift 20s linear infinite;
  opacity: 0.4;
}

@keyframes particle-drift {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-50px, -50px); }
}

/* Grid cyberpunk en arrière-plan */
.cyber-grid {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    linear-gradient(rgba(0, 240, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 240, 255, 0.03) 1px, transparent 1px);
  background-size: 50px 50px;
  pointer-events: none;
  z-index: 0;
  animation: grid-scroll 20s linear infinite;
}

@keyframes grid-scroll {
  0% { transform: translateY(0); }
  100% { transform: translateY(50px); }
}

/* ===== HERO SECTION ÉPIQUE ===== */
.hero-section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding: 4rem 0;
  perspective: 1000px;
}

/* Orbes lumineux animés multiples */
.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.3;
  pointer-events: none;
  z-index: 0;
}

.hero-orb-1 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, var(--neon-cyan), transparent);
  top: -10%;
  right: -10%;
  animation: float-orb-1 12s ease-in-out infinite;
}

.hero-orb-2 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, var(--neon-purple), transparent);
  bottom: -5%;
  left: -5%;
  animation: float-orb-2 15s ease-in-out infinite;
}

.hero-orb-3 {
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, var(--neon-magenta), transparent);
  top: 40%;
  left: 50%;
  animation: float-orb-3 18s ease-in-out infinite;
}

@keyframes float-orb-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-50px, -80px) scale(1.1); }
  66% { transform: translate(30px, -40px) scale(0.9); }
}

@keyframes float-orb-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(60px, 70px) scale(1.15); }
  66% { transform: translate(-40px, 30px) scale(0.85); }
}

@keyframes float-orb-3 {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.2); }
}

.hero-section .container {
  position: relative;
  z-index: 1;
}

/* ===== HERO CONTENT - ENTRÉE SPECTACULAIRE ===== */
.hero-content {
  animation: hero-entrance 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes hero-entrance {
  0% {
    opacity: 0;
    transform: translateY(60px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.hero-content h1 {
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  font-weight: 900;
  background: linear-gradient(135deg, var(--neon-cyan) 0%, var(--neon-magenta) 50%, var(--neon-purple) 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 1.5rem;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 2px;
  position: relative;
  animation: gradient-wave 6s ease infinite, text-glitch 8s infinite;
  filter: drop-shadow(0 0 25px rgba(0, 240, 255, 0.5));
  transform-style: preserve-3d;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Effet glitch subtil */
@keyframes text-glitch {
  0%, 90%, 100% { 
    text-shadow: none;
  }
  92% { 
    text-shadow: 
      -2px 0 var(--neon-cyan),
      2px 0 var(--neon-magenta);
    transform: skew(0.5deg);
  }
  94% { 
    text-shadow: 
      2px 0 var(--neon-cyan),
      -2px 0 var(--neon-magenta);
    transform: skew(-0.5deg);
  }
}

@keyframes gradient-wave {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Sous-titre avec effet typing */
.hero-content h2 {
  font-size: clamp(1.2rem, 2.5vw, 1.8rem);
  color: rgba(255, 255, 255, 0.95);
  font-weight: 400;
  margin-bottom: 2rem;
  padding-left: 2rem;
  border-left: 4px solid var(--neon-cyan);
  position: relative;
  animation: border-pulse 2s ease-in-out infinite;
  line-height: 1.5;
}

@keyframes border-pulse {
  0%, 100% { border-color: var(--neon-cyan); }
  50% { border-color: var(--neon-purple); }
}

/* Description avec panneau glassmorphism */
.hero-content p {
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.9;
  margin-bottom: 2.5rem;
  padding: 1.8rem;
  background: rgba(0, 240, 255, 0.05);
  border: 2px solid rgba(0, 240, 255, 0.2);
  border-radius: 15px;
  backdrop-filter: blur(10px);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 0 30px rgba(0, 240, 255, 0.05);
  position: relative;
  overflow: hidden;
  animation: description-entrance 0.8s ease 0.2s both;
}

@keyframes description-entrance {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.hero-content p::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 240, 255, 0.3), transparent);
  animation: shine-sweep 3s infinite;
}

@keyframes shine-sweep {
  0% { left: -100%; }
  100% { left: 200%; }
}

/* Boutons ULTRA dynamiques */
.hero-buttons {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  animation: buttons-entrance 0.8s ease 0.3s both;
}

@keyframes buttons-entrance {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-buttons .btn {
  padding: 1.2rem 3rem;
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  border: none;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-style: preserve-3d;
  border-radius: 12px;
}

.btn-primary-cyber {
  background: linear-gradient(135deg, var(--neon-cyan), var(--neon-purple));
  color: #fff;
  box-shadow: 
    0 10px 40px rgba(0, 240, 255, 0.4),
    0 0 60px rgba(0, 240, 255, 0.2);
}

.btn-primary-cyber::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 70%
  );
  transform: rotate(45deg);
  animation: btn-shimmer 3s infinite;
}

@keyframes btn-shimmer {
  0% { transform: translateX(-100%) rotate(45deg); }
  100% { transform: translateX(100%) rotate(45deg); }
}

.btn-primary-cyber:hover {
  transform: translateY(-8px) scale(1.05);
  box-shadow: 
    0 20px 60px rgba(0, 240, 255, 0.6),
    0 0 100px rgba(0, 240, 255, 0.4);
}

.btn-outline-cyber {
  background: transparent;
  color: var(--neon-cyan);
  border: 3px solid var(--neon-cyan);
  box-shadow: 
    0 0 30px rgba(0, 240, 255, 0.3),
    inset 0 0 20px rgba(0, 240, 255, 0.1);
}

.btn-outline-cyber:hover {
  background: var(--neon-cyan);
  color: #0a0a0f;
  transform: translateY(-8px) scale(1.05);
  box-shadow: 
    0 20px 60px rgba(0, 240, 255, 0.5),
    0 0 80px rgba(0, 240, 255, 0.3);
}

/* Image Hero avec effet 3D */
.hero-illustration {
  position: relative;
  animation: image-entrance 0.8s ease 0.2s both;
}

@keyframes image-entrance {
  from {
    opacity: 0;
    transform: perspective(1000px) rotateY(30deg);
  }
  to {
    opacity: 1;
    transform: perspective(1000px) rotateY(0deg);
  }
}

.hero-illustration-inline {
  position: relative;
  perspective: 1000px;
}

.hero-illustration-inline img {
  width: 100%;
  max-width: 450px;
  border-radius: 20px;
  border: 3px solid var(--neon-cyan);
  box-shadow: 
    0 30px 80px rgba(0, 240, 255, 0.4),
    0 0 60px rgba(176, 38, 255, 0.3),
    inset 0 0 40px rgba(0, 240, 255, 0.1);
  animation: image-float 6s ease-in-out infinite, image-glow 3s ease-in-out infinite;
  transform-style: preserve-3d;
}

@keyframes image-float {
  0%, 100% { transform: translateY(0) rotateZ(0deg); }
  50% { transform: translateY(-20px) rotateZ(2deg); }
}

@keyframes image-glow {
  0%, 100% { 
    box-shadow: 
      0 30px 80px rgba(0, 240, 255, 0.4),
      0 0 60px rgba(176, 38, 255, 0.3);
  }
  50% { 
    box-shadow: 
      0 30px 80px rgba(0, 240, 255, 0.6),
      0 0 100px rgba(176, 38, 255, 0.5);
  }
}

/* ===== STATISTICS BAR - COMPTEURS ANIMÉS ===== */
.stats-section {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.05), rgba(176, 38, 255, 0.05));
  padding: 4rem 0;
  backdrop-filter: blur(15px);
  border-top: 2px solid rgba(0, 240, 255, 0.3);
  border-bottom: 2px solid rgba(176, 38, 255, 0.3);
  position: relative;
  overflow: hidden;
}

.stats-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 240, 255, 0.1), transparent);
  animation: stats-sweep 5s infinite;
}

@keyframes stats-sweep {
  0% { left: -100%; }
  100% { left: 200%; }
}

.stat-item {
  text-align: center;
  padding: 1.5rem;
  position: relative;
  animation: stat-pop-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.stat-item:nth-child(1) { animation-delay: 0.1s; }
.stat-item:nth-child(2) { animation-delay: 0.2s; }
.stat-item:nth-child(3) { animation-delay: 0.3s; }
.stat-item:nth-child(4) { animation-delay: 0.4s; }

@keyframes stat-pop-in {
  from {
    opacity: 0;
    transform: scale(0.5) translateY(50px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.stat-number {
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 900;
  background: linear-gradient(135deg, var(--neon-cyan), var(--neon-gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: block;
  margin-bottom: 1rem;
  position: relative;
  animation: number-pulse 2s ease-in-out infinite;
}

@keyframes number-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

.stat-label {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 600;
}

/* ===== SECTION HEADERS MAGISTRAUX ===== */
.section-header {
  text-align: center;
  margin-bottom: 4rem;
  padding-top: 6rem;
  animation: section-header-entrance 1s ease both;
}

@keyframes section-header-entrance {
  from {
    opacity: 0;
    transform: translateY(-50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.section-title {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 900;
  color: #fff;
  margin-bottom: 1.5rem;
  position: relative;
  display: inline-block;
  background: linear-gradient(135deg, var(--neon-cyan), var(--neon-magenta), var(--neon-purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: title-shimmer 4s ease-in-out infinite;
}

@keyframes title-shimmer {
  0%, 100% { filter: brightness(1) drop-shadow(0 0 20px rgba(0, 240, 255, 0.5)); }
  50% { filter: brightness(1.3) drop-shadow(0 0 40px rgba(255, 0, 234, 0.7)); }
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--neon-cyan), var(--neon-purple), transparent);
  box-shadow: 0 0 20px var(--neon-cyan);
  animation: underline-expand 2s ease-in-out infinite;
}

@keyframes underline-expand {
  0%, 100% { width: 150px; }
  50% { width: 250px; }
}

/* ===== PROJECT CARDS - EFFET HOLOGRAPHIQUE ===== */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 3rem;
  margin-bottom: 5rem;
  perspective: 1000px;
}

.project-card {
  background: var(--card-bg);
  border-radius: 20px;
  overflow: hidden;
  border: 2px solid rgba(0, 240, 255, 0.2);
  backdrop-filter: blur(15px);
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  transform-style: preserve-3d;
  animation: card-float-in 0.8s ease both;
}

.project-card:nth-child(1) { animation-delay: 0.1s; }
.project-card:nth-child(2) { animation-delay: 0.2s; }
.project-card:nth-child(3) { animation-delay: 0.3s; }

@keyframes card-float-in {
  from {
    opacity: 0;
    transform: translateY(100px) rotateX(20deg);
  }
  to {
    opacity: 1;
    transform: translateY(0) rotateX(0deg);
  }
}

.project-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(0, 240, 255, 0.1) 50%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.5s;
  animation: hologram-rotate 6s linear infinite;
}

@keyframes hologram-rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

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

.project-card:hover {
  transform: translateY(-20px) rotateX(5deg) rotateY(5deg) scale(1.02);
  border-color: var(--neon-cyan);
  box-shadow: 
    0 30px 80px rgba(0, 240, 255, 0.4),
    0 0 60px rgba(0, 240, 255, 0.3),
    inset 0 0 40px rgba(0, 240, 255, 0.05);
}

.project-image-container {
  position: relative;
  overflow: hidden;
  height: 250px;
  background: #000;
}

.project-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.project-card:hover .project-image {
  transform: scale(1.15) rotate(2deg);
}

/* Badge avec effet néon pulsant */
.project-badge {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  background: linear-gradient(135deg, var(--neon-purple), var(--neon-magenta));
  color: #fff;
  padding: 0.5rem 1.2rem;
  border-radius: 25px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  box-shadow: 0 8px 25px rgba(176, 38, 255, 0.6);
  z-index: 2;
  animation: badge-pulse 2s ease-in-out infinite;
}

@keyframes badge-pulse {
  0%, 100% { 
    box-shadow: 0 8px 25px rgba(176, 38, 255, 0.6);
    transform: scale(1);
  }
  50% { 
    box-shadow: 0 8px 40px rgba(176, 38, 255, 0.9);
    transform: scale(1.05);
  }
}

.project-content {
  padding: 2rem;
  position: relative;
  z-index: 1;
}

.project-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 1rem;
  transition: all 0.3s ease;
}

.project-card:hover .project-title {
  color: var(--neon-cyan);
  text-shadow: 0 0 20px rgba(0, 240, 255, 0.8);
  transform: translateX(10px);
}

.project-summary {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

/* Stack technique avec effet de révélation */
.project-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.5rem;
}

.skill-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 240, 255, 0.1);
  border: 2px solid var(--neon-cyan);
  border-radius: 10px;
  color: var(--neon-cyan);
  font-size: 1.1rem;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.skill-icon:hover {
  background: var(--neon-cyan);
  color: #0a0a0f;
  transform: translateY(-8px) rotate(360deg) scale(1.2);
  box-shadow: 0 15px 30px rgba(0, 240, 255, 0.5);
}

/* ===== SERVICE CARDS - EFFET MAGNETIC ===== */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2.5rem;
  margin-bottom: 5rem;
}

.service-card {
  background: var(--card-bg);
  border-radius: 20px;
  padding: 3rem 2.5rem;
  border: 2px solid rgba(176, 38, 255, 0.2);
  backdrop-filter: blur(15px);
  text-align: center;
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  overflow: hidden;
  animation: service-rise 0.8s ease both;
}

.service-card:nth-child(1) { animation-delay: 0.1s; }
.service-card:nth-child(2) { animation-delay: 0.2s; }
.service-card:nth-child(3) { animation-delay: 0.3s; }
.service-card:nth-child(4) { animation-delay: 0.4s; }

@keyframes service-rise {
  from {
    opacity: 0;
    transform: translateY(80px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.service-card::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(176, 38, 255, 0.2), transparent);
  transform: translate(-50%, -50%);
  transition: width 0.6s ease, height 0.6s ease;
}

.service-card:hover::before {
  width: 500px;
  height: 500px;
}

.service-card:hover {
  transform: translateY(-15px) scale(1.03);
  border-color: var(--neon-purple);
  box-shadow: 
    0 25px 70px rgba(176, 38, 255, 0.4),
    0 0 80px rgba(176, 38, 255, 0.3);
}

.service-icon {
  font-size: 4.5rem;
  color: var(--neon-purple);
  margin-bottom: 2rem;
  display: inline-block;
  filter: drop-shadow(0 0 25px rgba(176, 38, 255, 0.8));
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  z-index: 1;
}

.service-card:hover .service-icon {
  transform: scale(1.2) rotateY(360deg);
  filter: drop-shadow(0 0 40px rgba(176, 38, 255, 1));
}

.service-title {
  font-size: 1.7rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 1.2rem;
  position: relative;
  z-index: 1;
  transition: color 0.3s ease;
}

.service-card:hover .service-title {
  color: var(--neon-purple);
}

.service-description {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.7;
  position: relative;
  z-index: 1;
}

/* ===== VALUES SECTION - CARTES INTERACTIVE ===== */
.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2.5rem;
  margin-bottom: 5rem;
}

.value-item {
  background: var(--card-bg);
  border-radius: 18px;
  padding: 2.5rem;
  border: 2px solid rgba(0, 240, 255, 0.15);
  backdrop-filter: blur(15px);
  text-align: center;
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  overflow: hidden;
  animation: value-appear 0.8s ease both;
}

.value-item:nth-child(1) { animation-delay: 0.1s; }
.value-item:nth-child(2) { animation-delay: 0.2s; }
.value-item:nth-child(3) { animation-delay: 0.3s; }
.value-item:nth-child(4) { animation-delay: 0.4s; }

@keyframes value-appear {
  from {
    opacity: 0;
    transform: scale(0.8) rotateX(45deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotateX(0deg);
  }
}

.value-item::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.1), rgba(0, 255, 65, 0.1));
  opacity: 0;
  transition: opacity 0.5s;
}

.value-item:hover::after {
  opacity: 1;
}

.value-item:hover {
  transform: translateY(-12px) scale(1.02);
  border-color: var(--neon-green);
  box-shadow: 
    0 20px 60px rgba(0, 255, 65, 0.3),
    0 0 50px rgba(0, 255, 65, 0.2);
}

.value-icon {
  font-size: 3.5rem;
  color: var(--neon-green);
  margin-bottom: 1.5rem;
  display: inline-block;
  filter: drop-shadow(0 0 20px rgba(0, 255, 65, 0.7));
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  z-index: 1;
}

.value-item:hover .value-icon {
  transform: scale(1.3) rotate(360deg);
  filter: drop-shadow(0 0 35px rgba(0, 255, 65, 1));
}

.value-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 1rem;
  position: relative;
  z-index: 1;
}

.value-description {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.7;
  position: relative;
  z-index: 1;
}

/* ===== CTA SECTION - TERMINAL CYBERPUNK IMMERSIF ===== */
.cta-section {
  background: #0a0a0f;
  border: 3px solid var(--neon-cyan);
  border-radius: 20px;
  padding: 0;
  text-align: left;
  margin: 6rem 0;
  position: relative;
  overflow: hidden;
  box-shadow: 
    0 0 60px rgba(0, 240, 255, 0.4),
    inset 0 0 60px rgba(0, 240, 255, 0.05);
  animation: cta-border-scan 3s linear infinite;
}

@keyframes cta-border-scan {
  0%, 100% { 
    border-color: var(--neon-cyan);
    box-shadow: 
      0 0 60px rgba(0, 240, 255, 0.4),
      inset 0 0 60px rgba(0, 240, 255, 0.05);
  }
  33% { 
    border-color: var(--neon-purple);
    box-shadow: 
      0 0 60px rgba(176, 38, 255, 0.5),
      inset 0 0 60px rgba(176, 38, 255, 0.05);
  }
  66% { 
    border-color: var(--neon-magenta);
    box-shadow: 
      0 0 60px rgba(255, 0, 234, 0.5),
      inset 0 0 60px rgba(255, 0, 234, 0.05);
  }
}

/* Terminal Header */
.cta-terminal-header {
  background: rgba(0, 240, 255, 0.1);
  border-bottom: 2px solid var(--neon-cyan);
  padding: 1rem 2rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  position: relative;
  overflow: hidden;
}

.cta-terminal-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 240, 255, 0.3), transparent);
  animation: terminal-scan 2s infinite;
}

@keyframes terminal-scan {
  0% { left: -100%; }
  100% { left: 200%; }
}

.terminal-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  animation: dot-blink 1.5s infinite;
}

.terminal-dot:nth-child(1) {
  background: #ff5f56;
  animation-delay: 0s;
}

.terminal-dot:nth-child(2) {
  background: #ffbd2e;
  animation-delay: 0.2s;
}

.terminal-dot:nth-child(3) {
  background: #27c93f;
  animation-delay: 0.4s;
}

@keyframes dot-blink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.9); }
}

.terminal-title {
  font-family: 'Courier New', monospace;
  color: var(--neon-cyan);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0;
  position: relative;
  z-index: 1;
}

/* Terminal Body */
.cta-terminal-body {
  padding: 3rem 2.5rem;
  background: 
    linear-gradient(180deg, rgba(0, 240, 255, 0.02) 0%, transparent 100%),
    repeating-linear-gradient(
      0deg,
      rgba(0, 240, 255, 0.03) 0px,
      transparent 1px,
      transparent 2px,
      rgba(0, 240, 255, 0.03) 3px
    );
  position: relative;
  min-height: 300px;
  font-family: 'Courier New', monospace;
}

/* Lignes de code défilantes en arrière-plan */
.cta-terminal-body::before {
  content: '01001000 01100101 01101100 01101100 01101111 00100000 01010111 01101111 01110010 01101100 01100100\A01000011 01101111 01101110 01110100 01100001 01100011 01110100 00100000 01001101 01100101\A01010011 01110100 01100001 01110010 01110100 00100000 01010000 01110010 01101111 01101010 01100101 01100011 01110100';
  position: absolute;
  top: 0;
  right: 0;
  color: rgba(0, 240, 255, 0.08);
  font-size: 0.7rem;
  line-height: 2;
  white-space: pre;
  pointer-events: none;
  animation: binary-scroll 20s linear infinite;
}

@keyframes binary-scroll {
  0% { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

/* Command Prompt */
.cta-prompt {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
  color: var(--neon-green);
  font-size: 1.1rem;
  animation: prompt-appear 0.5s ease;
}

@keyframes prompt-appear {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}

.cta-prompt-symbol {
  color: var(--neon-cyan);
  font-weight: 900;
  font-size: 1.3rem;
  animation: cursor-blink 1s infinite;
}

@keyframes cursor-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0.3; }
}

.cta-prompt-text {
  color: var(--neon-green);
  font-weight: 700;
  letter-spacing: 1px;
}

/* Message principal avec effet typing */
.cta-content {
  position: relative;
  z-index: 1;
}

.cta-message {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: rgba(0, 240, 255, 0.05);
  border-left: 4px solid var(--neon-cyan);
  border-radius: 8px;
  animation: message-slide-in 0.6s ease 0.3s both;
}

@keyframes message-slide-in {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.cta-icon {
  font-size: 2.5rem;
  color: var(--neon-cyan);
  filter: drop-shadow(0 0 15px var(--neon-cyan));
  animation: icon-pulse 2s ease-in-out infinite;
}

@keyframes icon-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.cta-text-wrapper {
  flex: 1;
}

.cta-title {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 900;
  color: #fff;
  margin-bottom: 1rem;
  line-height: 1.3;
  background: linear-gradient(135deg, var(--neon-cyan), var(--neon-magenta));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: title-glitch 5s infinite;
}

@keyframes title-glitch {
  0%, 90%, 100% { text-shadow: none; }
  93% { 
    text-shadow: 
      -1px 0 var(--neon-cyan),
      1px 0 var(--neon-magenta);
  }
}

.cta-text {
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.7;
  margin-bottom: 2rem;
  font-family: var(--font-body);
}

/* Section des boutons avec effet terminal */
.cta-actions {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  animation: actions-appear 0.8s ease 0.6s both;
}

@keyframes actions-appear {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.cta-btn {
  padding: 1rem 2.5rem;
  font-family: 'Courier New', monospace;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  border: none;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

.cta-btn-primary {
  background: linear-gradient(135deg, var(--neon-cyan), var(--neon-purple));
  color: #fff;
  box-shadow: 
    0 8px 30px rgba(0, 240, 255, 0.4),
    0 0 40px rgba(0, 240, 255, 0.2);
  border: 2px solid var(--neon-cyan);
}

.cta-btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: left 0.5s;
}

.cta-btn-primary:hover::before {
  left: 100%;
}

.cta-btn-primary:hover {
  transform: translateY(-5px) scale(1.05);
  box-shadow: 
    0 15px 50px rgba(0, 240, 255, 0.6),
    0 0 80px rgba(0, 240, 255, 0.4);
  border-color: #fff;
}

.cta-btn-secondary {
  background: transparent;
  color: var(--neon-green);
  border: 2px solid var(--neon-green);
  box-shadow: 
    0 0 20px rgba(0, 255, 65, 0.2),
    inset 0 0 20px rgba(0, 255, 65, 0.05);
}

.cta-btn-secondary:hover {
  background: var(--neon-green);
  color: #0a0a0f;
  transform: translateY(-5px) scale(1.05);
  box-shadow: 
    0 15px 50px rgba(0, 255, 65, 0.5),
    0 0 60px rgba(0, 255, 65, 0.3);
}

/* Effet de particules dans le CTA */
.cta-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
}

.cta-particle {
  position: absolute;
  width: 2px;
  height: 2px;
  background: var(--neon-cyan);
  border-radius: 50%;
  animation: particle-float 4s linear infinite;
  opacity: 0.6;
}

.cta-particle:nth-child(1) { left: 10%; animation-delay: 0s; }
.cta-particle:nth-child(2) { left: 30%; animation-delay: 1s; }
.cta-particle:nth-child(3) { left: 50%; animation-delay: 2s; }
.cta-particle:nth-child(4) { left: 70%; animation-delay: 1.5s; }
.cta-particle:nth-child(5) { left: 90%; animation-delay: 0.5s; }

@keyframes particle-float {
  0% {
    transform: translateY(100%) scale(0);
    opacity: 0;
  }
  10% {
    opacity: 0.6;
  }
  90% {
    opacity: 0.6;
  }
  100% {
    transform: translateY(-100%) scale(1);
    opacity: 0;
  }
}

/* Status bar au bas du terminal */
.cta-status-bar {
  background: rgba(0, 240, 255, 0.08);
  border-top: 1px solid var(--neon-cyan);
  padding: 0.75rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Courier New', monospace;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
}

.status-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.status-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--neon-green);
  box-shadow: 0 0 10px var(--neon-green);
  animation: status-pulse 2s ease-in-out infinite;
}

@keyframes status-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* Responsive CTA */
@media (max-width: 991px) {
  .cta-section {
    margin: 4rem 0;
  }
  
  .cta-terminal-body {
    padding: 2.5rem 2rem;
  }
  
  .cta-message {
    flex-direction: column;
    text-align: center;
  }
  
  .cta-title {
    font-size: 2rem;
  }
}

@media (max-width: 767px) {
  .cta-section {
    margin: 3rem 0;
  }
  
  .cta-terminal-header {
    padding: 0.75rem 1.5rem;
  }
  
  .cta-terminal-body {
    padding: 2rem 1.5rem;
  }
  
  .cta-title {
    font-size: 1.6rem;
  }
  
  .cta-text {
    font-size: 1rem;
  }
  
  .cta-actions {
    flex-direction: column;
    width: 100%;
  }
  
  .cta-btn {
    width: 100%;
    justify-content: center;
  }
  
  .cta-status-bar {
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
  }
}

@media (max-width: 576px) {
  .cta-terminal-body {
    padding: 1.5rem 1rem;
  }
  
  .cta-message {
    padding: 1rem;
  }
  
  .cta-icon {
    font-size: 2rem;
  }
  
  .cta-btn {
    padding: 0.9rem 2rem;
    font-size: 0.9rem;
  }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 991px) {
  .hero-section {
    min-height: auto;
    padding: 3rem 0;
  }
  
  .hero-content h1 {
    font-size: 2.5rem;
  }
  
  .hero-buttons {
    justify-content: center;
  }
  
  .projects-grid,
  .services-grid,
  .values-grid {
    grid-template-columns: 1fr;
  }
  
  .section-header {
    padding-top: 4rem;
    margin-bottom: 3rem;
  }
}

@media (max-width: 767px) {
  .hero-content h1 {
    font-size: 1.75rem;
    letter-spacing: 1px;
    line-height: 1.4;
  }
  
  .hero-content h2 {
    font-size: 1.1rem;
    padding-left: 1.5rem;
  }
  
  .hero-content p {
    font-size: 1rem;
    padding: 1.5rem;
  }
  
  .hero-buttons {
    flex-direction: column;
    width: 100%;
  }
  
  .hero-buttons .btn {
    width: 100%;
    max-width: 320px;
  }
  
  .stat-number {
    font-size: 2.5rem;
  }
  
  .cta-section {
    padding: 4rem 2rem;
    margin: 4rem 0;
  }
}

@media (max-width: 576px) {
  .hero-section {
    padding: 2rem 0;
  }
  
  .hero-content h1 {
    font-size: 1.5rem;
    letter-spacing: 1px;
    line-height: 1.5;
  }
  
  .hero-content h2 {
    font-size: 1rem;
    padding-left: 1rem;
  }
  
  .hero-illustration-inline img {
    max-width: 280px;
  }
  
  .section-title {
    font-size: 2rem;
  }
}
</style>
{% endblock %}

{% block content %}

<!-- Grid Cyberpunk animé -->
<div class="cyber-grid"></div>

<!-- HERO SECTION -->
{% if hero %}
<section class="hero-section">
  <!-- Orbes lumineux animés -->
  <div class="hero-orb hero-orb-1"></div>
  <div class="hero-orb hero-orb-2"></div>
  <div class="hero-orb hero-orb-3"></div>
  
  <div class="container">
    <div class="row align-items-center">
      <div class="col-lg-7 hero-content">
        <h1>{{ hero.title }}</h1>
        <h2>{{ hero.subtitle }}</h2>
        
        <!-- IMAGE MOBILE/TABLET -->
        <div class="hero-illustration-inline d-lg-none">
          {% if hero.illustration %}
          <img src="{{ hero.illustration.url }}" alt="{{ hero.title }}" class="img-fluid">
          {% endif %}
        </div>
        
        <p>{{ hero.description }}</p>
        
        <div class="hero-buttons">
          <a href="{% url 'projects:list' %}" class="btn btn-primary-cyber">
            {{ hero.btn_primary_text }}
          </a>
          <a href="{% url 'contact:index' %}" class="btn btn-outline-cyber">
            {{ hero.btn_secondary_text }}
          </a>
        </div>
      </div>
      
      <!-- IMAGE DESKTOP -->
      <div class="col-lg-5 hero-illustration d-none d-lg-block">
        {% if hero.illustration %}
        <div class="hero-illustration-inline">
          <img src="{{ hero.illustration.url }}" alt="{{ hero.title }}" class="img-fluid">
        </div>
        {% endif %}
      </div>
    </div>
  </div>
</section>
{% endif %}

<!-- STATISTICS BAR -->
{% if stats %}
<section class="stats-section">
  <div class="container">
    <div class="row">
      {% for stat in stats %}
      <div class="col-6 col-md-3 stat-item">
        <span class="stat-number">{{ stat.number }}</span>
        <span class="stat-label">{{ stat.label }}</span>
      </div>
      {% endfor %}
    </div>
  </div>
</section>
{% endif %}

<!-- FEATURED PROJECTS -->
{% if featured_projects %}
<section class="container">
  <div class="section-header">
    <h2 class="section-title">Dernières Réalisations</h2>
  </div>
  <div class="projects-grid">
    {% for project in featured_projects %}
    <a href="{% url 'projects:detail' project.slug %}" style="text-decoration: none; color: inherit;">
      <div class="project-card">
        <div class="project-image-container">
          <img src="{{ project.cover_image.url }}" alt="{{ project.title }}" class="project-image">
          {% if project.category %}
          <span class="project-badge">{{ project.category.name }}</span>
          {% endif %}
        </div>
        <div class="project-content">
          <h3 class="project-title">{{ project.title }}</h3>
          <p class="project-summary">{{ project.summary }}</p>
          {% if project.skills.all %}
          <div class="project-stack">
            {% for skill in project.skills.all|slice:":6" %}
            <span class="skill-icon">
              <i class="{{ skill.icon_class }}"></i>
            </span>
            {% endfor %}
          </div>
          {% endif %}
        </div>
      </div>
    </a>
    {% endfor %}
  </div>
</section>
{% endif %}

<!-- FEATURED SERVICES -->
{% if featured_services %}
<section class="container">
  <div class="section-header">
    <h2 class="section-title">Mes Expertises</h2>
  </div>
  <div class="services-grid">
    {% for service in featured_services %}
    <a href="{% url 'services:detail' service.slug %}" style="text-decoration: none; color: inherit;">
      <div class="service-card">
        <i class="{{ service.icon_class }} service-icon"></i>
        <h3 class="service-title">{{ service.title }}</h3>
        <p class="service-description">{{ service.short_description }}</p>
      </div>
    </a>
    {% endfor %}
  </div>
</section>
{% endif %}

<!-- VALUES / WHY ME -->
{% if values %}
<section class="container">
  <div class="section-header">
    <h2 class="section-title">Pourquoi Me Choisir</h2>
  </div>
  <div class="values-grid">
    {% for value in values %}
    <div class="value-item">
      <i class="{{ value.icon_class }} value-icon"></i>
      <h3 class="value-title">{{ value.title }}</h3>
      <p class="value-description">{{ value.description }}</p>
    </div>
    {% endfor %}
  </div>
</section>
{% endif %}

<!-- CALL TO ACTION - TERMINAL CYBERPUNK -->
{% if cta %}
<section class="container">
  <div class="cta-section">
    <!-- Terminal Header -->
    <div class="cta-terminal-header">
      <span class="terminal-dot"></span>
      <span class="terminal-dot"></span>
      <span class="terminal-dot"></span>
      <span class="terminal-title">/// SYSTEM.TERMINAL.EXE</span>
    </div>
    
    <!-- Terminal Body -->
    <div class="cta-terminal-body">
      <!-- Particules flottantes -->
      <div class="cta-particles">
        <div class="cta-particle"></div>
        <div class="cta-particle"></div>
        <div class="cta-particle"></div>
        <div class="cta-particle"></div>
        <div class="cta-particle"></div>
      </div>
      
      <!-- Command Prompt -->
      <div class="cta-prompt">
        <span class="cta-prompt-symbol">&gt;</span>
        <span class="cta-prompt-text">EXECUTE: contact.init()</span>
      </div>
      
      <!-- Content -->
      <div class="cta-content">
        <div class="cta-message">
          <i class="fas fa-rocket cta-icon"></i>
          <div class="cta-text-wrapper">
            <h2 class="cta-title">{{ cta.title }}</h2>
            {% if cta.text %}
            <p class="cta-text">{{ cta.text }}</p>
            {% endif %}
          </div>
        </div>
        
        <!-- Actions -->
        <div class="cta-actions">
          <a href="{% url 'contact:index' %}" class="cta-btn cta-btn-primary">
            <i class="fas fa-paper-plane"></i>
            {{ cta.btn_text }}
          </a>
          <a href="{% url 'projects:list' %}" class="cta-btn cta-btn-secondary">
            <i class="fas fa-folder-open"></i>
            Voir mes projets
          </a>
        </div>
      </div>
    </div>
    
    <!-- Status Bar -->
    <div class="cta-status-bar">
      <div class="status-item">
        <span class="status-indicator"></span>
        <span>SYSTEM: ONLINE</span>
      </div>
      <div class="status-item">
        <span>RESPONSE TIME: &lt;24H</span>
      </div>
      <div class="status-item">
        <span>STATUS: AVAILABLE</span>
      </div>
    </div>
  </div>
</section>
{% endif %}

{% endblock %}