@font-face {
	font-family: 'Roboto';
	font-weight: 300;
	src: url('../fonts/Roboto-Light.ttf') format('truetype');
}

@font-face {
	font-family: 'Roboto';
	font-weight: 400;
	src: url('../fonts/Roboto-Regular.ttf') format('truetype');
}

@font-face {
	font-family: 'Roboto';
	font-weight: 500;
	src: url('../fonts/Roboto-Medium.ttf') format('truetype');
}

@font-face {
	font-family: 'Roboto';
	font-weight: 700;
	src: url('../fonts/Roboto-Bold.ttf') format('truetype');
}

*, *::before, *::after {
	box-sizing: border-box;
}

:root {
	--red:				#e73937;
	--black:			#2b2b2b;
	--grey:				#d1d1d1;
	--silver:			#ebebeb;
	--blue:				#3977e5;
	--blue2:			#2563eb;
	--green:			#219653;
	--radius:			20px;
	--shadow-soft:		0 2px 6px rgba(0, 0, 0, 0.05);
	--shadow-hard:		rgba(0, 0, 0, 0.2) 0px 0px 10px 0px;
}

html {
	scroll-behavior:	smooth;
	overflow-y:			scroll;
}

body {
	min-height:			100vh;
	margin:				0px;
	font-family:		Roboto, Arial, sans-serif;
	color:				var(--black);
	display:			flex;
	flex-direction:		column;
}

main {
	flex:				1;
}

a {
	color:				var(--red);
	text-decoration:	none;
}

a:hover {
	color:				#ad1c29;
}

p {
	line-height: 		1.5;
	margin: 			0.8em 0em;
}

strong {
	font-weight: 		700;
}

h1 {
	display:			inline-block;
	font-size:			28pt;
	font-weight:		400;
	margin:				0px;
}
h1:after {
	float:				left;
	content:			"";
	width:				100%;
	height:				8px;
	background-color:	var(--red);
	border-radius:		var(--radius);
	margin-bottom:		30px;
	margin-top:			5px;
}
h3 {
	margin: 0px;
}

.cta1, .cta2 {
	display:			inline-block;
	font-size:			1em;
	font-weight:		500;
	padding:			10px 25px;
	margin:				16px 0px;
	border-radius:		50vh;
	transition:			all 0.2s;
	font-family:		inherit;
	border:				0px;
	cursor:				pointer;
}
.cta1 {
	border:				2px solid var(--black);
	color:				var(--black);
}
.cta2 {
	border:				2px solid var(--red);
	background-color:	var(--red);
	color:				white;
}
.cta1:hover, .cta2:hover {
	color:				var(--red);
	border:				2px solid var(--red);
	background-color:	transparent;
}

.ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}


/* Header items */

.logo {
	height:				66px;
	transition:			all .5s ease-in-out;
}

.sticky {
	position: 			fixed;
	top: 				0px;
	z-index:			100;
	background-color:	white;
	box-shadow:			var(--shadow-hard);
}

.header {
	max-width:			1600px;
	padding:			20px 30px;
	margin:				auto;
	transition:			all .5s ease-in-out;
}

.top {
	padding-top:		100px;
}
	
.menu {
	font-weight:		500;
	font-size:			11.5pt;
	color:				var(--black);
	padding:			10px 20px;

	transition:			all 0.2s;
	border-radius:		50vh;
	white-space:		nowrap;
}
.menu:hover, .menu.active {
	color:				var(--red);
}

.menu.red:hover, .menu.red.active {
	background-color:	white;
	color:				var(--red);
	box-shadow:			0px 0px 0px 2px var(--red) inset;
}

.menu_icon  {
	vertical-align:		-15%;
	margin-left:		5px;
	height:				16px;
	width:				16px;
	fill:				none;
	stroke:				white;
	stroke-width:		11;
	transition:			all 0.2s;
}
.menu:hover .menu_icon,  .menu.active .menu_icon {
	stroke:				var(--red);
}

