/*
	Theme Name:Styléo
	Theme URI:http://styleo.fr
	Description:Styléo v3
	Author:Styléo
	Theme URI: http://styleo.fr
	Version:3.0
*/
@charset "UTF-8";
:root {
	--dark-purple: #3C426B;
	--purple: #676E9F;
	--light-purple: #B8BDD7;

	--grey:		#F3F4F6;
	--black:	rgba(0,0,0,1);			--black-9:rgba(0,0,0,0.9);			--black-8:rgba(0,0,0,0.8);			--black-7:rgba(0,0,0,0.7);			--black-6:rgba(0,0,0,0.6);			--black-5:rgba(0,0,0,0.5);			--black-4:rgba(0,0,0,0.4);			--black-3:rgba(0,0,0,0.3);			--black-2:rgba(0,0,0,0.2);			--black-1:rgba(0,0,0,0.1);			--black-0:rgba(0,0,0,0);
	--white:	rgba(255,255,255,1);	--white-9:rgba(255,255,255,0.9);	--white-8:rgba(255,255,255,0.8);	--white-7:rgba(255,255,255,0.7);	--white-6:rgba(255,255,255,0.6);	--white-5:rgba(255,255,255,0.5);	--white-4:rgba(255,255,255,0.4);	--white-3:rgba(255,255,255,0.3);	--white-2:rgba(255,255,255,0.2);	--white-1:rgba(255,255,255,0.1);	--white-0:rgba(255,255,255,0);
	
	--dark: #1A1A1A;
}

/**
 * Tartocitron : surcharge couleurs template styleo-tools
 */
:root{
    --toc-selected-green:#198754;
    --toc-selected-red:#9C1A1A;
}
/*******************
  *      GLOBAL
  *******************/
body{font-size:16px;color:var(--dark);background-color:var(--white);font-family:"DM Sans", sans-serif;font-weight:400;line-height:1.3;}
h1,h2,h3,h4,h5,h6{font-family:"DM Sans", sans-serif;line-height:1;}
h1 {font-size:30px;margin-bottom: 30px;font-weight:600;}
h2, .h2 {font-size:27px;margin-bottom: 30px;font-weight:700; color: var(--purple);}
h3 {font-size:22px;margin-bottom: 10px;font-weight:700;}
h4 {font-size:24px;font-weight:700;}
h5 {font-size:22px;font-weight:700;}
h6 {font-size:20px;font-weight:700;}
p {margin-bottom:10px;}
a{color:var(--dark-purple);transition:color 0.3s ease, background-color 0.3s ease;}
a:hover, a:focus {color:var(--black);}
ul {margin-top: 10px;padding-left: 1.5rem;}
ul > li {margin-bottom: 10px;}
ul > li::marker {color: var(--dark-purple);font-size: 1.5em;}

.txt-white {color:var(--white);}
.text-dark {color:var(--dark);}
.text-hover-purple:hover, a.text-hover-purple:hover {color:var(--purple) !important;}
.text-hover-light-purple:hover, a.text-hover-light-purple:hover {color:var(--light-purple) !important;}

.cursor-pointer {cursor: pointer;}

.min-h-175 {min-height: 175px;}
.min-h-328 {min-height: 328px;}
.max-w-900 {max-width: 900px;}

.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl, .container-fluid { max-width: 100%; --bs-gutter-x: 40px;}
.row {--bs-gutter-x: 40px;}
.g-1, .gx-1 {--bs-gutter-x: 10px;}
.g-1, .gy-1 {--bs-gutter-y: 10px;}
.g-2, .gx-2 {--bs-gutter-x: 20px;}
.g-2, .gy-2 {--bs-gutter-y: 20px;}
.g-3, .gx-3 {--bs-gutter-x: 30px;}
.g-3, .gy-3 {--bs-gutter-y: 30px;}
.g-5 {--bs-gutter-x: 50px;--bs-gutter-y: 50px;}
.gy-5 {--bs-gutter-y: 50px;}

.font-16 {font-size:16px;}

.z-index-1300 {z-index: 1300;}

.subheader.fullheight {min-height:calc(90vh);}
.h2-line-wrapper {position: relative; display: flex; align-items: center; width: 100%; gap: 20px; margin-bottom: 30px;}
.h2-line-wrapper h2 {margin-bottom: 0; max-width: calc(100% - 85px);}
.heading-wrapper h2 { white-space: nowrap; }
.h2-line {flex: 1; height: 1px;background-color:var(--dark); margin-top: 4px;}
.h2-dots {width: 65px;order: 10;}
.h2-dots::before {content: "• • •"; position: absolute; bottom: 0; right: 0; font-size: 2.5rem; color: var(--dark-purple); letter-spacing: 0;}
.h2-line-wrapper.after-title .h2-dots {height: 50px;}
.h2-line-wrapper.after-title .h2-dots::before {position: relative;}

