/*======  inf width 1600 ============================================================*/ 

@media screen and (max-width: 1600px)

{
 
.titreTrans{
	margin-top: -130px;
}
 
}


/*======  inf width 1440  ============================================================*/ 

@media screen and (max-width: 1440px)

{

.titreTrans{
	margin-top: -120px;
}

 


}

/*======  inf width 1366  ============================================================*/ 

@media screen and (max-width: 1366px)

{


.titreTrans{
	margin-top: -110px;
}

 
.base,
header{
	width: 80%; 
 }



}

/*======  inf width 1280 ============================================================*/ 

@media screen and (max-width: 1280px)

{
 
.tabUp{
	width: 90%;
}
 
}

/*======  inf width 1024  ============================================================*/ 

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

{


.titreTrans{
	margin-top: -90px;
}

 
.base,
header{
	width: 90%; 
 }
 

.tabUp{
	width: 100%;
}

.foot_up {
	width: 90%;
	line-height: 250%; /* même apparence, mais meilleure cohérence mobile */
}

.foot_l, .foot_c {
	width: 100%;
	justify-content: center;
	text-align: center;
}

.foot_c nav div {
	text-align: center; /* liens centrés */
    }

.contactForm {
	width: 80%;
}


}



/*======  inf width 900  ============================================================*/ 

@media screen and (max-width: 900px)

{
	


}



/*======  inf width 800  ============================================================*/ 

@media screen and (max-width: 800px)

{
	
.titreTrans{
	margin-top: -70px;
}

.base,
header{
	width: 95%; 
 }
 
 .lang{
	width: 30%;
	left:0;
	padding-top: 20px;
}


.blockLine,
.blockLine3{
	width: 100%;
	display: block;
	margin: 20px 0 0 0;
}

#menu-button { display: block; }

#cssmenu ul {
	flex-direction: column;
	display: none;
	width: 100%;
}

#cssmenu.open > ul { display: flex; }

#cssmenu ul li {
	width: 100%;
	border-top: 1px solid rgba(255,255,255,0.1);
}

#cssmenu ul li a {
	padding: 14px 20px;
}

/* Sous-menu mobile */
#cssmenu ul ul {
	position: relative;
	left: 0;
	top: 0;
	max-height: 0;
	opacity: 0;
	background: #222;
}

#cssmenu ul li.open > ul {
	max-height: 500px; /* ajustable selon le contenu */
	opacity: 1;
}

#cssmenu ul ul li a {
	padding-left: 30px;
	color: #00dbff;
}

#cssmenu ul ul ul li a {
	padding-left: 45px;
}


}



/*======  inf width 700  ============================================================*/ 

@media screen and (max-width: 700px)

{





}


/*======  inf width 640  ============================================================*/ 

@media screen and (max-width: 640px)

{

div#slider figure {
  margin-top: 35px;

}

.off640{
	display: none;
}

.on640{
	display: block;
}

footer {
	font-size: 15px; /* léger ajustement pour éviter les débordements */
}

.foot_up {
	width: 100%;
	line-height: 220%;
}

.foot_l img {
	max-width: 180px; /* garde la même impression sans écraser */
}

.foot_c {
	margin-top: 20px;
}

.links > div {
	margin: 6px 0;
}

.contactForm {
	width: 95%;
}

.champs, .largTextAera {
	width: 100%;
	box-sizing: border-box;
}

.bouton_actions {
	width: 48%;
	margin: 5px 1%;
}

}




/*======  inf width 500  ============================================================*/ 

@media screen and (max-width: 500px)

{


	
}


/*======  inf width 480  ============================================================*/ 

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

{
	

div#slider figure {
  margin-top: 50px;

}

	
.off480{
	display: none;
}

.titreTrans{
	margin-top: -50px;
}





}




/*======  inf width 400  ============================================================*/ 

@media screen and (max-width: 400px)

{


div#slider figure {
  margin-top: 60px;

}
	
.titreTrans{
	margin-top: -30px;
}
	
}