/** auteur @198, jonas krekic **/

@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root{
	--color3: #54B6CA; /* bleu */
	--color2: #6BBE78; /* vert fonce */
	--color1: #AEFB2A; /* vert clair */
	--colorRed: #e833a2;
	--img_size: 25rem;
	--width: 720px;
	--height_header: 6rem;
	--height_section: calc(100vh);
	--height_section_header: calc(100vh - var(--height_header));
	--padding: 4rem;
	--size_txt_garde: 1.7rem;
}

*{
	font-family: "Montserrat", sans-serif;
	font-optical-sizing: auto;
	font-size: 1rem;
	font-weight: normal;
	font-style: normal;	
	color: black;
	text-decoration: none;
	margin: 0;
	padding: 0;	
	line-height: 1.5rem;
}

html{
	scroll-behavior: smooth;	
}

body{
	width: var(--width);
	margin: auto;
}

header{
	position: fixed;
	display: flex;
	justify-content: space-between;
	height: 0;
	width: var(--width);
	top: 0;
	padding-top: 1rem;
	z-index: 15;
}

header > a > img{
	margin-left: -7rem;
	height: 6rem;
	z-index: 20;
}

section{
	display: flex;
	flex-direction: column;
	min-height: var(--height_section);
	margin-bottom: 5rem; 
/*border: solid green 3px;*/
}

section > h1{
	font-size: 1.8rem;
	position: sticky;
	top: 6rem;
	margin-left: calc(var(--width) + 1rem);
	text-align: center;
	/*weight: 90%;
border: solid purple 3px;*/
}

section.garde > h1, section.garde > h1 > span.bold{
	/*color: var(--colorRed);*/
	font-size: var(--size_txt_garde);
	line-height: var(--size_txt_garde);
	font-weight: 500;
	/*line-height: 1;*/
	/*top: 0;*/
	/*padding: 1.3rem;*/
	margin-left: inherit;
	/*background: white;*/
	/*width: 90%;
border: solid red 3px;*/
}

section.garde > h1 > span.bold{
	font-weight: 800;
	border: 0;
	padding: 0;
	/*justify-content: center;*/
}

section.garde > div{
	display: flex;
	justify-content: center;
/*border: solid blue 3px;*/
}

section.garde .illustration{
	padding: 7rem 0 3rem 0;
	width: 60%;
}

section.portrait > *:nth-child(2) > *{
	display: grid;
	grid-template-columns: 50% auto;
	column-gap: 1rem;
/*border: solid red 3px;*/
}

/*section.portrait > *:nth-child(2) > *:nth-child(1){*/
/*section.portrait > *:nth-child(2) > *:nth-child(1){
	grid-template-columns: 50% auto;
border: solid red 3px;
}*/

section.portrait > *:nth-child(2) > * > *:nth-child(2){
	/*padding-left: 2rem;*/
/*border: solid green 3px;*/
}

section.portrait > *:nth-child(2) > *:nth-child(2){
	/*grid-template-columns: 50% auto;*/
	/*padding-top: 3rem;*/
}

/** texte portrait **/
section.portrait > *:nth-child(2) > *:nth-child(1) > div > p{
	padding: 0 1rem 0 1rem;
	text-align: justify;
	/*padding-right: 3rem;*/
	hyphens: auto;
}

/** texte chapitre **/
section.portrait > *:nth-child(2) > *:nth-child(1) > div > p + p{
	padding-top: 1rem;
}

/*section.portrait > *:nth-child(2) > *:nth-child(2) > div{*/
section.portrait > *:nth-child(2) > *:nth-child(2) > *{
	/*padding-left: 3rem;*/
	/*justify-content: end;*/
	padding-top: 3rem;
	align-content: center;
	text-align: center;
}

section.portrait > *:nth-child(2) > *:nth-child(2) > div > h3{
	padding-top: 1em;
}
 
section.portrait > *:nth-child(2) > * > img{
	width: calc(100% - 2rem);
	/*width: calc(100% - 2rem);*/
	/*width: 100%;*/
	padding: 3rem 1rem 0 1rem;
/*border: solid pink 3px;*/
}

section.wohnen{
	display: flex;
	/*flex-direction: column;*/
/*border: solid blue 5px;*/
}

section.wohnen > *:nth-child(2){
	padding-top: 10rem;
	/*display: grid;
	grid-template-columns: 40% auto;*/
	/*margin-top: 35%;*/
}

section.wohnen > *:nth-child(2) > *{
	padding: 0.5rem;
}

