/*
Theme Name: L'hôpital des poupées
Theme URI: http://hopitaldespoupees.ca
Author: Olivier Larochelle, Valérie Motard et l'équipe de Wordpress
Author URI: https://olivierlarochelle.com
Description: Thème officiel du microsite l'Hôpital des poupées
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

* {
	box-sizing:border-box;
}
html,
body {
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	color:#dadada;
	font-size:14px;
	-moz-osx-font-smoothing:grayscale;
	-webkit-font-smoothing:antialiased;
	font-family:'Nunito Sans', sans-serif;
}
body {
	background:#dadada;
	background:linear-gradient(to right, #dadada 0%,#f6f6f6 100%);
	background:-moz-linear-gradient(left, #dadada 0%, #f6f6f6 100%);
	background:-webkit-linear-gradient(left, #dadada 0%,#f6f6f6 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dadada', endColorstr='#f6f6f6',GradientType=1 );
}
a,
a:hover,
a:focus,
a:visited {
	border:0;
	outline:0;
	text-decoration:none;
}

/* MISE EN PAGE */

#page {
	position:relative;
	width:100%;
	min-height:100%;
	overflow:hidden;
	background-color:#101516;
}
body.home #page {
	background-size:cover;
	background-repear:no-repeat;
	background-image:url('images/accueil.jpg');
}
#contenu {
	height:100%;
	width:100%;
	overflow:hidden;
}
#boutonmenu {
	position:fixed;
	z-index:800;
	overflow:hidden;
	top:0; left:0;
	width:72px;
	height:72px;
	cursor:pointer;
	text-indent:-9999px;
	background-size:contain;
	background-color:#212e33;
	background-repear:no-repeat;
	background-image:url('images/menu.png');
	border-bottom:2px solid #101516;
}
body.logged-in #boutonmenu {
	top:32px;
}

/* MENU PRINCIPAL */

#menu {
	position:fixed;
	z-index:900;
	top:0; left:0;
	width:100%;
	height:100%;
	background-size:cover;
	background-color:#009db3;
	background-repear:no-repeat;
	background-image:url('images/nav.jpg');
}
#menu ul {
	display:block;
	overflow:hidden;
	list-style:none;
	height:100%;
	width:50%;
	margin:0;
	padding:52px 0 0 76px;
}
#menu li {
	float:left;
	clear:left;
}
#menu li a,
#menu li a:visited {
	display:inline-block;
	padding:0.8rem;
	cursor:pointer;
	color:#fff;
	font-weight:400;
	font-size:2.4rem;
	font-size:5.2vmin;
	line-height:1.2;
}
#menu li a:hover,
#menu li a:active {
	font-weight:900;
}
#menu li.inactif a:hover,
#menu li.inactif a:active {
	cursor:default;
	font-weight:400;
}
#menu li.inactif ul li a:hover,
#menu li.inactif ul li a:active {
	cursor:pointer;
	font-weight:900;
}
#menu ul ul {
	display:none;
	position:absolute;
	top:0; right:0;
	height:100%;
	width:50%;
	margin:0;
	padding:6% 4%;
	background:rgba(23,65,86,0.5);
}
#menu ul ul ul {
	position:relative;
	height:auto;
	width:auto;
	margin:0;
	padding:0 0 0 1.2rem;
}
#menu ul ul ul li a {
	font-size:2rem;
	font-size:4.6vmin;
}
#menu .fermer {
	display:block !important;
	position:absolute;
	overflow:hidden;
	top:56px;
	right:4%;
	width:46px;
	height:46px;
	cursor:pointer;
	background-size:contain;
	background-repear:no-repeat;
	background-image:url('images/fermer.png');
}
#menu .retour {
	position:absolute;
	top:64px;
	left:28px;
	width:46px;
	height:46px;
	line-height:46px;
	text-align:center;
	font-size:44px;
	cursor:pointer;
}
#menu .retour a {
	display:block;
	position:absolute;
	top:0; right:0; bottom:0; left:0;
	background:url('images/retour.png') 0 -46px no-repeat;
}
#menu .retour a:hover {
	background-position:0 0;
}

