/**********************************************************/
/**********************************************************/
/********************* responsive.css *********************/
/**********************************************************/
/**********************************************************/

/* PC 1400 */

@media screen and (max-width: 1400px){
    
    /*home*/
    .btn-white{
        font-size: 0.7em;
        max-height: 10%;
    }

    #img-google{
        display: none;
    }
}

/* PC 1250 */

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

    /*home*/
    .intro p {
        font-size: 0.85em;
    }

    /*temoignage*/
    .hypnose p{
        font-size: 0.9em;
    }
}

/* MOBILE 900 */

@media screen and (max-width : 900px){
    /*style*/
    h1{
        font-size: 2.5em;
    }

    .networks{
        display: none;
    }

    header{
        display: flex; 
    }

    .navbar{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .nav-links{
        position: absolute;
        left: 0;
        top: 0;
        background-color: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(8px);
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 300%;
        transition: all 0.35s ease-in-out;
    }

    .nav-links.mobile-menu{
        margin-left: 0;
    }

    .nav-links ul{
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: right;
    }

    .nav-links li{
        animation: agrandir 1s ease-out forwards;
    }

    .navbar .nav-links ul li{
        margin: 20px 0;
    }

    .nav-links p{
        display: none;
    }

    #img-header{
        max-width: 35%;
        margin-left: 100px;
    }

    #img-header:hover{
        max-width: 30%;
    }

    .navbar .menu-burger{
        display: block;
        margin-right: 100px;
        max-width: 7%;
    }

    .btn-white{
        width: 30%;
    }

    #btn-info,
    #btn-rdv{
        padding: 3%;
    }

    .btn-purple{
        width: 30%;
    }

    #img-logo{
        display: none;
    }

    #redirect{
        display: none;
    }

    .article-s1{
        padding: 50px 80px;
    }

    /*home*/
    .background h2 {
        font-size: 1.5em;
    }

    .seance img{
        max-width: 100%;
    }

    /* qui suis-je */
    .tit-s1{
        font-size: 0.9em;
    }

    /* hypnose */
    .hypnose p {
        min-width: 150%;
        max-width: 100%;
    }

    .pk-hypnose p{
        min-width: 80%;
        max-width: 90%;
    }
}

/* MOBILE 400 */

@media screen and (max-width : 400px) {
    #img-header{
        max-width: 45%;
        margin-left: 50px;
    }

    #img-header:hover{
        max-width: 40%;
    }

    .navbar .menu-burger{
        display: block;
        margin-right: 50px;
        max-width: 9%;
    }
}

/* MOBILE 300 */

@media screen and (max-width : 300px) {
    /* style */
    h1 {
        font-size: 0.5em;
        overflow: auto;
    }
    
    p{
        overflow: auto;
        font-size: 0.5em;
    }
}