@charset "utf-8";
/* CSS Document */

:root {
	--rougeV: #e11616;
	--rouge: #b41212;
	--grisC: rgba(0, 0, 0, .075);
	--LH: 22pt;
	--genos: "Genos", sans-serif;
	--roboto: "Roboto Condensed", sans-serif;
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	width: 100%;
	margin: auto;
	margin-top: 0;
	margin-bottom: 0;
	font-family: var(--roboto);
	font-weight: 300;
}

/*
 * GLOBAL
 */
.material-symbols-outlined {
	font-variation-settings:
	'FILL' 1,
	'wght' 400,
	'GRAD' 0,
	'opsz' 24
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
	margin-bottom: 40px !important;
	font-family: var(--genos);
	font-weight: 800;
	/*font-style: italic;*/
}

h1, h2, .h1 {
	font-size: 26pt;
	line-height: 34pt;
}

p {
	margin: 0;
}

p a, main ul li a, label a {
	color: #000;
}

p a:hover, p a:focus, main ul li a:hover, main ul li a:focus, label a:hover, label a:focus {
	color: var(--rouge);
}

p + h2 {
	margin-top: 40px;
}

main p strong, main ul li strong {
	font-weight: 600;
}

main .classic {
	list-style: none;
}

main .classic li::before {
	content: 'arrow_right_alt';
	color: var(--rouge);
	vertical-align: middle;
	font-family: 'Material Symbols Outlined';
	font-size: 24px;
	margin-right: 5px;
}

.center {
	text-align: center;
}

.rouge {
	color: var(--rouge);
}

.rougeBG {
	background: var(--rouge);
}

.grisBG {
	background: var(--grisC);
}

.rougeBG h1, .rougeBG h2, .rougeBG h3, .rougeBG p {
	color: #FFF;
}

.content {
	width: 100%;
	max-width: 1250px;
	margin: auto;
	padding: 40px;
	position: relative;
	z-index: 0;
}

header .content {
	padding: 40px;
	padding-top: 0;
	padding-bottom: 0;
}

main p, footer p, ul li, ul li strong, ul li a, label a {
	margin: 0;
	line-height: var(--LH);
	font-weight: 300;
}

.cta {
	display: flex;
	text-decoration: none;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 220px;
	padding-left: 20px;
	padding-right: 20px;
	min-height: 50px;
	border-radius: 25px;
	transition: all .4s ease;
}

.cta .material-symbols-outlined {
	vertical-align: middle;
	margin-right: 5px;
}

.rougeBG .cta {
	border: 1px solid #FFF;
	color: #FFF;
	margin: auto;
	margin-top: 40px;
}

.rougeBG .cta:hover, .rougeBG .cta:focus {
	background: #FFF;
	color: var(--rouge);
}

.wrapper {
	width: 100%;
	display: flex;
	gap: 40px;
	flex-wrap: wrap;
	justify-content: center;
}

.wrapper + .wrapper, .wrapper + p, p + .wrapper, ul + .wrapper, .wrapper + ul, p + ul, ul + p {
	margin-top: 40px;
}

.flex-start {
	align-items: flex-start;
}

/*
 * HEADER
 */
header {
	width: 100%;
	background: #000;
	height: 95px;
	position: fixed;
	top: 0;
	z-index: 2500;
}

header .content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0;
}

.logo {
	background: url("images/logo_header.webp") left no-repeat;
	background-size: 90px 90px;
}

header .logo {
	width: 215px;
	height: 95px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0;
	padding-left: 75px;
	text-decoration: none;
	color: #FFF;
}

header .logo span {
	display: block;
	font-family: var(--genos);
	font-size: 14pt;
	font-style: italic;
	font-weight: 800;
	letter-spacing: 1px;
}

header .logo span:first-of-type {
	color: #FFF;
}

header .logo span:last-of-type {
	color: var(--rouge);
}

#globalMenu {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	height: 100%;
}

#globalMenu .tel {
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	border-radius: 50%;
	background: #FFF;
	color: #000;
	order: 1;
	transition: all .4s ease;
}

#globalMenu .tel:hover, #globalMenu .tel:focus {
	background: var(--rouge);
	color: #FFF;
}

#boutonMenu {
	order: 2;
	color: #FFF;
	width: 50px;
	height: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 18pt;
	cursor: pointer;
}

nav {
	position: fixed;
	z-index: 5000;
	right: 0;
	top: 0;
	height: 100vh;
	overflow-y: auto;
	width: 80%;
	max-width: 400px;
	background: rgba(0, 0, 0, .85);
	backdrop-filter: blur(7px);
	display: none;
}

#close {
	position: absolute;
	right: 0;
	top: 20px;
	width: 50px;
	height: 50px;
	cursor: pointer;
	color: #FFF;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24pt;
	font-weight: 100;
}