/* ACCUEIL */

#signature {
	float:left;
	width:32%;
	min-width:320px;
	margin:3rem 3rem 3rem 28%;
}
#signature img {
	width:100%;
	height:auto;
	max-width:560px;
	max-height:320px;
}
#signature h1,
#signature .message {
	height:1.2rem;
	margin:0;
	text-indent:-9999px;
}	

/* PIED DE PAGE */

#pieddepage {
	position:relative;
	width:100%;
	overflow:hidden;
	background:#dadada;
}
#widgets {
	float:right;
	border-left:#b2b2b2;
}
.widget {
    float:right;
    margin:3rem;
    padding:0 6rem;
	border-left: 1px solid #d2d2d2;
}
.widget-title {
	margin:0;
	color:#878787;
	font-size:1em;
	font-weight:700;
	text-align:left;
}
.textwidget {
	color:#5d8290;
	font-size:1em;
	font-weight:400;
}
.textwidget p {
	margin:0.8em 0 0;
}
.textwidget a,
.textwidget a:visited {
	color:#5d8290;
	text-decoration:none;
}
.textwidget a:hover,
.textwidget a:active {
	color:#dd505f;
}
.textwidget strong {
	font-size:1.33em;
	font-weight:700;
}

/* MÉDIAS SOCIAUX */

.medias {
	float:left;
	clear:none;
    margin:3rem 0 3rem 3rem;
    padding:0 0 0 6rem;
}
.medias ul {
	margin:0;
	padding:0;
	list-style:none;
	text-align:left;
}
.medias li {
	display:inline-block;
	position:relative;
	width:72px;
	height:72px;
	margin:2.4rem 0.8rem 0;
	cursor:pointer;
}
.medias a {
	display:block;
	position:absolute;
	top:0; right:0;
	bottom:0; left:0;
	text-indent:-9999px;
}
.medias li.twitter {
	background-size:contain;
	background-repear:no-repeat;
	background-image:url('images/twitter.png');
}
.medias li.facebook {
	background-size:contain;
	background-repear:no-repeat;
	background-image:url('images/facebook.png');
}
.medias li.courriel {
	background-size:contain;
	background-repear:no-repeat;
	background-image:url('images/courriel.png');
}
@media screen and (max-width: 760px), (orientation:portrait) {
	.widget,
	.medias {
		margin:3rem 0;
		padding:0 3rem;
	}
	.medias li {
		display:inline-block;
		position:relative;
		width:56px;
		height:56px;
		margin:2.4rem 0.4rem 0;
		cursor:pointer;
	}
}

/* CRÉDITS ET DROITS D'AUTEURS */

#minuscules {
	float:left;
	width:100%;
	color:#878787;
	font-size:0.86em;
	font-weight:400;
}
#minuscules a,
#minuscules a:visited {
	color:#878787;
	font-weight:700;
}
#minuscules a:hover,
#minuscules a:active {
	color:#dd505f;
}
#minuscules div {
	padding:0.6rem 1.2rem;
}
#minuscules .credits {
	float:right;
}		
#minuscules .droits {
	float:left;
}
#pieddepage.avecnotes #minuscules .droits {
	margin-left:72px;
}

/* NOTES POUR L'ENSEIGNANT */

