@media screen and (max-width: 980px) {
	#etape2 #details > div {
	  width: 490px;
	}
	#etape2 #details div:nth-child(1) {
	  width: 489px;
	}
	#etape4 #details {
	  min-height: 395px;
	}
	.infosCom
	{
		width:400px !important;
	}
	.infosCom h3
	{
		width:400px !important;
	}
	.infosCom .pInfos
	{
		width:388px !important;
	}
	.offreul
	{
		width:247px;
		height:305px;
	}
	.offreul li
	{
		left:0 !important;
	}
	.offreul a:nth-child(1) li
	{
	  	top:5px;
	}
	.offreul a:nth-child(2) li
	{
		top:78px;
	}
	.offreul a:nth-child(3) li
	{
		top:149px;
	}
	.offreul a:nth-child(4) li
	{
		top:222px;
	}
}
@media screen and (max-width: 800px) {
	#etape2 #details > div {
	  width: 400px;
	}
	#etape2 #details div:nth-child(1) {
	  width: 399px;
	}
	#etape4 #details {
	  /*min-height: 550px;*/
	  min-height: 260px;
	}
	#etape3 #details div
	{
		float:none;
		margin:0 auto;
		width:484px;
	}
	#etape3 #adLiv
	{
		margin:35px auto 64px !important;
	}
	.infosCom
	{
		position:absolute;
		top:400px;
		left:50%;
		margin-left:-200px;
	}
	input[name="code_promo"] {
	  left:50%;
	  margin:4px 4px 4px -119px !important;
	  bottom:60px; /*70px*/
	}
}
@media screen and (max-width: 768px) {
	#etape2 #details > div {
	  width: 384px;
	}
	#etape2 #details div:nth-child(1) {
	  width: 383px;
	}
}
@media screen and (max-width: 640px) {
	#etape2 #details > div {
	  width: 320px;
	}
	#etape2 #details div:nth-child(1) {
	  width: 319px;
	}
}
@media (max-width: 560px) {
 .form-container 
 {
   flex-direction: column;
   gap: 30px;
   margin-left: 0;
 }

 .form-container > div 
 {
   width: 100%;
 }

 form 
 {
   width: 100%;
   max-width: 400px;
 }

 #details 
 {
   padding: 0 10px;
 }
 .CoordForm
	{
   width:100%;
   top: 15px !important;
   display: block;
	}

#etape4 #details div[class='left']
	{
	width: 100%;
	}
.logpos
	{
    position: absolute !important;
    left: 0% !important;
	}
.fbconnect 
	{
    position: relative;
    left: 0% !important;
	}
.optinpos
	{
	position: relative !important;
	left: 0% !important;
	}
.optinpos_et3
	{
	display: block;
	width: 88%;
	position: relative !important;
	left: 1% !important;
	}		
.polconfpos
	{
	position: relative !important;
	left: 0% !important;
	}
.labeloffre
	{
	width: 90%; /*360px*/
	font-size:11px !important;
	margin-left:10px !important;
	margin-right:10px !important;
	}	
.txtrouge
	{
	width: 90% !important;
	}
form[name='coor'] button
	{
	position: relative !important;
	bottom: 0 !important;
	left: 0 !important;
	margin-left: 0 !important;
	}	
#etape4 .livraison
	{
	width: 85% !important;
	}
.selection 
	{
	width: 95% !important;
	font-size:13px !important;
	}
.selection2 
	{
	width: 95% !important;
	}
.selectionTotal
	{
	width: 95% !important;
	}
.fdpac
	{
	margin-left: 10px !important;
	}
.totalgac
	{
	width:95% !important;
	border:none !important;
	}	
.right 
	{
    position: relative;
    left: 0% !important;
	}
form span[id*='err']
	{
	font-size:10px !important;
	font-family:AvenirMedium !important;
	color:red;
	margin:0 !important;
	}
.formWarning
	{
	font-size:12px !important;
	}
	
}

