.container {
    width: 60vw;   /* Largeur maximum de 1000px */
    margin: 0 auto;      /* Centrer le conteneur */

}

/* Styles pour les écrans plus petits que 1000px */

.portfolio{
    width: 100%;
    display: flex;
    margin-top: 1vw;
}
h1 {
    font-family: Classyvogueregular;
    font-size: 10.85vw;
    color: #e84e1b;
    font-weight: normal;
    padding: -2vw;
    position: absolute; 
}
.titre-arriere{
    margin-top:9vw;
    margin-left: 2vw;
    z-index: -10;
}
.titre-avant{
    z-index: 1;
    margin-left: 2vw;
}
.portfolio img{
    width: 25vw;
    margin-top: 8vw;
}
.photo{
    width: 25vw;
}
.presentation{
    width: 33vw;
    margin-top: 21vw;
    margin-left: 2vw;
    font-size: 1.5vw;
    font-family: InterLight;
}
h3{
    font-family: Classyvogueregular;
    font-size: 3vw;
    color: #e84e1b;
    font-weight: normal;
}


.button-container {
            display: flex;
            flex-wrap: wrap;
            gap: 0.3vw 0.2vw;
            margin-top: 0.5vw;
            margin-bottom: 0.5vw;
        }

        .button {
            border: 0.1vw solid #e84e1b;; /* Orange color for border */
            border-radius: 20px;
            padding: 0.3vw 0.4vw;
            font-family: InterLight;
            font-size: 1.3vw;
            color: #333;
            text-align: center;
            white-space: nowrap;
        }



@media (max-width: 600px) {
    .container {
        width: 80vw;     /* Utiliser 90% de la largeur de l'écran */
    }
    h1{
        font-size: 15vw;
    }
    .titre-arriere{
    margin-top:14vw;
    margin-left: 0vw;
    }
    .titre-avant{
        margin-left: 0vw;
    }
    .portfolio img{
    width: 60vw;
    margin-left: 9.5vw;
    margin-top: 8vw;
    }
    .portfolio{
        display: initial;
    }
    .presentation{
    width: 80vw;
    margin-top: 0vw;
    margin-left: 0vw;
    font-size: 3vw;
    }
    h3{
        font-size: 6vw;
        width: 80wv;
        white-space: nowrap;
    }
    .photo{
        width: auto;
    }
    .button-container {
            display: flex;
            flex-wrap: wrap;
            gap: 0.6vw 0.3vw;
            width: 100%;
            margin-top: 1vw;
            margin-bottom: 2vw;
        }

        .button {
            border: 0.3vw solid #e84e1b; /* Orange color for border */
            border-radius: 20px;
            padding: 0.6vw 0.8vw;
            font-family: InterLight;
            font-size: 3vw;
            color: #333;
            text-align: center;
            white-space: nowrap;
            margin-right: 0.5vw;
        }

}



.logo-adrr {
    width: 40vw;
    margin-right: 10vw;
    margin-left: 10vw;
    margin-top: 2vw;
    display: flex !important;
    justify-content: space-between;
}
.logo-adrr img{
    width: 5.5vw;
}
.logo-adrr img {
  transition: transform 0.3s ease; /* Transition douce pour l'effet de zoom */
}

.logo-adrr img:hover {
  transform: scale(1.2); /* Agrandit l'image de 20% */
}


@media (max-width: 600px) {
    .logo-adrr{
    width: 50vw;
    margin-right: 15vw;
    margin-left: 15vw;
    
    }
    .logo-adrr img{
    width: 7vw;
}
}


.bouton-lien{
    text-align: center;
    margin-top: 2vw;
    margin-bottom: 2vw;
}

.styled-button {
    display: inline-block;
    background-color: #e84e1b; /* Orange color */
    color: #e6e6f4;
    padding: 1vw;
    width: 35vw;
    margin: 0;
    font-size: 2vw;
    text-decoration: none;
    text-align: center;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: background-color 0.5s ease, color 0.5s ease, border 0.5s ease;
    border: 0.2vw solid #e84e1b;
    font-family: InterSemiBold;
}

.styled-button:hover {
    background-color: transparent;
    color: #D95338; /* Match the border color */
    border: 0.2vw solid #e84e1b;
}
.a-rev{
    background-color: #e6e6f4;
    color: #e84e1b;
}
.a-rev:hover{
    background-color: #e84e1b;
    color: #e6e6f4;
}
@media (max-width: 600px) {
    .styled-button {
    padding: 1vw;
    width: 50vw;
    margin: 0;
    font-size: 4vw;
    border: 0.3vw solid #e84e1b;
    }
    .styled-button:hover{
    border: 0.3vw solid #e84e1b;
    }
}



.photographie {
    width: 80vw; /* Largeur du conteneur */
    overflow: hidden; /* Masquer les débordements */
    margin: auto; /* Centrer le conteneur */
    position: relative; /* Positionner les boutons correctement */
}

.photographie-photo-container {
    position: relative;
    display: flex;
    align-items: center; /* Centrer verticalement les boutons */
    margin-top: 1vw;
}

.photographie-photo {
    display: flex;
    transition: transform 0.5s ease; /* Transition douce pour le défilement */
}

.photographie-photo img {
    width: 100%; /* Utiliser 100% pour remplir le conteneur */
    max-width: none; /* Assurer que les images ne soient pas limitées par une max-width */
    flex-shrink: 0; /* Empêche les images de se réduire */
}



button.prev, button.next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    font-size: 18px;
    z-index: 1;
}

button.prev { left: 0; }
button.next { right: 0; }

/* Styles pour les écrans de bureau */
@media (min-width: 600px) {
    .photographie {
        width: 60vw; /* Largeur du conteneur pour ordinateur */
    }
    .img1{
        margin-right: 1.5vw;
    }
    .img2{
        margin-right: 1.5vw;
    }
    .photographie-photo img {
        width: 19vw; /* Largeur de l'image pour ordinateur */
    }

    .photographie-photo {
        width: calc(19vw * 3); /* Largeur totale pour 3 images */
    }

    button.prev, button.next {
        font-size: 24px; /* Plus gros boutons pour ordinateur */
        padding: 15px; /* Plus de padding pour ordinateur */
    }
}

iframe{
    margin-top: 1vw;
    width: 60vw;
    height: 33.75vw;
}
.a-spe2{
    width: 40vw;
}

@media (max-width: 600px){
    iframe{
    width: 80vw;
    height: 45vw;
    } 
    .a-spe{
    width: 60vw;
    }
    .a-spe2{
    width: 80vw;
    }
}

.graphisme-image{
    display: flex;
    justify-content : space-between;
    margin-top: 1vw;
}
.graphisme-image .img3{
    height: 27.5vw;
}
.graphisme-image .img4{
    height: 27.5vw;
}
@media (max-width: 600px){
    .graphisme-image .img3{
    height: 35vw;
}
.graphisme-image .img4{
    height: 35vw;
}
}



footer{
    width: 100vw;
    background-color: #e84e1b;  

}
footer h2{
    font-weight: normal;
    font-family: InterSemiBold;
    color: #e6e6f4;
    display: flex;
    justify-content: center;
    padding: 2vw;
    font-size: 1.5vw;
}
@media (max-width: 600px){
    footer h2{
        font-size: 2.5vw;
    }
}