#boutonnotes {
	position:fixed;
	overflow:hidden;
	z-index:500;
	top:0;
	left:0;
	width:72px;
	height:100%;
	background:#2c3d44;
}
#boutonnotes .marge {
	position:fixed;
	z-index:510;
	cursor:pointer;
	top:0; left:0;
	width:72px;
	height:100%;
}
#boutonnotes .indication {
	position:relative;
	top:50%;
	left:-94px;
	height:72px;
	width:260px;
	line-height:72px;
	margin-top:-50%;
	transform:rotate(-90deg);
	-ms-transform:rotate(-90deg);
	-moz-transform:rotate(-90deg);
	-webkit-transform:rotate(-90deg);
}
#boutonnotes .indication span {
	display:inline-block;
	white-space:nowrap;
	height:72px;
	line-height:72px;
	font-size:1.4rem;
	font-weight:700;
	padding-left:72px;
	background:url('images/notes.png') top left no-repeat;
}
#notes {
	cursor:pointer;
	position:fixed;
	z-index:1000;
	top:0;
	left:-760px;
	height:100%;
	width:720px;
	max-width:100%;
	padding:3.2rem;
	font-size:1.2em;
	line-height:1.4;
	background:#2c3d44;
	overflow-x:hidden;
	overflow-y:auto;
	box-shadow: 4px 0px 16px 0px rgba(0,0,0,0.2);
	-moz-box-shadow: 4px 0px 16px 0px rgba(0,0,0,0.2);
	-webkit-box-shadow: 4px 0px 16px 0px rgba(0,0,0,0.2);
}
body.logged-in #notes {
	padding-top:5.2rem;
}
#notes h3 {
	display:inline-block;
	margin:1.2rem 0 0.6rem;
	color:#dd505f;
	font-size:1.4em;
	font-weight:900;
	text-align:left;
	text-transform:uppercase;
	line-height:1.2;
}
#notes a {
	color:#dadada;
	font-weight:900;
}
#notes a:hover {
	color:#dd505f;
}
#notes a[href$=".pdf"] {
	display:inline-block;
	margin:1.6rem 0 3.2rem;
	padding:0.6rem 1.6rem;
	color:#dadada;
	text-align:center;
	background:#dd505f;
}
#notes a[href$=".pdf"]:hover {
	background-color:#dadada;
	color:#dd505f;
}
#notes h2 {
	text-align:left;
	font-weight:700;
	font-size:1.4rem;
	text-transform:uppercase;
}
#notes h3 a {
	color:#dd505f;
}
#notes h3 a:hover {
	color:#dadada;
}
#notes p {
	font-weight:400;
	margin:0 0 1.2rem;
	max-width:96%;
}
#notes small {
	display:inline-block;
	position:relative;
	bottom:0.6rem;
	width:100%;
	font-weight:700;
}
#notes ul {
	margin:0;
	padding:0.6rem 1.6rem;
}
#notes ul ul {
	padding-left:3.2rem;
}
#notes li {
	margin:0.4em 0;
}
#notes .indication {
	position:absolute;
	top:calc(50% + 72px);
	right:0;
	height:72px;
	width:72px;
	transform:rotate(90deg);
	-ms-transform:rotate(90deg);
	-moz-transform:rotate(90deg);
	-webkit-transform:rotate(90deg);
	background:url('images/notes.png') top left no-repeat;
}



#contenu.avecnotes .section {
	padding-left:72px;
}
#contenu.avecsections .section {
	padding-right:56px;
}

/* SECTIONS DE CONTENU POUR LES PAGES */

.section {
	position:relative;
	overflow:hidden;
	height:100%;
	width:100%;
	margin:0;
	padding:0;
}
#ptitspicots {
	position:fixed;
	z-index:700;
	top:50%;
	right:0;
	height:100%;
	width:72px;
	margin:0 1.2rem 0 0;
	padding:0;
	list-style:none;
}
#ptitspicots li {
	display:inline-block;
	cursor:pointer;
	float:right;
	clear:right;
	border-radius:50%;
	margin:0 1rem 1rem;
}
#ptitspicots li span {
	display:inline-block;
	overflow:hidden;
	width:28px;
	height:28px;
	padding:6px;
	border-radius:50%;
}
#ptitspicots li span em {
	display:inline-block;
	width:16px;
	height:16px;
	border-radius:50%;
	background:#f6f6f6;
}
#ptitspicots li span.actif em,
#ptitspicots li:hover span em {
	background:#00b0b5;
}
#ptitspicots li span.actif {
	padding:4px;
	border:2px solid #00b0b5;
}

