/* >–––––––––––––––––––––––––––––––––––––– XXXXX –––––––––< */
/* >–––––– XXXXXX XXXXXXXX ––––––< */

#iViewport > section.cart,
#iViewport > section.pay { display: block; }

/* >–––––––––––––––––––––––––––––––––––––– CART –––––––––< */

section.cart > div {
	margin: 0 auto;
	width: 100%; max-width: 100rem;
}

section.cart .date {
	flex: 0 0 20rem;
	margin-right: 4rem;
}

section.cart .product {
	flex-grow: 1;
	margin-right: 4rem; 
}

section.cart .prix {
	margin-left: auto;
	text-align: right;
}

section.cart header {
	display: flex;
	margin-bottom: 1rem;
	font-size: 1.4rem; line-height: 1.4rem;
}

section.cart section {
	display: flex;
	position: relative;
	box-sizing: border-box;
	margin-bottom: 1rem;
	padding: 2rem 0;
	border-bottom: 1px solid #000;
}
	section.cart input,
	section.cart textarea,
	section.cart select { font-family: "URW Garamond W01 Regular", sans-serif; }
	
	/*section.cart section input {
		-webkit-appearance: none;
		box-sizing: border-box;
		display: block;
		margin: 0 auto;
		margin-bottom: 3rem; 
		padding: 1.2rem 2rem;
		width: 100%; 
		font-size: 2rem; line-height: 2rem; letter-spacing: 0.1rem; 
		color: #000;
		text-align: center;
		background: none;
		border: none;
		background-color: #E8FAEB;
		border: 1px solid #000;
	}*/
	/*section.cart section input::-webkit-outer-spin-button,
	section.cart section input::-webkit-inner-spin-button {
		-webkit-appearance: none;
	    margin: 0;
	}
	section.cart section input[type=number] {
	    -moz-appearance:textfield;
	}*/

	/*section.cart section .product {
		display: flex;
	}*/
		/*section.cart section .img {
			flex: 0 0 10rem;
			margin-right: 1rem;
		}
		section.cart section img {
			width: 100%;
			height: auto;
		}*/

	section.cart section .prix {
		/*font-family: "GaramondURW W01 Bold", sans-serif;*/
		font-size: 2rem; line-height: 2rem;
	}

	section.cart section aside {
		position: absolute; right: 0; bottom: 1rem;
		padding: 1rem;
		font-family: "GaramondURW W01 Bold", sans-serif;
		font-size: 1.2rem; line-height: 1.2rem;
		color: #E8FAEB;
		text-transform: uppercase;
		background-color: #4e4e4e;
		border: 1px solid #000;
	}
	section.cart section aside:hover {
		cursor: pointer;
		color: #F00;
		background-color: #E8FAEB;
		border: 1px solid #000;
	}

section.cart footer {
	text-align: center;
}
	section.cart footer li {
		list-style: none;
		margin: 1rem 0;
		font-size: 2rem; line-height: 2rem;
		text-align: right;
	}

	section.cart footer p {
		margin-top: 3rem;
		text-align: center;
	}
		/*section.cart footer p a {
			padding: 0.2rem 1rem;
			font-family: "FrutigerSerifLTW01-Bold_722227", sans-serif;
			color: #000;
			background: #aca2e5;
		}
		section.cart footer p a:hover {
			color: #aca2e5;
			background-color: #3e3e3e;
		}*/

	section.cart footer .btn {
		display: inline-block;
		box-sizing: border-box;
		margin:0 auto;
		padding: 1.5rem 5rem;
		width: auto;
		height: auto;
		font-family: "GaramondURW W01 Bold", sans-serif;
		font-size: 2.4rem; line-height: 2.4rem; 
		color: #007fff;
	}

	section.cart footer .btn:hover {
		cursor: pointer; 
		color: #000;
	}


/* >–––––––––––––––––––––––––––––––––––––– PAY –––––––––< */

