/* CSS dédié pour la page Missions - GlobalInfoTom */

/* Variables spécifiques aux missions */
:root {
  --mission-card-bg: var(--bg-card);
  --mission-card-shadow: var(--shadow);
  --mission-card-shadow-hover: 0 10px 30px rgba(0, 0, 0, 0.1);
  --mission-spacing: var(--space-6);
  --mission-padding: var(--space-4);
  --mission-border-radius: var(--radius-lg);
}

/* Styles de base pour les sections client */
.client-section {
  /* Visibilité assurée */
  opacity: 0;
  visibility: visible;
  
  /* Styles visuels */
  background-color: var(--mission-card-bg);
  margin-bottom: var(--mission-spacing);
  padding: var(--mission-padding);
  border-radius: var(--mission-border-radius);
  box-shadow: var(--mission-card-shadow);
  
  /* Animation d'entrée préservée */
  transform: translateY(20px);
  animation: fadeInUp 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  
  /* Transitions pour les interactions */
  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}

/* Styles pour les contrats individuels */
.contrat {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.contrat:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* Header du client */
.client-header {
  margin-bottom: var(--space-4);
}

.client-name {
  color: var(--primary);
  font-weight: 600;
  font-size: var(--text-2xl);
  margin-bottom: var(--space-2);
}

.client-resume {
  color: var(--text-secondary);
  font-style: italic;
  margin-bottom: var(--space-3);
}

/* Header du contrat */
.contrat-header {
  margin-bottom: var(--space-3);
}

.periode {
  color: var(--text-secondary);
  font-weight: 500;
  font-size: var(--text-base);
}

/* Styles de base pour les expériences (compatibilité) */
.experience, .client-section {
  /* Visibilité assurée */
  opacity: 0;
  visibility: visible;
  
  /* Styles visuels */
  background-color: var(--mission-card-bg);
  margin-bottom: var(--mission-spacing);
  padding: var(--mission-padding);
  border-radius: var(--mission-border-radius);
  box-shadow: var(--mission-card-shadow);
  
  /* Animation d'entrée préservée */
  transform: translateY(20px);
  animation: fadeInUp 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  
  /* Transitions pour les interactions */
  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}

/* Délais d'animation échelonnés pour un effet cascade */
.client-section:nth-child(1), .experience:nth-child(1) { animation-delay: 0.1s; }
.client-section:nth-child(2), .experience:nth-child(2) { animation-delay: 0.2s; }
.client-section:nth-child(3), .experience:nth-child(3) { animation-delay: 0.3s; }
.client-section:nth-child(4), .experience:nth-child(4) { animation-delay: 0.4s; }
.client-section:nth-child(5), .experience:nth-child(5) { animation-delay: 0.5s; }
.client-section:nth-child(6), .experience:nth-child(6) { animation-delay: 0.6s; }
.client-section:nth-child(7), .experience:nth-child(7) { animation-delay: 0.7s; }
.client-section:nth-child(8), .experience:nth-child(8) { animation-delay: 0.8s; }
.client-section:nth-child(9), .experience:nth-child(9) { animation-delay: 0.9s; }
.client-section:nth-child(10), .experience:nth-child(10) { animation-delay: 1.0s; }
.client-section:nth-child(11), .experience:nth-child(11) { animation-delay: 1.1s; }
.client-section:nth-child(12), .experience:nth-child(12) { animation-delay: 1.2s; }

/* Effet hover pour les cartes d'expérience et sections client */
.client-section:hover, .experience:hover {
  transform: translateY(-5px);
  box-shadow: var(--mission-card-shadow-hover);
}

/* Styles pour les éléments de texte */
.experience .titre {
  color: var(--text-primary);
  font-weight: 600;
  font-size: var(--text-xl);
  margin-bottom: var(--space-2);
}

.experience .societe {
  color: var(--primary);
  font-weight: 500;
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}

.experience .detail {
  color: var(--text-secondary);
  font-size: var(--text-base);
  margin-bottom: var(--space-3);
}

.experience p {
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-3);
}

/* Styles pour les missions */
.mission {
  color: var(--text-secondary);
  margin: var(--space-2) 0;
  padding: var(--space-2);
  border-radius: var(--radius-md);
  transition: background-color 0.2s ease-out, padding 0.2s ease-out;
}

.mission:hover {
  background-color: rgba(37, 99, 235, 0.05);
  padding: var(--space-3);
}

/* Animation pour les détails de mission */
.details_mission {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-out, padding 0.5s ease-out;
  color: var(--text-muted);
  padding: 0;
}

/* Indicateur et état pour les missions avec détails */
.mission.has-details {
  cursor: pointer;
  position: relative;
}

.mission.has-details::after {
  content: "▸";
  position: absolute;
  right: var(--space-2);
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.2s ease;
  color: var(--text-secondary);
}

.mission.open .details_mission {
  max-height: 500px;
  padding: var(--space-2) 0;
}

/* Rotation de la flèche quand ouvert */
.mission.open::after {
  transform: translateY(-50%) rotate(90deg);
}

/* Hover behaviour only on devices that support hover */
@media (hover: hover) and (pointer: fine) {
  .mission:hover .details_mission {
    max-height: 500px;
    padding: var(--space-2) 0;
  }
}

.detail_mission {
  color: var(--text-muted);
  font-size: var(--text-sm);
  margin: var(--space-1) 0;
}

/* Styles pour les logos */
.experience .logo,
.client-section .logo {
  /* Positionnement et visibilité */
  display: block;
  float: right;
  clear: both;
  
  /* Dimensions */
  max-width: 25%;
  height: auto;
  
  /* Styles visuels */
  border-radius: var(--radius-md);
  margin: 0 0 var(--space-2) var(--space-2);
  
  /* Transitions */
  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
  
  /* Assurer la visibilité */
  opacity: 1;
  visibility: visible;
}

.experience .logo:hover,
.client-section .logo:hover {
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Correction pour les images vides ou manquantes */
.experience .logo[src=""], 
.experience .logo:not([src]),
.client-section .logo[src=""], 
.client-section .logo:not([src]) {
  display: none;
}

/* Styles pour les titres de section */
#missions {
  color: var(--text-primary);
  font-weight: 600;
  font-size: var(--text-lg);
  margin: var(--space-4) 0 var(--space-2) 0;
}

/* Responsive design pour les missions */
@media (max-width: 768px) {
  .experience,
  .client-section {
    padding: var(--space-3);
    margin-bottom: var(--space-4);
  }
  
  .experience .logo,
  .client-section .logo {
    max-width: 40%;
  }
  
  .experience .titre {
    font-size: var(--text-lg);
  }
  
  .experience .societe {
    font-size: var(--text-base);
  }
}

@media (max-width: 480px) {
  .experience,
  .client-section {
    padding: var(--space-2);
    margin-bottom: var(--space-3);
  }
  
  .experience .logo,
  .client-section .logo {
    max-width: 50%;
  }
  
  .mission {
    padding: var(--space-1);
  }
  
  .mission:hover {
    padding: var(--space-2);
  }
}

/* Animation d'entrée fadeInUp (reprise du fichier animations.css) */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Support des préférences utilisateur pour les animations */
@media (prefers-reduced-motion: reduce) {
  .experience {
    animation: none;
    opacity: 1;
    transform: none;
  }
  
  .experience:hover {
    transform: none;
  }
  
  .logo:hover {
    transform: none;
  }
  
  .mission:hover {
    background-color: rgba(37, 99, 235, 0.05);
    padding: var(--space-3);
  }
}

/* Optimisations pour les performances */
.experience,
.logo {
  will-change: transform;
}