body {



    font-size: 15px !important;



}







/* Section Nos valeurs */



.valeurs {



    /* Light blue background */



    padding: 0;



    /* No padding */



    margin: 0;



    /* No margin */



}







.valeurs-title {



    font-size: 36px;



    color: #726734;



    text-align: center;



    /* Center the text */



    position: relative;



    margin: 0;



    /* Remove any margin to control centering more precisely */



    padding-bottom: 10px;



    display: block;



    /* Ensure the title takes full width */



    padding-top: 20px;



}





@media (max-width: 992px) {

    

.valeurs-container {



    display: flex;



   flex-wrap: wrap; 

}

}









.valeurs-container {



    display: flex;



  /*   flex-wrap: wrap; */



    /* Allow wrapping for responsive design */



    gap: 20px;



    justify-content: center;

    margin-left: -80px;



    /* padding: 20px 100px 60px; Added padding at the bottom */





    /* Added padding for left, right, and bottom */



}



i {

    font-family: "Font Awesome 6 Free" !important;

}



.valeurs-box {



    background-color: #ffffff;



    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);







    padding: 20px;



    text-align: center;

    margin: 0 9px;



    flex: 1 1 220px;



    /* Flex basis for responsive layout */



    transition: transform 0.3s ease;



    min-width: 220px;



    /* Ensure a minimum width */



}







.valeurs-box:hover {



    transform: scale(1.05);



    /* Zoom effect on hover */



}







.valeurs-box i {



    font-size: 40px;



    /* Icon size */



    color: #726734;



    /* Icon color matching the theme */



    margin-bottom: 15px;



}







.valeurs-box h3 {



    font-size: 24px;



    margin-bottom: 10px;



    color: #726734;



}







.valeurs-box p {



    font-size: 16px;



    line-height: 1.6;



}







/* Responsive Design */



@media (max-width: 768px) {



    .valeurs-container {



        flex-direction: column;



        /* Stack boxes vertically on smaller screens */



        align-items: center;



        /* Center align the boxes */



    }



}







/* Section Certains chiffres */



.certains-chiffres {



    padding: 50px 20px;



    text-align: center;



}







.certains-chiffres-title {



    font-size: 36px;



    color: #726734;



    margin-bottom: 30px;



}







.certains-chiffres-container {



    display: flex;



    gap: 40px;



    flex-wrap: wrap;



    justify-content: center;



    align-items: center;



    width: 100%;



}







@keyframes pulse {



    0% {



        transform: translate(-50%, -50%) scale(1);



    }







    50% {



        transform: translate(-50%, -50%) scale(1.1);



    }







    100% {



        transform: translate(-50%, -50%) scale(1);



    }



}







.stats-container {



    flex: 1;



    max-width: 600px;



    /* Enlarged stats container */



    text-align: left;



    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);



    /* Shadow effect */



    padding: 30px;



    /* Increased padding for the box effect */



    transition: transform 0.3s ease;



    /* Animation effect */



    background-color: #eaebec;



}







.stats-container p {



    font-size: 15px;



    /* Enlarged text */



    margin-bottom: 40px;



    /* Increased margin for more space */



    color: #333;



}







.stat {



    display: flex;



    align-items: flex-start;



    /* Align icons and text at the top */



    margin-bottom: 30px;



    /* Increased space between lines */



    font-size: 24px;



    color: #333;



}







.stat i {



    font-size: 30px;



    /* Enlarged icon size */



    color: #726734;



    margin-right: 15px;



    padding: 10px 0;



    transition: color 0.3s ease;



}







.stat:hover i {



    color: #233b62;



}







.stat-details {



    display: flex;



    align-items: center;



    /* Align number and text on the same line */



    justify-content: flex-start;



    /* Align content to the left */



    flex-grow: 1;



}







.stat-number {



    /*font-size: 20px;  Enlarged number size */



    font-weight: bold;



    color: #233b62;



    margin-right: 10px;



    /* Space between number and text */



    text-align: right;



    /* Align numbers to the right */



    flex: 1;



    /* Make the number take up available space */



}







.stat-value {



    font-size: 18px;



    /* Enlarged text */



    color: black;



    text-align: left;



}







/* Responsive Design */



@media (max-width: 768px) {



    .certains-chiffres-container {



        flex-direction: column;



    }







    .stat {



        justify-content: flex-start;



    }







    .video-container {



        order: -1;



    }







    .stats-container {



        text-align: left;



    }



}











.image-frame {



    width: 400px;



    /* Largeur fixe pour toutes les images */



    height: 250px;



    /* Hauteur fixe pour toutes les images */



    overflow: hidden;



    /* Masquer les parties excédentaires de l'image */



}







.image-frame img {



    width: 100%;



    height: 100%;



    object-fit: cover;



    /* Adapter l'image au cadre sans la déformer */



}





/* Set up the container */

#preloader {



position: absolute;

width: 200px; /* Adjust as needed */

height: 200px;

/* translate: -50% ; */

margin: auto;

display: flex;

justify-content: center;

align-items: center;

overflow: hidden;

}

#content {

display: block;

opacity: 0; /* Hidden initially */

visibility: hidden;

transition: opacity 0.5s ease, visibility 0.5s ease;

display: none;

}

body.loaded #content {

opacity: 1;

visibility: visible;

display: block;

}



body.loaded #preloader {

opacity: 0;

visibility: hidden;

display: none;

}



/* Center the first SVG */

.svg1 {

position: absolute;

width: 150px; /* Adjust size as needed */

height: 150px;

z-index: 1;

animation: spin-outside 2s linear infinite;

}



/* Position and spin the second SVG */

.svg2 {

position: absolute;

width: 65px; /* Adjust size as needed */

height: 65px;

}

#preloader-container {

width: 100%;

height: 100%;

display: flex;

justify-content: center;

align-items: center;

}

/* Keyframes for spinning */

@keyframes spin-outside {

from {

transform: rotate(0deg);

}

to {

transform: rotate(360deg);

}

}


/* ========================================================
   RESPONSIVE MOBILE FIX (Page À Propos)
   ======================================================== */

@media (max-width: 768px) {

  /* 1. On annule le padding-left: 10px qui est dans le HTML */
  section.valeurs {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100%;
  }

  /* 2. On corrige le conteneur principal */
  .valeurs-container {
    /* C'est ce margin-left: -80px (défini plus haut) qui cassait tout sur mobile */
    margin-left: 0 !important; 
    
    padding: 0 15px !important; /* Petite marge de sécurité sur les bords */
    display: flex !important;
    flex-direction: column !important; /* On les empile verticalement */
    align-items: center !important; /* On centre horizontalement */
    justify-content: center !important;
    width: 100% !important;
  }

  /* 3. On s'assure que les boîtes sont bien centrées et ont une bonne taille */
  .valeurs-box {
    margin: 0 0 20px 0 !important; /* Marge en bas seulement */
    width: 90% !important; /* Prend presque toute la largeur */
    max-width: 350px; /* Mais ne devient pas trop large */
    flex: 0 0 auto !important; /* Annule les contraintes de taille précédentes */
  }
}

/* VPS layout fixes */
@media (min-width: 992px) {
  .valeurs-container {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 1180px;
    padding-left: 24px;
    padding-right: 24px;
  }
}