/* ---------------- section à propos sur la page d'accueil -------------- */
.a-propos{
    padding: 50px 80px;
    background-color:var(--beige);
    display:flex;
}

.a-propos-textes{
    display:flex;
    flex-direction: column;
    width:50%;

    & h2{
        color:var(--black);
        font-family:'Didot';
        font-size:4.5rem;
    }

    & h3{
        font-family:'DidotItalic';
        color:var(--orange);
        font-size:2rem;
    }

    & p{
        padding:20px 0;
        max-width:500px;
        width:100%;
        font-size:1.1rem;
        line-height:1.2;
        font-family:'ProximaNovaLight';
        color:var(--black);
        & span{
            font-family:'ProximaNovaSemiBold';
        }
    }
}

.a-propos-photo{
    width:50%;
    display:flex;
    justify-content: center;
    & img{
        width: 100%;
        height: 500px;
        object-fit: cover;
        max-height: 500px;
        max-width: 450px;
    }
}



/* ---------------- responsive -------------- */
@media screen and (max-width:1280px){
    .a-propos-photo {
    align-items: center;
    & img {
    height: 400px;
    max-height: 400px;
    max-width: 350px;
  }
}
}

@media screen and (max-width:1024px){
.a-propos{
    flex-direction: column;
    gap:20px;
}

.a-propos-textes {
    width:100%;
  & h2 {
    font-size: 3.5rem;
  }
  & h3{
    font-size: 1.8rem;
    line-height: 1.1;
  }
  & p{
    font-size:1rem;
  }
}

.a-propos-photo{
    width:100%;
}
}

@media screen and (max-width:768px){
    .a-propos{
        padding:50px;
    }

    .a-propos-textes {
    & h2{
        font-size:3rem;
    }
    & h3 {
      font-size: 1.4rem;
      line-height: 1.1;
    }
    & p{
        font-size:0.9rem;
    }
  }
}

@media screen and (max-width:480px){
    .a-propos{
        padding:50px 30px;
    }

    .a-propos-textes {
    & h2{
        font-size:2.8rem;
    }
    & h3 {
      font-size: 1.2rem;
    }
  }
}