/*
 * Styles pour le site CEGRI
 * Optimisations performances et CLS implémentées
 * Site développé par Makhlouf B. dans le cadre d'un stage chez CEGRI SAS - 2025
 */

/* ====== Font Display Optimization ====== */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css');

/* ====== Image Optimization pour CLS ====== */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

img[width][height] {
  aspect-ratio: attr(width) / attr(height);
}

/* Placeholder pour les images qui se chargent */
img:not([src]) {
  background-color: #f0f0f0;
  border: 1px solid #ddd;
}



/* Optimisation des transformations pour éviter les reflows */
.service-card,
.testimonial-card,
.benefit-item,
.feature-card,
.feature-item {
  will-change: auto;
  transform: translateZ(0); /* Force la création d'un layer composite */
  contain: layout style paint;
}

/* Style principal CEGRI */
/* ====== Variables ====== */
:root {
  --primary: #1e3c72;
  --primary-dark: #162d57;
  --secondary: #2a5298;
  --accent: #ffd700;
  --accent-dark: #e6c200;
  --text: #2c3e50;
  --text-light: #ffffff;
  --background: #f8f9fa;
  --background-dark: #edf2f7;
  --footer: #1a1a1a;
  --success: #28a745;
  --warning: #ffc107;
  --danger: #dc3545;
  --border-radius: 12px;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  --transition: all 0.3s ease;
  --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --gradient-secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  --gradient-accent: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);

  --shadow-soft: 0 8px 32px rgba(31, 38, 135, 0.37);
  --shadow-hover: 0 15px 40px rgba(31, 38, 135, 0.5);
  --border-glass: 1px solid rgba(255, 255, 255, 0.18);
}

/* ====== Base ====== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  height: 100%;
}

body {
  font-family: 'Segoe UI', Tahoma, sans-serif;
  background-color: var(--background);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  margin: 0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem 2rem;
  width: 100%;
}

/* ====== Main Content ====== */
.main-content {
  flex: 1 0 auto;
  width: 100%;
  padding: 2rem 0;
}

/* ====== Accessibilité ====== */
:focus {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--primary);
  color: white;
  padding: 8px;
  z-index: 100;
}

.skip-link:focus {
  top: 0;
}

/* ====== Header ====== */
.header {
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  color: var(--text-light);
  padding: 2rem 1rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header .container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.header-pattern {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    linear-gradient(45deg, rgba(255,255,255,0.05) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,255,255,0.05) 25%, transparent 25%);
  background-size: 20px 20px;
  opacity: 0.1;
  z-index: 1;
}

.site-title {
  font-size: clamp(4rem, 8vw, 6rem);
  font-weight: 700;
  margin: 0 0 0.5rem;
  letter-spacing: 0.05em;
  color: white;
  text-transform: uppercase;
}

.site-subtitle {
  font-size: clamp(1rem, 2vw, 1.4rem);
  color: var(--accent);
  font-weight: 500;
  margin: 0 0 2rem;
  opacity: 0.95;
}

.header-cta {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin: 2rem 0;
  padding: 0 1rem;
}

.header-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.1rem;
  transition: all 0.3s ease;
  min-width: 220px;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  flex-direction: column;
  gap: 0.5rem;
}

.header-button.primary {
  background-color: var(--accent);
  color: var(--primary-dark);
  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
  padding: 1.2rem 2.5rem;
}

.header-button.primary:hover {
  background-color: var(--accent-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 215, 0, 0.4);
}

.header-button.secondary {
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  margin-top: 0.5rem;
}

.header-button.secondary:hover {
  background-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.4);
}

.header-button small {
  font-size: 0.8rem;
  opacity: 0.9;
  font-weight: normal;
}

.header-button.primary small {
  color: var(--primary-dark);
}

.header-button.secondary small {
  color: rgba(255, 255, 255, 0.9);
}

.header-button i {
  margin-right: 0.5rem;
  font-size: 1rem;
  transition: transform 0.3s ease;
}

.header-button:hover i {
  transform: translateX(2px);
}

@media (max-width: 768px) {
  .header {
    padding: 2rem 1rem;
    min-height: 180px;
  }

  .site-title {
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    word-spacing: -0.1em;
    letter-spacing: 0.02em;
    line-height: 1.2;
    /* Même effet gradient que PC avec fallbacks renforcés */
    background: linear-gradient(135deg, #ffffff 0%, #ffd700 50%, #ffffff 100%) !important;
    background-size: 200% 200% !important;
    animation: gradientText 3s ease-in-out infinite !important;
    font-weight: 800 !important;
    text-shadow: 0 4px 8px rgba(0,0,0,0.3) !important;
    /* Support moderne avec fallback */
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    /* Fallback pour navigateurs moins compatibles */
    color: transparent;
    /* Force le support */
    -webkit-font-feature-settings: "kern" 1;
    font-feature-settings: "kern" 1;
    /* Améliorer le rendu du texte sur mobile */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }
  


  .site-subtitle {
    font-size: 1rem;
    margin-bottom: 1.5rem;
  }

  .header-cta {
    flex-direction: column;
    gap: 0.8rem;
    width: 100%;
    padding: 0 1rem;
  }

  .header-button {
    width: 100%;
    max-width: 300px;
    padding: 0.7rem 1.5rem;
  }
}

/* ====== Petits écrans (iPhone 12 et moins) ====== */
@media (max-width: 390px) {
  .site-title {
    font-size: clamp(1.4rem, 3.5vw, 1.8rem) !important;
    line-height: 1.1 !important;
    word-spacing: -0.05em !important;
    letter-spacing: 0.01em !important;
  }
  
  h1 {
    font-size: clamp(1.6rem, 4vw, 2rem) !important;
  }
  
  h2 {
    font-size: clamp(1.3rem, 3.5vw, 1.6rem) !important;
  }
  
  h3 {
    font-size: clamp(1.1rem, 3vw, 1.3rem) !important;
  }
  
  .header {
    min-height: 160px !important;
    padding: 1.5rem 1rem !important;
  }
}

/* ====== Navbar ====== */
.navbar {
  background-color: var(--text-light);
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  padding: 1rem 0;
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: all 0.3s ease;
}

.navbar.scrolled {
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.nav-links {
  list-style: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.nav-links a {
  text-decoration: none;
  color: var(--primary);
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  transition: all 0.3s ease;
  position: relative;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

.nav-links a:hover::after {
  width: 80%;
}

.btn-devis {
  background: var(--accent);
  color: var(--primary-dark) !important;
  font-weight: bold;
  transform-origin: center;
  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.2);
}

.btn-devis:hover {
  background: var(--accent-dark);
  box-shadow: 0 6px 20px rgba(255, 215, 0, 0.3);
}

/* ====== Hero Section ====== */
.home-header {
  min-height: 85vh;
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  position: relative;
  overflow: hidden;
}

.hero-content {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 2;
}

.value-prop {
  margin: 2rem 0;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.hero-text {
  font-size: clamp(1.2rem, 2.5vw, 1.8rem);
  color: white;
  margin-bottom: 1.5rem;
  line-height: 1.4;
}

.savings-calculator {
  background: var(--accent);
  padding: 1rem 2rem;
  border-radius: 50px;
  display: inline-block;
  transform: rotate(-2deg);
}

.savings-text {
  color: var(--primary-dark);
  font-weight: 700;
  font-size: 1.2rem;
  margin: 0;
}

.highlight {
  font-size: 1.4em;
  color: var(--primary);
}

.cta-bonus,
.response-time {
  display: block;
  font-size: 0.8rem;
  margin-top: 0.5rem;
  opacity: 0.9;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(255, 215, 0, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 215, 0, 0);
  }
}

.pulse {
  animation: pulse 2s infinite;
}

.hero-features {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin: 0 auto;
  max-width: 1000px;
  flex-wrap: wrap;
}

.hero-card {
  flex: 1;
  min-width: 250px;
  max-width: 300px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: var(--border-radius);
  padding: 2rem;
  transition: var(--transition);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.hero-card:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.15);
  border-color: var(--accent);
}

.hero-icon {
  width: 60px;
  height: 60px;
  background: rgba(255, 215, 0, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.2rem;
  transition: var(--transition);
}

.hero-card:hover .hero-icon {
  transform: scale(1.1) rotate(10deg);
  background: var(--accent);
}

.hero-icon i {
  font-size: 1.8rem;
  color: var(--accent);
  transition: var(--transition);
}

.hero-card:hover .hero-icon i {
  color: var(--primary);
}

.hero-card h3 {
  color: var(--accent);
  margin-bottom: 0.8rem;
  font-size: 1.2rem;
}

.hero-card p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.95rem;
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .hero {
    padding: 2rem 1rem;
  }

  .hero-features {
    gap: 1rem;
  }

  .hero-card {
    min-width: 220px;
    padding: 1.5rem;
  }

  .hero-icon {
    width: 50px;
    height: 50px;
  }

  .hero-icon i {
    font-size: 1.5rem;
  }
}

/* ====== Footer ====== */
.footer {
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
  color: var(--text-light);
  text-align: center;
  padding: 3rem 2rem;
  flex-shrink: 0;
  width: 100%;
  margin-top: 0;
  position: relative;
  overflow: hidden;
}

.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 80%, rgba(255, 215, 0, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
  z-index: 1;
}

.footer .container {
  position: relative;
  z-index: 2;
}

.footer p {
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
  opacity: 0.9;
}

/* ====== Formulaire (pour contact.html et devis.html) ====== */
.contact-form, .devis-form {
  max-width: 600px;
  margin: 2rem auto;
  background: white;
  padding: 2rem;
  border-radius: 15px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

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

.contact-form label,
.devis-form label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: var(--primary);
}

.contact-form input,
.contact-form textarea,
.devis-form input,
.devis-form textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 1rem;
  transition: 0.3s;
}

.contact-form input:focus,
.contact-form textarea:focus,
.devis-form input:focus,
.devis-form textarea:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.3);
}

.contact-form .cta-button,
.devis-form .cta-button {
  width: 100%;
  text-align: center;
  border: none;
  cursor: pointer;
}