section.wohnen > *:nth-child(2) > *:nth-child(1){
	display: flex;
	justify-content: center;
/*border: solid red 5px;	*/
}

section.wohnen > *:nth-child(2) > *:nth-child(1) > img{
	width: 35%;
	/*width: 100%;*/
}

.slider{
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.slider > img{
	width: 100%;
}

.slider > a{
	/*text-decoration: none;*/
/*border: solid red 5px;*/
}

/*.slider{
	display: none;
}

.slider_title{
	display: block;
	padding-top: 1rem;
	font-weight: bold;
	text-align: center;
}

.slider.visible{
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.slider.visible > img{
	width: 55%;
}

.slider > .prev, .slider > .next{
	padding: 0.6rem 0.5rem 0.8rem 0.5rem;
	cursor: pointer;
	font-size: 1.5rem;
	font-weight: bolder;
	border-radius: 0.3rem;
	
}

.slider > .prev:hover, .slider > .next:hover{
	color: var(--colorRed);
}*/

.descriptif{
	display: flex;
	justify-content: space-between;
	border-radius: 1rem;
	padding: 1rem;
	cursor: pointer;
}

.descriptif > span{
	font-weight: bolder;
}

/*.descriptif.R{
	background: var(--color3);
}*/

/*.descriptif.K:hover{*/
.descriptif.K.color{
	background: var(--color1);
}

/*.descriptif.M:hover{*/
.descriptif.M.color{
	background: var(--color2);	
}

/*.descriptif.R:hover{*/
.descriptif.R.color{
	background: var(--color3);
}

.subtable{
	display: none;
	opacity: 0;
	flex-direction: column;
	border-radius: 1rem;
	padding: 1rem;
	margin: 1rem 0 1rem 0;
	transition: opacity 1.5s;
}

.subtable.visible{
	display: grid;
	grid-template-columns: auto 23%;
	column-gap: 1rem;
	opacity: 1;
}

/*.subtable.visible > *:nth-child(1){
border: solid green 5px;		
}*/

.subtable.visible > *:nth-child(1) > *:nth-child(1){
	border-bottom: dotted black 1px;
	padding-bottom: 0.5rem;
	margin-bottom: 1rem;
/*border: solid green 5px;*/
}

.subtable.visible > *:nth-child(1) > *:nth-child(1) > *{
	display: flex;
	justify-content: space-between;	
}

.subtable.visible > *:nth-child(1) > *:nth-child(1) > div > span:nth-child(2){
	font-weight: bolder;
}

/*.subtable.visible > *:nth-child(1) > *:nth-child(1) > div:nth-child(3){*/
.subtable.visible > *:nth-child(1) > *:nth-child(1) > a{
	font-weight: bolder;
	justify-content: center;
	
	/*justify-content: center;*/
	padding: 1rem 0 0.5rem 0;
/*border: solid pink 3px;*/
}

.subtable.visible > *:nth-child(1) > *:nth-child(1) > h4{
	text-align: center;	
}

/*.subtable.visible > *:nth-child(1) > *:nth-child(2){
border: solid red 5px;	
}*/

.subtable.visible > *:nth-child(1) > *:nth-child(2) > *{
	font-weight: bolder;
/*border: solid red 3px;*/
	/*justify-content: center;*/
}

.subtable.visible > *:nth-child(1) > *:nth-child(n+2){
	display: grid;
	grid-template-columns: 20% 50% 30%;
	padding: 0.3rem;
	text-align: center;
/*border: solid black 1px;*/
	/*transition: 0.1s;*/
/*border: solid purple 5px;	*/
}

.subtable.visible > *:nth-child(1) > *:nth-child(n+3):hover{
	background: white;
	border-radius: 0.5rem;	
}


.subtable.visible > *:nth-child(2){
	padding: 0.5rem;
	background: white;
	border-radius: 0.5rem; 
/*border: solid red 5px;*/
}

.subtable.visible > *:nth-child(2) > a{
	text-decoration: none;
}

.subtable.visible > *:nth-child(2) > a:hover{
	cursor: pointer;
	/*font-weight: bold;*/
}

.subtable.visible.K{
	background: var(--color1);
}

.subtable.visible.M{
	background: var(--color2);
}

.subtable.visible.R{
	background: var(--color3);
}

.subtable a{
	text-decoration-line: underline;
}

section.kontakt{
	min-height: calc(5rem + var(--height_section));
/*border: solid green 5px;*/
}

section.kontakt > h1{
	padding-bottom: 12rem;
}

section.kontakt > *:nth-child(2){
	position: sticky;
	top: var(--height_header);
	display: grid;
	grid-template-columns: auto 40%;
}

section.kontakt > *:nth-child(2) > *{
	display: flex;
	flex-direction: column;
	justify-content: end;
}

section.kontakt > *:nth-child(2) > *:nth-child(1){
	color: var(--colorRed);	
	font-weight: 600;
}

section.kontakt > *:nth-child(2) > *:nth-child(2){
	text-align: right;
}

section.kontakt > *:nth-child(3){
	position: relative;
	padding-top: 25rem;
	/*top: calc(var(--height_header) + 20rem);*/
	text-align: center;
	font-weight: 800;
/*border: solid purple 5px;*/	
}

/*footer > p{
	font-size: 0.8rem;
	line-height: 0.8rem;
	text-align: center;
	padding-bottom: 2rem;
}*/

h1{
	font-weight: bolder;
	font-size: 2rem;
}

h2{
	font-weight: bolder;
	font-size: 1.2rem;
}

h3{
	font-weight: bolder;
}

h4{
	font-size: 0.9rem;
	font-style: italic;
	padding-top: 0.5rem;
}

p a{
	font-weight: bolder;
	text-decoration-line: underline;
	cursor: pointer;
}

a:hover{
	color: var(--colorRed);
}

.bold{
	font-weight: bolder;	
}

.advertisement{
	padding: 0 1rem 1rem 0;
	text-align: right;
	font-weight: bolder;
	font-size: 1.5rem;
	color: red;
}

.red {
	color: red;
}

/** NAVIGATION **/

nav .checkbox, nav .hamburger-lines{
	position: absolute;
	margin-left: 1rem;	
	height: 2.6rem;
	width: 3rem;
}

nav .checkbox{
	display: block;
	opacity: 0;
	cursor: pointer;
	z-index: 30;
}

nav .hamburger-lines {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	z-index: 20;
}

nav .hamburger-lines .line{
	height: 0.4rem;
	border-radius: 1rem;
	background: black;
}

nav .hamburger-lines .line1{
	transform-origin: -5%;
	transition: transform 0.4s ease-in-out;	
}

nav .hamburger-lines .line2{
	transition: transform 0.2s ease-in-out;
}

nav .hamburger-lines .line3{
	transform-origin: 0% 100%;
	transition: transform 0.4s ease-in-out;	
}

nav .menu-items{
	position: fixed;
	display: none;
	opacity: 0;
	top: 0;
	right: 0;
	align-items: center;
	width: 100vw;
	height: 100vh;
	padding-top: 15rem;
	flex-direction: column;
	background: white;
	transition: opacity 0.5s;
}

nav .menu-items a {
	font-weight: 500;
	font-size: 2rem;
}

nav .menu-items a:hover{
    font-weight: bolder;
}

nav .menu-items li{
	list-style-type : none;
	margin-bottom: 1.2rem;
}

nav input[type="checkbox"]:checked ~ .menu-items {
	display: flex;
	opacity: 0.9;
	transition: opacity 0.5s;
}

@starting-style{
	nav input[type="checkbox"]:checked ~ .menu-items{
		opacity: 0;
	}
	.subtable.visible{
		opacity: 0;
	}
}

nav input[type="checkbox"]:checked ~ .hamburger-lines .line1 {
  transform: rotate(45deg);
}

nav input[type="checkbox"]:checked ~ .hamburger-lines .line2 {
  transform: scaleY(0);
}

nav input[type="checkbox"]:checked ~ .hamburger-lines .line3 {
  transform: rotate(-45deg);
}

@media only screen and (max-width: 1088px){
	body{
		/*margin: auto;*/
		/*margin-left: 7rem;*/
		padding: 1rem;
/*border: solid green 3px;*/
	}

	header{
		/*padding-top: 1rem;*/
		/*position: fixed;*/
		/*display: block;*/
		height: inherit;
		width: inherit;
		/*flex-direction: column;*/
		/*width: 7rem;*/
		/*width: calc(100% - 2rem);*/
		/*height: 95vh;*/
		/*left: 0;*/
		top: 1rem;
		padding: 0;
		/*background: white;*/
		align-items: end;
		/*padding: 0 0 0 0.5rem;*/
/*border: solid red 3px;*/
	}
	
	header > a{
		/*padding: 0;
margin: 0;*/		
	}
	
	header > a > img /*, nav*/{
		/*padding: 0;*/
/*margin: -1rem;*/	
		height: 4rem;
/*border: solid blue 3px;*/
	}
	
	header > a > img{
		margin: auto;
		padding-top: 1rem;	
	}

	section{
/*border: solid yellow 3px;*/
		justify-content: center;
	}
	
	section > h1, section.garde > h1{
		top: 0;
		margin: 0;
		padding: 1.3rem 0 1rem 0;
		background: rgb(255,255,255);
		height: 4rem;
		/*z-index: 16;*/
	}
	
	section > h1{
		padding-top: 2rem;
		/*text-align: center;*/
	}
	
	section.garde > h1{
		width: calc(100% - 8rem);
		height: inherit;
		/*font-size: 1.5rem;*/
		margin: auto;
	}	
	
	nav .checkbox, nav .hamburger-lines{
		/*padding-bottom: 1rem;*/
		/*margin: 0;*/
		/*padding: 0;*/
		margin-left: -3rem;
		margin-top: -3.6rem;
/*border: solid brown 3px;*/
		
	}
}

@media only screen and (max-width: 450px){
	p, h2, h3, h3 + div{
		text-align: center;
	}
	
	/*h2{
		margin-bottom: 2rem;
	}*/
	
	body{
		width: inherit;
		/*max-width: 100%;*/
		/*max-width: min(var(--width), calc(100% - var(--padding)));*/
		/*margin-left: 4rem;*/
/*border: solid green 3px;*/
	}

	header{
		width: calc(100% - 2rem);
		align-items: center;
		/*justify-content: start;*/
		/*width: inherit;*/
/*border: solid red 3px;*/
	}
	
	header > a > img /*, nav*/{
		/*padding: 0;*/
/*margin: -1rem;*/	
		height: 3.2rem;
/*border: solid blue 3px;*/
	}
	
	section > h1/*, section.garde > h1*/{
		/*margin: 0;*/
		/*padding: 1rem;*/
		padding-bottom: 0;
/*border: solid brown 3px;*/
	}
	
	section.garde > h1{
		width: calc(100% - 8rem);
		height: inherit;
		font-size: 1.2rem;
		margin: auto;
	}
	
	section.portrait > *:nth-child(2) > *,
	section.wohnen > *:nth-child(2),
	section.kontakt > *:nth-child(2)
	{
		display: flex;
		flex-direction: column;
	}
	
	section.portrait > *:nth-child(2) > *:nth-child(1){
		flex-direction: column-reverse;	
	}	
	
	section.kontakt > *:nth-child(2){
		flex-direction: column-reverse;
	}

	section.kontakt > *:nth-child(2) > *:nth-child(1){
		text-align: center;
		padding-top: 5rem;
	}

	nav .checkbox, nav .hamburger-lines{
		margin-top: -1.3rem;
	}
	
	/*header{
	
	}*/
	
	/*header{
		width: 3.5rem;
	}*/

	/*header > a > img{
		margin-top: -0.5rem;
		padding: 0;	
	}*/

	/*nav .checkbox, nav .hamburger-lines{
		margin: 0;
	}*/

	/*section{
		width: 100%;
		margin: 0;
	}

	section > h1, section.garde > h1{
		margin: 5rem 0 2rem 0;
		padding: 1rem;
	}
	
	section.garde > h1{
		margin-bottom: 3rem;
	}

	section.portrait > *:nth-child(2) > *,
	section.wohnen > *:nth-child(2),
	section.kontakt > *:nth-child(2)
	{
		display: flex;
		flex-direction: column;
	}

	section.portrait > *:nth-child(2) > *:nth-child(1){
		flex-direction: column-reverse;	
	}

	section.portrait > *:nth-child(2) > *:nth-child(2) > div,
	section.portrait > *:nth-child(2) > *:nth-child(2) > div > h3
	{
		padding: 0;
	}

	section.portrait > *:nth-child(2) > *:nth-child(1) > div > p + p{
		padding-right: 1rem;
	}

	section.portrait > *:nth-child(2) > * > img{
		margin-bottom: 2rem;
	}*/

	/*section.wohnen > *:nth-child(2){
		flex-direction: column-reverse;
	}*/

	/*.subtable.visible > *:nth-child(1) > div > span:nth-child(1){
		max-width: 70%;
	}

	section.kontakt > h1{
		margin-bottom: 5rem;
	}

	section.kontakt > *:nth-child(2){
		flex-direction: column-reverse;
	}

	section.kontakt > *:nth-child(2) > *:nth-child(1){
		text-align: center;
		padding-top: 5rem;
	}*/
}