/* RESPONSIVE */




/*---------------------------------------------------*/
/*     ENTRE 1280 et 1680 = LARGE                    */
/*---------------------------------------------------*/

@media screen and (min-width: 1281px) and (max-width: 1680px) {
    #nav-large { display:block; }
    #nav-medium { display:none; }
    #nav-small { display:none; }

    #filters { display:block; }
    #filters-resp { display:none; }
  
}




/*---------------------------------------------------*/
/*     ENTRE 1025 et 1280 = LAPTOPS                  */
/*---------------------------------------------------*/

@media screen and (min-width: 1025px) and (max-width: 1280px) {
    #nav-large { display:block; }
    #nav-medium { display:none; }
    #nav-small { display:none; }
   
   #filters { display:block; }
   #filters-resp { display:none; }
}



/*---------------------------------------------------*/
/*     IPAD                                          */
/*---------------------------------------------------*/
@media screen and (min-width: 761px) and (max-width: 1024px) {
    header { padding: var(--marginStd) 15px; }

    #nav-large { display:none; }
    #nav-medium { display:block; }
    #nav-small { display:none; }

    .containerTop { padding-top:50px; }

    #filters { display:none; }
    #filters-resp { display:block; }
    #filters-search { position: absolute;right: 40px;width: 250px; }
    #filters-search input { width: 250px; }

    .section-container.columns {
        -webkit-columns: 1;
         -moz-columns: 1;
              columns: 1;
        -moz-column-fill: balance;
            column-fill: balance;
          column-gap: 30px;
    }
    .section img { float: left;max-width: 450px; }


}
/*---------------------------------------------------*/
/*     < 760 = SMALL                                 */
/*---------------------------------------------------*/

@media screen and (min-width: 641px) and (max-width: 760px) {
    header { padding: var(--marginStd) 15px; }
    #nav-large { display:none; }
    #nav-medium { display:none; }
    #nav-small { display:block; }
    
    .container { width:calc(100% - 30px); }

    .case, .case-unit { width: 50%; }

    #filters { display:none; }
    #filters-resp { display:block; }

    .shape-box {
        border: solid 0px tomato;
        max-width: 400px;
        max-height: 400px;   
    }
    .shape-box.square   { width: 278px; height: 290px; }
    .shape-box.circle   { width: 278px; height: 275px; }
    .shape-box.triangle { width: 354px; height: 284px;margin-left:-39px; }
    .shape-box.hex      { width: 300px; height: 274px;margin-left:-9px; }


    #filters-search { position: absolute;right: 80px;top: -5px;width: 170px; }
    #filters-search input { width: 170px; }


    .section { padding:50px 30px; }
    .section-container, .content { font-size: 16px; }
    .section-container.columns {
        -webkit-columns: 1;
         -moz-columns: 1;
              columns: 1;
        -moz-column-fill: balance;
            column-fill: balance;
          column-gap: 30px;
    }

    .section img { float: none;max-width: 400px; }



    #player {
        position:fixed;
        left:50%;margin-left:-300px;
        bottom:15px;
        width:600px;height:68px;
        padding: 10px;
        background-color:var(--beige);
        border-radius:15px;
        border:solid 0.5px var(--bleu-cyan);
        
        z-index: 7000;
    }
    #player-play { width:80px; }
    #player-title { width: 335px; }
   
}
/*---------------------------------------------------*/
/*     < 640 = SMALL                       */
/*---------------------------------------------------*/

@media screen and (max-width: 640px) {
    header { padding: var(--marginStd) 15px; }
    #nav-large { display:none; }
    #nav-medium { display:none; }
    #nav-small { display:block; }

    .container { width:100%; }

    .case, .case-unit { width: 100%; }
    .case-titre, .case-legende { text-align:center; }
    .case-duree { right: 15%; }

    #filters { display:none; }
    #filters-resp { display:block; }
    

    .shape-box {
        border: solid 0px tomato;
        max-width: 100%;
        max-height: 100%;   
    }
    .shape-box.square   { width: 100%; height: 290px; }
    .shape-box.circle   { width: 100%; height: 275px; }
    .shape-box.triangle { width: 100%; height: 284px; }
    .shape-box.hex      { width: 100%; height: 274px; }

    #filters-search { display:none; }
    #filters-search input { width: 170px; }

    .section { padding:50px 30px; }
    .section-container, .content { font-size: 16px; }
    .section-container.columns {
        -webkit-columns: 1;
         -moz-columns: 1;
              columns: 1;
        -moz-column-fill: balance;
            column-fill: balance;
          column-gap: 30px;
    }
    .section img { float: none;max-width: 400px; }
    

    #player {
        position:fixed;
        left:50%;margin-left:-45%;
        bottom:15px;
        width:90%;height:68px;
        padding: 10px;
        background-color:var(--beige);
        border-radius:15px;
        border:solid 0.5px var(--bleu-cyan);
        
        z-index: 7000;
    }
    #player-play { width:80px; }
    #player-title { width: 335px; }

}