/*general*/
html.energie {background: black}
body.energie {height: 100vh;background: black}
body.energie a.button, body.energie a.button.show {bottom: 70px;right: 70px}
#energie.presentation {height: 100vh}

/*header*/
body.energie nav.ilemaurice > .menu {padding-top: 1rem}
body.energie a#logo {display: flex;justify-content: center}
body.energie .topheader {display: flex;justify-content: center;align-items: center;text-align: center;color: black;z-index: 2000;padding: 10px 0;background: #D3A35A;font-size: 1.3rem;font-family: 'Work Sans';}
body.energie nav > .menu {justify-content: flex-start;display: grid;grid-template-columns: 1fr 6fr}
body.energie #navigation {display: flex;justify-content: center}
body.energie #navigation ul li {min-width: 215px}
body.energie li.mykonos {position: relative}
body.energie li.mykonos a {font-size: 2rem;color: #89E5D3;margin: 0 40px;position: relative;font-family: 'Work Sans';}
body.energie li.mykonos.active a::before, body.energie li.mykonos a:hover:before {content: '';background: #89E5D3;opacity: 0.5;height: 7px;position: absolute;bottom: 1px;right: 0 !important;width: 50% !important}
body.energie li.mykonos.active a {font-weight: 900}
body.energie li.mykonos a i {font-size: 2.75rem;text-shadow: none;margin-right: 10px;color: white}

/*presentation*/
#energie.presentation .grid {grid-template-columns: 1fr 4fr 1fr}
#energie.presentation .gauche, #energie.presentation .droite {display: flex;justify-content: center;align-items: center;transform: rotate(-15deg)}
#energie.presentation h1 {text-align: center;font-size: 6rem;color: #89E5D3;font-family: 'Work Sans';font-weight: 900;margin-bottom: 5rem}
#energie.presentation p.content {margin-bottom: 2rem}
#energie .cta-contact {min-width: inherit;width: 240px;margin: 5rem auto}

/*general*/
#energie .grid {grid-template-columns: 3fr 6fr;height: auto;padding-top: 15rem}
#energie {background: black;color: white;margin-top: -0.5rem;font-size: 2rem}

/*bloc gauche*/
#energie.single .gauche {position: -webkit-sticky; position: sticky;top: 135px;align-self: start}
#energie .gauche li {list-style-type: none;display: flex;justify-content: center;flex-direction: column}
#energie .gauche .accordion {color: white;cursor: pointer;padding: 1rem 1rem 1rem 0rem;outline: none;transition: all 0.4s ease-out;font-size: 1.5rem;font-family: 'Work Sans';text-transform: uppercase;background: none;border: none;text-align: left;position: relative}
#energie .gauche .active, #energie .gauche .accordion:hover {color: #D3A35A;font-size: 1.70rem}
#energie .gauche .accordion:after {content: "\002B";color: white;font-weight: bold;margin-left: 2rem}
#energie .gauche .active:after {content: "\2212"}
#energie .gauche .accordion-content {padding: 0;color: white;max-height: 0;overflow: hidden;transition: max-height 0.2s ease-out;margin-bottom: 2rem}
#energie .gauche .accordion-content a {font-size: 14px;display: block;margin: 0 auto 5px;color: #D3A35A;padding-left: 10px}
#energie .gauche .accordion-content a em {margin-right: 5px;font-style: italic}
#energie .gauche .accordion-content a em::after {content: '-';margin-left: 5px}
#energie.podcast .gauche .accordion-content a em::after {content: none}
#energie .gauche .accordion-content a cite {color: white;font-size: 11px}

/*bloc centre*/
#energie .centre {position: relative;margin-bottom: 10rem}
#energie .centre svg {transform: rotate(45deg);position: absolute;left: -40px;top: 25px}
/*titre du livre*/
#energie .centre h1 {font-size: 30px;color: #D3A35A;font-family: 'Work Sans';font-weight: bold}
#energie .centre h1::before {}
#energie .centre h2 {font-size: 20px;font-family: 'Work Sans';font-weight: bold;margin-bottom: 5rem}
/*contenu textuel*/
#energie .centre #contenu-text p {margin-bottom: 2rem}
#energie .centre #contenu-text h3 {font-size: 17px}
#energie .centre #contenu-text em {font-style: italic}

/*PODCASTS & YOUTUBE*/
#energie.podcast .grid {grid-template-columns: 2fr 6fr}
#energie.podcast .centre {display: grid;grid-template-columns: 1fr 1fr 1fr;grid-column-gap: 5rem}
#energie.podcast .centre.youtube {display: grid;grid-template-columns: 1fr 1fr;grid-column-gap: 5rem}
#energie.podcast .centre section {margin-bottom: 8rem;text-align: center}
#energie.podcast .centre svg {position: relative;left: auto;top: auto;display: block;margin: auto}
#energie.podcast .centre img {width: 200px;margin:1rem auto 2rem;border-radius: 10px}
#energie.podcast .centre h1 {font-size: 22px;margin-bottom: 2rem}
#energie.podcast .centre a:hover {cursor: pointer}

/*EXPATRIATION*/
#energie.expatriation .grid {grid-template-columns: 2fr 7fr}
#energie.expatriation .grid h1 {margin-bottom: 5rem}
#energie.expatriation .grid h1 em {color: #89E5D3;font-size: 2rem;padding-left: 1rem;display: inline-block}
#energie.expatriation .grid p {margin-bottom: 2rem}


@media (max-width: 1060px) {
	/*menu principal*/
	body.energie nav {background: black;position: relative;display: block;padding-bottom: 5rem}
	body.energie nav > .menu {grid-template-columns: 1fr;position: relative}
	body.energie #navigation {clip-path:none;position: relative;transition: none;margin-top: 2.5rem}
	body.energie #navigation ul {display: flex;flex-wrap: wrap; justify-content: center;position: relative;height: auto;max-height: none;top: 0;flex-direction: row}
	body.energie #navigation ul li {min-width: 190px;width: auto}
	#energie {margin-top: 0}
	/*menu secondaire*/
	#energie .grid {padding-top: 0}
	#energie.single .gauche {position: relative;top: 0;padding-bottom: 5rem}
	ul.menu-responsive {display: flex;flex-wrap: wrap;justify-content: center}
	ul.menu-responsive > li {width: 30%;min-width: 270px}
	#energie .gauche .accordion {text-align: center}
	#energie .gauche .accordion-content a em, #energie .gauche .accordion-content a cite {display: block;text-align: center}
	/*contenu textuel*/
	#energie .centre svg {left: calc(50% - 8px);top: -25px}
	#energie .centre h1, #energie .centre h2 {text-align: center}
	
}

@media (max-width: 810px) {
	body.energie li.mykonos a {font-size: 1.75rem}
	body.energie li.mykonos a i {font-size: 2rem}
	#energie.podcast .centre {grid-template-columns: 1fr 1fr}
}

@media (max-width: 610px) {
	#energie.podcast .centre, #energie.youtube .centre {grid-template-columns: 1fr}
}