* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Montserrat', sans-serif;
	text-decoration: none;
	list-style-type: none;
	font-size: 1.1rem;
	color: var(--grey);
	letter-spacing: .05rem;
}

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;500;800&display=swap');

body {scroll-behavior: smooth;}

:root {
	--orange: #c8471f;
	--greenblue: #88beb7;
	--grey: #5e5e5e;
	--gbopacity: rgba(136,190,183,.4);
	--orpacity: rgba(200,71,31,.4);
}


/*------------------------ TEXTE ------------------------*/
h1, h2, h3, h4 {
	font-family: 'Big Shoulders Display', cursive;
	text-transform: uppercase;
}

h1 {
	font-size: 15rem;
	letter-spacing: .4rem;
}

h2, h2 span {
	writing-mode: vertical-lr;
	font-size: 9rem;
	color: var(--orpacity);
	font-weight: 900;
	letter-spacing: .8rem;
}

h1, #ecoleDanse {color: white;}

h3 {
	font-size: 3rem;
	font-weight: 500;
	padding-bottom: 3rem;
}

h4 {
	font-size: 2.2rem;
	font-weight: 500;
	margin-bottom: 20px;
}

a {
	font-size: 1.5rem;
	text-transform: capitalize;
	transition: .8s ease-in-out;
}

a:hover {
	transform: scale(1.2);
	opacity: .6;
}

.titreSection span {
  display: inline-block;
  animation: slideLeft 1.5s forwards;
  opacity: 0;
  transition-timing-function: cubic-bezier(0.95,-0.05, 1, 1);
}

@keyframes slideLeft {
  from {
    opacity: 0;
    transform: translateX(200px);
  } 
  to {
    opacity: 1;
    transform: translateX(0%);
  }
}


/*------------------------ MISE EN PAGE ------------------------*/
.grid {
	display: grid;
	grid-column-gap: 100px;
}

img {
	height: 100%;
	width: 100%;
	object-fit: cover;
}

.marginb {margin-bottom: 20px;}


/*------------------------ HEADER ------------------------*/
header {
	height: 100vh;
	transition: 1s ease;
	border-bottom-right-radius: 1000px;
}

h1, #ecoleDanse {
	transition: 5s ease-in;
	transform: translateX(-900px);
	opacity: 0;
}

.transition {
	transform: translateX(0);
	opacity: 1;
}

#ecoleDanse{
	font-size: 6rem;
	writing-mode: inherit;
	font-weight: 500;
	letter-spacing: .2rem;
	text-transform: inherit;
}

nav {
	display: flex;
    justify-content: end;
    padding: 2% 5% 0 0;
    transition: 2s ease-in;
    opacity: 0;
    transform: translateX(200px);
}

nav ul li:nth-child(2) {margin: 7px 0;}

#logoNav {
	width: 12%;
	margin-right: 30px;
}

#logoNav img {object-fit: contain;}

#danseuse {
	position: absolute;
    object-fit: contain;
    transition: 2s ease-in;
    opacity: 0;
}

header div {
	left: 3%;
	bottom: 5%;
    position: absolute;
}


/*------------------------ ECOLE ------------------------*/
#ecole {
	grid-template-areas: 
	  "art1 art1 img img img"
	  "art3 art3 art2 art2 ecole";
	margin: 100px 0 100px 50px;
	grid-row-gap: 50px;
}

h2:nth-child(3) {grid-area: ecole;}

article {height: fit-content;}

p:first-child  {margin-bottom: 10px;}

article:nth-child(2) {grid-area: art1;}

article:nth-child(3) {grid-area: art2;}

article:nth-child(4) {grid-area: art3;}

#ecole div {
	grid-area: img;
	height: 400px;
}


/*------------------------ COURS ------------------------*/
#cours {
	grid-template-areas: 
	  "plan1 plan1 cours cours plan2 plan2"
	  "plan3 plan3 plan4 plan4 plan5 plan5";
	grid-column-gap: 0;
	grid-template-rows: repeat(2, 1fr);
}

#cours h2 {
	grid-area: cours;
	justify-self: center;
}

.planning:nth-child(2) {grid-area: plan1;}

.planning:nth-child(3) {grid-area: plan2;}

.planning:nth-child(4) {grid-area: plan3;}

.planning:nth-child(5) {grid-area: plan4;}

.planning:nth-child(6) {grid-area: plan5;}

