@charset "utf-8";

/* Telephone */
@media screen and (max-width:550px), screen and (max-device-width: 550px){

    .page{
        width: 100%;
    }
    
    .colonne1, .colonne2, .colonne3, .colonne4, .colonne5, .colonne6, .colonne7, .colonne8, .colonne9, .colonne10, .colonne11, .colonne12{
        margin-left: 1.5%;
        margin-right: 1.5%;
        width: 97%;
    }
    .repousse-colonne1,  .repousse-colonne2, .repousse-colonne3, .repousse-colonne4, .repousse-colonne5, .repousse-colonne6, .repousse-colonne7, .repousse-colonne8, .repousse-colonne9, .repousse-colonne10, .repousse-colonne11, .repousse-colonne12{
        margin: auto;
        margin-left: auto;
    }
    
    .visible-phone{display: block}
    .visible-phone-inline{display: inline-block}
    .visible-tablet{display: none}
    .visible-desktop{display: none} 
    .visible-large{display: none}
    .visible-touch{display: block}
    
    .hidden-phone{display: none}
    .hidden-phone-inline{display: none}
    .hidden-tablet{display: block}
    .hiden-desktop{display: block}
    .hidden-large{display: block}
    .hidden-touch{display: none}
    
    
    .texte-article{
        position: relative;
        top: 30px;
        left: 0;
        margin-bottom: 50px;
        transform: inherit;
    }

@media screen and (min-width: 551px) and (max-width:800px) {
    .texte-article{
        top: 0px;
    }
}   
    
}/* Fin Telephone */








/* Teablette */
@media screen and (min-width: 551px) and (max-width:1024px){

    .page{
        width: 96%;
    }
    
    
    .visible-phone{display: none}
    .visible-phone-inline{display: none}
    .visible-tablet{display: block}
    .visible-desktop{display: none}
    .visible-large{display: none}
    .visible-touch{display: block}
    
    .hidden-phone{display: block}
    .hidden-phone-inline{display: inline-block}
    .hidden-tablet{display: none}
    .hiden-desktop{display: block}
    .hidden-large{display: block}
    .hidden-touch{display: none}
    
    .image-menu1{
        width: 100%;
    }

}/* Fin Teablette */








/* Petit PC */
@media screen and (min-width: 1025px) and (max-width:1299px){

    .page{
        width: 960px;
    }
    
    .visible-phone{display: none}
    .visible-phone-inline{display: none}
    .visible-tablet{display: none}
    .visible-desktop{display: block}
    .visible-large{display: none}
    .visible-touch{display: none}
    
    .hidden-phone{display: block}
    .hidden-phone-inline{display: inline-block}
    .hidden-tablet{display: block}
    .hiden-desktop{display: none}
    .hidden-large{display: block}
    .hidden-touch{display: block}
    
    .image-menu1{
        width: 100%;
    }
}/*Fin Petit PC */









/* HD*/
@media screen and (min-width: 1300px) {
    body{
        font-size: 100%;
    }
    .page{
        width: 90%;
        max-width: 1400px;
    }
    
    
    
    
    
    .visible-phone{display: none}
    .visible-phone-inline{display: none}
    .visible-tablet{display: none}
    .visible-desktop{display: none}
    .visible-large{display: block}
    .visible-touch{display: none}
    
    .hidden-phone{display: block}
    .hidden-phone-inline{display: inline-block}
    .hidden-tablet{display: block}
    .hiden-desktop{display: block}
    .hidden-large{display: none}
    .hidden-touch{display: block}
    
    .image-menu1{
        width: 100%;
    }
    #section3 .nav1 {
        top:calc(5% + 56px);
        left: 15%;
    }
    #section3 .nav3 {
        top: 65%;
        left: 25%;
    }
    
}/*Fin HD*/