/* ====== Formulaire de devis ====== */
.devis-form {
  max-width: 800px;
  margin: 2rem auto;
  background: white;
  padding: 2.5rem;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.form-section {
  margin-bottom: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 2px solid #f0f0f0;
  animation: fadeIn 0.5s ease-out;
}

.form-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.form-section h2 {
  color: var(--primary);
  margin-bottom: 1.8rem;
  font-size: 1.6rem;
  position: relative;
}

.form-section h2::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 24px;
  background: var(--accent);
  border-radius: 2px;
}

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

.form-group label {
  display: block;
  margin-bottom: 0.8rem;
  color: var(--primary);
  font-weight: 500;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  font-size: 1rem;
  transition: all 0.3s ease;
  background-color: #fff;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(255, 215, 0, 0.1);
  outline: none;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: #aaa;
}

.radio-group,
.checkbox-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-top: 0.8rem;
}

.radio-label,
.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: #fff;
}

.radio-label:hover,
.checkbox-label:hover {
  border-color: var(--accent);
  background-color: rgba(255, 215, 0, 0.05);
  transform: translateY(-2px);
}

.radio-label input[type="radio"],
.checkbox-label input[type="checkbox"] {
  width: 1.2em;
  height: 1.2em;
  margin: 0;
  cursor: pointer;
}

.radio-label input[type="radio"]:checked,
.checkbox-label input[type="checkbox"]:checked {
  accent-color: var(--primary);
}

.radio-label input[type="radio"]:checked + span,
.checkbox-label input[type="checkbox"]:checked + span {
  color: var(--primary);
  font-weight: 500;
}

.devis-form select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e3c72' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1em;
  padding-right: 2.5rem;
}

.devis-form .cta-button {
  width: 100%;
  margin-top: 1.5rem;
  padding: 1.2rem;
  font-size: 1.1rem;
  font-weight: 600;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.devis-form .cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(30, 60, 114, 0.2);
}

.devis-form .cta-button:active {
  transform: translateY(0);
}

.devis-form .cta-button::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.2), transparent);
  transform: translateX(-100%);
}

.devis-form .cta-button:hover::after {
  animation: buttonGlow 1.5s infinite;
}

@keyframes buttonGlow {
  100% {
    transform: translateX(100%);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Style pour les champs requis */
.form-group label[for]:has(+ input:required)::after,
.form-group label:has(+ textarea:required)::after {
  content: ' *';
  color: var(--accent);
  font-weight: bold;
}

/* Message d'erreur */
.error-message {
  color: #dc3545;
  font-size: 0.9rem;
  margin-top: 0.5rem;
  display: none;
}

/* Style de validation */
.form-group input:valid,
.form-group textarea:valid {
  border-color: #28a745;
}

.form-group input:invalid:not(:placeholder-shown),
.form-group textarea:invalid:not(:placeholder-shown) {
  border-color: #dc3545;
}

@media (max-width: 768px) {
  .devis-form {
    padding: 1.5rem;
    margin: 1rem;
    border-radius: 15px;
  }

  .form-section {
    padding-bottom: 2rem;
    margin-bottom: 2rem;
  }

  .radio-group,
  .checkbox-group {
    grid-template-columns: 1fr;
  }

  .form-section h2 {
    font-size: 1.4rem;
  }

  .form-group input,
  .form-group textarea,
  .form-group select {
    font-size: 16px; /* Évite le zoom sur mobile */
  }
}

/* ====== Grille des services ====== */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.service-card {
  background: white;
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
  border-left: 5px solid var(--primary);
  transition: all 0.3s ease;
}

.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* ====== Réalisations ====== */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.project-card {
  background: white;
  padding: 1.5rem;
  border-radius: 12px;
  border-left: 5px solid var(--secondary);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
  transition: 0.3s;
}

.project-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* ====== Page entreprise ====== */
.container ul {
  list-style: none;
  padding-left: 0;
  margin-top: 1rem;
}

.container ul li {
  background: white;
  padding: 1rem 1.5rem;
  margin-bottom: 1rem;
  border-radius: 10px;
  border-left: 5px solid var(--primary);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: 0.3s;
}

.container ul li:hover {
  transform: translateX(5px);
  background-color: #fdfdfd;
}

/* ====== Nouveaux boutons sociaux (Uiverse) ====== */
.footer-social {
  margin-top: 2rem;
  display: flex;
  justify-content: center;
  gap: 1rem;
  position: relative;
  z-index: 3;
}

.card {
  width: fit-content;
  height: fit-content;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  gap: 20px;
}

/* pour tous les conteneurs sociaux */
.socialContainer {
  width: 52px;
  height: 52px;
  background-color: rgb(0, 129, 217);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition-duration: 0.3s;
  border-radius: 30px;
  text-decoration: none;
}

/* Instagram */
.containerOne:hover {
  background-color: #d62976;
  transition-duration: 0.3s;
  transform: scale(1.2);
}

/* Twitter/X */
.containerTwo:hover {
  background-color: #000000;
  transition-duration: 0.3s;
  transform: scale(1.2);
}

/* LinkedIn */
.containerThree:hover {
  background-color: #0072b1;
  transition-duration: 0.3s;
  transform: scale(1.2);
}

/* Email */
.containerFour:hover {
  background-color: #ea4335;
  transition-duration: 0.3s;
  transform: scale(1.2);
}

.socialContainer:active {
  transform: scale(0.9);
  transition-duration: 0.3s;
}

.socialSvg {
  width: 17px;
}

.socialSvg path {
  fill: rgb(255, 255, 255);
}

.socialContainer:hover .socialSvg {
  animation: slide-in-top 0.3s both;
}

@keyframes slide-in-top {
  0% {
    transform: translateY(-50px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ====== Animations ====== */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.service-card,
.project-card,
.container ul li {
  animation: fadeIn 0.5s ease-out forwards;
}

/* ====== Loading state ====== */
.loading {
  opacity: 0.7;
  pointer-events: none;
  position: relative;
}

.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  border-top-color: transparent;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ====== Contact Page ====== */
.contact-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin: 2rem auto;
}

.contact-info-section,
.contact-form-section {
  background: white;
  padding: 2rem;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* Contact Cards */
.contact-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}

.contact-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(15px);
  padding: 2rem;
  border-radius: 20px;
  text-align: center;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.3);
  position: relative;
  overflow: hidden;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.1),
    0 2px 8px rgba(0, 0, 0, 0.05);
  transform: translateY(0) rotateX(0) rotateY(0);
  transform-style: preserve-3d;
  will-change: transform;
}

.contact-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--gradient-accent);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.contact-card:hover::before {
  transform: scaleX(1);
}

.contact-card::after {
  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: transform 0.6s ease;
  opacity: 0;
  pointer-events: none;
}

.contact-card:hover::after {
  transform: rotate(45deg) translate(50%, 50%);
  opacity: 1;
}

.contact-card:hover {
  transform: translateY(-15px) rotateX(8deg) rotateY(3deg) scale(1.02);
  box-shadow: 
    0 25px 50px rgba(0, 0, 0, 0.15),
    0 10px 30px rgba(0, 0, 0, 0.1),
    0 0 40px rgba(30, 60, 114, 0.1);
  background: rgba(255, 255, 255, 1);
  border-color: rgba(255, 215, 0, 0.3);
}

.contact-card i {
  font-size: 2rem;
  color: var(--primary);
  margin-bottom: 1rem;
  transition: all 0.3s ease;
  position: relative;
  z-index: 2;
}

.contact-card:hover i {
  transform: translateY(-5px) scale(1.1);
  color: var(--accent);
  text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
}

.contact-card h3 {
  color: var(--primary);
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
}

.contact-card p {
  color: var(--text);
  line-height: 1.6;
  margin-bottom: 1rem;
}

.contact-link {
  display: inline-block;
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  background: rgba(30, 60, 114, 0.1);
  transition: all 0.3s ease;
}

.contact-link:hover {
  background: var(--primary);
  color: white;
}

/* Status Badge */
.status-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 500;
}

.status-badge.open {
  background: #28a745;
  color: white;
}

.status-badge.closed {
  background: #dc3545;
  color: white;
}

/* Map Section */
.map-section {
  margin-top: 4rem;
  background: var(--background);
  padding: 4rem 0;
}

