/* Style de base pour le corps de la page */
body {
    background-color: #343a40; /* Fond principal */
    color: #f8f9fa; /* Texte clair */
    margin: 0; /* Pas de marge */
    padding: 0; /* Pas de remplissage */
}

/* Conteneur principal de la page À propos */
.about-container {
    padding: 30px; /* Remplissage autour du contenu */
    max-width: 1200px; /* Largeur maximale du conteneur */
    margin: 20px auto; /* Marge automatique pour centrer */
    background-color: #3c4043; /* Fond légèrement plus clair pour les sections */
    border-radius: 8px; /* Coins arrondis */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Ombre portée */
}

/* Espacement entre les sections principales */
.card-container, .values-section, .presentation, .contact-info {
    margin-bottom: 30px; /* Marge inférieure */
}

/* Styles communs pour les différentes cartes */
.about-card, .value-card, .contact-info.card {
    border: 1px solid #5a6268; /* Bordure des cartes */
    border-radius: 8px; /* Coins arrondis */
    background-color: #3c4043; /* Fond des cartes */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); /* Ombre portée */
    padding: 25px; /* Remplissage intérieur */
    text-align: center; /* Alignement du texte au centre */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transition pour les effets */
}

/* Animation au survol des cartes */
.about-card:hover, .value-card:hover, .contact-info.card:hover {
    transform: translateY(-5px); /* Déplacement vers le haut au survol */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Ombre plus prononcée au survol */
}

.value-card:hover {
    transform: translateY(-5px) rotate(5deg); /* Déplacement vers le haut au survol */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Ombre plus prononcée au survol */
}

/* Style de l'image dans l'en-tête de carte */
.card-header img {
    max-width: 120px; /* Largeur maximale de l'image */
    border-radius: 30px; /* Arrondi pour l'image */
    margin-bottom: 15px; /* Marge inférieure */
}

/* Styles des titres dans les cartes et sections */
.card-header h3, .contact-info h3, .presentation h2 {
    margin: 15px 0 10px; /* Marges autour des titres */
    color: #f8f9fa; /* Couleur du texte */
    font-weight: bold; /* Texte en gras */
}

/* Style des paragraphes dans les cartes */
.card-header p, .contact-info p, .presentation p {
    font-style: italic; /* Italique pour le texte */
    color: #b0bec5; /* Texte légèrement plus clair */
}

/* Section des compétences */
.skills-section {
    margin-top: 20px; /* Marge supérieure */
    text-align: center; /* Alignement du texte au centre */
}

/* Grille des compétences */
.skills-grid {
    display: flex; /* Affichage en flexbox */
    justify-content: center; /* Centrer le contenu */
    gap: 15px; /* Espace entre les éléments */
    margin-top: 15px; /* Marge supérieure */
}

/* Style des éléments de compétence */
.skill-item {
    background-color: #5a6268; /* Gris moyen pour les compétences */
    padding: 10px 20px; /* Remplissage intérieur */
    border-radius: 5px; /* Coins arrondis */
    font-weight: bold; /* Texte en gras */
    color: #f8f9fa; /* Couleur du texte */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Transition pour les effets */
}

/* Animation au survol des compétences */
.skill-item:hover {
    background-color: #6c757d; /* Légèrement plus clair au survol */
    transform: translateY(-3px) rotate(-5deg); /* Déplacement vers le haut au survol */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Ombre plus prononcée au survol */
}

/* Grille des valeurs */
.values-grid {
    display: flex; /* Affichage en flexbox */
    justify-content: space-between; /* Espace entre les éléments */
    gap: 20px; /* Espace entre les éléments */
    flex-wrap: nowrap; /* Assure que les cartes restent sur une ligne */
}

/* Style des cartes de valeurs */
.value-card {
    flex: 1; /* Prend l'espace disponible */
    text-align: center; /* Alignement du texte au centre */
    padding: 20px; /* Remplissage intérieur */
    border: 1px solid #5a6268; /* Bordure des cartes */
    border-radius: 8px; /* Coins arrondis */
    background-color: #3c4043; /* Fond des cartes */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); /* Ombre portée */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transition pour les effets */
}

/* Style des icônes dans les cartes de valeurs */
.value-card i {
    font-size: 2.5rem; /* Taille des icônes */
    color: #90a4ae; /* Icônes légèrement plus claires */
    margin-bottom: 15px; /* Marge inférieure */
}

