/* Page geometrie MEGAPNEUS - conserve les tarifs dynamiques de tarif2.php */
.mp-geometry-page,
.mp-geometry-page * {
	box-sizing: border-box;
}

.mp-geometry-page {
	width: 1000px;
	margin: 14px auto 28px;
	font-family: Arial, Helvetica, sans-serif;
}

.mp-geometry-hero {
	position: relative;
	min-height: 292px;
	padding: 34px 38px 28px;
	color: #ffffff;
	overflow: hidden;
	background: radial-gradient(circle at 82% 36%, rgba(218, 27, 35, .48), transparent 30%), linear-gradient(125deg, #121214 0%, #242426 56%, #340b0e 100%);
	border: 1px solid #643136;
	border-left: 5px solid #d71920;
	border-radius: 14px;
	box-shadow: 0 15px 34px rgba(0, 0, 0, .30);
}

.mp-geometry-hero:after {
	position: absolute;
	right: -82px;
	top: -190px;
	width: 470px;
	height: 470px;
	content: "";
	border: 2px solid rgba(255,255,255,.06);
	border-radius: 50%;
	box-shadow: inset 0 0 0 35px rgba(255,255,255,.025), inset 0 0 0 78px rgba(215,25,32,.045);
}

.mp-geometry-hero-copy {
	position: relative;
	z-index: 2;
	width: 630px;
}

.mp-geometry-hero-copy > span,
.mp-geometry-intro > span,
.mp-geometry-advice > div > span {
	display: block;
	margin-bottom: 8px;
	color: #ff4c53;
	font-size: 10px;
	font-weight: 900;
	letter-spacing: 1.8px;
	text-transform: uppercase;
}

.mp-geometry-hero h1 {
	margin: 0;
	font-size: 34px;
	line-height: 1.06;
	letter-spacing: -.4px;
	text-transform: uppercase;
}

.mp-geometry-hero p {
	width: 610px;
	margin: 13px 0 0;
	color: #dedede;
	font-size: 13px;
	line-height: 1.55;
}

.mp-geometry-wheel {
	position: absolute;
	right: 58px;
	top: 32px;
	z-index: 2;
	width: 154px;
	height: 154px;
	border: 17px solid #171719;
	border-radius: 50%;
	box-shadow: 0 0 0 3px #4b4b4d, 0 0 0 8px #101012, 0 17px 28px rgba(0,0,0,.48);
}

.mp-geometry-wheel:before,
.mp-geometry-wheel:after,
.mp-geometry-wheel i:before,
.mp-geometry-wheel i:after {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 9px;
	height: 112px;
	content: "";
	background: linear-gradient(#9c9c9f,#37373a 48%,#9c9c9f);
	border-radius: 5px;
	transform: translate(-50%,-50%);
}

.mp-geometry-wheel:after {transform:translate(-50%,-50%) rotate(60deg)}
.mp-geometry-wheel i:before {transform:translate(-50%,-50%) rotate(120deg)}
.mp-geometry-wheel i:after {
	width: 35px;
	height: 35px;
	background: radial-gradient(circle,#d71920 0 22%,#171719 24% 50%,#9c9c9f 52% 66%,#29292c 68%);
	border-radius: 50%;
}

.mp-geometry-benefits {
	position: absolute;
	left: 38px;
	right: 38px;
	bottom: 25px;
	z-index: 3;
	display: flex;
	gap: 10px;
}

.mp-geometry-benefits b {
	display: grid;
	grid-template-columns: 31px 1fr;
	grid-template-rows: auto auto;
	width: 210px;
	min-height: 55px;
	padding: 10px 12px;
	color: #ffffff;
	font-size: 11px;
	line-height: 1.2;
	background: rgba(255,255,255,.07);
	border: 1px solid rgba(255,255,255,.16);
	border-radius: 8px;
}

.mp-geometry-benefits b span {align-self:end}
.mp-geometry-benefits b small {
	grid-column: 2;
	margin-top: 3px;
	color: #bfbfbf;
	font-size: 9px;
	font-weight: 400;
}

.mp-geometry-icon {
	grid-row: 1 / 3;
	align-self:center;
	display:block;
	width:23px;
	height:23px;
	border:2px solid #ef3940;
	border-radius:50%;
}

.mp-geometry-icon-road:after {display:block;width:2px;height:15px;margin:2px auto;content:"";background:#ef3940;transform:rotate(20deg)}
.mp-geometry-icon-tyre {border-width:5px;box-shadow:inset 0 0 0 2px #242426}
.mp-geometry-icon-check:after {display:block;width:10px;height:5px;margin:5px 0 0 4px;content:"";border-left:2px solid #ef3940;border-bottom:2px solid #ef3940;transform:rotate(-45deg)}

.mp-geometry-intro {
	margin: 15px 0 0;
	padding: 23px 28px 20px;
	color: #252525;
	background: #ffffff;
	border: 1px solid #d4d4d4;
	border-radius: 12px 12px 0 0;
}

.mp-geometry-intro h2 {
	margin: 0;
	font-size: 24px;
	line-height: 1.15;
}

.mp-geometry-intro p {
	margin: 7px 0 0;
	color: #606060;
	font-size: 12px;
	line-height: 1.5;
}

.mp-geometry-offers {
	width: 1000px;
	padding: 0 18px 20px;
	background: #ececec;
	border: 1px solid #d4d4d4;
	border-top: 0;
	border-radius: 0 0 12px 12px;
}

.mp-geometry-offers > table,
.mp-geometry-offers > html > body > table,
.mp-geometry-offers table[width="1000"] {
	width: 100% !important;
	margin: 0 auto !important;
	padding: 0 !important;
	background: transparent !important;
	border-collapse: separate !important;
	border-spacing: 10px 11px !important;
}

.mp-geometry-offers td[width="238"] {
	width: 208px !important;
	padding: 0 !important;
	background: transparent !important;
}

.mp-geometry-offers .styleHORAIRES {
	width: 100% !important;
	margin: 0 !important;
	padding: 22px 14px !important;
	color: #ffffff !important;
	font-size: 12px !important;
	line-height: 1.55 !important;
	background: radial-gradient(circle at 85% 15%,rgba(215,25,32,.35),transparent 32%),linear-gradient(145deg,#29292b,#131315) !important;
	border: 1px solid #4a4a4d !important;
	border-left: 5px solid #d71920 !important;
	border-radius: 10px !important;
	box-shadow: 0 8px 20px rgba(0,0,0,.16) !important;
}

.mp-geometry-price-table {
	width: 100% !important;
	border-collapse: separate !important;
	border-spacing: 0 9px !important;
}

.mp-geometry-price-row > td {
	height: 72px;
	padding: 13px 14px !important;
	color: #272727 !important;
	font-family: Arial,Helvetica,sans-serif !important;
	background: #ffffff !important;
	border-top: 1px solid #d7d7d7 !important;
	border-bottom: 1px solid #d7d7d7 !important;
}

.mp-geometry-price-row > td:first-child {
	border-left: 4px solid #d71920 !important;
	border-radius: 9px 0 0 9px;
}

.mp-geometry-price-row > td:last-child {
	border-right: 1px solid #d7d7d7 !important;
	border-radius: 0 9px 9px 0;
}

.mp-geometry-service {
	width: 58%;
	font-size: 14px;
	line-height: 1.35;
}

.mp-geometry-price {
	width: 20%;
	color: #c8141b !important;
	font-size: 17px;
	white-space: nowrap;
}

.mp-geometry-price b {color:#c8141b !important}

.mp-geometry-action {
	width: 22%;
	text-align: center;
}

.mp-geometry-order {
	display: block;
	width: 168px !important;
	height: 40px !important;
	margin: 0 auto;
	border: 0;
	border-radius: 8px;
	box-shadow: 0 5px 12px rgba(183,12,19,.25);
	cursor: pointer;
}

.mp-geometry-advice {
	display: grid;
	grid-template-columns: 320px 1fr;
	gap: 24px;
	margin-top: 15px;
	padding: 25px 28px;
	color: #252525;
	background: #ffffff;
	border: 1px solid #d4d4d4;
	border-left: 5px solid #d71920;
	border-radius: 12px;
	box-shadow: 0 10px 24px rgba(0,0,0,.12);
}

.mp-geometry-advice h2 {margin:0;font-size:22px;line-height:1.18}
.mp-geometry-advice ul {display:grid;grid-template-columns:1fr 1fr;gap:9px 22px;margin:0;padding:0;list-style:none}
.mp-geometry-advice li {position:relative;padding:8px 0 8px 25px;color:#555;font-size:11px;line-height:1.4;border-bottom:1px solid #ececec}
.mp-geometry-advice li:before {position:absolute;left:0;top:9px;width:15px;height:15px;content:"\2713";color:#fff;font-size:10px;font-weight:900;line-height:15px;text-align:center;background:#d71920;border-radius:50%}

/* Version mobile : la page moderne reste la meme, sans ancien tableau qui deborde. */
@media screen and (max-width: 760px) {
	.mp-geometry-page {
		width: 100%;
		max-width: 100%;
		margin: 10px auto 24px;
		padding: 0;
		overflow: hidden;
	}

	.mp-geometry-hero {
		min-height: 0;
		padding: 24px 18px 20px;
		border-radius: 12px;
	}

	.mp-geometry-hero-copy {
		width: 100%;
		padding-right: 0;
	}

	.mp-geometry-hero h1 {
		font-size: 27px;
		line-height: 1.08;
	}

	.mp-geometry-hero p {
		width: 100%;
		font-size: 14px;
		line-height: 1.5;
	}

	.mp-geometry-wheel { display: none; }

	.mp-geometry-benefits {
		position: relative;
		left: auto;
		right: auto;
		bottom: auto;
		display: grid;
		grid-template-columns: 1fr;
		gap: 7px;
		margin-top: 18px;
	}

	.mp-geometry-benefits b {
		width: 100%;
		min-height: 54px;
	}

	.mp-geometry-intro {
		padding: 20px 16px 17px;
		border-radius: 11px 11px 0 0;
	}

	.mp-geometry-intro h2 {
		font-size: 22px;
		line-height: 1.15;
	}

	.mp-geometry-intro p { font-size: 13px; }

	.mp-geometry-offers {
		width: 100%;
		max-width: 100%;
		padding: 8px 8px 14px;
		overflow: hidden;
		border-radius: 0 0 11px 11px;
	}

	.mp-geometry-offers > table,
	.mp-geometry-offers > table > tbody,
	.mp-geometry-offers > table > tbody > tr,
	.mp-geometry-offers > table > tbody > tr > td {
		display: block;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	/* Les horaires figurent deja dans l'en-tete : on libere la largeur pour les prestations. */
	.mp-geometry-offers > table > tbody > tr > td[width="238"] {
		display: none !important;
	}

	.mp-geometry-price-table,
	.mp-geometry-price-table > tbody {
		display: block;
		width: 100% !important;
		max-width: 100% !important;
		border-spacing: 0 !important;
	}

	.mp-geometry-price-row {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 142px;
		align-items: center;
		gap: 11px 8px;
		width: 100%;
		max-width: 100%;
		min-height: 0;
		margin: 0 0 9px;
		padding: 14px 12px;
		background: #ffffff;
		border: 1px solid #d7d7d7;
		border-left: 5px solid #d71920;
		border-radius: 10px;
		box-shadow: 0 5px 13px rgba(0, 0, 0, .08);
	}

	.mp-geometry-price-row > td {
		display: block;
		width: auto !important;
		min-width: 0 !important;
		height: auto;
		padding: 0 !important;
		background: transparent !important;
		border: 0 !important;
		border-radius: 0 !important;
		white-space: normal !important;
	}

	.mp-geometry-service {
		grid-column: 1 / -1;
		font-size: 15px;
		line-height: 1.35;
	}

	.mp-geometry-price {
		grid-column: 1;
		font-size: 18px;
		line-height: 1.2;
		white-space: nowrap !important;
	}

	.mp-geometry-action {
		grid-column: 2;
		text-align: right;
	}

	.mp-geometry-action form {
		width: 100%;
		margin: 0;
	}

	.mp-geometry-order {
		width: 142px !important;
		max-width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
		margin: 0 auto;
	}

	.mp-geometry-advice {
		display: block;
		margin-top: 11px;
		padding: 21px 17px;
		border-radius: 11px;
	}

	.mp-geometry-advice h2 { font-size: 22px; }
	.mp-geometry-advice ul {
		display: grid;
		grid-template-columns: 1fr;
		gap: 0;
		margin-top: 13px;
	}
	.mp-geometry-advice li { font-size: 13px; }
}

@media screen and (max-width: 390px) {
	.mp-geometry-price-row { grid-template-columns: minmax(0, 1fr) 126px; }
	.mp-geometry-order { width: 126px !important; }
}

.mp-geometry-contact {
	display: inline-flex;
	min-height: 40px;
	padding: 9px 14px;
	align-items: center;
	justify-content: center;
	color: #ffffff !important;
	font-size: 12px;
	font-weight: 900;
	text-align: center;
	text-decoration: none !important;
	background: #d71920;
	border: 1px solid #ef343b;
	border-radius: 7px;
}

.mp-geometry-contact:hover,
.mp-geometry-contact:focus { background: #ef2b32; }

@media screen and (max-width: 760px) {
	.mp-geometry-contact { width: 100%; }
}