.map-container {
  position: relative;
  width: 100%;
  height: 450px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.map-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Submit Button with Icon */
.cta-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.cta-button i {
  transition: transform 0.3s ease;
}

.cta-button:hover i {
  transform: translateX(5px);
}

/* Responsive Design */
@media (max-width: 992px) {
  .contact-container {
    grid-template-columns: 1fr;
  }

  .contact-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .contact-cards {
    grid-template-columns: 1fr;
  }

  .contact-info-section,
  .contact-form-section {
    padding: 1.5rem;
  }

  .map-container {
    height: 300px;
  }
}

/* ====== Home Page Styles ====== */
.home-header {
  min-height: 80vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.header-pattern {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: linear-gradient(135deg, rgba(255,255,255,0.1) 25%, transparent 25%),
                    linear-gradient(225deg, rgba(255,255,255,0.1) 25%, transparent 25%),
                    linear-gradient(45deg, rgba(255,255,255,0.1) 25%, transparent 25%),
                    linear-gradient(315deg, rgba(255,255,255,0.1) 25%, transparent 25%);
  background-position: 10px 0, 10px 0, 0 0, 0 0;
  background-size: 20px 20px;
  background-repeat: repeat;
  animation: patternMove 50s linear infinite;
  opacity: 0.5;
}

@keyframes patternMove {
  from { background-position: 0 0; }
  to { background-position: 100px 100px; }
}

.header-cta {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}

.phone-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.5rem;
  background: white;
  color: var(--primary);
  text-decoration: none;
  border-radius: 30px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.phone-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* Hero Features */
.hero-features {
  display: flex;
  gap: 2rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}

.feature {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-light);
}

.feature i {
  font-size: 1.5rem;
  color: var(--accent);
}

/* Services Preview */
.services-preview {
  padding: 5rem 0;
  background: white;
}

.section-title {
  text-align: center;
  margin-bottom: 3rem;
  color: var(--primary);
  font-size: 2.5rem;
  position: relative;
}

.section-title::after {
  content: '';
  display: block;
  width: 80px;
  height: 4px;
  background: var(--accent);
  margin: 1rem auto;
  border-radius: 2px;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.service-card {
  background: white;
  padding: 2rem;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  text-align: center;
  transition: all 0.3s ease;
}

.service-card:hover {
  transform: translateY(-10px);
}

.service-card i {
  font-size: 3rem;
  color: var(--primary);
  margin-bottom: 1.5rem;
}

.service-card h3 {
  color: var(--primary);
  margin-bottom: 1rem;
}

.service-link {
  display: inline-block;
  margin-top: 1rem;
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
  position: relative;
}

.service-link::after {
  content: '→';
  margin-left: 0.5rem;
  transition: transform 0.3s ease;
  display: inline-block;
}

.service-link:hover::after {
  transform: translateX(5px);
}

/* Why Us Section */
.why-us {
  padding: 5rem 0;
  background: var(--background);
}

.advantages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

.advantage-card {
  background: white;
  padding: 2rem;
  border-radius: 20px;
  text-align: center;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.advantage-card:hover {
  border-color: var(--accent);
  transform: translateY(-5px);
}

.advantage-icon {
  width: 80px;
  height: 80px;
  background: var(--primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
}

.advantage-icon i {
  font-size: 2rem;
  color: white;
}

/* ====== CTA Section ====== */
.cta-section {
  padding: 4rem 0;
  background: var(--primary);
  position: relative;
  overflow: hidden;
}

.cta-pattern {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    linear-gradient(45deg, rgba(255,255,255,0.05) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,255,255,0.05) 25%, transparent 25%);
  background-size: 60px 60px;
  animation: movePattern 20s linear infinite;
  opacity: 0.5;
}

.cta-content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.cta-section h2 {
  color: white;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  margin-bottom: 1rem;
}

.cta-section p {
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(1rem, 2vw, 1.2rem);
  margin-bottom: 2rem;
}

.cta-buttons {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  flex-wrap: wrap;
}

.cta-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.1rem;
  overflow: hidden;
  transition: transform 0.3s ease;
  min-width: 200px;
}

.cta-button:hover {
  transform: translateY(-3px);
}

.button-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  transition: all 0.3s ease;
}

.button-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: all 0.3s ease;
}

.cta-button.primary {
  color: var(--primary);
}

.cta-button.primary .button-bg {
  background: var(--accent);
}

.cta-button.primary:hover .button-bg {
  background: var(--accent-dark);
}

.cta-button.secondary {
  color: white;
}

.cta-button.secondary .button-bg {
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.2);
}

.cta-button.secondary:hover .button-bg {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
}

.cta-button i {
  font-size: 1.2rem;
  transition: transform 0.3s ease;
}

.cta-button:hover i {
  transform: translateX(3px);
}

@media (max-width: 768px) {
  .cta-section {
    padding: 3rem 1rem;
  }

  .cta-buttons {
    gap: 1rem;
  }

  .cta-button {
    width: 100%;
    padding: 0.8rem 1.5rem;
    font-size: 1rem;
  }
}

@keyframes movePattern {
  0% { background-position: 0 0; }
  100% { background-position: 60px 60px; }
}

/* ====== Team Section ====== */
.team-section {
  padding: 4rem 0;
  background: linear-gradient(to bottom, var(--background), white);
}

.team-content {
  max-width: 1200px;
  margin: 0 auto;
}

.team-card {
  background: white;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.team-image {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}

.team-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.team-card:hover .team-photo {
  transform: scale(1.05);
}

.team-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  padding: 2rem;
  background: white;
}

.feature-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem;
  border-radius: 12px;
  transition: var(--transition);
  border: 1px solid rgba(30, 60, 114, 0.1);
  min-width: 0; /* Permet au contenu de se rétrécir */
}

.feature-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  border-color: rgba(30, 60, 114, 0.2);
}

.feature-icon {
  width: 50px;
  height: 50px;
  min-width: 50px;
  background: var(--background);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.feature-item:hover .feature-icon {
  background: var(--accent);
  transform: rotate(-10deg);
}

.feature-icon i {
  font-size: 1.5rem;
  color: var(--primary);
  transition: var(--transition);
}

.feature-item:hover .feature-icon i {
  color: var(--primary-dark);
}

.feature-text {
  flex: 1;
  min-width: 0; /* Permet au texte de se rétrécir */
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.feature-text h4 {
  color: var(--primary);
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
  transition: var(--transition);
}

.feature-text p {
  color: var(--text);
  font-size: 0.95rem;
  margin: 0;
  transition: var(--transition);
}

.feature-item:hover .feature-text h4,
.feature-item:hover .feature-text p {
  color: var(--text);
}

.team-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.5rem;
  text-decoration: none;
  color: var(--primary);
  font-weight: 600;
  background: var(--background);
  transition: var(--transition);
}

.team-link:hover {
  background: var(--primary);
  color: white;
}

.team-link i {
  transition: transform 0.3s ease;
}

.team-link:hover i {
  transform: translateX(5px);
}

@media (max-width: 768px) {
  .team-image {
    height: 300px;
  }

  .team-features {
    grid-template-columns: 1fr;
    padding: 1.5rem;
    gap: 1rem;
  }

  .feature-item {
    padding: 0.8rem;
  }

  .feature-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
  }

  .feature-icon i {
    font-size: 1.2rem;
  }

  .feature-text h4 {
    font-size: 1rem;
  }

  .feature-text p {
    font-size: 0.85rem;
  }
}

/* ====== Features Grid ====== */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin: 3rem 0;
}

.feature-card {
  background: white;
  border-radius: var(--border-radius);
  padding: 2rem;
  text-align: center;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(30, 60, 114, 0.1);
}

.feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  opacity: 0;
  transition: var(--transition);
  z-index: 1;
}

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

.feature-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.feature-icon {
  width: 80px;
  height: 80px;
  background: var(--background);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  position: relative;
  z-index: 2;
  transition: var(--transition);
}

.feature-card:hover .feature-icon {
  background: var(--accent);
  transform: scale(1.1);
}

.feature-icon i {
  font-size: 2rem;
  color: var(--primary);
  transition: var(--transition);
}

.feature-card:hover .feature-icon i {
  color: var(--primary-dark);
}

.feature-card h3 {
  color: var(--primary);
  margin-bottom: 1rem;
  position: relative;
  z-index: 2;
  transition: var(--transition);
}

.feature-card p {
  color: var(--text);
  margin: 0;
  position: relative;
  z-index: 2;
  transition: var(--transition);
}

.feature-card:hover h3,
.feature-card:hover p {
  color: white;
}

.cta-wrapper {
  text-align: center;
  margin-top: 3rem;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--primary);
  color: white;
  padding: 1rem 2rem;
  border-radius: 30px;
  text-decoration: none;
  font-weight: 600;
  transition: var(--transition);
}

.btn-primary:hover {
  background: var(--primary-dark);
  transform: translateY(-2px);
}

.btn-primary i {
  transition: transform 0.3s ease;
}

.btn-primary:hover i {
  transform: translateX(5px);
}

@media (max-width: 768px) {
  .features-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin: 2rem 0;
  }

  .feature-card {
    padding: 1.5rem;
  }

  .feature-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 1rem;
  }

  .feature-icon i {
    font-size: 1.5rem;
  }
}

/* ====== Services Highlights ====== */
.services-highlights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  padding: 2rem;
  background: white;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  margin: 2rem auto;
  max-width: 1200px;
}

.highlight-card {
  position: relative;
  padding: 2rem;
  background: white;
  border-radius: var(--border-radius);
  transition: var(--transition);
  border: 1px solid rgba(30, 60, 114, 0.1);
  overflow: hidden;
  cursor: pointer;
}

.highlight-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 0;
  background: var(--accent);
  transition: height 0.3s ease;
}

.highlight-card:hover::after {
  height: 100%;
}

.highlight-card:hover {
  transform: translateX(5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.highlight-icon {
  width: 60px;
  height: 60px;
  background: var(--background);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  transition: var(--transition);
  position: relative;
  z-index: 1;
}

.highlight-card:hover .highlight-icon {
  background: var(--accent);
  transform: rotate(5deg) scale(1.1);
}

.highlight-icon i {
  font-size: 1.5rem;
  color: var(--primary);
  transition: var(--transition);
}

.highlight-card:hover .highlight-icon i {
  color: var(--primary-dark);
}

.highlight-card h3 {
  font-size: 1.2rem;
  color: var(--primary);
  margin-bottom: 0.5rem;
  transition: var(--transition);
}

.highlight-card p {
  color: var(--text);
  font-size: 0.95rem;
  margin: 0;
  transition: var(--transition);
}

.discover-more {
  text-align: center;
  margin: 3rem 0;
}

.discover-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
  padding: 1rem 2rem;
  border: 2px solid var(--primary);
  border-radius: 30px;
  transition: var(--transition);
  background: transparent;
}

.discover-link:hover {
  background: var(--primary);
  color: white;
}

.discover-link i {
  transition: transform 0.3s ease;
}

.discover-link:hover i {
  transform: translateX(5px);
}

@media (max-width: 768px) {
  .services-highlights {
    padding: 1rem;
    gap: 1rem;
  }

  .highlight-card {
    padding: 1.5rem;
  }

  .highlight-icon {
    width: 50px;
    height: 50px;
    margin-bottom: 1rem;
  }

  .highlight-card h3 {
    font-size: 1.1rem;
  }

  .highlight-card p {
    font-size: 0.9rem;
  }
}

/* ====== Form Messages ====== */
.form-message {
  padding: 1rem;
  margin: 1rem 0;
  border-radius: 8px;
  text-align: center;
  font-weight: 500;
  animation: slideIn 0.3s ease-out;
}

.form-message.info {
  background-color: #e3f2fd;
  color: #0d47a1;
  border: 1px solid #bbdefb;
}

.form-message.success {
  background-color: #e8f5e9;
  color: #1b5e20;
  border: 1px solid #c8e6c9;
}

.form-message.error {
  background-color: #ffebee;
  color: #b71c1c;
  border: 1px solid #ffcdd2;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Spinner animation for submit button */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.fa-spinner {
  animation: spin 1s linear infinite;
}

/* ====== Landing Page Styles ====== */
.landing-page {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.landing-header {
  min-height: 400px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  padding: 4rem 0;
}

.landing-content {
  margin-top: -50px;
}

/* Trust Badges */
.trust-badges {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-top: 2rem;
}

.badge {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  padding: 1rem 2rem;
  border-radius: 50px;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: white;
  font-weight: 500;
  text-decoration: none;
  transition: var(--transition);
  cursor: pointer;
}

.badge:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
  color: white;
}

.badge i {
  color: var(--accent);
  font-size: 1.2rem;
}

/* Benefits Grid */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin: 2rem 0;
}