.h2-line-wrapper.before-after {justify-content: center;}
.h2-line-wrapper.before-after .dots-before {order: -1;}
.h2-line-wrapper.before-after .dots-before::before {position: relative; right: unset;} 

.expertise-purple-square {position: absolute; left: 0; top: 0; width: 300px; height: 300px; background-color: var(--purple); z-index: -1;}

.home-croquis-4 {position: absolute; left: 0; z-index: 0;}
.home-square-croquis-4 {position: absolute; top: 300px; left: 22%; z-index: -1; width: 415px; height: 331px; background-color: var(--grey);}

.activity-purple-square {position: absolute; left: 0; top: 0; width: 300px; height:300px; z-index: -1;}

.activities-croquis-5 {position: absolute; top: 0; right: 0; z-index: 0; max-width: 35%;}
.activities-square-croquis-5 {position: absolute; top: 0; right: 7%; z-index: -1; width: 415px; height: 331px; background-color: var(--grey);}
.activities-croquis-6 {position: absolute; bottom: 0; left: 0; z-index: 0; max-width: 35%;}
.activities-square-croquis-6 {position: absolute; bottom: 0; left: 20%; z-index: -1; width: 290px; height: 232px; background-color: var(--grey);}
.contact-croquis-5 {position: absolute; top: 0; right: 0; z-index: 0; max-width: 40%;}

.number-round {width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 30px;}
.history-dot {width: 15px; height: 15px; border-radius: 50%; background-color: var(--dark-purple); margin-left: 20px; margin-right: 20px;}
.history-line {flex: 1; height: 1px;background-color:var(--dark); margin-top: 7px;}

