/* Conteneur principal */
footer .container {
    /* margin-left: 10em;  */
    /* Décale le conteneur vers la droite de 160px (10 × 16px = 160px). */
}

/* Disposition des éléments dans une ligne */
footer .row {
    display: flex; /* Active le modèle Flexbox, qui permet d'aligner les éléments horizontalement ou verticalement. */
    flex-wrap: nowrap; /* Empêche les éléments de passer à la ligne s'ils ne rentrent pas dans la largeur disponible. */
}

.footer-logo-teutaros {
    margin: auto auto; /* Centre verticalement l'élément en utilisant "auto" pour les marges verticales. */
}

/* Liste sans puces */
footer ul {
    list-style: none; /* Retire les puces ou numéros devant les éléments de liste. */
}

/* Style du pied de page */
footer {
    background-color: var(--dark-bg); /* Définit la couleur de fond du pied de page en utilisant une variable (--dark-bg). */
    padding: 2em 0; /* Ajoute un espacement interne de 32px au-dessus et en dessous (2 × 16px = 32px), et aucun sur les côtés. */
}

/* Colonnes du footer */
.footer-col {
    width: 25%; /* Chaque colonne prend 25% de la largeur totale du conteneur parent. */
    padding: 0 0; /* Aucun espacement interne ajouté. */
    margin-left: 2em; /* Ajoute un décalage de 48px (3 × 16px = 48px) à gauche de chaque colonne. */
}

/* Style des titres des colonnes du footer */
.footer-col h4 {
    font-size: 1.1rem; /* La taille de police est légèrement plus grande que la normale (1.1 × taille de base). */
    color: var(--light-text); /* Utilise une variable pour définir la couleur du texte (généralement blanc ou clair). */
    text-transform: capitalize; /* Met la première lettre de chaque mot en majuscule. */
    margin-bottom: 2.2em; /* Ajoute un espace sous le titre de 35.2px (2.2 × 16px = 35.2px). */
    font-weight: 400; /* Fixe le poids de la police à normal (pas trop léger, pas trop gras). */
    position: relative; /* Permet de positionner des éléments enfants par rapport à ce titre. */
}

/* Ligne sous les titres des colonnes */
.footer-col h4::before {
    content: ''; /* Crée un élément fictif avant le titre (une ligne horizontale). */
    position: absolute; /* Positionne cet élément exactement où on veut, par rapport au titre. */
    left: 0; /* Place la ligne tout à gauche du titre. */
    bottom: -0.625em; /* Décale la ligne de 10px en dessous du titre (-0.625 × 16px = -10px). */
    background-color: var(--light-green); /* Définit la couleur de la ligne (généralement verte claire). */
    height: 0.125em; /* Fixe la hauteur de la ligne à 2px (0.125 × 16px = 2px). */
    box-sizing: border-box; /* Assure que la largeur inclut toute la boîte (contenu + padding). */
    width: 3em; /* Fixe la longueur de la ligne à 48px (3 × 16px = 48px). */
}

.footer-col ul {
    margin-left: -1.5em; /* Recule légèrement la liste vers la gauche pour aligner les éléments correctement. */
}

/* Espacement entre les éléments de la liste */
.footer-col ul li:not(:last-child) {
    margin-bottom: 0.625em; /* Ajoute un espace de 10px sous chaque élément de la liste, sauf le dernier. */
}

/* Liens dans le footer */
.footer-col ul li a {
    font-size: 1em; /* La taille de police est égale à la taille de base (16px). */
    text-transform: capitalize; /* Met la première lettre de chaque mot en majuscule. */
    color: var(--light-text); /* Utilise une variable pour définir la couleur du texte (généralement gris clair). */
    text-decoration: none; /* Supprime les soulignements ou autres décorations sur les liens. */
    font-weight: 300; /* Rend la police légère (plus fine que la normale). */
    color: #bbbbbb; /* Change la couleur du texte en gris clair (#bbbbbb). */
    display: block; /* Affiche chaque lien comme un bloc indépendant (occupant toute la largeur). */
    transition: all 0.3s ease; /* Ajoute une animation fluide lors des changements (par exemple au survol). */
}