#close:hover, #close:focus, #boutonMenu:hover, #boutonMenu:focus {
	color: var(--rouge);
}

nav ul {
	display: flex;
	width: 100%;
	margin-top: 100px;
	padding: 0;
	height: auto;
	list-style: none;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
}

nav ul li {
	width: 100%;
	display: flex;
	justify-content: center;
	min-height: 50px;
}

nav ul li a {
	width: auto;
	max-width: 200px;
	height: 50px;
	border-radius: 25px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-left: 25px;
	padding-right: 25px;
	color: #FFF;
	text-decoration: none;
	transition: all .4s ease;
}

nav ul li a:hover, nav ul li a:focus, nav ul li .actif {
	background: var(--rouge);
	color: #FFF;
}

.background {
	width: 100%;
	height: calc(100vh - 95px);
	margin-top: 95px;
	position: relative;
}

.background.accueil {
	background: url("images/chauffeur_prive.webp") center no-repeat;
	background-size: cover;
}

.background.cannes {
	background: url("images/marches_cannes.webp") center no-repeat;
	background-size: cover;
}

.background.transferts {
	background: url("images/transferts_aeroports4.webp") center no-repeat;
	background-size: cover;
}

.background.nice {
	background: url("images/tarmac_aeroport_nice.webp") center no-repeat;
	background-size: cover;
}

.background.alpes {
	background: url("images/alpes.webp") center no-repeat;
	background-size: cover;
}

.background.st-trop {
	background: url("images/vue_saint_tropez.webp") center no-repeat;
	background-size: cover;
}

.background .content {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding-left: 40px;
	padding-right: 40px;
	flex-direction: column;
}

.background h1 {
	margin: 0;
	color: #FFF;
	text-align: center;
	max-width: 500px;
}

.background::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, .45);
}

.background .cta {
	background: var(--rouge);
	color: #FFF;
}

.background .cta:hover, .background .cta:focus {
	background: #FFF;
	color: #000;
}

/*
 * MAIN
 */
.assets {
	justify-content: center;
	align-items: flex-start;
}

.asset {
	width: 100%;
	max-width: 390px;
}

.asset .material-symbols-outlined {
	color: var(--rouge);
	display: block;
}

.asset h3 {
	font-size: 16pt;
}

/*
 * WRAPPER ILLUSTRATIONS
 */
.wrapper.illustration {
	align-items: center;
}

.wrapper.illustration:nth-of-type(odd) img {
	order: 1;
}

.wrapper.illustration:nth-of-type(odd) .text {
	order: 2;
}

.wrapper.illustration:nth-of-type(even) img {
	order: 1;
}

.wrapper.illustration:nth-of-type(even) .text {
	order: 2;
}

.wrapper.illustration img {
	width: 100%;
	max-width: 700px;
	height: auto;
	display: block;
	margin: auto;
}

.wrapper.illustration .text {
	width: 100%;
}

.text.vehicle {
	background: var(--grisC);
	padding: 40px;
}

.wrapper .cta {
	background: #000;
	color: #FFF;
	margin-top: 40px;
}

.wrapper .cta:hover, .wrapper .cta:focus {
	background: var(--rouge);
}

p .material-symbols-outlined {
	vertical-align: middle;
	margin-right: 5px;
	color: var(--rouge);
}

/*
 * PRESTAS
 */
.prestas {
	justify-content: center;
}

.presta {
	width: 100%;
	max-width: 390px;
	background: #FFF;
	padding-bottom: 20px;
}

.presta .thumb {
	width: 100%;
	height: 200px;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 0;
	text-decoration: none;
}

.presta .thumb img {
	width: 100%;
	max-width: 400px;
	height: auto;
	transition: all .4s ease;
}

#most .presta h3, #most .presta p {
	/*text-align: center;*/
	padding-left: 40px;
	padding-right: 40px;
}

.presta h3 {
	font-size: 16pt;
	margin-top: 30px;
}

.presta .cta {
	margin-right: 40px;
	margin-left: auto;
	background: none;
	color: #000;
	padding-left: 0;
	padding-right: 0;
	max-width: fit-content;
	font-weight: 400;
	margin-top: 20px;
}

.presta .cta .material-symbols-outlined {
	margin-right: 0;
	margin-left: 5px;
}

.presta .cta:hover, .presta .cta:focus {
	background: none;
	color: var(--rouge);
}

.presta:hover .thumb img, .presta:focus .thumb img {
	transform: scale(1.1);
}

/*
 * INCLUDES
 */
.include {
	width: 100%;
	max-width: 150px;
	text-align: center;
}

.include .material-symbols-outlined {
	color: #FFF;
	display: block;
	margin-bottom: 10px;
}

/*
 * EXEMPELS DE TRAJETS
 */
.trajet {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 40px;
}