.benefit-card {
  background: white;
  padding: 2rem;
  border-radius: var(--border-radius);
  text-align: center;
  box-shadow: var(--shadow);
  transition: var(--transition);
}

.benefit-card:hover {
  transform: translateY(-5px);
}

.benefit-card i {
  font-size: 2.5rem;
  color: var(--primary);
  margin-bottom: 1rem;
}

/* Form Steps */
.form-container {
  background: white;
  padding: 2rem;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  max-width: 600px;
  margin: 0 auto;
}

.form-step {
  display: none;
}

.form-step.active {
  display: block;
  animation: fadeIn 0.5s ease-out;
}

.form-step h3 {
  color: var(--primary);
  margin-bottom: 1.5rem;
  font-size: 1.3rem;
}

.next-step,
.prev-step,
.submit-button {
  background: var(--primary);
  color: white;
  border: none;
  padding: 1rem 2rem;
  border-radius: 30px;
  cursor: pointer;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: var(--transition);
}

.next-step:hover,
.submit-button:hover {
  background: var(--primary-dark);
  transform: translateY(-2px);
}

.prev-step {
  background: #e9ecef;
  color: var(--text);
  margin-right: 1rem;
}

.prev-step:hover {
  background: #dee2e6;
}

/* Testimonials */
.testimonials-section {
  padding: 4rem 0;
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.testimonial-card {
  background: white;
  padding: 2rem;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
}

.stars {
  color: var(--accent);
  margin-bottom: 1rem;
  font-size: 1.2rem;
}

.testimonial-card p {
  font-style: italic;
  margin-bottom: 1rem;
}

.testimonial-card cite {
  color: var(--primary);
  font-weight: 500;
}

/* FAQ Section */
.faq-section {
  padding: 4rem 0;
  background: var(--background);
}

.faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.faq-item {
  background: white;
  padding: 2rem;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
}

.faq-item h3 {
  color: var(--primary);
  margin-bottom: 1rem;
  font-size: 1.2rem;
}

/* Landing Footer */
.landing-footer {
  background: var(--primary-dark);
  color: white;
  text-align: center;
  padding: 1rem;
}

.landing-footer a {
  color: var(--accent);
  text-decoration: none;
}

.landing-footer a:hover {
  text-decoration: underline;
}

/* Bouton retour à l'accueil */
.header-nav {
  position: absolute;
  top: 0.5rem;
  left: 1rem;
  z-index: 10;
}

.back-to-home {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  text-decoration: none;
  border-radius: 50px;
  font-size: 0.9rem;
  font-weight: 500;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.back-to-home:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateX(-3px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.back-to-home i {
  font-size: 0.8rem;
  transition: transform 0.3s ease;
}

.back-to-home:hover i {
  transform: translateX(-2px);
}

@media (max-width: 768px) {
  .header-nav {
    position: relative;
    top: auto;
    left: auto;
    margin-bottom: 1rem;
    text-align: center;
  }
  
  .back-to-home {
    font-size: 0.8rem;
    padding: 0.6rem 1rem;
  }
}

/* ====== Galerie d'images améliorée ====== */
.photo-gallery {
  margin: 3rem 0;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.5rem;
  padding: 1rem;
}

.gallery-grid a {
  position: relative;
  display: block;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.gallery-grid a:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.gallery-img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  transition: all 0.3s ease;
}

.gallery-grid a::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(30, 60, 114, 0.2);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.gallery-grid a:hover::before {
  opacity: 1;
}

.gallery-grid a::after {
  content: '🔍';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  font-size: 2rem;
  color: white;
  z-index: 2;
  transition: transform 0.3s ease;
}

.gallery-grid a:hover::after {
  transform: translate(-50%, -50%) scale(1);
}

/* Styles Lightbox personnalisés */
.lb-outerContainer {
  border-radius: 12px;
  background: transparent !important;
}

.lb-container {
  padding: 0;
}

.lb-image {
  border-radius: 8px;
  border: none !important;
}

/* Style de la croix de fermeture */
.lb-close {
  position: fixed !important;
  top: 20px !important;
  right: 20px !important;
  width: 40px !important;
  height: 40px !important;
  background: var(--primary) !important;
  border-radius: 50% !important;
  opacity: 1 !important;
  cursor: pointer !important;
  z-index: 9999 !important;
  text-indent: -9999px !important;
  transition: all 0.3s ease !important;
}

.lb-close::before,
.lb-close::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 3px;
  background: white;
}

.lb-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.lb-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.lb-close:hover {
  transform: rotate(90deg);
  background: var(--accent) !important;
}

/* Overlay plus sombre */
#lightboxOverlay {
  background-color: rgba(0, 0, 0, 0.9) !important;
}

/* Style des flèches de navigation */
.lb-nav a.lb-prev,
.lb-nav a.lb-next {
  opacity: 0.8 !important;
  background-color: rgba(255, 255, 255, 0.2) !important;
}

.lb-nav a.lb-prev:hover,
.lb-nav a.lb-next:hover {
  opacity: 1 !important;
  background-color: var(--primary) !important;
}

.lb-data .lb-caption {
  font-size: 1.1rem;
  font-weight: 500;
  color: white;
  margin-top: 0.5rem;
}

.lb-data .lb-number {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
  padding-top: 0.5rem;
}

.lb-closeContainer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9999;
}

@media (max-width: 768px) {
  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
    padding: 0.5rem;
  }

  .gallery-img {
    height: 150px;
  }
}

/* Form Validation Styles */
.error-message {
  color: #dc3545;
  font-size: 0.9rem;
  margin-top: 0.5rem;
  display: none;
}

.form-group input.error,
.form-group select.error,
.form-group textarea.error {
  border-color: #dc3545;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .landing-header {
    min-height: 300px;
    padding: 2rem 0;
  }

  .trust-badges {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }

  .badge {
    width: 100%;
    max-width: 300px;
    justify-content: center;
  }

  .form-container {
    margin: 1rem;
    padding: 1.5rem;
  }

  .next-step,
  .prev-step,
  .submit-button {
    width: 100%;
    margin: 0.5rem 0;
    justify-content: center;
  }
}

/* Animation pour les transitions entre étapes */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ====== Immediate Benefits Section ====== */
.immediate-benefits {
  padding: 3rem 0;
  background: white;
  margin-top: -5rem;
  position: relative;
  z-index: 10;
}

.benefits-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  background: white;
  padding: 2rem;
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.benefit-item {
  text-align: center;
  padding: 2rem;
  border-radius: 15px;
  transition: all 0.3s ease;
  background: var(--background);
  border: 2px solid transparent;
}

.benefit-item:hover {
  transform: translateY(-5px);
  border-color: var(--accent);
  background: white;
}

.benefit-icon {
  width: 70px;
  height: 70px;
  background: var(--primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  transition: all 0.3s ease;
}

.benefit-item:hover .benefit-icon {
  background: var(--accent);
  transform: rotate(360deg);
}

.benefit-icon i {
  font-size: 2rem;
  color: white;
  transition: all 0.3s ease;
}

.benefit-item:hover .benefit-icon i {
  color: var(--primary);
}

.benefit-item h3 {
  color: var(--primary);
  margin-bottom: 0.8rem;
  font-size: 1.3rem;
}

.benefit-item p {
  color: var(--text);
  font-size: 0.95rem;
  margin: 0;
}

/* ====== Problem/Solution Section ====== */
.problem-solution {
  padding: 6rem 0;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  position: relative;
}

.problem-solution-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 3rem;
  margin-top: 2rem;
}

