section { /* Cible toutes les balises <section> */
    margin-bottom: 30px; /* Ajoute un espace de 30px sous chaque section */
    padding-bottom: 20px; /* Ajoute un espace interne de 20px en bas de chaque section */
    border-bottom: 1px solid #eee; /* Trace une ligne grise claire sous chaque section */
}

section:last-of-type { /* Cible la dernière section de la page */
    border-bottom: none; /* Supprime la ligne de séparation pour la dernière section */
}

h2 { /* Cible les titres de niveau 2 */
    color: #007bff; /* Applique une couleur bleue vive */
    border-bottom: 2px solid #007bff; /* Ajoute une ligne bleue sous le titre */
    padding-bottom: 10px; /* Ajoute un espace entre le texte et la ligne */
    margin-top: 0; /* Supprime l’espace au-dessus du titre */
    font-size: 2rem; /* Définit une taille de police assez grande */
}

h3 { /* Cible les titres de niveau 3 */
    color: #0056b3; /* Applique un bleu plus foncé */
    font-size: 1.5rem; /* Définit une taille légèrement plus petite que h2 */
}

p { /* Cible les paragraphes */
    margin-bottom: 15px; /* Ajoute un espace sous chaque paragraphe */
}

ul { /* Cible les listes non ordonnées */
    list-style: disc; /* Utilise des puces rondes par défaut */
    margin-left: 20px; /* Décale la liste vers la droite */
    margin-bottom: 15px; /* Ajoute un espace sous la liste */
}

ul li { /* Cible chaque élément de la liste */
    margin-bottom: 8px; /* Ajoute un espace entre les puces */
}

/* Conception réactive pour les éléments spécifiques à ia_generale.html */ /* Section pour adapter le design aux petits écrans */
@media (max-width: 768px) { /* Applique les styles si l’écran fait 768px ou moins */
    h2 { /* Cible les titres h2 sur petit écran */
        font-size: 1.5rem; /* Réduit la taille du titre principal */
    }

    h3 { /* Cible les titres h3 sur petit écran */
        font-size: 1.2rem; /* Réduit la taille du sous-titre */
    }
}

.video-container { /* Cible un conteneur vidéo (pour YouTube ou autre iframe) */
  position: relative; /* Définit une position relative pour positionner l’iframe à l’intérieur */
  width: 100%; /* La vidéo occupe toute la largeur du conteneur */
  padding-bottom: 56.25%; /* Crée un espace vertical équivalent à un format 16:9 (hauteur proportionnelle à la largeur) */
  height: 0; /* Hauteur initiale nulle, remplacée par le padding */
  overflow: hidden; /* Cache tout contenu qui dépasse du conteneur */
  margin-top: 1em; /* Ajoute un espace au-dessus de la vidéo */
  margin-bottom: 1em; /* Ajoute un espace en dessous de la vidéo */
}

.video-container iframe { /* Cible la balise <iframe> à l’intérieur du conteneur vidéo */
  position: absolute; /* Positionne l’iframe par rapport au conteneur */
  top: 0; /* Aligne en haut du conteneur */
  left: 0; /* Aligne à gauche du conteneur */
  width: 100%; /* Étire la vidéo sur toute la largeur */
  height: 100%; /* Étire la vidéo sur toute la hauteur */
  border: 0; /* Supprime la bordure de l’iframe */
}