@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');

* {
  box-sizing: border-box;
}

body {
  margin-top: 40vh;
  background-color: #fafafa;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
  transition: background 0.2s linear;

}

body.dark {
  background: #292C35;
}


body.dark p {
  color: #fff;
}

body.dark h1 {
  color: #e6f1ff;
}

body.dark h2 {
  color: #e6f1ff;
}

body.dark span {
  color: #fff;
}

.checkbox {
  opacity: 0;
  position: absolute;

}

.label {
  background-color: #111;
  margin-top: -50px;
  margin-right: 20px;
  border-radius: 50px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px;
  position: relative;
  height: 26px;
  width: 50px;
  transform: scale(1.5);
  float: right;


}

.label .ball {
  background-color: #fff;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
  height: 22px;
  width: 22px;
  transform: translateX(0px);
  transition: transform 0.2s linear;
}

.checkbox:checked + .label .ball {
  transform: translateX(24px);
}


.fa-moon {
  color: #f1c40f;
}

.fa-sun {
  color: #f39c12;
}

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.main {
  margin: 15px;
  max-width: 900px;
  max-height: 300px;
}

h1 {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: x-large;
  margin: 0;
  color: #233554;
}

h2 {
  font-family: 'Lato', sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: small;
  color:#233554;
}


.main_description {
  font-family: 'Lato', sans-serif;
  font-weight: 500;
  font-size: small;
  color:#112240;
  margin: 1.5em 0 2em 0;
}

.main_description p {
  font-weight: 300;
  line-height : 1.4em;
  margin: 0.8em 0;
  color: #233554;
}


.main_keywords {
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  font-style: italic;
  font-size: small;
  margin: 1.5em 0 2em 0;
  color: #0b84ff;
}

.main_keywords span {
  color: #0a192f;
}


.main_informations {
  font-family: 'Lato', sans-serif;
  font-size: medium;
}

.main_informations p {
  font-weight: 300;
  line-height : 1.4em;
  margin: 0.8em 0;
  color: #233554;
}

.main_informations span {
  font-weight: 300;
}

a {
  color: #64ffda;
}

.main_informations .informations_socials {
  font-size: small;
  margin: 2em 0;
}

.informations_socials a {
  color: #0b84ff;
  text-decoration: none;
}


.customer {
  font-family: 'Lato', sans-serif;
  font-size: small;
}

.customer p {
  font-weight: 300;
  line-height : 1.4em;
  margin: 0.8em 0;
  color: #233554;
}

.customer span {
  font-weight: 300;
}

a {
  color: #0b84ff;
}


.certification {
    position: relative;
    width: 60px; /* Largeur ajustée à la taille de l'image */
    height: 60px; /* Hauteur ajustée à la taille de l'image */
    display: flex;
    justify-content: center;
    align-items: center;
    /*gap: 10px; /* Espace entre les images, ajustez la valeur selon vos besoins */

}

.certification p {
  font-weight: 300;
  line-height : 1.4em;
  margin: 0.8em 0;
  color: #233554;
}


.small-badge {
    max-width: 100%; /* L'image ne sera jamais plus large que son conteneur */
    height: auto;    /* La hauteur sera ajustée automatiquement pour maintenir les proportions */
    display: block;  /* Pour éviter les espaces indésirables sous l'image */
    margin: 0 auto;  /* Centre l'image horizontalement si le conteneur est plus large */

}

.grayscale-image {
    filter: grayscale(100%);

}

.transparent-image {
    opacity: 0.4; 
}



/* Pour les versions mobiles (écrans de largeur max de 600px) */
@media (max-width: 600px) {
    body {
        margin-top: -90px; /* Ajustez cette valeur selon vos besoins */
    }
}

@media (max-width: 600px) {
    .certification {
        flex-direction: column;
        align-items: flex-start;
    }
}

.badge-container {
        display: flex;
        flex-wrap: wrap;
        border-width: 0;
      }
  
  .badge {
    margin: 10px;
    }

/* Loader Certif SAFe 

.loader {
    position: absolute;
    top: 0;
    left: -56%;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1; 
}

.loader::after {
    content: '';
    width: 10px; 
    height: 10px;
    border-radius: 50%;
    border: 6px solid #ccc; 
    border-top-color: #0783A0; 
    animation: spin 1s linear infinite; 
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
*/