/* GALERIES PHOTOS */

#meteor-slideshow {
	max-width:90%;
	margin:0 auto;
	border:1px solid #222;
}
#meteor-buttons {
	position:absolute;
	bottom:-32px;
}
#meteor-buttons a {
	display:inline-block;
	text-align:center;
	float:none;
	width:42px;
	height:42px;
	background:url('images/boutons-slideshow.png') 0 0 no-repeat;
}
#meteor-buttons a:hover {
	background-position:0 -42px;
}
#meteor-buttons a.activeSlide {
	cursor:default;
	background-position:0 -82px;
}

/* LECTEUR AUDIO */

.mejs-container {
	margin:0 auto;
	width:56% !important;
	min-width:320px !important;
	max-width:640px !important;
}
.mejs-controls .mejs-time-rail .mejs-time-current {
    background:#00b0b5 !important;
}




/*


span {
	display: inline-block;
	overflow: hidden;
	width: 28px;
	height: 28px;
	padding: 6px;
	border-radius: 50%;
	}
span actif {
	padding: 4px;
	border: 2px solid #00b0b5;
}
boutons {
	display: inline-block;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #f6f6f6;
	
}




*/



/* PAGES */

.fond {
	position:absolute;
	top:0; right:0;
	bottom:0; left:0;
	z-index:100;
	background-size:cover;
	background-position:top center;
}
.fond.tag-haut.tag-droite { background-position:top right; }
.fond.tag-haut.tag-gauche { background-position:top left; }
.fond.tag-bas { background-position:bottom center; }
.fond.tag-bas.tag-droite { background-position:bottom right; }
.fond.tag-bas.tag-gauche { background-position:bottom left; }
.contenu {
	position:relative;
	overflow:hidden;
	width:100%;
	height:100%;
	margin:0 auto;
	padding:4.2rem 0;
	font-size:1.6em;
	font-weight:400;
	line-height:1.32;
	text-align:center;
	z-index:200;
}
h1, h2, h3, h4, h5, h6 {
	width:100%;
	line-height:1;
	text-align:center;
}
.contenu h1 {
	font-size:4.2rem;
	margin:0 0 2rem;
	font-weight:700;
}
.contenu h2 {
	margin:0 0 2rem;
	font-size:2.2rem;
	font-weight:700;
}
.contenu h3 {
	margin:0 0 0.8rem;
	color:#00b0b5;
	font-size:3.2rem;
	font-weight:400;
	text-transform:uppercase;
}
.contenu h4 {
	margin:0 0 0.6rem;
	color:#dd505f;
	font-size:1em;
	font-weight:700;
	text-transform:uppercase;
}
.contenu p {
	max-width:800px;
	margin:0 auto 2rem;
	padding:0 3.2rem;
}
iframe {
	max-width:90%;
	margin:0 auto;
	border:1px solid #222;
}
.contenu ul {
	width:100%;
	padding:0;
	text-align:center;
}

/* MISE NEN FORME SPÉCIALE : DIALOGUES */

.contenu ul.dialogue {
	display:inline-block;
	overflow:hidden;
	list-style:none;
	width:auto;
	margin:0 auto;
}
.contenu ul.dialogue li {
	display:block;
	margin:2rem;
}
.contenu ul.dialogue li span {
	display:table-cell;
	text-align:left;
	font-size:1.6rem;
	min-width:12em;
	max-width:24em;
	
}
.dialogue li span.rouge,
.dialogue li span.vert,
.dialogue li span.bleu,
.dialogue li span.turquoise {
	font-weight:900;
	text-transform:uppercase;
}

/* MISE EN FORME SPÉCIALE : CRÉATEURS */

