.responsive { display: none } .desktop { display:inherit }

/* desktop responsive */
@media screen and (max-width: 1135px) {
	#diapo figure h1 { font-size: 2.4em}
}
@media screen and (max-width: 1090px) {
    .content { width:100% }
    footer { padding-left:10px }
}
@media screen and (max-width: 1057px) {
    footer .mn-footer {width: 70%;}
    footer .mn-footer div.alignleft {width: 40%;}
}
@media screen and (max-width: 1050px) {
    header .content img.logo { width:calc( 100% - 633px)}
    main { width:95% ; margin: auto}
    .home .blocs {width: 100%}
    .home .bloc { width:calc(25% - 1px)}
	
	#diapo.not-home { height: 300px; }
}
@media screen and (max-width: 950px) { 
	header .logo { margin-top:2% }
	#diapo nav a { margin: 0 } 
	#diapo figure h1 { font-size: 2em; }
	#diapo figure h1 span { padding-top: 7px; height: 40px}
	
	.contact form, .contact .alignleft { float:none }
}
@media screen and (max-width: 860px) { 
	header .locaux { margin-top:0} #diapo nav { width:100%; text-align: center} #diapo nav a { font-size: 13px} 
    #diapo figure h1 { font-size: 1.7em; }	
    
    footer .mn-footer {width: 60%;}
	footer .mn-footer div.alignleft {width: 80%;}
}

/* tablette portrait et mobile */
@media screen and (max-width: 768px) {
    .responsive {display: block} .desktop { display:none !important; }
    
    html, body { border:none; background: none }
    
    header i { width:20%; font-size:30px; margin:3% 5%; vertical-align: middle; color:#e3050f }
    header .logo-res { max-width: 67%}
    
    body>nav.responsive {
        position: fixed; top:0; left:-100%; width:100%; background: #e3050f; z-index: 20;
        color:#fff; font-size: 20px; box-shadow:0 5px 5px rgba(0,0,0,.5);
    }
    body>nav.responsive li {
        padding: 7px 20px; border-bottom:1px solid #fff
    }
    body>nav.responsive li a { display: block; }
    nav.responsive #close-mn {text-align: right}
    #diapo { height: 341px;}
    #diapo figcaption { width: 100%;}
    #diapo figcaption:after { display: none}
    
    #diapo figcaption .legende { margin-top:20px }
    
    .home main { margin-top:0; width: 100%; }
    .home .blocs { width:480px; margin: 30px auto}
    .home .bloc { margin:0 1px 1px auto; width: 235px }
    .home .bloc div { background-color: rgba(0, 0, 0, 0); border-top:8px solid #e3050f; border-bottom:8px solid #e3050f; }
    .home .bloc div p { margin: 70px 0 0 0; color:#e3050f}
    
    .lg-ft-res { text-align: center; margin-bottom: 32px; width: 100% }
    footer {padding: 30px 0; }
	footer .mn-footer { width: 100%}
    footer .col { width: 45%; margin:0 2%; box-sizing: border-box; float:left;}
    footer .mn-footer .alignleft { width: 90%; float: none; margin: auto; clear: both}
    footer .mn-footer div.alignleft {margin: auto;}
    footer .mn-footer .alignleft.partenaires {margin: auto;}
	
	#diapo figure h1 { width: 100%; background: #e3050f; bottom: 10px }	
	#diapo figure h1:before, #diapo figure h1:after { display: none}
	
	.equipe div { width: 100%}
	.qsn img.alignright { display: block; float: none; margin: auto}

    .home .d-flex { flex-wrap: wrap }
    .home .d-flex article { flex-basis: 100%; flex-direction: row; margin-bottom: 40px;}
    .home .d-flex article .col_title { margin-right: 5%;}

    .postuler .d-flex { flex-wrap: wrap; }
    .postuler_rappel { flex-basis: 100%; margin-left: 0%; }

}

@media screen and (max-width: 530px) {
    .home .blocs { width:100%; margin: 30px auto}
    .blocs.d-flex .bloc { flex-basis: 95%; margin: 2%}
}

@media screen and (max-width: 420px) {
    footer .col { width: 90%; margin:auto; float:none; padding: 0;}
    footer .siege { width:90% }
}