#modjaz {
	background: url(../img/shakes/modjaz.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

#modern {
	background: url(../img/shakes/modern.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

#jazz {
	background: url(../img/shakes/jazz.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

#yoga {
	background: url(../img/shakes/yoga.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

#stret {
	background: url(../img/shakes/stretching.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.planning {
	cursor: pointer;
	transition: 5s ease;
	height: 0%;
}

.planning h3 {
	color: white;
	padding-top: 20px;
	text-align: center;
	font-size: 3.5rem;
	text-shadow: 3px 3px 3px rgba(0, 0, 0, .3);
	opacity: 0;
	transition: 8s ease;
}

.horaire {
	text-align: center;
	visibility: hidden;
	background: rgba(0, 0, 0, .25);
    backdrop-filter: blur(7px);
    border-radius: 10px;
	padding: 30px 30px 15px 30px;
    width: fit-content;
    margin: auto;
}

.visible {visibility: visible;}

.horaire li {
	font-size: 1.3rem;
    font-style: italic;
    color: white;
    margin-bottom: 15px;
}


/*------------------------ CONTACT ------------------------*/
#contact {
	grid-template-areas: 
	  "map map map contact"
	  "addr form form form";
	margin: 100px 0;
	align-items: center;
}

#contact h2 {
	grid-area: contact;
	justify-self: right;
}

iframe {grid-area: map;}

form {
	grid-area: form;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(3,40px) 300px 60px;
	grid-column-gap: 45px;
	grid-row-gap: 25px;
	margin: 50px 50px 0 0;
	padding: 35px;
    border-radius: 20px;
    background: var(--gbopacity);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

input {
	border: none;
	font-size: .9rem;
	font-style: italic;
	padding: 5px;
	color: #949090;
	background: rgba(255, 255, 255, .7);
}

input[type="submit"] {
	border-bottom: none;
	border-radius: 30px;
	background: white;
	color: var(--greenblue);
	text-transform: uppercase;
	font-size: 1.1rem;
}

input:focus {border: 1px solid var(--greenblue);}

input:nth-child(1), input:nth-child(2), input:nth-child(3), input:nth-child(4) {grid-column: span 2;}

input:nth-child(5), input:nth-child(6) {grid-column: span 4;}

input:nth-child(7) {grid-column-end: -1;}

#address {
	grid-area: addr;
	display: grid;
	justify-items: center;
}

#location {font-size: 1.3rem;}

#address a {
	font-size: 1.7rem;
	font-weight: 900;
	display: inline-block;
	margin-top: 30px;
}

#address ul li {display: inline-block;}

#address ul li i {
	font-size: 2.5rem;
	margin-right: 15px;
}

#address img {
	width: 25%;
	object-fit: contain;
    margin-bottom: 20px;
}


/*------------------------ FOOTER ------------------------*/
footer {
	background: lightgray;
	padding: 2% 6%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

footer img {
	width: 10%;
    margin-left: -100px;
}

footer ul li a {font-size: 1rem;}

footer ul li:nth-child(2), footer ul li:nth-child(5) {margin: 10px 0;}


/*------------------------ BREAKPOINT ------------------------*/
@media (max-width: 1450px){
	#danseuse {transform: translateX(-10%);}
}

@media (max-width: 1200px){
	/* CONTATC */
	#contact {
		grid-template-areas: 
		  "map map map contact"
		  "form form form form"
		  "addr addr addr addr";
	}

	form {margin: 50px 5%;}

	#address {
		grid-template-areas:
			"log log loc loc"
			"log log tel tel"
			"h4 h4 res res";
		margin-top: 50px;
	}

	#address img {
		grid-area: log;
		width: 40%;
	    padding-bottom: 50px;
	}

	h4 {grid-area: h4;}
	#address a {grid-area: tel;}
	#address ul {grid-area: res;}
	#location {grid-area: loc;}

	/* ECOLE */
	#ecole div {height: auto;}

	h3 {padding-bottom: 2rem;}

	/* HEADER */
	h1 {font-size: 12rem;}

	h2:nth-child(2) {font-size: 5rem;}

	header div {bottom: 10%;}

	#danseuse {
	    height: 90%;
	    bottom: 5%;
	}
}

@media (max-width: 1040px){
	/* HEADER */
	header {border-bottom-right-radius: 800px}

	#danseuse {
	    height: 85%;
	    bottom: 10%;
	}

	#logoNav {width: 15%;}

	/* ECOLE */
	#ecole {
		grid-template-areas: 
		  "art1 art1 art1 ecole"
		  "img img img img"
		  "art3 art3 art2 art2";
		margin: 100px 3%;
		grid-row-gap: 50px;
		grid-template-columns: repeat(4,1fr);
	}

	#ecole div {
    	height: 400px;
	}

	h3 {
	    padding-bottom: 1rem;
	}

	h2 {font-size: 7rem;}

	/* COURS */
	#cours {
		grid-template-areas: 
		  "plan1 plan1 plan1 cours"
		  "plan2 plan2 plan3 plan3"
		  "plan4 plan4 plan5 plan5";
		grid-template-rows: repeat(3, 1fr);
	}

	/* FOOTER */
	footer img {width: 15%;}
}

@media (max-width: 915px) {
	nav {
		justify-content: space-around;
		align-items: center;
		padding: 2% 5%;
		}

	nav ul li {display: inline-block;}

	nav ul li:nth-child(2) {margin: 0 40px;}

	#logoNav {width: 10%;}

	#danseuse {
		transform: translateX(0);
		bottom: 0;
		top: 8%;
		height: 80%;
	}

	h1, h2:nth-child(2) {text-align: center;}

	header {border-radius: 0 0 800px 800px;}

	header div {
		left: 0;
		right: 0;
	}
}

@media (max-width: 700px) {
	h1 {font-size: 8rem;}
	h2:nth-child(2) {font-size: 3rem;}

	#logoNav {width: 15%;}

	#ecole {
		grid-template-areas: 
		  "art1 art1 art1 ecole"
		  "img img img img"
		  "art3 art3 art3 art3"
		  "art2 art2 art2 art2";
		margin: 100px 3%;
		grid-row-gap: 50px;
		grid-template-columns: repeat(4,1fr);
	}

	input[type="submit"] {
		border-radius: 30px;
		font-size: 1rem;
		padding: 0 20px;
	}

	footer {padding: 5%;}

	#cours {
		grid-template-areas: 
		  "plan1 plan1 plan1 cours"
		  "plan2 plan2 plan2 cours"
		  "plan3 plan3 plan3 plan3"
		  "plan4 plan4 plan4 plan4"
		  "plan5 plan5 plan5 plan5";
		grid-template-rows: repeat(5, 1fr);
	}
}