/*******************************/
/********** Variables CSS ******/
/*******************************/
:root {
	--main-color: var(--soh-color-0, #1a1a2e);
	--sub-color: var(--soh-color-1, #3da383);
	--third-color : var(--soh-color-2, #f4f4f4);
	--accent-color : var(--soh-color-3, #eba630);
	--other-color-1 : var(--soh-color-4, #ffc8c8);
	--other-color-2 : var(--soh-color-5, #ffc8c8);

    --white : var(--soh-color-6, #ffffff);
	--black : var(--soh-color-7, #000000);
	--grey: var(--soh-color-8, #c7c7c7);
    
	--arial : "Arial Narrow", Arial, sans-serif;
	--montserrat:'Montserrat', var(--arial);
}

/*******************************/
/************GENERAL************/
/*******************************/
html {
	font-size: 62.5%;
	margin: 0!important;
	padding: 0;
	width: 100vw;
	height: unset;
	overflow-x: hidden;
}

body {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100%;
	font-size: 1.6rem;
	font-family: var(--montserrat);
	color: var(--black);

	overflow-x: hidden;

}


/*******************************/
/*************TEXT**************/
/*******************************/
/* --- Titres --- */
h1, h2, h3, h4, p,
.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content p,
body :is(.is-h1, .is-h2, .is-h3, .is-h4, .is-p) {
	font-family: var(--montserrat);
	margin-block-end: .5lh;
}
h1 a, h2 a, h3 a, h4 a {
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

h1, .entry-content h1, body :is(.is-h1) {
	font-size: 5rem;
	line-height: 1.0;
	overflow-wrap: break-word;
}
h2, .entry-content h2, body :is(.is-h2) {
	font-size: 5rem;
	line-height: 1.1;
}
h3, .entry-content h3, body :is(.is-h3) {
	font-size: 3.5rem;
	line-height: 1.2;
}
h4, .entry-content h4, body :is(.is-h4) {
	font-size: 2.2rem;
	line-height: 1.2;
}

/* définit un style commun pour les paragraphes */
.entry-content {
	font-size: 1.8rem;
	font-weight: 400;
	line-height: 1.3;
	color: var(--black);
}
.ast-single-post .entry-content a {
	text-decoration: none;
}
p a, .entry-content li a {
	position: relative;
	padding-bottom: 2px;
	border-bottom: #666666 dotted 1px;
	text-decoration: none!important;
	color: #666666;
	font-weight: inherit;
}
p a:hover, .entry-content li a:hover {
	color: var(--third-color);
	border-bottom-color: var(--third-color);
}
p a::after, .entry-content li a::after {
	position: relative;
	display: inline-block;
	content: "";

	width: .5lh;
	height: .5lh;

	margin-left: 5px;
	margin-right: 5px;

	color: inherit;
	background-color: currentColor;

	mask: url(./assets/svg/picto-arrow.svg) center / contain no-repeat;
	-webkit-mask: url(./assets/svg/picto-arrow.svg) center / contain no-repeat;
	transition: inherit;
}
p a:hover::after, .entry-content li a:hover::after {
	margin-left: 8px;
	margin-right: 2px;
}


/* --- Neutralise l'espace en fin de bloc / entre titres consécutifs --- */
.entry-content > :last-child {
	margin-block-end: 0;
}

/* --- Si un titre est suivi d'un autre titre, sa marge du bas est réduit --- */
:root h1:has(+ h2), :root h1:has(+ h3), :root h1:has(+ h4),
:root h2:has(+ h3), :root h2:has(+ h4),
:root h3:has(+ h4),
.entry-content h1:has(+ h2), .entry-content h1:has(+ h3), .entry-content h1:has(+ h4),
.entry-content h2:has(+ h3), .entry-content h2:has(+ h4),
.entry-content h3:has(+ h4) {
	margin-block-end: .2lh;
}

/* --- Si un titre suit un autre titre, sa marge du haut est enlevée --- */
:root h1 + h2, :root h1 + h3, :root h1 + h4,
:root h2 + h3, :root h2 + h4,
:root h3 + h4,
.entry-content h1 + h2, .entry-content h1 + h3, .entry-content h1 + h4,
.entry-content h2 + h3, .entry-content h2 + h4,
.entry-content h3 + h4 {
	margin-block-start: 0;
}

h1:empty, h2:empty, h3:empty, h4:empty, p:empty, li:empty {
	display: none;
}

/*******************************/
/************GENERIC************/
/*******************************/
.FlexContainer {
	display: flex!important;
	flex-flow: row wrap;
}
.ContainerFlex {
	display: flex;
	flex-flow: column;
}
.align-start-row {
	align-items: start;
}
.justify-start-row {
	justify-content: start;
}
.align-center-row {
	align-items: center;
}
.justify-center-row {
	justify-content: center;
}
.align-end-row {
	align-items: flex-end!important;
}
.justify-end-row {
	justify-content: end;
}
.justify-between-row {
	justify-content: space-between;
}
.justify-around-row {
	justify-content: space-around;
}
/* enlève la marge interne*/
.no-padding {
	padding: 0!important;
}
/* enlève la marge externe*/
.no-margin {
	margin: 0!important;
}
/* bouton non cliquable */
.no-click {
	pointer-events: none;
	cursor: default;
}
/* sections en fullwidth */
.fullwidth {
	width: 100%!important;
	max-width: 100%!important;
}
.fullheight {
	height: 100%!important;
	max-height: 100%!important;
}
/* Centre le background et remplit la div */
.full-background-fit {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
/* cache le after et le before */
.no-after:after {
	visibility: hidden!important;
}
.no-before:before {
	visibility: hidden!important;
}
.no-desktop {
	display: none!important;
}
@media (max-width: 980px) {
	.no-desktop {
		display: unset!important;
	}
	.no-tablet {
		display: none!important;
	}
}
@media (max-width: 768px) {
	.no-tablet {
		display: unset!important;
	}
	.no-mobile {
		display: none!important;
	}
}

/****************************/
/*********** GSAP ***********/
/****************************/
.js-init .slide_up, .js-init .slide_down, .js-init .slide_right, .js-init .slide_left {
	opacity: 0; /*ANIMATION GSAP*/
}
.js-no-gsap .slide_up, .js-no-gsap .slide_down, .js-no-gsap .slide_right, .js-no-gsap .slide_left {
	opacity: 1 !important;
}

/****************************/
/******** FIL ARIANE ********/
/****************************/
/****************************/
/********* FIL ARIANE *******/
/****************************/
.fil-ariane .fil-ariane-list {
    position: relative;
    margin: 0 0 20px;
    list-style: none;
    gap: 20px;

    --line-size: 35px;
    padding-left: calc(var(--line-size) + 15px);
}
.fil-ariane .fil-ariane-list::before {
    position: absolute;
    display: block;
    content: '';
    width: var(--line-size);
    height: 2px;
    background-color: currentColor;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}
.fil-ariane .fil-ariane-list li > * {
    position: relative;
    color: var(--main-color);
    font-size: 1.5rem;
    display: block;
}
.fil-ariane .fil-ariane-list li > *:hover {
    color: var(--sub-color);
}
.fil-ariane .fil-ariane-list li.active > * {
    font-weight: 700;
}
.fil-ariane .fil-ariane-list li:not(:first-child) > *::before {
    position: absolute;
    display: block;
    content: ">";
    top: 50%;
    left: -10px;
    transform: translate(-50%, -50%);
    font-family: inherit;
    font-weight: inherit;
}
.fil-ariane .fil-ariane-label {
    display: block;
    max-width: 24ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/****************************/
/****** CONTACT FORM 7 ******/
/****************************/
.CForm {
	width: 100%;
	gap: 20px;
}
.CForm .CF-full {
	width: 100%;
}
.CForm .CF-half { width: calc(50% - 10px); }
.CForm .CF-onethird { width: calc(33% - 10px); }
.CForm .CF-twothird { width: calc(66% - 10px); }
.CForm .CF-onequarter {	width: calc(25% - 10px); }
.CForm .CF-threequarter { width: calc(75% - 10px); }

.CForm input, .CForm textarea {
	font-size: 1.5rem;
}
.CForm input:focus, .CForm textarea:focus {
	border: 1px solid var(--grey)!important;
}
.CForm .CF-highlight {
	color: var(--third-color);
	font-weight: 800;
}

.CForm .CF-checkbox .wpcf7-checkbox {
	display: flex;
	flex-wrap: wrap;
}
.CForm .CF-checkbox .wpcf7-list-item {
	margin: 0 0 5px 1%;
	width: 32%;
	min-width: 250px;
}
.CForm .CF-radio .wpcf7-radio {
	display: block;
}
.CForm .CF-radio .wpcf7-list-item {
	margin: 0 0 5px 1%;
	width: 99%;
}
.CForm .wpcf7-not-valid {
	border: 1px solid #dc3232;
}
.CForm .wpcf7-not-valid-tip {
	position: absolute;
	font-size: 1rem;
	bottom: 0;
	transform: translate(0,80%);
}
.CForm .CF-number label > span {
	width: 150px;
	display: block;
}
.CForm .CF-textarea .wpcf7-textarea  {
	resize: vertical;
	height: 100px;
	min-height: 80px;
	max-height: 300px; 
}

.CForm .CF-hr {
	position: relative;
}
.CForm .CF-hr h3 {
	display: inline-block;
	padding-right: 20px;
	margin: 0;
	background-color: var(--white);
}
.CForm .CF-hr::before {
	position: absolute;
	content: "";
	display: block;

	width: 100%;
	height: 2px;
	background-color: var(--main-color);

	top: 50%;
	left: 0;
	transform: translate(0, -50%);
	z-index: -1;
}

.CForm .wpcf7-spinner {
	position: absolute;
}
.CForm .wpcf7-response-output {
	color: var(--third-color);
}
.CForm .wp-block-button .wp-element-button {
	--ico-size: 0px;
}

.CForm input[type="text"], .CForm input[type="number"], .CForm input[type="email"], .CForm input[type="url"], .CForm input[type="password"], .CForm input[type="search"], .CForm input[type="reset"], .CForm input[type="tel"], .CForm input[type="date"], .CForm select, .CForm textarea {
	border-radius: 10px;
}
/****************************/
/***********TABLET***********/
/****************************/
@media (max-width: 980px) { 
	/**********GENERIC**********/
	.is-tablet-center, .is-tablet-center * {
		text-align: center;
    }
    .is-tablet-left, .is-tablet-left * {
		text-align: left;
    }
    .is-tablet-fullwidth {
		width: 100%!important;
    }
	.no-tablet-border {
		border: none;
    }
    .no-tablet-margin {
		margin: 0!important;
    }
    .no-tablet-padding {
		padding: 0!important;
    }
	body .is-tablet-row {
		flex-direction: row;
	}
	body .is-tablet-row-reverse {
		flex-direction: row-reverse;
        flex-wrap: nowrap !important;
    }
	body .is-tablet-column {
		flex-direction: column;
	}
	body .is-tablet-column-reverse {
		flex-direction: column-reverse;
        flex-wrap: nowrap !important;
    }
	body .is-tablet-justify-center {
		justify-content: center !important;
	}
	body .is-tablet-align-center {
		align-items: center !important;
	}
	body .is-tablet-wrap {
		flex-wrap: wrap;
	}
	/****************************/
    h1, .entry-content h1, body :is(.is-h1) {
        font-size: 6.4rem;
    }
    h2, .entry-content h2, body :is(.is-h2) {
        font-size: 4rem;
    }
    h3, .entry-content h3, body :is(.is-h3) {
        font-size: 2.6rem;
    }
}


/****************************/
/*********SMARTPHONE*********/
/****************************/
@media (max-width: 768px) { 
	/**********GENERIC**********/
	.is-mobile-center, .is-mobile-center * {
		text-align: center;
    }
    .is-mobile-left, .is-mobile-left * {
		text-align: left;
    }
    .is-mobile-fullwidth {
		width: 100%!important;
    }
	.no-mobile-border {
		border: none;
    }
    .no-mobile-margin {
		margin: 0!important;
    }
    .no-mobile-padding {
		padding: 0!important;
    }
	body .is-mobile-row {
		flex-direction: row;
	}
	body .is-mobile-row-reverse {
		flex-direction: row-reverse;
        flex-wrap: nowrap !important;
    }
	body .is-mobile-column {
		flex-direction: column;
	}
	body .is-mobile-column-reverse {
		flex-direction: column-reverse;
        flex-wrap: nowrap !important;
    }
	body .is-mobile-justify-center {
		justify-content: center !important;
	}
	body .is-mobile-align-center {
		align-items: center !important;
	}
	/****************************/
    h1, .entry-content h1, body :is(.is-h1) {
        font-size: 4.8rem;
    }
    h2, .entry-content h2, body :is(.is-h2) {
        font-size: 3.2rem;
    }
    h3, .entry-content h3, body :is(.is-h3) {
        font-size: 2.4rem;
    }
	.has-x-large-font-size {
		font-size: 3.2rem!important;
	}
	
	/* CONTACT FORM 7 */
	.CForm .CF-half, .CForm .CF-onethird, .CForm .CF-twothird, .CForm .CF-onequarter, .CForm .CF-threequarter  {
		width: calc(100% - 10px);
	}
	
	.CForm .CF-checkbox .wpcf7-list-item {
		width: 99%;
	}
	/****************************/
}

/****************************/
/*******REDUCED MOTION*******/
/****************************/
@media (prefers-reduced-motion: reduce) {
	.slide_up, .slide_down, .slide_right, .slide_left { 
		opacity: 1 !important; 
	}
}