/* Projet : EDU 6015-16 - Travail pratique 1 et 2
 * Fichier CSS global
 * Version : 1.0
 * Dernières modifications : 26 mai 2016
 * Auteurs : Annélie Gagnon et François Martel
 * Modification : Annick Desmeules
 * Note : Les prefixes CSS sont gérés par prefixfree.js
 * Base : HTML5 Boilerplate v4.3.0
 * Table des matières
 * ==================================================
	typographies externes
	styles de base
	généraux
	typographie
	formulaire
	header (logo, menu secondaire, menu principal)
	pages : styles communs
	page : accueil
	page : contenu
	footer
	outils (classes utilitaires)
	media queries standards
	impression
	
 * Typographies Google Fonts (152 ko)
 * ==================================================
	Open Sans - Normal - 400 (sans-serif)
	Open Sans - Normal Italic - 400 (sans-serif)
	Open Sans - Bold - 600 (sans-serif)
	Open Sans - Bold Italic - 600 (sans-serif) */

/* ==================================================
 * styles de base
 * ================================================== */

html,
button,
input,
select,
textarea{
    color: #343338;
}
html{
	counter-reset : cptAccSecs;
}
body{
	font: normal 100% 'Open Sans', sans-serif; /* 16 */
	line-height: 1.4; /* 22.4/16 */
}
html, body{
	height: 100%;
	min-height: 100%;
}
.wrapper {
	min-height: 100%;
	margin: 0 auto -100px; /* the bottom margin is the negative value of the footer's height */
    padding-bottom: 160px;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */
::-moz-selection{
    background: #000;
    color: #fff;
	text-shadow: none;
}
::selection{
    background: #000;
	color: #fff;
    text-shadow: none;
}

hr{
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}
audio,
canvas,
img,
video{
    vertical-align: middle;
}
fieldset{
    border: 0;
    margin: 0;
    padding: 0;
}
textarea{
    resize: vertical;
}
.impression{
	display: none;
}
img{
	display: block;
	max-width: 100%;
	height: auto;
}
.fondCouvre{
	width: 100%;
	background-size: cover;
}
#ancreHautPage a:link{
	color:#fff;
}

/* ==================================================
 * généraux
 * ================================================== */

*,
*:before,
*:after{
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	
	background-repeat: no-repeat;
}

/* ==================================================
 * typographie
 * ================================================== */

body{
	font-family: 'Open Sans', Arial, sans-serif;
	font-weight: 400;
	color: #343338;
	background: #fff;
}
body.dragging, body.dragging *{
	cursor: move !important;
}
a,
a:link,
a:visited{
	color: #000;
	text-decoration: none;
}
a:active,
a:hover,
a:focus{
	text-decoration: underline;
} 

/* ==================================================
 * zoneHautPage (logo, menu secondaire, menu principal)
 * ================================================== */
#zoneHautPage{
    background: url("../../img/structure/EDU6015-16_header-bg.jpg") repeat-x;
	background-size: cover;
}

#zoneHautPage p{
	margin: 0;
}

/* zoneEntete */
#zoneEntete{
	position:relative;
    background: url("../../img/structure/EDU6015-16_header.jpg") no-repeat top center;
	background-size: cover;
}
#zoneEntete:after{
    content: "";
    border-top: 1px solid #89231c;
    border-bottom: 1px solid #89231c;
    background: #c80000;
    background: rgba(200,0,0,.75);
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3.375em;
}
#zoneEntete .container{
	padding-left: 0;
	padding-right: 0;
}

#zoneEntete #titre{
    display: block;
	margin: 0 auto 0 8.125em;
	padding: 4.5635em 0 .375em;
	/*max-width: 475px;*/
}

#zoneEntete h1{	
    display: block;
    margin: 0;
    font-family: 'Open Sans', serif;
    font-size: 3.5em;
    font-weight: 700;
    line-height: .975;
    color: #fff;
    text-transform: uppercase;
    position: relative;
}
#zoneEntete h1 a,
#zoneEntete h1 a:link,
#zoneEntete h1 a:visited{
	color: #fff;
    display: block;
}
#zoneEntete h1 a:active,
#zoneEntete h1 a:hover,
#zoneEntete h1 a:focus{
	text-decoration: none;
}

#zoneEntete h1 span.sigle{
	display: block;
    font-family: "Roboto Mono", "Lucida Console", Monaco, monospace;
    font-size: .275em;
    font-weight: 400;
    line-height: 1.25;
    position: absolute;
    top: 16px;
    left: 16em;
    width: 100px;
}

#zoneEntete h1 span.num{
    font-family: "Roboto Mono", "Lucida Console", Monaco, monospace;
    font-weight: 700;
	letter-spacing: -2px;
}
#zoneEntete h1 span.num span{
    font-family: 'Open Sans', serif;
    font-weight: 400;
    font-size: .75em;
	letter-spacing: 0;
    text-transform: none;
}

/* zoneEntete : logo */
#zoneEntete #logo{
	float: right;
	width: auto;
	margin-top: 10px;
}
#zoneEntete #logo a{
	display:block;
}
#zoneEntete #logo a img{
	display: block;
	max-height: 45px;
}