.problem-card,
.solution-card {
  background: white;
  padding: 2.5rem;
  border-radius: 20px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.problem-card {
  border-top: 5px solid var(--danger);
}

.solution-card {
  border-top: 5px solid var(--success);
}

.card-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.card-header i {
  font-size: 2rem;
}

.problem-card .card-header i {
  color: var(--danger);
}

.solution-card .card-header i {
  color: var(--success);
}

.card-header h3 {
  color: var(--primary);
  margin: 0;
  font-size: 1.5rem;
}

.risk-list,
.solution-list {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
}

.risk-list li,
.solution-list li {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: 10px;
  background: var(--background);
  transition: all 0.3s ease;
}

.risk-list li:hover,
.solution-list li:hover {
  transform: translateX(10px);
  background: white;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.risk-list i {
  color: var(--danger);
  font-size: 1.2rem;
}

.solution-list i {
  color: var(--success);
  font-size: 1.2rem;
}

.risk-alert {
  background: rgba(220, 53, 69, 0.1);
  padding: 1rem;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
}

.risk-alert i {
  color: var(--danger);
  font-size: 1.5rem;
}

.risk-alert p {
  margin: 0;
  color: var(--danger);
  font-weight: 500;
}

.social-proof-mini {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 2px solid var(--background);
}

.rating {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.stars {
  color: var(--accent);
  font-size: 1.2rem;
}

.count {
  color: var(--text);
  font-weight: 500;
}

.social-proof-mini .cta-button {
  width: 100%;
  justify-content: center;
  padding: 1.2rem;
  font-size: 1.1rem;
  gap: 1rem;
  background: var(--success);
  color: white;
  border: none;
  border-radius: 15px;
  transition: all 0.3s ease;
}

.social-proof-mini .cta-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(40, 167, 69, 0.2);
}

.problem-card i,
.solution-card i {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.problem-card i {
  color: var(--danger);
}

.solution-card i {
  color: var(--success);
}

.problem-card h3,
.solution-card h3 {
  color: var(--primary);
  margin-bottom: 1.5rem;
  font-size: 1.4rem;
}

.problem-card ul,
.solution-card ul {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
  flex-grow: 1;
}

.problem-card li,
.solution-card li {
  padding: 0.8rem 0;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 1.1rem;
}

.problem-card li::before {
  content: '⚠️';
}

.solution-card li::before {
  content: '✓';
  color: var(--success);
  font-weight: bold;
  font-size: 1.2rem;
}

.solution-card .cta-button {
  display: inline-block;
  width: 100%;
  padding: 1rem 2rem;
  margin-top: 1.5rem;
  background: var(--primary);
  color: white;
  text-decoration: none;
  text-align: center;
  border-radius: 30px;
  font-weight: 600;
  font-size: 1.1rem;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
}

.solution-card .cta-button:hover {
  background: var(--accent);
  color: var(--primary);
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* ====== Service Features ====== */
.service-features {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
}

.service-features li {
  padding: 0.5rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.service-features li::before {
  content: '✓';
  color: var(--primary);
  font-weight: bold;
}

.service-cta {
  display: inline-block;
  padding: 0.8rem 1.5rem;
  background: var(--primary);
  color: white;
  text-decoration: none;
  border-radius: 30px;
  margin-top: 1rem;
  transition: var(--transition);
}

.service-cta:hover {
  background: var(--primary-dark);
  transform: translateY(-2px);
}

.service-cta.urgent {
  background: var(--danger);
}

.service-cta.urgent:hover {
  background: #c82333;
}

/* ====== Process Section ====== */
.process-section {
  padding: 4rem 0;
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  color: white;
}

.process-section .section-title {
  color: white;
  text-align: center;
  margin-bottom: 3rem;
  font-size: 2.5rem;
  position: relative;
}

.process-section .section-title::after {
  content: '';
  display: block;
  width: 80px;
  height: 4px;
  background: var(--accent);
  margin: 1rem auto;
  border-radius: 2px;
}

.process-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin: 2rem 0;
}

.process-step {
  text-align: center;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--border-radius);
  position: relative;
}

.step-number {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 40px;
  background: var(--accent);
  color: var(--primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 1.2rem;
}

.process-step i {
  font-size: 2rem;
  color: var(--accent);
  margin-bottom: 1rem;
}

.process-step h3 {
  margin-bottom: 0.5rem;
  color: white;
}

.process-cta {
  text-align: center;
  margin-top: 3rem;
}

.process-cta .cta-button {
  background: var(--accent);
  color: var(--primary-dark);
  padding: 1rem 2rem;
  border-radius: 30px;
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  transition: all 0.3s ease;
}

.process-cta .cta-button:hover {
  background: var(--accent-dark);
  transform: translateY(-3px);
}

/* ====== Coverage Section ====== */
.coverage-section {
  padding: 4rem 0;
  background: var(--background);
}

.coverage-content {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2rem;
  margin-top: 2rem;
}

.coverage-map {
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.coverage-info {
  background: white;
  padding: 2rem;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
}

.coverage-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
}

.coverage-list li {
  padding: 0.5rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.coverage-list li::before {
  content: '📍';
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .coverage-content {
    grid-template-columns: 1fr;
  }

  .coverage-map {
    height: 300px;
  }

  .process-step {
    padding: 1.5rem;
  }

  .step-number {
    width: 30px;
    height: 30px;
    font-size: 1rem;
    top: -15px;
  }
}

/* ====== Enhanced CTA Styles ====== */
.cta-button {
  position: relative;
  overflow: hidden;
}

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

.cta-button:hover::after {
  left: 100%;
}

/* ====== Enhanced Trust Badges ====== */
.trust-badges .badge {
  transform: translateY(0);
  transition: transform 0.3s ease;
}

.trust-badges .badge:hover {
  transform: translateY(-5px);
}

/* ====== Enhanced Service Cards ====== */
.service-card {
  position: relative;
  overflow: hidden;
}

.service-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.service-card:hover::before {
  transform: scaleX(1);
}

/* ====== Fieldwire Section Styles ====== */
.fieldwire-section {
  margin-top: 4rem;
  padding: 2rem;
  background: white;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
}

.fieldwire-section h3 {
  color: var(--primary);
  font-size: 1.8rem;
  text-align: center;
  margin-bottom: 2rem;
  position: relative;
}

.fieldwire-section h3::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: var(--accent);
  margin: 1rem auto;
  border-radius: 2px;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.feature-item {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  padding: 1.5rem;
  background: var(--background);
  border-radius: var(--border-radius);
  transition: var(--transition);
  border: 2px solid transparent;
  min-width: 0; /* Permet au contenu de se rétrécir */
}

.feature-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  border-color: var(--accent);
}

.feature-item .feature-icon {
  width: 60px;
  height: 60px;
  min-width: 60px;
  background: var(--primary);
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.feature-item:hover .feature-icon {
  background: var(--accent);
  transform: rotate(-10deg);
}

.feature-item .feature-icon i {
  font-size: 1.5rem;
  color: white;
  transition: var(--transition);
}

.feature-text {
  flex: 1;
  min-width: 0; /* Permet au texte de se rétrécir */
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.feature-text h4 {
  color: var(--primary);
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.feature-text p {
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.6;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.feature-item:hover .feature-text h4 {
  color: var(--primary) !important;
}

.feature-item:hover .feature-text p {
  color: #2d3748 !important;
  font-weight: 500;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .fieldwire-section {
    padding: 1.5rem;
    margin-top: 2rem;
  }

  .fieldwire-section h3 {
    font-size: 1.5rem;
  }

  .feature-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .feature-item {
    padding: 1rem;
  }

  .feature-item .feature-icon {
    width: 50px;
    height: 50px;
    min-width: 50px;
  }
}

/* ====== Enhanced Benefits Grid ====== */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin: 3rem 0;
}

.benefit-card {
  background: white;
  padding: 2rem;
  border-radius: var(--border-radius);
  text-align: center;
  transition: var(--transition);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}

.benefit-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.benefit-card:hover {
  transform: translateY(-10px);
}

.benefit-card:hover::before {
  transform: scaleX(1);
}

.benefit-card .feature-icon {
  width: 80px;
  height: 80px;
  background: var(--background);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  transition: var(--transition);
}

.benefit-card:hover .feature-icon {
  background: var(--accent);
  transform: rotate(-10deg);
}

.benefit-card .feature-icon i {
  font-size: 2rem;
  color: var(--primary);
  transition: var(--transition);
}

.benefit-card:hover .feature-icon i {
  color: var(--primary-dark);
}

.benefit-card h3 {
  color: var(--primary);
  margin-bottom: 1rem;
  font-size: 1.3rem;
}

.benefit-card p {
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* ====== Project Showcase ====== */
.project-showcase {
  padding: 4rem 0;
  background: var(--background);
}

.project-description {
  max-width: 800px;
  margin: 0 auto 3rem;
  text-align: center;
  font-size: 1.1rem;
  color: var(--text);
}

.photo-gallery {
  margin: 2rem 0;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.5rem;
  padding: 1rem;
}

.gallery-img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-radius: var(--border-radius);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: var(--shadow);
}

.gallery-grid a {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius);
}

.gallery-grid a::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(var(--primary), 0.2);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.gallery-grid a:hover::before {
  opacity: 1;
}

.gallery-grid a:hover .gallery-img {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

/* Lightbox Customization */
.lb-data .lb-caption {
  font-size: 1rem;
  font-weight: 500;
  color: white;
}

.lb-data .lb-number {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.8);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    padding: 0.5rem;
  }

  .gallery-img {
    height: 200px;
  }

  .project-description {
    font-size: 1rem;
    padding: 0 1rem;
  }
}

/* Other Projects Section */
.other-projects {
  padding: 4rem 0;
  background: white;
}

.other-projects h2 {
  text-align: center;
  margin-bottom: 3rem;
  color: var(--primary);
  font-size: 2rem;
}

/* ====== Projects Navigation ====== */
.projects-nav {
  padding: 2rem 0;
  background: var(--background);
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin: 2rem 0;
}

.project-card {
  background: white;
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: var(--transition);
  cursor: pointer;
  position: relative;
}

.project-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0,0,0,0.15);
}

.project-card.active {
  border: 2px solid var(--accent);
}

.project-thumb {
  height: 200px;
  overflow: hidden;
  position: relative;
}

.project-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.project-card:hover .project-thumb img {
  transform: scale(1.1);
}

.project-info {
  padding: 1.5rem;
}

.project-info h3 {
  color: var(--primary);
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
}

.project-info p {
  color: var(--text);
  font-size: 0.95rem;
  margin-bottom: 1rem;
}

.project-tag {
  display: inline-block;
  padding: 0.3rem 0.8rem;
  background: var(--accent);
  color: var(--primary-dark);
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 500;
  margin-bottom: 1rem;
}

.view-gallery-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.2rem;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 25px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 100%;
  justify-content: center;
  margin-top: 1rem;
}

.view-gallery-btn:hover {
  background: var(--accent);
  color: var(--primary-dark);
  transform: translateY(-2px);
}

.view-gallery-btn i {
  font-size: 1.1rem;
  transition: transform 0.3s ease;
}

.view-gallery-btn:hover i {
  transform: rotate(15deg);
}

.project-card.coming-soon {
  opacity: 0.7;
  cursor: default;
}

.project-thumb.placeholder {
  background: var(--background);
  display: flex;
  align-items: center;
  justify-content: center;
}

.project-thumb.placeholder i {
  font-size: 3rem;
  color: var(--primary);
  opacity: 0.5;
}

/* Project Details */
.project-details {
  display: flex;
  gap: 2rem;
  margin: 2rem 0;
  flex-wrap: wrap;
  justify-content: center;
}

.detail-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem 1.5rem;
  background: white;
  border-radius: 12px;
  box-shadow: var(--shadow);
}

.detail-item i {
  color: var(--accent);
  font-size: 1.2rem;
}

.detail-item span {
  color: var(--primary);
  font-weight: 500;
}

@media (max-width: 768px) {
  .projects-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
    margin: 1rem 0;
  }

  .project-thumb {
    height: 180px;
  }

  .project-info {
    padding: 1rem;
  }

  .detail-item {
    width: 100%;
    justify-content: center;
  }
}

