@import url("nav-drawer.css");

html{scroll-behavior:smooth}

/* ========================================
   PREFERS-REDUCED-MOTION - ACCESSIBILITÉ
   Réduit les animations pour les utilisateurs
   sensibles au mouvement (vertiges, motion sickness)
   ======================================== */
@media (prefers-reduced-motion: reduce) {
  /* Désactiver le scroll smooth */
  html {
    scroll-behavior: auto;
  }
  
  /* Désactiver toutes les animations */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

 
  /* Désactiver les animations spécifiques */
  .partners-track,
  .particle,
  .loader-circle,
  .loader-text,
  .text-reveal,
  .description-glow,
  .floating-element,
  .scroll-line,
  .scroll-text,
  .title-line,
  .subtitle-word,
  .subtitle-separator,
  .badge-shine,
  .cta-epic-primary,
  .cta-epic-secondary {
    animation: none !important;
  }
  
  /* Désactiver les transformations animées */
  .partner-logo:hover .logo-img,
  .partner-logo:hover .logo-container,
  .cta-epic-primary:hover,
  .cta-epic-secondary:hover {
    transform: none !important;
  }
  
  /* Garder les transitions essentielles mais instantanées */
  .skip-link:focus {
    transition: none;
  }
  
  /* Désactiver AOS (Animate On Scroll) si présent */
  [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  
  /* Les keyframes sont désactivées automatiquement car 
     animation-duration est réglé à 0.01ms ci-dessus */
}

/* Skip Link for Accessibility */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--brand-primary, #080054);
  color: white;
  padding: 8px 16px;
  text-decoration: none;
  z-index: 10000;
  font-weight: 600;
  border-radius: 0 0 4px 0;
  transition: top 0.3s;
}

.skip-link:focus {
  top: 0;
  outline: 3px solid var(--brand-accent, #ff9100);
  outline-offset: 2px;
}

:root {
  --brand-primary: #080054;
  --brand-accent: #ff9100;
  --cookie-surface: rgba(8, 0, 84, 0.95);
  --cookie-border: rgba(255, 255, 255, 0.25);
}

/* WhatsApp floating button (mobile only) */
.whatsapp-fab {
  position: fixed;
  right: calc(16px + env(safe-area-inset-right, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  width: 56px;
  height: 56px;
  border-radius: 9999px;
  background: #25D366;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.25);
  border: 2px solid rgba(255, 255, 255, 0.18);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  text-decoration: none;
}

.whatsapp-fab:hover,
.whatsapp-fab:focus-visible {
  background: #1EBE5D;
  transform: translateY(-2px);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
  outline: none;
}

.whatsapp-fab i {
  font-size: 26px;
  line-height: 1;
}

@media (min-width: 1024px) {
  .whatsapp-fab {
    width: 60px;
    height: 60px;
  }

  .whatsapp-fab i {
    font-size: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .whatsapp-fab {
    animation: none !important;
  }
}

@keyframes whatsappFabFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}

@keyframes whatsappFabPulse {
  0% {
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.25);
  }
  70% {
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.25), 0 0 0 10px rgba(37, 211, 102, 0.22);
  }
  100% {
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.25), 0 0 0 0 rgba(37, 211, 102, 0);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .whatsapp-fab {
    animation: whatsappFabFloat 3.2s ease-in-out infinite, whatsappFabPulse 2.8s ease-out infinite;
  }
}

.cookie-consent-banner {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
  background: linear-gradient(135deg, var(--cookie-surface), rgba(255, 145, 0, 0.8));
  color: #ffffff;
  padding: 1.25rem 1.5rem;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  z-index: 9999;
  backdrop-filter: blur(16px);
}

.cookie-consent-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
}

.cookie-consent-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0;
  color: #ffffff;
}

.cookie-consent-description {
  margin: 0.35rem 0 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #ffffff;
}

.cookie-consent-actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.cookie-consent-btn {
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.65rem 1.6rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
  min-width: 130px;
}

.cookie-consent-btn-primary {
  background-color: #ffffff;
  color: var(--brand-primary);
}

.cookie-consent-btn-ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.7);
  color: #ffffff;
}

.cookie-consent-link.inline {
  background: none;
  border: none;
  color: #fff;
  font-weight: 600;
  padding: 0;
  margin: 0;
  text-decoration: underline;
  cursor: pointer;
}

.titre_simecoci{
  font-size: 9.5rem;
  font-weight: bolder;
  text-transform: uppercase;
  
}


.cookie-preferences-link {
  background: none;
  border: none;
  color: var(--brand-primary);
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  font-size: 0.95rem;
  padding: 0;
}

body.cookie-preferences-open {
  overflow: hidden;
}

.cookie-preferences-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(3, 7, 38, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.cookie-preferences-overlay.visible {
  opacity: 1;
  pointer-events: all;
}

.cookie-preferences-panel {
  background: linear-gradient(180deg, rgba(3, 7, 38, 0.95) 0%, rgba(8, 0, 84, 0.85) 60%, rgba(16, 8, 68, 0.75) 100%);
  border-radius: 32px;
  padding: 2.5rem;
  width: min(600px, 100%);
  box-shadow: 0 40px 120px rgba(3, 7, 38, 0.45);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-family: 'Playfair Display', 'Times New Roman', serif;
  color: #f8fafc;
}

.cookie-preferences-header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.cookie-preferences-close {
  background: transparent;
  border: none;
  font-size: 1.75rem;
  color: var(--text-primary, #080054);
  cursor: pointer;
  line-height: 1;
  padding: 0;
}

.cookie-preferences-kicker {
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #ff9100;
  margin: 0;
}

.cookie-preferences-panel h3 {
  margin: 0;
  font-size: 2rem;
  letter-spacing: 0.05em;
  color: #fff;
}

.cookie-preferences-panel::before {
  content: '';
  position: absolute;
  inset: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 28px;
  pointer-events: none;
}

.cookie-preferences-summary {
  color: #ffffff;
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.cookie-preferences-note {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.75);
  font-family: 'Inter', sans-serif;
  margin-bottom: 1rem;
  border-left: 3px solid #ff9100;
  padding: 0.75rem 1rem;
  letter-spacing: 0.04em;
  background: rgba(255, 145, 0, 0.08);
  border-radius: 0 0.5rem 0.5rem 0;
}

.cookie-preferences-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid rgba(8, 0, 84, 0.1);
  border-radius: 16px;
  padding: 1rem 1.25rem;
  margin-bottom: 0.85rem;
  gap: 1rem;
  cursor: pointer;
}

.cookie-preferences-toggle input {
  display: none;
}

.cookie-preferences-switch {
  width: 44px;
  height: 24px;
  border-radius: 999px;
  background: #e2e8f0;
  position: relative;
  transition: background 0.2s ease;
}

.cookie-preferences-switch::after {
  content: '';
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: transform 0.2s ease;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}

.cookie-preferences-toggle input:checked + .cookie-preferences-switch {
  background: var(--brand-primary);
}

.cookie-preferences-toggle input:checked + .cookie-preferences-switch::after {
  transform: translateX(20px);
}

.cookie-preferences-toggle input:checked + .cookie-preferences-switch {
  background: #ff9100;
}

.cookie-preferences-toggle-meta {
  flex: 1;
}

.cookie-preferences-label {
  font-weight: 600;
  display: block;
  color: #ff9100;
}

.cookie-preferences-description {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.85);
}

.cookie-preferences-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
  background: rgba(0, 0, 0, 0.1);
  padding: 1rem;
  border-radius: 20px;
}

.cookie-preferences-btn {
  border-radius: 8px;
  border: 1px solid rgba(3, 7, 38, 0.2);
  padding: 0.75rem 1.4rem;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.25s ease;
  background: rgba(255, 255, 255, 0.8);
  color: var(--brand-primary);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.cookie-preferences-btn:hover,
.cookie-preferences-btn:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(3, 7, 38, 0.2);
}

.cookie-preferences-btn-primary {
  background: var(--brand-primary);
  color: #fff;
  border-color: var(--brand-primary);
}

.cookie-preferences-btn-primary:hover,
.cookie-preferences-btn-primary:focus-visible {
  box-shadow: 0 10px 30px rgba(8, 0, 84, 0.35);
}

/* === PARTENAIRES PREMIUM === */
.partners-carousel-container {
  overflow: hidden;
  position: relative;
}

.partners-track {
  /* animation: scroll-infinite 30s linear infinite; */
  will-change: transform;
}

.partners-track:hover {
  animation-play-state: paused;
}

@keyframes scroll-infinite {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.partner-logo {
  position: relative;
  transition: all 0.2s ease;
  cursor: pointer;
  text-decoration: none;
  display: block;
}

.logo-container {
  position: relative;
  width: 120px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  overflow: hidden;
}

.logo-img {
  max-width: 80px;
  max-height: 50px;
  object-fit: contain;
  filter: grayscale(100%) opacity(0.7);
  transition: all 0.2s ease;
}

.partner-logo:hover .logo-img {
  filter: grayscale(0%) opacity(1);
  transform: scale(1.05);
}

.partner-logo:hover .logo-container {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  border-color: rgba(255, 145, 0, 0.3);
}

.logo-glow {
  position: absolute;
  inset: -2px;
  background: linear-gradient(45deg, #ff9100, #080054, #ff9100);
  border-radius: 18px;
  opacity: 0;
  z-index: -1;
  transition: opacity 0.4s ease;
}

.partner-logo:hover .logo-glow {
  opacity: 1;
  /* animation: glow-pulse 2s ease-in-out infinite; */
}

@keyframes glow-pulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.8; }
}

.fade-left, .fade-right {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100px;
  pointer-events: none;
  z-index: 10;
}

.fade-left {
  left: 0;
  background: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}

.fade-right {
  right: 0;
  background: linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}

/* Particules flottantes */
.particle {
  position: absolute;
  border-radius: 50%;
  background: linear-gradient(45deg, rgba(255, 145, 0, 0.1), rgba(8, 0, 84, 0.1));
  /* animation: float 6s ease-in-out infinite; */
}

.particle-1 {
  width: 20px;
  height: 20px;
  top: 20%;
  left: 10%;
  animation-delay: 0s;
}

.particle-2 {
  width: 15px;
  height: 15px;
  top: 60%;
  left: 80%;
  animation-delay: 2s;
}

.particle-3 {
  width: 25px;
  height: 25px;
  top: 40%;
  left: 70%;
  animation-delay: 4s;
}

.particle-4 {
  width: 18px;
  height: 18px;
  top: 80%;
  left: 20%;
  animation-delay: 1s;
}

.particle-5 {
  width: 22px;
  height: 22px;
  top: 30%;
  left: 90%;
  animation-delay: 3s;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
    opacity: 0.3;
  }
  50% {
    transform: translateY(-20px) rotate(180deg);
    opacity: 0.8;
  }
}

/* Responsive */
@media (max-width: 650px) {
  .partners-track {
    animation-duration: 20s;
  }
  
  .logo-container {
    width: 100px;
    height: 70px;
  }
  
  .logo-img {
    max-width: 60px;
    max-height: 40px;
  }
  
  .fade-left, .fade-right {
    width: 50px;
  }
}

/* === EFFETS DE RÉALITÉ AUGMENTÉE === */
.ar-hologram-effect {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 5;
}

/* Lignes de scan verticales */
.scan-line {
  position: absolute;
  width: 2px;
  height: 100%;
  background: linear-gradient(to bottom, 
    transparent 0%, 
    rgba(0, 255, 255, 0.8) 20%, 
    rgba(0, 255, 255, 1) 50%, 
    rgba(0, 255, 255, 0.8) 80%, 
    transparent 100%);
  animation: scan-move 3s linear infinite;
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

.scan-line-1 {
  left: 20%;
  animation-delay: 0s;
}

.scan-line-2 {
  left: 50%;
  animation-delay: 1s;
}

.scan-line-3 {
  left: 80%;
  animation-delay: 2s;
}

@keyframes scan-move {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(100%);
    opacity: 0;
  }
}

/* Particules flottantes AR */
.ar-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: radial-gradient(circle, rgba(0, 255, 255, 1) 0%, transparent 70%);
  border-radius: 50%;
  animation: ar-float 4s ease-in-out infinite;
  box-shadow: 0 0 6px rgba(0, 255, 255, 0.8);
}

.ar-particle-1 {
  top: 20%;
  left: 15%;
  animation-delay: 0s;
}

.ar-particle-2 {
  top: 60%;
  left: 25%;
  animation-delay: 1s;
}

.ar-particle-3 {
  top: 40%;
  right: 20%;
  animation-delay: 2s;
}

.ar-particle-4 {
  top: 80%;
  right: 15%;
  animation-delay: 3s;
}

@keyframes ar-float {
  0%, 100% {
    transform: translateY(0px) scale(1);
    opacity: 0.6;
  }
  50% {
    transform: translateY(-20px) scale(1.2);
    opacity: 1;
  }
}

/* Grille de réalité augmentée */
.ar-grid {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    linear-gradient(rgba(0, 255, 255, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 255, 255, 0.1) 1px, transparent 1px);
  background-size: 50px 50px;
  animation: grid-pulse 2s ease-in-out infinite;
  opacity: 0.3;
}

@keyframes grid-pulse {
  0%, 100% {
    opacity: 0.1;
  }
  50% {
    opacity: 0.4;
  }
}

/* Effet de distorsion */
.ar-distortion {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(ellipse at center, 
    transparent 30%, 
    rgba(0, 255, 255, 0.05) 50%, 
    transparent 70%);
  animation: distortion-wave 3s ease-in-out infinite;
}

@keyframes distortion-wave {
  0%, 100% {
    transform: scale(1);
    opacity: 0.3;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.6;
  }
}

/* Effet de glitch occasionnel */
.ar-hologram-effect::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(0, 255, 255, 0.1) 50%, 
    transparent 100%);
  animation: glitch-scan 8s linear infinite;
  opacity: 0;
}

@keyframes glitch-scan {
  0%, 95% {
    opacity: 0;
    transform: translateX(-100%);
  }
  96%, 100% {
    opacity: 1;
    transform: translateX(100%);
  }
}

/* === EFFETS 3D POUR LES BÂTIMENTS === */
.building-3d-left {
  perspective: 1000px;
  transform-style: preserve-3d;
}

.building-3d-right {
  perspective: 1000px;
  transform-style: preserve-3d;
}

.building-img-3d {
  transform: rotateY(25deg) rotateX(5deg) translateZ(20px);
  filter: brightness(1.1) contrast(1.1) saturate(1.2);
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* Effets de survol supprimés */

/* Effets de profondeur 3D - regardant vers l'intérieur */
.building-depth-left {
  position: absolute;
  top: 0;
  left: -20px;
  width: 20px;
  height: 100%;
  background: linear-gradient(270deg, 
    rgba(0, 0, 0, 0.4) 0%, 
    rgba(0, 0, 0, 0.2) 50%, 
    transparent 100%);
  transform: rotateY(-90deg);
  transform-origin: right center;
}

.building-depth-right {
  position: absolute;
  top: 0;
  right: -20px;
  width: 20px;
  height: 100%;
  background: linear-gradient(90deg, 
    rgba(0, 0, 0, 0.4) 0%, 
    rgba(0, 0, 0, 0.2) 50%, 
    transparent 100%);
  transform: rotateY(90deg);
  transform-origin: left center;
}

/* Animations supprimées - position fixe */

/* Effet de brillance supprimé */

/* Ombres portées 3D */
.building-3d-left::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 10px;
  right: 10px;
  height: 20px;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.4) 0%, transparent 70%);
  transform: rotateX(90deg);
  transform-origin: top center;
}

.building-3d-right::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 10px;
  right: 10px;
  height: 20px;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.4) 0%, transparent 70%);
  transform: rotateX(90deg);
  transform-origin: top center;
}
.card{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:16px;padding:16px;box-shadow:0 6px 16px rgba(0,0,0,.06);transition:transform .2s ease,box-shadow .2s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(0,0,0,.12)}
.card-title{margin-top:12px;font-size:20px;font-weight:700;color:#080054}
.hero-cta{color:#fff;font-weight:600;font-size:1.125rem;padding:.5rem 1rem;border-radius:.5rem;background:transparent;transition:all .2s ease}
.hero-cta:hover{background:#ff9100;color:#080054;transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.15)}
.sector-card{min-width:280px;background:#0b0b60;border-radius:16px;overflow:hidden;box-shadow:0 6px 16px rgba(0,0,0,.2)}
/* Carousel buttons - Version corrigée */
.carousel-btn {
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  color: #080054;
  border: 2px solid #080054;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 20;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease;
  font-size: 18px;
}

.carousel-btn:hover {
  background: #080054;
  color: white;
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(8, 0, 84, 0.4);
}

/* Styles pour les boutons carousel dans la section secteurs */
.secteurs-carousel .carousel-btn.left-2 {
  left: 20px;
}

.secteurs-carousel .carousel-btn.right-2 {
  right: 20px;
}



/* Styles pour les boutons de la section hero */
.hero-buttons-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.hero-button {
  flex: 1;
  min-width: 150px;
  text-align: center;
  padding: 0.75rem 1.5rem;
  color: white;
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 0.2s ease;
  border: none;
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.hero-button:hover {
  background: rgba(255, 145, 0, 0.8);
  color: white;
  transform: scale(1.05);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  box-shadow: 0 4px 20px rgba(255, 145, 0, 0.4);
}

.hero-button:active {
  transform: scale(0.98);
  background: rgba(255, 145, 0, 0.9);
  box-shadow: 0 2px 10px rgba(255, 145, 0, 0.6);
}

.hero-separator {
  width: 1px;
  height: 2.5rem;
  background: rgba(255, 255, 255, 0.4);
  margin: 0 0.25rem;
}

/* Responsive pour les boutons hero */
@media (max-width: 650px) {
  .hero-buttons-container {
    flex-direction: column;
    gap: 1rem;
  }
  
  .hero-separator {
    display: none;
  }
  
  .hero-button {
    min-width: 100%;
    border-radius: 0.75rem;
  }
}

.carousel-btn i {
  font-size: 16px;
  pointer-events: none;
}


/* ===== LOADER MAGNIFIQUE ===== */
.page-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(135deg, #080054 0%, #1a1a7a 50%, #080054 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 1;
  visibility: visible;
  transition: all 0.8s ease-in-out;
  /* Assurer le centrage parfait sur tous les écrans */
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.page-loader.fade-out {
  opacity: 0;
  visibility: hidden;
}

.loader-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  /* Assurer le centrage parfait sur tous les écrans */
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Cercle externe animé */
.loader-circle {
  width: 120px;
  height: 120px;
  border: 4px solid rgba(255, 255, 255, 0.1);
  border-top: 4px solid #ff9100;
  border-right: 4px solid #ff9100;
  border-radius: 50%;
  animation: spin 2s linear infinite;
  position: relative;
}

/* Cercle intermédiaire */
.loader-circle::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 8px;
  width: 96px;
  height: 96px;
  border: 3px solid rgba(255, 145, 0, 0.3);
  border-top: 3px solid #ff9100;
  border-radius: 50%;
  animation: spin 1.5s linear infinite reverse;
}

/* Cercle intérieur */
.loader-circle::after {
  content: '';
  position: absolute;
  top: 16px;
  left: 16px;
  width: 80px;
  height: 80px;
  border: 2px solid rgba(255, 145, 0, 0.5);
  border-top: 2px solid #ff9100;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Logo au centre - FIXE */
.loader-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  background: #ff9100;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 900;
  color: #080054;
  box-shadow: 0 8px 32px rgba(255, 145, 0, 0.4);
  z-index: 10;
  /* Pas d'animation - le logo reste fixe */
}

/* Particules flottantes */
.loader-particles {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.particle {
  position: absolute;
  width: 6px;
  height: 6px;
  background: #ff9100;
  border-radius: 50%;
  animation: float 3s ease-in-out infinite;
}

.particle:nth-child(1) {
  top: 20%;
  left: 10%;
  animation-delay: 0s;
}

.particle:nth-child(2) {
  top: 30%;
  right: 15%;
  animation-delay: 0.5s;
}

.particle:nth-child(3) {
  bottom: 25%;
  left: 20%;
  animation-delay: 1s;
}

.particle:nth-child(4) {
  bottom: 35%;
  right: 10%;
  animation-delay: 1.5s;
}

.particle:nth-child(5) {
  top: 50%;
  left: 5%;
  animation-delay: 2s;
}

.particle:nth-child(6) {
  top: 60%;
  right: 5%;
  animation-delay: 2.5s;
}

/* Texte de chargement */
.loader-text {
  margin-top: 40px;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  animation: fadeInOut 2s ease-in-out infinite;
}

.loader-text::after {
  content: '';
  animation: dots 1.5s infinite;
}

/* Animations */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes pulse {
  0%, 100% { 
    transform: translate(-50%, -50%) scale(1);
    box-shadow: 0 8px 32px rgba(255, 145, 0, 0.4);
  }
  50% { 
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: 0 12px 48px rgba(255, 145, 0, 0.6);
  }
}

@keyframes float {
  0%, 100% { 
    transform: translateY(0px) scale(1);
    opacity: 0.7;
  }
  50% { 
    transform: translateY(-20px) scale(1.2);
    opacity: 1;
  }
}

@keyframes fadeInOut {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

@keyframes dots {
  0%, 20% { content: ''; }
  40% { content: '.'; }
  60% { content: '..'; }
  80%, 100% { content: '...'; }
}

/* Animation de disparition */
.page-loader.fade-out .loader-circle {
  animation: none;
  transform: scale(0.8);
  opacity: 0;
}

.page-loader.fade-out .loader-logo {
  /* Le logo reste fixe même pendant la disparition */
  transform: translate(-50%, -50%) scale(0.9);
  opacity: 0;
  transition: all 0.8s ease-in-out;
}

.page-loader.fade-out .loader-text {
  opacity: 0;
}

/* Responsive - Mobile */
@media (max-width: 650px) {
  .page-loader {
    /* Assurer le centrage parfait sur mobile */
    width: 100vw;
    height: 100vh;
    min-height: 100vh;
    min-width: 100vw;
  }
  
  .loader-container {
    /* Centrage renforcé pour mobile */
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }
  
  .loader-circle {
    width: 100px;
    height: 100px;
  }
  
  .loader-circle::before {
    width: 80px;
    height: 80px;
    top: 6px;
    left: 6px;
  }
  
  .loader-circle::after {
    width: 68px;
    height: 68px;
    top: 12px;
    left: 12px;
  }
  
  .loader-logo {
    width: 50px;
    height: 50px;
    font-size: 24px;
  }
  
  .loader-text {
    font-size: 16px;
    margin-top: 30px;
  }
}

/* Supprimé - pas nécessaire avec la nouvelle structure 650/651 */
/* @media (min-width: 651px) and (max-width: 1024px) {
  .page-loader {
    /* Assurer le centrage parfait sur tablette */
    /* width: 100vw;
    height: 100vh;
    min-height: 100vh;
    min-width: 100vw;
  } */
  
  .loader-container {
    /* Centrage renforcé pour tablette */
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }
  
  .loader-circle {
    width: 110px;
    height: 110px;
  }
  
  .loader-circle::before {
    width: 88px;
    height: 88px;
    top: 7px;
    left: 7px;
  }
  
  .loader-circle::after {
    width: 74px;
    height: 74px;
    top: 14px;
    left: 14px;
  }
  
  .loader-logo {
    width: 55px;
    height: 55px;
    font-size: 26px;
  }
  
  .loader-text {
    font-size: 17px;
    margin-top: 35px;
  }

/* Responsive - Très petits écrans */
@media (max-width: 480px) {
  .page-loader {
    /* Assurer le centrage parfait sur très petits écrans */
    width: 100vw;
    height: 100vh;
    min-height: 100vh;
    min-width: 100vw;
  }
  
  .loader-container {
    /* Centrage renforcé pour très petits écrans */
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 20px;
  }
  
  .loader-circle {
    width: 80px;
    height: 80px;
  }
  
  .loader-circle::before {
    width: 64px;
    height: 64px;
    top: 5px;
    left: 5px;
  }
  
  .loader-circle::after {
    width: 54px;
    height: 54px;
    top: 10px;
    left: 10px;
  }
  
  .loader-logo {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
  
  .loader-text {
    font-size: 14px;
    margin-top: 25px;
    text-align: center;
  }
}

/* Responsive - Écrans très larges */
@media (min-width: 1920px) {
  .page-loader {
    /* Assurer le centrage parfait sur écrans très larges */
    width: 100vw;
    height: 100vh;
    min-height: 100vh;
    min-width: 100vw;
  }
  
  .loader-container {
    /* Centrage renforcé pour écrans très larges */
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }
  
  .loader-circle {
    width: 140px;
    height: 140px;
  }
  
  .loader-circle::before {
    width: 112px;
    height: 112px;
    top: 10px;
    left: 10px;
  }
  
  .loader-circle::after {
    width: 96px;
    height: 96px;
    top: 20px;
    left: 20px;
  }
  
  .loader-logo {
    width: 70px;
    height: 70px;
    font-size: 32px;
  }
  
  .loader-text {
    font-size: 20px;
    margin-top: 45px;
  }
}

/* Orientation paysage sur mobile */
@media (max-height: 500px) and (orientation: landscape) {
  .page-loader {
    /* Assurer le centrage parfait en orientation paysage */
    width: 100vw;
    height: 100vh;
    min-height: 100vh;
    min-width: 100vw;
  }
  
  .loader-container {
    /* Centrage renforcé en orientation paysage */
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    gap: 20px;
  }
  
  .loader-circle {
    width: 60px;
    height: 60px;
  }
  
  .loader-circle::before {
    width: 48px;
    height: 48px;
    top: 4px;
    left: 4px;
  }
  
  .loader-circle::after {
    width: 40px;
    height: 40px;
    top: 8px;
    left: 8px;
  }
  
  .loader-logo {
    width: 30px;
    height: 30px;
    font-size: 16px;
  }
  
  .loader-text {
    font-size: 12px;
    margin-top: 0;
    text-align: left;
  }
}

/* ===== PAGE À PROPOS - DESIGN MAGNIFIQUE ===== */

/* Hero Section À Propos */
.about-hero {
  background: linear-gradient(135deg, #080054 0%, #1a1a7a 25%, #ff9100 50%, #080054 75%, #1a1a7a 100%);
  background-size: 400% 400%;
  /* animation: gradientShift 15s ease infinite; */
  position: relative;
  overflow: hidden;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.about-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="50" cy="10" r="0.5" fill="rgba(255,255,255,0.05)"/><circle cx="10" cy="90" r="0.5" fill="rgba(255,255,255,0.05)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>') repeat;
  opacity: 0.3;
  /* animation: float 20s ease-in-out infinite; */
}

/* Cards d'équipe magnifiques */
.team-card {
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
  border-radius: 24px;
  padding: 0;
  box-shadow: 
    0 20px 40px rgba(8, 0, 84, 0.1),
    0 8px 16px rgba(8, 0, 84, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.team-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #ff9100, #ff6b35, #ff9100);
  background-size: 200% 100%;
  animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.team-card:hover {
  transform: translateY(-12px) scale(1.02);
  box-shadow: 
    0 32px 64px rgba(8, 0, 84, 0.2),
    0 16px 32px rgba(8, 0, 84, 0.12),
    0 0 0 1px rgba(255, 145, 0, 0.1);
}

.team-photo {
  position: relative;
  width: 100%;
  height: 280px;
  overflow: hidden;
  border-radius: 20px 20px 0 0;
  background: linear-gradient(45deg, #f1f5f9, #e2e8f0);
}

.team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.6s ease;
  filter: grayscale(20%) contrast(1.1);
}

.team-card:hover .team-photo img {
  transform: scale(1.05);
  filter: grayscale(0%) contrast(1.2) brightness(1.1);
}

.team-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(8, 0, 84, 0.8), rgba(255, 145, 0, 0.8));
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.4s ease;
  backdrop-filter: blur(10px);
}

.team-card:hover .team-overlay {
  opacity: 1;
}

.social-link {
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
  transition: all 0.2s ease;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.social-link:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-3px) scale(1.1);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.team-info {
  padding: 24px;
  text-align: center;
  position: relative;
}

.team-info h4 {
  margin-bottom: 8px;
  background: linear-gradient(135deg, #080054, #1a1a7a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.team-info p {
  margin-bottom: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* Cards de valeurs magnifiques */
.value-card {
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
  border-radius: 20px;
  padding: 32px 24px;
  text-align: center;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 
    0 16px 32px rgba(8, 0, 84, 0.08),
    0 4px 8px rgba(8, 0, 84, 0.04);
}

.value-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(from 0deg, transparent, rgba(255, 145, 0, 0.1), transparent);
  animation: rotate 10s linear infinite;
  opacity: 0;
  transition: opacity 0.3s ease;
}

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

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

.value-card:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 
    0 24px 48px rgba(8, 0, 84, 0.15),
    0 8px 16px rgba(8, 0, 84, 0.08),
    0 0 0 1px rgba(255, 145, 0, 0.1);
}

.value-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #ff9100, #ff6b35);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  font-size: 32px;
  color: white;
  box-shadow: 
    0 12px 24px rgba(255, 145, 0, 0.3),
    0 4px 8px rgba(255, 145, 0, 0.2);
  transition: all 0.4s ease;
  position: relative;
  z-index: 2;
}

.value-card:hover .value-icon {
  transform: scale(1.1) rotate(5deg);
  box-shadow: 
    0 16px 32px rgba(255, 145, 0, 0.4),
    0 8px 16px rgba(255, 145, 0, 0.3);
}

.value-card h3 {
  position: relative;
  z-index: 2;
  margin-bottom: 16px;
}

.value-card p {
  position: relative;
  z-index: 2;
  line-height: 1.6;
}

/* Section Histoire avec design moderne */
.about-story {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  position: relative;
  overflow: hidden;
}

.about-story::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 145, 0, 0.05) 0%, transparent 70%);
  animation: pulse 8s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.1); opacity: 0.8; }
}

/* Stats cards magnifiques */
.stats-card {
  background: linear-gradient(145deg, #080054 0%, #1a1a7a 100%);
  border-radius: 20px;
  padding: 32px 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 145, 0, 0.2);
  box-shadow: 
    0 20px 40px rgba(8, 0, 84, 0.3),
    0 8px 16px rgba(8, 0, 84, 0.2);
}

.stats-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #ff9100, #ff6b35, #ff9100);
  background-size: 200% 100%;
  animation: shimmer 2s ease-in-out infinite;
}

.stats-number {
  font-size: 3rem;
  font-weight: 900;
  background: linear-gradient(135deg, #ff9100, #ffffff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 8px;
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.stats-label {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.5px;
}

/* CTA Section magnifique */
.about-cta {
  background: linear-gradient(135deg, #080054 0%, #1a1a7a 25%, #ff9100 50%, #080054 75%, #1a1a7a 100%);
  background-size: 400% 400%;
  /* animation: gradientShift 12s ease infinite; */
  position: relative;
  overflow: hidden;
}

.about-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="dots" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23dots)"/></svg>') repeat;
  opacity: 0.4;
}

.cta-buttons {
  position: relative;
  z-index: 2;
}

.cta-primary {
  background: linear-gradient(135deg, #ff9100, #ff6b35);
  border: none;
  padding: 16px 32px;
  border-radius: 50px;
  color: white;
  font-weight: 700;
  font-size: 1.1rem;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 
    0 8px 16px rgba(255, 145, 0, 0.3),
    0 4px 8px rgba(255, 145, 0, 0.2);
  position: relative;
  overflow: hidden;
}

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

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

.cta-primary:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 
    0 12px 24px rgba(255, 145, 0, 0.4),
    0 6px 12px rgba(255, 145, 0, 0.3);
}

.cta-secondary {
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.8);
  padding: 14px 30px;
  border-radius: 50px;
  color: white;
  font-weight: 700;
  font-size: 1.1rem;
  transition: all 0.4s ease;
  backdrop-filter: blur(10px);
}

.cta-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: white;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* Responsive pour la page À propos */
@media (max-width: 650px) {
  .team-photo {
    height: 240px;
  }
  
  .value-icon {
    width: 60px;
    height: 60px;
    font-size: 24px;
  }
  
  .stats-number {
    font-size: 2.5rem;
  }
  
  .team-card:hover {
    transform: translateY(-6px) scale(1.01);
  }
  
  .value-card:hover {
    transform: translateY(-4px) scale(1.02);
  }
}

/* Mission/Valeurs/Vision - courbes supprimées */

.email{
    color: #fff;
    text-decoration: none;
}

/* Styles pour l'Organigramme */
.organigram-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.organigram-level {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 2rem;
  gap: 2rem;
}

.organigram-top {
  justify-content: center;
}

.organigram-directors {
  flex-wrap: wrap;
  justify-content: space-around;
}

.organigram-teams {
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
}

.organigram-card {
  background: white;
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
  text-align: center;
  transition: all 0.2s ease;
  border: 2px solid transparent;
  min-width: 200px;
}

.organigram-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.15);
  border-color: #ff9100;
}

