@import url('https://fonts.googleapis.com/css?family=Open+Sans:300');

/* === Quelques généralités === */

* {
	font-family: 'Open Sans', sans-serif;
	box-sizing: border-box;
}

html { height: 100%; }

body {
	margin: 0;
	height: 100%;
}

/* === Nécessaire au <footer> sticky === */

.page-wrap {
	min-height: 100%;
	margin-bottom: -92px; /* égal à l'inverse de la hauteur du <footer> */ 
}

.page-wrap:after {
	content: "";
	display: block;
}

.site-footer,
.page-wrap:after {
	height: 92px; /* hauteur du <footer> */
}

/* === En-tête du site - Logo === */

header {
	background-color: #f1f1f1;
	padding: 20px;
	text-align: center;
}

header img.logo {
	width: 300px;
	height: 155px;
}

/* === Barre de navigation supérieure et sticky === */

nav {
	overflow: hidden;
	background-color: #333;
	top: 0;
	width: 100%;
	z-index: 10;
}

.topnav { height: 50px; }

nav a {
	float: left;
	display: block;
	color: #f2f2f2;
	background-color: #333;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
	font-size: 17px;
	z-index: 2;
	transition: 0.2s;
	border: none;
}

nav a:not(.active):hover {
	background-color: #ddd;
	color: black;
}

nav a.active {
	background-color: #c0392b;
	color: white;
	box-shadow: 10px 0 10px 0 rgba(0, 0, 0, 0.5), -10px 0 10px 0 rgba(0, 0, 0, 0.5);
	z-index: 50;
	position: relative;
}

.topnav .icon {	display: none; }
.topnav .icon::before { content: "☰"; }
.topnav.open .icon::before { content: "╳"; }
.small-logo img { display: none; }

/* === Bouton de retour en haut de page === */

.scroll-btn {
	position: fixed;
	bottom: 20px;
	right: -200px;
	z-index: 666;
	color: white;
	background-color: rgb(192, 57, 43);
	cursor: pointer;
	border: none;
	padding: 10px;
	border-radius: 8px;
	font-size: 16px;
	transition: 0.3s;
}

.sticky .scroll-btn { right: 20px; }