/** FAQ **/
.faq__wrapper {border-bottom: 1px solid var(--dark);}
.faq__button {background-color: #ffffff; border: none; padding: 20px 0; display: flex; align-items: center;text-align: left; justify-content: space-between; width: 100%;color: var(--dark);}
.faq__button::before {content: "•"; font-size: 3rem; color: var(--dark-purple); margin-right: 10px;}
.faq__button > h3 {width: calc(100% - 85px); transition: color 0.3s ease-in-out;}
.faq__button:hover > h3 {color: var(--purple);}
.faq__button .icon-arrow-down {font-size: 27px; color: var(--dark-purple);border: 1px solid var(--dark-purple); margin-left: auto; width: 50px;height: 50px; display: flex; justify-content: center; align-items: center; background: var(--white); border-radius: 50%;transform: none; transition: background 0.3s, transform 0.3s;}
.faq__button[aria-expanded="true"] .icon-arrow-down {transform: rotate(180deg);}
.faq__answer {padding-bottom: 20px;}

@media (min-width: 992px) {
	.number-round {width: 85px; height: 85px;font-size: 50px;}

	.home-croquis-2 {position: absolute; top: 0; right: 0; z-index: 0; max-width: 40%;}
	.home-square-croquis-2 {position: absolute; top: 0; right: 15%; z-index: -1; width: 415px; height: 331px; background-color: var(--grey);}
	.activity-purple-square {width: 513px; height: 451px;}
}
@media (min-width: 1200px) {
	.subheader.fullheight {min-height:calc(100vh);}
	.home-croquis-3 {position: absolute; bottom: 0; right: 0; z-index: 0;}
	.expertise-purple-square {width: 513px; height: 712px;}
}
@media (min-width: 1200px) {
	h1 {font-size:40px; line-height: 1.1;}
	h2, .h2 {font-size:35px; line-height: 1.1;}
	h3 {font-size:25px; line-height: 1.1; margin-bottom: 30px;}

	.container {width: 1352px;}
	.xl-font-20 {font-size:20px;}
	.xl-font-25 {font-size:25px;}
	.xl-pl-10 {padding-left:100px;}
}

@media (min-width: 1400px) {
	body {font-size:17px;}
	h1 {font-size:60px; line-height: 1.1;}
	h2, .h2 {font-size:50px; line-height: 1.1;}
	.xxl-font-40 {font-size:40px;}
}
@media (min-width: 1400px) {

	.container {width: 1720px;}
}
/*******************
*      BOUTONS
*******************/
/* bootstrap override */
.btn {--bs-btn-bg: var(--white-0);--bs-btn-color: var(--dark-purple);--bs-btn-border-color: var(--dark-purple);--bs-btn-hover-color: var(--white);--bs-btn-hover-bg: var(--dark-purple);--bs-btn-border-radius: 0;--bs-btn-padding-x: 28px; --bs-btn-padding-y: 18px; --bs-btn-line-height: 1; --bs-border-width: 1px;--bs-btn-font-size: 16px;--bs-btn-font-weight: 600; text-transform: uppercase;}
.btn.btn-white {--bs-btn-bg: var(--white-0);--bs-btn-color: var(--white);--bs-btn-border-color: var(--white);--bs-btn-hover-color: var(--dark-purple);--bs-btn-hover-bg: var(--white);}

.leaflet-container a.btn {color: var(--dark-purple);}
.leaflet-container a.btn:hover {color: var(--white);}

.btn-arrow { display: block;position: relative; color: var(--dark); font-weight: 600; text-decoration: none;padding-top: 5px; padding-bottom: 5px; padding-right: 45px; transition: color 0.15s ease, background-color 0.15s ease;width: fit-content;}
.btn-arrow::after {content: "\e901";font-family: 'icomoon' !important; speak: never; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; position: absolute; top: 8px; right: 9px; transition: right 0.15s ease-in-out;}
.btn-arrow:hover {color: var(--purple);}
.btn-arrow:hover::after {right: 0;} 

/**   BACKGROUNDS	**/
.bg-purple {background-color:var(--purple);}
.bg-light-purple {background-color:var(--light-purple);}
.bg-dark-purple {background-color:var(--dark-purple);}

.bg-grey {background-color:var(--grey);}

/* RESEAUX SOCIAUX */
.open-sharelinks {cursor:pointer;}
.sharelinks {padding:0;margin:0;list-style-type:none;}
.sharelinks li {display:inline-block;vertical-align:top;margin-right:15px;}
.sharelinks li:last-child {margin-right:0;}
.sharelinks li a {display:inline-block;overflow:hidden;border-radius:100%;}
.sharelinks li span {cursor:pointer;font-size:16px;border-radius:100%;display:inline-block;color:#b0c925;line-height:1;padding:8px 0;text-align:center;min-width:40px;border:4px solid rgba(151,91,189,0.12);}


/*******************
  *     CONTACT
  *******************/
/* Form de contact Gravityforms */
.gform-body {padding: 0;}
.st-wrapper-gform-fields {list-style-type:none;margin:0;padding:0;}
.ginput_container textarea{max-width:100%;min-width:100%;height:70px;}
.ginput_container input,
.ginput_container select,
.ginput_container textarea{box-shadow:none;border-radius:0;font-weight:normal;font-size:16px;color:var(--dark);background-color:var(--grey);border:none; padding: 11px;width: 100%;line-height: 1;}
.ginput_container select option{background-color:var(--white);border:none;padding:2px 12px;}
.ginput_container input:hover,
.ginput_container input:active,
.ginput_container input:focus,
.ginput_container select:hover,
.ginput_container select:active,
.ginput_container select:focus,
.ginput_container textarea:hover,
.ginput_container textarea:active,
.ginput_container textarea:focus{box-shadow:none;}
.gform_body:before,
.gform_body:after {content:" ";display:table;clear:both;}
.ginput_container textarea {min-height: 160px; border-radius: 0; padding: 11px;}
.gform_body .hidden_label label {display:none!important;}
.gform_footer {margin-top: 20px; padding:0 15px;text-align:center;}
.gform_button{border-radius:0;display:inline-block;text-decoration:none!important;transition:color 0.3s ease,background-color 0.3s ease;line-height:1;background-color:var(--white);border: 1px solid var(--dark-purple);color:var(--dark-purple);padding:18px 28px;font-size:13px;font-weight: 600; margin-top:0;width:auto;text-transform: uppercase;}
.gform_button:hover,
.gform_button:active,
.gform_button:focus {background-color:var(--dark-purple);color:var(--white);}
.gform_validation_errors {margin:0 15px 30px;}
.gform_validation_errors h2 {font-size:16px;margin:0;padding:6px 15px;}
.gfield_label {font-weight: 700; margin-bottom: 8px;}

.ginput_container select {height: 43px;}

.gfield--type-radio .gfield_label {max-width: 45%;}
.gfield--type-radio,
.gfield--type-radio .gfield_radio {display: flex; align-items: center; padding-left: 10px;}
.ginput_container_radio .gfield_radio .gchoice {display: flex;align-items: center; padding-left: 0;flex: 0 0 auto;width: 60%;margin-bottom: 10px;}
.ginput_container_radio .gfield_radio .gchoice input {margin-right: 10px;width: 19px;height: 19px;}

.ginput_container_consent {display: flex;}
.ginput_container_consent input[type='checkbox'] {margin-right: 10px;width: 19px;height: 19px;}

/* Form de contact Gravityforms : Gestion des erreurs */
.validation_error{background-color:rgba(189,69,136,0.1);border:1px solid rgba(189,69,136,0.6);color:rgba(216,0,0,0.6);font-size:16px;padding:0;text-align:center;}
.gform_wrapper .gfield_error .gfield_label{color:#f62459;}
.gform_wrapper .gfield_error input,.gform_wrapper .gfield_error select,.gform_wrapper .gfield_error textarea{background-color:rgba(216,0,0,0.1);color:#000000;box-shadow:0 0 0 #ffffff!important;}
.gfield{position:relative;}
.gfield .gfield_description.validation_message{color:rgba(216,0,0,0.6);font-size:12px;position:absolute;right:15px;top:-16px;}