.respOff{display:inline-block!important;}
.respOn{display:none!important;}

@media screen and (min-width: 720px){
	@media screen and (min-height: 500px){
		.respOn{display:inline-block!important;}
		.respOff{display:none!important;}
		#proposContainer{right:15px;}
		#colophon-container{padding-left:15px;padding-right:15px;padding-bottom:22px;}
		#colophon-gauche{width:50%;box-sizing:border-box;padding-right:40px;}
		#colophon-droite{position:relative;float:left;width:50%;box-sizing:border-box;padding-right:80px;}
		.titre-content{padding-right:0px;}
		.titre-content, .titre-content-contact {margin-top:2px;}
		#proposContainer{margin-top:3px;}
		.titre-content-contact h2{margin-top:5px;margin-bottom:0px;height:auto;float:left;width:100%;}
		article{padding:15px;padding-bottom:22px;padding-top:10px;}	
		a,p,span,h1,h2,h4,h5,h6,em,strong,li,ul,div,menu,nav,footer,article,body,html,*{font-size:18px;line-height:22px;}
		section{margin-top:-40px;}
		h3,*{font-size:30px;line-height:36px;}
		p1,*{font-size:30px;line-height:36px;}
		.menu_links1:link {font-size:30px;line-height:36px;}
		.menu_links1:visited {font-size:30px;line-height:36px;}
		.menu_links1:hover {font-size:30px;line-height:36px;}
		.menu_links1{cursor:pointer;}
				
		#credits,#credits a, #credits span{font-size:12px;line-height:16px;}
		h1{width:90vw!important;}
		.titreComp0{display:inline-block;}
		.titreComp1,.titreComp0{margin-left:14px;}		/*article*/
		#art-droite{width:50%;padding-left:5px;}
		
		/*intro*/
		#intro0,#intro1{font-size:60px;height:100px;line-height:100px;}

	}
}

@media screen and (min-width: 1140px){
	@media screen and (min-height: 650px){
		#proposContainer{right:15px;}
		#colophon-container{padding-left:15px;padding-right:15px;padding-bottom:22px;}
		.titre-content, .titre-content-contact{margin-top:2px;}
				#proposContainer{margin-top:3px;}

		.titre-content-contact h2{margin-top:5px;margin-bottom:0px;height:auto;float:left;width:100%;}
		article{padding:15px;padding-bottom:22px;padding-top:10px;}	
		a,p,span,h1,h2,h4,h5,h6,em,strong,li,ul,div,menu,nav,footer,article,body,html,*{font-size:18px;line-height:22px;}
		section{margin-top:-40px;}
		h3,*{font-size:32px;line-height:38px;}
		p1,*{font-size:32px;line-height:38px;}
		.menu_links1:link {font-size:32px;line-height:38px;}
		.menu_links1:visited {font-size:32px;line-height:38px;}
		.menu_links1:hover {font-size:32px;line-height:38px;}
		.menu_links1{cursor:pointer;}
		h1{height:25px!important;}
		.titre-content:first-child{height:auto;}
		.titreComp1,.titreComp0{margin-left:14px;display:inline-block;height:auto;}
		
		/*intro*/
		#intro0,#intro1{font-size:90px;height:120px;line-height:120px;}
	}
}


@media screen and (min-width: 1400px){
	@media screen and (min-height: 750px){
		a,p,span,h1,h2,h4,h5,h6,em,strong,li,ul,div,menu,nav,footer,article,body,html,*{font-size:18px;line-height:22px;}
		.titreComp1,.titreComp0{margin-left:14px;}
		h3,*{font-size:40px;line-height:48px;}
		p1,*{font-size:40px;line-height:48px;}
		.menu_links1:link {font-size:40px;line-height:48px;}
		.menu_links1:visited {font-size:40px;line-height:48px;}
		.menu_links1:hover {font-size:40px;line-height:48px;}
		.menu_links1{cursor:pointer;}
		.titreComp1,.titreComp0{margin-left:14px;}
		
		/*intro*/
		#intro0,#intro1{font-size:120px;height:150px;line-height:150px;}
	}
}

/* ===== MOBILE VERSION 25 / 75 ===== */

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

    html, body{
        height:100% !important;
        overflow:hidden !important;
    }

    article{
        height:100% !important;
    }

    /* on enlève les images du haut gauche */
    #gauche-up{
        display:none !important;
    }

    /* ===== GIF (25%) ===== */

    #art-gauche{
        width:100% !important;
        height:25% !important;
        float:none !important;
        padding:0 !important;
        overflow:hidden !important;
    }

    #gauche-down{
        height:100% !important;
        padding:0 !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
    }

    /* garder les proportions du gif */
    #gauche-down img{
        max-height:100% !important;
        max-width:100% !important;
        width:auto !important;
        height:auto !important;
    }

    /* ===== SLIDESHOW (75%) ===== */

    #art-droite{
        width:100% !important;
        height:75% !important;
        float:none !important;
        padding:0 !important;
    }

}

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

    /* Forcer pleine largeur pour toutes les images */

    #gauche-down img,
    .defilant-droite-li img{
        width:100% !important;
        height:100% !important;
        object-fit:cover !important;
        display:block !important;
    }

}

/* ===== MOBILE PAYSAGE = VERSION DESKTOP ===== */

@media screen and (max-width: 1024px) and (orientation: landscape){

    html, body{
        overflow:hidden !important;
        height:100% !important;
    }

    article{
        height:100% !important;
    }

    /* remettre les 2 colonnes */
    #art-gauche{
        width:50% !important;
        height:100% !important;
        float:left !important;
        display:inline-block !important;
    }

    #art-droite{
        width:50% !important;
        height:100% !important;
        float:right !important;
        display:inline-block !important;
    }

    /* remettre la structure gauche */
    #gauche-up{
        display:block !important;
        height:50% !important;
    }

    #gauche-down{
        height:50% !important;
    }

}