.contenu ul.createurs {
	list-style:none;
	display:block;
	float:left;
	clear:both;
	overflow:hidden;
	width:auto;
	margin:0 8% 2rem;
}
.contenu ul.createurs li {
	display:inline-block;
	float:left;
	clear:both;
	margin:0;
	text-align:left;
	line-height:1.12;
}
.contenu ul.createurs li h4 {
	text-align:left;
}
.contenu ul.createurs li span {
	text-align:left;
	font-size:1.12rem;
	padding-right:0.6rem;
}
.createurs li span.rouge,
.createurs li span.vert,
.createurs li span.bleu,
.createurs li span.turquoise {
	font-size:1.4rem;
	font-weight:700;
}
@media screen and (max-width: 760px), (orientation:portrait) {
	.contenu ul.createurs li {
		margin-bottom:0.8rem;
	}
	.contenu ul.createurs li:first-child {
		margin-bottom:0;
	}
    .contenu ul.createurs li span {
		float:left;
		clear:both;
	}
}

/* COULEURS */

.rouge { color:#dd505f; }
.vert { color:#0acb9a; }
.bleu { color:#38a2d6; }
.turquoise { color:#00b0b5; }

#createurs {
	position:relative;
	display:block;
	z-index:200;
	width:96%;
	margin:8% auto;
	padding:0;
	list-style:none;
	text-align:center;
}
#createurs li {
	display:inline-block;
	width:20%;
	margin:0 0 4%;
	padding:0;
	text-align:left;
}
#createurs li .nom {
	color:#00b0b5;
	font-weight:900;
	font-size:1.32rem;
	white-space:nowrap;
}
#createurs li .profession {
	color:#c6c6c6;
	font-weight:900;
	font-size:1.12rem;
}
#createurs li a {
	position:relative;
	overflow:hidden;
	display:block;
	width:100%;
}
#createurs li img {
	width:90%;
	height:auto;
	border:1px solid #026164;
}
#createurs li a:hover img {
	border:1px solid #dd505f;
}
#createurs li a:hover .nom {
	color:#dd505f;
}
@media screen and (max-width: 1200px) {
	#createurs li .nom {
		font-size:1.12rem;
	}
	#createurs li .profession {
		font-size:1rem;
	}
}

/* Articles individuels */

.personne h1 {
	margin: 0 0 0.8rem;
}
.personne h3 {
	margin: 0 0 2rem;
	font-size:2rem;
}
.personne img {
	display:inline-block;
    float:left;
}
.personne p {
	display:inline-block;
	vertical-align:top;
	text-align:left;
	max-width:42%;
	padding:0 1.2rem;
}
.personne .retour {
	display:block !important;
	position:absolute;
	z-index:500;
	top:4%;
	right:4%;
	width:3.2rem;
	height:3.2rem;
	cursor:pointer;
	background-size:contain;
	background-repear:no-repeat;
	background-image:url('images/fermer.png');
}
.personne .retour a {
	position:absolute;
	top:0; right:0;
	bottom:0; left:0;
}


/* MISE NEN FORME SPÉCIALE : RÉAGISSEZ! */

.contenu ul.flottant {
	margin:1.2rem 0 0;
}
.contenu ul.flottant li {
	display:inline-block;
	position:relative;
	width:30%;
	min-width:280px;
	max-width:360px;
	margin:0 0 1.2rem;
	line-height:1.6;
	color:#3c3c3b;
	font-weight:900;
	font-size:1.4rem;
}
.contenu ul.flottant li span {
	display:inline-block;
	width:100%;
}
.contenu ul.flottant li strong {
	padding:0 1rem;
	color:#f6f6f6;
	font-weight:400;
	font-size:1.8rem;
	font-style:normal;
	background:#00b0b5;
}
.contenu ul.medias {
	margin:1.2rem 0;
}

@media (max-width: 960px) {
	.contenu ul.flottant li {
		width:100%;
		max-width:100%;
		margin:0 0 2.2rem;
	}
	.contenu p br {
		display:none;
	}
}