/* responsive diapo */
/* 1diapo */
@media screen and (max-width:550px) {
    .diaporama {
        width: 97vw;
        margin-left: 1.5vw;
        margin-right: 1.5vw;
    }
    /* surplu des galerie*/
    .exer-1colone{
        display: none;
    }
    .exer-2colone{
        display: none;
    }
    .exer-3colone{
        display: none;
    }
    .exer-4colone{
        display: none;
    }
    .exer-5colone{
        display: none;
    }
    /* galerie */
    .galerie-flex{
        height: 194vw;
    }
    .galerie-flex div{
        width: 97vw;
        height: 97vw;
    }
}
/* 2diapo */
@media screen and (min-width: 551px) and (max-width:800px) {
    .diaporama {
        width: 47vw;
        margin-left: 1.5vw;
        margin-right: 1.5vw;
    }
    /* surplu des galerie*/
    .exer-2colone{
        display: none;
    }
    .exer-3colone{
        display: none
    }
    .exer-4colone{
        display: none;
    }
    .exer-5colone{
        display: none;
    }
    /* galerie */
    .galerie-flex{
        height: 97vw;
    }
    .galerie-flex div{
        width: 48.5vw;
        height: 48.5vw;
    }
}
/* 3diapo */
@media screen and (min-width: 801px) and (max-width:1050px) {
     .diaporama {
        width: 30.3333332vw;
        margin-left: 1.5vw;
        margin-right: 1.5vw;
    }
    /* surplu des galerie*/
    .exer-2colone{
        display: block;
    }
    .exer-3colone{
        display: none;
    }
    .exer-4colone{
        display: none;
    }
    .exer-5colone{
        display: none;
    }
    /* galerie */
    .galerie-flex{
        height: 97vw;
    }
    .galerie-flex div{
        width: 32.33333333333vw;
        height: 32.33333333333vw;
    }
    .galerie-flex div:nth-of-type(1){
        margin-top: 50px;
    }
    .galerie-flex div:nth-of-type(2){
        margin-bottom: 50px;
    }
}
/* 4diapo */
@media screen and (min-width: 1051px) and (max-width:1100px) {
    .diaporama {
        width: 22vw;
        margin-left: 1.5vw;
        margin-right: 1.5vw;
    }
    /* surplu des galerie*/
    .exer-2colone{
        display: block;
    }
    .exer-3colone{
        display: block;
    }
    .exer-4colone{
        display: none;
    }
    .exer-5colone{
        display: none;
    }
    /* galerie */
    .galerie-flex{
        height: 75vw;
    }
    .galerie-flex div{
        width: 24.25vw;
        height: 24.25vw;
    }
    .galerie-flex div:nth-of-type(1){
        margin-top: 50px;
    }
    .galerie-flex div:nth-of-type(2){
        margin-bottom: 50px;
    }
    .galerie-flex div:nth-of-type(6){
        margin-top: 50px;
    }
    .galerie-flex div:nth-of-type(7){
        margin-bottom: 50px;
    }
    
}
/* 5diapo */
@media screen and (min-width: 1101px) and (max-width:1500px) {
     .diaporama {
        width: 17vw;
        margin-left: 1.5vw;
        margin-right: 1.5vw;
    }  
    /* surplu des galerie*/
    .exer-2colone{
        display: block;
    }
    .exer-3colone{
        display: block;
    }
    .exer-4colone{
        display: block;
    }
    .exer-5colone{
        display: none;
    }
    /* galerie */
    .galerie-flex{
        height: 58.2vw;
    }
    .galerie-flex div{
        width: 19.4vw;
        height: 19.4vw;
    }
    .galerie-flex div:nth-of-type(1){
        margin-top: 9.7vw;
    }
    .galerie-flex div:nth-of-type(2){
        margin-bottom: 9.7vw;
    }
    .galerie-flex div:nth-of-type(6){
        margin-top: 9.7vw;
    }
    .galerie-flex div:nth-of-type(7){
        margin-bottom: 9.7vw;
    }
    .galerie-flex div:nth-of-type(8){
        margin-top: 19.4vw;
    }
    .galerie-flex div:nth-of-type(8){
        margin-bottom: 19.4vw;
    }
}
/* 6diapo */
@media screen and (min-width: 1501px) {
     .diaporama {
        width: 13.66666667vw;
        margin-left: 1.5vw;
        margin-right: 1.5vw;
    }  
    /* surplu des galerie*/
    .exer-2colone{
        display: block;
    }
    .exer-3colone{
        display: block;
    }
    .exer-4colone{
        display: block;
    }
    .exer-5colone{
        display: block;
    }
    /* galerie */
    .galerie-flex{
        height: 48.5vw;
    }
    .galerie-flex div{
        width: 16.166666666666667vw;
        height: 16.166666666666667vw;
    }
    .galerie-flex div:nth-of-type(1){
        margin-top: 7.8333333333vw;
    }
    .galerie-flex div:nth-of-type(2){
        margin-bottom: 7.8333333333vw;
    }
    .galerie-flex div:nth-of-type(6){
        margin-top: 7.8333333333vw;
    }
    .galerie-flex div:nth-of-type(7){
        margin-bottom: 7.8333333333vw;
    }
    .galerie-flex div:nth-of-type(8){
        margin-top: 16.166666666666667vw;
    }
    .galerie-flex div:nth-of-type(8){
        margin-bottom: 16.166666666666667vw;
    }
    .galerie-flex div:nth-of-type(9){
        margin-top: 7.8333333333vw;
    }
    .galerie-flex div:nth-of-type(10){
        margin-bottom: 7.8333333333vw;
    }
}