.organigram-ceo {
  background: linear-gradient(135deg, #080054 0%, #ff9100 100%);
  color: white;
  transform: scale(1.05);
  z-index: 10;
  position: relative;
}

.organigram-ceo:hover {
  transform: scale(1.15) translateY(-8px);
}

.organigram-photo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 1rem;
  border: 3px solid #ff9100;
}

.organigram-ceo .organigram-photo {
  border-color: white;
  width: 100px;
  height: 100px;
}

.organigram-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.organigram-name {
  font-size: 1.25rem;
  font-weight: 700;
  color: #080054;
  margin-bottom: 0.5rem;
}

.organigram-ceo .organigram-name {
  color: white;
}

.organigram-position {
  font-size: 0.9rem;
  color: #ff9100;
  font-weight: 600;
}

.organigram-ceo .organigram-position {
  color: #f0f0f0;
}

.organigram-line {
  width: 2px;
  height: 40px;
  background: linear-gradient(to bottom, #080054, #ff9100);
  margin: 0 auto 1rem;
  position: relative;
}

.organigram-line::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #ff9100;
}

.organigram-lines {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 2rem;
}

.organigram-team {
  background: #f8fafc;
  border-radius: 1rem;
  padding: 1.5rem;
  border: 2px solid #e2e8f0;
  transition: all 0.2s ease;
  min-width: 250px;
  flex: 1;
}

.organigram-team:hover {
  border-color: #ff9100;
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

.organigram-team-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #080054;
  margin-bottom: 1rem;
  text-align: center;
}

.organigram-team-members {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.organigram-member {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem;
  background: white;
  border-radius: 0.5rem;
  transition: all 0.2s ease;
}

.organigram-member:hover {
  background: #ff9100;
  color: white;
}

.organigram-member img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.organigram-member span {
  font-size: 0.9rem;
  font-weight: 500;
}

/* Responsive pour l'Organigramme */
@media (max-width: 650px) {
  .organigram-container {
    padding: 1rem;
  }
  
  .organigram-level {
    flex-direction: column;
    gap: 1rem;
  }
  
  .organigram-directors {
    flex-direction: column;
    align-items: center;
  }
  
  .organigram-card {
    min-width: auto;
    width: 100%;
    max-width: 300px;
  }
  
  .organigram-ceo {
    transform: none;
  }
  
  .organigram-ceo:hover {
    transform: translateY(-8px);
  }
  
  .organigram-lines {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }
  
  .organigram-team {
    min-width: auto;
    width: 100%;
  }
  
  .organigram-team-members {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .organigram-member {
    flex-direction: column;
    text-align: center;
    min-width: 80px;
  }
}

/* ===== STYLES RÉVOLUTIONNAIRES PAGE À PROPOS - CHEF-D'ŒUVRE DIGITAL ===== */

/* Hero Épique - Chef-d'Œuvre Digital */
.about-hero-masterpiece {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: 
    radial-gradient(circle at 20% 50%, rgba(255, 145, 0, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(8, 0, 84, 0.4) 0%, transparent 50%),
    radial-gradient(circle at 40% 80%, rgba(255, 145, 0, 0.2) 0%, transparent 50%),
    linear-gradient(135deg, #080054 0%, #1a1a7a 25%, #ff9100 50%, #080054 75%, #1a1a7a 100%);
  background-size: 100% 100%, 100% 100%, 100% 100%, 400% 400%;
  animation: 
    gradientShift 15s ease infinite,
    /* backgroundPulse 8s ease-in-out infinite; */
}

@keyframes backgroundPulse {
  0%, 100% { 
    background-size: 100% 100%, 100% 100%, 100% 100%, 400% 400%;
  }
  50% { 
    background-size: 120% 120%, 120% 120%, 120% 120%, 450% 450%;
  }
}

/* Canvas Background */
.hero-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* Advanced Gradient System */
.hero-gradient-system {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
}

.gradient-layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.6;
}

.gradient-1 {
  background: linear-gradient(45deg, rgba(255, 145, 0, 0.1), transparent);
  animation: gradientFloat1 12s ease-in-out infinite;
}

.gradient-2 {
  background: linear-gradient(135deg, transparent, rgba(8, 0, 84, 0.1));
  animation: gradientFloat2 15s ease-in-out infinite;
}

.gradient-3 {
  background: radial-gradient(circle at 70% 30%, rgba(255, 145, 0, 0.05), transparent);
  animation: gradientFloat3 18s ease-in-out infinite;
}

.gradient-4 {
  background: conic-gradient(from 180deg, rgba(8, 0, 84, 0.05), rgba(255, 145, 0, 0.05), rgba(8, 0, 84, 0.05));
  animation: gradientFloat4 20s linear infinite;
}

@keyframes gradientFloat1 {
  0%, 100% { transform: translateX(0) translateY(0) scale(1); }
  50% { transform: translateX(20px) translateY(-20px) scale(1.1); }
}

@keyframes gradientFloat2 {
  0%, 100% { transform: translateX(0) translateY(0) scale(1); }
  50% { transform: translateX(-30px) translateY(30px) scale(0.9); }
}

@keyframes gradientFloat3 {
  0%, 100% { transform: translateX(0) translateY(0) scale(1); }
  50% { transform: translateX(25px) translateY(25px) scale(1.2); }
}

@keyframes gradientFloat4 {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(1); }
}

/* 3D Geometric Shapes */
.hero-geometric-system {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  overflow: hidden;
}

.geometric-shape {
  position: absolute;
  width: 120px;
  height: 120px;
  perspective: 1000px;
  animation: geometricFloat 20s ease-in-out infinite;
}

.shape-inner {
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, rgba(255, 145, 0, 0.1), rgba(8, 0, 84, 0.1));
  border: 2px solid rgba(255, 145, 0, 0.3);
  backdrop-filter: blur(10px);
  transform-style: preserve-3d;
  animation: geometricRotate 15s linear infinite;
}

.shape-1 {
  top: 10%;
  left: 5%;
  animation-delay: 0s;
}

.shape-2 {
  top: 60%;
  right: 10%;
  animation-delay: 3s;
}

.shape-3 {
  top: 30%;
  right: 40%;
  animation-delay: 6s;
}

.shape-4 {
  bottom: 20%;
  left: 20%;
  animation-delay: 9s;
}

.shape-5 {
  top: 70%;
  left: 60%;
  animation-delay: 12s;
}

.shape-6 {
  top: 15%;
  right: 25%;
  animation-delay: 15s;
}

@keyframes geometricFloat {
  0%, 100% { 
    transform: translateY(0px) rotateX(0deg) rotateY(0deg);
  }
  25% { 
    transform: translateY(-20px) rotateX(90deg) rotateY(90deg);
  }
  50% { 
    transform: translateY(-40px) rotateX(180deg) rotateY(180deg);
  }
  75% { 
    transform: translateY(-20px) rotateX(270deg) rotateY(270deg);
  }
}

@keyframes geometricRotate {
  0% { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
  100% { transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); }
}

/* Light Effects */
.hero-light-system {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  overflow: hidden;
}

.light-beam {
  position: absolute;
  width: 2px;
  height: 100px;
  background: linear-gradient(to bottom, transparent, #ff9100, transparent);
  animation: lightSweep 8s ease-in-out infinite;
}

.light-1 {
  top: 20%;
  left: 10%;
  animation-delay: 0s;
}

.light-2 {
  top: 60%;
  right: 15%;
  animation-delay: 2.5s;
}

.light-3 {
  top: 40%;
  left: 70%;
  animation-delay: 5s;
}

@keyframes lightSweep {
  0%, 100% { 
    opacity: 0;
    transform: translateY(-100px) rotate(0deg);
  }
  50% { 
    opacity: 1;
    transform: translateY(100vh) rotate(180deg);
  }
}

/* Floating Elements */
.hero-floating-elements {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  overflow: hidden;
}

.floating-element {
  position: absolute;
  width: 40px;
  height: 40px;
  color: rgba(255, 145, 0, 0.6);
  font-size: 20px;
  /* animation: floatElement 25s ease-in-out infinite; */
}

.element-1 {
  top: 15%;
  left: 8%;
  animation-delay: 0s;
}

.element-2 {
  top: 70%;
  right: 12%;
  animation-delay: 4s;
}

.element-3 {
  top: 35%;
  right: 35%;
  animation-delay: 8s;
}

.element-4 {
  bottom: 25%;
  left: 25%;
  animation-delay: 12s;
}

.element-5 {
  top: 65%;
  left: 65%;
  animation-delay: 16s;
}

.element-6 {
  top: 20%;
  right: 28%;
  animation-delay: 20s;
}

@keyframes floatElement {
  0%, 100% { 
    transform: translateY(0px) rotate(0deg) scale(1);
    opacity: 0.6;
  }
  25% { 
    transform: translateY(-30px) rotate(90deg) scale(1.2);
    opacity: 1;
  }
  50% { 
    transform: translateY(-60px) rotate(180deg) scale(0.8);
    opacity: 0.8;
  }
  75% { 
    transform: translateY(-30px) rotate(270deg) scale(1.1);
    opacity: 0.9;
  }
}

/* Hero Badge Épique */
.hero-badge-epic {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(30px);
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 50px;
  padding: 16px 32px;
  margin-bottom: 32px;
  position: relative;
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.hero-badge-epic:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.05) translateY(-5px);
  box-shadow: 0 20px 40px rgba(255, 145, 0, 0.3);
}

.badge-glow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, rgba(255, 145, 0, 0.3), rgba(255, 255, 255, 0.1));
  border-radius: 50px;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.hero-badge-epic:hover .badge-glow {
  opacity: 1;
}

.hero-badge-epic .badge-icon {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #ff9100, #ff6b35);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 16px;
  position: relative;
  z-index: 2;
}

.icon-pulse {
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  border: 2px solid rgba(255, 145, 0, 0.5);
  border-radius: 50%;
  animation: iconPulse 2s ease-in-out infinite;
}

@keyframes iconPulse {
  0%, 100% { 
    transform: scale(1);
    opacity: 1;
  }
  50% { 
    transform: scale(1.2);
    opacity: 0.5;
  }
}

.hero-badge-epic .badge-text {
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.5px;
  color: white;
  position: relative;
  z-index: 2;
}

.badge-particles {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.mini-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #ff9100;
  border-radius: 50%;
  animation: miniParticleFloat 3s ease-in-out infinite;
}

.mini-particle:nth-child(1) {
  top: 20%;
  left: 20%;
  animation-delay: 0s;
}

.mini-particle:nth-child(2) {
  top: 60%;
  right: 30%;
  animation-delay: 1s;
}

.mini-particle:nth-child(3) {
  bottom: 30%;
  left: 60%;
  animation-delay: 2s;
}

@keyframes miniParticleFloat {
  0%, 100% { 
    transform: translateY(0px) scale(1);
    opacity: 0.6;
  }
  50% { 
    transform: translateY(-20px) scale(1.5);
    opacity: 1;
  }
}

/* Titre Épique avec Effets 3D */
.hero-title-epic {
  font-size: clamp(4rem, 10vw, 8rem);
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 32px;
  text-align: center;
  perspective: 1000px;
}

.title-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.title-line {
  display: block;
  position: relative;
  animation: titleSlideIn 1.5s ease-out forwards;
  opacity: 0;
  transform: translateY(100px) rotateX(90deg);
}

.title-line:nth-child(1) { animation-delay: 0.3s; }
.title-line:nth-child(2) { animation-delay: 0.6s; }
.title-line:nth-child(3) { animation-delay: 0.9s; }

@keyframes titleSlideIn {
  to {
    opacity: 1;
    transform: translateY(0) rotateX(0deg);
  }
}

.title-3d {
  display: inline-block;
  transform-style: preserve-3d;
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.title-shadow {
  position: absolute;
  top: 4px;
  left: 4px;
  color: rgba(0, 0, 0, 0.3);
  transform: translateZ(-10px);
  z-index: 1;
}

.title-main {
  position: relative;
  z-index: 2;
  color: white;
}

.title-highlight {
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(135deg, #ff9100, #ff6b35, #ffffff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  z-index: 3;
  opacity: 0;
  animation: titleHighlight 2s ease-in-out infinite;
}

@keyframes titleHighlight {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

/* Sous-titre Magique */
.hero-subtitle-epic {
  font-size: 1.8rem;
  font-weight: 600;
  margin-bottom: 40px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}

.magic-word {
  position: relative;
  display: inline-block;
  padding: 12px 24px;
  border-radius: 25px;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  cursor: pointer;
}

.word-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 145, 0, 0.1), rgba(255, 255, 255, 0.1));
  border-radius: 25px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.magic-word:hover .word-bg {
  opacity: 1;
}

.word-text {
  position: relative;
  z-index: 2;
  color: white;
  font-weight: 700;
}

.magic-separator {
  font-size: 2rem;
  color: #ff9100;
  animation: separatorPulse 2s ease-in-out infinite;
}

@keyframes separatorPulse {
  0%, 100% { 
    transform: scale(1) rotate(0deg);
    opacity: 0.8;
  }
  50% { 
    transform: scale(1.3) rotate(180deg);
    opacity: 1;
  }
}

/* Description Épique */
.hero-description-epic {
  max-width: 900px;
  margin: 0 auto 56px;
  text-align: center;
}

.description-container {
  position: relative;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  padding: 32px;
}

.description-text {
  font-size: 1.3rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.9);
  position: relative;
  z-index: 2;
}

.text-reveal {
  display: block;
  opacity: 0;
  transform: translateY(30px);
  animation: textRevealAnimation 1s ease-out forwards;
}

.text-reveal:nth-child(1) { animation-delay: 0.2s; }
.text-reveal:nth-child(2) { animation-delay: 0.4s; }
.text-reveal:nth-child(3) { animation-delay: 0.6s; }
.text-reveal:nth-child(4) { animation-delay: 0.8s; }

@keyframes textRevealAnimation {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.description-glow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 145, 0, 0.1), transparent);
  border-radius: 24px;
  opacity: 0;
  animation: descriptionGlow 3s ease-in-out infinite;
}

@keyframes descriptionGlow {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

/* CTA Épique */
.hero-cta-epic {
  display: flex;
  gap: 32px;
  justify-content: center;
  margin-bottom: 80px;
  flex-wrap: wrap;
}

.cta-epic-primary, .cta-epic-secondary {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 20px 40px;
  border-radius: 50px;
  font-weight: 800;
  font-size: 1.2rem;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.cta-epic-primary {
  background: linear-gradient(135deg, #ff9100, #ff6b35);
  color: white;
  box-shadow: 0 15px 35px rgba(255, 145, 0, 0.4);
}

.cta-epic-primary:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 25px 50px rgba(255, 145, 0, 0.6);
}

.cta-epic-secondary {
  background: rgba(255, 255, 255, 0.1);
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(20px);
}

.cta-epic-secondary:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: white;
  transform: translateY(-8px);
  box-shadow: 0 25px 50px rgba(255, 255, 255, 0.2);
}

.cta-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, rgba(255, 255, 255, 0.1), transparent);
  border-radius: 50px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.cta-epic-primary:hover .cta-bg,
.cta-epic-secondary:hover .cta-bg {
  opacity: 1;
}

.cta-content {
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  z-index: 2;
}

.cta-text {
  position: relative;
  z-index: 2;
}

.cta-icon {
  position: relative;
  z-index: 2;
  transition: transform 0.3s ease;
}

.cta-epic-primary:hover .cta-icon,
.cta-epic-secondary:hover .cta-icon {
  transform: translateX(5px) scale(1.2);
}

.icon-trail {
  position: absolute;
  top: 0;
  left: -10px;
  width: 20px;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.cta-epic-primary:hover .icon-trail,
.cta-epic-secondary:hover .icon-trail {
  opacity: 1;
}

.cta-glow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.2), transparent);
  border-radius: 50px;
  opacity: 0;
  animation: ctaGlow 2s ease-in-out infinite;
}

@keyframes ctaGlow {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

/* Stats Épiques */
.hero-stats-epic {
  max-width: 1000px;
  margin: 0 auto;
}

.stats-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}

.stat-item-epic {
  text-align: center;
  position: relative;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 24px;
  min-width: 180px;
  transition: all 0.4s ease;
}

.stat-item-epic:hover {
  transform: translateY(-10px) scale(1.05);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 40px rgba(255, 145, 0, 0.2);
}

.stat-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #ff9100, #ff6b35);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
  margin: 0 auto 16px;
  animation: statIconFloat 3s ease-in-out infinite;
}

@keyframes statIconFloat {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

.stat-number {
  font-size: 3.5rem;
  font-weight: 900;
  background: linear-gradient(135deg, #ff9100, #ffffff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 8px;
  position: relative;
  z-index: 2;
}

.stat-label {
  font-size: 1rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  letter-spacing: 0.5px;
  position: relative;
  z-index: 2;
}

.stat-glow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 145, 0, 0.1), transparent);
  border-radius: 20px;
  opacity: 0;
  animation: statGlow 4s ease-in-out infinite;
}

@keyframes statGlow {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

.stat-divider-epic {
  display: flex;
  align-items: center;
  gap: 8px;
}

.divider-line {
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #ff9100, transparent);
  animation: dividerPulse 2s ease-in-out infinite;
}

.divider-dot {
  width: 8px;
  height: 8px;
  background: #ff9100;
  border-radius: 50%;
  animation: dotPulse 2s ease-in-out infinite;
}

@keyframes dividerPulse {
  0%, 100% { opacity: 0.5; transform: scaleX(1); }
  50% { opacity: 1; transform: scaleX(1.2); }
}

@keyframes dotPulse {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.5); opacity: 1; }
}