/* Style de la carte d'informations de contact */
.contact-info.card {
    border: 1px solid #5a6268; /* Bordure de la carte */
    border-radius: 8px; /* Coins arrondis */
    padding: 25px; /* Remplissage intérieur */
    background-color: #3c4043; /* Fond de la carte */
    text-align: center; /* Alignement du texte au centre */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); /* Ombre portée */
}

/* Style du titre dans la section contact */
.contact-info h3 {
    margin-bottom: 15px; /* Marge inférieure */
    color: #f8f9fa; /* Couleur du texte */
}

/* Style des paragraphes dans la section contact */
.contact-info p {
    margin: 10px 0; /* Marges autour des paragraphes */
}

/* Style des boutons de contact */
.contact-button {
    display: inline-block; /* Affichage en bloc en ligne */
    padding: 10px 20px; /* Remplissage intérieur */
    margin: 5px 0; /* Marges autour des boutons */
    background-color: #007bff; /* Couleur de fond */
    color: #f8f9fa; /* Couleur du texte */
    text-decoration: none; /* Pas de soulignement */
    border-radius: 5px; /* Coins arrondis */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Transition pour les effets */
}

/* Animation au survol des boutons de contact */
.contact-button:hover {
    background-color: #0056b3; /* Couleur de fond au survol */
    transform: translateY(-20px); /* Déplacement vers le haut au survol */
    transform: rotate(5deg); /* Rotation au survol */
}

/* Style de la section présentation */
.presentation {
    padding: 25px; /* Remplissage intérieur */
    background-color: #3c4043; /* Fond de la section */
    border-radius: 8px; /* Coins arrondis */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); /* Ombre portée */
    text-align: justify; /* Justification du texte */
    margin-bottom: 30px; /* Marge inférieure */
}

/* Style du titre de la présentation */
.presentation h2 {
    margin-bottom: 20px; /* Marge inférieure */
    color: #f8f9fa; /* Couleur du texte */
    text-align: center; /* Alignement du texte au centre */
    font-size: 2rem; /* Taille de la police */
    font-weight: bold; /* Texte en gras */
}

/* Style du contenu de la présentation */
.presentation-content {
    display: flex; /* Affichage en flexbox */
    flex-direction: column; /* Direction de la flexbox en colonne */
    gap: 20px; /* Espace entre les éléments */
    align-items: center; /* Centre les icônes horizontalement */
}

/* Style des icônes dans la présentation */
.presentation-content i {
    font-size: 2.5rem; /* Taille des icônes */
    color: #007bff; /* Couleur des icônes */
    margin-bottom: -25px; /* Espace entre l'icône et le paragraphe */
    margin-top: -20px;
}

/* Style des paragraphes dans la présentation */
.presentation p {
    margin-bottom: 15px; /* Marge inférieure */
    line-height: 1.8; /* Hauteur de ligne */
    color: #b0bec5; /* Couleur du texte */
    font-size: 1.1rem; /* Taille de la police */
    text-align: justify; /* Justification du texte */
    max-width: 800px; /* Limite la largeur du texte pour une meilleure lisibilité */
}

/* Ajustements responsifs */
@media (max-width: 768px) {
    /* Adaptation de la grille en colonne sur mobile */
    .skills-grid, .values-grid {
        flex-direction: column; /* Direction de la flexbox en colonne */
        align-items: center; /* Centre les éléments horizontalement */
    }

    /* Ajustement de la largeur des cartes sur mobile */
    .value-card, .skill-item {
        margin-bottom: 15px; /* Marge inférieure */
        width: 100%; /* Largeur à 100% */
        max-width: 300px; /* Largeur maximale */
    }

    /* Réduction de la taille de l'image sur mobile */
    .card-header img {
        max-width: 80px; /* Largeur maximale de l'image */
    }
}

/* Ajustements pour les très petits écrans */
@media (max-width: 576px) {
    /* Réduction du padding du conteneur */
    .about-container {
        padding: 15px; /* Remplissage intérieur réduit */
    }

    /* Réduction du padding des cartes */
    .about-card, .value-card, .contact-info.card {
        padding: 15px; /* Remplissage intérieur réduit */
    }

    /* Réduction de la taille des titres */
    .card-header h3, .contact-info h3, .presentation h2 {
        font-size: 1.2rem; /* Taille de la police réduite */
    }

    /* Réduction de la taille des icônes */
    .value-card i {
        font-size: 2rem; /* Taille des icônes réduite */
    }
}