/* ====== Team Image Section ====== */
.team-image-section {
  margin: 3rem 0;
  padding: 2rem 0;
  background: var(--background);
}

.team-photo {
  width: 100%;
  max-width: 800px;
  height: auto;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  display: block;
  margin: 0 auto;
}

.image-caption {
  text-align: center;
  color: var(--text);
  font-style: italic;
  margin-top: 1rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* ====== Page Entreprise ====== */
.company-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  margin: 2rem 0;
}

.intro-text {
  padding-right: 2rem;
}

.team-image-wrapper {
  position: relative;
}

.team-photo {
  width: 100%;
  height: auto;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
}

.image-caption {
  text-align: center;
  color: var(--text);
  font-style: italic;
  margin-top: 1rem;
  font-size: 0.9rem;
}

.values-section {
  background: var(--background);
  padding: 4rem 0;
  margin: 3rem 0;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.value-card {
  background: white;
  padding: 2rem;
  border-radius: var(--border-radius);
  text-align: center;
  transition: var(--transition);
  box-shadow: var(--shadow);
}

.value-card:hover {
  transform: translateY(-5px);
}

.value-card i {
  font-size: 2.5rem;
  color: var(--primary);
  margin-bottom: 1rem;
}

.value-card h3 {
  color: var(--primary);
  margin-bottom: 1rem;
}

.value-card p {
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.6;
}

.team-section {
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  padding: 4rem 0;
  color: white;
}

/* Nouveaux styles pour la section équipe */
.team-intro {
  text-align: center;
  font-size: 1.2rem;
  margin-bottom: 3rem;
  opacity: 0.9;
}

.team-members {
  margin: 3rem 0;
}

.team-member {
  display: flex;
  align-items: center;
  gap: 3rem;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 2.5rem;
  margin-bottom: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

.team-member:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

.member-photo {
  flex-shrink: 0;
}

.member-img {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--accent);
  transition: all 0.3s ease;
}

.team-member:hover .member-img {
  transform: scale(1.05);
  box-shadow: 0 10px 30px rgba(255, 215, 0, 0.3);
}

.member-info h3 {
  color: var(--accent);
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
}

.member-role {
  font-size: 1.2rem;
  font-weight: 600;
  color: white;
  margin-bottom: 0.3rem;
}

.member-age {
  font-size: 1rem;
  opacity: 0.8;
  margin-bottom: 1.5rem;
}

.member-description p {
  line-height: 1.6;
  margin-bottom: 1.5rem;
  opacity: 0.9;
}

.member-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.skill-tag {
  background: var(--accent);
  color: var(--primary-dark);
  padding: 0.4rem 1rem;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 600;
}

.team-values {
  margin-top: 4rem;
  text-align: center;
}

.team-values h3 {
  color: var(--accent);
  font-size: 1.8rem;
  margin-bottom: 2rem;
}

.team-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.team-features .feature-item {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 15px;
  padding: 2rem;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
  min-width: 0; /* Permet au contenu de se rétrécir */
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.team-features .feature-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  border-color: var(--accent);
}

.team-features .feature-icon {
  width: 60px;
  height: 60px;
  background: rgba(255, 215, 0, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  transition: all 0.3s ease;
  opacity: 1 !important;
}

.team-features .feature-item:hover .feature-icon {
  background: var(--accent) !important;
  transform: scale(1.1);
  opacity: 1 !important;
}

.team-features .feature-icon i {
  font-size: 1.5rem;
  color: var(--accent);
  transition: all 0.3s ease;
  opacity: 1 !important;
}

.team-features .feature-item:hover .feature-icon i {
  color: #1a365d !important;
  opacity: 1 !important;
  font-weight: 600;
}

.team-features .feature-text h4 {
  color: var(--accent) !important;
  margin-bottom: 0.8rem;
  font-size: 1.2rem;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.team-features .feature-text p {
  color: #2d3748 !important;
  opacity: 1;
  line-height: 1.5;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.team-features .feature-item:hover .feature-text h4 {
  color: var(--accent) !important;
}

.team-features .feature-item:hover .feature-text p {
  color: #1a202c !important;
  opacity: 1;
  font-weight: 500;
}

/* Responsive pour la section équipe */
@media (max-width: 768px) {
  .team-member {
    flex-direction: column;
    text-align: center;
    gap: 2rem;
    padding: 2rem;
  }

  .member-img {
    width: 150px;
    height: 150px;
  }

  .member-info h3 {
    font-size: 1.5rem;
  }

  .member-skills {
    justify-content: center;
  }

  .team-features {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .team-features .feature-item {
    padding: 1.5rem;
  }
}

/* Responsive */
@media (max-width: 992px) {
  .company-intro {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .intro-text {
    padding-right: 0;
  }

  .team-photo {
    max-width: 600px;
    margin: 0 auto;
    display: block;
  }
}

@media (max-width: 768px) {
  .values-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .value-card {
    padding: 1.5rem;
  }
}

/* ====== Section Innovation Digitale ====== */
.digital-section {
  padding: 4rem 0;
  background: linear-gradient(to bottom, var(--bg-light), #fff);
  text-align: center;
}

.digital-section h2 {
  font-size: 2rem;
  color: var(--primary);
  margin-bottom: 1.5rem;
  text-align: center;
}

.section-intro {
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--text-dark);
  max-width: 800px;
  margin: 2rem auto;
  text-align: center;
  padding: 0 1rem;
}

.digital-tools {
  margin: 4rem auto;
  max-width: 1200px;
  padding: 0 1rem;
}

.digital-tools h3,
.digital-benefits h3 {
  text-align: center;
  margin-bottom: 2rem;
  color: var(--primary);
  font-size: 1.8rem;
}

.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin: 2rem auto;
  max-width: 1200px;
  padding: 0 1rem;
}

.tool-card {
  background: white;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.tool-card:hover {
  transform: translateY(-5px);
}

.tool-card i {
  font-size: 2.5rem;
  color: var(--primary);
  margin-bottom: 1rem;
}

.tool-card h4 {
  color: var(--text-dark);
  margin: 1rem 0;
  font-size: 1.3rem;
  text-align: center;
}

.tool-card p {
  color: var(--text-muted);
  line-height: 1.5;
  text-align: center;
  max-width: 300px;
  margin: 0 auto;
}

.digital-benefits {
  margin: 4rem auto;
  max-width: 1200px;
  padding: 0 1rem;
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin: 2rem auto;
  max-width: 1200px;
  padding: 0 1rem;
}

.benefit-card {
  background: white;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  text-align: center;
  border: 1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.benefit-card:hover {
  transform: translateY(-5px);
  border-color: var(--primary);
}

.benefit-card i {
  font-size: 2rem;
  color: var(--primary);
  margin-bottom: 1rem;
}

.benefit-card h4 {
  color: var(--text-dark);
  margin: 1rem 0;
  font-size: 1.2rem;
  text-align: center;
}

.benefit-card p {
  color: var(--text-muted);
  line-height: 1.5;
  text-align: center;
  max-width: 250px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .digital-section {
    padding: 2rem 0;
  }

  .section-intro {
    font-size: 1.1rem;
    padding: 0 1rem;
  }

  .tools-grid,
  .benefits-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 0 1rem;
  }

  .tool-card,
  .benefit-card {
    padding: 1.5rem;
  }
}

/* ====== Section Valeurs ====== */
.values-section {
  padding: 4rem 0;
  text-align: center;
}

.values-section h2 {
  font-size: 2rem;
  color: var(--primary);
  margin-bottom: 2rem;
  text-align: center;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin: 2rem auto;
  max-width: 1200px;
  padding: 0 1rem;
}

.value-card {
  background: white;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.value-card:hover {
  transform: translateY(-5px);
}

.value-card i {
  font-size: 2.5rem;
  color: var(--primary);
  margin-bottom: 1.5rem;
}

.value-card h3 {
  color: var(--text-dark);
  margin: 1rem 0;
  font-size: 1.3rem;
  text-align: center;
}

.value-card p {
  color: var(--text-muted);
  line-height: 1.5;
  text-align: center;
  max-width: 250px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .values-section {
    padding: 2rem 0;
  }

  .values-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 0 1rem;
  }

  .value-card {
    padding: 1.5rem;
  }
}

.coverage-description {
  margin-bottom: 2rem;
}

.coverage-highlight {
  font-size: 1.2rem;
  color: var(--primary);
  font-weight: 600;
  margin-bottom: 1rem;
}

.coverage-detail {
  color: var(--text-secondary);
  line-height: 1.6;
}

.coverage-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.coverage-feature {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: var(--bg-light);
  border-radius: 8px;
  transition: transform 0.3s ease;
}

.coverage-feature:hover {
  transform: translateY(-5px);
}

.coverage-feature i {
  font-size: 1.5rem;
  color: var(--primary);
}

.coverage-feature span {
  font-weight: 500;
}

@media (max-width: 768px) {
  .coverage-features {
    grid-template-columns: 1fr;
  }
  
  .coverage-highlight {
    font-size: 1.1rem;
  }
  
  .coverage-feature {
    padding: 0.8rem;
  }
}

/* ========== AMÉLIORATIONS VISUELLES MODERNES ========== */

/* Amélioration du header avec glassmorphism */
.home-header {
  position: relative;
  min-height: 70vh;
  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
  overflow: hidden;
  display: flex;
  align-items: center;
}

.home-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255, 215, 0, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(42, 82, 152, 0.2) 0%, transparent 50%);
  animation: gradientShift 8s ease-in-out infinite;
}

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

.header-pattern {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    linear-gradient(45deg, rgba(255,255,255,0.02) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,255,255,0.02) 25%, transparent 25%);
  background-size: 50px 50px;
  animation: patternMove 20s linear infinite;
}

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

/* Hero content amélioré */
.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
  color: white;
}

.site-title {
  font-size: clamp(3.5rem, 8vw, 6rem);
  font-weight: 800;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, #ffffff 0%, #ffd700 50%, #ffffff 100%);
  background-size: 200% 200%;
  animation: gradientText 3s ease-in-out infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 4px 8px rgba(0,0,0,0.3);
  letter-spacing: 0.05em;
}

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



.value-prop {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(15px);
  padding: 2.5rem;
  border-radius: 25px;
  margin: 3rem 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: var(--shadow-soft);
  animation: floatUp 2s ease-out;
}

@keyframes floatUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Trust badges améliorés */
.trust-badges {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 3rem;
  flex-wrap: wrap;
}

.badge {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  padding: 1.2rem 2rem;
  border-radius: 50px;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: white;
  font-weight: 600;
  border: var(--border-glass);
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  overflow: hidden;
}

.badge::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;
}

.badge:hover::before {
  left: 100%;
}

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

.badge i {
  color: var(--accent);
  font-size: 1.3rem;
  filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.5));
}

