/**********************************************************************************************************************************************************/
/**************************************************************************** MAXI 1630PX *****************************************************************/
/**********************************************************************************************************************************************************/

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

    
}


/**********************************************************************************************************************************************************/
/**************************************************************************** MAXI 1420PX *****************************************************************/
/**********************************************************************************************************************************************************/

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

    
    
}



/**********************************************************************************************************************************************************/
/**************************************************************************** MAXI 1300PX *****************************************************************/
/**********************************************************************************************************************************************************/

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

    
    h1 {
        font-size: 2rem;
        line-height: 2.3rem;
    }

    h2 {
        font-size: 2rem;
        line-height: 2.3rem;
    }

    h3 {
        font-size: 1.6rem;
        line-height: 1.9rem;
    }

    h4 {
        font-size: 1.2rem;
        line-height: 1.5rem;
    }

    h5 {
        font-size: 1.1rem;
        line-height: 1.3rem;
    }    
    
    
    
}



/**********************************************************************************************************************************************************/
/**************************************************************************** MAXI 1170 PX ****************************************************************/
/**********************************************************************************************************************************************************/

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

    .wrap,
    .wrapthin {
        padding: 0 50px;
        width: 100%;
        max-width: 100%;
    }
    
    .logo-header {
        height: 75px;
        width: 200px;
    }
    
    p.big,
    .big p,
    .big {
        font-size: 1.3rem;
        line-height: 1.7rem;
    }
    
    header.header nav li a,
    header.header nav li a:hover {
        padding: 8px 8px;
        font-size: 1rem;
        border: 0;
    }
    
    
    
}


/**********************************************************************************************************************************************************/
/**************************************************************************** MAXI 1080 PX *****************************************************************/
/**********************************************************************************************************************************************************/

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


    
    
}
    

/**********************************************************************************************************************************************************/
/**************************************************************************** MAXI 967 PX *****************************************************************/
/**********************************************************************************************************************************************************/

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

    .flex-item-quart {
        width: 48%;
        margin-bottom: 20px;
    }
    
    .flex-item-trois-quart {
        width: 48%;
        margin-bottom: 20px;
    }
    
    section {
        padding: 35px 0 !important;
    }
    
    section.section-page {
        padding-bottom: 0 !important;    
    }
    
    #toTop {
        display: none !important;
    }
    
    h1 {
        font-size: 2rem;
        line-height: 2.3rem;
    }

    h2 {
        font-size: 1.8rem;
        line-height: 2.1rem;
    }

    h3 {
        font-size: 1.4rem;
        line-height: 1.7rem;
    }

    h5 {
        font-size: 1rem;
        line-height: 1.3rem;
    }    
    
    .thin {
        padding: 0 25px;
        width: 100%;
        max-width: 100%;
    }
    
    header.header.scroll .logo-header,
    .logo-header {
        height: 40px;
        width: 180px;
    }
    
    header.header,
    header.header.scroll {
        padding: 12px 0;
        box-shadow: 0 0 12px rgba(0,0,0,0.15);
    }

    header.header .flex-item-quart {
        width: 30%;
        margin-bottom: 0;
    }
    
    header.header .flex-item-trois-quart {
        width: 65%;
        margin-bottom: 0;
    }
    
    .top-image.top-image-page {
        height: 180px;
    }
    
    .container-flex-start {
        column-gap: 2%;
    }
    
    .home-accueil .flex-item-deux-tiers {
        width: 100%;
        padding: 0 25px;
        text-align: center;
    }
    
    .rangee-page .container-flex .flex-item-moitie:last-child,
    .rangee-page .container-flex .flex-item-tiers:last-child,
    .rangee-page .container-flex .flex-item-deux-tiers:last-child,
    .rangee-page .container-flex .flex-item-quart:last-child {
        margin-bottom: 0;    
    }
    
    #content {
        padding-top: 60px;
    }
    
    .wrap,
    .wrapthin {
        padding: 0 40px;
        width: 100%;
        max-width: 100%;
    }
    
    
    
}



/**********************************************************************************************************************************************************/
/**************************************************************************** MAXI 768 PX *****************************************************************/
/**********************************************************************************************************************************************************/

@media only screen and (max-width: 768px) {
    
    
    :root {
        --heightimage: 80vh;
    }
    
    .flex-item-moitie {
        width: 100%;
        margin-bottom: 30px;
    }
    
    #toTop {
        display: none !important;
    }
    
    .padding40 {
        padding: 30px;
    }

    .padding30 {
        padding: 20px;
    }

    .flex-item-tiers,
    .flex-item-deux-tiers {
        width: 100%;
        margin-bottom: 25px;
    }
    
    a.cta {
        padding: 10px 18px;    
    }
    
    p.big,
    .big p,
    .big {
        font-size: 1.2rem;
        line-height: 1.6rem;
    }
    
    .rangee-page {
        padding-top: 25px;
        padding-bottom: 25px;
    }
    
    .filet-epais {
        margin: 17px 0;    
    }
    
    .home-accueil h1 {
        font-size: 2.2rem;
        line-height: 2.6rem;
    }
    
    footer,
    footer .right {
        text-align: center;
    }
    
    .cont-img-actu,
    .actu-featured .cont-img-actu {
        height: auto;    
    }
 
    .wrap,
    .wrapthin {
        padding: 0 25px;
    }
    
    
    
}



/**********************************************************************************************************************************************************/
/**************************************************************************** MAXI 600 PX *****************************************************************/
/**********************************************************************************************************************************************************/

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

    
    h1 {
        font-size: 1.8rem;
        line-height: 2.1rem;
    }

    h2 {
        font-size: 1.7rem;
        line-height: 2rem;
    }

    h3 {
        font-size: 1.2rem;
        line-height: 1.5rem;
    }
    
    .flex-item-tiers,
    .flex-item-deux-tiers {
        width: 100%;
    }
    
    .home-accueil h1 {
        font-size: 2rem;
        line-height: 2.3rem;
    }
    
}




/**********************************************************************************************************************************************************/
/**************************************************************************** MAXI 480 PX *****************************************************************/
/**********************************************************************************************************************************************************/

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


    
    section {
        padding: 20px 0 !important;
    }
    
    .flex-item-trois-quart {
        width: 100%;    
    }
    
    p.big,
    .big p,
    .big {
        font-size: 1rem;
        line-height: 1.3rem;
    }
    
    .flex-item-quart {
        width: 100%;
    }

}

/**********************************************************************************************************************************************************/
/**************************************************************************** MAXI 375 PX *****************************************************************/
/**********************************************************************************************************************************************************/

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

    
    
    
}


@media only screen and (max-height: 800px) and (orientation: landscape) {
    :root {
        --heightimage: 90vh;
    }
}

@media only screen and (max-height: 450px) and (orientation: landscape) {
    .home-accueil {
        margin-top: 15vh;    
    }
}