/* zoneEntete : menuPrincipal */
#menuPrincipal{
	/*float: left;*/
	position: relative;
	width:100%;
	z-index: 1;
}
.toggleMenuPrincipal{
	display: none;
	float: right;
	height: 40px;
	width: 40px;
	padding: 0;
	text-align: center;
	background: none #5d5758;
	border: 1px solid #ccc;
}
.no-svg .toggleMenuPrincipal{
	border: none;
}
.toggleMenuPrincipal > span{
	display: inline-block;
	height: 24px;
	width: 24px;
	vertical-align: middle;
	background: url('../../img/icones/ico_menu_mobile.svg') no-repeat 0 0;
	overflow: hidden;
}
.no-svg .toggleMenuPrincipal > span{
	height: 40px;
	width: 40px;
	background-image: url('../../img/icones/png/ico_menu_mobile.png');
}
.toggleMenuPrincipal.ouvert > span{
	background-position: 0 -24px;
}
.no-svg .toggleMenuPrincipal.ouvert > span{
	background-position: 0 -40px;
}
.lstMenuPrincipal{
	position: relative;
    margin: 0 auto;
    display: table;
    padding-left: 0;
    list-style-type: none;
    font-size: 1.0625em;
    line-height: 1;
}
.lstMenuPrincipal > li{
    position: relative;
    display: table-cell;
    vertical-align: middle;
	line-height: 1.2;
}

.lstMenuPrincipal li a:link,
.lstMenuPrincipal li a:visited{
	display: block;
	padding: 0 0 5px;
}
.lstMenuPrincipal > li > a:link,
.lstMenuPrincipal > li > a:visited{
    padding: 0px 30px;
    /*height: 53px;*/
	height: 3.11em;
    display: table-cell;
    vertical-align: middle;
    color: #fff;
	border-right: 1px solid #89231c;
}
.lstMenuPrincipal > li:first-child > a:link,
.lstMenuPrincipal > li:first-child > a:visited{
	border-left: 1px solid #89231c;
}

.lstMenuPrincipal li a:hover,
.lstMenuPrincipal li a:active,
.lstMenuPrincipal li a:focus,
.lstMenuPrincipal li.active >a:link{
	text-decoration: none;
	background:#fff;
	color:#89231c;
	/*border-bottom: 1px solid #89231c;*/
}
.lstMenuPrincipal li.active >a:link,
.lstMenuPrincipal li.menu-item-has-children a:hover,
.lstMenuPrincipal li.menu-item-has-children a:active,
.lstMenuPrincipal li.menu-item-has-children a:focus{	
	border-bottom: none;
}

.lstMenuPrincipal li.sansNum a:before{
	display: none;
}

/* zoneEntete : menuPrincipal : niveau 2 */
.lstMenuDeroulant .sub{
	position: absolute;	
	left: 0;
	padding:15px 0;
	line-height: 1.357142857142857; /* 19/14 */
    border: 1px solid #89231c;
    border-top: none;
    background-color: #fff;
	z-index: 10000;
}
.ie8 #zoneEntete .lstMenuDeroulant .sub{
	border-bottom: solid 1px #bababa;
}
.lstMenuDeroulant ol.sub,
.lstMenuDeroulant ul.sub{
	margin: 0;
	padding: 0;
	list-style-type: none;
}
.lstMenuDeroulant .sub li{
	position:relative;
}
.lstMenuDeroulant .sub li a:link,
.lstMenuDeroulant .sub li a:visited{
	color: #89231c;
	display: block;
	padding: 6px 30px;
	position:relative;
	text-decoration: none;
	white-space: nowrap;
	border-bottom:none;
}
.lstMenuDeroulant .sub li a:hover,
.lstMenuDeroulant .sub li a:active,
.lstMenuDeroulant .sub li a:focus,
.lstMenuDeroulant .sub li.current_page_item a{
	color:#fff;
	background: #89231c;
}

/* ==================================================
 * accueil : zoneMilieuPage
 * ================================================== */

.accueil #zoneMilieuPage{
	padding-top: 50px;
	padding-bottom: 50px;
}

/* ==================================================
 * zoneMilieuPage
 * ================================================== */
 
/* zoneContenu */
.page #zoneContenu{
	margin-top: 140px;
	margin-bottom: 35px;
}
#zoneContenu article,
#zoneContenu #contenu{
	min-height: 260px;
	padding: 20px 10px;
	background-color: #fff;
	background-color: rgba(255,255,255, .80);
}
#zoneContenu article >:last-child,
#zoneContenu #contenu >:last-child{
	margin-bottom: 0px;
}

#zoneContenu article #zoneTexte,
#zoneContenu #contenu #zoneTexte{
	width: 60.3334%;
	margin:0 auto;
}
#zoneContenu article #zoneTexte #fil_darianne,
#zoneContenu #contenu #zoneTexte #fil_darianne{
	font-size:.689em;
	text-transform:uppercase;
}