/* Amélioration des cartes de service avec effet flottant */
.service-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(15px);
  border-radius: 20px;
  padding: 2.5rem;
  text-align: center;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.3);
  position: relative;
  overflow: hidden;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.1),
    0 2px 8px rgba(0, 0, 0, 0.05);
  transform: translateY(0) rotateX(0) rotateY(0);
  transform-style: preserve-3d;
  will-change: transform;
}

.service-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--gradient-accent);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.service-card:hover::before {
  transform: scaleX(1);
}

.service-card::after {
  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: transform 0.6s ease;
  opacity: 0;
  pointer-events: none;
}

.service-card:hover::after {
  transform: rotate(45deg) translate(50%, 50%);
  opacity: 1;
}

.service-card:hover {
  transform: translateY(-20px) rotateX(10deg) rotateY(5deg) scale(1.02);
  box-shadow: 
    0 25px 50px rgba(0, 0, 0, 0.15),
    0 10px 30px rgba(0, 0, 0, 0.1),
    0 0 40px rgba(30, 60, 114, 0.1);
  background: rgba(255, 255, 255, 1);
  border-color: rgba(255, 215, 0, 0.3);
}

.service-card i {
  transition: all 0.3s ease;
  position: relative;
  z-index: 2;
}

.service-card:hover i {
  transform: translateY(-5px) scale(1.1);
  color: var(--accent);
  text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
}

.service-card i {
  font-size: 3rem;
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 1.5rem;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1));
  transition: all 0.3s ease;
}

.service-card:hover i {
  transform: scale(1.1) rotateY(360deg);
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.2));
}

/* Amélioration des boutons CTA */
.cta-button {
  position: relative;
  background: var(--gradient-primary);
  color: white;
  padding: 1.2rem 2.5rem;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
  overflow: hidden;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.cta-button::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;
}

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

.cta-button:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 15px 35px rgba(0,0,0,0.25);
  background: var(--gradient-secondary);
}

.cta-button i {
  transition: transform 0.3s ease;
}

.cta-button:hover i {
  transform: translateX(5px);
}

/* Animations au scroll */
@keyframes slideInFromLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInFromRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Classes pour les animations au scroll */
.fade-in-up {
  animation: fadeInUp 0.8s ease-out;
}

.slide-in-left {
  animation: slideInFromLeft 0.8s ease-out;
}

.slide-in-right {
  animation: slideInFromRight 0.8s ease-out;
}

/* Amélioration de la navigation */
.navbar {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

.navbar.scrolled {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 8px 30px rgba(0,0,0,0.15);
}

.nav-links a {
  position: relative;
  transition: all 0.3s ease;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  width: 0;
  height: 3px;
  background: var(--gradient-accent);
  transition: all 0.3s ease;
  transform: translateX(-50%);
  border-radius: 2px;
}

.nav-links a:hover::after {
  width: 100%;
}

/* Particules flottantes pour l'arrière-plan */
.floating-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}

.particle {
  position: absolute;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  animation: float 6s ease-in-out infinite;
}

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

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

.particle:nth-child(3) {
  width: 25px;
  height: 25px;
  top: 80%;
  left: 10%;
  animation-delay: 4s;
}

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

/* Responsive amélioré */
@media (max-width: 768px) {
  .home-header {
    min-height: 60vh;
    padding: 3rem 0;
  }
  
  .site-title {
    font-size: 2.5rem;
  }
  
  .value-prop {
    padding: 2rem;
    margin: 2rem 1rem;
  }
  
  .trust-badges {
    gap: 1rem;
    padding: 0 1rem;
  }
  
  .badge {
    padding: 1rem 1.5rem;
    font-size: 0.9rem;
  }
  
  .service-card:hover {
    transform: translateY(-10px);
  }
}









/* Mobile responsive */
@media (max-width: 768px) {
  .team-member {
    flex-direction: column;
    gap: 2rem;
    padding: 2rem;
    text-align: center;
  }

  .member-photo {
    flex: none;
    align-self: center;
  }

  .member-img {
    width: 200px;
    height: 200px;
  }

  .member-info h3 {
    font-size: 2rem;
  }

  .member-role {
    font-size: 1.2rem;
  }

  .team-navigation {
    gap: 1rem;
    padding: 0.5rem 0;
  }

  .team-nav-btn {
    min-width: 100px;
    padding: 0.8rem 1rem;
  }

  .nav-number {
    width: 25px;
    height: 25px;
    font-size: 1.2rem;
  }

  .nav-name {
    font-size: 0.8rem;
  }
  
  /* Cartes flottantes adaptées au mobile */
  .service-card:hover,
  .testimonial-card:hover,
  .contact-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
  }
  
  /* Réduction des effets 3D sur mobile */
  .floating-card:hover {
    transform: translateY(-10px) scale(1.01);
  }
  
  /* Particules moins visibles sur mobile */
  .floating-particles {
    opacity: 0.5;
  }
}

@media (max-width: 390px) {
  .team-member {
    padding: 1.5rem;
  }

  .member-img {
    width: 150px;
    height: 150px;
  }

  .member-info h3 {
    font-size: 1.6rem;
  }

  .member-role {
    font-size: 1rem;
  }

  .member-description p {
    font-size: 1rem;
  }

  .skill-tag {
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
  }

  .team-navigation {
    gap: 0.8rem;
    flex-direction: column;
    align-items: center;
  }

  .team-nav-btn {
    min-width: 80px;
    padding: 0.6rem 0.8rem;
    flex-direction: row;
    gap: 0.5rem;
  }

  .nav-number {
    width: 20px;
    height: 20px;
    font-size: 1rem;
  }

  .nav-name {
    font-size: 0.7rem;
  }
}

/* ====== Petits écrans pour la page d'accueil (iPhone 12 et moins) ====== */
@media (max-width: 390px) {
  .site-title {
    font-size: 1.8rem !important;
  }
  
  .home-header {
    min-height: 50vh !important;
    padding: 2rem 0 !important;
  }
  
  .value-prop {
    padding: 1.5rem !important;
    margin: 1.5rem 0.5rem !important;
  }
  
  .badge {
    padding: 0.8rem 1.2rem !important;
    font-size: 0.8rem !important;
  }
}

/* Effets de survol pour tous les éléments interactifs */
.interactive-element {
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.interactive-element:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

/* Amélioration des témoignages avec effet flottant */
.testimonial-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(15px);
  border-radius: 20px;
  padding: 2.5rem;
  text-align: center;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.3);
  position: relative;
  overflow: hidden;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.1),
    0 2px 8px rgba(0, 0, 0, 0.05);
  transform: translateY(0) rotateX(0) rotateY(0);
  transform-style: preserve-3d;
  will-change: transform;
}

.testimonial-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--gradient-accent);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.testimonial-card:hover::before {
  transform: scaleX(1);
}

.testimonial-card::after {
  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: transform 0.6s ease;
  opacity: 0;
  pointer-events: none;
}

.testimonial-card:hover::after {
  transform: rotate(45deg) translate(50%, 50%);
  opacity: 1;
}

.testimonial-card:hover {
  transform: translateY(-20px) rotateX(10deg) rotateY(-5deg) scale(1.02);
  box-shadow: 
    0 25px 50px rgba(0, 0, 0, 0.15),
    0 10px 30px rgba(0, 0, 0, 0.1),
    0 0 40px rgba(30, 60, 114, 0.1);
  background: rgba(255, 255, 255, 1);
  border-color: rgba(255, 215, 0, 0.3);
}

.stars {
  font-size: 1.5rem;
  color: var(--accent);
  margin-bottom: 1rem;
  filter: drop-shadow(0 2px 4px rgba(255, 215, 0, 0.3));
  transition: all 0.3s ease;
  position: relative;
  z-index: 2;
}

.testimonial-card:hover .stars {
  transform: scale(1.1);
  color: var(--accent);
  text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
  filter: drop-shadow(0 4px 8px rgba(255, 215, 0, 0.5));
}

/* ===============================
   AMÉLIORATIONS FORMULAIRE DEVIS
   =============================== */

/* En-tête d'étape avec icône */
.step-header {
  text-align: center;
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: linear-gradient(135deg, #f8f9ff 0%, #e3e8ff 100%);
  border-radius: 12px;
  border: 1px solid rgba(30, 60, 114, 0.1);
  position: relative;
  overflow: hidden;
}

.step-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, transparent 40%, rgba(255, 255, 255, 0.1) 50%, transparent 60%);
  animation: shimmer 3s infinite;
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.step-icon {
  font-size: 2rem;
  color: var(--primary);
  margin-bottom: 0.5rem;
  display: block;
  animation: bounceIn 0.8s ease-out;
}

