/***************Main***************/

main {
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: hsl(0, 0%, 100%);
}

main p{
	text-indent: 20px;
	text-align: justify;
	font-size: 1.2em;
}

#Contact,
#Législation {
	background-color: hsl(0, 0%, 18%);
}

/***************Titre***************/

#Info {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align:center;
	background-color:hsl(229, 100%, 97%);
	width: 100%;
	margin: calc(var(--header) + 20vh) 0 20vh;
	scroll-margin-top: calc(var(--header) + 20vh);
	gap: 50px;
	padding: 0 10%;
	box-sizing: border-box;
}

#Info h2 {
	color : hsl(0, 0%, 50%);
	font-size: 1em;
	text-align: left;
}

#Info h1{
	position: relative;
}	

#Info h1 + h2 {
	text-align: right;
}

#Info img {
	width: 8em ;
	transform: scale(1.5);
	margin-right: 5em;
	border-radius:20px;
	box-shadow: hsla(240, 30%, 28%, 0.25) 0px 30px 60px -12px,
				hsla(0, 0%, 0%, 0.3) 0px 18px 36px -18px;
}

/***************Mentions légales***************/
#Législation{
	display: flex;
	flex-direction: column;
	color: var(--blanc);
	align-items: center;
	padding: 10vh 0;
	width: 100%;
}
#Législation .legislation{
	width: min(80% , 70ch);
	padding: 3vw 0;
}
#Législation div{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	width: 70%;
	gap: 10px 50px
}

#Législation div article{
	width: 40ch;
}

#Législation div article h3{
	text-align: center;
}

#Législation div article hr{
	width: 40%;
	height: 1px;
	border: 0;
	background-color: var(--blanc);
	transition: all 0.3s ease;
}

#Législation div article:hover hr{
	background-color: var(--rouge);
}

/***************Formulaire de contact***************/

#Contact{
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	box-sizing: border-box;
	padding: 10vh 0;
	gap: 2vh;
}

#Contact .text-formulaire{
	width: min(80%, 70ch);
	color: var(--blanc);
}

form {
	color: var(--gris);
	background-color: hsl(210, 5%, 92%);
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	gap: 40px;
	padding: 40px min(80px , 5%);
	box-sizing: border-box;
	width: 60%;
}

form div {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	width: 100%;
	gap: 40px 5%;
}

form div input {
	flex:1 1 40%;
}

form input[type="text"] {
	width: 39%;
}

form input,
form textarea {
	padding: 15px;
	border: 0;
	border-radius: 8px;
	font-family: sans-serif;
	resize: none;
	box-shadow: inset 3px 3px 3px hsl(210, 6%, 80%), 
				inset -4px -4px 4px hsl(0, 0%, 98%);
	transition: all .35s ease;
	background-color: hsl(210, 5%, 94%);
}

form input:focus,
form textarea:focus {
	outline: 0;
	box-shadow: inset 1px 1px 2px hsl(210, 6%, 80%),
				inset -1px -1px 2px hsl(0, 0%, 98%);
}

form input::placeholder,
form textarea::placeholder {
	color: var(--gris);
	overflow: hidden;
	transition: inherit;
}

form input:focus::placeholder,
form textarea:focus::placeholder {
	opacity: 0;
	transform: translateX(-3em);
}

form button {
	border: 0;
	background-color: hsl(210, 5%, 95%);
	color: var(--noir);
	padding: 1.2em 2em;
	border-radius: 20px;
	box-shadow: -2px -2px 10px var(--blanc),
				2px 2px 10px hsl(227, 15%, 76%);
	align-self: center;
	transition: all .2s ease;
}

form button:active {
	box-shadow: inset -1px -1px 5px var(--blanc),
				inset 1px 1px 5px hsl(227, 15%, 76%);
	transform: scale(0.95);
}

input[type="date"] {
	padding: 15px;
}

input[type=date]::-webkit-datetime-edit {
    color: var(--gris);
	cursor: text;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover {
	cursor: pointer;
}

.wrapper-form {
	margin: 2px;
	display: flex;
	justify-content: space-between;
	border-radius: 25px;
	width: min(90%, 50em);
	box-shadow: 7px -7px 20px 5px hsla(0, 0%, 0%, 0.5);
}

.switch {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
	width: 40%;
	background: url(../Images/etudiant.jpg) center;
	background-size: cover;
	border-radius: 0 25px 25px 0;

}

.next-form .switch {
	border-radius: 25px 0 0 25px;
	background: url(../Images/calendrier.jpg) center;
	background-size: cover;
}

.switch button {
	box-shadow: -2px -2px 7.5px var(--gris),
				2px 2px 7.5px hsl(227, 15%, 66%);
	border: 0;
	padding: 1.5em min(4em, 5%);
	border-radius: 40px;
	transition: all .2s ease;
}

.switch button::after{
	content: 'Prendre un rendez-vous';
}

.next-form .switch button::after{
	content: 'Contactez des étudiants';
}

.switch button:active {
	box-shadow: inset -2px -2px 5px var(--gris),
				inset 2px 2px 5px hsl(227, 15%, 66%);
	transform: scale(0.95);
}

#students {
	border-top-left-radius: 25px;
	border-bottom-left-radius: 25px;
	box-shadow: inset -10px 0px 15px -8px rgba(0,0,0,0.6);
}

#rdv {
	border-top-right-radius: 25px;
	border-bottom-right-radius: 25px;
	opacity: 0;
	visibility: hidden;
	display: none;
	box-shadow: inset 10px 0px 15px -8px rgba(0,0,0,0.6);
}

.next-form #students {
	opacity: 0;
	visibility: hidden;
	display: none;
}

.next-form #rdv {
	opacity: 1;
	visibility: visible;
	display: flex;
}

/***************Media Queries***************/

@media (max-width: 970px){
	#Info img:nth-child(2){
		display: none;
	}
	#Info img {
		margin: 0;
		width: 20%;
	}
}

@media (max-width: 460px){
	#Info img{
		display: none;
	}
}