/* zoneContenu : titres */
#zoneContenu h1{
    margin: 25px 0 7px;
    font-family: 'Open Sans', sans-serif;
    font-size: 2em;
    line-height: 1.133333333333333;
    color: #66656e;
}
#zoneContenu h2{
	margin: 0 0 15px;
	font-family: 'Open Sans', sans-serif;
	font-size: 1.5em; /* 26/16 */
	line-height: 1.230769230769231; /* 32/26 */
	color: #66656e;
}
#zoneContenu h3{
	margin: 30px 0 10px;
	font-family: 'Open Sans', sans-serif;
	font-size: 1.125em; /* 25/16 */
	line-height: 1.28; /* 32/25 */
	font-weight: 400;
	color: #66656e;
}
#zoneContenu h4{
	margin: 35px 0 10px;
	font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 1.05em;
	line-height: 1.263157894736842; /* 24/19 */
	color: #66656e;
}

/* zoneContenu : contenu général */
#zoneMilieuPage p,
#zoneMilieuPage span,
#zoneMilieuPage ul,
#zoneMilieuPage ol,
#zoneMilieuPage table,
#zoneMilieuPage label{
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	font-size: .875em; /* 15/16 */
	line-height: 1.533333333333333; /* 23/15 */
}
#zoneMilieuPage p,
#zoneMilieuPage ul,
#zoneMilieuPage ol,
#zoneMilieuPage table,
#zoneMilieuPage img,
#zoneMilieuPage figure{
	margin: 0 0 15px;
}
#zoneMilieuPage img.lienExterne{
	display: inline;
    margin: 0 0 2px;
}
#zoneMilieuPage p.sansMarge,
#zoneMilieuPage ul.sansMarge,
#zoneMilieuPage ol.sansMarge,
#zoneMilieuPage table.sansMarge,
#zoneMilieuPage img.sansMarge,
#zoneMilieuPage .sansMarge{
	margin-bottom: 5px;
}
#zoneMilieuPage a:link,
#zoneMilieuPage a:visited{
	text-decoration:none;
	border-bottom: 1px dotted #000;
}
#zoneMilieuPage a:active,
#zoneMilieuPage a:hover,
#zoneMilieuPage a:focus{
	border-bottom: 1px solid #000;
}

#zoneMilieuPage strong a span{
	color:inherit;
	font-size:inherit;
	font-weight:inherit;
	font-family:inherit;
}

#zoneMilieuPage .note{
	font-size: .814em; /* 13/16 */
	margin: 20px 0;
}
#zoneMilieuPage strong{
	font-weight: 500;
}
#zoneMilieuPage strong em,
#zoneMilieuPage em strong{
	font-weight: 700;
}
#zoneMilieuPage figcaption{
	margin: 0 0 10px;
	font-weight: 300;
	font-size: .875em; /* 14/16 */
	line-height: 1.357142857142857; /* 19/14 */
	color: #828282;
}

#zoneMilieuPage p.text-center{
	text-align:center;
}

#zoneMilieuPage blockquote p{
	color:#5d5758;
}

/* zoneContenu : images */
#zoneMilieuPage img.alignCentre{
	margin-left: auto;
	margin-right: auto;
}
#zoneMilieuPage img.alignGauche{
	float: left;
	width: auto;
	margin: 0 15px 15px 0;
}
#zoneMilieuPage img.alignDroite{
	float: right;
	width: auto;
	margin: 0 0 15px 15px;
}
#zoneMilieuPage img.encadree{
	border: 1px solid #dcdcdc;
}

/* zoneContenu : listes */
#zoneMilieuPage ul{
	padding-left: 20px;
}
#zoneMilieuPage ol{
	padding-left: 18px;
}
#zoneMilieuPage ul li,
#zoneMilieuPage ol li{
	margin-bottom: 5px;
}

#zoneMilieuPage ul{
	list-style-type:none;
}
#zoneMilieuPage ul li{
	text-indent: -10px;
}
#zoneMilieuPage ul li:before{
    content: "\002022";
    color: #71cc51;
    margin-right: 10px;
    display: inline-block;
    font-size: 1.25em;
	line-height:1;
    vertical-align: middle;
}
#zoneMilieuPage table ul{
	padding-left: 10px;
}
#zoneMilieuPage table ul ul{
	padding-left: 13px;
}
#zoneMilieuPage table ul li{
	text-indent: -6px;
}
#zoneMilieuPage table ul li:before{
    color: #000;
    margin-right: 6px;
}
#zoneMilieuPage ul ul,
#zoneMilieuPage ol ol,
#zoneMilieuPage ul ol,
#zoneMilieuPage ol ul{
	margin-bottom: 5px;
}
#zoneMilieuPage ul ul li:before{
	content: "–";
}
#zoneMilieuPage ul.sansPuce,
#zoneMilieuPage ol.sansNum,
#zoneMilieuPage ul.dialogue{
	list-style-type: none;
}
#zoneMilieuPage ul.sansPuce,
#zoneMilieuPage ol.sansNum{
	padding-left: 0;
}
#zoneMilieuPage ul.sansPuce.indent,
#zoneMilieuPage ol.sansNum.indent{
	padding-left: 20px;
}
#zoneMilieuPage ol.lstLettre{
	list-style-type: lower-alpha;
}