.menu-select {
	display:			inline-block;
	border:				none;
	background-color:	white;
	font-family:		Roboto, Arial, sans-serif;
	padding-right:		4px;
	margin-right:		12px;
	cursor:				pointer;
}

.menu-select option {
	color:				var(--black);
}



/* content */

.content {
	width:				100%;
	scroll-margin-top:	90px;
}

.container {
	max-width:			1400px;
	padding:			80px 30px;
	margin:				0px auto;
}

table {
	width:				100%;
	border-collapse: 	collapse;
}



/* Buttons Title Image */

.bg1 {
	background-image:	url(../images/bg_placeholder.png);
	background-repeat:	no-repeat;
	background-position: center;
	background-size: 	cover;
	
	padding-top:		calc(100px + 75px);
	padding-bottom:		35px;	
}

.title-row {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.title-left {
	flex: 1;
}

.title-right {
	flex: 0 0 50%; /* like width='50%' */
	text-align: right;
}

.title_title {
	color:				white;
	font-size:			30pt;
}

.title_text {
	color: 				white;
	font-size: 			14pt;
	line-height: 		1.9;
	margin:				32px 0px;
}

.title-ctas {
	display:			flex;
	flex-wrap:			nowrap;
	gap:				35px;
}

.title-cta {
	width:				240px;
	padding:			20px;
	border-radius:		var(--radius);
	color:				white;
	font-size:			1.2em;
	font-weight:		500;
	backdrop-filter:	blur(5px);
	background-color:	rgba(200, 200, 200, 0.5);
	transition:			all 0.2s;
}

.title-cta:hover {
	color:				white;
	transform:			translateY(-3px);
	box-shadow:			0 6px 12px rgba(0, 0, 0, 0.2);
	filter:				brightness(110%);
}


.title-icon {
	display:			block;
	width:				40px;
	height:				40px;
	fill:				white;
	stroke:				white;
	stroke-width:		0;
	margin-bottom: 		12px;
}


/* Service Cards */

.services {
	display:			grid;
	grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
	gap:				25px;
}

.service {
	background-size:	cover;
	color:				var(--black);
	display:			block;
	height:				200px;
	padding:			20px;
	border-radius:		var(--radius);
	transition:			all 0.2s ease;
	position:			relative;
}
.service:hover {
	opacity:			0.8;
	color: 				var(--red);
}

.service_link {
	display:			flex;
	align-items:		center;
	gap:				6px;	
	background-color:	white;
	font-size:			0.94em;
	padding: 			6px 16px;
	border-radius:		var(--radius);
	position:			absolute;
	right:				16px;
	bottom:				16px;
}

.picto {
	height:				32px;
	width:				32px;
	margin-left:		3px;
	fill:				none;
	stroke:				var(--black);
	stroke-width:		4;
	transition:			all 0.2s ease;
}
.service:hover .picto {
	stroke:				var(--red);
}



/* News posts */

.grey {
	background-color: #f6f6f6;
}

.posts {
	display:			grid;
	grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
	gap:				25px;
	margin-bottom:		35px;
}

.post {
	background-color: 	white;
	color:				var(--black);
	overflow:			hidden;
	border-radius:		var(--radius);
	box-shadow:			var(--shadow-soft);
	transition:			all 0.2s;
	position:			relative;
}

.post_header {
	background-size:	cover;
	background-position: center 20%;
	width:				100%;
	height:				150px;
	position:			relative;
}

.post_image {
	height:				360px;
	width:				600px;
	float:				right;
	margin:				0px 0px 20px 20px;
	background-size:	cover;
	background-position: center;
	border-radius:		8px;
}

.post_date {
	display:			inline-block;
	background-color:	var(--red);
	color:				white;
	font-size:			8pt;
	padding:			4px 8px;
	margin:				8px 15px;
	border-radius:		var(--radius);
}

.bottom {
	position:			absolute;
	bottom:				0px;
}

.post_body {
	margin:				15px;
}

.post_title {
	font-size:			14pt;
	transition:			all 0.3s;
}

.post_lead {
	font-size:			11pt;
	font-weight:		300;
	margin-top:			10px;
}

.post:hover {
	box-shadow:			var(--shadow-hard);
	transform:			translateY(-2px);
}
.post:hover .post_title {
	color:				var(--red);
}

.post_number {
	background-color:	#efefef;
	color:				var(--black);
	padding:			10px 16px;
	margin:				5px;
	border-radius:		var(--radius);
	transition:			all 0.1s;
}
.post_number.active {
	background-color:	var(--red);
	color:				white;
}
.post_number:hover {
	background-color:	transparent;
	color:				var(--red);
	box-shadow:			0px 0px 0px 2px var(--red) inset;
}



/* Footer */

.black {
	background-color:	var(--black);
	color:				white;
}

footer {
	font-size:			0.9em;
}

footer a {
	color:				white;
	transition:			all 0.1s;
}

footer a:hover {
	color:				var(--red);
}



.footer-links {
  display: flex;
  justify-content: center;
  gap: 60px;

  margin: 0 auto;

  flex-wrap: wrap;

}

.footer-links a {
  color: #888;
}





/* Divers */

.red {
	background-color:	var(--red);
	color:				white;
}
.blue {
	background-color:	var(--blue);
	color:				white;
}

.center {
	text-align:			center;
}

.cards {
	max-width:			900px;
	margin:				50px auto;
	display:			flex;
	justify-content:	space-between;
	flex-wrap:			nowrap;
	gap:				10px;
}

.card {
	flex:				1;
	font-weight:		600;
}

.card_icon {
	width:				12vw;
	max-width:			80px;
	height:				120px;
	fill:				none;
	stroke:				white;
	stroke-width:		2.5;
}

.dashed {
	display:			inline-block;
	width:				calc(100% - 45px);
	height:				14px;
	border-top:			2px dashed white;
	margin-left:		10px;
}

.maintenance_table {
	display:			flex;
	justify-content:	space-between;
	flex-wrap:			nowrap;
	gap:				60px;
	padding:			20px 0px;
}

.maintenance_picture {
	min-width:			300px;
	height:				400px;
	background-repeat:	no-repeat;
	background-position: center;
	background-size: 	cover;
	border-radius:		6px;
}

.maintenance_text {
	width:				100%;
}

.service_picture {
	min-width:			500px;
	height:				333px;
	background-repeat:	no-repeat;
	background-position: center;
	background-size: 	cover;
	border-radius:		6px;
}

.normal_order {
	flex-direction: row;
}

.reverse_order {
	flex-direction: row-reverse;
}

@media (max-width: 700px) {
	.maintenance_table {
		flex-wrap:		wrap;
	}
	.maintenance_picture {
		width:			100%;
		height:			400px;
		background-position: center 20%;
	}
}

.gradient1 {
	background:			linear-gradient(45deg, white 0%, white 33%, #ddd 100%);
}



.contact-content {
	display: flex;
	flex-wrap: wrap;

}
.contact-table {
	border-collapse: separate;
	border-spacing: 0 10px;
	flex: 1 1 400px;
}
.contact-table td {
	vertical-align: top;
}

.contact-table td:first-child {
	white-space: nowrap;
	width: 180px;
}

.contact-map {
	flex: 1 1 400px;
}
.contact-iframe {
	width: 100%;
	height: 100%;
	border: 0;
	min-height: 300px;
	border-radius: 8px;
}


/* About Page */

.timeline-line {
	height: 3px;
	background: var(--black);
	margin: 16px 0;
}

.event {
	min-width: 15%;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.event.row-1 {
	flex-direction: column-reverse;
}

.event.row-2 {
	
}

.text-box {
	background: rgba(0,0,0,0.04);
	padding: 0.75rem;
	border-radius: 10px;
	font-size: 0.9rem;
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
}

.timeline-icon {
	width:				100%;
	height:				100%;
	stroke:				white;
	fill:				none;
	stroke-width:		6;
}

.timeline-icon-wrapper {
	display:inline-block;
	width: 28px;
	height: 28px;
	padding: 4.5px;
	margin: 3px;
	background-color: #999;
	border-radius: 50%;
	
}

.dot {
	width: 25px;
	height: 25px;
	border-radius: 50%;
	position: absolute;
	z-index: 2;
}

.event.row-1 .dot {
	bottom: -30px;
}
.event.row-2 .dot {
	top: -30px;
}


.service_icon {
	width:				50px;
	height:				50px;
	margin:				calc((80px - 50px) / 2);
	fill:				none;
	stroke:				white;
	stroke-width:		3.5;
	transition:			all 0.2s;
}

.service_icon_list {
	display:flex;
	flex-wrap:wrap;
	justify-content: center;
	margin-top: 40px;
}

.service_icon_wrapper {
	text-align:center;
	width:120px;
}
.service_icon_wrapper a {
	color: var(--black);
	font-weight: 500;
}

.service_icon_background {
	background:			var(--red);
	width:				80px;
	height:				80px;
	border-radius:		50%;
	margin:				auto;
	overflow:			hidden;
	transition:			all 0.15s;
}

.service_icon_wrapper:hover a {
	color:				var(--red);
}
.service_icon_wrapper:hover .service_icon_background {
	background:			transparent;
	box-shadow:			0px 0px 0px 2px var(--red) inset;
}
.service_icon_wrapper:hover .service_icon {
	stroke:				var(--red);
}


/* Profile */

.profile-menu {
	padding:			20px 0px;
	display:			flex;
	flex-direction:		column;
}

.profile-contracts {
	display:			flex;
	justify-content:	space-between;
	align-items:		flex-start;
	
	border:				2px solid var(--silver);
	border-radius:		8px;
	padding:			10px 20px;
	margin-bottom:		16px;
}


/* Admin */

.ctc-list {
	width:				100%;
	font-size:			0.95rem;
	color:				#333;
	border-collapse:	separate;
	border-spacing:		0;
	overflow:			hidden;
	border-radius:		8px 8px 0px 0px;
}

.ctc-list th, .ctc-list td {
	text-align:			left;
	padding:			8px;
	border-bottom:		1px solid #e5e5e5;
}

.ctc-list th {
	padding: 16px 8px;
	background: #f6f6f6;
	font-weight: 600;
}

.ctc-list tbody tr:hover {
	background: #f6f6f6;
	transition: all 0.15s ease;
}

.edit_icon  {
	vertical-align:		-10%;
	margin-right:		5px;
	height:				16px;
	width:				16px;
	fill:				none;
	stroke:				var(--black);
	stroke-width:		2.5;
	transition:			all 0.2s;
}
.cta1:hover .edit_icon {
	stroke:				var(--red);
}

.span_actif, .span_inactif, .span_draft {
	color: #fff;
	font-size: 0.8em;
	font-weight: 600;
	padding: 2px 5px;
	border-radius: 6px;
	text-transform: uppercase;
	white-space: nowrap;
}
.span_actif { background: var(--green); }
.span_inactif { background: #bb4646; }
.span_draft { background: #aaa; }

.message {
	position: fixed;
	bottom: 0;
	z-index: 100;
	margin: 20px;
	padding: 0px 16px;
	font-size: 0.9rem;
	background: orange;
	color: #fff;
	border-radius: 10px;
}

.disabled {
	background: #fefefe;
	color: #aaa;
	border:2px solid #ccc;
	pointer-events: none;
}
.disabled .edit_icon {
	stroke:	#aaa;
}