section.pay > div > div { 
	box-sizing: border-box;
	padding: 4rem;
	color: #E8FAEB;
	background-color: #4e4e4e;
}
	section.pay section {
		padding: 0;
		border-bottom: none;
	}


	section.pay .fields {
		margin-top: 2rem;
		text-align: left;
	}
		section.pay .fields label {
			display: block;
			margin-bottom: 0.5rem;
			font-size: 2.2rem; line-height: 2.2rem; letter-spacing: 0.1rem; 
			color: #F9E8BC;
		}
		section.pay .fields textarea {
			-webkit-appearance: none;
			box-sizing: border-box;
			display: block;
			margin: 0 auto;
			padding: 1.5rem 2rem;
			width: 100%; max-width: 50rem;
			height: 20rem;
			font-size: 2rem; line-height: 3rem; letter-spacing: 0.1rem; 
			color: #000;
			background: none;
			border: none;
			border-radius: 0;
			background-color: #E8FAEB;
			border: 1px solid #000;
			overflow: hidden; /* IE */
		}
		section.pay .fields input[type=checkbox] {
			-moz-appearance: none;
			-webkit-appearance: none;
			box-sizing: border-box;
			display: inline-block; vertical-align: middle;
			margin-right: 1rem; 
			margin-bottom: 2rem;
			padding: 0;
			width: 2.5rem; 
			height: 2.5rem;
			background: none;
			background-color: #E8FAEB;
			border: 2px solid #444;
			border-radius: 0.4rem;
			cursor: pointer;
		}
		section.pay .fields input[type=checkbox]:checked { 
			/*border: none; */
			/*background: url("../../assets/images/check-mark.jpg") no-repeat center center;
			background-size: contain;*/
			background-color: #54CFDD;
		}
		section.pay .fields input[type=checkbox]+label { 
			display: inline-block; vertical-align: top;
			margin-bottom: 0; 
			font-size: 2rem; line-height: 2.2rem; letter-spacing: 0.1rem; 
			color: #F9E8BC;
		}

	section.pay h2 {
		margin-bottom: 2rem;
		padding-bottom: 2rem;
		font-size: 2rem; line-height: 2rem;
		color: #F9E8BC;
		text-align: left;
		text-transform: uppercase;
		border-bottom: 1px solid #E8FAEB;
	}
	section.pay footer h2 { margin-top: 6rem; }

	section.pay section .qty { margin-right: 2rem; }

	section.pay section .qty p,
	section.pay section .product p,
	section.pay footer p { color: #E8FAEB; }

	section.pay footer p.paypal {
		text-align: left;
	}
	section.pay footer p.paypal.smll {
		margin-top: 6rem;
		font-size: 1.8rem; line-height: 2.2rem;
	}

	section.pay .logopp {
		margin-bottom: 1rem;
		padding: 1rem;
		width: 10rem;
		background-color: #E8FAEB;
	}
		section.pay img {
			width: 100%;
			height: auto;
		}

	section.pay .btn {
		display: inline-block;
		box-sizing: border-box;
		margin:0 auto;
		padding: 1.5rem 5rem;
		width: auto;
		height: auto;
		font-family: "GaramondURW W01 Bold", sans-serif;
		font-size: 2.4rem; line-height: 2.4rem; 
		color: #fff;
		background-color: #F9E8BC;
	}

	section.pay .btn:hover {
		cursor: pointer; 
		color: #E8FAEB;
		background-color: #007fff;
	}


	section.pay #errs {
		display: none;
	}
	section.pay #errs #retourPayErr { display: none; }

		section.pay #errs h3 {
			margin-top: 3rem;
			font-size: 2rem; line-height: 2.2rem;
			color: #fff;
		}


/* >–––––––––––––––––––––––––––––––––––––– PAID –––––––––< */

section.paid > div > div { 
	box-sizing: border-box;
	margin: 0 auto;
	padding: 4rem;
	color: #F9E8BC;
	max-width: 100rem;
	background-color: #4e4e4e;
}

	section.paid > div > div h2 {
		margin-bottom: 2rem;
		padding-bottom: 2rem;
		font-size: 1.8rem; line-height: 1.8rem;
		text-align: left;
		text-transform: uppercase;
		border-bottom: 1px solid #F9E8BC;
	}

	section.paid > div > div p { color: #F9E8BC; }

	section.paid > div > div a { color: #fff; }
	section.paid > div > div a:hover { color: #000; }





/* >–––––––––––––––––––––––––––––––––––––– REACTIF ––––––––––––––––––––––– REACTIF ––––––––––––––––––––––– REACTIF ––––––––––––––––––––––– REACTIF –––––––––< */



@media all and (max-width: 900px) {
	/* CART –––––––––< */
	section.cart .date { flex: 0 0 14rem; margin-right: 2rem; }
	section.cart .product { margin-right: 2rem; }
}

@media all and (max-width: 700px) {
	/* CART –––––––––< */
	section.cart header { font-size: 1.2rem; line-height: 1.2rem; }
	/*section.cart section input { height: 4.4rem; font-size: 1.6rem; line-height: 1.6rem; }*/
	/*section.cart section .product { display: block; }*/
	/*section.cart section .img { width: 8rem; margin-bottom: 1rem; }*/
	section.cart section .prix { font-size: 1.8rem; line-height: 1.8rem; }
	/*section.cart footer li { font-size: 1.6rem; line-height: 1.6rem; }*/
	section.cart footer .btn { padding: 1rem 4rem; font-size: 1.8rem; line-height: 1.8rem; }

	/* PAY –––––––––< */
	section.pay > div > div { padding: 2rem; }
	section.pay .date { margin-right: 2rem; width: auto; }
	section.pay .product { margin-right: 3rem; }
	section.pay .logopp { width: 7rem; }

	/* PAID –––––––––< */
	section.paid > div > div { padding: 2rem; }
}

@media all and (max-width: 600px) {
	/* CART –––––––––< */
	section.cart .date { flex: 0 0 13.5rem; margin-right: 1rem; }

	section.pay .fields textarea { font-size: 1.8rem; line-height: 2.5rem; }
}

@media all and (max-width: 500px) {
	/* PAY –––––––––< */
	section.pay .logopp { width: 5rem; }
}