#zoneMilieuPage ul ul,
#zoneMilieuPage ul ol,
#zoneMilieuPage ol ol,
#zoneMilieuPage ol ul,
#zoneMilieuPage ul p,
#zoneMilieuPage ol p,
#zoneMilieuPage ul span,
#zoneMilieuPage ol span,
#zoneMilieuPage ul label,
#zoneMilieuPage ol label{
	font-size: 1em; /* 15/15 */
}

/* zoneContenu : tableaux */
#zoneMilieuPage table{
	width: 100%;
	text-align: left;
	font-size: .814em;
	table-layout: fixed;
}
#zoneMilieuPage table thead:after{
	content:"";
	display:block;
	height:10px;
	width:100%;
	background:#fff;
}
#zoneMilieuPage table.lgDemi{
	width: 50%
}
#zoneMilieuPage table.lgTroisQuarts{
	width: 75%
}
#zoneMilieuPage table td{
	vertical-align: top;
}
#zoneMilieuPage table tbody tr{
	border-bottom: 1px solid #888;
}
#zoneMilieuPage table td{
	padding: 5px 10px;
}
#zoneMilieuPage table td:first-child{
	padding-left:0;
}
#zoneMilieuPage table td + td{
	border-left: 1px solid #888;
}
#zoneMilieuPage table th{
	background: #70cc51;
	color:#000;
	font-weight: 600;
	padding: 5px 0;
}
#zoneMilieuPage table th:first-child{
	padding: 5px;
}
#zoneMilieuPage table tbody tr:first-child th,
#zoneMilieuPage table tbody tr:first-child td{
	padding-top:0;
}

#zoneMilieuPage table th.alignGauche{
	text-align: left;
}
#zoneMilieuPage table .alignCentre{
	text-align: center;
}
#zoneMilieuPage table .alignHaut{
	vertical-align: top;
}
#zoneMilieuPage table .lgDemi{
	width: 50%
}
#zoneMilieuPage table .lgTier{
	width: 33%
}
#zoneMilieuPage table .lgQuart{
	width: 25%
}
#zoneMilieuPage table .lgVingtieme{
	width: 20%
}
#zoneMilieuPage table .lgDixieme{
	width: 10%
}
#zoneMilieuPage table p,
#zoneMilieuPage table span,
#zoneMilieuPage table ul,
#zoneMilieuPage table ol,
#zoneMilieuPage table label{
	font-size: 1em; /* 15/15 */
}

/* Accordéons */
#contenu .accordeon{
    margin: 35px 0 20px;
}
#contenu .accordeon + .accordeon{
	margin-top: 0;
}

#contenu .accordeon .toggler{
    position: relative;
	padding: 5px 20px 5px 10px;
	line-height: 1.25;
	font-weight:600;
	background: #fff;
    border: 1px solid #71cc51;
    color: #000;
    cursor: pointer;
}

#contenu .accordeon .toggler:hover{
	background: #71cc51;
}

#contenu .accordeon .toggler span{
	display: block;
	position: absolute;
	top: 0;
	right: 10px;
	bottom: 0;
	margin: auto;
	width: 10px;
	height: 16px;
	background: url('../../img/icones/icone_fleche.svg') no-repeat top right;
	color: #fff;
    text-indent: -5000px;
}

.no-svg #contenu .accordeon .toggler span{	
	background: url('../../img/icones/png/icone_fleche.png') no-repeat top right;
}
.ie8 #contenu .accordeon .toggler span{
	width: 13px;
	height: 11px;
}

#contenu .accordeon .toggler.active span{
	background-position: right -16px;
}

#contenu .accordeon > div{
	margin: 20px 0 0;
	padding: 0 0 0 20px;
	border-left: 1px solid #71cc51;
}

/* Playlists (vidéos) */
#contenu .animVideoPlaylist.visionneuse{
	margin-bottom: 15px;
}
#contenu .animVideoPlaylist.visionneuse figure{
	margin-bottom: 0;
}
#contenu .animVideoPlaylist.visionneuse ul{
	padding: 0;
	margin-top: -5px;
}
#contenu .animVideoPlaylist.visionneuse ul li{
	list-style: none;
	display: block;
	width: 50%;
	float: left;
	margin: 0;
	padding-top: 3px;
}
.ie8 #contenu .animVideoPlaylist.visionneuse ul li{
	padding: 1px;
}
#contenu .animVideoPlaylist.visionneuse ul li:nth-child(odd){
	padding-right: 3px;
}
#contenu .animVideoPlaylist.visionneuse ul li:only-child{
	width: 100%;
	padding-right: 0;
}
#contenu .animVideoPlaylist.visionneuse ul li a{
	display: inline-block;
	width: 100%;
	padding: 0 5px;
	min-height: 50px;
	line-height: 50px;
	vertical-align: middle;
	background: #5d6678;
	color: #fff;
	text-align: center;
	text-decoration: none;
	font-family: 'Open Sans', serif;
	font-weight: 300;
	font-size: 1em; /* 16/16 */
}
#contenu .animVideoPlaylist.visionneuse ul li a:hover{
	background: #3d3d3d;
}
#contenu .animVideoPlaylist.visionneuse ul li a.active{
	background: #3d3d3d;
	cursor: default;
}
#contenu .animVideoPlaylist.liste h3{
	margin: 20px 0 10px;
	padding: 20px 0 0;
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
	font-size: .9375em; /* 15/16 */
	line-height: 1.533333333333333; /* 23/15 */
	text-transform: uppercase;
	border-top: solid 1px #959595;
	color: #333333;
}
#contenu .animVideoPlaylist.liste h3:first-of-type{
	margin-top: 35px;
	padding-top: 0;
	border: none;
}
#contenu .animVideoPlaylist.liste a.active{
	text-decoration: none;
}