.depart, .destinations {
	width: 100%;
	max-width: 300px;
	/*margin: auto;*/
	padding: 20px;
	background: #FFF;
	text-align: center;
}

.depart strong, .destinations strong {
	font-family: var(--genos);
	font-size: 16pt;
	/*display: block;*/
	/*border-bottom: 1px solid var(--grisC);*/
	/*padding-bottom: 10px;*/
	height: 50px;
	border-radius: 25px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--grisC);
}

.trajet .material-symbols-outlined {
	width: 60px;
	height: 60px;
	background: var(--rouge);
	color: #FFF;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transform: rotateZ(90deg);
}

/*
 * FORM
 */

form {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 25px;
}

form * {
	outline: 0;
}

input:not([type="checkbox"]):not([type="submit"]), textarea, select {
	width: 100%;
	height: 50px;
	padding-left: 20px;
	padding-right: 20px;
	font-family: var(--roboto);
	font-size: 11pt;
	color: #000;
	border: 1px solid rgba(0, 0, 0, .1);
	transition: all .4s ease;
}

select {
	cursor: pointer;
}

input:not([type="checkbox"]):not([type="submit"]):hover, textarea:hover, input:not([type="checkbox"]):not([type="submit"]):focus, textarea:focus, select:hover, select:focus {
	border-color: var(--rouge);
}

textarea {
	height: 120px;
	padding: 20px;
}

#boutonForm {
	width: 100%;
	text-align: center;
	color: #000;
	line-height: var(--LH);
}

#boutonForm .material-symbols-outlined {
	vertical-align: middle;
	margin-right: 5px;
	color: var(--rouge);
	/*display: block;
	margin: auto;
	margin-bottom: 5px;*/
}

label {
	width: 100%;
}

input[type="checkbox"] {
	display: inline-block;
	margin-right: 5px;
}

input[type="submit"] {
	width: 160px;
	height: 50px;
	border-radius: 25px;
	background: #000;
	color: #FFF;
	font-size: 11pt;
	font-family: var(--roboto);
	cursor: pointer;
	border: 0;
	transition: all .4s ease;
}

input[type="submit"]:hover, input[type="submit"]:focus {
	background: var(--rouge);
}

.contacts {
	display: flex;
	gap: 20px;
	flex-direction: column;
	align-items: flex-start;
}

.contacts .cta {
	background: var(--rouge);
	color: #FFF;
	width: auto;
	max-width: 220px;
}

.contacts .cta:hover, .contacts .cta:focus {
	background: #000;
}

.contactInfo {
	color: var(--rouge);
	font-weight: 400;
}

.contactInfo .material-symbols-outlined {
	vertical-align: middle;
	margin-right: 5px;
}

/*
 * RÉSERVATION
 */
#stepsResa {
	width: 100%;
	height: 50px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.lineResa {
	width: 100%;
	height: 2px;
	background: linear-gradient(90deg, var(--rouge) 50%, #DDD 50%);
	position: absolute;
	top: 50%;
	margin-top: -1px;
	left: 0;
}

.stepResa {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #DDD;
	position: relative;
	z-index: 500;
	border: 5px solid #FFF;
	box-sizing: content-box;
}

.stepResa.current {
	background: var(--rouge);
	color: #FFF;
	width: 50px;
	height: 50px;
	font-weight: 600;
}

.stepResa:nth-of-type(2) {
	position: absolute;
	left: 25%;
	margin-left: -17px;
}

.stepResa:nth-of-type(3) {
	position: absolute;
	right: 25%;
	margin-right: -17px;
}

.stepResa.current:nth-of-type(2) {
	margin-left: -25px;
}

.stepResa.current:nth-of-type(3) {
	margin-right: -25px;
}

#firstStep, #secondStep {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 25px;
}

#secondStep {
	display: none;
}

.zoneChamp {
	width: 100%;
}

.zoneChamp.full {
	max-width: 100%;
}

#resaForm label:not([for="politique"]) {
	width: 100%;
	font-weight: 600;
	margin-bottom: 5px;
	display: block;
}

#map {
	width: 100%;
	height: 200px;
	background:rgba(0, 0, 0, .1);
}

#infosTrajet {
	width: 100%;
	font-size: 11pt;
	line-height: var(--LH);
	text-align: center;
}

label .material-symbols-outlined, #infosTrajet .material-symbols-outlined {
	color: var(--rouge);
	vertical-align: middle;
	margin-right: 5px;
}

#precisions {
	width: 100%;
	max-width: 100%;
}

#resaForm button {
	border: 0;
	max-width: 150px !important;
	margin: auto;
	cursor: pointer;
}

#resaForm button.off {
	cursor: not-allowed;
	opacity: .15;
}

.material-symbols-outlined.finish {
	margin: auto;
	color: var(--rouge);
	font-size: 48px;
	display: block;
}

.infoFinish {
	width: 100%;
	text-align: center;
}