/* Sparkle Animation */
@keyframes sparkleAnimation {
  0% {
    transform: scale(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(360deg);
    opacity: 0;
  }
}

/* Système de Particules Avancé */
.hero-particles-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

.particle {
  position: absolute;
  border-radius: 50%;
  animation: particleFloat 20s linear infinite;
}

.particle-1 {
  width: 8px;
  height: 8px;
  background: radial-gradient(circle, #ff9100, transparent);
  top: 20%;
  left: 10%;
  animation-delay: 0s;
  animation-duration: 25s;
}

.particle-2 {
  width: 12px;
  height: 12px;
  background: radial-gradient(circle, #ffffff, transparent);
  top: 60%;
  right: 15%;
  animation-delay: 3s;
  animation-duration: 30s;
}

.particle-3 {
  width: 6px;
  height: 6px;
  background: radial-gradient(circle, #ff6b35, transparent);
  top: 80%;
  left: 30%;
  animation-delay: 6s;
  animation-duration: 22s;
}

.particle-4 {
  width: 10px;
  height: 10px;
  background: radial-gradient(circle, #ff9100, transparent);
  top: 30%;
  right: 40%;
  animation-delay: 9s;
  animation-duration: 28s;
}

.particle-5 {
  width: 7px;
  height: 7px;
  background: radial-gradient(circle, #ffffff, transparent);
  top: 70%;
  left: 70%;
  animation-delay: 12s;
  animation-duration: 26s;
}

.particle-6 {
  width: 9px;
  height: 9px;
  background: radial-gradient(circle, #ff6b35, transparent);
  top: 40%;
  left: 50%;
  animation-delay: 15s;
  animation-duration: 24s;
}

.particle-7 {
  width: 5px;
  height: 5px;
  background: radial-gradient(circle, #ff9100, transparent);
  top: 10%;
  right: 60%;
  animation-delay: 18s;
  animation-duration: 32s;
}

.particle-8 {
  width: 11px;
  height: 11px;
  background: radial-gradient(circle, #ffffff, transparent);
  top: 90%;
  right: 25%;
  animation-delay: 21s;
  animation-duration: 29s;
}

.particle-9 {
  width: 8px;
  height: 8px;
  background: radial-gradient(circle, #ff6b35, transparent);
  top: 50%;
  left: 20%;
  animation-delay: 24s;
  animation-duration: 27s;
}

.particle-10 {
  width: 6px;
  height: 6px;
  background: radial-gradient(circle, #ff9100, transparent);
  top: 15%;
  left: 80%;
  animation-delay: 27s;
  animation-duration: 31s;
}

.particle-11 {
  width: 10px;
  height: 10px;
  background: radial-gradient(circle, #ffffff, transparent);
  top: 75%;
  right: 50%;
  animation-delay: 30s;
  animation-duration: 23s;
}

.particle-12 {
  width: 7px;
  height: 7px;
  background: radial-gradient(circle, #ff6b35, transparent);
  top: 35%;
  right: 10%;
  animation-delay: 33s;
  animation-duration: 25s;
}

.particle-13 {
  width: 9px;
  height: 9px;
  background: radial-gradient(circle, #ff9100, transparent);
  top: 85%;
  left: 60%;
  animation-delay: 36s;
  animation-duration: 28s;
}

.particle-14 {
  width: 5px;
  height: 5px;
  background: radial-gradient(circle, #ffffff, transparent);
  top: 25%;
  left: 40%;
  animation-delay: 39s;
  animation-duration: 30s;
}

.particle-15 {
  width: 12px;
  height: 12px;
  background: radial-gradient(circle, #ff6b35, transparent);
  top: 65%;
  left: 90%;
  animation-delay: 42s;
  animation-duration: 26s;
}

@keyframes particleFloat {
  0% {
    transform: translateY(0px) translateX(0px) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(-100vh) translateX(50px) rotate(360deg);
    opacity: 0;
  }
}

/* Système de Gradients Avancé */
.hero-gradient-system {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.gradient-layer {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0.3;
  /* animation: gradientShift 20s ease-in-out infinite; */
}

.gradient-1 {
  background: radial-gradient(circle at 20% 30%, rgba(255, 145, 0, 0.4) 0%, transparent 50%);
  animation-delay: 0s;
}

.gradient-2 {
  background: radial-gradient(circle at 80% 20%, rgba(8, 0, 84, 0.3) 0%, transparent 60%);
  animation-delay: 5s;
}

.gradient-3 {
  background: radial-gradient(circle at 40% 80%, rgba(255, 107, 53, 0.3) 0%, transparent 45%);
  animation-delay: 10s;
}

.gradient-4 {
  background: radial-gradient(circle at 70% 70%, rgba(255, 255, 255, 0.1) 0%, transparent 55%);
  animation-delay: 15s;
}

@keyframes gradientShift {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    opacity: 0.3;
  }
  25% {
    transform: scale(1.1) rotate(90deg);
    opacity: 0.5;
  }
  50% {
    transform: scale(0.9) rotate(180deg);
    opacity: 0.4;
  }
  75% {
    transform: scale(1.05) rotate(270deg);
    opacity: 0.6;
  }
}

/* Système de Formes Géométriques 3D */
.hero-geometric-system {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.geometric-shape {
  position: absolute;
  border-radius: 50%;
  animation: geometricFloat 15s ease-in-out infinite;
}

.shape-1 {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, rgba(255, 145, 0, 0.2), rgba(255, 107, 53, 0.1));
  top: 20%;
  left: 15%;
  animation-delay: 0s;
}

.shape-2 {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 145, 0, 0.1));
  top: 60%;
  right: 20%;
  animation-delay: 3s;
  border-radius: 20px;
}

.shape-3 {
  width: 100px;
  height: 100px;
  background: linear-gradient(135deg, rgba(8, 0, 84, 0.2), rgba(255, 145, 0, 0.1));
  top: 80%;
  left: 70%;
  animation-delay: 6s;
  border-radius: 30px;
}

.shape-4 {
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, rgba(255, 107, 53, 0.2), rgba(255, 255, 255, 0.1));
  top: 30%;
  right: 60%;
  animation-delay: 9s;
  border-radius: 35px;
}

.shape-5 {
  width: 90px;
  height: 90px;
  background: linear-gradient(135deg, rgba(255, 145, 0, 0.15), rgba(8, 0, 84, 0.1));
  top: 70%;
  left: 20%;
  animation-delay: 12s;
  border-radius: 45px;
}

.shape-6 {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 107, 53, 0.1));
  top: 10%;
  right: 30%;
  animation-delay: 15s;
  border-radius: 25px;
}

.shape-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  height: 60%;
  background: rgba(255, 255, 255, 0.1);
  border-radius: inherit;
  animation: innerPulse 4s ease-in-out infinite;
}

@keyframes geometricFloat {
  0%, 100% {
    transform: translateY(0px) rotate(0deg) scale(1);
    opacity: 0.6;
  }
  25% {
    transform: translateY(-20px) rotate(90deg) scale(1.1);
    opacity: 0.8;
  }
  50% {
    transform: translateY(-40px) rotate(180deg) scale(0.9);
    opacity: 0.7;
  }
  75% {
    transform: translateY(-20px) rotate(270deg) scale(1.05);
    opacity: 0.9;
  }
}

@keyframes innerPulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.5;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.3);
    opacity: 0.8;
  }
}

/* Système d'Effets de Lumière */
.hero-light-system {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.light-beam {
  position: absolute;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  height: 2px;
  animation: lightSweep 8s ease-in-out infinite;
}

.light-1 {
  width: 300px;
  top: 30%;
  left: -300px;
  animation-delay: 0s;
}

.light-2 {
  width: 400px;
  top: 60%;
  right: -400px;
  animation-delay: 3s;
}

.light-3 {
  width: 250px;
  top: 80%;
  left: 50%;
  transform: translateX(-50%);
  animation-delay: 6s;
}

@keyframes lightSweep {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: translateX(100vw);
    opacity: 0;
  }
}

/* Système d'Éléments Flottants */
.hero-floating-elements {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.floating-element {
  position: absolute;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #ff9100;
  animation: elementFloat 12s ease-in-out infinite;
}

.element-1 {
  top: 15%;
  left: 25%;
  animation-delay: 0s;
}

.element-2 {
  top: 45%;
  right: 30%;
  animation-delay: 2s;
}

.element-3 {
  top: 75%;
  left: 40%;
  animation-delay: 4s;
}

.element-4 {
  top: 25%;
  right: 15%;
  animation-delay: 6s;
}

.element-5 {
  top: 85%;
  right: 50%;
  animation-delay: 8s;
}

.element-6 {
  top: 55%;
  left: 15%;
  animation-delay: 10s;
}

@keyframes elementFloat {
  0%, 100% {
    transform: translateY(0px) rotate(0deg) scale(1);
    opacity: 0.7;
  }
  25% {
    transform: translateY(-30px) rotate(90deg) scale(1.2);
    opacity: 1;
  }
  50% {
    transform: translateY(-60px) rotate(180deg) scale(0.8);
    opacity: 0.8;
  }
  75% {
    transform: translateY(-30px) rotate(270deg) scale(1.1);
    opacity: 0.9;
  }
}

/* Indicateur de Défilement */
.scroll-indicator {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  z-index: 10;
}

.scroll-line {
  width: 2px;
  height: 60px;
  background: linear-gradient(180deg, #ff9100, transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}

.scroll-text {
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 2px;
  animation: scrollTextPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
  0%, 100% {
    height: 60px;
    opacity: 0.8;
  }
  50% {
    height: 80px;
    opacity: 1;
  }
}

@keyframes scrollTextPulse {
  0%, 100% {
    opacity: 0.8;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(-5px);
  }
}

/* ===== BOUTON ADMIN ===== */
.admin-login-btn {
  background: linear-gradient(135deg, #ff9100, #ff6b00);
  color: white;
  border: none;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
  margin-left: 10px;
  opacity: 0.7;
}

.admin-login-btn:hover {
  opacity: 1;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 145, 0, 0.3);
}

.admin-login-btn i {
  font-size: 16px;
}

/* Bouton Se connecter — menu déroulant */
.nav-login-dropdown {
  position: relative;
  flex-shrink: 0;
  margin-left: 8px;
}

.nav-login-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 2px solid var(--brand-primary, #080054);
  border-radius: 10px 0 10px 0;
  background: #fff;
  color: var(--brand-primary, #080054);
  font-size: clamp(13px, 1vw, 16px);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 2px 8px rgba(8, 0, 84, 0.12);
}

.nav-login-btn i:first-child {
  color: var(--brand-accent, #ff9100);
  font-size: 0.95em;
}

/* Bouton S'inscrire */
.nav-register-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 2px solid var(--brand-accent, #ff9100);
  border-radius: 10px 0 10px 0;
  background: linear-gradient(135deg, #fff8f0, #fff);
  color: var(--brand-primary, #080054);
  font-size: clamp(13px, 1vw, 16px);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 2px 8px rgba(255, 145, 0, 0.15);
  flex-shrink: 0;
  margin-left: 8px;
}

.nav-register-btn i:first-child {
  color: var(--brand-accent, #ff9100);
  font-size: 0.95em;
}

.nav-register-btn:hover,
.nav-register-btn:focus-visible {
  background: var(--brand-accent, #ff9100);
  color: #fff;
  border-color: var(--brand-accent, #ff9100);
  outline: none;
}

.nav-register-btn:hover i:first-child,
.nav-register-btn:focus-visible i:first-child {
  color: #fff;
}

.nav-login-btn:hover,
.nav-login-btn:focus-visible,
.nav-login-dropdown.is-open > .nav-login-btn,
.nav-login-dropdown:focus-within > .nav-login-btn {
  background: var(--brand-primary, #080054);
  color: #fff;
  border-color: var(--brand-primary, #080054);
  outline: none;
}

.nav-login-btn:hover i:first-child,
.nav-login-btn:focus-visible i:first-child,
.nav-login-dropdown.is-open > .nav-login-btn i:first-child {
  color: #fff;
}

.nav-login-dropdown .nav-dropdown__icon {
  font-size: 0.65em;
  margin-left: 2px;
}

.nav-login-menu {
  min-width: 220px;
  right: 0;
  left: auto;
}

.nav-login-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-login-menu a i {
  width: 18px;
  text-align: center;
  color: var(--brand-accent, #ff9100);
}

.nav-menu .nav-login-dropdown {
  align-self: center;
}

/* Lien portail employé — icône seule (legacy, pages non migrées) */
.employee-portal-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  margin-left: 8px;
  padding: 0;
  border-radius: 10px;
  color: var(--brand-primary, #080054);
  background: rgba(8, 0, 84, 0.06);
  border: 1px solid rgba(8, 0, 84, 0.14);
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.employee-portal-link:hover,
.employee-portal-link:focus-visible {
  background: var(--brand-primary, #080054);
  color: #fff;
  border-color: var(--brand-primary, #080054);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(8, 0, 84, 0.22);
  outline: none;
}

.employee-portal-link i {
  font-size: 1.125rem;
  color: var(--brand-accent, #ff9100);
  line-height: 1;
  pointer-events: none;
}

.employee-portal-link:hover i,
.employee-portal-link:focus-visible i {
  color: #fff;
}

/* Alignement nav : icône employé + admin */
.nav-menu .employee-portal-link,
.nav-menu .admin-login-btn {
  align-self: center;
  flex-shrink: 0;
}

.language-selector {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  margin-left: 12px;
}

.language-dropdown {
  background: #fff;
  border: 2px solid #080054;
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #080054;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  white-space: nowrap;
}

.language-dropdown:hover,
.language-dropdown.is-open {
  background: #080054;
  color: #fff;
}

.language-dropdown .flag {
  width: 24px;
  height: 18px;
  object-fit: cover;
  border-radius: 2px;
  flex-shrink: 0;
}

.language-dropdown i {
  font-size: 12px;
}

.language-options {
  position: absolute;
  top: calc(100% + 5px);
  right: 0;
  left: auto;
  min-width: 160px;
  max-height: min(70vh, 420px);
  overflow-y: auto;
  background: #fff;
  border: 2px solid #080054;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(8, 0, 84, 0.18);
  z-index: 10100;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
  display: none;
  margin: 0;
  padding: 0;
}

.language-options.show,
.language-options.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  display: block !important;
}

.language-options[hidden]:not(.show):not(.is-open) {
  display: none !important;
}

.language-option {
  padding: 10px 15px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #080054;
}

.language-option:hover {
  background: #f1f5f9;
}

.language-option.active {
  background: #080054;
  color: #fff;
}

.language-option .flag {
  width: 24px;
  height: 18px;
  object-fit: cover;
  border-radius: 2px;
  flex-shrink: 0;
}

@media (min-width: 1201px) {
  .employee-portal-link {
    margin-left: 4px;
  }
}

/* Styles pour le modal admin */
.admin-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
}

.admin-modal-content {
  background: white;
  border-radius: 16px;
  padding: 2rem;
  max-width: 400px;
  width: 90%;
  position: relative;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.admin-modal-close {
  position: absolute;
  top: 15px;
  right: 15px;
  background: #f8f9fa;
  border: none;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.admin-modal-close:hover {
  background: #e9ecef;
  transform: scale(1.1);
}

.admin-modal-header {
  text-align: center;
  margin-bottom: 2rem;
}

.admin-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #ff9100, #ff6b00);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
}

.admin-icon i {
  font-size: 24px;
  color: white;
}

.admin-modal-header h2 {
  color: #333;
  margin: 0 0 0.5rem 0;
  font-size: 1.5rem;
}

.admin-modal-header p {
  color: #666;
  margin: 0;
  font-size: 0.9rem;
}

.admin-form {
  margin-bottom: 1.5rem;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  color: #333;
  font-weight: 500;
}

.form-group input {
  width: 100%;
  padding: 12px;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  font-size: 1rem;
  transition: border-color 0.3s ease;
}

.form-group input:focus {
  outline: none;
  border-color: #ff9100;
}

.admin-submit-btn {
  width: 100%;
  background: linear-gradient(135deg, #ff9100, #ff6b00);
  color: white;
  border: none;
  padding: 12px;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.admin-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(255, 145, 0, 0.3);
}

.admin-info {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f8f9fa;
  padding: 12px;
  border-radius: 8px;
  color: #666;
  font-size: 0.9rem;
}

.admin-info i {
  color: #ff9100;
}

/* Messages admin */
.admin-message {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 12px 20px;
  border-radius: 8px;
  font-weight: 600;
  z-index: 10001;
  animation: slideIn 0.3s ease;
}

.admin-success {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.admin-error {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* ===== RESPONSIVE DESIGN ÉPIQUE ===== */

/* Tablettes */
@media (max-width: 1024px) {
  .hero-title-epic {
    font-size: clamp(3rem, 8vw, 6rem);
  }
  
  .hero-subtitle-epic {
    font-size: 1.5rem;
    gap: 16px;
  }
  
  .stats-container {
    gap: 24px;
  }
  
  .stat-item-epic {
    min-width: 150px;
    padding: 20px;
  }
  
  .stat-number {
    font-size: 2.8rem;
  }
  
  .hero-cta-epic {
    gap: 20px;
  }
  
  .cta-epic-primary, .cta-epic-secondary {
    padding: 16px 32px;
    font-size: 1.1rem;
  }
  
  .geometric-shape {
    transform: scale(0.8);
  }
  
  .floating-element {
    transform: scale(0.8);
  }
}

/* Mobile */
@media (max-width: 650px) {
  .hero-title-epic {
    font-size: clamp(2.5rem, 7vw, 4rem);
    margin-bottom: 24px;
  }
  
  .title-container {
    gap: 4px;
  }
  
  .hero-subtitle-epic {
    font-size: 1.2rem;
    flex-direction: column;
    gap: 12px;
  }
  
  .magic-word {
    padding: 8px 16px;
  }
  
  .magic-separator {
    font-size: 1.5rem;
  }
  
  .hero-description-epic {
    margin-bottom: 40px;
  }
  
  .description-container {
    padding: 24px;
  }
  
  .description-text {
    font-size: 1.1rem;
  }
  
  .hero-cta-epic {
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-bottom: 60px;
  }
  
  .cta-epic-primary, .cta-epic-secondary {
    width: 100%;
    max-width: 300px;
    justify-content: center;
    padding: 18px 24px;
    font-size: 1rem;
  }
  
  .stats-container {
    flex-direction: column;
    gap: 20px;
  }
  
  .stat-item-epic {
    min-width: 100%;
    max-width: 250px;
    padding: 20px;
  }
  
  .stat-number {
    font-size: 2.5rem;
  }
  
  .stat-divider-epic {
    display: none;
  }
  
  .hero-badge-epic {
    padding: 12px 24px;
    margin-bottom: 24px;
  }
  
  .hero-badge-epic .badge-text {
    font-size: 14px;
  }
  
  /* Réduire les animations sur mobile pour les performances */
  .particle {
    animation-duration: 15s;
  }
  
  .geometric-shape {
    transform: scale(0.6);
    animation-duration: 12s;
  }
  
  .floating-element {
    transform: scale(0.6);
    animation-duration: 10s;
  }
  
  .gradient-layer {
    animation-duration: 15s;
  }
  
  .light-beam {
    animation-duration: 6s;
  }
}

/* Mobile Petit */
@media (max-width: 480px) {
  .hero-title-epic {
    font-size: clamp(2rem, 6vw, 3rem);
  }
  
  .hero-subtitle-epic {
    font-size: 1rem;
  }
  
  .magic-word {
    padding: 6px 12px;
  }
  
  .description-container {
    padding: 20px;
  }
  
  .description-text {
    font-size: 1rem;
  }
  
  .cta-epic-primary, .cta-epic-secondary {
    padding: 16px 20px;
    font-size: 0.9rem;
  }
  
  .stat-item-epic {
    padding: 16px;
  }
  
  .stat-number {
    font-size: 2rem;
  }
  
  .stat-icon {
    width: 50px;
    height: 50px;
    font-size: 20px;
  }
  
  .hero-badge-epic {
    padding: 10px 20px;
  }
  
  .hero-badge-epic .badge-text {
    font-size: 12px;
  }
  
  .scroll-indicator {
    bottom: 20px;
  }
  
  .scroll-line {
    height: 40px;
  }
  
  .scroll-text {
    font-size: 12px;
  }
}

/* Mode Paysage Mobile */
@media (max-width: 650px) and (orientation: landscape) {
  .about-hero-masterpiece {
    min-height: 70vh;
  }
  
  .hero-title-epic {
    font-size: clamp(2rem, 5vw, 3rem);
    margin-bottom: 16px;
  }
  
  .hero-subtitle-epic {
    font-size: 1rem;
    margin-bottom: 24px;
  }
  
  .hero-description-epic {
    margin-bottom: 32px;
  }
  
  .hero-cta-epic {
    margin-bottom: 40px;
  }
  
  .stats-container {
    gap: 16px;
  }
  
  .stat-item-epic {
    padding: 16px;
  }
  
  .stat-number {
    font-size: 2rem;
  }
}

/* ===== STYLES CINÉMATOGRAPHIQUES IMMERSIFS ===== */

/* Section Cinématographique */
.cinematic-story {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: 
    radial-gradient(circle at 30% 20%, rgba(255, 145, 0, 0.2) 0%, transparent 50%),
    radial-gradient(circle at 70% 80%, rgba(8, 0, 84, 0.3) 0%, transparent 50%),
    linear-gradient(135deg, #080054 0%, #1a1a7a 25%, #ff9100 50%, #080054 75%, #1a1a7a 100%);
  background-size: 100% 100%, 100% 100%, 400% 400%;
  animation: cinematicBackgroundShift 20s ease infinite;
}

@keyframes cinematicBackgroundShift {
  0%, 100% {
    background-size: 100% 100%, 100% 100%, 400% 400%;
  }
  50% {
    background-size: 120% 120%, 120% 120%, 450% 450%;
  }
}

/* Background Cinématographique */
.story-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.story-video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  z-index: 2;
}

/* Système de Particules Story */
.story-particles-system {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.story-particle {
  position: absolute;
  border-radius: 50%;
  animation: storyParticleFloat 25s linear infinite;
}

.story-particle-1 {
  width: 6px;
  height: 6px;
  background: radial-gradient(circle, #ff9100, transparent);
  top: 10%;
  left: 20%;
  animation-delay: 0s;
  animation-duration: 30s;
}

.story-particle-2 {
  width: 8px;
  height: 8px;
  background: radial-gradient(circle, #ffffff, transparent);
  top: 60%;
  right: 25%;
  animation-delay: 5s;
  animation-duration: 28s;
}

.story-particle-3 {
  width: 5px;
  height: 5px;
  background: radial-gradient(circle, #ff6b35, transparent);
  top: 80%;
  left: 60%;
  animation-delay: 10s;
  animation-duration: 32s;
}

.story-particle-4 {
  width: 7px;
  height: 7px;
  background: radial-gradient(circle, #ff9100, transparent);
  top: 30%;
  right: 60%;
  animation-delay: 15s;
  animation-duration: 26s;
}

.story-particle-5 {
  width: 4px;
  height: 4px;
  background: radial-gradient(circle, #ffffff, transparent);
  top: 70%;
  left: 10%;
  animation-delay: 20s;
  animation-duration: 34s;
}

.story-particle-6 {
  width: 9px;
  height: 9px;
  background: radial-gradient(circle, #ff6b35, transparent);
  top: 40%;
  right: 10%;
  animation-delay: 25s;
  animation-duration: 29s;
}

@keyframes storyParticleFloat {
  0% {
    transform: translateY(0px) translateX(0px) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(-100vh) translateX(30px) rotate(360deg);
    opacity: 0;
  }
}

/* Système de Gradients Story */
.story-gradient-layers {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.story-gradient {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0.4;
  animation: storyGradientShift 18s ease-in-out infinite;
}

.story-gradient-1 {
  background: radial-gradient(circle at 25% 25%, rgba(255, 145, 0, 0.3) 0%, transparent 60%);
  animation-delay: 0s;
}

.story-gradient-2 {
  background: radial-gradient(circle at 75% 75%, rgba(8, 0, 84, 0.4) 0%, transparent 55%);
  animation-delay: 6s;
}

.story-gradient-3 {
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
  animation-delay: 12s;
}

@keyframes storyGradientShift {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    opacity: 0.4;
  }
  33% {
    transform: scale(1.1) rotate(120deg);
    opacity: 0.6;
  }
  66% {
    transform: scale(0.9) rotate(240deg);
    opacity: 0.5;
  }
}

/* Badge Cinématographique */
.story-badge-cinematic {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(30px);
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 50px;
  padding: 16px 32px;
  margin-bottom: 32px;
  position: relative;
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.story-badge-cinematic:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.05) translateY(-5px);
  box-shadow: 0 20px 40px rgba(255, 145, 0, 0.3);
}

.badge-glow-effect {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, rgba(255, 145, 0, 0.3), rgba(255, 255, 255, 0.1));
  border-radius: 50px;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.story-badge-cinematic:hover .badge-glow-effect {
  opacity: 1;
}

.badge-icon-cinematic {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #ff9100, #ff6b35);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 16px;
  position: relative;
  z-index: 2;
}

.icon-pulse-effect {
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  border: 2px solid rgba(255, 145, 0, 0.5);
  border-radius: 50%;
  animation: iconPulse 2s ease-in-out infinite;
}

.badge-text-cinematic {
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.5px;
  color: white;
  position: relative;
  z-index: 2;
}

.badge-shine-effect {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: badgeShine 3s ease-in-out infinite;
}

@keyframes badgeShine {
  0% { left: -100%; }
  50% { left: 100%; }
  100% { left: 100%; }
}

/* Titre Cinématographique */
.story-title-cinematic {
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 32px;
  text-align: center;
  perspective: 1000px;
}

.title-line-cinematic {
  display: block;
  position: relative;
  animation: titleSlideInCinematic 1.5s ease-out forwards;
  opacity: 0;
  transform: translateY(100px) rotateX(90deg);
}

.title-line-cinematic:nth-child(1) { animation-delay: 0.3s; }
.title-line-cinematic:nth-child(2) { animation-delay: 0.6s; }
.title-line-cinematic:nth-child(3) { animation-delay: 0.9s; }

@keyframes titleSlideInCinematic {
  to {
    opacity: 1;
    transform: translateY(0) rotateX(0deg);
  }
}

.highlight-cinematic {
  background: linear-gradient(135deg, #ff9100, #ff6b35, #ffffff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Sous-titre Cinématographique */
.story-subtitle-cinematic {
  font-size: 1.8rem;
  font-weight: 600;
  margin-bottom: 40px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}

.subtitle-word-cinematic {
  position: relative;
  display: inline-block;
  padding: 12px 24px;
  border-radius: 25px;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  cursor: pointer;
}

.subtitle-word-cinematic:hover {
  transform: scale(1.1) rotateY(15deg);
  filter: drop-shadow(0 0 20px #ff9100);
}

.subtitle-separator-cinematic {
  font-size: 2rem;
  color: #ff9100;
  animation: separatorPulse 2s ease-in-out infinite;
}

/* Timeline Cinématographique */
.cinematic-timeline {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}

.timeline-track {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #ff9100, #ff6b35, #ff9100);
  transform: translateX(-50%);
  border-radius: 2px;
  z-index: 1;
}

.timeline-progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background: linear-gradient(180deg, #ffffff, #ff9100);
  border-radius: 2px;
  animation: timelineProgress 8s ease-out forwards;
}

@keyframes timelineProgress {
  to {
    height: 100%;
  }
}

/* Chapitres Cinématographiques */
.timeline-chapter {
  position: relative;
  margin-bottom: 120px;
  z-index: 2;
}

.chapter-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  opacity: 0;
  transition: all 0.3s ease;
}

.timeline-chapter:hover .chapter-background {
  opacity: 1;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 40px rgba(255, 145, 0, 0.2);
}

.chapter-glow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 145, 0, 0.1), transparent);
  border-radius: 24px;
  opacity: 0;
  animation: chapterGlow 4s ease-in-out infinite;
}

@keyframes chapterGlow {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

.chapter-particles {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.mini-sparkle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #ff9100;
  border-radius: 50%;
  animation: miniSparkleFloat 3s ease-in-out infinite;
}

.mini-sparkle:nth-child(1) {
  top: 20%;
  left: 20%;
  animation-delay: 0s;
}

.mini-sparkle:nth-child(2) {
  top: 60%;
  right: 30%;
  animation-delay: 1s;
}

.mini-sparkle:nth-child(3) {
  bottom: 30%;
  left: 60%;
  animation-delay: 2s;
}

@keyframes miniSparkleFloat {
  0%, 100% { 
    transform: translateY(0px) scale(1);
    opacity: 0.6;
  }
  50% { 
    transform: translateY(-20px) scale(1.5);
    opacity: 1;
  }
}

.chapter-content {
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 40px;
  position: relative;
  z-index: 2;
}

.timeline-chapter:nth-child(even) .chapter-content {
  flex-direction: row-reverse;
}

.chapter-number {
  font-size: 4rem;
  font-weight: 900;
  background: linear-gradient(135deg, #ff9100, #ffffff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  min-width: 120px;
  text-align: center;
}

.chapter-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #ff9100, #ff6b35);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 32px;
  position: relative;
  animation: chapterIconFloat 4s ease-in-out infinite;
}

@keyframes chapterIconFloat {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

.icon-aura {
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  border: 2px solid rgba(255, 145, 0, 0.3);
  border-radius: 50%;
  animation: iconAuraPulse 3s ease-in-out infinite;
}

@keyframes iconAuraPulse {
  0%, 100% { 
    transform: scale(1);
    opacity: 0.5;
  }
  50% { 
    transform: scale(1.2);
    opacity: 1;
  }
}

.chapter-text {
  flex: 1;
}

.chapter-title {
  font-size: 2.5rem;
  font-weight: 800;
  margin-bottom: 16px;
  background: linear-gradient(135deg, #ffffff, #ff9100);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.chapter-description {
  font-size: 1.2rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 24px;
}

.highlight-text {
  background: linear-gradient(135deg, #ff9100, #ffffff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
}

.chapter-stats {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}

.stat-item {
  text-align: center;
}

.stat-number {
  display: block;
  font-size: 2rem;
  font-weight: 900;
  background: linear-gradient(135deg, #ff9100, #ffffff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 8px;
}

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

/* Valeurs Cinématographiques */
.values-cinematic {
  position: relative;
  margin: 80px 0;
  padding: 60px 0;
}

.values-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 32px;
  opacity: 0;
  transition: all 0.3s ease;
}

.values-cinematic:hover .values-background {
  opacity: 1;
}

.values-glow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 145, 0, 0.1), transparent);
  border-radius: 32px;
  opacity: 0;
  animation: valuesGlow 6s ease-in-out infinite;
}

@keyframes valuesGlow {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

.values-particles {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.value-sparkle {
  position: absolute;
  width: 6px;
  height: 6px;
  background: #ff9100;
  border-radius: 50%;
  animation: valueSparkleFloat 4s ease-in-out infinite;
}

.value-sparkle:nth-child(1) {
  top: 20%;
  left: 15%;
  animation-delay: 0s;
}

.value-sparkle:nth-child(2) {
  top: 60%;
  right: 20%;
  animation-delay: 1s;
}

.value-sparkle:nth-child(3) {
  bottom: 30%;
  left: 70%;
  animation-delay: 2s;
}

.value-sparkle:nth-child(4) {
  top: 40%;
  right: 60%;
  animation-delay: 3s;
}

@keyframes valueSparkleFloat {
  0%, 100% { 
    transform: translateY(0px) scale(1);
    opacity: 0.7;
  }
  50% { 
    transform: translateY(-25px) scale(1.3);
    opacity: 1;
  }
}

.values-title-cinematic {
  font-size: 3rem;
  font-weight: 900;
  text-align: center;
  margin-bottom: 60px;
  background: linear-gradient(135deg, #ffffff, #ff9100);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
  z-index: 2;
}

.values-grid-cinematic {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 40px;
  position: relative;
  z-index: 2;
}

.value-item-cinematic {
  position: relative;
  text-align: center;
  padding: 40px 20px;
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.value-item-cinematic:hover {
  transform: translateY(-20px) scale(1.05);
}

.value-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  opacity: 0;
  transition: all 0.3s ease;
}

.value-item-cinematic:hover .value-background {
  opacity: 1;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 40px rgba(255, 145, 0, 0.2);
}

.value-glow-effect {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 145, 0, 0.1), transparent);
  border-radius: 20px;
  opacity: 0;
  animation: valueGlowEffect 5s ease-in-out infinite;
}

@keyframes valueGlowEffect {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

.value-icon-cinematic {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #ff9100, #ff6b35);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 32px;
  margin: 0 auto 24px;
  position: relative;
  animation: valueIconFloat 4s ease-in-out infinite;
}

@keyframes valueIconFloat {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

.icon-aura-effect {
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  border: 2px solid rgba(255, 145, 0, 0.3);
  border-radius: 50%;
  animation: iconAuraEffect 3s ease-in-out infinite;
}

@keyframes iconAuraEffect {
  0%, 100% { 
    transform: scale(1);
    opacity: 0.5;
  }
  50% { 
    transform: scale(1.2);
    opacity: 1;
  }
}

.value-name-cinematic {
  font-size: 1.8rem;
  font-weight: 800;
  margin-bottom: 16px;
  background: linear-gradient(135deg, #ffffff, #ff9100);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
  z-index: 2;
}

.value-description-cinematic {
  font-size: 1.1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
  position: relative;
  z-index: 2;
}

.value-highlight {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 145, 0, 0.05), transparent);
  border-radius: 20px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.value-item-cinematic:hover .value-highlight {
  opacity: 1;
}

/* CTA Cinématographique */
.story-cta-cinematic {
  position: relative;
  margin-top: 80px;
  padding: 60px 0;
}

.cta-background-cinematic {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(30px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 32px;
  opacity: 0;
  transition: all 0.3s ease;
}

.story-cta-cinematic:hover .cta-background-cinematic {
  opacity: 1;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 30px 60px rgba(255, 145, 0, 0.2);
}

.cta-glow-effect {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 145, 0, 0.1), transparent);
  border-radius: 32px;
  opacity: 0;
  animation: ctaGlowEffect 8s ease-in-out infinite;
}

@keyframes ctaGlowEffect {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

.cta-particles-effect {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.cta-content-cinematic {
  position: relative;
  z-index: 2;
  text-align: center;
}

.cta-title-cinematic {
  font-size: 3rem;
  font-weight: 900;
  margin-bottom: 24px;
  background: linear-gradient(135deg, #ffffff, #ff9100);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.cta-subtitle-cinematic {
  font-size: 1.3rem;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 40px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.cta-buttons-cinematic {
  display: flex;
  gap: 32px;
  justify-content: center;
  flex-wrap: wrap;
}

.cta-btn-cinematic {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 20px 40px;
  border-radius: 50px;
  font-weight: 800;
  font-size: 1.2rem;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.cta-primary-cinematic {
  background: linear-gradient(135deg, #ff9100, #ff6b35);
  color: white;
  box-shadow: 0 15px 35px rgba(255, 145, 0, 0.4);
}

.cta-primary-cinematic:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 25px 50px rgba(255, 145, 0, 0.6);
}

.cta-secondary-cinematic {
  background: rgba(255, 255, 255, 0.1);
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(20px);
}

.cta-secondary-cinematic:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: white;
  transform: translateY(-8px);
  box-shadow: 0 25px 50px rgba(255, 255, 255, 0.2);
}

.btn-text {
  position: relative;
  z-index: 2;
}

.btn-glow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, rgba(255, 255, 255, 0.1), transparent);
  border-radius: 50px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.cta-btn-cinematic:hover .btn-glow {
  opacity: 1;
}

.btn-trail {
  position: absolute;
  top: 0;
  left: -10px;
  width: 20px;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.cta-btn-cinematic:hover .btn-trail {
  opacity: 1;
}

/* ===== STYLES PROPRIÉTAIRE ÉLÉGANT ===== */

/* Section Propriétaire Élégante */
.owner-elegant {
  position: relative;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  overflow: hidden;
}

.owner-elegant::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 80%, rgba(255, 145, 0, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(8, 0, 84, 0.05) 0%, transparent 50%);
  pointer-events: none;
}

/* Badge Élégant */
.owner-badge-elegant {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 145, 0, 0.2);
  border-radius: 30px;
  padding: 12px 24px;
  margin-bottom: 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.badge-icon-elegant {
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, #ff9100, #ff6b35);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 12px;
}

.badge-text-elegant {
  font-weight: 600;
  font-size: 14px;
  color: #1a202c;
  letter-spacing: 0.5px;
}

/* Titre Élégant */
.owner-title-elegant {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 24px;
  color: #1a202c;
  text-align: center;
}

.title-accent {
  background: linear-gradient(135deg, #ff9100, #ff6b35);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.owner-subtitle-elegant {
  font-size: 1.25rem;
  color: #4a5568;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
  text-align: center;
}

/* Showcase Élégant */
.owner-showcase-elegant {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 80px;
  align-items: start;
  margin-top: 80px;
}

/* Card Élégante */
.owner-card-elegant {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 145, 0, 0.1);
  border-radius: 24px;
  padding: 40px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
  text-align: center;
}

/* Photo Élégante */
.owner-photo-elegant {
  position: relative;
  margin-bottom: 32px;
}

.photo-frame {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid rgba(255, 145, 0, 0.2);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.photo-frame:hover img {
  transform: scale(1.05);
}

.photo-overlay-elegant {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(8, 0, 84, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.photo-frame:hover .photo-overlay-elegant {
  opacity: 1;
}

.overlay-content-elegant {
  color: white;
  text-align: center;
}

.overlay-content-elegant i {
  font-size: 2rem;
  margin-bottom: 8px;
  display: block;
}

.overlay-content-elegant span {
  font-size: 0.9rem;
  font-weight: 600;
}

.owner-badge-elegant {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #ff9100, #ff6b35);
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(255, 145, 0, 0.3);
}

.owner-badge-elegant i {
  margin-right: 6px;
}

/* Stats Élégantes */
.owner-stats-elegant {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  margin: 32px 0;
  flex-wrap: wrap;
}

.stat-item-elegant {
  text-align: center;
  min-width: 100px;
}

.stat-number-elegant {
  font-size: 2rem;
  font-weight: 800;
  background: linear-gradient(135deg, #ff9100, #ff6b35);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 4px;
}

.stat-label-elegant {
  font-size: 0.8rem;
  color: #4a5568;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stat-divider {
  width: 1px;
  height: 40px;
  background: linear-gradient(180deg, transparent, #e2e8f0, transparent);
}

/* Réseaux Sociaux Élégants */
.owner-social-elegant {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
}

.social-btn-elegant {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all 0.2s ease;
  border: 2px solid transparent;
}

.social-btn-elegant.linkedin {
  background: linear-gradient(135deg, #0077b5, #005885);
  color: white;
}

.social-btn-elegant.twitter {
  background: linear-gradient(135deg, #1da1f2, #0d8bd9);
  color: white;
}

.social-btn-elegant.instagram {
  background: linear-gradient(135deg, #e4405f, #c13584);
  color: white;
}

.social-btn-elegant:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  border-color: rgba(255, 145, 0, 0.3);
}

/* Contenu Élégant */
.owner-content-elegant {
  padding-left: 40px;
}

.owner-header-elegant {
  margin-bottom: 40px;
}

.owner-name-elegant {
  font-size: 2.5rem;
  font-weight: 800;
  color: #1a202c;
  margin-bottom: 8px;
}

.owner-title-elegant {
  font-size: 1.2rem;
  color: #ff9100;
  font-weight: 600;
  margin-bottom: 16px;
}

.owner-credentials-elegant {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.credential-elegant {
  background: rgba(255, 145, 0, 0.1);
  color: #ff9100;
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 0.85rem;
  font-weight: 600;
  border: 1px solid rgba(255, 145, 0, 0.2);
}

/* Citation Élégante */
.owner-quote-elegant {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 145, 0, 0.1);
  border-radius: 20px;
  padding: 32px;
  margin: 40px 0;
  position: relative;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
}

.quote-icon-elegant {
  position: absolute;
  top: -15px;
  left: 32px;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #ff9100, #ff6b35);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.2rem;
}

.quote-text-elegant {
  font-size: 1.1rem;
  line-height: 1.8;
  color: #2d3748;
  font-style: italic;
  margin: 0;
  padding-top: 16px;
}

/* Biographie Élégante */
.owner-biography-elegant {
  margin: 40px 0;
}

.bio-section-elegant {
  margin-bottom: 32px;
}

.bio-title-elegant {
  font-size: 1.3rem;
  font-weight: 700;
  color: #1a202c;
  margin-bottom: 12px;
  position: relative;
  padding-left: 20px;
}

.bio-title-elegant::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 20px;
  background: linear-gradient(135deg, #ff9100, #ff6b35);
  border-radius: 2px;
}

.bio-text-elegant {
  font-size: 1rem;
  line-height: 1.7;
  color: #4a5568;
  margin: 0;
}

/* Réalisations Élégantes */
.owner-achievements-elegant {
  margin-top: 40px;
}

.achievements-title-elegant {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1a202c;
  margin-bottom: 24px;
  text-align: center;
}

.achievements-grid-elegant {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.achievement-item-elegant {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 145, 0, 0.1);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  transition: all 0.2s ease;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.achievement-item-elegant:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
  border-color: rgba(255, 145, 0, 0.2);
}

.achievement-icon-elegant {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #ff9100, #ff6b35);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.achievement-content-elegant {
  flex: 1;
}

.achievement-title-elegant {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1a202c;
  margin-bottom: 8px;
}

.achievement-desc-elegant {
  font-size: 0.9rem;
  color: #4a5568;
  line-height: 1.5;
  margin: 0;
}

/* ===== RESPONSIVE PROPRIÉTAIRE ÉLÉGANT ===== */

/* Tablettes */
@media (max-width: 1024px) {
  .owner-showcase-elegant {
    grid-template-columns: 1fr;
    gap: 60px;
  }
  
  .owner-content-elegant {
    padding-left: 0;
  }
  
  .owner-name-elegant {
    font-size: 2rem;
  }
  
  .owner-title-elegant {
    font-size: 1.1rem;
  }
}

/* Mobile */
@media (max-width: 650px) {
  .owner-elegant {
    padding: 40px 0;
  }
  
  .owner-title-elegant {
    font-size: clamp(2rem, 5vw, 2.5rem);
  }
  
  .owner-subtitle-elegant {
    font-size: 1.1rem;
  }
  
  .owner-showcase-elegant {
    gap: 40px;
    margin-top: 40px;
  }
  
  .owner-card-elegant {
    padding: 24px;
  }
  
  .photo-frame {
    width: 150px;
    height: 150px;
  }
  
  .owner-stats-elegant {
    gap: 16px;
    margin: 24px 0;
  }
  
  .stat-number-elegant {
    font-size: 1.5rem;
  }
  
  .stat-divider {
    display: none;
  }
  
  .owner-name-elegant {
    font-size: 1.8rem;
    text-align: center;
  }
  
  .owner-title-elegant {
    font-size: 1rem;
    text-align: center;
  }
  
  .owner-credentials-elegant {
    justify-content: center;
  }
  
  .owner-quote-elegant {
    padding: 24px;
    margin: 24px 0;
  }
  
  .quote-icon-elegant {
    left: 24px;
  }
  
  .achievements-grid-elegant {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .achievement-item-elegant {
    padding: 20px;
  }
}

/* Mobile Petit */
@media (max-width: 480px) {
  .owner-badge-elegant {
    padding: 10px 20px;
    font-size: 12px;
  }
  
  .badge-icon-elegant {
    width: 20px;
    height: 20px;
    font-size: 10px;
  }
  
  .owner-card-elegant {
    padding: 20px;
  }
  
  .photo-frame {
    width: 120px;
    height: 120px;
  }
  
  .owner-stats-elegant {
    flex-direction: column;
    gap: 12px;
  }
  
  .stat-item-elegant {
    min-width: auto;
  }
  
  .owner-social-elegant {
    gap: 12px;
  }
  
  .social-btn-elegant {
    width: 40px;
    height: 40px;
    font-size: 0.9rem;
  }
  
  .owner-name-elegant {
    font-size: 1.5rem;
  }
  
  .owner-quote-elegant {
    padding: 20px;
  }
  
  .quote-text-elegant {
    font-size: 1rem;
  }
  
  .bio-title-elegant {
    font-size: 1.1rem;
  }
  
  .bio-text-elegant {
    font-size: 0.9rem;
  }
  
  .achievement-item-elegant {
    padding: 16px;
    flex-direction: column;
    text-align: center;
  }
  
.achievement-icon-elegant {
  width: 40px;
  height: 40px;
  font-size: 1rem;
  margin: 0 auto;
}
}

/* ===== STYLES ÉQUIPE PROFESSIONNELLE ===== */

/* Section Équipe Professionnelle */
.team-professional {
  position: relative;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  overflow: hidden;
}

.team-professional::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 30% 20%, rgba(255, 145, 0, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 70% 80%, rgba(8, 0, 84, 0.03) 0%, transparent 50%);
  pointer-events: none;
}

/* Badge Équipe */
.team-badge-elegant {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 145, 0, 0.2);
  border-radius: 30px;
  padding: 12px 24px;
  margin-bottom: 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.team-badge-elegant .badge-icon-elegant {
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, #ff9100, #ff6b35);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 12px;
}

.team-badge-elegant .badge-text-elegant {
  font-weight: 600;
  font-size: 14px;
  color: #1a202c;
  letter-spacing: 0.5px;
}

/* Titre Équipe */
.team-title-elegant {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 24px;
  color: #1a202c;
  text-align: center;
}

.team-subtitle-elegant {
  font-size: 1.25rem;
  color: #4a5568;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
  text-align: center;
}

/* Stats Équipe */
.team-stats-elegant {
  margin: 60px 0;
}

.stats-grid-elegant {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 32px;
  max-width: 1000px;
  margin: 0 auto;
}

.team-stats-elegant .stat-item-elegant {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 145, 0, 0.1);
  border-radius: 20px;
  padding: 32px 24px;
  text-align: center;
  transition: all 0.2s ease;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.team-stats-elegant .stat-item-elegant:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
  border-color: rgba(255, 145, 0, 0.2);
}

.team-stats-elegant .stat-icon-elegant {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #ff9100, #ff6b35);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.5rem;
  margin: 0 auto 16px;
}

.team-stats-elegant .stat-content-elegant {
  text-align: center;
}

.team-stats-elegant .stat-number-elegant {
  font-size: 2.5rem;
  font-weight: 800;
  background: linear-gradient(135deg, #ff9100, #ff6b35);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 8px;
}

.team-stats-elegant .stat-label-elegant {
  font-size: 0.9rem;
  color: #4a5568;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Categories Équipe */
.team-category-elegant {
  margin: 80px 0;
}

.category-title-elegant {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 1.8rem;
  font-weight: 700;
  color: #1a202c;
  margin-bottom: 40px;
  text-align: center;
  justify-content: center;
}

.category-icon-elegant {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #ff9100, #ff6b35);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.2rem;
}

/* Grid Équipe */
.team-grid-elegant {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Cartes Membres */
.member-card-elegant {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 145, 0, 0.1);
  border-radius: 24px;
  padding: 32px;
  text-align: center;
  transition: all 0.2s ease;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
  position: relative;
}

.member-card-elegant:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  border-color: rgba(255, 145, 0, 0.2);
}

.member-card-elegant.featured {
  border: 2px solid rgba(255, 145, 0, 0.3);
  background: linear-gradient(135deg, rgba(255, 145, 0, 0.05), rgba(255, 255, 255, 0.9));
}

/* Photo Membre */
.member-photo-elegant {
  position: relative;
  margin-bottom: 24px;
}

.photo-frame-elegant {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid rgba(255, 145, 0, 0.2);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.photo-frame-elegant img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.photo-frame-elegant:hover img {
  transform: scale(1.05);
}

.photo-overlay-elegant {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(8, 0, 84, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.photo-frame-elegant:hover .photo-overlay-elegant {
  opacity: 1;
}

.overlay-actions-elegant {
  display: flex;
  gap: 12px;
}

.action-btn-elegant {
  width: 40px;
  height: 40px;
  background: rgba(255, 145, 0, 0.9);
  border: none;
  border-radius: 50%;
  color: white;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-btn-elegant:hover {
  background: #ff9100;
  transform: scale(1.05);
}

.member-badge-elegant {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #ff9100, #ff6b35);
  color: white;
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 0.7rem;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(255, 145, 0, 0.3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Info Membre */
.member-info-elegant {
  text-align: center;
}

.member-name-elegant {
  font-size: 1.4rem;
  font-weight: 700;
  color: #1a202c;
  margin-bottom: 8px;
}

.member-title-elegant {
  font-size: 1rem;
  color: #ff9100;
  font-weight: 600;
  margin-bottom: 16px;
}

/* Expertise */
.member-expertise-elegant {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.expertise-tag-elegant {
  background: rgba(255, 145, 0, 0.1);
  color: #ff9100;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
  border: 1px solid rgba(255, 145, 0, 0.2);
}

/* Stats Membre */
.member-stats-elegant {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 20px;
}

.member-stat-elegant {
  text-align: center;
}

.stat-value-elegant {
  font-size: 1.2rem;
  font-weight: 700;
  background: linear-gradient(135deg, #ff9100, #ff6b35);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: block;
}

.stat-label-elegant {
  font-size: 0.7rem;
  color: #4a5568;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Social Membre */
.member-social-elegant {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.member-social-elegant .social-btn-elegant {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all 0.2s ease;
  border: 2px solid transparent;
}

.member-social-elegant .social-btn-elegant.linkedin {
  background: linear-gradient(135deg, #0077b5, #005885);
  color: white;
}

.member-social-elegant .social-btn-elegant.twitter {
  background: linear-gradient(135deg, #1da1f2, #0d8bd9);
  color: white;
}

.member-social-elegant .social-btn-elegant.instagram {
  background: linear-gradient(135deg, #e4405f, #c13584);
  color: white;
}

.member-social-elegant .social-btn-elegant:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
  border-color: rgba(255, 145, 0, 0.3);
}

/* ===== RESPONSIVE ÉQUIPE PROFESSIONNELLE ===== */

/* Tablettes */
@media (max-width: 1024px) {
  .team-grid-elegant {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
  }
  
  .stats-grid-elegant {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 24px;
  }
  
  .category-title-elegant {
    font-size: 1.5rem;
  }
  
  .member-name-elegant {
    font-size: 1.2rem;
  }
}

/* Mobile */
@media (max-width: 650px) {
  .team-professional {
    padding: 40px 0;
  }
  
  .team-title-elegant {
    font-size: clamp(2rem, 5vw, 2.5rem);
  }
  
  .team-subtitle-elegant {
    font-size: 1.1rem;
  }
  
  .team-stats-elegant {
    margin: 40px 0;
  }
  
  .stats-grid-elegant {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
  }
  
  .team-stats-elegant .stat-item-elegant {
    padding: 24px 16px;
  }
  
  .team-stats-elegant .stat-icon-elegant {
    width: 50px;
    height: 50px;
    font-size: 1.2rem;
  }
  
  .team-stats-elegant .stat-number-elegant {
    font-size: 2rem;
  }
  
  .team-category-elegant {
    margin: 60px 0;
  }
  
  .category-title-elegant {
    font-size: 1.3rem;
    flex-direction: column;
    gap: 12px;
  }
  
  .category-icon-elegant {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }
  
  .team-grid-elegant {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .member-card-elegant {
    padding: 24px;
  }
  
  .photo-frame-elegant {
    width: 100px;
    height: 100px;
  }
  
  .member-name-elegant {
    font-size: 1.1rem;
  }
  
  .member-title-elegant {
    font-size: 0.9rem;
  }
  
  .member-stats-elegant {
    gap: 16px;
  }
  
  .stat-value-elegant {
    font-size: 1rem;
  }
  
  .member-social-elegant .social-btn-elegant {
    width: 32px;
    height: 32px;
    font-size: 0.9rem;
  }
}

/* Mobile Petit */
@media (max-width: 480px) {
  .team-badge-elegant {
    padding: 10px 20px;
    font-size: 12px;
  }
  
  .team-badge-elegant .badge-icon-elegant {
    width: 20px;
    height: 20px;
    font-size: 10px;
  }
  
  .stats-grid-elegant {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  
  .team-stats-elegant .stat-item-elegant {
    padding: 20px 12px;
  }
  
  .team-stats-elegant .stat-icon-elegant {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }
  
  .team-stats-elegant .stat-number-elegant {
    font-size: 1.5rem;
  }
  
  .team-stats-elegant .stat-label-elegant {
    font-size: 0.8rem;
  }
  
  .category-title-elegant {
    font-size: 1.1rem;
  }
  
  .member-card-elegant {
    padding: 20px;
  }
  
  .photo-frame-elegant {
    width: 80px;
    height: 80px;
  }
  
  .member-badge-elegant {
    font-size: 0.6rem;
    padding: 4px 8px;
  }
  
  .member-name-elegant {
    font-size: 1rem;
  }
  
  .member-title-elegant {
    font-size: 0.8rem;
  }
  
  .expertise-tag-elegant {
    font-size: 0.7rem;
    padding: 3px 8px;
  }
  
  .member-stats-elegant {
    gap: 12px;
  }
  
  .stat-value-elegant {
    font-size: 0.9rem;
  }
  
  .stat-label-elegant {
    font-size: 0.6rem;
  }
  
  .member-social-elegant {
    gap: 8px;
  }
  
  .member-social-elegant .social-btn-elegant {
    width: 28px;
    height: 28px;
    font-size: 0.8rem;
  }
}

/* ===== STYLES ORGANIGRAMME PROFESSIONNEL ===== */

/* Section Organigramme Professionnel */
.org-chart-professional {
  position: relative;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  overflow: hidden;
}

.org-chart-professional::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 30%, rgba(255, 145, 0, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(8, 0, 84, 0.03) 0%, transparent 50%);
  pointer-events: none;
}

/* Badge Organigramme */
.org-badge-elegant {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 145, 0, 0.2);
  border-radius: 30px;
  padding: 12px 24px;
  margin-bottom: 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.org-badge-elegant .badge-icon-elegant {
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, #ff9100, #ff6b35);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 12px;
}

.org-badge-elegant .badge-text-elegant {
  font-weight: 600;
  font-size: 14px;
  color: #1a202c;
  letter-spacing: 0.5px;
}

/* Titre Organigramme */
.org-title-elegant {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 24px;
  color: #1a202c;
  text-align: center;
}

.org-subtitle-elegant {
  font-size: 1.25rem;
  color: #4a5568;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
  text-align: center;
}

/* Navigation Organigramme */
.org-navigation-elegant {
  margin: 60px 0;
  text-align: center;
}

.nav-tabs-elegant {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.nav-tab-elegant {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 145, 0, 0.2);
  border-radius: 16px;
  padding: 12px 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 600;
  color: #4a5568;
}

.nav-tab-elegant:hover {
  background: rgba(255, 145, 0, 0.1);
  border-color: rgba(255, 145, 0, 0.3);
  color: #ff9100;
  transform: translateY(-2px);
}

.nav-tab-elegant.active {
  background: linear-gradient(135deg, #ff9100, #ff6b35);
  color: white;
  border-color: #ff9100;
  box-shadow: 0 8px 24px rgba(255, 145, 0, 0.3);
}

.tab-icon-elegant {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.tab-text-elegant {
  font-size: 14px;
}

.nav-info-elegant {
  color: #6b7280;
  font-size: 0.9rem;
  font-style: italic;
}

/* Container Organigramme */
.org-chart-container-elegant {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 20px;
}

/* Niveaux Organigramme */
.org-level-elegant {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-bottom: 60px;
  flex-wrap: wrap;
}

.org-level-elegant.level-1 {
  margin-bottom: 80px;
}

.org-level-elegant.level-2 {
  gap: 60px;
}

/* Cartes Organigramme */
.org-card-elegant {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 145, 0, 0.1);
  border-radius: 24px;
  padding: 32px;
  text-align: center;
  transition: all 0.2s ease;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
  position: relative;
  min-width: 280px;
}

.org-card-elegant:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  border-color: rgba(255, 145, 0, 0.2);
}

.ceo-card-elegant {
  border: 2px solid rgba(255, 145, 0, 0.3);
  background: linear-gradient(135deg, rgba(255, 145, 0, 0.05), rgba(255, 255, 255, 0.9));
  min-width: 320px;
}

.director-card-elegant {
  min-width: 260px;
}

/* Background des Cartes */
.card-background-elegant {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 24px;
  overflow: hidden;
  z-index: 1;
}

.card-glow-elegant {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 145, 0, 0.1) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.org-card-elegant:hover .card-glow-elegant {
  opacity: 1;
}

/* Header des Cartes */
.card-header-elegant {
  position: relative;
  z-index: 2;
  margin-bottom: 24px;
}

.member-photo-elegant {
  position: relative;
  display: inline-block;
}

.photo-frame-elegant {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 0 auto;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid rgba(255, 145, 0, 0.2);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.ceo-card-elegant .photo-frame-elegant {
  width: 120px;
  height: 120px;
  border: 4px solid rgba(255, 145, 0, 0.3);
}

.photo-frame-elegant img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.photo-frame-elegant:hover img {
  transform: scale(1.05);
}

.photo-badge-elegant {
  position: absolute;
  bottom: -8px;
  right: -8px;
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #ff9100, #ff6b35);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 14px;
  box-shadow: 0 4px 12px rgba(255, 145, 0, 0.3);
  border: 2px solid white;
}

.member-status-elegant {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid white;
}

.member-status-elegant.online {
  background: #10b981;
}

.member-status-elegant.busy {
  background: #f59e0b;
}

/* Contenu des Cartes */
.card-content-elegant {
  position: relative;
  z-index: 2;
  margin-bottom: 24px;
}

.member-name-elegant {
  font-size: 1.3rem;
  font-weight: 700;
  color: #1a202c;
  margin-bottom: 8px;
}

.ceo-card-elegant .member-name-elegant {
  font-size: 1.5rem;
}

.member-title-elegant {
  font-size: 1rem;
  color: #ff9100;
  font-weight: 600;
  margin-bottom: 16px;
}

.member-badges-elegant {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.badge-elegant {
  background: rgba(255, 145, 0, 0.1);
  color: #ff9100;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
  border: 1px solid rgba(255, 145, 0, 0.2);
}

.member-stats-elegant {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.stat-elegant {
  text-align: center;
}

.stat-value-elegant {
  font-size: 1.1rem;
  font-weight: 700;
  background: linear-gradient(135deg, #ff9100, #ff6b35);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: block;
}

.stat-label-elegant {
  font-size: 0.7rem;
  color: #4a5568;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Actions des Cartes */
.card-actions-elegant {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 12px;
}

.action-btn-elegant {
  width: 40px;
  height: 40px;
  background: rgba(255, 145, 0, 0.1);
  border: 1px solid rgba(255, 145, 0, 0.2);
  border-radius: 50%;
  color: #ff9100;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-btn-elegant:hover {
  background: linear-gradient(135deg, #ff9100, #ff6b35);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 145, 0, 0.3);
}

/* Lignes de Connexion */
.org-connections-elegant {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1;
}

.connection-line-elegant {
  position: absolute;
  height: 2px;
  background: linear-gradient(90deg, #ff9100, #080054);
  opacity: 0.3;
}

.line-1 {
  top: 50%;
  left: 50%;
  width: 200px;
  transform: translate(-100%, -50%) rotate(-30deg);
}

.line-2 {
  top: 50%;
  left: 50%;
  width: 200px;
  transform: translate(-50%, -50%);
}

.line-3 {
  top: 50%;
  left: 50%;
  width: 200px;
  transform: translate(0%, -50%) rotate(30deg);
}

/* ===== RESPONSIVE ORGANIGRAMME PROFESSIONNEL ===== */

/* Tablettes */
@media (max-width: 1024px) {
  .org-chart-container-elegant {
    padding: 40px 20px;
  }
  
  .org-level-elegant {
    gap: 30px;
  }
  
  .org-level-elegant.level-2 {
    gap: 40px;
  }
  
  .org-card-elegant {
    min-width: 250px;
    padding: 24px;
  }
  
  .ceo-card-elegant {
    min-width: 280px;
  }
  
  .director-card-elegant {
    min-width: 220px;
  }
  
  .nav-tabs-elegant {
    gap: 12px;
  }
  
  .nav-tab-elegant {
    padding: 10px 16px;
  }
}

/* Mobile */
@media (max-width: 650px) {
  .org-chart-professional {
    padding: 40px 0;
  }
  
  .org-title-elegant {
    font-size: clamp(2rem, 5vw, 2.5rem);
  }
  
  .org-subtitle-elegant {
    font-size: 1.1rem;
  }
  
  .org-navigation-elegant {
    margin: 40px 0;
  }
  
  .nav-tabs-elegant {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
  
  .nav-tab-elegant {
    width: 200px;
    justify-content: center;
  }
  
  .org-chart-container-elegant {
    padding: 30px 10px;
  }
  
  .org-level-elegant {
    flex-direction: column;
    align-items: center;
    gap: 30px;
    margin-bottom: 40px;
  }
  
  .org-level-elegant.level-1 {
    margin-bottom: 50px;
  }
  
  .org-card-elegant {
    min-width: 280px;
    max-width: 320px;
    padding: 24px;
  }
  
  .ceo-card-elegant {
    min-width: 300px;
    max-width: 350px;
  }
  
  .director-card-elegant {
    min-width: 260px;
    max-width: 300px;
  }
  
  .photo-frame-elegant {
    width: 80px;
    height: 80px;
  }
  
  .ceo-card-elegant .photo-frame-elegant {
    width: 100px;
    height: 100px;
  }
  
  .member-name-elegant {
    font-size: 1.1rem;
  }
  
  .ceo-card-elegant .member-name-elegant {
    font-size: 1.3rem;
  }
  
  .member-title-elegant {
    font-size: 0.9rem;
  }
  
  .member-stats-elegant {
    gap: 16px;
  }
  
  .stat-value-elegant {
    font-size: 1rem;
  }
  
  .connection-line-elegant {
    display: none;
  }
}

/* Mobile Petit */
@media (max-width: 480px) {
  .org-badge-elegant {
    padding: 10px 20px;
    font-size: 12px;
  }
  
  .org-badge-elegant .badge-icon-elegant {
    width: 20px;
    height: 20px;
    font-size: 10px;
  }
  
  .nav-tab-elegant {
    width: 180px;
    padding: 8px 12px;
  }
  
  .tab-text-elegant {
    font-size: 12px;
  }
  
  .org-card-elegant {
    min-width: 260px;
    max-width: 300px;
    padding: 20px;
  }
  
  .ceo-card-elegant {
    min-width: 280px;
    max-width: 320px;
  }
  
  .photo-frame-elegant {
    width: 70px;
    height: 70px;
  }
  
  .ceo-card-elegant .photo-frame-elegant {
    width: 90px;
    height: 90px;
  }
  
  .photo-badge-elegant {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }
  
  .member-name-elegant {
    font-size: 1rem;
  }
  
  .ceo-card-elegant .member-name-elegant {
    font-size: 1.2rem;
  }
  
  .member-title-elegant {
    font-size: 0.8rem;
  }
  
  .badge-elegant {
    font-size: 0.7rem;
    padding: 3px 8px;
  }
  
  .member-stats-elegant {
    gap: 12px;
  }
  
  .stat-value-elegant {
    font-size: 0.9rem;
  }
  
  .stat-label-elegant {
    font-size: 0.6rem;
  }
  
  .action-btn-elegant {
    width: 36px;
    height: 36px;
    font-size: 0.9rem;
  }
}

/* ===== STYLES TÉMOIGNAGES PROFESSIONNELS ===== */

/* Section Témoignages Professionnels */
.testimonials-professional {
  position: relative;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  overflow: hidden;
}

.testimonials-professional::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 30% 20%, rgba(255, 145, 0, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 70% 80%, rgba(8, 0, 84, 0.03) 0%, transparent 50%);
  pointer-events: none;
}

/* Badge Témoignages */
.testimonials-badge-elegant {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 145, 0, 0.2);
  border-radius: 30px;
  padding: 12px 24px;
  margin-bottom: 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.testimonials-badge-elegant .badge-icon-elegant {
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, #ff9100, #ff6b35);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 12px;
}

.testimonials-badge-elegant .badge-text-elegant {
  font-weight: 600;
  font-size: 14px;
  color: #1a202c;
  letter-spacing: 0.5px;
}

/* Titre Témoignages */
.testimonials-title-elegant {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 24px;
  color: #1a202c;
  text-align: center;
}

.testimonials-subtitle-elegant {
  font-size: 1.25rem;
  color: #4a5568;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
  text-align: center;
}

/* Carousel Témoignages */
.testimonials-carousel-elegant {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  overflow: hidden;
}

.testimonial-slide-elegant {
  display: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.testimonial-slide-elegant.active {
  display: block;
  opacity: 1;
}

/* Card Témoignage */
.testimonial-card-elegant {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 145, 0, 0.1);
  border-radius: 24px;
  padding: 40px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
  position: relative;
  text-align: center;
}

.testimonial-card-elegant::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(135deg, #ff9100, #ff6b35);
  border-radius: 26px;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.testimonial-card-elegant:hover::before {
  opacity: 0.1;
}

/* Contenu Témoignage */
.testimonial-content-elegant {
  position: relative;
  z-index: 1;
}

.quote-icon-elegant {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #ff9100, #ff6b35);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.5rem;
  margin: 0 auto 24px;
  box-shadow: 0 8px 24px rgba(255, 145, 0, 0.3);
}

.testimonial-text-elegant {
  font-size: 1.2rem;
  line-height: 1.8;
  color: #2d3748;
  font-style: italic;
  margin-bottom: 32px;
  position: relative;
}

.testimonial-text-elegant::before {
  content: '"';
  font-size: 4rem;
  color: rgba(255, 145, 0, 0.2);
  position: absolute;
  top: -20px;
  left: -20px;
  font-family: serif;
}

.testimonial-text-elegant::after {
  content: '"';
  font-size: 4rem;
  color: rgba(255, 145, 0, 0.2);
  position: absolute;
  bottom: -40px;
  right: -20px;
  font-family: serif;
}

/* Auteur Témoignage */
.testimonial-author-elegant {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.author-photo-elegant {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid rgba(255, 145, 0, 0.2);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.author-photo-elegant img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.author-info-elegant {
  text-align: left;
}

.author-name-elegant {
  font-size: 1.2rem;
  font-weight: 700;
  color: #1a202c;
  margin-bottom: 4px;
}

.author-title-elegant {
  font-size: 0.9rem;
  color: #4a5568;
  margin-bottom: 8px;
}

.author-rating-elegant {
  display: flex;
  gap: 4px;
}

.author-rating-elegant i {
  color: #ff9100;
  font-size: 0.9rem;
}

/* Navigation Témoignages */
.testimonials-nav-elegant {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 40px;
}

.nav-btn-elegant {
  width: 50px;
  height: 50px;
  background: rgba(255, 145, 0, 0.1);
  border: 1px solid rgba(255, 145, 0, 0.2);
  border-radius: 50%;
  color: #ff9100;
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-btn-elegant:hover {
  background: linear-gradient(135deg, #ff9100, #ff6b35);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255, 145, 0, 0.3);
}

.nav-dots-elegant {
  display: flex;
  gap: 12px;
}

.dot-elegant {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 145, 0, 0.2);
  cursor: pointer;
  transition: all 0.2s ease;
}

.dot-elegant.active {
  background: linear-gradient(135deg, #ff9100, #ff6b35);
  transform: scale(1.2);
}

.dot-elegant:hover {
  background: rgba(255, 145, 0, 0.5);
}

/* ===== RESPONSIVE TÉMOIGNAGES PROFESSIONNELS ===== */

/* Tablettes */
@media (max-width: 1024px) {
  .testimonial-card-elegant {
    padding: 32px;
  }
  
  .testimonial-text-elegant {
    font-size: 1.1rem;
  }
  
  .author-photo-elegant {
    width: 70px;
    height: 70px;
  }
  
  .author-name-elegant {
    font-size: 1.1rem;
  }
}

/* Mobile */
@media (max-width: 650px) {
  .testimonials-professional {
    padding: 40px 0;
  }
  
  .testimonials-title-elegant {
    font-size: clamp(2rem, 5vw, 2.5rem);
  }
  
  .testimonials-subtitle-elegant {
    font-size: 1.1rem;
  }
  
  .testimonials-carousel-elegant {
    max-width: 100%;
    padding: 0 20px;
  }
  
  .testimonial-card-elegant {
    padding: 24px;
  }
  
  .quote-icon-elegant {
    width: 50px;
    height: 50px;
    font-size: 1.2rem;
    margin-bottom: 20px;
  }
  
  .testimonial-text-elegant {
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 24px;
  }
  
  .testimonial-text-elegant::before {
    font-size: 3rem;
    top: -15px;
    left: -15px;
  }
  
  .testimonial-text-elegant::after {
    font-size: 3rem;
    bottom: -30px;
    right: -15px;
  }
  
  .testimonial-author-elegant {
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }
  
  .author-info-elegant {
    text-align: center;
  }
  
  .author-photo-elegant {
    width: 60px;
    height: 60px;
  }
  
  .author-name-elegant {
    font-size: 1rem;
  }
  
  .author-title-elegant {
    font-size: 0.8rem;
  }
  
  .nav-btn-elegant {
    width: 44px;
    height: 44px;
    font-size: 1rem;
  }
  
  .nav-dots-elegant {
    gap: 10px;
  }
  
  .dot-elegant {
    width: 10px;
    height: 10px;
  }
}

/* Mobile Petit */
@media (max-width: 480px) {
  .testimonials-badge-elegant {
    padding: 10px 20px;
    font-size: 12px;
  }
  
  .testimonials-badge-elegant .badge-icon-elegant {
    width: 20px;
    height: 20px;
    font-size: 10px;
  }
  
  .testimonials-carousel-elegant {
    padding: 0 10px;
  }
  
  .testimonial-card-elegant {
    padding: 20px;
  }
  
  .quote-icon-elegant {
    width: 45px;
    height: 45px;
    font-size: 1rem;
    margin-bottom: 16px;
  }
  
  .testimonial-text-elegant {
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 20px;
  }
  
  .testimonial-text-elegant::before {
    font-size: 2.5rem;
    top: -10px;
    left: -10px;
  }
  
  .testimonial-text-elegant::after {
    font-size: 2.5rem;
    bottom: -25px;
    right: -10px;
  }
  
  .testimonial-author-elegant {
    gap: 12px;
  }
  
  .author-photo-elegant {
    width: 50px;
    height: 50px;
  }
  
  .author-name-elegant {
    font-size: 0.9rem;
  }
  
  .author-title-elegant {
    font-size: 0.7rem;
  }
  
  .author-rating-elegant i {
    font-size: 0.8rem;
  }
  
  .testimonials-nav-elegant {
    gap: 16px;
    margin-top: 32px;
  }
  
  .nav-btn-elegant {
    width: 40px;
    height: 40px;
    font-size: 0.9rem;
  }
  
  .nav-dots-elegant {
    gap: 8px;
  }
  
  .dot-elegant {
    width: 8px;
    height: 8px;
  }
}

.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: rgba(255, 145, 0, 0.6);
  border-radius: 50%;
  /* animation: floatParticle 20s infinite linear; */
}

@keyframes floatParticle {
  0% {
    transform: translateY(100vh) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(-100vh) rotate(360deg);
    opacity: 0;
  }
}

.hero-gradient-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, rgba(8, 0, 84, 0.8), rgba(255, 145, 0, 0.3));
}

.hero-geometric-shapes {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

.shape {
  position: absolute;
  background: rgba(255, 255, 255, 0.1);
  /* animation: floatShape 15s infinite ease-in-out; */
}

.shape-1 {
  width: 100px;
  height: 100px;
  top: 20%;
  left: 10%;
  border-radius: 50%;
  animation-delay: 0s;
}

.shape-2 {
  width: 60px;
  height: 60px;
  top: 60%;
  right: 15%;
  transform: rotate(45deg);
  animation-delay: 3s;
}

.shape-3 {
  width: 80px;
  height: 80px;
  top: 30%;
  right: 30%;
  border-radius: 20px;
  animation-delay: 6s;
}

.shape-4 {
  width: 40px;
  height: 40px;
  bottom: 20%;
  left: 20%;
  border-radius: 50%;
  animation-delay: 9s;
}

.shape-5 {
  width: 70px;
  height: 70px;
  top: 70%;
  left: 60%;
  transform: rotate(30deg);
  animation-delay: 12s;
}

@keyframes floatShape {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-20px) rotate(180deg);
  }
}

.hero-content {
  position: relative;
  z-index: 10;
  color: white;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50px;
  padding: 12px 24px;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
  transition: all 0.4s ease;
}

.hero-badge:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
}

.badge-icon {
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, #ff9100, #ff6b35);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 12px;
}

.badge-text {
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.5px;
}

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

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

.hero-title {
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 24px;
  text-align: center;
}

.title-line {
  display: block;
  animation: slideInUp 1s ease-out forwards;
  opacity: 0;
  transform: translateY(50px);
}

.title-line:nth-child(1) { animation-delay: 0.2s; }
.title-line:nth-child(2) { animation-delay: 0.4s; }
.title-line:nth-child(3) { animation-delay: 0.6s; }

@keyframes slideInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.highlight-text {
  background: linear-gradient(135deg, #ff9100, #ff6b35, #ffffff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200% 200%;
  /* animation: gradientShift 3s ease infinite; */
}

.hero-subtitle {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 32px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.subtitle-word {
  animation: fadeInScale 1s ease-out forwards;
  opacity: 0;
  transform: scale(0.8);
}

.subtitle-word:nth-child(1) { animation-delay: 0.8s; }
.subtitle-word:nth-child(3) { animation-delay: 1s; }
.subtitle-word:nth-child(5) { animation-delay: 1.2s; }

@keyframes fadeInScale {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.subtitle-separator {
  color: rgba(255, 145, 0, 0.8);
  font-size: 1.2rem;
  animation: pulse 2s infinite;
}

.hero-description {
  font-size: 1.2rem;
  line-height: 1.6;
  max-width: 800px;
  margin: 0 auto 48px;
  text-align: center;
  opacity: 0.9;
}

.hero-cta {
  display: flex;
  gap: 24px;
  justify-content: center;
  margin-bottom: 64px;
  flex-wrap: wrap;
}

.cta-primary, .cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 32px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 1.1rem;
  text-decoration: none;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  overflow: hidden;
}

.cta-primary {
  background: linear-gradient(135deg, #ff9100, #ff6b35);
  color: white;
  box-shadow: 0 8px 25px rgba(255, 145, 0, 0.4);
}

.cta-primary:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 12px 35px rgba(255, 145, 0, 0.6);
}

.cta-secondary {
  background: rgba(255, 255, 255, 0.1);
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
}

.cta-secondary:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: white;
  transform: translateY(-3px);
}

.cta-ripple {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.6s ease;
}

.cta-primary:active .cta-ripple {
  transform: scale(4);
}

.hero-stats {
  display: flex;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
}

.stat-item {
  text-align: center;
  animation: slideInUp 1s ease-out forwards;
  opacity: 0;
  transform: translateY(30px);
}

.stat-item:nth-child(1) { animation-delay: 1.4s; }
.stat-item:nth-child(3) { animation-delay: 1.6s; }
.stat-item:nth-child(5) { animation-delay: 1.8s; }
.stat-item:nth-child(7) { animation-delay: 2s; }

.stat-number {
  font-size: 3rem;
  font-weight: 900;
  background: linear-gradient(135deg, #ff9100, #ffffff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 0.9rem;
  font-weight: 600;
  opacity: 0.8;
  letter-spacing: 0.5px;
}

.stat-divider {
  width: 1px;
  height: 40px;
  background: rgba(255, 255, 255, 0.3);
  margin: 0 24px;
}

.scroll-indicator {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: rgba(255, 255, 255, 0.7);
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  40% {
    transform: translateX(-50%) translateY(-10px);
  }
  60% {
    transform: translateX(-50%) translateY(-5px);
  }
}

.scroll-line {
  width: 2px;
  height: 40px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.7), transparent);
}

.scroll-text {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Section Badge Universel */
.section-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 145, 0, 0.1);
  border: 1px solid rgba(255, 145, 0, 0.3);
  border-radius: 50px;
  padding: 8px 16px;
  margin-bottom: 16px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #ff9100;
}

.section-badge i {
  font-size: 0.8rem;
}

.section-title {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 900;
  line-height: 1.2;
  margin-bottom: 16px;
  text-align: center;
}

.section-subtitle {
  font-size: 1.2rem;
  line-height: 1.6;
  color: #64748b;
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

/* Histoire Cinématographique */
.story-cinematic {
  position: relative;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  overflow: hidden;
}

.story-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

.story-parallax-bg {
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 145, 0, 0.05) 0%, transparent 70%);
  animation: pulse 8s ease-in-out infinite;
}

.story-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, rgba(8, 0, 84, 0.02), rgba(255, 145, 0, 0.02));
}

.story-timeline {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}

.timeline-item {
  display: flex;
  align-items: center;
  margin-bottom: 80px;
  position: relative;
}

.timeline-item:nth-child(even) {
  flex-direction: row-reverse;
}

.timeline-year {
  font-size: 4rem;
  font-weight: 900;
  background: linear-gradient(135deg, #080054, #ff9100);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  min-width: 120px;
  text-align: center;
}

.timeline-card {
  flex: 1;
  background: white;
  border-radius: 24px;
  padding: 32px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 145, 0, 0.1);
  position: relative;
  overflow: hidden;
  transition: all 0.4s ease;
}

.timeline-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 32px 64px rgba(0, 0, 0, 0.15);
}

.timeline-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #ff9100, #080054);
}

.timeline-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #ff9100, #ff6b35);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
  margin-bottom: 20px;
}

.timeline-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: #080054;
  margin-bottom: 12px;
}

.timeline-description {
  font-size: 1rem;
  line-height: 1.6;
  color: #64748b;
  margin-bottom: 20px;
}

.timeline-milestones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.milestone {
  background: rgba(255, 145, 0, 0.1);
  color: #ff9100;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
}

.values-showcase {
  margin-top: 80px;
}

.values-title {
  font-size: 2rem;
  font-weight: 800;
  text-align: center;
  color: #080054;
  margin-bottom: 40px;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
}

.value-item {
  background: white;
  border-radius: 20px;
  padding: 32px 24px;
  text-align: center;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(255, 145, 0, 0.1);
  transition: all 0.4s ease;
}

.value-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.12);
}

.value-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #ff9100, #ff6b35);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 32px;
  margin: 0 auto 20px;
}

.value-name {
  font-size: 1.2rem;
  font-weight: 700;
  color: #080054;
  margin-bottom: 12px;
}

.value-description {
  font-size: 0.9rem;
  line-height: 1.5;
  color: #64748b;
}

/* Propriétaire Épique */
.owner-epic {
  position: relative;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  overflow: hidden;
}

.owner-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

.owner-particles {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="dots" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1" fill="rgba(255,145,0,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23dots)"/></svg>') repeat;
  /* animation: float 20s ease-in-out infinite; */
}

.owner-gradient {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 30% 20%, rgba(255, 145, 0, 0.05) 0%, transparent 50%);
}

.owner-showcase {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 60px;
  align-items: center;
  position: relative;
  z-index: 10;
}

.owner-card {
  background: white;
  border-radius: 32px;
  padding: 0;
  box-shadow: 0 32px 64px rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(255, 145, 0, 0.1);
  overflow: hidden;
  position: relative;
}

.owner-photo-container {
  position: relative;
  margin-bottom: 24px;
}

.owner-photo {
  width: 100%;
  height: 300px;
  overflow: hidden;
  position: relative;
}

.owner-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.6s ease;
}

.photo-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(8, 0, 84, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.4s ease;
}

.owner-card:hover .photo-overlay {
  opacity: 1;
}

.overlay-content {
  text-align: center;
  color: white;
}

.overlay-content i {
  font-size: 3rem;
  margin-bottom: 12px;
  display: block;
}

.owner-badge {
  position: absolute;
  top: 20px;
  right: 20px;
  background: linear-gradient(135deg, #ff9100, #ff6b35);
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}

.owner-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 0 24px 24px;
}

.owner-stat {
  text-align: center;
}

.owner-stat .stat-number {
  font-size: 1.5rem;
  font-weight: 900;
  color: #080054;
  margin-bottom: 4px;
}

.owner-stat .stat-label {
  font-size: 0.7rem;
  color: #64748b;
  font-weight: 600;
}

.owner-social {
  display: flex;
  gap: 12px;
  justify-content: center;
  padding: 0 24px 24px;
}

.social-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}

.social-btn.linkedin {
  background: #0077b5;
  color: white;
}

.social-btn.twitter {
  background: #1da1f2;
  color: white;
}

.social-btn.instagram {
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  color: white;
}

.social-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.owner-content {
  color: #1e293b;
}

.owner-header {
  margin-bottom: 32px;
}

.owner-name {
  font-size: 2.5rem;
  font-weight: 900;
  color: #080054;
  margin-bottom: 8px;
}

.owner-title {
  font-size: 1.2rem;
  color: #ff9100;
  font-weight: 700;
  margin-bottom: 16px;
}

.owner-credentials {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.credential {
  background: rgba(255, 145, 0, 0.1);
  color: #ff9100;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
}

.owner-quote {
  background: linear-gradient(135deg, #080054, #1a1a7a);
  color: white;
  padding: 32px;
  border-radius: 24px;
  margin-bottom: 32px;
  position: relative;
}

.quote-icon {
  font-size: 2rem;
  color: #ff9100;
  margin-bottom: 16px;
}

.owner-quote blockquote {
  font-size: 1.2rem;
  line-height: 1.6;
  font-style: italic;
  margin: 0;
}

.owner-biography h4 {
  font-size: 1.3rem;
  font-weight: 800;
  color: #080054;
  margin-bottom: 12px;
  margin-top: 24px;
}

.owner-biography h4:first-child {
  margin-top: 0;
}

.bio-text {
  font-size: 1rem;
  line-height: 1.7;
  color: #64748b;
  margin-bottom: 16px;
}

.owner-achievements {
  margin-top: 32px;
}

.achievements-title {
  font-size: 1.3rem;
  font-weight: 800;
  color: #080054;
  margin-bottom: 20px;
}

.achievements-grid {
  display: grid;
  gap: 16px;
}

.achievement-item {
  display: flex;
  align-items: center;
  gap: 16px;
  background: white;
  padding: 20px;
  border-radius: 16px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(255, 145, 0, 0.1);
}

.achievement-icon {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #ff9100, #ff6b35);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
}

.achievement-content h5 {
  font-size: 1rem;
  font-weight: 700;
  color: #080054;
  margin-bottom: 4px;
}

.achievement-content p {
  font-size: 0.8rem;
  color: #64748b;
  margin: 0;
}

.owner-cta {
  display: flex;
  gap: 16px;
  margin-top: 32px;
  flex-wrap: wrap;
}

.cta-owner-primary, .cta-owner-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 25px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s ease;
}

.cta-owner-primary {
  background: linear-gradient(135deg, #ff9100, #ff6b35);
  color: white;
}

.cta-owner-secondary {
  background: rgba(255, 145, 0, 0.1);
  color: #ff9100;
  border: 2px solid rgba(255, 145, 0, 0.3);
}

.cta-owner-primary:hover, .cta-owner-secondary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* Ensure email in topbar has no underline even if it's an <a> or inside an <a> */
.topbar .email,
.topbar a.email,
.topbar .email a {
    color: #fff;
    text-decoration: none !important;
    border-bottom: none !important;
}

/* Strong rule: remove underline for mailto links in topbar */
.topbar a[href^="mailto:"] {
    color: #fff !important;
    text-decoration: none !important;
    border: none !important;
    background: transparent !important;
}
.topbar a[href^="mailto:"] .email {
    text-decoration: none !important;
}
.topbar {
    background: #2d2d2d;
    color: #fff;
    height: 50px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0 40px;
    font-size: 16px;
}
.topbar .email {
    margin-right: 20px;
}
.topbar .socials {
    display: flex;
    gap: 10px;
}
.topbar .icon {
    width: 22px;
    height: 22px;
}

/* Équipe Révolutionnaire */
.team-revolutionary {
  position: relative;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  overflow: hidden;
}

.team-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

.team-particles {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="team-dots" width="30" height="30" patternUnits="userSpaceOnUse"><circle cx="15" cy="15" r="1" fill="rgba(255,145,0,0.08)"/></pattern></defs><rect width="100" height="100" fill="url(%23team-dots)"/></svg>') repeat;
  /* animation: float 25s ease-in-out infinite; */
}

.team-gradient {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 70% 30%, rgba(255, 145, 0, 0.03) 0%, transparent 50%);
}

.team-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
  margin-bottom: 60px;
}

.team-stat-item {
  background: white;
  border-radius: 20px;
  padding: 24px;
  text-align: center;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(255, 145, 0, 0.1);
  transition: all 0.4s ease;
}

.team-stat-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.12);
}

.team-stat-item .stat-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #ff9100, #ff6b35);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
  margin: 0 auto 16px;
}

.team-stat-item .stat-number {
  font-size: 2.5rem;
  font-weight: 900;
  color: #080054;
  margin-bottom: 8px;
}

.team-stat-item .stat-label {
  font-size: 0.9rem;
  color: #64748b;
  font-weight: 600;
}

.team-category {
  margin-bottom: 60px;
}

.category-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: #080054;
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
}

.category-title i {
  color: #ff9100;
  font-size: 1.2rem;
}

.team-grid {
  display: grid;
  gap: 32px;
}

.leadership-grid {
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  justify-items: center;
}

.core-grid {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.team-member-card {
  background: white;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 145, 0, 0.1);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
}

.team-member-card.featured {
  transform: scale(1.05);
  box-shadow: 0 32px 64px rgba(0, 0, 0, 0.15);
}

.team-member-card:hover {
  transform: translateY(-12px) scale(1.02);
  box-shadow: 0 32px 64px rgba(0, 0, 0, 0.2);
}

.member-photo-container {
  position: relative;
  height: 280px;
  overflow: hidden;
}

.member-photo {
  width: 100%;
  height: 100%;
  position: relative;
}

.member-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.6s ease;
}

.team-member-card:hover .member-photo img {
  transform: scale(1.05);
}

.photo-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(8, 0, 84, 0.8), rgba(255, 145, 0, 0.8));
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.4s ease;
  backdrop-filter: blur(10px);
}

.team-member-card:hover .photo-overlay {
  opacity: 1;
}

.overlay-buttons {
  display: flex;
  gap: 12px;
}

.overlay-btn {
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  color: white;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.2s ease;
  backdrop-filter: blur(10px);
}

.overlay-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.05);
}

.member-status {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid white;
}

.member-status.online {
  background: #10b981;
}

.member-status.busy {
  background: #f59e0b;
}

.member-status.away {
  background: #6b7280;
}

.member-info {
  padding: 24px;
  text-align: center;
}

.member-name {
  font-size: 1.3rem;
  font-weight: 800;
  color: #080054;
  margin-bottom: 8px;
}

.member-title {
  color: #ff9100;
  font-weight: 700;
  margin-bottom: 16px;
}

.member-expertise {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-bottom: 16px;
}

.expertise-tag {
  background: rgba(255, 145, 0, 0.1);
  color: #ff9100;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 600;
}

.member-stats {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 16px;
}

.member-stat {
  text-align: center;
}

.member-stat .stat-value {
  font-size: 1.1rem;
  font-weight: 900;
  color: #080054;
  display: block;
}

.member-stat .stat-label {
  font-size: 0.7rem;
  color: #64748b;
  font-weight: 600;
}

.member-social {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.member-social .social-link {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 16px;
  transition: all 0.2s ease;
}

.member-social .social-link.linkedin {
  background: #0077b5;
}

.member-social .social-link.twitter {
  background: #1da1f2;
}

.member-social .social-link.instagram {
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743);
}

.member-social .social-link.facebook {
  background: #1877f2;
}

.member-social .social-link:hover {
  transform: translateY(-2px) scale(1.1);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.team-cta {
  background: linear-gradient(135deg, #080054, #1a1a7a);
  border-radius: 24px;
  padding: 40px;
  text-align: center;
  color: white;
  position: relative;
  overflow: hidden;
}

.team-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="cta-dots" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23cta-dots)"/></svg>') repeat;
}

.team-cta .cta-content {
  position: relative;
  z-index: 2;
}

.team-cta h3 {
  font-size: 1.8rem;
  font-weight: 800;
  margin-bottom: 12px;
}

.team-cta p {
  font-size: 1rem;
  opacity: 0.9;
  margin-bottom: 24px;
}

.cta-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.cta-team-primary, .cta-team-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 25px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s ease;
}

.cta-team-primary {
  background: linear-gradient(135deg, #ff9100, #ff6b35);
  color: white;
}

.cta-team-secondary {
  background: rgba(255, 255, 255, 0.1);
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.cta-team-primary:hover, .cta-team-secondary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* Organigramme Interactif */
.org-chart-interactive {
  position: relative;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  overflow: hidden;
}

.org-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

.org-particles {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="org-grid" width="40" height="40" patternUnits="userSpaceOnUse"><path d="M 40 0 L 0 0 0 40" fill="none" stroke="rgba(255,145,0,0.05)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23org-grid)"/></svg>') repeat;
  /* animation: float 30s ease-in-out infinite; */
}

.org-gradient {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255, 145, 0, 0.03) 0%, transparent 70%);
}

.org-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
  background: white;
  padding: 16px 24px;
  border-radius: 16px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.05);
}

.control-group {
  display: flex;
  gap: 8px;
}

.control-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 2px solid rgba(255, 145, 0, 0.2);
  background: white;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s ease;
}

.control-btn.active {
  background: linear-gradient(135deg, #ff9100, #ff6b35);
  color: white;
  border-color: #ff9100;
}

.control-btn:hover:not(.active) {
  border-color: #ff9100;
  color: #ff9100;
}

.control-info {
  font-size: 0.8rem;
  color: #64748b;
}

.org-chart-container {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}

.org-level {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 40px;
  gap: 40px;
  flex-wrap: wrap;
}

.level-1 {
  justify-content: center;
}

.level-2 {
  justify-content: space-around;
}

.level-3 {
  justify-content: space-between;
}

.org-card {
  background: white;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.1);
  border: 2px solid transparent;
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.org-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.15);
  border-color: #ff9100;
}

.org-card.focused {
  border-color: #ff9100;
  box-shadow: 0 24px 48px rgba(255, 145, 0, 0.2);
}

.card-glow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #ff9100, #080054);
}

.org-card.ceo-card {
  background: linear-gradient(135deg, #080054, #1a1a7a);
  color: white;
  transform: scale(1.05);
  z-index: 10;
}

.org-card.ceo-card:hover {
  transform: scale(1.15) translateY(-8px);
}

.org-card.director-card {
  min-width: 280px;
}

.card-header {
  position: relative;
  margin-bottom: 16px;
}

.org-card .member-photo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 12px;
  border: 3px solid #ff9100;
}

.org-card.ceo-card .member-photo {
  width: 100px;
  height: 100px;
  border-color: white;
}

.org-card .member-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-badge {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, #ff9100, #ff6b35);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 12px;
  border: 2px solid white;
}

.org-card .member-status {
  position: absolute;
  top: 8px;
  right: 8px;
}

.card-content {
  text-align: center;
}

.org-card .member-name {
  font-size: 1.2rem;
  font-weight: 800;
  margin-bottom: 8px;
}

.org-card.ceo-card .member-name {
  color: white;
}

.org-card .member-title {
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 12px;
}

.org-card.ceo-card .member-title {
  color: #f0f0f0;
}

.member-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
  margin-bottom: 12px;
}

.badge {
  background: rgba(255, 145, 0, 0.1);
  color: #ff9100;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 600;
}

.org-card.ceo-card .badge {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

.member-stats {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 16px;
}

.org-card .stat {
  text-align: center;
}

.org-card .stat-value {
  font-size: 1rem;
  font-weight: 900;
  display: block;
}

.org-card.ceo-card .stat-value {
  color: white;
}

.org-card .stat-label {
  font-size: 0.7rem;
  color: #64748b;
  font-weight: 600;
}

.org-card.ceo-card .stat-label {
  color: #f0f0f0;
}

.card-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.action-btn {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255, 145, 0, 0.3);
  background: rgba(255, 145, 0, 0.1);
  border-radius: 50%;
  color: #ff9100;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.action-btn:hover {
  background: #ff9100;
  color: white;
  transform: scale(1.05);
}

.org-connections {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1;
}

.connection-svg {
  width: 100%;
  height: 100%;
}

.connection-line {
  stroke-dasharray: 10, 5;
  animation: dash 2s linear infinite;
}

@keyframes dash {
  to {
    stroke-dashoffset: -15;
  }
}

.team-department {
  background: white;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(255, 145, 0, 0.1);
  transition: all 0.4s ease;
  min-width: 280px;
}

.team-department:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.12);
}

.department-header {
  text-align: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 145, 0, 0.1);
}

.department-icon {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #ff9100, #ff6b35);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
  margin: 0 auto 12px;
}

.department-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #080054;
  margin-bottom: 4px;
}

.department-count {
  font-size: 0.8rem;
  color: #64748b;
  font-weight: 600;
}

.team-members {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.team-member {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #f8fafc;
  border-radius: 12px;
  transition: all 0.2s ease;
  cursor: pointer;
}

.team-member:hover {
  background: #ff9100;
  color: white;
  transform: translateX(8px);
}

.member-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #ff9100;
}

.member-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-member .member-info {
  padding: 0;
  text-align: left;
}

.team-member .member-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: #080054;
  margin-bottom: 2px;
}

.team-member:hover .member-name {
  color: white;
}

.team-member .member-role {
  font-size: 0.8rem;
  color: #64748b;
  font-weight: 600;
}

.team-member:hover .member-role {
  color: rgba(255, 255, 255, 0.8);
}

.org-legend {
  background: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.05);
  margin-top: 40px;
}

.legend-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #080054;
  margin-bottom: 16px;
  text-align: center;
}

.legend-items {
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: #64748b;
}

.legend-color {
  width: 16px;
  height: 16px;
  border-radius: 4px;
}

.legend-color.ceo {
  background: linear-gradient(135deg, #080054, #1a1a7a);
}

.legend-color.director {
  background: #ff9100;
}

.legend-color.department {
  background: rgba(255, 145, 0, 0.2);
}

.legend-status {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid white;
}

.legend-status.online {
  background: #10b981;
}

.legend-status.busy {
  background: #f59e0b;
}

/* Témoignages */
.testimonials-section {
  position: relative;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  overflow: hidden;
}

.testimonials-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

.testimonials-particles {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="testimonial-pattern" width="50" height="50" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="2" fill="rgba(255,145,0,0.05)"/></pattern></defs><rect width="100" height="100" fill="url(%23testimonial-pattern)"/></svg>') repeat;
  /* animation: float 35s ease-in-out infinite; */
}

.testimonials-gradient {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 20% 80%, rgba(255, 145, 0, 0.03) 0%, transparent 50%);
}

.testimonials-carousel {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
}

.testimonial-slide {
  display: none;
  animation: fadeIn 0.5s ease-in-out;
}

.testimonial-slide.active {
  display: block;
}

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

.testimonial-card {
  background: white;
  border-radius: 24px;
  padding: 40px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 145, 0, 0.1);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.testimonial-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #ff9100, #080054);
}

.testimonial-content {
  position: relative;
  z-index: 2;
}

.quote-icon {
  font-size: 3rem;
  color: #ff9100;
  margin-bottom: 24px;
}

.testimonial-card blockquote {
  font-size: 1.3rem;
  line-height: 1.6;
  color: #1e293b;
  font-style: italic;
  margin-bottom: 32px;
}

.testimonial-author {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.author-photo {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid #ff9100;
}

.author-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.author-info {
  text-align: left;
}

.author-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: #080054;
  margin-bottom: 4px;
}

.author-title {
  font-size: 0.9rem;
  color: #64748b;
  margin-bottom: 8px;
}

.author-rating {
  display: flex;
  gap: 2px;
}

.author-rating i {
  color: #ff9100;
  font-size: 0.9rem;
}

.testimonials-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-top: 32px;
}

.nav-btn {
  width: 40px;
  height: 40px;
  border: 2px solid rgba(255, 145, 0, 0.3);
  background: white;
  border-radius: 50%;
  color: #ff9100;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.nav-btn:hover {
  background: #ff9100;
  color: white;
  transform: scale(1.05);
}

.nav-dots {
  display: flex;
  gap: 8px;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 145, 0, 0.3);
  cursor: pointer;
  transition: all 0.2s ease;
}

.dot.active {
  background: #ff9100;
  transform: scale(1.2);
}

/* CTA Révolutionnaire */
.cta-revolutionary {
  position: relative;
  background: linear-gradient(135deg, #080054 0%, #1a1a7a 25%, #ff9100 50%, #080054 75%, #1a1a7a 100%);
  background-size: 400% 400%;
  /* animation: gradientShift 12s ease infinite; */
  overflow: hidden;
}

.cta-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

.cta-particles {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="cta-particles" width="60" height="60" patternUnits="userSpaceOnUse"><circle cx="30" cy="30" r="1.5" fill="rgba(255,255,255,0.1)"/><circle cx="15" cy="15" r="1" fill="rgba(255,145,0,0.2)"/></pattern></defs><rect width="100" height="100" fill="url(%23cta-particles)"/></svg>') repeat;
  /* animation: float 40s ease-in-out infinite; */
}

.cta-gradient {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, rgba(255, 145, 0, 0.1), rgba(255, 255, 255, 0.05));
}

.cta-shapes {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

.cta-shapes .shape {
  position: absolute;
  background: rgba(255, 255, 255, 0.1);
  /* animation: floatShape 20s infinite ease-in-out; */
}

.cta-shapes .shape-1 {
  width: 120px;
  height: 120px;
  top: 10%;
  left: 5%;
  border-radius: 50%;
  animation-delay: 0s;
}

.cta-shapes .shape-2 {
  width: 80px;
  height: 80px;
  top: 60%;
  right: 10%;
  transform: rotate(45deg);
  animation-delay: 7s;
}

.cta-shapes .shape-3 {
  width: 100px;
  height: 100px;
  top: 30%;
  right: 40%;
  border-radius: 20px;
  animation-delay: 14s;
}

.cta-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50px;
  padding: 12px 24px;
  margin-bottom: 24px;
  color: white;
  position: relative;
  overflow: hidden;
}

.cta-badge:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
}

.cta-badge .badge-icon {
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, #ff9100, #ff6b35);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 12px;
}

.cta-badge .badge-text {
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.5px;
}

.cta-title {
  font-size: clamp(3rem, 8vw, 5rem);
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 24px;
  color: white;
  text-align: center;
}

.cta-title .title-line {
  display: block;
  animation: slideInUp 1s ease-out forwards;
  opacity: 0;
  transform: translateY(50px);
}

.cta-title .title-line:nth-child(1) { animation-delay: 0.2s; }
.cta-title .title-line:nth-child(2) { animation-delay: 0.4s; }
.cta-title .title-line:nth-child(3) { animation-delay: 0.6s; }

.cta-description {
  font-size: 1.3rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
  max-width: 800px;
  margin: 0 auto 48px;
  text-align: center;
}

.cta-buttons {
  display: flex;
  gap: 24px;
  justify-content: center;
  margin-bottom: 64px;
  flex-wrap: wrap;
}

.cta-btn-primary, .cta-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 36px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 1.1rem;
  text-decoration: none;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  overflow: hidden;
}

.cta-btn-primary {
  background: linear-gradient(135deg, #ff9100, #ff6b35);
  color: white;
  box-shadow: 0 12px 30px rgba(255, 145, 0, 0.4);
}

.cta-btn-primary:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 16px 40px rgba(255, 145, 0, 0.6);
}

.cta-btn-secondary {
  background: rgba(255, 255, 255, 0.1);
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
}

.cta-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: white;
  transform: translateY(-4px);
}

.btn-content {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 2;
}

.btn-ripple {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.6s ease;
}

.btn-glow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent);
  border-radius: 50px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.cta-btn-primary:hover .btn-glow {
  opacity: 1;
}

.cta-stats {
  display: flex;
  justify-content: center;
  gap: 48px;
  margin-bottom: 48px;
  flex-wrap: wrap;
}

.cta-stat {
  text-align: center;
  color: white;
}

.cta-stat .stat-number {
  font-size: 2.5rem;
  font-weight: 900;
  background: linear-gradient(135deg, #ff9100, #ffffff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 8px;
}

.cta-stat .stat-label {
  font-size: 0.9rem;
  font-weight: 600;
  opacity: 0.8;
  letter-spacing: 0.5px;
}

.cta-contact {
  display: flex;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.9rem;
  font-weight: 600;
}

.contact-item i {
  color: #ff9100;
  font-size: 1rem;
}

/* Responsive Design */
@media (max-width: 650px) {
  .hero-title {
    font-size: 2.5rem;
  }
  
  .hero-subtitle {
    font-size: 1.2rem;
    flex-direction: column;
    gap: 8px;
  }
  
  .hero-cta {
    flex-direction: column;
    align-items: center;
  }
  
  .hero-stats {
    flex-direction: column;
    gap: 24px;
  }
  
  .stat-divider {
    display: none;
  }
  
  .owner-showcase {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  
  .team-grid {
    grid-template-columns: 1fr;
  }
  
  .leadership-grid {
    grid-template-columns: 1fr;
  }
  
  .org-level {
    flex-direction: column;
    gap: 20px;
  }
  
  .org-controls {
    flex-direction: column;
    gap: 16px;
  }
  
  .control-group {
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .legend-items {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  
  .cta-buttons {
    flex-direction: column;
    align-items: center;
  }
  
  .cta-stats {
    flex-direction: column;
    gap: 24px;
  }
  
  .cta-contact {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
  
  .timeline-item {
    flex-direction: column !important;
    text-align: center;
  }
  
  .timeline-year {
    font-size: 3rem;
    margin-bottom: 20px;
  }
  
  .values-grid {
    grid-template-columns: 1fr;
  }
}
    /* filter: invert(1);
} */

/* Dropdown fixes */
.group:hover .group-hover\:visible,
.group:hover .group-hover\:opacity-100 {
  transition-delay: 0s !important;
}
.group .group-hover\:visible,
.group .group-hover\:opacity-100 {
  transition-delay: 200ms;
}
.dropdown-menu {
  padding: 8px 0;
  margin-top: 4px;
}
.dropdown-menu a {
  padding: 8px 16px;
  display: block;
  transition: background-color 0.15s;
}
.dropdown-menu a:hover {
  background-color: #f1f5f9;
}

.circle-arrow{width:28px;height:28px;border-radius:9999px;border:2px solid #080054;display:inline-grid;place-items:center;margin-right:4px}
.service-link{display:inline-flex;align-items:center;gap:10px;color:#080054;text-decoration:none;font-weight:800;margin-top:10px}
.service-link span{display:inline-flex;align-items:center}
.service-link:hover .circle-arrow{background:#ff9100;border-color:#ff9100;color:#080054}
.circle-arrow.white{border-color:#fff;color:#fff}
.circle-arrow.white:hover{background:#fff;color:#080054}

/* .services-ctrl{width:36px;height:36px;border-radius:9999px;background:#fff;color:#080054;border:1px solid rgba(8,0,84,.4);box-shadow:0 6px 16px rgba(0,0,0,.15)} */
.services-fade-right{position:absolute;right:0;top:0;bottom:0;width:140px;background:linear-gradient(90deg,rgba(255,255,255,0),#fff 70%);pointer-events:none}

/* Stats banner */
.stats-banner{background:#ff9100;border-radius:60px 0 60px 0;display:flex;align-items:center;justify-content:space-between;padding:36px 28px;box-shadow:0 0 12px rgba(0,0,0,.1);margin-top:-130px}
.stats-item{text-align:center;color:#fff;font-weight:900}
.stats-number{font-size:64px;line-height:1;color:#fff}
.stats-text{font-size:24px;font-weight:800;color:#fff}
.stats-sep{width:2px;height:120px;background:#fff;opacity:.8}

/* Nouvelles Actualités */
.new-announce-card{background:#fff;border-radius:28px;overflow:hidden;box-shadow:0 6px 24px rgba(0,0,0,.15);display:flex;flex-direction:column}
.new-announce-top{padding:20px 20px 0}
.new-announce-label{color:#6b7280;font-size:18px;font-weight:600;margin-bottom:8px}
.new-announce-title{color:#080054;font-size:22px;font-weight:900;line-height:1.2;margin-bottom:8px}
.new-announce-text{color:#4b5563;font-size:14px;line-height:1.4;margin-bottom:12px}
.new-announce-sep{height:1px;background:#e5e7eb;margin:12px 0}
.new-announce-link{display:inline-flex;align-items:center;gap:8px;color:#080054;font-weight:800;text-decoration:underline}

.new-announce-module{background:linear-gradient(135deg,#080054 0%,#0f0a6b 100%);color:#fff;padding:16px;position:relative;overflow:hidden}
.module-badge{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.badge-circle{width:40px;height:40px;background:#ff9100;border-radius:50%;flex-shrink:0}
.module-info .module-title{color:#fff;font-size:18px;font-weight:700}
.module-info .module-subtitle{color:#ff9100;font-size:16px;font-weight:600}
.module-details{margin-bottom:12px}
.module-desc{font-size:13px;line-height:1.3;margin-bottom:4px;color:#e2e8f0}
.module-method{color:#ff9100;font-size:14px;font-weight:600;font-style:italic;margin-bottom:8px}
.module-pricing{margin-bottom:12px}
.price-label{color:#fff;font-size:14px;font-weight:600;text-decoration:underline;margin-bottom:2px}
.price-main{color:#fff;font-size:16px;font-weight:700;margin-bottom:2px}
.price-alt{color:#fff;font-size:16px;font-weight:700}
.price-sub{font-size:12px;font-weight:400;opacity:.8}
.module-image{position:absolute;bottom:0;right:0;width:120px;height:120px;object-fit:cover;border-radius:8px 0 0 0}

/* Témoignages */
/* removed decorative bands before/after testimonials */

/* Logo Partenaires */
.partners-scroll{overflow:hidden;position:relative;padding:10px 0}
.partners-track{display:flex;gap:60px;animation:scroll 60s linear infinite;flex-wrap:nowrap;align-items:center;width:max-content;will-change:transform}
.partners-track:hover{animation-play-state:paused}
.partner-logo{height:140px;width:220px;object-fit:contain;opacity:.95;transition:all .3s ease;flex:0 0 auto;border-radius:8px;border:3px solid transparent}
.partner-logo:hover{opacity:1;border-color:#ff9100;box-shadow:0 4px 12px rgba(255,145,0,.3);transform:scale(1.05)}
@keyframes scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* Fix pour les icônes Font Awesome */
.fab,
.fa-brands {
  font-family: "Font Awesome 6 Brands" !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-variant: normal !important;
  text-rendering: auto !important;
  line-height: 1 !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

.fas, .fa, .far {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  font-style: normal !important;
  font-variant: normal !important;
  text-rendering: auto !important;
  line-height: 1 !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

.fa-chevron-down::before {
  content: "\f078" !important;
}

.fa-bars::before {
  content: "\f0c9" !important;
}

.fa-chevron-left::before {
  content: "\f053" !important;
}

.fa-chevron-right::before {
  content: "\f054" !important;
}

.fa-home::before {
  content: "\f015" !important;
}

.fa-graduation-cap::before {
  content: "\f19d" !important;
}

.fa-users::before {
  content: "\f0c0" !important;
}

.fa-store::before {
  content: "\f54e" !important;
}

.fa-laptop::before {
  content: "\f109" !important;
}

.fa-chart-line::before {
  content: "\f201" !important;
}

.fa-heartbeat::before {
  content: "\f21e" !important;
}

.fa-seedling::before {
  content: "\f4d8" !important;
}

.fa-plane::before {
  content: "\f072" !important;
}

.fa-truck::before {
  content: "\f0d1" !important;
}

.fa-tools::before {
  content: "\f7d9" !important;
}

/* Les styles carousel-btn sont maintenant définis plus haut */

/* Fix spécifique pour les chevrons dans la navbar */
.nav-link.dropdown .fas.fa-chevron-down {
  margin-left: 8px;
  font-size: 12px;
  transition: transform 0.3s ease;
}

.nav-link.dropdown:hover .fas.fa-chevron-down {
  transform: rotate(180deg);
}

/* S'assurer que les chevrons sont visibles */
.dropdown .fa-chevron-down::before,
.nav-dropdown .nav-dropdown__icon::before {
  content: "\f078" !important;
  display: inline-block !important;
  visibility: visible !important;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .container{padding:0 15px}
  .hero-title h1{font-size:3rem}
  .hero-nav{flex-direction:column;gap:15px;padding:15px}
  .hero-nav-separator{display:none}
  .sectors{left:20px;right:20px}
  .sectors-grid{grid-template-columns:1fr 1fr;gap:15px}
  .sector-item.small{grid-column:span 2}
  .sector-item.small img{width:100%}
  .contact-img-1{width:100%;height:300px}
  .contact-img-2{display:none}
  .contact-text h2{font-size:60px}
  .mvv-content h2{font-size:60px}
  .mvv-content p{font-size:24px}
  .service-cards-grid{grid-template-columns:1fr;gap:20px}
  .stats-section{flex-direction:column;gap:30px}
  .stat-separator{width:100%;height:5px;margin:0}
  .testimonials-title{font-size:50px}
  .partner-section h2{font-size:80px}
  .footer-content{flex-direction:column;gap:40px}
  .footer-links{flex-direction:column;gap:40px}
}

@media (max-width: 650px) {
  .header-top-content{flex-direction:column;gap:10px;text-align:center}
  .hero{height:600px}
  .hero-title{margin-top:80px;padding:7px 20px}
  .hero-title h1{font-size:32px}
  .hero-nav-item{font-size:18px}
  .sectors h2{font-size:28px}
  .sector-item h3{font-size:24px}
  .contact-text h2{font-size:40px}
  .contact-text h3{font-size:24px}
  .contact-message-btn{font-size:20px;padding:15px 30px}
  .mvv-content h2{font-size:40px}
  .mvv-content p{font-size:18px}
  .section-header{flex-direction:column;gap:20px;text-align:center}
  .section-header h2{font-size:28px}
  .services-track{gap:20px}
  .service-card{flex:0 0 280px;padding:20px;height:auto}
  .service-card p{font-size:18px}
  .service-link span{font-size:18px}
  .stat-number{font-size:50px}
  .stat-description{font-size:24px}
  .service-detail-card{width:100%;max-width:350px;height:500px}
  .service-detail-card h3{font-size:24px;width:280px}
  .service-detail-card p{font-size:16px;width:280px}
  .testimonials-title{font-size:36px}
  .testimonial-card{flex:0 0 300px;flex-direction:column;text-align:center;height:auto;min-height:auto}
  .testimonial-header{flex-direction:column;gap:8px}
  .partner-section h2{font-size:48px;padding:0 20px}
  .footer-links{gap:30px}
  .footer-bottom p{font-size:16px}
}

@media (max-width: 480px) {
  .hero-title h1{font-size:24px}
  .hero-nav-item{font-size:16px}
  .sectors-grid{grid-template-columns:1fr}
  .contact-text h2{font-size:32px}
  .mvv-content h2{font-size:32px}
  .section-header h2{font-size:24px}
  .service-card{flex:0 0 250px}
  .stat-number{font-size:36px}
  .stat-description{font-size:18px}
  .testimonials-title{font-size:28px}
  .testimonial-card{flex:0 0 280px}
  .partner-section h2{font-size:32px}
}

.testi-card{background:#fff;border-radius:8px;padding:20px;box-shadow:2px 2px 50px rgba(0,102,255,.25);display:flex;gap:18px;min-height:120px;max-width:300px;width:100%}
.testi-card.small{min-height:auto}
.testi-avatar{width:56px;height:56px;border-radius:50%;object-fit:cover;flex-shrink:0}
.testi-content{flex:1;min-width:0}
.testi-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.testi-header h4{font-size:18px;color:#333;font-weight:700}
.testi-stars{color:#ffd700;letter-spacing:2px}
.testi-card p{font-size:13px;color:#555;line-height:1.35}

/* ===== CARROUSEL SWIPE TÉMOIGNAGES MOBILE ===== */
/* Carrousel swipe pour mobile (0-767px) */
.testimonials-swipe-carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
  touch-action: pan-y pinch-zoom;
}

.testimonials-swipe-track {
  display: flex;
  will-change: transform;
  gap: 16px;
  padding: 0 20px;
}

.testimonial-swipe-card {
  flex-shrink: 0;
  min-height: 120px;
  height: auto;
  margin: 0 !important;
  width: calc(100vw - 80px) !important;
  max-width: 400px !important;
}

/* Indicateurs de navigation */
.testimonials-swipe-indicators {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
  padding: 0 20px;
}

.testimonials-swipe-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(8, 0, 84, 0.3);
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
  padding: 0;
}

.testimonials-swipe-dot.active {
  background: #080054;
  width: 24px;
  border-radius: 4px;
}

.testimonials-swipe-dot:hover {
  background: rgba(8, 0, 84, 0.5);
}

/* Boutons de navigation */
.testimonials-swipe-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid rgba(8, 0, 84, 0.2);
  color: #080054;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  touch-action: manipulation;
}

.testimonials-swipe-btn:hover:not(:disabled) {
  background: #080054;
  color: white;
  border-color: #080054;
  transform: translateY(-50%) scale(1.1);
}

.testimonials-swipe-btn:active:not(:disabled) {
  transform: translateY(-50%) scale(0.95);
}

.testimonials-swipe-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.testimonials-swipe-prev {
  left: 10px;
}

.testimonials-swipe-next {
  right: 10px;
}

/* Support prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .testimonials-swipe-track {
    transition: none !important;
  }
  
  .testimonials-swipe-dot {
    transition: none !important;
  }
  
  .testimonials-swipe-btn {
    transition: none !important;
  }
}

/* Optimisation des cartes de témoignages pour standard international */
/* Mobile (0-650px) */
@media (max-width: 650px) {
  /* Cartes de témoignages pleine largeur sur mobile */
  #testimonialsCarousel .grid > div[class*="w-"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: auto !important;
    margin: 0 !important;
  }
  
  /* Forcer la largeur des cartes de témoignages sur mobile */
  #testimonialsCarousel div[class*="bg-white"][class*="rounded-tl-2xl"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: auto !important;
    height: auto !important;
    min-height: 110px;
  }
  
  .testi-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: auto !important;
  }
  
  /* Réduire l'espacement de la grille sur mobile */
  #testimonialsCarousel .grid {
    gap: 1rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  /* S'assurer que le conteneur du carrousel ne déborde pas */
  #testimonialsCarousel {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
  
  /* S'assurer que le conteneur parent ne déborde pas */
  .testimonials-carousel {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
  
  /* Section témoignages responsive */
  section[class*="py-24"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: hidden !important;
  }
  
  /* Conteneur max-w-7xl responsive */
  .max-w-7xl {
    max-width: 100% !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    box-sizing: border-box !important;
  }
  
  /* Ajuster le padding des cartes sur mobile */
  #testimonialsCarousel div[class*="p-3"] {
    padding: 12px !important;
  }
  
  /* Ajuster la taille de l'image sur mobile */
  #testimonialsCarousel img[class*="w-16"] {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    flex-shrink: 0 !important;
  }
  
  /* Ajuster la taille du texte sur mobile */
  #testimonialsCarousel p[class*="text-xs"] {
    font-size: 11px !important;
    line-height: 1.4 !important;
  }
  
  #testimonialsCarousel h3[class*="text-sm"] {
    font-size: 13px !important;
  }
}

/* Tablette (651-1024px) */
@media (min-width: 651px) and (max-width: 1024px) {
  div[class*="w-["][class*="h-[110px]"] {
    max-width: 280px !important;
    width: 280px !important;
  }
  
  .testi-card {
    max-width: 280px !important;
  }
}

/* Desktop (1025px+) */
@media (min-width: 1025px) {
  div[class*="w-["][class*="h-[110px]"] {
    max-width: 300px !important;
    width: 300px !important;
  }
  
  .testi-card {
    max-width: 300px !important;
  }
}

/* Navbar Styles */
.navbar {
    background: #fff;
    box-shadow: 0 6px 12px rgba(0,0,0,0.25);
    position: relative;
    z-index: 1000;
}

.nav-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: clamp(12px, 2vw, 24px);
    padding: 12px 0;
    position: relative;
    z-index: 1000;
    flex-wrap: nowrap;
}

.logo {
    margin-left: 0;
    flex-shrink: 0;
    display: block;
}

.logo img {
    display: block;
    width: auto;
    height: auto;
    max-width: 200px;
    max-height: 72px;
    object-fit: contain;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.nav-menu {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1 1 auto;
    min-width: 0;
    gap: clamp(0.5rem, 1vw, 1.25rem);
    position: relative;
    z-index: 1;
}

.nav-menu-links,
.nav-menu-actions {
    display: flex;
    align-items: center;
}

.nav-menu-links {
    gap: clamp(0.5rem, 1vw, 1.25rem);
    flex-shrink: 1;
    min-width: 0;
}

.nav-menu-actions {
    gap: clamp(0.35rem, 0.65vw, 0.6rem);
    flex-shrink: 0;
    margin-left: clamp(0.5rem, 1.2vw, 1.25rem);
}

.nav-menu-actions .nav-register-btn,
.nav-menu-actions .nav-login-btn,
.nav-menu-actions .language-selector {
    margin-left: 0;
}

[data-simeco-home="true"] .nav-menu-actions .nav-register-btn,
[data-simeco-home="true"] .nav-menu-actions .nav-login-btn {
    padding: 8px 12px;
    font-size: clamp(12px, 0.9vw, 14px);
    gap: 0;
}

@media (min-width: 1400px) {
    .nav-menu {
        gap: 1rem;
    }

    .nav-menu-links {
        gap: 1.5rem;
    }

    .nav-menu-actions {
        gap: 0.65rem;
        margin-left: 1.25rem;
    }
}

/* Dropdown styles */
.dropdown,
.nav-dropdown {
    position: relative;
}

.nav-dropdown::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 10px;
}

.nav-dropdown__trigger {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    margin: 0;
    cursor: pointer;
    font-family: inherit;
    font-weight: 500;
    color: #080054;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: color 0.3s;
    box-sizing: border-box;
}

.nav-dropdown__trigger:hover,
.nav-dropdown:hover .nav-dropdown__trigger,
.nav-dropdown:focus-within .nav-dropdown__trigger,
.nav-dropdown.is-open .nav-dropdown__trigger {
    color: #ff9100;
}

.nav-dropdown__icon {
    font-size: 12px;
    transition: transform 0.3s ease;
}

@media (min-width: 768px) {
    .nav-dropdown:hover .nav-dropdown__icon,
    .nav-dropdown.is-open .nav-dropdown__icon {
        transform: rotate(180deg);
    }
}

.dropdown-toggle {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.08);
    border-radius: 8px;
    border: 1px solid rgba(8, 0, 84, 0.08);
    z-index: 2000;
    flex-direction: column;
    padding: 8px 0;
    margin-top: 0;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.25s;
}

.dropdown-menu.mega-menu {
    min-width: 280px;
    padding: 12px 0;
}

.absoluteN{height:100px;width:100%;}
.dropdown-menu li {
    list-style: none; /* Enlève les puces dans les dropdown */
    margin: 0;
    padding: 0;
}

.dropdown-menu a {
    color: #080054;
    padding: 14px 24px;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    display: block;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    position: relative;
    border-left: 3px solid transparent;
}

.dropdown-menu a:hover,
.dropdown-menu a:focus {
    background: linear-gradient(90deg, rgba(255, 145, 0, 0.08) 0%, rgba(255, 145, 0, 0.02) 100%);
    color: #ff9100;
    border-left-color: #ff9100;
    padding-left: 28px;
}

.dropdown-menu a:focus {
    outline: 2px solid #ff9100;
    outline-offset: -2px;
}

/* Show dropdown on hover — desktop */
.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu,
.dropdown[aria-expanded="true"] .dropdown-menu,
.dropdown.show .dropdown-menu,
.nav-dropdown:hover .dropdown-menu,
.nav-dropdown:focus-within .dropdown-menu,
.nav-dropdown.is-open .dropdown-menu {
    display: flex !important;
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

/* Amélioration de l'indicateur visuel pour les dropdowns */
.dropdown:hover .nav-link,
.dropdown:focus-within .nav-link,
.dropdown[aria-expanded="true"] .nav-link {
    color: #ff9100;
}

.dropdown:hover .nav-link i,
.dropdown:focus-within .nav-link i,
.dropdown[aria-expanded="true"] .nav-link i {
    transform: rotate(180deg);
    transition: transform 0.3s ease;
}

.nav-link i {
    transition: transform 0.3s ease;
}

.nav-link {
    text-decoration: none;
    color: #080054;
    font-size: clamp(15px, 1.05vw, 18px);
    font-weight: 500;
    transition: color 0.3s;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    flex-shrink: 0;
}

.nav-link.active,
.nav-link:hover {
    color: #ff9100;
}

.nav-link i {
    font-size: 16px;
}

.contact-btn {
    background: #080054;
    color: #fff;
    border: none;
    padding: 10px 18px;
    border-radius: 10px 0 10px 0;
    font-size: clamp(14px, 1vw, 17px);
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 0 6px rgba(0,0,0,0.35);
    transition: background 0.3s;
    display: inline-block;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}

.contact-btn:hover {
    background: #ff9100;
    text-decoration: none;
}

.contact-btn.active {
    background: #ff9100;
    color: #fff;
    text-decoration: none;
}

.contact-btn.active:hover {
    background: #e6810e;
    color: #fff;
}

.mobile-menu-btn {
    display: none;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 8px 10px;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #080054;
    cursor: pointer;
    position: relative;
    z-index: 10001;
    flex-shrink: 0;
    margin-left: auto;
    pointer-events: auto;
    -webkit-tap-highlight-color: rgba(8, 0, 84, 0.2);
    touch-action: manipulation;
}

/* ─── Tablette + desktop : menu horizontal visible ─── */
@media (min-width: 768px) {
    .mobile-menu-btn {
        display: none !important;
    }

    .nav-menu {
        display: flex !important;
        position: static !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex: 1 !important;
        min-width: 0 !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        overflow: visible !important;
        pointer-events: auto !important;
        gap: clamp(0.4rem, 1vw, 1.25rem) !important;
    }

    .nav-link {
        width: auto !important;
        padding: 0 !important;
        border-bottom: none !important;
        font-size: clamp(13px, 1.1vw, 17px) !important;
        white-space: nowrap !important;
    }

    .contact-btn {
        width: auto !important;
        margin-top: 0 !important;
        padding: clamp(8px, 0.8vw, 10px) clamp(12px, 1.2vw, 18px) !important;
        font-size: clamp(12px, 1vw, 16px) !important;
        text-align: center !important;
    }

    .nav-menu .employee-portal-link {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        margin: 0 0 0 4px !important;
        padding: 0 !important;
    }

    .nav-menu .nav-login-btn,
    .nav-menu .nav-register-btn {
        padding: clamp(8px, 0.8vw, 10px) clamp(10px, 1vw, 14px) !important;
        font-size: clamp(12px, 1vw, 15px) !important;
        margin: 0 !important;
    }

    .nav-login-btn__label,
    .nav-register-btn__label {
        display: inline;
    }

    .language-selector {
        width: auto !important;
        margin-top: 0 !important;
        flex-shrink: 0;
    }

    .nav-menu .dropdown > span,
    .nav-menu .nav-dropdown__trigger {
        display: inline-flex !important;
        align-items: center;
        width: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        border-bottom: none !important;
        background: transparent !important;
        font-size: clamp(13px, 1.1vw, 17px) !important;
    }

    .nav-menu .nav-login-btn {
        background: #fff !important;
        padding: clamp(8px, 0.8vw, 10px) clamp(10px, 1vw, 14px) !important;
        border: 2px solid var(--brand-primary, #080054) !important;
        font-weight: 600 !important;
        color: var(--brand-primary, #080054) !important;
    }

    .nav-menu .nav-login-btn:hover,
    .nav-menu .nav-login-btn:focus-visible {
        background: var(--brand-primary, #080054) !important;
        color: #fff !important;
    }

    .nav-menu .dropdown-menu {
        position: absolute !important;
    }

    .nav-menu .nav-dropdown .dropdown-menu[hidden] {
        display: none !important;
    }
}

/* Tablette (768px–1024px) : densité optimisée */
@media (min-width: 768px) and (max-width: 1024px) {
    .navbar .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .nav-content {
        gap: 10px;
        padding: 10px 0;
    }

    .logo img {
        max-width: 130px !important;
        max-height: 52px !important;
    }

    .nav-menu {
        gap: 0.35rem !important;
    }

    .nav-menu-links {
        gap: 0.4rem !important;
    }

    .nav-menu-actions {
        gap: 0.3rem !important;
        margin-left: 0.5rem !important;
    }

    .nav-link {
        font-size: 14px !important;
    }

    .nav-link i {
        font-size: 11px !important;
    }

    .contact-btn {
        font-size: 13px !important;
        padding: 8px 12px !important;
        border-radius: 8px 0 8px 0;
    }

    .language-dropdown {
        font-size: 11px !important;
        padding: 5px 7px !important;
        gap: 4px;
    }

    .language-dropdown .flag {
        width: 18px !important;
        height: 14px !important;
    }

    .admin-login-btn {
        padding: 6px 8px !important;
    }
}

/* Mobile uniquement (< 768px) : panneau burger ─── */
@media (max-width: 767px) {
    .nav-content {
        flex-wrap: nowrap;
    }

    .mobile-menu-btn {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        order: 2;
        margin-left: auto;
        position: relative;
        z-index: 10002 !important;
    }

    .logo {
        order: 0;
        flex-shrink: 0;
    }

    .logo img {
        max-width: 120px !important;
        max-height: 48px !important;
    }

    .nav-menu {
        order: 3;
        display: none !important;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(10px);
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        padding: 88px 20px 24px;
        gap: 0;
        z-index: 9999;
        overflow-y: auto;
        width: 100vw;
        max-width: 100vw;
        box-sizing: border-box;
    }

    .nav-menu.active {
        display: flex !important;
    }

    .nav-menu:not(.active) {
        pointer-events: none !important;
    }

    .nav-link:not(.dropdown) {
        width: 100%;
        padding: 16px 20px;
        font-size: 1.125rem !important;
        border-bottom: 1px solid #e5e7eb;
        white-space: normal;
        box-sizing: border-box;
    }

    /* Contact, langues, employé : voir nav-drawer.css */
}

/* MOBILE (0-650px) */
@media (max-width: 650px) {
    /* Empêcher débordement horizontal */
    html, body {
        overflow-x: hidden;
        width: 100%;
        max-width: 100vw;
    }
    
    /* Container responsive */
    .container {
        width: 100%;
        max-width: 100%;
        padding: 0 1rem;
        box-sizing: border-box;
    }
    
    /* Navigation mobile améliorée */
    .nav-menu {
        display: none !important;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(10px);
        flex-direction: column;
        padding: 80px 20px 20px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        gap: 15px;
        z-index: 9999;
        overflow-y: auto;
        width: 100vw;
        max-width: 100vw;
        box-sizing: border-box;
    }
    
    .nav-menu.active { 
        display: flex !important; 
    }
    
    .nav-link:not(.dropdown) {
        width: 100%;
        padding: 16px 20px;
        font-size: 18px;
        text-align: left;
        border-bottom: 1px solid #e5e7eb;
        display: block;
        box-sizing: border-box;
    }
    
    .contact-btn {
        width: 100%;
        margin-top: 10px;
        padding: 16px 20px;
        font-size: 18px;
        text-align: center;
        box-sizing: border-box;
    }

    .employee-portal-link {
        width: auto;
        min-width: 48px;
        min-height: 48px;
        width: 48px;
        height: 48px;
        margin: 8px auto 0;
        padding: 0;
        border-bottom: none;
        justify-content: center;
    }

    .employee-portal-link i {
        font-size: 1.35rem;
    }

    .mobile-menu-btn { 
        display: block !important;
        position: relative !important;
        z-index: 10001 !important;
        background: none !important;
        border: none !important;
        font-size: 28px !important;
        color: #080054 !important;
        cursor: pointer !important;
        padding: 8px 12px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        margin-right: 10px !important;
        pointer-events: auto !important;
        -webkit-tap-highlight-color: rgba(8, 0, 84, 0.2) !important;
        touch-action: manipulation !important;
        user-select: none !important;
        -webkit-user-select: none !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
    }
    
    .mobile-menu-btn:active,
    .mobile-menu-btn:focus {
        opacity: 0.7 !important;
        transform: scale(0.95) !important;
        outline: 2px solid #ff9100 !important;
        outline-offset: 2px !important;
    }
    
    .mobile-menu-btn:hover {
        opacity: 0.8 !important;
    }
    
    .mobile-menu-btn i {
        pointer-events: none !important;
    }
    
    /* S'assurer que le nav-content ne bloque pas le bouton */
    .nav-content {
        position: relative !important;
        z-index: 1000 !important;
    }
    
    /* S'assurer que le nav-menu ne bloque pas le bouton quand il est fermé */
    .nav-menu:not(.active) {
        pointer-events: none !important;
    }
    
    /* Sous-menu Services : aligné avec les autres entrées (voir bloc max-width 767px) */
    .nav-menu .dropdown {
        width: 100%;
    }
    
    /* Language selector mobile */
    .language-selector {
        width: 100%;
        margin-top: 10px;
    }
    
    /* Sections responsive */
    section {
        width: 100%;
        max-width: 100vw;
        padding-left: 1rem;
        padding-right: 1rem;
        box-sizing: border-box;
    }
    
    /* Images responsive */
    img {
        max-width: 100%;
        height: auto;
        box-sizing: border-box;
    }
    
    /* Hero section mobile */
    .hero, section.relative {
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
    }
}

/* TABLETTE — topbar */
@media (min-width: 768px) and (max-width: 1200px) {
    .topbar {
        padding: 0 20px;
        font-size: 14px;
        height: 45px;
    }

    .topbar .email {
        margin-right: 15px;
        font-size: 13px;
    }

    .topbar .icon-link img {
        width: 18px;
        height: 18px;
    }

    .navbar .container {
        padding: 0 1rem;
    }
}

/* Amélioration de l'espacement du menu */
@media (min-width: 768px) and (max-width: 1280px) {
    [data-simeco-home="true"] .logo img {
        max-width: 160px;
        max-height: 62px;
    }

    [data-simeco-home="true"] .nav-link,
    [data-simeco-home="true"] .nav-dropdown__trigger {
        font-size: clamp(12px, 1vw, 15px) !important;
    }

    [data-simeco-home="true"] .nav-menu-actions .contact-btn {
        padding: 7px 11px !important;
        font-size: 12px !important;
    }

    [data-simeco-home="true"] .nav-menu-actions .language-dropdown {
        padding: 6px 8px;
        font-size: 12px;
    }
}

/* Amélioration de l'accessibilité - Focus visible */
.nav-link:focus,
.contact-btn:focus,
.dropdown span:focus {
    outline: 3px solid #ff9100;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Tous les liens de navigation en gras et bleu */
.hover\:text-brand-accent{color:#080054 !important;font-weight:700 !important}
.hover\:text-brand-accent:hover{color:#ff9100 !important}

/* Footer - textes en blanc par défaut, casse normale (pas de majuscules forcées) */
footer .hover\:text-brand-accent{color:#fff !important;font-weight:400 !important;text-transform:none !important}
footer .hover\:text-brand-accent:hover{color:#ff9100 !important}
footer p{color:#fff !important}
footer .text-center{color:#fff !important}
footer ul li a{text-transform:none !important}

/* Mobile navbar - Services et Actualités en gras */
#mobileServicesBtn,#mobileNewsBtn{color:#080054 !important;font-weight:700 !important}
#mobileMenu button{color:#080054 !important;font-weight:700 !important}
#mobileMenu a{color:#080054 !important;font-weight:700 !important}

/* Correction des flèches de navigation services */
.services-ctrl {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    color: #080054;
    border: 1px solid rgba(8,0,84,.4);
    box-shadow: 0 6px 16px rgba(0,0,0,.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
}

.services-ctrl i {
    line-height: 1;
    margin: 0;
    padding: 0;
}

.services-ctrl:hover {
    background: #080054;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(8,0,84,.3);
}

/* Amélioration des cercles avec flèches */
.circle-arrow {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid #080054;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 4px;
    transition: all 0.2s ease;
}

.circle-arrow i {
    font-size: 12px;
    line-height: 1;
    margin: 0;
    padding: 0;
}

.service-link:hover .circle-arrow {
    background: #ff9100;
    border-color: #ff9100;
    color: #080054;
}

.circle-arrow.white {
    border-color: #fff;
    color: #fff;
}

.circle-arrow.white:hover {
    background: #fff;
    color: #080054;
}
.text-brand-accent{color:#ff9100 !important;font-weight:700 !important}
/* Les styles carousel-btn sont maintenant définis plus haut */

/* Services cards - styles manquants */
.service-card {
    background: #f7f7f7;
    border: 0.5px solid #000;
    border-radius: 16px;
    padding: 25px;
    min-height: 369px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 300px;
    flex-shrink: 0;
}

.service-logo {
    width: 64px;
    height: 64px;
    object-fit: contain;
    margin-bottom: 10px;
}

.service-title {
    font-size: 20px;
    color: #080054;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.service-card p {
    font-size: 16px;
    color: #080054;
    line-height: 1.4;
    flex-grow: 1;
    margin-bottom: 15px;
}

.service-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #080054;
    text-decoration: none;
    font-weight: 800;
    margin-top: auto;
}

.service-link span:last-child {
    text-decoration: underline;
}

/* Services track */
.services-track {
    display: flex;
    gap: 34px;
    transition: transform 0.3s ease;
    padding: 20px 0;
}

/* ===== CARROUSEL SECTEURS D'ACTIVITÉS ===== */
/* Styles pour le carrousel des secteurs d'activités */
.secteurs-carousel-container {
    position: relative;
    overflow: hidden;
    margin: 40px 0;
}

.secteurs-track {
    display: flex;
    gap: 34px;
    transition: transform 0.3s ease;
    padding: 20px 0;
}

/* Boutons de navigation secteurs */
.secteurs-ctrl {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    color: #080054;
    border: 1px solid rgba(8,0,84,.4);
    box-shadow: 0 6px 16px rgba(0,0,0,.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

.secteurs-ctrl.left {
    left: 20px;
}

.secteurs-ctrl.right {
    right: 20px;
}

.secteurs-ctrl i {
    line-height: 1;
    margin: 0;
    padding: 0;
    font-size: 14px;
}

.secteurs-ctrl:hover {
    background: #080054;
    color: #fff;
    transform: translateY(-50%) translateY(-2px);
    box-shadow: 0 8px 20px rgba(8,0,84,.3);
}

/* Effet de dégradé pour les secteurs */
.secteurs-fade-right {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 140px;
    background: linear-gradient(90deg, rgba(255,255,255,0), #fff 70%);
    pointer-events: none;
    z-index: 5;
}

.secteurs-fade-left {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 140px;
    background: linear-gradient(270deg, rgba(255,255,255,0), #fff 70%);
    pointer-events: none;
    z-index: 5;
}

/* Secteurs d'activité - Effets hover et pause */
#sectorsTrack:hover {
    animation-play-state: paused;
}

/* Container du carrousel secteurs */
#sectorsTrack {
    display: flex;
    gap: 2rem;
    width: max-content;
    overflow: hidden !important;
    transition: transform 0.5s ease-in-out;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

#sectorsTrack::-webkit-scrollbar {
    display: none;
}

#sectorsTrack:hover {
    animation-play-state: paused;
}

/* Boutons de navigation carrousel secteurs */
.carousel-nav-btn {
    width: 45px;
    height: 45px;
    background: rgba(255, 255, 255, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.carousel-nav-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.carousel-nav-btn:active {
    transform: scale(0.95);
}

.carousel-nav-btn i {
    font-size: 16px;
    color: white;
    transition: color 0.3s ease;
}

.carousel-nav-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.carousel-nav-btn:disabled:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.carousel-nav-btn:disabled i {
    color: rgba(255, 255, 255, 0.4);
}

/* Responsive pour les boutons */
@media (max-width: 650px) {
    .carousel-nav-btn {
        width: 40px;
        height: 40px;
    }
    
    .carousel-nav-btn i {
        font-size: 14px;
    }
}

/* ===== BOUTONS CARROUSEL DE CLASSE MONDIALE ===== */
.sectors-nav-btn {
    position: absolute; /* Position absolue par rapport au conteneur parent */
    top: -95px;
    width: 57px;
    height: 57px;
    background: linear-gradient(135deg, #ff6b35 0%, #ff8c42 50%, #ff6b35 100%);
    border: 3px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 
        0 12px 35px rgba(255, 107, 53, 0.5),
        0 0 0 0 rgba(255, 107, 53, 0.8),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    z-index: 1 !important; /* Z-index très bas pour rester sous le menu */
    backdrop-filter: blur(20px);
    overflow: hidden;
    /* Empêcher le débordement sur les petits écrans */
    max-width: 57px;
    max-height: 57px;
}

/* S'assurer que le header reste au-dessus de tout */
header {
    z-index: 9999 !important;
    position: relative;
}

.sectors-nav-btn::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transform: rotate(45deg);
    transition: all 0.6s ease;
    opacity: 0;
}

.sectors-nav-btn:hover::before {
    opacity: 0;
}

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

.sectors-nav-btn.prev {
    right: 80px;
}

.sectors-nav-btn.next {
    right: 10px;
}

.sectors-nav-btn:hover {
    background: linear-gradient(135deg, #ff8c42 0%, #ff6b35 50%, #ff8c42 100%);
    border-color: rgba(255, 255, 255, 0.6);
}

.sectors-nav-btn:active {
    transform: translateY(-1px) scale(1.05);
    transition: all 0.1s ease;
}

.sectors-nav-btn i {
    font-size: 20px;
    color: white;
    font-weight: bold;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    z-index: 2;
    position: relative;
}

.sectors-nav-btn:hover i {
    color: white;
}

.sectors-nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    background: linear-gradient(135deg, #666 0%, #444 100%);
    box-shadow: 
        0 4px 15px rgba(0, 0, 0, 0.2),
        0 0 0 0 rgba(0, 0, 0, 0.1);
    border-color: rgba(255, 255, 255, 0.1);
    transform: scale(0.9);
}

.sectors-nav-btn:disabled:hover {
    transform: scale(0.9);
    box-shadow: 
        0 4px 15px rgba(0, 0, 0, 0.2),
        0 0 0 0 rgba(0, 0, 0, 0.1);
}

.sectors-nav-btn:disabled i {
    color: rgba(255, 255, 255, 0.5);
    transform: none;
}

/* Responsive pour les boutons premium */
@media (max-width: 650px) {
    .sectors-nav-btn {
        position: absolute; /* Position relative au conteneur, pas figée */
        width: 40px;
        height: 40px;
        top: -60px; /* Plus proche du carrousel sur mobile */
        z-index: 1; /* Z-index très bas pour rester sous le menu */
    }
    
    .sectors-nav-btn.prev {
        right: 55px; /* Ajusté pour mobile */
    }
    
    .sectors-nav-btn.next {
        right: 10px; /* Ajusté pour mobile */
    }
    
    .sectors-nav-btn i {
        font-size: 14px;
    }
    
    /* S'assurer que le conteneur du carrousel ne déborde pas */
    .carousel-container {
        position: relative;
        overflow: hidden;
        width: calc(100% + 180px);
        margin-left: -90px;
        padding: 0 0px;
    }
}

@media (min-width: 651px) {
    .sectors-nav-btn {
        display: flex; /* Afficher les boutons sur desktop */
        visibility: visible;
        opacity: 1;
        position: absolute; /* Position relative au conteneur */
    }
}

/* ===== MASQUER LES BARRES DE DÉFILEMENT ===== */

/* Limiter la largeur du carrousel */
#sectorsTrack .flex {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

/* Masquer toutes les barres de défilement sur le site */
* {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}

*::-webkit-scrollbar {
    display: none; /* WebKit */
}

/* ===== CONTENEUR DU CARROUSEL LIMITÉ ===== */
.carousel-container {
    width: calc(100% + 300px);
    margin: 0 auto;
    margin-left: -150px;
    overflow: hidden;
    position: relative; /* Position relative pour les boutons absolus */
    padding: 0 0px;
}

/* ===== SECTION MISSION, VISION, VALEURS PREMIUM ===== */
.mission-vision-section {
    position: relative;
}

.mission-vision-section .decorative-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.mission-vision-section .content {
    position: relative;
    z-index: 10;
}

/* Lignes décoratives courbes personnalisées */
.decorative-curve {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.decorative-curve svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Animation subtile pour les lignes */
.decorative-curve path:nth-child(2) {
    animation-delay: -3s;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px) scale(1);
    }
    50% {
        transform: translateY(-10px) scale(1.02);
    }
}

/* Responsive pour les sections Mission/Vision/Valeurs */
@media (max-width: 650px) {
    .mission-vision-section h2 {
        font-size: 3rem !important;
    }
    
    .mission-vision-section p {
        font-size: 1.125rem !important;
    }
}

/* ===== SECTION STATISTIQUES PREMIUM ===== */
.stats-banner {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    border-radius: 1rem;
    position: relative;
    overflow: hidden;
}

.stats-separator {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 6rem;
    background: rgba(255, 255, 255, 0.3);
}

.stats-separator.left {
    left: 33.333%;
}

.stats-separator.right {
    right: 33.333%;
}

/* Responsive pour les statistiques */
@media (max-width: 650px) {
    .stats-separator {
        display: none;
    }
    
    .stats-banner .grid {
        gap: 2rem;
    }
}

/* Responsive pour le conteneur du carrousel */
@media (max-width: 650px) {
    .carousel-container {
        width: calc(100% + 180px);
        margin-left: -90px;
        padding: 0 0px;
    }
}

@media (max-width: 480px) {
    .carousel-container {
        width: calc(100% + 120px);
        margin-left: -60px;
        padding: 0 0px;
    }
}

@media (max-width: 320px) {
    .carousel-container {
        width: calc(100% + 40px);
        margin-left: -20px;
        padding: 0 0px;
    }
}

.sector-card {
    transition: all 0.2s ease;
    text-decoration: none;
    display: block;
}

.sector-card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 12px 32px rgba(0,0,0,.4);
    z-index: 10;
    position: relative;
}

.sector-card:hover div {
    background: #ff9100 !important;
    color: #fff !important;
}

/* Auto-scroll pour secteurs - Défilement infini */

/* Animation CSS désactivée - contrôle JavaScript */

/* Responsive amélioré pour tous les éléments */
@media (max-width: 1200px) {
    .container {
        max-width: 100%;
        padding: 0 20px;
    }
    
    .service-card {
        min-width: 280px;
    }
    
    .partners-track {
        gap: 40px;
    }
}

/* Desktop large (1025px+) : espacements généreux */
@media (min-width: 1025px) {
    .nav-menu {
        gap: 1.25rem !important;
    }

    .logo img {
        max-width: 200px;
        max-height: 72px;
    }

    .service-card {
        min-width: 260px;
        padding: 20px;
    }

    .carousel-btn {
        width: 36px;
        height: 36px;
    }
}

@media (max-width: 650px) {
    .topbar {
        padding: 0 20px;
        font-size: 14px;
        justify-content: center;
        text-align: center;
    }
    
    .topbar .email,
    .topbar .socials {
        justify-content: center;
        align-items: center;
    }
    
    .container {
        padding: 0 15px;
    }
    
    .service-card {
        min-width: 240px;
        padding: 18px;
        min-height: 320px;
    }
    
    .service-title {
        font-size: 18px;
    }
    
    .service-card p {
        font-size: 14px;
    }
    
    .carousel-btn {
        width: 32px;
        height: 32px;
    }
    
    .carousel-btn.left-2 {
        left: 4px;
    }
    
    .carousel-btn.right-2 {
        right: 4px;
    }
    
    .sector-card {
        min-width: 280px;
    }
    
    .partners-track {
        gap: 30px;
    }
    
    .partner-logo {
        height: 100px;
        width: 160px;
    }
}

@media (max-width: 480px) {
    .topbar {
        display: none !important; /* Masquer la topbar sur mobile pour toutes les pages */
    }
    
    .topbar .email,
    .topbar .socials {
        justify-content: center;
        align-items: center;
    }
    
    .service-card {
        min-width: 200px;
        padding: 15px;
        min-height: 280px;
    }
    
    .service-title {
        font-size: 16px;
    }
    
    .service-card p {
        font-size: 13px;
    }
    
    .carousel-btn {
        width: 28px;
        height: 28px;
    }
    
    .sector-card {
        min-width: 180px;
    }
    
    .partners-track {
        gap: 20px;
    }
    
    .partner-logo {
        height: 80px;
        width: 120px;
    }
}

/* Effets hover pour secteurs - restaurés */
.sector-card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 12px 32px rgba(0,0,0,.4);
    z-index: 10;
    position: relative;
}

.sector-card:hover div {
    background: #ff9100 !important;
    color: #fff !important;
}

/* Pause du carrousel au survol */
#sectorsTrack:hover {
    animation-play-state: paused;
}
#sectorsPrev, #sectorsNext {
    /* position: absolute !important;
    z-index: 1000 !important; */
    z-index: 1000 !important;
    position: absolute !important;
    opacity: 1;
    pointer-events: auto;
    /* ... tous les styles forcés ... */
  }

/* ===== STYLES ULTRA PREMIUM POUR LA PAGE CONTACT ===== */

/* Hero Section Contact */
.contact-hero {
  position: relative;
  background: linear-gradient(135deg, #080054 0%, #1a1a7a 50%, #080054 100%);
  overflow: hidden;
  min-height: 80vh;
  display: flex;
  align-items: center;
}

.hero-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

.hero-particles {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="particles" width="50" height="50" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="10" cy="10" r="0.5" fill="rgba(255,145,0,0.2)"/><circle cx="40" cy="40" r="0.8" fill="rgba(255,255,255,0.05)"/></pattern></defs><rect width="100" height="100" fill="url(%23particles)"/></svg>') repeat;
  /* animation: float 20s ease-in-out infinite; */
}

.hero-gradient {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 30% 70%, rgba(255, 145, 0, 0.1) 0%, transparent 50%),
              radial-gradient(circle at 70% 30%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 145, 0, 0.1);
  border: 1px solid rgba(255, 145, 0, 0.3);
  border-radius: 50px;
  padding: 0.75rem 1.5rem;
  color: #ff9100;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 2rem;
  backdrop-filter: blur(10px);
}

.hero-title {
  font-size: 3.5rem;
  font-weight: 900;
  color: white;
  margin-bottom: 1.5rem;
  line-height: 1.2;
}

.text-gradient {
  background: linear-gradient(45deg, #ff9100, #ffffff, #ff9100);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200% 200%;
  /* animation: gradientShift 3s ease-in-out infinite; */
}

.hero-subtitle {
  font-size: 1.3rem;
  color: rgba(255, 255, 255, 0.9);
  max-width: 800px;
  margin: 0 auto 3rem;
  line-height: 1.6;
}

/* Stats Premium */
.premium-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  margin-top: 4rem;
}

.stat-card {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  padding: 2rem;
  text-align: center;
  backdrop-filter: blur(20px);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  overflow: hidden;
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 145, 0, 0.1), transparent);
  transition: left 0.6s ease;
}

.stat-card:hover::before {
  left: 100%;
}

.stat-card:hover {
  transform: translateY(-10px) scale(1.05);
  background: rgba(255, 145, 0, 0.1);
  border-color: rgba(255, 145, 0, 0.3);
  box-shadow: 0 20px 40px rgba(255, 145, 0, 0.2);
}

.stat-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #ff9100, #ff6b35);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  font-size: 1.5rem;
  color: white;
  box-shadow: 0 10px 20px rgba(255, 145, 0, 0.3);
}

.stat-number {
  font-size: 2.5rem;
  font-weight: 900;
  color: white;
  margin-bottom: 0.5rem;
}

.stat-label {
  color: rgba(255, 255, 255, 0.8);
  font-weight: 600;
  font-size: 0.9rem;
}

/* Contact Methods Section */
.contact-methods {
  background: #f8fafc;
  position: relative;
}

.section-title {
  font-size: 2.8rem;
  font-weight: 800;
  color: #1e293b;
  margin-bottom: 1rem;
}

.section-subtitle {
  font-size: 1.2rem;
  color: #64748b;
  max-width: 600px;
  margin: 0 auto;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  max-width: 1200px;
  margin: 0 auto;
}

/* Contact Form Premium */
.contact-form-card {
  background: white;
  border-radius: 25px;
  padding: 2.5rem;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(8, 0, 84, 0.1);
  position: relative;
  overflow: hidden;
}

.contact-form-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #080054, #ff9100, #080054);
  background-size: 200% 100%;
  /* animation: gradientShift 3s ease-in-out infinite; */
}

.card-header {
  text-align: center;
  margin-bottom: 2rem;
}

.card-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #080054, #1a1a7a);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  font-size: 2rem;
  color: white;
  box-shadow: 0 15px 30px rgba(8, 0, 84, 0.3);
}

.card-header h3 {
  font-size: 1.8rem;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 0.5rem;
}

.card-header p {
  color: #64748b;
  font-size: 1rem;
}

/* Premium Form */
.premium-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-group {
  position: relative;
}

.form-group label {
  display: block;
  font-weight: 600;
  color: #374151;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 1rem 1rem 1rem 3rem;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  font-size: 1rem;
  transition: all 0.2s ease;
  background: #f9fafb;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #080054;
  background: white;
  box-shadow: 0 0 0 3px rgba(8, 0, 84, 0.1);
}

.form-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
  font-size: 1rem;
  pointer-events: none;
}

.form-group textarea {
  resize: vertical;
  min-height: 120px;
}

.premium-btn {
  background: linear-gradient(135deg, #080054, #1a1a7a);
  color: white;
  border: none;
  padding: 1.2rem 2rem;
  border-radius: 12px;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  position: relative;
  overflow: hidden;
  margin-top: 1rem;
}

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

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

.premium-btn:hover {
  background: linear-gradient(135deg, #ff9100, #ff6b35);
  transform: translateY(-3px);
  box-shadow: 0 15px 30px rgba(255, 145, 0, 0.4);
}

/* Contact Info Premium */
.contact-info-card {
  background: white;
  border-radius: 25px;
  padding: 2.5rem;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(8, 0, 84, 0.1);
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.info-section h3 {
  font-size: 1.8rem;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 1.5rem;
  text-align: center;
}

.info-items {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.info-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem;
  background: #f8fafc;
  border-radius: 15px;
  transition: all 0.2s ease;
  border: 1px solid transparent;
}

.info-item:hover {
  background: rgba(8, 0, 84, 0.05);
  border-color: rgba(8, 0, 84, 0.1);
  transform: translateX(5px);
}

.info-icon {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #080054, #1a1a7a);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.2rem;
  flex-shrink: 0;
  box-shadow: 0 8px 16px rgba(8, 0, 84, 0.2);
}

.info-content h4 {
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
}

.info-content p {
  color: #64748b;
  line-height: 1.5;
  margin: 0;
}

/* Quick Actions */
.quick-actions h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 1.5rem;
  text-align: center;
}

.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  background: linear-gradient(135deg, #ff9100, #ff6b35);
  color: white;
  text-decoration: none;
  border-radius: 12px;
  font-weight: 600;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

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

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

.action-btn:hover {
  background: linear-gradient(135deg, #080054, #1a1a7a);
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(8, 0, 84, 0.3);
}

.action-btn i {
  font-size: 1.2rem;
}

/* Social Networks Premium Section */
.social-networks-premium {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  position: relative;
}

.social-grid {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.social-category {
  background: white;
  border-radius: 25px;
  padding: 2.5rem;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(8, 0, 84, 0.1);
}

.social-category h3 {
  font-size: 1.8rem;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 2rem;
  text-align: center;
  position: relative;
}

.social-category h3::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, #080054, #ff9100);
  border-radius: 2px;
}

.social-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

.social-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  background: #f8fafc;
  border-radius: 15px;
  text-decoration: none;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border: 2px solid transparent;
  position: relative;
  overflow: hidden;
}

.social-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.6s ease;
}

.social-card:hover::before {
  left: 100%;
}

.social-card:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

.social-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: white;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.social-info {
  flex: 1;
}

.social-info h4 {
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
}

.social-info p {
  color: #64748b;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  line-height: 1.4;
}

.followers {
  font-size: 0.8rem;
  font-weight: 600;
  color: #ff9100;
}

.social-arrow {
  color: #9ca3af;
  font-size: 1.2rem;
  transition: all 0.2s ease;
}

.social-card:hover .social-arrow {
  color: #080054;
  transform: translateX(5px);
}

/* Social Card Colors */
.social-card.facebook:hover { border-color: #1877f2; }
.social-card.facebook .social-icon { background: linear-gradient(135deg, #1877f2, #42a5f5); }

.social-card.instagram:hover { border-color: #e4405f; }
.social-card.instagram .social-icon { background: linear-gradient(135deg, #e4405f, #fd1d1d, #fcb045); }

.social-card.linkedin:hover { border-color: #0077b5; }
.social-card.linkedin .social-icon { background: linear-gradient(135deg, #0077b5, #00a0dc); }

.social-card.twitter:hover { border-color: #1da1f2; }
.social-card.twitter .social-icon { background: linear-gradient(135deg, #1da1f2, #0d8bd9); }

.social-card.youtube:hover { border-color: #ff0000; }
.social-card.youtube .social-icon { background: linear-gradient(135deg, #ff0000, #cc0000); }

.social-card.tiktok:hover { border-color: #000000; }
.social-card.tiktok .social-icon { background: linear-gradient(135deg, #000000, #333333); }

.social-card.telegram:hover { border-color: #0088cc; }
.social-card.telegram .social-icon { background: linear-gradient(135deg, #0088cc, #229ed9); }

.social-card.whatsapp:hover { border-color: #25d366; }
.social-card.whatsapp .social-icon { background: linear-gradient(135deg, #25d366, #128c7e); }

.social-card.github:hover { border-color: #333333; }
.social-card.github .social-icon { background: linear-gradient(135deg, #333333, #666666); }

.social-card.medium:hover { border-color: #00ab6c; }
.social-card.medium .social-icon { background: linear-gradient(135deg, #00ab6c, #00d4aa); }

.social-card.behance:hover { border-color: #1769ff; }
.social-card.behance .social-icon { background: linear-gradient(135deg, #1769ff, #0052cc); }

.social-card.discord:hover { border-color: #5865f2; }
.social-card.discord .social-icon { background: linear-gradient(135deg, #5865f2, #4752c4); }

/* Social CTA */
.social-cta {
  background: linear-gradient(135deg, #080054, #1a1a7a);
  border-radius: 25px;
  padding: 3rem;
  text-align: center;
  margin-top: 3rem;
  position: relative;
  overflow: hidden;
}

.social-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="cta-pattern" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23cta-pattern)"/></svg>') repeat;
  opacity: 0.3;
}

.cta-content {
  position: relative;
  z-index: 2;
}

.cta-content h3 {
  font-size: 2.2rem;
  font-weight: 800;
  color: white;
  margin-bottom: 1rem;
}

.cta-content p {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 2rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.cta-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.1rem;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  overflow: hidden;
}

.cta-btn.primary {
  background: linear-gradient(135deg, #ff9100, #ff6b35);
  color: white;
  border: 2px solid transparent;
}

.cta-btn.secondary {
  background: transparent;
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.cta-btn:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 15px 30px rgba(255, 145, 0, 0.4);
}

.cta-btn.secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
}

/* FAQ Section */
.contact-faq {
  background: white;
}

.faq-grid {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.faq-item {
  background: #f8fafc;
  border-radius: 15px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  transition: all 0.2s ease;
}

.faq-item:hover {
  border-color: #080054;
  box-shadow: 0 10px 25px rgba(8, 0, 84, 0.1);
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem;
  cursor: pointer;
  background: white;
  transition: all 0.2s ease;
}

.faq-question:hover {
  background: rgba(8, 0, 84, 0.05);
}

.faq-question h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
  flex: 1;
}

.faq-question i {
  color: #080054;
  font-size: 1.2rem;
  transition: transform 0.3s ease;
}

.faq-item.active .faq-question i {
  transform: rotate(180deg);
}

.faq-answer {
  padding: 0 1.5rem;
  max-height: 0;
  overflow: hidden;
  transition: all 0.2s ease;
  background: #f8fafc;
}

.faq-item.active .faq-answer {
  padding: 1.5rem;
  max-height: 200px;
}

.faq-answer p {
  color: #64748b;
  line-height: 1.6;
  margin: 0;
}

/* Animations */
@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(5deg); }
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Responsive Design */
@media (max-width: 1024px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .hero-title {
    font-size: 3rem;
  }
  
  .section-title {
    font-size: 2.4rem;
  }
}

@media (max-width: 650px) {
  .hero-title {
    font-size: 2.5rem;
  }
  
  .hero-subtitle {
    font-size: 1.1rem;
  }
  
  .premium-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  
  .stat-card {
    padding: 1.5rem;
  }
  
  .stat-number {
    font-size: 2rem;
  }
  
  .section-title {
    font-size: 2rem;
  }
  
  .contact-form-card,
  .contact-info-card {
    padding: 2rem;
  }
  
  .social-cards {
    grid-template-columns: 1fr;
  }
  
  .social-category {
    padding: 2rem;
  }
  
  .cta-buttons {
    flex-direction: column;
    align-items: center;
  }
  
  .cta-btn {
    width: 100%;
    max-width: 300px;
  }
}

@media (max-width: 480px) {
  .hero-title {
    font-size: 2rem;
  }
  
  .premium-stats {
    grid-template-columns: 1fr;
  }
  
  .contact-form-card,
  .contact-info-card {
    padding: 1.5rem;
  }
  
  .social-cta {
    padding: 2rem;
  }
  
  .cta-content h3 {
    font-size: 1.8rem;
  }
  
  .cta-content p {
    font-size: 1rem;
  }
}