/* Liste à numéros */
#contenu ol.lstParentheseNum{
	counter-reset: list;
}
#contenu ol.lstParentheseNum > li {
	list-style: none;
}
#contenu ol.lstParentheseNum > li:before{
	content: counter(list, decimal) ") ";
	counter-increment: list;
	margin-left: -1.5em;
	float:left;
}
#contenu ol.lstParentheseNum.strong{
	font-weight:600;
}


/* Progression : liste : niveau 2 */
#contenu ol.lstSuivi > ol{
	list-style-type: none;
}
#contenu ol.lstSuivi ol li{
	margin-top: 5px;
	line-height: 1.266666666666667; /* 19px/15px (identique au menu principal) */
	text-transform: none;
}
#contenu ol.lstSuivi ol li:first-child{
	margin-top: 10px;
}
#contenu ol.lstSuivi ol li a:link,
#contenu ol.lstSuivi ol li a:visited{
	padding: 5px 0 5px 20px;
	text-decoration: none;
	border-bottom: none;
}
#contenu ol.lstSuivi ol li a:hover,
#contenu ol.lstSuivi ol li a:active,
#contenu ol.lstSuivi ol li a:focus{
	text-decoration: underline;
	color: #005d7b;
}

/* ==================================================
 * zoneBasPage
 * ================================================== */
/*#zoneExtraBP{
	background-color: #66656e;
}*/

footer, .push{
	height: 100px; /* .push must be the same height as .footer */
}
footer{
	font-family: 'Open Sans', sans-serif;
	font-size: .75em; /* 14/16 */
	float:none!important;
	color: #000;
}

/* zoneCredits */
#zoneCredits{
	width: 60.3334%;
	margin:0 auto;
    padding-right: 290px;
}
#zoneCredits:before{
content: "";
    width: 128px;
    height: 4px;
    background: #dc443a;
    display: block;
    margin-bottom: 8px;
}
#zoneCredits p{
	margin: 0;
}
#zoneUtilitaire{
	width: 60.3334%;
	margin:20px auto 0;
}
#zoneUtilitaire ul{
	list-style-type:none;
	margin:0;
	padding:0;
}
#zoneUtilitaire ul li{
	display:inline-block;
}
#zoneUtilitaire ul li + li{
	padding: 0 10px;
    margin: 0 10px;
    border-left: 1px solid #000;
}

#zoneUtilitaire ul li a:link,
#zoneUtilitaire ul li a:visited{
	border-bottom:1px dotted #000;
}

#zoneUtilitaire ul li a:active,
#zoneUtilitaire ul li a:hover,
#zoneUtilitaire ul li a:focus{
	text-decoration:none;
	border-bottom:1px solid #000;
}


/* ==================================================
 * pages : styles communs
 * ================================================== */

/* ==================================================
 * outils (classes utilitaires)
 * ================================================== */

