/* POLICES
******************************************************************************/

@font-face {
	font-family: 'ReplicaBold';
	src:         url('../fonts/ReplicaStdBold.otf') format('truetype');
	font-weight: normal;
	font-style:  normal;
	}

@font-face {
	font-family: 'ReplicaStdRegular';
	src:         url('../fonts/ReplicaStdRegular.otf') format('truetype');
	font-weight: normal;
	font-style:  normal;
	}

@font-face {
	font-family: 'NimbusSanNov-Reg';
	src:         url('../fonts/NimbusSanNovT.ttf');
	}

@font-face {
	font-family: 'NimbusSanNov-Bol';
	src:         url('../fonts/NimbusSanNovT_Bold.ttf');
	}


/* STRUCTURE
******************************************************************************/
#wrapper {
	display:         flex;
	justify-content: space-between;
	}

#sidebar {
	background: #f0f0f0;
	min-height: 100vh;
	height:     100%;
	width:      20vw;
	}

#sidebar #logo {
	display:         block;
	width:           18vw;
	min-height:      5vw;
	margin:          1vw;
	background:      url(../img/logo-psn.png) no-repeat;
	background-size: contain;
	}

#sidebar #title {
	margin:         1vw;
	width:          18vw;
	text-align:     left;
	display:        flex;
	flex-direction: column;
	font-size:      2vw;
	text-transform: uppercase;
	font-family:    'ReplicaBold', sans-serif;
	color:          #E62A35;
	}

#sidebar #picto {
	width:           12vw;
	height:          12vw;
	margin:          1vw 3vw;
	background:      url(../img/picto_rdv_psn.png) no-repeat;
	background-position: center center;
	background-size: contain;
	}

#content {
	width:  74vw;
	margin: 1vw;
	}

#aide {
	margin:      30px 1vw;
	line-height: 1.3em;
	}

#steps {
	width:           100%;
	display:         flex;
	justify-content: center;
	}

#steps .numbers {
	display: none;
	}

#steps li {
	margin: .5em;
	color:  #999
	}

#steps li.selected {
	font-family: NimbusSanNov-Bol;
	color:       black;
	}

.psn-link {
	display: block;
	width: fit-content;
	 margin: 5em auto;
	background:   #E62A35;
	color:white;
	text-decoration: none;
	padding: .5em 2em;
	text-align: center;
	border-radius:   8px;
	padding:         .5em;
	font-weight: 900;
	}

.psn-link.mobile {
	display: none;
	}

/* MOBILE */
@media screen
and (min-device-width: 320px)
and (max-width: 768px) {
	
	#wrapper {
		flex-direction: column;
		}
	
	#sidebar {
		width:      100vw;
		min-height: auto;
		height:     auto;
		}
	
	#sidebar #logo {
		width:  90vw;
		height: 15vw;
		margin: 2vw 5vw;
		}
	
	#sidebar #title {
		flex-direction: row;
		width:          90vw;
		}
	
	#sidebar #picto {
		width:  20vw;
		height: 20vw;
		justify-self: center;
		align-self: center;
		}
	
	#sidebar #slogan {
		display:         flex;
		flex-direction:  column;
		justify-content: center;
		font-size: 24px;
		}
	
	#content {
		width:      90vw;
		margin:     5vw;
		min-height: 80vh;
		}
	
	#steps li {
		display:       none;
		margin-bottom: 1em;
		}
	
	#steps li.selected {
		display:    inline-block;
		width:      100%;
		text-align: center;
		}
	
	#steps .numbers {
		display:      inline-block;
		margin-right: .5em;
		}
	
	#aide {
		margin:      30px 5vw;
		line-height: 1.3em;
		}
	
	.psn-link.desktop {
		display: none;
		}
	
	.psn-link.mobile {
		display: block;
		}
		
	}

body {
	color:       #000;
	font-family: 'NimbusSanNov-Reg', sans-serif;
	}

.session {
	background:      #E62A35;
	color:           white;
	padding:         .2em .2em;
	border-radius:   4px;
	margin:          2px 0;
	display:         flex;
	flex-direction:  column;
	justify-content: center;
	text-decoration: none;
	transition:      .2s all ease;
	}

.session:hover {
	box-shadow: 0 5px 25px rgba(0, 0, 0, .3);
	transform:  scale(1.2);
	}

