/* TODO Régler la premier section en format paysage */

@media all and (max-width: 1240px){
    #about-section{
        & .about-content{
            bottom: 10%;
            top: 10%;
        }
    }
}

@media all and (max-width: 1200px){

    #proposalModal{
        & form{
            & textarea{
                width: 90%;
            }
        }
    }

    #presta-section{
        & .presta-cards{

            & .presta-card{

                & .presta-card-content{
                    height: 150px;
                }
            }
        }
    }
}


@media all and (max-width: 992px){

    nav{
        & .nav-offer a{
            width: 250px;
            text-align: center;
        }
    }

    #proposalModal{
        & form{
            & textarea{
                width: 100%;
            }
        }
    }

    #first-section{
        margin-top: 58px;
    }

    #guaranty-section {
        & .guaranty-cards{
            & .guaranty-card {
                margin-bottom: 15px;

                & .guaranty-card-content{
                    width: 100%;
                }
            }
        }
    }

    #presta-section {
        & .presta-cards {

            & .presta-card {

                & .presta-card-content {
                    height: 100px;
                }
            }
        }

        & .presta-card-success-icon {
            height: 200px;
        }
    }

    #about-page .founder-photo--alt2{
        background-size: cover;
    }
}

@media (max-width: 950px) and (orientation: landscape) {
    #first-section{
        height: 100vh;

        & .overlay {

            & .overlay-content {

                & .first-section-slogan {
                    font-size: 0.8rem;
                }

                & h1 {
                    font-size: 1.5rem;
                }

                & p {
                    font-size: 1.1rem;
                }

                & .btn {
                    font-size: 0.9rem;

                }
            }
        }
    }
}


@media all and (max-width: 685px){
    #contact-page{

    & .contact-page-header{
        height: 80px;
        & h1{
            font-size: 1.5rem;
        }
    }

}
}


@media all and (max-width: 700px){
    #about-section{
        & .about-image{
            width: 100%;
        }


        & .about-content{
            bottom: 5%;
            top: 30%;
            left: 2%;
            right: 2%;

            & h2{
                margin-bottom: 25px;
            }
        }
    }
}

@media all and (max-width: 576px){
    .modal{

        & .modal-dialog{
            max-width: 95%;
        }

    }
}

/* Variante mobile : un peu plus haut pour éviter d’empiéter sur les CTA bas */
@media (max-width: 575.98px) {
  .location-info-scroll,
  .conciergerie-info-scroll {
    bottom: calc(72px + env(safe-area-inset-bottom));
  }
}


@media all and (max-width: 545px){
    .page-banner{

        & h2{
            font-size: 2.2rem;
        }
    }

    #contact-page{

    & .contact-page-header{
        height: 120px;
    }

}
}


@media all and (max-width: 530px){
    #about-section{

        & .about-content{
            bottom: 5%;
            top: 15%;
        }
    }
}

@media all and (max-width: 430px){
    #first-section{
        height: 80vh;

        & .overlay {

            & .overlay-content {

                margin-top: 50px;

                & .first-section-slogan {
                    font-size: 0.8rem;
                }

                & h1 {
                    font-size: 2em;
                }

                & p {
                    font-size: 1.2rem;
                }

                & .btn {
                    font-size: 0.9rem;

                }
            }
        }
    }
}



@media all and (max-width: 410px){
    #about-section{

        & .about-content{
            bottom: 2%;
            top: 0;

            & p{
                font-size: 0.9rem;
            }
        }
    }

    #presta-section{
        & .presta-cards{

            & .presta-card{

                & .presta-card-content{
                    height: 150px;
                }
            }
        }
    }
}

@media all and (max-width: 395px) {

    #first-section {
        height: 100vh;

        & .overlay {
            & .overlay-content {
                padding-top: 15%;
            }
        }
    }
}

@media all and (max-width: 345px){
    #first-section{
        & h1{
            font-size: 2rem !important;
        }

        & .overlay{
            & .overlay-content {
                padding-top: 20%;
            }
        }

    }
}

@media all and (max-width: 328px){
    .page-banner{

        & h2{
            font-size: 1.7rem;
        }
    }
}

@media all and (max-width: 310px) {
    #first-section {
        & .overlay {
            & .overlay-content {
                padding-top: 25%;
            }
        }

    }

    #presta-section{
        & .presta-cards{

            & .presta-card{

                & .presta-card-content{
                    height: 170px;
                }
            }
        }
    }
}