/* Image replacement */
.ir{
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px;
}
.ir:before{
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden{
    display: none !important;
    visibility: hidden;
}

/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden{
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus{
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;	
}

/* Hide visually and from screenreaders, but maintain layout */
.invisible{
    visibility: hidden;
}

/* clearfix : clear selon la manière actuelle (idéale) */
.clearfix:before,
.clearfix:after{
    content: " ";
    display: table;
}
.clearfix:after{
    clear: both;
}
.clearfix{
    *zoom: 1;
}

/* clearbase : clear selon la manière traditionnelle */
.clearbase{
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}

/* ==================================================
 * media queries standards
 * résolution par défaut : 1200px et plus (pour IE 8)
 * ajustements ci-dessous pour les résolutions plus basses
 * basées sur les media queries de Bootstrap v3.3.2
 
 * Mobile portrait/paysage : 767px et moins
 * Tablette portrait : 768px et plus
 * Ordinateur SD et tablette paysage : 992px et plus
 * Ordinateur HD : 1200px et plus (résolution par défaut)
 * ================================================== */

/* http://css-tricks.com/snippets/html/responsive-meta-tag/ */
@-ms-viewport{
	width: device-width;
}








/* Ordinateur SD et moins (991px et moins) */
@media only screen and (max-width: 991px){
	/* ==================================================
	 * styles de base
	 * ================================================== */
	
	.wrapper{
		overflow: hidden; /* Cache l'excédant du fond de zoneSecondaire */
	}
	/*.wrapper:before{
		height: 249px;
	}	  */  
	.wrapper:after{
		top: 13.0625em;
		height: 2.5em;
	}
	
	/* ==================================================
	 * zoneHautPage (logo, menu secondaire, menu principal)
	 * ================================================== */	
	/* zoneEntete  */
	#zoneEntete:after{
		height: 3.125em;
	}	
	
	/* zoneEntete : logo */
	#zoneEntete #logo a img{
		max-height: 40px;
	}
	
	#zoneEntete #titre{
		padding: 5.1875em 0 .3125em;
		margin: 0 auto;
	}	

	.lstMenuPrincipal > li > a:link,
	.lstMenuPrincipal > li > a:visited{
		padding: 0px 13px;
		height: 2.9411em;
	}
	
	/* ==================================================
	 * zoneMilieuPage
	 * ================================================== */			
	#zoneContenu article #zoneTexte, 
	#zoneContenu #contenu #zoneTexte {
		width: 100%;
		padding: 23px 20px 0;
	}
	#zoneContenu h3{
		margin-top:35px;
	}
	
	/* Accordéons */
	#contenu .accordeon .toggler span{
		background-size: 12px 36px;
		width: 13px;
		height: 18px;
	}

	/* Playlists (vidéos) */
	#contenu .animVideoPlaylist.visionneuse ul{
		margin-top: -4px;
	}

	/* ==================================================
	 * zoneBasPage
	 * ================================================== */	
	#zoneCredits{
		width:100%;
		padding: 0 275px 0 40px;
	}
}




