/* GLOBAL */

body {-webkit-text-size-adjust: 100%;}

body {
	background: #fff;
	margin: 4% 0;
	padding: 0;
	font-size: 100%;
	font-family: "Roboto",sans-serif;
	font-weight: 400;
	font-style: normal;
	color: #000;
}

div, span, p, img, object {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
}

a, a:hover {
	color: #000;
	text-decoration: none;
	outline: none;
}

/* STRUCTURE */

#wrapper {width: 80%; margin: 0 auto; padding: 0;}

/* CALENDRIER */

.bloc-jour {display: inline-block; width: 18%; margin: 0 1% 2% 1%; padding: 4% 2%; vertical-align: top; text-align: center; border: 1px solid #000; background: whitesmoke;}
.jour-semaine {font-size: 1.2em; letter-spacing: 0.5px;}
.jour {font-size: 2.5em; font-weight: 500;}
.mois {font-size: 1.5em; letter-spacing: 0.5px;}
.bloc-active {background: steelblue !important; border: 1px solid steelblue !important;}
.bloc-active a {color: #fff !important;}


/* BOX LISTE DE MOTS */

.box-mots-overlay {
	z-index: 999;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0, 0, 0, 0.7);
	visibility: visible;
	opacity: 1;
}

.box-mots-overlay:target {
	visibility: hidden;
	opacity: 0;
	display: none;
}

.box-mots-container {
	position: relative;
	margin: 50px auto;
	padding: 40px 40px 50px 40px;
	background: #fff;
	width: 240px;
	max-height: 80% !important;
	overflow-y: scroll;
}

.box-mots-nouveau {text-transform: uppercase; color: indianred; font-size: 0.8em; letter-spacing: 1px; padding-bottom: 10px;}
.box-mots-titre {font-size: 1.2em; padding-bottom: 10px;}
.box-mots-mot {font-size: 1.7em; line-height: 1.3;}

.box-mots-close {padding-top: 40px;}
.box-mots-close a {display: inline; padding: 10px 30px; font-weight: 600; text-transform: uppercase; background: steelblue; color: #fff;}

/* MOT DE DEMAIN AU FOND */

#mot-demain-fond {display: block; width: 100%; text-align: center; margin: 40px auto 60px auto;}
.mot-demain-txt {font-size: 17px; letter-spacing: 0.5px; padding-bottom: 10px;}
.mot-demain-mot {font-size: 34px; font-weight: 600;}

/* CARTES */

.carte-bloc {
  display: inline-block;
  width: 48%;
  margin: 1%;
  height: 300px;
  perspective: 600px;
}

.carte {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
  transform-style: preserve-3d;
  transform-origin: center right;
  transition: transform 1s;
}

.carte.is-flipped {
  transform: translateX(-100%) rotateY(-180deg);
}

.carte-face {
  position: absolute;
  width: 92%;
  height: 100%;
  display: grid;
  align-items: center;
  color: white;
  text-align: center;
  padding: 0 4%;
  font-weight: 600;
  font-size: 34px;
  line-height: 1.2;
  backface-visibility: hidden;
}

.carte-face-front {
  background: steelblue;
}

.carte-face-back {
  background: lightsteelblue;
  transform: rotateY(180deg);
}

/* REVENIR */

#revenir {display: block; width: 100%; text-align: center; margin: 60px auto 80px auto;}
#revenir a {background: whitesmoke url(../img/menu.png) 20px center no-repeat; background-size: 24px; padding: 20px 20px 20px 58px; text-align: center; border: 1px solid #000; font-size: 1.4em; letter-spacing: 0.5px;}

/* ARCHIVES */

#archives {display: block; width: 100%; text-align: center; margin: 60px auto 80px auto;}
#archives a {background: whitesmoke url(../img/menu.png) 20px center no-repeat; background-size: 24px; padding: 20px 20px 20px 58px; text-align: center; border: 1px solid #000; font-size: 1.4em; letter-spacing: 0.5px;}

/* MEDIA QUERIES */

@media only screen and (max-width: 767px) {

	#wrapper {width: 90% !important;}
	
	.bloc-jour {width: 26% !important;}
	.jour {font-size: 2em !important;}
	.mois {font-size: 1.3em !important;}
	
	.box-mots-container {
		margin: 30px auto !important;
		padding: 20px 20px 30px 20px !important;
		width: 94% !important; max-width: 240px !important;
	}
	
	.carte-bloc {width: 98% !important;}
	
	#revenir {margin: 40px auto 60px auto !important;}
	#revenir a {background: whitesmoke url(../img/arrow.png) 10px center no-repeat !important; background-size: 20px !important; padding: 10px 10px 10px 44px !important; font-size: 1.1em !important;}	
}