@media screen and (max-width: 414px) {
	#etape1
	{
		postion:relative;
	}
	#etape1 h2, #etape2 h2, #etape3 h2, #etape4 h2
	{
		width:280px; /*260*/
		line-height:20px;
		font-size:15px; /*15px*/
		margin-top: 5px !important;
	}
	.prix_entete
	{
		float:none;
		position:absolute;
		top:3px;
		right:5px;
		margin-right:0;
		font-size:16px; /*18px*/
		line-height:20px;
	}
	.prixposition
	{
	left: 67%; /*80% 70%*/
	top: 23%;
	}
	#etape1 .contFloat
	{
		float:none;
		margin:0 auto 20px;
	}
	#etape2 #details div
	{
		border:none;
		width:100% !important;
	}
	#etape2 #details div:nth-child(2)
	{
		margin-top:20px;
	}
	#etape3 #details
	{
		position:relative;
		min-height:680px; /*470px*/
	}
	#etape3 #details div {
		width:100%;
	}
	#etape3 #adLiv {
	 margin: 20px auto 104px !important;
	  /*margin: 20px auto 64px !important;*/
	}
	#etape3 input[name='telephone']
	{
		float:none;
		margin:4px auto 30px !important; /*4px auto 20px*/
		width:185px;
	}
	/*#etape3 .dn*/
	form[name='coor'] .dn
	{
		display:block;
		position:absolute;
		padding:0;
		text-align:center;
		width:100%;
		top:170px !important; /*135px*/
	}
	#etape3 #details 
	{
		padding: 35px 0 !important;
	}
		
	#etape3 select[name='datej']
	{
		clear:both;
		margin-left:95px !important; /*108*/
	}
	#etape3 .blackO
	{
		margin-top:20px !important;
	}
	
	form[name="coor"] select, form[name="coor"] input[name='cp'], form[name="coor"] select[name='civ'], form[name="coor"] select[name='civ2'], form[name="coor"] select, form[name="coor"] input[name='cp2']{
	  margin-left: 72px !important;
	}
	form[name="coor"] input[name="nom"], form[name="coor"] input[name="nom2"],  form[name="coor"] input[name="adresse"],  form[name="coor"] input[name="adresse3"], form[name="coor"] input[name="adresse2"], form[name="coor"] input[name="adresse4"]{
		 margin-left: 72px !important;
		width:248px !important;
	}
	form[name="coor"] input[name='cp'], form[name="coor"] input[name='cp2']
	{
		width:40px !important;
	}
	form[name="coor"] input[name='ville'], form[name="coor"] input[name='ville2']
	{
		width:188px !important;
	}
	#etape3 label {
		float:none;
	}
	#details div:nth-child(1) {
	   width: 100%;
	}
	#diagLostPass, #success
	{
		width:310px;
	}
	#diagLostPass p
	{
		text-align:center;
	}
	#diagLostPass button
	{
		margin: 20px 0 0 35px !important;
	}
	#etape3 select[name='idc2']
	{
		width:260px;
	}
	#details > div {
	  width: 100%;
	}
	#details form span {
	  margin: 5px 0 10px;
	}
	#etape4 #details {
	 /*min-height: 530px;*/
	 min-height: 300px; /*260px*/
	}
	.vcgv 
	{
	margin-bottom:60px;
	width:95% !important;
	}	
	.Warnvcgv 
	{
	font-size:11px !important;
	width:98% !important;
	}
	/*#details button
	{
		bottom: 170px;
	}*/
	#details button
	{
		bottom: 20px;
	}
	.blackG 
	{
	margin: 0 0 0 10px !important;
	}
}

@media screen and (max-width: 375px) {
	#etape1 h2, #etape2 h2, #etape3 h2, #etape4 h2 {
	  font-size: 13px;
	  line-height: 17px;
	  width: 260px;
	}
	#etape3 select[name='datej']
	{
		margin-left:83px !important;
	}
	form[name="coor"] select, form[name="coor"] input[name="cp"], form[name="coor"] select, form[name="coor"] input[name="cp2"] {
	  margin-left: 50px !important;
	}
	form[name="coor"] input[name="nom"], form[name="coor"] input[name="nom2"],  form[name="coor"] input[name="adresse"],  form[name="coor"] input[name="adresse3"], form[name="coor"] input[name="adresse2"], form[name="coor"] input[name="adresse4"]{
		 margin-left: 50px !important;
		width:248px !important;
	}
	/*#etape3 .dn*/
	form[name='coor'] .dn
	{
		/*top:150px;*/
		top:175px !important;
	}
	.moyenPaiement {
	  margin: 5px 0 0 10px;
	}
	.moyenPaiement img {
	  margin: 13px 45px;
	}
	#etape4 #details div[class="left"] .blackG, .vcgv, .Warnvcgv {
	  margin-left:0;
	}
	#etape4 #details {
	 /*min-height: 530px;*/
	 min-height: 285px; /*245px*/
	}
	.blackG {
	  margin: 0 0 0 10px !important;
	}
	.selection, .selection2, .selectionTotal {
	 width: 300px;
	 font-size:13px;
	}
	.vcgv {
    padding-top: 20px;
	padding-right: 20px;
    text-align: left;
	margin-bottom:60px;
	}	
	.infosCom
	{
		width:315px;
		margin-left:-157px;
	}
	.infosCom h3
	{
		width:315px !important;
	}
	.infosCom .pInfos
	{
		width:303px !important;
	}
	/*2509*/
	#details button
	{
		bottom: 1px;
	}
}
@media screen and (max-width: 320px) {
	form[name="coor"] select, form[name="coor"] input[name="cp"], form[name="coor"] select, form[name="coor"] input[name="cp2"] {
	  margin-left: 30px !important;
	}
	form[name="coor"] input[name="nom"], form[name="coor"] input[name="nom2"],  form[name="coor"] input[name="adresse"],  form[name="coor"] input[name="adresse3"], form[name="coor"] input[name="adresse2"], form[name="coor"] input[name="adresse4"]{
		 margin-left: 30px !important;
	}
	#etape3 select[name="datej"] {
	  margin-left: 61px !important;
	}
	.moyenPaiement {
	  margin: 0 0 0 20px;
	  font-size: 13px;
	}
	.moyenPaiement img {
	  margin: 13px 35px;
	}
	#etape4 #details div[class="left"] {
	  padding:10px;
	  width:310px;
	}
	.blackG {
	  font-size: 13px;
	}
	.selection, .selection2, .selectionTotal {
	 width: 290px;
	 font-size:13px;
	}
	.vcgv {
    padding-top: 20px;
    text-align: left;
	}	
	.infosCom
	{
		top:455px;
	}
	#etape3 #details {
	  min-height: 680px;/*490px*/
	}
	#etape4 #details {
	min-height: 320px; /*280px*/
	  /*min-height: 480px;*/
	}
	.infosCom {
	  top: 375px;
	}
	/*#details button
	{
		bottom: 130px;
	}*/
		/*2509*/
	#details button
	{
		bottom: 15px;
	}
	/*#etape3 .dn*/
	form[name='coor'] .dn
	{
		/*top:140px;*/
		top:165px;
	}
}