/* Mobile portrait/paysage (767px et moins) */
@media only screen and (max-width: 767px){
	/* ==================================================
	 * styles de base
	 * ================================================== */
	
	/* ==================================================
	 * zoneHautPage (logo, menu secondaire, menu principal)
	 * ================================================== */

	#zoneEntete:after{
		display: none;
		visibility: hidden;
	}
	
	#zoneEntete #titre{
		padding: 3.125em 0 .375em;
		margin:0;
	}
	.ie8 #zoneEntete #titre{
		max-width:16.25em
	}
	#zoneEntete h1{
		font-size: 2em;
		line-height: 1;
		/*max-width: 300px;*/
	}
	#zoneEntete h1 span.sigle{
		top: .2em;
		left: 11.25em;
		width: 5.333em;
		font-size: .4em;
		line-height: 1.1;
	}
	.ie8 #zoneEntete h1 span.sigle{
		right: 40px;
	}

	/* zoneEntete : logo */
	#zoneEntete #logo{
		position: absolute;
		margin-top: 0px;
		top: 0px;
		right: 10px;
	}
	#zoneEntete #logo a img{
		max-width: 40px;
		max-height: inherit;
	}

	/* zoneEntete : menuPrincipal */
	#menuPrincipal{
		padding: 10px 0px 10px 0px;
		margin:0;
		background:none;
		position: absolute;
		top: 50px;
		right: 10px;
		width: 220px; /* Largeur fixe pour ne pas que le menu soit trop grand */
	}
	.toggleMenuPrincipal{
		display: block;
	}
	.lstMenuPrincipal{
		display: none;
		position: absolute;
		top: 50px;
		right: 0;
		width: 100%;
		line-height: 1.461538461538462; /* 19/13 */
		background: #fff;
		box-shadow: 0 3px 7px #252525; /* browser support */
		box-shadow: 0 3px 7px rgba(0, 0, 0, 0.35);
		z-index: 500;
		padding:0;
	}
	.lstMenuPrincipal > li{
		float: none;
		width: auto;
		margin: 0;
		padding: 0 0 12px;
		border-top: solid 1px #333;
		display:block;
	}	
	
	.lstMenuPrincipal > li,
	.lstMenuPrincipal > li.current_page_item/*.current_page_item*/{
		padding: 0;
		border-bottom: none;
	}
	.lstMenuPrincipal li a:link,
	.lstMenuPrincipal li a:visited{
		border-bottom: none;
		color: #333;
		padding: 10px 0 10px 7px;
	}
	.lstMenuPrincipal > li > a{
		position: relative;
		border:none;
		border-left: 5px solid transparent;
	}
	.lstMenuPrincipal > li.active > a:link{
	    background: #5d5657;
   		color: #fff;
	}
	/*.lstMenuPrincipal > li.current-menu-parent > a,
	.lstMenuPrincipal > li.current_page_item > a{
		border:none;
		border-left: 5px solid #d41f26;
	}*/
	.lstMenuDeroulant .sub{
		padding:0;
	}
	
	.lstMenuDeroulant .sub li a:hover:after,
	.lstMenuDeroulant .sub li a:active:after,
	.lstMenuDeroulant .sub li a:focus:after,
	.lstMenuDeroulant .sub li.current_page_item a:after{
		display:none;
	}
	
	.lstMenuPrincipal > li > a:link,
	.lstMenuPrincipal > li > a:visited{
		background: #5d5657;
		color: #fff;
		padding: 0;
		display: table-cell;
		vertical-align: middle;
		text-align: center;
		width: 250px;
	}	
	.lstMenuPrincipal > li > a br{
		display:inline;
	}
	
	.lstMenuPrincipal > li > a:before{
		color: #333333;
	}
	
	.lstMenuPrincipal > li.menu-item-has-children > a:after{
		display: inline-block;
		width: 12px;
		height: 10px;
		margin-left: 12px;
		content: "";
		background: url('../../img/icones/ico_fleche_menu-mobille.svg') no-repeat 0 0;
	}
	.no-svg .lstMenuPrincipal > li.menu-item-has-children > a:after{
		background-image: url('../../img/icones/png/ico_fleche_menu-mobille.png');
	}
	.lstMenuPrincipal > li.active > a:after{
		background-position: 0 -10px;
	}
	.lstMenuPrincipal > li.sansSousMenu > a:after{
		width: 0;
		height: 0;
		background: none;
	}
	
	.lstMenuDeroulant .sub li a:link,
	.lstMenuDeroulant .sub li a:visited{
		padding: 8px 20px;
		white-space:normal;
	}
	
	/* zoneEntete : menuPrincipal : niveau 2 */
	.lstMenuDeroulant .sub.visuallyhidden{
		position: absolute;
	}
	.lstMenuDeroulant .sub{
		position: inherit;
		left: 0!important; /* Reset la position en JS */
		width: auto;
	}
	
	/* particularités : menuPrincipal */
	.lstMenuPrincipal .sub{
		box-shadow: none;
	}
	.lstMenuDeroulant .sub li{
		position:relative;
		margin-top: 5px;
	}
	.lstMenuDeroulant .sub li:first-child{
		margin-top: 0;
	}
	
		
	
	/* ==================================================
	 * zoneMilieuPage
	 * ================================================== */
	
	/* zoneContenu */
	#zoneContenu article,
	#zoneContenu #contenu{
		min-height: inherit;
		padding: 0 2px 30px;
		margin-top: .5em;
	}
			
	 /* zoneContenu : contenu général */
	#zoneMilieuPage p,
	#zoneMilieuPage ul,
	#zoneMilieuPage ol,
	#zoneMilieuPage table,
	#zoneMilieuPage img,
	#zoneMilieuPage figure{
		margin: 0 0 10px;
	}
	#zoneMilieuPage p.sansMarge,
	#zoneMilieuPage ul.sansMarge,
	#zoneMilieuPage ol.sansMarge,
	#zoneMilieuPage table.sansMarge,
	#zoneMilieuPage img.sansMarge,
	#zoneMilieuPage .sansMarge,
	#zoneMilieuPage ul li,
	#zoneMilieuPage ol li{
		margin-bottom: 3px;
	}
	/* zoneContenu : images */
	#zoneMilieuPage img.alignGauche,
	#zoneMilieuPage img.alignDroite{
		float: none;
		margin: 0 0 10px;
	}
	
	/* Playlists (vidéos) */
	#contenu .animVideoPlaylist.visionneuse ul{
		margin-top: -3px;
	}
	#contenu .animVideoPlaylist.visionneuse ul li a{
		font-size: .9375em; /* 15/16 */
		line-height: 1.2; /* 18/15 */
		padding: 15px;
		min-height: auto;
	}

	
	/* zoneContenu : contenu général */
	#zoneMilieuPage .note,
	#zoneMilieuPage .source{
		font-size: .8125em; /* 13/16 */
		line-height: 1.153846153846154; /* 15/13 */
	}

	/* Playlists (vidéos) */
	#contenu .animVideoPlaylist.visionneuse ul li{
		width: 100%;
	}
	#contenu .animVideoPlaylist.visionneuse ul li:nth-child(odd){
		padding-right: 0;
	}
	
	/* ==================================================
	 * zoneBasPage
	 * ================================================== */	
	#zoneCredits{
		padding: 0 100px 0 20px;
	}
}

/* Mobile petit écran (480px et moins) */
@media only screen and (max-width: 480px){
	/* ==================================================
	 * styles de base
	 * ================================================== */
	body{
		font-size: 85%;
		line-height: 1.1;
	}
	#zoneEntete #titre {
		max-width: 16.25em
	}
	#zoneEntete h1 span.sigle {
		top: .5em;
		left: 12.85em;
		width: 6em;
		font-size: .35em;
		line-height: 1.2;
	}
	
	.lstMenuPrincipal {
		font-size: 1.15em;
	}
	
	#zoneContenu article, 
	#zoneContenu #contenu{
		margin-top: 0;
	}
	#zoneContenu article #zoneTexte #fil_darianne,
	#zoneContenu #contenu #zoneTexte #fil_darianne{
		font-size: .75em;
	}

	/* ==================================================
	 * zoneBasPage
	 * ================================================== */
	footer{
		font-size:.875em;
	}
	#zoneCredits{
		padding: 0 20px;
	}	
}


/* Tablette portrait (entre 768px et 991px)
 * Contenu : 720px
 * 1 colonne : 41.656px */
