:root
{	--start: 25%;}
:root.light /* LIGHT COLOR SHEME */
{	--fontcolor: rgba(0, 0, 0, 1);
	--backgroundcolor: rgba(255, 255, 255, 1);	
	--translucentbackgroundcolor: rgba(255, 255, 255, 0.85);
	--headerbackgroundcolor : rgba(245, 245, 245, 1);
	--shadowcolor : rgba(0, 0, 0, 0.3);
	--cocoencolor: rgba(255, 255, 255, 1);
	--formulescolor: rgba(255, 240, 234, 1);
	--optionscolor: rgba(255, 244, 246, 1) ;
	--localisation:  url(source/gps_black.svg);
	--mail:  url(source/mail_black.svg);
	--tel:  url(source/tel_black.svg);
	--scrollbarthumb: rgba(200, 200, 200, 1.0);
	--scrollbarthumbhover: rgba(170, 170, 170, 1.0) ;
}
:root.dark /* DARK COLOR SHEME */
{	--fontcolor: rgba(255, 255, 255, 1); 
	--headerbackgroundcolor: rgba(22, 22, 22, 1);
	--shadowcolor : rgba(100, 100, 100, 0.5);
	--backgroundcolor: rgba(18, 18, 18, 1);
	--cocoencolor: rgba(18, 18, 18, 1);
	--formulescolor: rgba(84, 47, 53, 1);
	--optionscolor:  rgba(65, 30, 48, 1);
	--localisation:  url(source/gps_white.svg);
	--mail:  url(source/mail_white.svg);
	--tel:  url(source/tel_white.svg);
	--scrollbarthumb: rgba(50, 50, 50, 1.0);
	--scrollbarthumbhover: rgba(40, 40, 40, 1.0);
}

html, body 
{   margin: 0;
    height: 100%;}
html
{	scroll-behavior: smooth;
	overflow-x: hidden;}
body
{	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	font-size: 17px;
	color: var(--fontcolor);
	background-color: var(--backgroundcolor);}
p
{	padding: 0;
	margin: 0;}
h1, h2, h3, h4, h5, h6
{	font-family: 'Playfair Display', serif;
	font-weight: 600;
	padding: 0px;
	margin: 0;}
h1
{	font-size: 40px;
	padding: 60px 0 60px 0;}
h2
{	font-size: 24px;
	padding: 10px 0 10px 0;}


/* H E A D E R */

.header
{	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	z-index: 1;
	min-height: 60px;
    padding: 20px 65px;
	display: flex;
    align-items: center;
    justify-content: space-around;
	flex-wrap: wrap;
	white-space: nowrap;
	column-gap: 100px;
	row-gap: 20px;
	background-color: var(--headerbackgroundcolor);
	box-shadow: 0px 0px 15px 0px var(--shadowcolor);}
.header_index
{	background-color: transparent;
	box-shadow: none;}
.header_title_container
{	display: flex;
	align-items: center;
	justify-content: center;
	column-gap: 20px;}
.header_title
{	display: flex;
	flex-direction: column;
	align-items: flex-start;
	line-height: 1.1;}
.header_title a
{	text-decoration: none;}
.header_logo
{	height: 55px;
	transition: 0.8s;
	content: url(source/logoretoucheur.svg)}
.header_logo:hover
{	transform: rotate(360deg);
	transform-origin: center;
	transition: 0.8s;}
.header_name
{	font-size: 35px;
	font-weight: 400;
	color: var(--fontcolor);}
