/*-------- identity section --------*/

#identity {
    display: flex;
    flex-direction: row;
    gap: 6%;
    width: auto;
    height: auto;
}

#identity-text{
    transform: translateY(-11px);
    width: 62%;
    height: auto;
}

#identity #identity-img {
    width: 32%;
    height: 100%;
}

#identity #identity-img img {
    width: 100%;
    height: auto;
}

#identity-text h1 {
    font-size: clamp(1em, 3.9vw, 5em);
    margin: 0;
}
#identity-text h2 {
    font-size: clamp(0.6em, 2vw, 3em);
    transform: translateY(-20%);
    margin-bottom: 3%;
}

#identity-text p {
    margin-top: 2%;
}

/*-------- vision-et-valeurs section --------*/

#vision-et-valeurs {
    display: flex;
    flex-direction: column;
    height: auto;
    margin-top: 10%;
}

#vision-et-valeurs h2 {
    font-size: clamp(1.2em, 1.9vw, 3em);
    margin-bottom: 5%;
}

#vision-et-valeurs-container {
    display: flex;
    flex-direction: row;
    width: auto;
}

#vision-et-valeurs-container #vision-et-valeurs-text {
    width: 32%;
    display: flex;
    flex-direction: column;
    gap: 2%;
}


#vision-et-valeurs #vision-et-valeurs-img {
    width: 46%;
}

#vision-et-valeurs div img {
    width: 100%;
}

#dot-split {
    position: relative;
   width: 0.4%; /* épaisseur de la ligne */
  background: repeating-linear-gradient(
    to bottom,
    #999669,
    #999669 23px,   /* longueur d’un tiret */
    transparent 23px,
    transparent 38px /* espace entre tirets */
  );
  margin: 0 auto 0 6%;

}


/*-------- mobil-version --------*/

@media screen and (max-width: 550px) {

    /*-------- identity section --------*/

    #identity {
        flex-direction: column;
        align-items: center;
        margin-top: 40%;
    }

    #identity-text{
    transform: translateY(0);
    margin-top: 3%;
    width: 85%;
    }

    #identity #identity-img {
        width: 85%;
    }

    #identity-text h1 {
        font-size: clamp(1em, 4.9vw, 5em);
    }
    #identity-text h2 {
        font-size: clamp(0.6em, 3vw, 3em);
    }

    /*-------- vision-et-valeurs section --------*/

    #vision-et-valeurs h2 {
        margin-left: 7%;
        font-size: clamp(0.5em, 3.5vw, 3em);
        margin-bottom: 7%;
    }

    #vision-et-valeurs-container {
        flex-direction: column;
        align-items: center;
    }

    #vision-et-valeurs-container #vision-et-valeurs-text {
        width: 85%;
    }


    #vision-et-valeurs #vision-et-valeurs-img {
        width: 65%;
        margin-top: 7%;
    }

    #dot-split {
       width: 0px;
    }
}