/* Preloader Container: Full page coverage */

#preloader-container {

  position: fixed;

  top: 0;

  left: 0;

  width: 100vw;

  height: 100vh;

  /* Use 100vh instead of 100% for consistent full-height coverage */

  display: flex;

  justify-content: center;

  align-items: center;

  background-color: white;

  /* Optional background color */

  z-index: 9999;

}



/* Preloader Styles */

#preloader {

  width: 200px;

  height: 200px;

  display: flex;

  justify-content: center;

  align-items: center;

  position: relative;

  /* Ensure absolute children are positioned relative to this container */

}



/* Spinning Outer SVG */

.svg1 {

  position: absolute;

  width: 150px;

  height: 150px;

  animation: spin-outside 2s linear infinite;

}



/* Inner SVG */

.svg2 {

  position: absolute;

  width: 65px;

  height: 65px;

}



/* Keyframes for spinning */

@keyframes spin-outside {

  from {

    transform: rotate(0deg);

  }



  to {

    transform: rotate(360deg);

  }

}



/* Hiding Preloader */

body.loaded #preloader-container {

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  transition: opacity 0.5s ease-in-out;

}



/* Disable scrolling while the preloader is active */

body:not(.loaded) {

  overflow: hidden;

}

/*  rgba(41, 40, 40, 0.308) */

.changeBg{ 

  background-color:#20294257;

  border-radius: 9px;

  padding: 20px 30px;

}

.changeBg img {

  width: 120px;

  height: 52px;

  margin-top: 0;

}

.first-header{

  height: 120vh;

}

@media (max-width: 902px) {

  .changeBg img {

  width: 90px !important;

  height: 39px !important;

  margin: 9px;

}

}



.valeurs-container .valeurs-box{background-color: #202942; padding: 50px 10px !important; margin: 0 1px;}









/* ========================================================
   RESPONSIVE MOBILE FIXES (Grilles pour Téléphone)
   ======================================================== */

@media (max-width: 767px) {

  /* --- 1. SECTION NOS SECTEURS (Grille de 2 colonnes) --- */
  div[class*="col-"]:has(.features) {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
  }

  .features {
    padding: 15px 5px !important;
    min-height: 140px; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .features img {
    width: 60px !important;
    height: 60px !important;
    margin-bottom: 10px;
  }

  .features p.h5 {
    font-size: 13px !important;
    margin-top: 5px !important;
    line-height: 1.2;
  }


  /* --- 2. SECTION QUELQUES CHIFFRES (Taille et alignement) --- */
  #portfolio-section-row {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    width: 100%;
  }

  #portfolio-section-row > div {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center !important;
  }

  /* Taille de police réduite pour mobile */
  #portfolio-section-row h1, 
  #portfolio-section-row h2, 
  #portfolio-section-row .counter-value,
  #portfolio-section-row span { 
    font-size: 28px !important; 
    line-height: 1.2 !important;
    margin-bottom: 5px !important;
  }

  #portfolio-section-row p, 
  #portfolio-section-row .h6 {
    font-size: 14px !important;
    color: #6c757d;
  }


  /* --- 3. SECTION NOS VALEURS (Centrage Fixé) --- */
  
  /* On annule le padding-left: 10px du HTML qui décalait tout vers la droite */
  section.valeurs {
    padding-left: 0 !important;
    padding-right: 0 !important;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* On force le conteneur à centrer son contenu */
  .valeurs-container {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important; /* C'est cette ligne qui centre le bloc au milieu */
    gap: 15px; /* Espace entre les cartes */
    width: 100% !important;
    padding: 0 10px !important; /* Petite marge de sécurité sur les bords de l'écran */
  }

  /* On définit la taille des cartes pour qu'elles tiennent à 2 par ligne */
  .valeurs-container .valeurs-box {
    width: 45% !important; /* 45% + 45% + gap = ~100% centré */
    flex: 0 0 45% !important;
    margin: 0 !important; 
    padding: 20px 10px !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .valeurs-container .valeurs-box img {
    max-width: 100%;
    height: auto;
    max-height: 50px;
  }
}