/* section de présentation générale de l'agence avec une photo et un texte */
.notre__agence{
    padding: 10px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.agence__description{
    width:80%;
    & h1{
        font-family: 'PoppinsBlack';
        padding: 10px 0;
        margin: 0;
        width: 80%;
        color: var(--orange);
        font-size: 2.5rem;
    }
}

.agence__description__container{
    display:flex;
    gap:50px;
    width:100%;
    & img{
        width:55%;
        height:100%;
        object-fit: cover;
    }
}

.agence__textes{
    display:flex;
    flex-direction: column;
    gap:20px;
    width:40%;
    & p{
        margin:0;
        padding:0;
        font-size:1.2rem;
    }
    & span{
        font-family:'PoppinsBold';
    }
}


/* ---- section avec 3 boxes des valeurs de l'agence ---- */
.agence__box{
    width:80%;
    padding:50px 0;
}

.agence__box__container{
    display:flex;
    gap:30px;
}

.agence__box__item{
    position:relative;
    width:33%;
    padding: 20px 0;
    & h3{
        font-family: 'PoppinsBlack';
        padding: 0;
        margin: 0;
        width: 80%;
        color: var(--orange);
        font-size: 2rem;
        line-height:0.8;
        position: relative;
        z-index: 1;
    }
    & p{
        position: relative;
        z-index: 1;
        & span{
            font-family:'PoppinsBold';
        }
    }
}



/* ----- section famille élargie ------ */
.famille__elargie{
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.famille__elargie__container{
    width:80%;
    display: flex;
    flex-direction: column;
    align-items: center;
    & h2{
        font-family: 'PoppinsBlack';
        padding: 0;
        margin: 0;
        width:100%;
        color: var(--orange);
        font-size: 2.5rem;
        text-align:left;
    }
    & p{
        font-size:1.2rem;
        padding:5px 0;
        margin:0;
    }
}

.famille__elargie__items{
    height:100%;
    width:80%;
    max-width:750px;
    margin:50px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap:20px;
    flex-wrap:wrap;
}

.swiper-slide-famille{
    width:235px;
    & h3{
        line-height:1.2;
        margin:0;
        color:var(--noir);
        font-family:'PoppinsBold';
        font-size:1.2rem;
        padding: 0 20px;
        text-align: center;
    }
    & h5{
        line-height:1.1;
        margin:0;
        color:var(--noir);
        font-size:0.9rem;
        padding: 5px 20px;
        text-align:center;
    }
    & a{
        text-decoration: none;
    }
}

.slide__container{
    background-color: var(--blanc);
    border-radius:50%;
    aspect-ratio:1/1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap:5px;
    padding:10px;
}



/* ----- section notre modele ------- */ 
.notre__modele{
    padding: 10px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color:var(--orange);
}

.modele__container{
    width:80%;
    display:flex;
    justify-content: space-between;
    margin:70px 0;
    & h2{
        font-family: 'PoppinsBlack';
        padding:0;
        margin: 0;
        width: 80%;
        color: var(--noir);
        font-size: 2.5rem;
    }
    & p{
        margin:0;
        font-size:1.2rem;
    }
}

.modele__content{
    width:60%;
    display:flex;
    flex-direction: column;
    gap:10px;
}

.modele__img{
    width:40%;
    display: flex;
    justify-content: center;
    aspect-ratio: 1/1;
    align-items: center;
    background-color:white;
    border-radius:50%;
    max-width:280px;
    height:100%;
    & img{
    border-radius:50%;
    aspect-ratio: 1/1;
    max-width: 250px;
    width: 100%;
    height:fit-content;
    object-fit: cover;
    padding:35px;
    }
}


/* ------ section nous rencontrer ------- */
.nous__rencontrer{
    background-color:var(--blanc);
    padding: 30px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.rencontrer__container{
    width:80%;
    & h2{
        font-family: 'PoppinsBlack';
        padding:5px 0;
        margin: 0;
        width: 80%;
        color: var(--noir);
        font-size: 2.5rem;
    }
    & p{
        margin:0;
        font-size:1.2rem;
    }
}

.rencontrer__content{
    display:flex;
    margin: 30px 0;
    gap:20px;
    & .img__box__rencontrer{
        display:flex;
        gap: 20px;
        width:70%;
        & img{
            width: 47%;
        }
    }
}

.rencontrer__adress__box{
    display: flex;
  flex-direction: column;
  gap: 30px;
  width:30%;
  & p{
    font-size:1.2rem;
  }
  & span{
    font-family:'PoppinsBold';
  }
}




/* medias queries */
@media screen and (max-width:1024px){
    .agence__box{
        padding: 30px 0 0px 0;
    }

    .agence__textes{
        & p{
            font-size:1rem;}
    }

    .agence__box__item{
        & h3{
            font-size:1.8rem;}
        & p{
            font-size:1rem;}
        & img{
            max-width:150px;
            top:10%;}
    }

    .famille__elargie__container {
    & p {
        font-size: 1rem;}
    }

    .famille__elargie__items{
        gap:10px;
    }

    .modele__container{
        & p{
            font-size:1rem;}
    }

    .modele__img{
        max-width:220px;
    }

    .nous__rencontrer{
        & p{
            font-size:1rem ;}
    }

    .rencontrer__adress__box{
        & p{
            font-size:1rem;}
    }
}



@media screen and (max-width:768px){
    .agence__description__container{
        flex-direction: column-reverse;
        gap:20px;
        & img{
            width:100%;
        }
    }

    .agence__textes{
        width:100%;
    }

    .agence__box__container{
        flex-direction: column;
        gap:0;
    }

    .agence__box__item{
        width:100%;
    }

    .famille__elargie{
        & h2{
            line-height:1.1;
            padding: 10px 0;}
    }

    .famille__elargie__items{
        margin: 30px 0;
    }

    .swiper-slide-famille{
        & h3{
            font-size:1.1rem;
        }
    }

    .slide__container{
        gap:0;
    }

    .modele__container{
        flex-direction:column;
        margin: 30px 0;
        align-items: center;
        gap:30px;
        & h2{
            line-height:1.1;
            padding: 10px 0;}
    }

    .modele__content{
        width:100%;
    }

    .modele__img{
        width:100%;
    }

    .publications__container{
        & h2{
            line-height:1.1;
            padding: 10px 0;}
    }

    .rencontrer__container{
        & h2{
            line-height:1.1;
            padding: 10px 0;}
    }

    .rencontrer__content{
        flex-direction:column;
        margin:20px 0;
        gap:20px;
        & .img__box__rencontrer{
            gap:10px;
            width:100%
        }
        & .rencontrer__adress__box{
            gap:10px;
            width:100%;}
    }
}




@media screen and (max-width:480px){
    .agence__description{
        & h1{
            line-height:1;}}

    .agence__description__container{
        gap: 15px;
        margin: 15px 0;
        & img{
        min-width: auto;}}

    .agence__box__container{
        gap:0;}

    .famille__elargie{
        & h2{
            width:100%;}
    }

    .rencontrer__container{
        & h2{
            line-height:1;
            padding: 10px 0;}
    }

    .rencontrer__container{
        & h2{
            width:100%;}
    }
    .rencontrer__content{
        & .img__box__rencontrer{
            flex-direction: column;
        & img{
            width:100%;
        }
        }
    }
}