/*
	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: #242424;
	--blue:		#59B8BA;	--blue-9: rgba(89, 184, 186, 0.9);		--blue-8: rgba(89, 184, 186, 0.8);		--blue-7: rgba(89, 184, 186, 0.7);		--blue-6: rgba(89, 184, 186, 0.6); 	--blue-5: rgba(89, 184, 186, 0.5);
	--darkblue:	#30727E;
	--red:		#EC6E58;
	
	--orange: 	#DB7535;
	--orange-light: #FB9A1B;
	--orange-dark: #B8643A;

	--light-pink: #F9E6D6;

	--beige: 	#FDF0DD;
	--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);
}
/**
 * Tartocitron : surcharge couleurs template styleo-tools
 */
 :root #tarteaucitronRoot {--toc-maincolor:#30727E;}

/*******************
*      GLOBAL
*******************/
body{font-size:16px;background-color:#ffffff; color: var(--dark); font-family: 'Jost', sans-serif; font-weight:400;line-height:1.3;}
body:has(header.menu-show) {height: 100vh;}
h1,h2,h3,h4,h5,h6{font-weight:600!important;line-height:1;padding:0;margin:0;}
h1 {font-size:30px;}
h2, .h2 {font-size:30px; margin-bottom: 30px; text-transform: uppercase;}
h3, .h3 {font-size:20px; margin-bottom: 20px;text-transform: none;}
h4 {font-size:24px;}
h5 {font-size:22px;}
h6 {font-size:20px;}

.h1-subheader {font-family: 'Bernadette';font-weight: 400; font-size: 48px;line-height: 90px;color: var(--white);}
.font-12 {font-size: 12px;}
.font-13 {font-size: 13px;}
.font-14 {font-size: 14px;}
.font-16 {font-size: 16px;}
.font-19 {font-size: 19px;}
.font-20 {font-size: 20px;}
.font-25 {font-size: 25px;}
.font-28 {font-size: 28px;}
.font-30 {font-size: 30px;}
.font-40 {font-size: 40px;}
.font-50 {font-size: 50px;}
.font-60 {font-size: 60px;}
.font-70 {font-size: 70px;}
.font-80 {font-size: 80px;}

a{color:var(--orange);transition:color 0.3s ease, background-color 0.3s ease;}
a:hover, a:focus {color:#000000;}

.border-30 {border-radius: 30px;}

.text-orange {color: var(--orange);}
.text-dark {color: var(--dark);}
.icon-intro {font-size: 100px; position: relative;}
.single-hebergement .icon-intro,
.page-contact .icon-intro,
.page-type .icon-intro {position: absolute; left: -90px; top: -50px;}
.single-hebergement .circle-intro-white,
.page-contact .circle-intro-white,
.page-type .circle-intro-white {left: -50px; top: -45px;}

.icon-intro-star {font-size: 50px; position: absolute;top: -50px; right: 5%; color: #ffffff;}
.circle-intro-white {height: 130px; width: 130px; border-radius: 50%; position: absolute; left: 100px; background-color: #ffffff;}
.page-faq .circle-intro-white {left: 10px;}
.page-home .circle-intro-white {height: 150px;width: 150px; left: -30px; top: -10px;}
.image-intro {position: absolute; right: 0; bottom: -7%; max-width: 60%; height: auto;}

.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;}

.wrapper-content p {text-align: justify;}
.page-home .image-intro {bottom: -20px;}

@media (max-width: 576px) {
	.text-intro p,
	.text-intro ul {width: 117%;left: -17%;position: relative;}
}
@media (min-width: 576px) {
	.image-intro {bottom: -10%;max-width: 45%;}
	.text-intro {margin-left: 100px;}
	.page-home .circle-intro-white {height: 180px; width: 180px; left: 30px; top: -10px;}
}
@media (min-width: 768px) {
	.wrapper-content p,
	.wrapper-content li {font-size: 18px;}
	.md-min-h-500 {min-height: 500px;}
	.md-mt-n9 {margin-top: -90px;}
	.md-font-24 {font-size: 24px;}
	.md-font-30 {font-size: 30px;}
	.md-font-50 {font-size: 50px;}
	.md-pr-2 {padding-right: 20px;}
	.collapse-md-none .collapse,
	.collapse-md-none .collapsing {display: block;height: auto !important;visibility: visible;}
	.position-md-absolute {position: absolute !important;}
	.icon-intro {font-size: 150px;}
	.page-contact .icon-intro,
	.page-type .icon-intro {left: -130px; top: -90px;}
	.single-hebergement .icon-intro {font-size: 130px;left: -115px; top: -65px;}
	.image-intro {bottom: -15%;}
	.text-intro {margin-left: 140px;}
	.page-home .circle-intro-white {height: 200px; width: 200px; left: 100px; top: 0;}
}
@media (min-width: 1200px) {
	.wrapper-content p,
	.wrapper-content li {font-size: 20px;}
	.h1-subheader {font-size: 110px;line-height: 200px;}
	h1, h2, .h2 {font-size:40px; line-height: 1.1;}
	h3, .h3 {font-size: 25px; line-height: 1.1;}
	.xl-font-19 {font-size: 19px;}
	.xl-font-20 {font-size: 20px;}
	.xl-font-24 {font-size: 24px;}
	.xl-font-40 {font-size: 40px;}
	.xl-font-45 {font-size: 45px;}
	.xl-font-60 {font-size: 60px;}
	.xl-font-70 {font-size: 70px;}
	.xl-font-80 {font-size: 80px;}
	.xl-font-90 {font-size: 90px;}
	.xl-font-130 {font-size: 130px;}

	.g-xl-2, .gx-xl-2 {--bs-gutter-x: 20px;}
	.gx-xl-5 {--bs-gutter-x: 50px;}
	.gx-xl-6 {--bs-gutter-x: 60px;}
	.g-xl-5 {--bs-gutter-x: 50px;--bs-gutter-y: 50px;}

	.container {width: 1352px;}
	.image-intro {bottom: -25%;}
	.page-home .image-intro {bottom: -50px;}
	.icon-intro-star {top: 0; right: 10%;font-size: 80px;}
}
@media (min-width: 1600px) {
	.text-intro {margin-left: 0;}
}

.offcanvas {--bs-offcanvas-width: 450px;}
.dropdown-menu {--bs-dropdown-border-radius: 12px; --bs-dropdown-min-width: 6rem;}

/*******************
*      BOUTONS
*******************/
/* bootstrap override */
.btn {--bs-btn-bg: var(--orange);--bs-btn-color: var(--white);--bs-btn-hover-color: var(--white);--bs-btn-hover-bg: var(--orange-light);--bs-btn-border-radius: 25px;--bs-btn-padding-x: 20px; --bs-btn-padding-y: 13px; --bs-btn-line-height: 1; --bs-border-width: 0;}
.btn.btn-red {--bs-btn-bg: var(--red);}
.btn.btn-white {--bs-btn-bg: var(--white);--bs-btn-color: var(--dark);}
.btn.btn-border-white {--bs-btn-bg: var(--white-0);--bs-btn-color: var(--white);--bs-btn-border-color: var(--white);--bs-btn-hover-border-color: var(--white); --bs-border-width: 1px;--bs-btn-hover-bg: var(--white);--bs-btn-hover-color: var(--orange);}
.btn.btn-icon {--bs-btn-bg: var(--white);--bs-btn-color: var(--darkblue);width: 50px; height: 50px;display: flex; justify-content: center; align-items: center;}
.btn-tel, .btn-tel.show {color: var(--white); width: 48px; height: 48px;border-radius: 50px; margin-right: 15px; padding: 10px;display: flex; align-items: center;justify-content: center;}
.btn-tel.show {background-color: var(--orange-light);color: var(--white);}
.btn-doc {color:  var(--darkblue); border: 2px solid var(--darkblue); border-radius: 30px; text-decoration: none;}
.btn-doc:hover {color:  var(--white); background-color: var(--darkblue);}
.faq__wrapper {background-color: var(--white-0); border-radius: 30px; border: 1px solid var(--darkblue);}
.faq__button {background-color: var(--white-0); border: none; display: flex; align-items: center; width: 100%;}
.faq__button > h3 {width: calc(90% - 50px);}
.faq__button > i {color: var(--white); background-color: var(--orange); width: 50px;height: 50px;font-size: 12px; display: flex;justify-content: center;align-items: center;border-radius: 50%;transition: transform 0.3s ease-in-out;}
.faq__button[aria-expanded="true"] > i {transform: rotate(180deg);}
/**   BACKGROUNDS	**/
.bg-blue {background-color: var(--blue);}
.bg-dark-blue {background-color: var(--darkblue);}
.bg-red {background-color: var(--red);}
.bg-orange {background-color: var(--orange);}
.bg-dark-orange {background-color: var(--orange-dark);}
.bg-beige {background-color: var(--beige);}
.bg-light-pink {background-color: var(--light-pink);}

.wave-white-top {position: absolute; top: -5px;left: -3px; width: calc(100% + 5px);height: 131px; background-image: url('./images/wave-white-top.svg'); background-repeat: no-repeat; background-size: contain; background-position: top;}
.wave-white-bottom {position: absolute; bottom: -5px; left: -3px; width: calc(100% + 5px);height: 131px; background-image: url('./images/wave-white-bottom.svg'); background-repeat: no-repeat; background-size: contain; background-position: bottom;}
@media (min-width: 1500px) {
	.wave-white-top, .wave-white-bottom {background-size: cover;}
	.wave-white-top {height: 161px;width: 100%;}
	.wave-white-bottom {height: 131px;width: 100%;}
}
@media (min-width: 1920px) {
	.wave-white-top {height: 200px;width: 100%;}
	.wave-white-bottom {height: 150px;width: 100%;}
}

/**  SUBHEADER   **/
.subheader.fullheight {min-height: 600px; height: 100%;z-index:1300;}
.wrapper-rating {position: relative;max-width: 200px;max-height: 300px; margin-left: auto; margin-right: auto;background-color: var(--white);color: var(--dark); transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;text-decoration: none;}
.wrapper-rating.rating-de {max-width: 230px;max-height: 350px; padding: 60px 20px 50px 20px;}
.wrapper-rating .rating-hover-text {position: absolute;display: block; bottom: 40%; left: 50%; transform: translate(-50%, 50%);opacity: 0; white-space: nowrap; z-index: -1;transition: opacity 0.3s ease-in-out, bottom 0.3s ease-in-out;}
.wrapper-rating:hover {background-color: var(--blue); color: var(--blue);}
.wrapper-rating:hover .rating-hover-text {z-index: 100; bottom: 50%;opacity: 1;}
@media (min-width: 1200px) {
	.wrapper-rating {position: absolute; left: 25px; bottom: 0;}
	.subheader.fullheight {height: calc(100vh - 119px);}
}