/* === Bordures rouges de décoration === */
main, footer { border-top: 8px solid #c0392b; }

@media screen and (max-width: 750px) {
	
	/* === En-tête sur les petits périphériques === */
	header { display: none; }
	
	/* === Barre de navigation sur les petits périphériques === */
	.topnav a.icon {
		display: block;
		position: absolute;
		right: 0;
		top: 0;
		width: 44px;
		text-align: center;
		padding: 10px 0;
		font-size: 22px;
		height: 51px;
		float: right;
		z-index: 3;
	}

	body.safari .topnav a.icon { height: 50px; }

	body:not(.safari) .topnav { position: fixed; }	
	body:not(.safari) main { border-top: 58px solid #c0392b; }

	.small-logo img {
		display: block;
		padding: 2px 4px;
		height: 50px;
		padding-right: 800px;
		background-color: #333;
		position: relative;
		z-index: 3;
	}

	.topnav .nav_links {
		position: fixed;
		top: -500px;
		left: 0;
		right: 0;
		display: block;
		z-index: 2;
		transition: 0.5s;
	}
	
	.topnav.open .nav_links { top: 50px; }	
	.topnav .nav_links a { float: left; width: 50%;	}
	
	@media screen and (max-width: 500px) {
		.topnav .nav_links a { float: none; width: 100%; }
	}
}

@media screen and (min-width: 750px) {
	
	/* === Navigation lorsque celle ci est sticky === */
	.sticky .topnav { position: fixed; }
	.sticky main { border-top: 58px solid #c0392b; }
}

.container {
	padding: 10px 20px;
	max-width: 1200px;
	margin: auto;
}

/* === Design des biographies des professeurs === */

.prof hr {
	height: 1px;
	border: none;
	background-color: lightgrey;
}

.prof img {
	max-width: 100%;
	max-height: 400px;
	margin: auto;
	display: block;
}

.prof-right h3 { text-align: right; }

@media screen and (min-width: 700px) {
	/* === Changement de la mise en page sur les grands périphériques === */
	
	.prof-right .photo {
		order: 2;
	}
	
	.prof-left, .prof-right {
		display: flex;
		align-items: center;
	}
	
	.prof img { max-width: 300px; }
	.prof > div > div { padding: 10px; }
}

/* === Aspect du <footer> === */

footer {
	background-color: #333;
	color: #f2f2f2;
	text-decoration: none;
	font-size: 16px;
	text-align: center;
}

footer div {
	top: 50%;
	transform: translateY(-50%);
}

footer a {
	color: #f2f2f2;
	border-bottom: 1px dotted #f2f2f2;
	transition: 0.3s;
}

footer a:hover {
    color: #c2c2c2;
}

/* =-=-=-=-=-= CLASSES DE RACCOURCI (helpers) =-=-=-=-=-=-= */

.float-right { float: right; }
.float-left { float: left; }

.align-center, .ql-align-center { text-align: center; }
.align-left, .ql-align-left { text-align: left; }
.align-right, .ql-align-right { text-align: right; }
.align-justify, .ql-align-justify { text-align: justify; }

.alinea { text-indent: 30px; }

.hidden { display: none; }

.line {
	height: 8px;
	border: none;
	padding: 0;
	margin: 0;
}

.rededm { background-color: #c0392b; }

table td.center { text-align: center; }
table td.right { text-align: right; }

/* =-=-=-=-=-= STYLE DES BALISES EXISTANTES =-=-=-=-=-= */

noscript {
	display: block;
	text-align: center;
	font-size: 20px;
	color: #333;
}

a {
	color: black;
	text-decoration: none;
	border-bottom: 1px dotted black;
}

blockquote {
	display: block;
	width: auto;
	padding: 4px 8px;
	border-left: 4px solid #CCC;
}

blockquote p {
	margin: 0;
	margin-bottom: 4px;
}

blockquote p::before { content: "« "; }
blockquote p::after { content: " »"; }
cite::before { content: "- "; }

table { border-collapse: collapse; }

table caption {
	text-decoration: underline;
	padding-bottom: 8px;
}

table:not(.prof-table) td, th {
	border: 1px solid #333;
    padding: 8px;
}

table tr { background-color: #fff; }
table tr:nth-child(even) { background-color: #f2f2f2; }
table.hoverable tr:hover { background-color: #ddd; }

table th {
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
    background-color: #c0392b;
    color: white;
}

kbd, code, samp, pre { font-family: monospace; }

figure { display: inline-block; }
figure img { vertical-align: top; }
figure figcaption { text-align: center; }

button,
input[type=button],
input[type=submit],
input[type=reset],
a.btn,
.inputfile + label {
	color: white;
	background-color: rgb(192, 57, 43);
	cursor: pointer;
	border: none;
	padding: 10px;
	border-radius: 8px;
	font-size: 16px;
	margin: 6px;
	text-decoration: none;
}

button img,
a.btn img,
.inputfile + label img {
	width: 24px;
	margin-right: 6px;
	vertical-align: -25%;
}

button:disabled,
input[type=button]:disabled,
input[type=submit]:disabled,
input[type=reset]:disabled {
	cursor: not-allowed;
	background-color: grey;
}

input[type=text],
input[type=password],
input[type=url],
input[type=email],
input[type=tel],
input[type=search],
input[type=number],
input[type=date],
input[type=month],
input[type=week],
input[type=datetime],
input[type=datetime-local],
textarea {
	border: 2px solid grey;
	padding: 6px;
	border-radius: 8px;
	font-size: 14px;
	transition: 0.3s;
	margin: 6px;
}

textarea { vertical-align: top; }

input[type=text]:focus,
input[type=password]:focus,
input[type=url]:focus,
input[type=email]:focus,
input[type=tel]:focus,
input[type=search]:focus,
input[type=number]:focus, 
input[type=date]:focus,
input[type=month]:focus,
input[type=week]:focus,
input[type=datetime]:focus,
input[type=datetime-local]:focus,
textarea:focus {
    border: 2px solid #555;
}

input[type=checkbox], input[type=radio] { width: 20px; }

input.is-valid { border: 2px solid green; }
input.is-error { border: 2px solid red; }

select {
	padding: 6px 14px;
    border: none;
    border-radius: 8px;
    background-color: #fff;
	font-size: 14px;
	border: 1px solid grey;
	margin: 6px;
	transition: 0.3s;
}

select:focus { border-radius: 8px 8px 0 0; }

input[type=color] {
	cursor: pointer;
	border: none;
	padding: 0px;
	border-radius: 3px;
	margin: 6px;
}

/* ====================== */
/* Notifications d'alerte */
/* ====================== */

.alert{
  padding: 10px;
  margin: 20px 0;
  border-radius: 4px;
  text-align: left;
}

.alert-success{
  border: 1px solid #2ecc71;
  color: #124f2c;
  background-color: #a8ebc4;
}

.alert-danger{
  border: 1px solid #e74c3c;
  color: #7b190f;
  background-color: #f8c9c4;
}

.alert-warning{
  border: 1px solid #f1c40f;
  color: #614f06;
  background-color: #f9e8a0;
}

.alert-info{
  border: 1px solid #3498db;
  color: #124364;
  background-color: #b6daf2;
}

.alert .close {
	float: right;
	cursor: pointer;
	transition: 0.2s;
}

.alert .close:hover { filter: brightness(20%); }

#dates {
	border-collapse: collapse;
    width: 100%;
}

#dates td, #dates th {
	border: 1px solid #333;
    padding: 8px;
}

#dates tr:nth-child(even) { background-color: #f2f2f2; }
#dates tr:hover { background-color: #ddd; }

#dates th {
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
    background-color: #c0392b;
    color: white;
}

.card-container {
	float: left;
	width: 25%;
}

.card {
	padding: 10px;
	border: 1px solid black;
}

.card span { display: block; }

.cards,
.cards > .card-container {
	padding: 10px;
}

.cards:after {
	content: "";
	display: table;
	clear: both;
}

@media screen and (max-width: 850px) {
	.card-container {
		width: 50%;
	}
}

@media screen and (max-width: 600px) {
	.card-container {
		width: 100%;
	}
}