/* Styles uniques pour différencier les pages de services */

/* ===== PAGE SERVICES MÉCANIQUES ===== */
.services-mecaniques .hero-section {
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #1a1a1a 100%);
  position: relative;
  overflow: hidden;
}

.services-mecaniques .hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="mechanical" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1" fill="rgba(255,255,255,0.1)"/><rect x="8" y="8" width="4" height="4" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23mechanical)"/></svg>');
  opacity: 0.3;
}

.services-mecaniques .process-step {
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.services-mecaniques .process-step:hover {
  transform: translateY(-5px);
  border-color: var(--bs-primary);
  box-shadow: 0 10px 25px rgba(33, 92, 92, 0.2);
}

.services-mecaniques .equipment-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border: 1px solid #e9ecef;
  transition: all 0.3s ease;
}

.services-mecaniques .equipment-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
  border-color: var(--bs-primary);
}

/* ===== PAGE SERVICES INFORMATIQUES ===== */
.services-informatiques .hero-section {
  background: linear-gradient(135deg, #0d1117 0%, #161b22 50%, #0d1117 100%);
  position: relative;
  overflow: hidden;
}

.services-informatiques .hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="code" width="10" height="10" patternUnits="userSpaceOnUse"><rect x="0" y="0" width="10" height="10" fill="none" stroke="rgba(0,255,0,0.1)" stroke-width="0.5"/><text x="5" y="7" font-family="monospace" font-size="4" fill="rgba(0,255,0,0.2)" text-anchor="middle">01</text></pattern></defs><rect width="100" height="100" fill="url(%23code)"/></svg>');
  opacity: 0.4;
}

.services-informatiques .tech-card {
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  border: 1px solid #e9ecef;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.services-informatiques .tech-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 123, 255, 0.1), transparent);
  transition: left 0.6s ease;
}

.services-informatiques .tech-card:hover::before {
  left: 100%;
}

.services-informatiques .tech-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 123, 255, 0.2);
  border-color: #007bff;
}

.services-informatiques .methodology-step {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border: 1px solid #e9ecef;
  transition: all 0.3s ease;
}

.services-informatiques .methodology-step:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
  border-color: #007bff;
}

/* ===== PAGE SERVICES MÉCATRONIQUES ===== */
.services-mecatroniques .hero-section {
  background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 50%, #1e3a8a 100%);
  position: relative;
  overflow: hidden;
}

.services-mecatroniques .hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="circuit" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="2" fill="rgba(255,255,255,0.1)"/><path d="M5,10 L15,10 M10,5 L10,15" stroke="rgba(255,255,255,0.1)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23circuit)"/></svg>');
  opacity: 0.3;
}

.services-mecatroniques .innovation-card {
  background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%);
  border: 1px solid #e0f2fe;
  transition: all 0.3s ease;
}

.services-mecatroniques .innovation-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(59, 130, 246, 0.2);
  border-color: #3b82f6;
}

.services-mecatroniques .application-card {
  background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%);
  border: 1px solid #e0f2fe;
  transition: all 0.3s ease;
}

.services-mecatroniques .application-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(59, 130, 246, 0.2);
  border-color: #3b82f6;
}

/* ===== PAGE SERVICES AUTRES ===== */
.services-autres .hero-section {
  background: linear-gradient(135deg, #059669 0%, #10b981 50%, #059669 100%);
  position: relative;
  overflow: hidden;
}

.services-autres .hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="construction" width="15" height="15" patternUnits="userSpaceOnUse"><rect x="0" y="0" width="15" height="15" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="0.5"/><rect x="3" y="3" width="9" height="9" fill="rgba(255,255,255,0.05)"/></pattern></defs><rect width="100" height="100" fill="url(%23construction)"/></svg>');
  opacity: 0.3;
}

.services-autres .sector-card {
  background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
  border: 1px solid #dcfce7;
  transition: all 0.3s ease;
}

.services-autres .sector-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(16, 185, 129, 0.2);
  border-color: #10b981;
}

.services-autres .process-card {
  background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
  border: 1px solid #dcfce7;
  transition: all 0.3s ease;
}

.services-autres .process-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(16, 185, 129, 0.2);
  border-color: #10b981;
}

/* ===== ANIMATIONS SPÉCIFIQUES ===== */
@keyframes mechanicalPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes codeGlow {
  0%, 100% { box-shadow: 0 0 5px rgba(0, 255, 0, 0.3); }
  50% { box-shadow: 0 0 20px rgba(0, 255, 0, 0.6); }
}

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

@keyframes constructionBuild {
  0% { transform: translateY(20px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

/* ===== EFFETS SPÉCIFIQUES PAR PAGE ===== */
.services-mecaniques .equipment-icon i {
  animation: mechanicalPulse 2s infinite;
}

.services-informatiques .tech-icon i {
  animation: codeGlow 2s infinite;
}

.services-mecatroniques .innovation-icon i {
  animation: circuitFlow 3s infinite;
}

.services-autres .sector-icon i {
  animation: constructionBuild 1s ease-out;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .services-mecaniques .hero-section::before,
  .services-informatiques .hero-section::before,
  .services-mecatroniques .hero-section::before,
  .services-autres .hero-section::before {
    opacity: 0.1;
  }
  
  .services-mecaniques .process-step:hover,
  .services-informatiques .tech-card:hover,
  .services-mecatroniques .innovation-card:hover,
  .services-autres .sector-card:hover {
    transform: none;
  }
}


/* ===== COULEURS THÉMATIQUES ===== */
.services-mecaniques {
  --theme-color: #215c5c;
  --theme-light: #f8f9fa;
}

.services-informatiques {
  --theme-color: #007bff;
  --theme-light: #f0f9ff;
}

.services-mecatroniques {
  --theme-color: #3b82f6;
  --theme-light: #f0f9ff;
}

.services-autres {
  --theme-color: #10b981;
  --theme-light: #f0fdf4;
}