/* ========================================= */
/* Page Header (pour toutes les pages internes) */
/* ========================================= */
/* Ce bloc devrait déjà exister dans votre CSS. Je le répète pour le contexte. */
.page-header {
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('../images/page-header-about-bg.jpg') no-repeat center center/cover; /* Nouvelle image de fond suggérée */
    color: var(--text-color-light);
    padding: 100px 0;
    text-align: center;
    position: relative;
    animation: fadeIn 1s ease-out;
}

.page-header h2 {
    font-size: 3.5em;
    margin: 0;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.4);
}

/* ========================================= */
/* Section Contenu (générique, déjà existante) */
/* ========================================= */
/* Ce bloc devrait déjà exister dans votre CSS. Je le répète pour le contexte. */
.content-section {
    padding: 80px 0;
    background-color: var(--bg-light);
}

.content-section .container p { /* Paragraphes de la section "Qui Sommes-Nous" */
    font-size: 1.15em;
    line-height: 1.8;
    margin-bottom: 25px; /* Espacement entre les paragraphes */
    color: var(--text-color-dark);
}

.content-section .container p strong {
    color: var(--primary-color);
    font-size: 1.2em;
}

/* ========================================= */
/* Section Vision, Mission, Valeurs */
/* ========================================= */
.vision-mission-values {
    background-color: var(--bg-dark); /* Fond sombre pour contraster */
    color: var(--text-color-light);
    padding: 80px 0;
}

.vision-mission-values .container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 3 colonnes flexibles */
    gap: 40px; /* Espacement entre les cartes */
}

.vision-mission-values .card {
    background-color: #495057; /* Couleur de fond des cartes (un gris foncé) */
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    text-align: center;
    transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
    animation: fadeInUp 0.8s ease-out forwards; /* Animation d'apparition */
    opacity: 0; /* Caché initialement pour l'animation */
    display: flex; /* Utilise flexbox pour le contenu interne */
    flex-direction: column; /* Empile le titre et le paragraphe/liste */
    justify-content: flex-start; /* Aligne le contenu en haut */
}

/* Délai pour l'animation de chaque card */
.vision-mission-values .card:nth-child(1) { animation-delay: 0.1s; }
.vision-mission-values .card:nth-child(2) { animation-delay: 0.3s; }
.vision-mission-values .card:nth-child(3) { animation-delay: 0.5s; }


.vision-mission-values .card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

.vision-mission-values .card h3 {
    font-size: 2em;
    color: var(--accent-color); /* Couleur accent pour les titres */
    margin-bottom: 20px;
}

.vision-mission-values .card p {
    font-size: 1.05em;
    line-height: 1.7;
    margin-bottom: 0; /* Pas de marge en bas pour les paragraphes de carte */
}

.vision-mission-values .card ul {
    list-style: none; /* Supprime les puces par défaut */
    padding: 0;
    margin-top: 15px;
    text-align: left; /* Alignement à gauche pour les listes */
}

.vision-mission-values .card ul li {
    font-size: 1.05em;
    line-height: 1.8;
    margin-bottom: 10px;
    position: relative;
    padding-left: 25px; /* Espace pour l'icône personnalisée */
}

.vision-mission-values .card ul li::before {
    content: "\f00c"; /* Icône Font Awesome pour une coche (check-mark) */
    font-family: "Font Awesome 6 Free"; /* Assurez-vous que Font Awesome est lié */
    font-weight: 900; /* Poids pour l'icône solide */
    color: var(--primary-color);
    position: absolute;
    left: 0;
    top: 0;
}


/* ========================================= */
/* Responsive Design pour ce bloc */
/* ========================================= */

/* Tablette et petits desktops */
@media (max-width: 992px) {
    .page-header {
        padding: 80px 0;
    }
    .page-header h2 {
        font-size: 2.8em;
    }

    .content-section {
        padding: 60px 0;
    }
    .content-section .container p {
        font-size: 1.05em;
    }

    .vision-mission-values {
        padding: 60px 0;
    }
    .vision-mission-values .container {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Ajuste les colonnes */
        gap: 30px;
    }

    .vision-mission-values .card {
        padding: 25px;
    }
    .vision-mission-values .card h3 {
        font-size: 1.8em;
    }
    .vision-mission-values .card p,
    .vision-mission-values .card ul li {
        font-size: 1em;
    }
}

/* Mobile */
@media (max-width: 576px) {
    .page-header {
        padding: 60px 0;
    }
    .page-header h2 {
        font-size: 2.2em;
    }

    .content-section {
        padding: 40px 0;
    }
    .content-section .container p {
        font-size: 1em;
        margin-bottom: 20px;
    }
    .content-section .container p strong {
        font-size: 1.1em;
    }

    .vision-mission-values {
        padding: 40px 0;
    }
    .vision-mission-values .container {
        grid-template-columns: 1fr; /* Une seule colonne sur mobile */
        gap: 25px;
    }

    .vision-mission-values .card {
        padding: 20px;
    }
    .vision-mission-values .card h3 {
        font-size: 1.6em;
        margin-bottom: 15px;
    }
    .vision-mission-values .card p,
    .vision-mission-values .card ul li {
        font-size: 0.95em;
        line-height: 1.6;
    }
}