@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3) rotate(-45deg);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.1) rotate(10deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

.step-header h3 {
  color: var(--primary);
  margin: 0.5rem 0;
  font-size: 1.5rem;
  font-weight: 600;
}

.step-description {
  color: #666;
  margin: 0;
  font-size: 1rem;
  opacity: 0.9;
}

/* Groupes de champs améliorés */
.form-group.enhanced {
  margin-bottom: 1.5rem;
  position: relative;
}

.form-group.enhanced label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--primary-dark);
  margin-bottom: 0.75rem;
  font-size: 1rem;
}

.label-icon {
  color: var(--primary);
  font-size: 0.9rem;
  transition: transform 0.3s ease;
}

.form-group.enhanced:hover .label-icon {
  transform: scale(1.1);
}

.optional {
  font-size: 0.8rem;
  color: #888;
  font-weight: 400;
  margin-left: 0.5rem;
  padding: 0.2rem 0.5rem;
  background: rgba(0,0,0,0.05);
  border-radius: 10px;
}

/* Wrapper pour les selects avec flèche personnalisée */
.select-wrapper {
  position: relative;
}

.select-wrapper select {
  width: 100%;
  padding: 1rem 3rem 1rem 1rem;
  border: 2px solid #e1e5e9;
  border-radius: 8px;
  font-size: 1rem;
  background: white;
  color: #333;
  transition: all 0.3s ease;
  cursor: pointer;
  appearance: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.select-wrapper select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(30, 60, 114, 0.1);
  outline: none;
  transform: translateY(-1px);
}

.select-wrapper select:hover {
  border-color: var(--primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.select-arrow {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--primary);
  pointer-events: none;
  transition: transform 0.3s ease;
}

.select-wrapper:hover .select-arrow,
.select-wrapper:focus-within .select-arrow {
  transform: translateY(-50%) rotate(180deg);
}

/* Actions du formulaire */
.form-actions {
  text-align: center;
  margin-top: 2.5rem;
  padding: 1.5rem;
  background: rgba(248, 249, 255, 0.5);
  border-radius: 12px;
  border: 1px solid rgba(30, 60, 114, 0.05);
}

.enhanced-btn {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: white;
  border: none;
  padding: 1rem 2rem;
  border-radius: 50px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  box-shadow: 0 4px 15px rgba(30, 60, 114, 0.3);
  min-width: 200px;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.enhanced-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.5s;
}

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

.enhanced-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(30, 60, 114, 0.4);
  scale: 1.02;
}

.enhanced-btn:active {
  transform: translateY(0);
  scale: 0.98;
}

.enhanced-btn i {
  transition: transform 0.3s ease;
}

.enhanced-btn:hover i {
  transform: translateX(3px);
}

.form-help {
  margin-top: 1rem;
  font-size: 0.9rem;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  opacity: 0.8;
}

.form-help i {
  color: var(--accent);
  animation: pulse 2s infinite;
}

/* Animations d'apparition */
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.form-group.enhanced {
  animation: slideInUp 0.6s ease-out;
  animation-fill-mode: both;
}

.form-group.enhanced:nth-child(2) { animation-delay: 0.1s; }
.form-group.enhanced:nth-child(3) { animation-delay: 0.2s; }
.form-group.enhanced:nth-child(4) { animation-delay: 0.3s; }
.form-actions { animation-delay: 0.4s; }

/* Responsive design */
@media (max-width: 768px) {
  .step-header {
    padding: 1rem;
    margin-bottom: 1.5rem;
  }
  
  .step-header h3 {
    font-size: 1.25rem;
  }
  
  .enhanced-btn {
    width: 100%;
    padding: 1rem;
    min-width: auto;
  }
  
  .form-group.enhanced label {
    font-size: 0.95rem;
  }
  
  .select-wrapper select {
    font-size: 0.95rem;
    padding: 0.9rem 2.5rem 0.9rem 0.9rem;
  }
}

@media (max-width: 768px) {
  .step-header {
    text-align: center;
    margin-bottom: 1.5rem;
  }

  .step-header h3 {
    font-size: 1.2rem;
  }

  .enhanced-btn {
    padding: 0.8rem 1.5rem;
    font-size: 0.9rem;
  }

  .form-group.enhanced label {
    font-size: 0.9rem;
  }

  .select-wrapper select {
    font-size: 0.9rem;
  }
}

/* Styles pour le contact d'urgence */
.urgent-contact {
  background: linear-gradient(135deg, #ffd700, #e6c200);
  color: white !important;
  padding: 1rem 1.5rem;
  border-radius: 25px;
  margin-top: 1rem;
  text-align: center;
  box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);
  border: none;
  animation: pulseGlow 3s infinite;
}

.urgent-contact i {
  color: white;
  margin-right: 0.5rem;
  animation: ring 2s infinite;
}

.urgent-contact strong {
  font-weight: 700;
  font-size: 1.1rem;
  text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);
  }
  50% {
    box-shadow: 0 6px 25px rgba(255, 107, 53, 0.5);
  }
}

@keyframes ring {
  0%, 20%, 50%, 80%, 100% {
    transform: rotate(0deg);
  }
  10% {
    transform: rotate(-10deg);
  }
  30% {
    transform: rotate(10deg);
  }
  40% {
    transform: rotate(-5deg);
  }
  60% {
    transform: rotate(5deg);
  }
}

/* Styles pour le message de maintenance */
.maintenance-notice {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border: 2px solid #dee2e6;
  border-radius: 15px;
  padding: 2rem;
  margin: 2rem 0;
  text-align: center;
  box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.notice-content {
  max-width: 500px;
  margin: 0 auto;
}

.maintenance-notice i {
  font-size: 3rem;
  color: #ffc107;
  margin-bottom: 1rem;
  animation: bounce 2s infinite;
}

.maintenance-notice h3 {
  color: #495057;
  margin-bottom: 1rem;
  font-size: 1.5rem;
}

.maintenance-notice p {
  color: #6c757d;
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.contact-urgence {
  background: linear-gradient(135deg, #28a745, #20c997);
  color: white;
  padding: 1.5rem;
  border-radius: 12px;
  margin: 1.5rem 0;
  box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
}

.phone-direct {
  display: block;
  font-size: 1.8rem;
  font-weight: 700;
  color: white;
  text-decoration: none;
  margin: 0.5rem 0;
  transition: all 0.3s ease;
}

.phone-direct:hover {
  color: #f8f9fa;
  transform: scale(1.05);
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.contact-urgence small {
  display: block;
  font-size: 0.9rem;
  opacity: 0.9;
  margin-top: 0.5rem;
}

.try-form-btn {
  background: linear-gradient(135deg, #007bff, #0056b3);
  color: white;
  border: none;
  padding: 1rem 2rem;
  border-radius: 25px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 1rem;
  box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
}

.try-form-btn:hover {
  background: linear-gradient(135deg, #0056b3, #004085);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 123, 255, 0.4);
}

.try-form-btn i {
  margin-right: 0.5rem;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

@media (max-width: 768px) {
  .maintenance-notice {
    padding: 1.5rem;
    margin: 1rem 0;
  }
  
  .phone-direct {
    font-size: 1.5rem;
  }
  
  .contact-urgence {
    padding: 1rem;
  }
}

/* ====== GRILLE DE CARTES ÉQUIPE MODERNE ====== */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
  margin: 4rem 0;
}

.team-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 24px;
  overflow: hidden;
  position: relative;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 
    0 4px 20px rgba(0, 0, 0, 0.08),
    0 1px 4px rgba(0, 0, 0, 0.04);
}

.team-card:hover {
  transform: translateY(-8px);
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.12),
    0 8px 16px rgba(0, 0, 0, 0.08);
  border-color: rgba(30, 60, 114, 0.1);
}

.card-image {
  position: relative;
  height: 280px;
  overflow: hidden;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.member-avatar {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  transition: all 0.3s ease;
  border: 4px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.team-card:hover .member-avatar {
  transform: scale(1.05);
  border-color: rgba(30, 60, 114, 0.2);
}

.card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, transparent 0%, rgba(0, 0, 0, 0.1) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 1.5rem;
}

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

.role-badge {
  background: rgba(30, 60, 114, 0.9);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.card-content {
  padding: 2rem;
}

.member-name {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 0.5rem;
  line-height: 1.2;
}

.member-title {
  font-size: 1.1rem;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 0.3rem;
}

.member-exp {
  font-size: 0.95rem;
  color: #6c757d;
  margin-bottom: 1.5rem;
  font-weight: 500;
}

.member-bio {
  margin-bottom: 1.5rem;
}

.member-bio p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #495057;
  margin: 0;
}

.skills-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.skill-pill {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  color: var(--primary);
  padding: 0.4rem 0.8rem;
  border-radius: 16px;
  font-size: 0.8rem;
  font-weight: 500;
  border: 1px solid rgba(30, 60, 114, 0.1);
  transition: all 0.2s ease;
}

.skill-pill:hover {
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(30, 60, 114, 0.2);
}

/* Animation d'entrée staggered */
.team-card:nth-child(1) {
  animation: slideUp 0.6s ease-out;
}

.team-card:nth-child(2) {
  animation: slideUp 0.6s ease-out 0.2s both;
}

.team-card:nth-child(3) {
  animation: slideUp 0.6s ease-out 0.4s both;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive Design pour la grille équipe */
@media (max-width: 768px) {
  .team-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin: 2rem 0;
  }

  .team-card {
    border-radius: 20px;
  }

  .card-image {
    height: 240px;
  }

  .member-avatar {
    width: 160px;
    height: 160px;
  }

  .card-content {
    padding: 1.5rem;
  }

  .member-name {
    font-size: 1.3rem;
  }

  .member-title {
    font-size: 1rem;
  }

  .member-bio p {
    font-size: 0.9rem;
  }

  .skill-pill {
    font-size: 0.75rem;
    padding: 0.3rem 0.6rem;
  }
}

@media (max-width: 480px) {
  .team-grid {
    gap: 1rem;
  }

  .card-image {
    height: 200px;
  }

  .member-avatar {
    width: 120px;
    height: 120px;
  }

  .card-content {
    padding: 1rem;
  }

  .member-name {
    font-size: 1.2rem;
  }

  .role-badge {
    font-size: 0.7rem;
    padding: 0.4rem 0.8rem;
  }
}