.header_name_index
{	color: black;}
.header_job
{	font-weight: 300;
    font-size: 25px;
    letter-spacing: 0.52em;
    color: rgba(242,184,48,1);
    background: linear-gradient(90deg, rgba(184,48,11,1) 0%, rgba(242,184,48,1) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;}
.header_menu_container
{	display: flex;
    flex-direction: row;
    align-items: baseline;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0 0 0 0;
    margin: auto 0 auto 0;}
.header_menu_list
{	text-decoration: none;
	font-size: 19px;
	margin: 0 10px 0 10px;
	padding: 5px 0 5px 0;
	transition: 0.15s;
	list-style: none}
#header_menu_selected
{	text-decoration: solid underline 1px;
	text-underline-offset: 5px;}
.header_menu_list:hover
{	text-decoration: solid underline 1px;
	text-underline-offset: 5px;}
.header_menu_list a
{	text-decoration: none;
	color: var(--fontcolor);}

/* C O L O R  T H E M E  S W I T C H */

.toggle_switch 
{	position: absolute;
	right: 20px;
	width: 40px;}
.label_switch 
{	position: absolute;
	width: 100%;
	top: -10px;
	height: 20px;
	background-color: var(--fontcolor);
	border: 1px solid var(--fontcolor);
	border-radius: 15px;
	cursor: pointer;}
.checkbox_theme 
{	position: absolute;
	display: none;}
.slider 
{	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 15px;
	transition: 0.15s;
	background-color: var(--backgroundcolor);}
.slider::before 
{	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	box-shadow: inset 6px -2px 0px 0px var(--fontcolor);
	background-color: var(--backgroundcolor);
	transition: 0.15s;}
.checkbox_theme:checked ~ .slider::before 
{	transform: translateX(20px);
	box-shadow: none;
	background-color: var(--fontcolor);}


/* I N D E X */

/* empty*/



/* C O N T E N T   P A G E */

.contentpage_page
{	position: relative;
	min-height: calc(100vh - 180px - 120px);  /* Deduction of padding */
	margin-inline: auto;
	width: auto;
	max-width: 950px;
	padding: 180px 20px 120px 20px;}
.contentpage_webworking
{	display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: column;
    font-size: 48px;
    font-family: 'Playfair Display', serif;
    font-weight: 800;
	padding-top: 150px;}
.contentpage_webworking div
{	width: 150px;
	height: 150px;
	background-color: rgba(0, 0, 0, 0);
	background-size: contain;
	background-image: url(source/crane_black.gif);
	background-repeat: no-repeat ;}
.contentpage_title
{   font-family: 'Playfair Display', serif;
    text-align: center;
    line-height: 1.3em;}
.contentpage_text, .contentpage_text_center
{	margin-inline: auto;
	line-height: 1.3em;
	padding: 5px 0;}
.contentpage_text
{	text-align: justify;}
.contentpage_text_center
{	text-align: center;}
.contentpage_text_legend
{	font-size: 13px;
	text-align: justify;
	width: 100%;
	padding: 0;}
.contentpage_text_legend a
{	text-decoration: none;
	color: var(--fontcolor);}

.contentpage_bandimg
{	display: block;
	margin: 0 -200px 0 -200px; /* Deduction padding contentpage_page */
	height: 25vh;
	max-height: 300px;
	overflow: hidden;}
.contentpage_bandimg img
{	width: 100%;
	transform: translateY(-30%);}
.contentpage_work
{	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-evenly;
	align-items: center;
	line-height: 1.4em;
	font-weight: 400;
	padding: 30px 0 30px 0;}
.contentpage_work_ok
{	list-style-image: url("source/ok_check_15px.png");}
.contentpage_work_not_ok
{	list-style-image: url("source/not_ok_cross_15px.png");}


.contentpage_button
{	display: table;
	margin: 40px auto;
	border: solid 2px  var(--fontcolor);
	font-weight: 600;
	text-align: center;
	padding: 20px 20px;
	text-decoration: none;
	color: var(--fontcolor);
	transition: 0.2s;}
.contentpage_button:hover
{	box-shadow: 0 0 6px 0 var(--shadowcolor);
	transition: 0.2s;}

.contentpage_apropos_container
{	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	flex-direction: row;
	justify-content: center;
	gap:  20px;}
.contentpage_apropos_image
{	max-width: 30%;
	padding: 10px;}

/* C O C O C E N */

.cocoen_group_container
{	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 50px;}
.cocoen_container
{	position: relative;
	padding: 20px 20px 20px 20px;
	max-width: 45%;
	min-width: 300px;}
.cocoen_container p
{	font-size: 13px;
	margin: 10px 0px 10px 0px;
	text-align: justify;}



/* C O N T A C T */

.contact
{	position: relative;
	margin-inline:  auto;
	text-align: center;
	line-height: 25px;
	padding: 50px 0 20px 0;}
.contact a
{	color: var(--fontcolor);
	text-decoration: none;
	font-family: 'Playfair Display';
	font-size: 27px;
	font-weight: 600;}
.contact_mail_img, .contact_tel_img
{	height: 20px;
	margin-right: 7px;
	transform: translateY(3px);}
.contact_mail_img
{	content: var(--mail);}
.contact_tel_img
{	content: var(--tel);}


/* F O O T E R */

.footer_frame
{	border: none;
	width: 100%;
	height: 100px;
	position: absolute;
    bottom: 0;
	left: 0;}
.footer
{	position: absolute;
    bottom: 0;
	width: 100%;
	font-size: 10px;
	opacity: 0.5;
	line-height: 115%;
	text-align: center;
	padding: 0 0 15px 0;
	margin: 0;
	color: var(--fontcolor);}



/* S C R O L L B A R */

/* width */				::-webkit-scrollbar {width: 8px; height: 8px;}
/* Track */				::-webkit-scrollbar-track {background-color: var(--backgroundcolor);border-radius: 0px;}
/* Handle */			::-webkit-scrollbar-thumb {background: var(--scrollbarthumb);border-radius: 4px;}
/* Handle on hover */	::-webkit-scrollbar-thumb:hover {background: var(--scrollbarthumbhover);}



/* M E D I A */

/* Auto dark Mode */
/*@media (prefers-color-scheme: ) {
  	:root {}
  	.contact_mail_img {content: url(source/mail_white.svg)}
	.contact_tel_img {content: url(source/phone_white.svg)}
	.contentpage_localisation img {content: url(source/gps_white.svg);}
	.contentpage_webworking div {background-image: url(source/crane_white.gif);}
  	::-webkit-scrollbar-thumb {background:  rgba(50, 50, 50, 1.0);}
  	::-webkit-scrollbar-thumb:hover {background: rgba(40, 40, 40, 1.0);}
}*/

/* Adaptation formats mobile */
@media (max-width : 840px)
{	.cocoen_container {max-width: 100%;}
}

@media (max-width : 750px)
{	.contentpage_formules_container, .contentpage_options_container {flex-wrap: wrap;}}
@media (max-width : 550px)
{	body {font-size: 14px;}
	h1 {padding: 60px 0 40px 0; font-size: 32px;}
	h2 {padding-top: 40px; font-size: 20px;}

	.header {padding: 15px 25px;}
	.header_logo, .header_logo_hidden{height: 38px;}
	.header_title_container {column-gap: 14px;}
	.header_name {font-size: 28px;}
	.header_job {font-size: 20px;}
	.header_menu_list {font-size: 15px; padding: 4px 0 4px 0;}

	.toggle_switch {right: 20px;width: 30px;}
	.label_switch {top: -7.5px;	height: 15px;}
	.slider::before {top: 2px;left: 2px;width: 11px;height: 11px;box-shadow: inset 5px -2px 0px 0px var(--fontcolor);}
	.checkbox_theme:checked ~ .slider::before {transform: translateX(15px);}

	..indexname {top: 15%; font-size: 12vw;}
	.indexbackground {}
	.indexjob_name {font-size: 6vw;}
	.index_title {padding: 60px 0 0 0}
	.index_lowtitle {font-size: 16px;}
	.index_menu_container {padding-top: 25px;}
	.index_menu_category {}
	.index_menu_category span {font-size: 24px; padding-right: 20px; transform: translateY(-50px);}

	.contentpage_work {flex-wrap: wrap; align-items: baseline; justify-content: left; line-height: normal; padding: 20px 0 20px 0;}
	.contentpage_webworking {font-size: 32px;}
	.contentpage_text_legend {font-size: 9px;}
	
	.contact a {font-size: 17px;}
	.contact img {height: 17px;}

	.footer {font-size: 6px;}
	}


@media (min-width : 1800px)
{	.contentpage_page {max-width: 1100px;}
}