/* L'animation fadeInUp a été définie précédemment dans les produits. Si ce n'est pas le cas, ajoutez-la ici: */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ... (votre CSS existant pour le page-header et content-section) ... */

/* ========================================= */
/* Section Vision, Mission, Valeurs */
/* ========================================= */
.vision-mission-values {
    background-color: var(--bg-dark); /* Fond sombre pour contraster */
    color: var(--text-color-light);
    padding: 80px 0;
}

.vision-mission-values .container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 3 colonnes flexibles */
    gap: 40px; /* Espacement entre les cartes */
}

.vision-mission-values .card {
    background-color: #495057; /* Couleur de fond des cartes (un gris foncé) */
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    text-align: center;
    transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
    animation: fadeInUp 0.8s ease-out forwards; /* Animation d'apparition */
    opacity: 0; /* Caché initialement pour l'animation */
    display: flex; /* Utilise flexbox pour le contenu interne */
    flex-direction: column; /* Empile le titre et le paragraphe/liste */
    justify-content: flex-start; /* Aligne le contenu en haut */
    align-items: center; /* Centrer les éléments flex horizontalement (pour l'icône et le titre) */
}

/* Délai pour l'animation de chaque card */
.vision-mission-values .card:nth-child(1) { animation-delay: 0.1s; }
.vision-mission-values .card:nth-child(2) { animation-delay: 0.3s; }
.vision-mission-values .card:nth-child(3) { animation-delay: 0.5s; }


.vision-mission-values .card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

/* Styles pour les icônes ajoutées */
.vision-mission-values .card .icon-v-m-v {
    font-size: 3.5em; /* Grande taille pour l'icône */
    color: var(--primary-color); /* Couleur principale de l'icône */
    margin-bottom: 20px;
    transition: transform 0.4s ease-out, color 0.4s ease-out; /* Animation au survol */
}

/* Animation de l'icône au survol de la carte */
.vision-mission-values .card:hover .icon-v-m-v {
    transform: rotateY(360deg) scale(1.1); /* Rotation et léger zoom */
    color: var(--accent-color); /* Changement de couleur au survol */
}

.vision-mission-values .card h3 {
    font-size: 2em;
    color: var(--accent-color); /* Couleur accent pour les titres */
    margin-bottom: 20px;
    /* text-align: center; (align-items: center; sur le parent gère ça maintenant) */
}

.vision-mission-values .card p {
    font-size: 1.05em;
    line-height: 1.7;
    margin-bottom: 0; /* Pas de marge en bas pour les paragraphes de carte */
}

.vision-mission-values .card ul {
    list-style: none; /* Supprime les puces par défaut */
    padding: 0;
    margin-top: 15px;
    text-align: left; /* Alignement à gauche pour les listes */
    width: 100%; /* Important pour que les éléments de liste soient centrés dans la carte */
    max-width: 250px; /* Limite la largeur de la liste pour qu'elle reste centrée et lisible */
}

.vision-mission-values .card ul li {
    font-size: 1.05em;
    line-height: 1.8;
    margin-bottom: 10px;
    position: relative;
    padding-left: 25px; /* Espace pour l'icône personnalisée */
    text-align: left; /* Assure que le texte de la liste est bien aligné à gauche */
}

.vision-mission-values .card ul li::before {
    content: "\f00c"; /* Icône Font Awesome pour une coche (check-mark) */
    font-family: "Font Awesome 6 Free"; /* Assurez-vous que Font Awesome est lié */
    font-weight: 900; /* Poids pour l'icône solide */
    color: var(--primary-color);
    position: absolute;
    left: 0;
    top: 0;
}

/* ========================================= */
/* Responsive Design pour ce bloc */
/* ========================================= */

/* Tablette et petits desktops */
@media (max-width: 992px) {
    /* ... (votre CSS existant pour cette media query) ... */
    .vision-mission-values .card .icon-v-m-v {
        font-size: 3em; /* Ajuste la taille de l'icône */
        margin-bottom: 15px;
    }
    .vision-mission-values .card ul {
        max-width: 200px; /* Ajuste la largeur max de la liste */
    }
}

/* Mobile */
@media (max-width: 576px) {
    /* ... (votre CSS existant pour cette media query) ... */
    .vision-mission-values .card .icon-v-m-v {
        font-size: 2.5em; /* Ajuste la taille de l'icône sur mobile */
        margin-bottom: 10px;
    }
    .vision-mission-values .card ul {
        max-width: 100%; /* La liste peut prendre toute la largeur sur mobile */
    }
}