.session .hours {
	font-size:     75%;
	margin-bottom: 4px;
	}

.session .person {
	font-weight: bold;
	font-size:   90%;
	}

/* MOBILE */
@media screen
and (min-device-width: 320px)
and (max-width: 768px) {
	
	.session {
		margin-bottom:   10px;
		flex-direction:  row;
		justify-content: space-between;
		padding:         .3em;
		}

	.session:hover {
		transform:  scale(1);
	}
	
	.session .hours {
		font-size:    100%;
		flex:         0 0 16%;
		border-right: 1px solid white;
		}
	
	.session .person {
		font-size: 100%;
		flex:      0 0 80%
		}
	
	h3.month {
		font-size:      6vw;
		text-transform: uppercase;
		font-family:    'ReplicaBold', sans-serif;
		margin-bottom:  1em;
		}
	
	h4.day {
		font-size:      4vw;
		text-transform: uppercase;
		font-family:    'ReplicaStdRegular', sans-serif;
		margin-bottom:  1em;
		}
	}

/* CALENDRIER
************************************/
#calendrier_mobile {
	display: none
	}

#calendrier_desktop {
	display: block
	}

select {
	width:       18vw;
	margin:      1vw;
	font-size:   100%;
	font-family: 'ReplicaStdRegular', sans-serif;
	}


/* MOBILE */
@media screen
and (min-device-width: 320px)
and (max-width: 768px) {
	#calendrier_mobile {
		display: block
		}
	
	#calendrier_desktop {
		display: none
		}
	
	select {
		width:  90vw;
		margin: 1vh 5vw;
		}
	}


/* RESERVATIONS
************************************/

#btn-bar {
	width:           50vw;
	display:         flex;
	justify-content: space-between;
	}

.btn {
	font-size:       100%;
	color:           white;
	font-weight:     900;
	margin:          2em 0;
	display:         inline-block;
	justify-content: flex-start;
	width:           10em;
	text-align:      center;
	border-radius:   8px;
	padding:         .5em;
	text-decoration: none;
	border:          0;
	
	}

#btn-retour {
	background: grey;
	}

#btn-envoyer {
	background: #E62A35;
	}

#btn-ajouter {
	background: #E62A35;
	width:      18em;
	}

label {
	font-family:    'ReplicaBold', sans-serif;
	text-transform: uppercase;
	display:        block;
	margin:         2em 0 .5em;
	}

input[type=text], input[type=email], textarea {
	font-size: 100%;
	width:     50vw;
	padding:   .5em;
	border:    1px solid silver
	}

textarea {
	height: 4em;
	}

#resume {
	font-size:   2vw;
	/*text-transform: uppercase;*/
	font-family: 'ReplicaStdRegular', sans-serif;
	margin:      2em 0 2em;
	width:       50vw;
	line-height: 1.2em;
	}

#resume strong, #confirmation strong {
	font-family: 'ReplicaBold', sans-serif;
	}

.captchaimage {
	float:      left;
	margin-top: 10px;
	}

input.captchafield {
	width:  10em;
	margin: 1.5em;
	}

/* MOBILE */
@media screen
and (min-device-width: 320px)
and (max-width: 768px) {
	input[type=text], textarea {
		width: 80vw;
		}
	
	.btn {
		margin: 0 10px;
		}
	
	#btn-bar {
		margin: 2em 0;
		width:  85vw;
		}
	
	#resume {
		font-size: 24px;
		width:     90vw;
		}
	
	input.captchafield {
		width: 7em;
		}
	}

/* MESSAGE
************************************/
#message {
	height:          70vh;
	display:         flex;
	flex-direction:  column;
	justify-content: center;
	}

#message h3 {
	font-size:      2vw;
	text-transform: uppercase;
	font-family:    'ReplicaBold', sans-serif;
	margin-bottom:  2em;
	width:          50%;
	}

#message h4 {
	font-size: 2vw;
	width:     50%;
	}

/* MOBILE */
@media screen
and (min-device-width: 320px)
and (max-width: 768px) {
	#message h3 {
		font-size:  6vw;
		width:      100%;
		text-align: center;
		}
	
	#message h4 {
		font-size:  6vw;
		width:      100%;
		text-align: center;
		}
	}