/*
 * REVIEWS
 */
.reviewsZone {
	position: relative;
	width: 100%;
}

.navigation {
	position: absolute;
	width: 50px;
	height: 50px;
	top: 50%;
	margin-top: -25px;
	border-radius: 50%;
	background: #000;
	color: #FFF;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.navigation:hover, .navigation:focus {
	background: var(--rouge);
}

.goPrev {
	left: -25px;
}

.goNext {
	right: -25px;
}

.carouselContent {
	width: 100%;
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	gap: 0;
}

.review {
	width: 100%;
	min-width: 100%;
	padding-left: 40px;
	padding-right: 40px;
}

.author {
	font-size: 10pt;
	color: #999;
	margin-bottom: 5px;
}

.author strong {
	color: #000;
	font-size: 12pt;
}

.review .stars {
	color: #E87B1D;
	margin-bottom: 10px;
}

/*
 * FOOTER
 */
footer {
	background: #000;
	color: #FFF;
}

footer .content {
	display: flex;
	gap: 40px;
	justify-content: center;
	flex-wrap: wrap;
}

footer .bloc {
	width: 100%;
	max-width: 390px;
}

footer .bloc:first-of-type {
	max-width: 100%;
	text-align: center;
	padding-bottom: 40px;
	border-bottom: 1px solid rgba(255, 255, 255, .2);
}

footer a.logoLink {
	width: 90px;
	height: 90px;
	display: block;
	margin: auto;
}

footer .logo {
	width: 90px;
	height: 90px;
	background: url("images/logo_footer.webp") center no-repeat;
	background-size: 90px 90px;
}

footer .bloc:first-of-type > span {
	display: block;
}

footer .bloc:first-of-type .nom {
	font-family: var(--genos);
	font-weight: 800;
	letter-spacing: 1px;
	font-size: 14pt;
	font-style: italic;
}

.nom .rouge {
	color: var(--rouge);
}

footer .bloc:first-of-type > span:last-of-type {
	font-size: 10pt;
	margin-top: 10px;
}

footer a, footer p, footer h3 {
	color: #FFF;
	line-height: var(--LH);
	text-decoration: none;
}

footer h3 {
	font-size: 16pt;
}

footer a:hover, footer a:focus {
	color: var(--rouge);
	text-decoration: underline;
}

footer .content > p:last-child {
	padding-top: 40px;
	border-top: 1px solid rgba(255, 255, 255, .2);
	width: 100%;
	text-align: center;
}

@media only screen and ( min-width: 1250px ) {
	.content {
		padding-left: 0;
		padding-right: 0;
	}
	
	.sticky {
		position: sticky;
		top: 135px;
	}
	
	#boutonMenu, #close {
		display: none;
	}
	
	#globalMenu nav {
		order: 1;
	}
	
	#globalMenu .tel {
		order: 2;
	}
	
	nav {
		width: auto;
		max-width: none;
		overflow-y: hidden;
		height: 95px;
		background: none;
		position: relative;
		display: flex;
	}
	
	nav ul {
		margin-top: 0;
		height: 100%;
		align-items: center;
		gap: 10px;
	}
	
	nav ul li {
		width: auto;
	}
	
	.background {
		height: 450px;
	}
	
	.wrapper.illustration:nth-of-type(odd) img {
		order: 1;
	}

	.wrapper.illustration:nth-of-type(odd) .text {
		order: 2;
	}
	
	.wrapper.illustration:nth-of-type(even) img {
		order: 2;
	}

	.wrapper.illustration:nth-of-type(even) .text {
		order: 1;
	}
	
	.wrapper.illustration .text {
		max-width: calc(100% - 740px);
	}
	
	.presta .thumb {
		height: 250px;
	}
	
	.include {
		max-width: 230px;
	}
	
	.trajet {
		flex-direction: row;
	}
	
	.trajet .material-symbols-outlined {
		transform: none;
	}
	
	form {
		background: var(--grisC);
		max-width: 675px;
		padding: 25px;
	}
	
	.contactContent {
		max-width: calc(100% - 715px);
	}
	
	input:not([type="checkbox"]):not([type="submit"]){
		max-width: 300px;
		border-color: rgba(0, 0, 0, .15);
	}
	
	#geo {
		display: none;
	}
	
	.zoneChamp {
		max-width: 300px;
	}
	
	.stepResa {
		border: none;
	}
	
	.carouselContent {
		overflow: hidden;
	}
	
	.review {
		max-width: 390px;
		min-width: 390px;
	}
	
	textarea {
		border-color: rgba(0, 0, 0, .15);
	}
	
	footer .content > p:last-child {
		font-size: 10pt;
	}
}

@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
	.logo {
		background-image: url("images/logo_header_2x.webp");
	}
	
	footer .logo {
		background-image: url("images/logo_footer_2x.webp");
	}
}