@media only screen and (min-width: 768px) and (max-width: 991px){
	/* ==================================================
	 * zoneHautPage (logo, menu secondaire, menu principal)
	 * ================================================== */
	 
	
	/* ==================================================
	 * zoneMilieuPage
	 * ================================================== */
	
	/* zoneContenu */
	.page #zoneContenu{
		margin-top: 90px;
	}
	#zoneContenu article,
	#zoneContenu #contenu{
		min-height: 170px;
	}
	
	#zoneContenu article #zoneTexte, 
	#zoneContenu #contenu #zoneTexte {
		padding: 23px 35px 0;
	}
}


/* Ordinateur SD et tablette paysage (entre 992px et 1199px)
 * Contenu : 940px
 * 1 colonne : 59.984px */
@media only screen and (min-width: 992px) and (max-width: 1199px){

	/* ==================================================
	 * zoneMilieuPage
	 * ================================================== */
	/* zoneContenu */
	#zoneContenu article,
	#zoneContenu #contenu{
		min-height: 230px;
		padding: 33px 10px;
	}
	#zoneContenu article #zoneTexte, 
	#zoneContenu #contenu #zoneTexte {
		width: 83%;
	}
	
	
	/* ==================================================
	 * zoneBasPage
	 * ================================================== */
	#zoneCredits{
		width: 83%;
		padding-right: 380px;
	}
}

@media only screen and (min-width: 769px){	
	.lstMenuPrincipal{ 
		display:table!important;	
	}
}

/* Ordinateur SD et Ordinateur HD (992px et plus) */
@media only screen and (min-width: 992px){
	/* ==================================================
	 * zoneHautPage (logo, menu secondaire, menu principal)
	 * ================================================== */
	#zoneEntete .container:after{
		clear:none;
	}
	#zoneEntete .col-md-12{
		float:none;
	}
	.lstMenuPrincipal li a span{
		display: block;
	}
}

/* Ordinateur HD (1200px et plus)
 * Résolution par défaut (voir les styles avant cette section) */
@media only screen and (min-width: 1200px){
	#zoneEntete #titre{
    	margin: 0 auto 0 14.1875em;
	}
}

/* ==================================================
 * impression
 * ================================================== */

@media print{
	/* Général */
    *{
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }
    body{
		font-size: 80%;
	}
    a,
    a:visited{
        text-decoration: underline;
    }
    thead{
        display: table-header-group; /* h5bp.com/t */
    }
    img{
        max-width: 75% !important;
    }
    @page{
        margin: .5cm;
    }
    p,
    h2,
    h3{
        orphans: 3;
        widows: 3;
    }
	
	/* Affichages des liens */
    a[href]:after{
        content: " (" attr(href) ")";
        font-size: 7pt;
    }
    abbr[title]:after{
        content: " (" attr(title) ")";
        font-size: 7pt;
    }
    #zoneEntete #titre a[href]:after{
    	display: block;
    	margin-top: 5px;
    }
	
    /* Non-affichage des liens */
    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after{
        content: "";
    }

	/* Page breaks */
    pre,
    blockquote,
    tr,
    img{
        page-break-inside: avoid;
    }
    h2,
    h3{
    	page-break-after: avoid;
    }

    /* À afficher à l'impression */
    .accordeon .visuallyhidden,
	.titreAccordeon .visuallyhidden{
    	width: 100%;
    	height: auto;
    	margin: 0;
    	position: static;
    }
	

	/* À ne pas afficher à l'impression */
	#menuPrincipal,
	#contenu .animVideoPlaylist figure,
	#contenu .animVideoPlaylist.liste .figure,
	#contenu .accordeon .toggler span,
	#contenu .titreAccordeon .toggler span{
		display: none;
	}

	/* Divers */
	body{
		margin-left: 50pt;
		margin-right: 50pt;
	}
	.page #zoneContenu{
		margin-top: 0;
	}
	#zoneEntete #logo{
		float: none;
	}
	#zoneEntete #titre{
		margin-bottom: 35pt;
	}
	#zoneContenu article,
	#zoneContenu #contenu{
		padding: 0;
	}
	#contenu .boite.emphase{
		border: solid 1px #bababa;
	}
	#zoneMilieuPage table,
	#zoneMilieuPage table tr,
	#zoneMilieuPage table th,
	#zoneMilieuPage table td{
		border: solid 1px #bababa;
	}
	#zoneMilieuPage img.alignDroite{
		max-width: 25% !important;
	}
	#contenu .accordeon .toggler,
	#contenu .titreAccordeon .toggler{
		padding: 5px;
		margin-bottom: 15px;
		border: solid 1px #000;
	}
	#contenu .accordeon > div,
	#contenu .titreAccordeon > div{
		padding: 0 25px 0 25px;
		border-left: none;
	}
	#contenu .animVideoPlaylist.visionneuse ul li{
		width: 100%;
	}
	#contenu .animVideoPlaylist.visionneuse ul li a{
		text-align: left;
		float: none;
		padding: 0;
		min-height: auto;
		line-height: 1;
	}
	#contenu .animVideoPlaylist.liste a{
		text-decoration: none;
		font-weight: 500;
	}
	.col-md-offset-1{
		margin-left: 0;
	}
	.col-md-3{
		width: 100%;
	}
}