:root {
  --primary-color: #108bf0; /* Bleu principal */
  --secondary-color: #2c3e50; /* Bleu foncé pour textes importants */
  --accent-color: #e74c3c; /* Rouge/Orange pour accents (alerte/frein) - Moins utilisé maintenant */
  --success-color: #2ecc71; /* Vert pour succès */
  --warning-color: #f39c12; /* Orange pour tendance/attention */
  --light-bg: #ecf0f1; /* Fond clair */
  --lighter-bg: #f8f9fa; /* Fond très clair */
  --text-color: #34495e; /* Couleur de texte principale */
  --border-color: #bdc3c7; /* Couleur de bordure légère */
  --shadow-color: rgba(0, 0, 0, 0.1); /* Ombre légère */

  /* Icônes Unicode */
  --icon-evaluation: "📊"; /* Ou 📋 */
  --icon-tools: "🛠️"; /* Ou 💡 */
  --icon-training: "🎓";
  --icon-bilan: "🏛️"; /* Icône pour la section Bilan/Fondation */
  --icon-evolution: "🚀"; /* Icône pour la section Évolution */
}



/* DÉBUT DES SECTIONS CORRIGÉES */
body {
background-color: #f5f5f5;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
color: #333;
min-height: 100vh; /* Hauteur minimale de 100% de la hauteur de la fenêtre */
display: flex;
flex-direction: column;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 50px;
  background-color: white;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.logo img {
height: 50px;
padding-top: 20px;
}

.search-container {
display: flex;
align-items: center;
}

.search-box {
padding: 8px 12px;
border: 1px solid #ddd;
border-radius: 4px;
margin-right: 10px;
font-size: 14px;
}

.search-icon {
font-size: 20px;
color: #333;
cursor: pointer;
}

.main-nav {
  display: flex;
  justify-content: right;
  background-color: white;
  padding: 5px 0;
  margin-bottom:-25px;
}

.main-nav ul {
display: flex;
list-style: none;
}

.main-nav ul li {
margin: 0 15px;
}

.main-nav ul li a {
text-decoration: none;
color: #333;
font-weight: 500;
padding: 5px 0;
transition: color 0.3s;
display: flex;
align-items: center;
}

.home-icon {
  margin-right: 0.1px;
  font-size: 14px;
  position: relative;
  top: -1px;
  display: inline-flex;
  align-items: center;
}

.main-nav ul li a:hover {
color: #0066cc;
}

.main-nav ul li:first-child a {
display: inline-flex;
align-items: center;
justify-content: center;
padding-top: 3px;
}

/* Media query pour les appareils mobiles */
@media (max-width: 768px) {
.header {
  padding: 15px 20px;
  flex-direction: column;
}

.main-nav ul {
  flex-wrap: wrap;
  justify-content: center;
}
}

.hero-contain {
  font-size: 16px;
  color: #f5f5f5;
  background-image: url("../images/BatimentIRR.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin-top: 15px;
}
.hero-title {
  font-size: 32px;
  font-weight: bold;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
  padding: 50px;
  height: 5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 15px;
}

.link-white a:link {
color: white;
}

.link-white a:visited {
color: white;
}

.link-white a:hover {
color: white; /* ou une couleur légèrement différente comme #e0e0e0 pour l'effet hover */
}


.footer {
  text-align: center;
  font-size: 0.9em;
  line-height: 0.5em; 
  color: #817979;
  width: 100%;
}
.description {
  margin-left: 50px;
  margin-right: 40px;
  text-align: justify;
}

.container{
  margin-left: 50px;
  margin-right: 50px;
  text-align: justify;
}
/* FIN DES SECTIONS CORRIGÉES */

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

h2 {
  font-family: 'Poppins', sans-serif;
  color: var(--primary-color);
  margin-top: 40px;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--primary-color);
  font-size: 1.8em;
  display: flex; /* Pour aligner l'icône */
  align-items: center; /* Pour aligner l'icône */
}
/* Icônes devant les H2 */
h2::before {
  margin-right: 12px;
  font-size: 1.3em; /* Taille icône H2 */
  line-height: 1;
}
.bilan-section h2::before { content: var(--icon-bilan); }
.evolution-section h2::before { content: var(--icon-evolution); }
/* Pour H2 des services, pas d'icône par défaut, mais on peut en ajouter via une classe */


h3 {
  font-family: 'Poppins', sans-serif;
  color: var(--secondary-color);
  margin-top: 30px;
  margin-bottom: 15px;
  font-size: 1.4em;
  display: flex; /* Pour aligner l'icône */
  align-items: center; /* Pour aligner l'icône */
}

/* Style pour les icônes devant les H3 */
h3::before {
   margin-right: 10px;
   font-size: 1.5em; /* Taille de l'icône H3 */
   line-height: 1;
}
.evaluation h3::before { content: var(--icon-evaluation); }
.tools h3::before { content: var(--icon-tools); }
.training h3::before { content: var(--icon-training); }


/* Modification des sélecteurs pour les listes afin d'exclure la navigation */

/* Style pour les listes du contenu principal uniquement */
.container ul {
  list-style: none; /* On enlève les puces par défaut */
  padding-left: 0;
}

.container li {
  position: relative;
  padding-left: 25px; /* Espace pour la puce personnalisée */
  margin-bottom: 10px;
}

/* Puce personnalisée pour le contenu principal uniquement */
.container li::before {
  content: '•'; /* Puce standard */
  color: var(--primary-color);
  font-weight: bold;
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
  font-size: 1.2em;
}

/* S'assurer que les styles de navigation ne sont pas affectés */
.main-nav ul {
  display: flex;
  list-style: none;
  padding-left: 0;
}

.main-nav ul li {
  margin: 0 15px;
  padding-left: 0; /* Annuler le padding ajouté pour les puces personnalisées */
}

/* Supprimer explicitement les puces personnalisées pour la navigation */
.main-nav ul li::before {
  content: none;
}

/* Listes imbriquées - uniquement pour le contenu principal */
.container ul ul {
  margin-top: 10px;
  margin-bottom: 10px;
  padding-left: 10px;
}

.container ul ul li {
  padding-left: 20px;
  font-size: 0.95em;
  color: #555;
}

.container ul ul li::before {
  content: '-';
  color: var(--secondary-color);
  font-weight: normal;
  font-size: 1em;
  top: 2px;
}

/* Style pour les boîtes mises en évidence (optionnel) */
.highlight-box {
  background-color: var(--lighter-bg);
  padding: 20px;
  border-left: 5px solid var(--primary-color); /* Bleu par défaut */
  margin: 25px 0;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
/* On peut adapter la couleur si besoin avec une classe spécifique */
.highlight-box.success { border-left-color: var(--success-color); }


/* Section Services */
.services-section .service-category {
  background-color: var(--lighter-bg);
  padding: 20px 25px;
  margin-bottom: 25px;
  border-radius: 8px;
  border: 1px solid var(--light-bg);
  box-shadow: 0 3px 6px var(--shadow-color);
}
.services-section .service-category h3 {
  margin-top: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-color);
}


strong {
   color: var(--primary-color);
   font-weight: 700;
}

.conclusion {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--border-color);
  text-align: center;
  font-style: italic;
  color: var(--text-color);
}

.attachment-mention {
  font-size: 0.9em;
  color: #7f8c8d;
  font-style: italic;
}