/* Effet au survol des liens */
.footer-col ul li a:hover {
    color: var(--light-green); /* Change la couleur du texte en vert clair lorsque l'utilisateur passe la souris dessus. */
    padding-left: 0.5em; /* Ajoute un petit espace à gauche (8px) lorsque l'utilisateur survole le lien. */
}

/* Icônes de réseaux sociaux */
.footer-col .social-links a {
    display: inline-block; /* Affiche les icônes en ligne, mais comme des blocs individuels. */
    height: 2.5em; /* Fixe la hauteur des icônes à 40px (2.5 × 16px = 40px). */
    width: 2.5em; /* Fixe la largeur des icônes à 40px (2.5 × 16px = 40px). */
    background-color: rgba(255, 255, 255, 0.2); /* Donne un arrière-plan semi-transparent blanc. */
    margin: 0 0.625em 0.625em 0; /* Ajoute des espaces autour des icônes (10px à droite et en bas). */
    text-align: center; /* Centre les icônes horizontalement. */
    line-height: 2.6em; /* Centre verticalement les icônes dans leur boîte (hauteur de ligne ajustée). */
    border-radius: 50%; /* Rend les icônes circulaires. */
    color: #ffffff; /* Définit la couleur du texte/icone en blanc. */
    transition: all 0.5s ease; /* Ajoute une animation fluide lors des changements (par exemple au survol). */
}

/* Effet au survol des icônes sociales */
.footer-col .social-links a:hover {
    color: #24262b; /* Change la couleur du texte/icone en noir lors du survol. */
    background-color: #ffffff; /* Change l'arrière-plan en blanc lors du survol. */
}

/* Lien pour la section légale */
footer .mention-legal {
    margin: 0 auto; /* Centre le texte horizontalement. */
    color: #ffffff; /* Définit la couleur du texte en blanc. */
    text-decoration: none; /* Supprime les soulignements ou autres décorations sur les liens. */
    text-align: center; /* Centre le texte horizontalement. */
}

footer .mention-legal a,
footer .mention-legal img {
    text-decoration: none; /* Supprime les soulignements ou autres décorations sur les liens. */
    color: var(--light-text); /* Utilise une variable pour définir la couleur du texte (généralement blanc ou clair). */
    margin: 0 1em; /* Ajoute un espace de 16px (1 × 16px = 16px) de chaque côté des liens/images. */
}

footer .mention-legal span {
    color: var(--light-text); /* Utilise une variable pour définir la couleur du texte (généralement blanc ou clair). */
    margin: 0 2em; /* Ajoute un espace de 32px (2 × 16px = 32px) de chaque côté du texte. */
}

footer .mention-legal a:hover {
    color: var(--light-green); /* Change la couleur du texte en vert clair lorsque l'utilisateur passe la souris dessus. */
}

/* Responsive - pour les écrans de moins de 767px */
@media (max-width: 47.9375em) { /* Applique ces styles si la largeur de l'écran est inférieure à 767px. */
    .footer-col,
    footer .mention-legal {
        width: 50%; /* Réduit la largeur des colonnes à 50% pour mieux s'adapter aux petits écrans. */
        margin-bottom: 1.875em; /* Ajoute un espace de 30px sous chaque colonne (1.875 × 16px = 30px). */
    }
}

/* Responsive - pour les écrans de moins de 574px */
@media (max-width: 35.875em) { /* Applique ces styles si la largeur de l'écran est inférieure à 574px. */
    footer .footer-col,
    footer .mention-legal {
        width: 100%; /* Réduit la largeur des colonnes à 100% pour s'adapter aux très petits écrans. */
    }
}