/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
	color: #000;
}
html {
	font-size: 1em;
	line-height: 1.5;
}
::-moz-selection {
	background: #000;
	color: #fff;
	text-shadow: none;
}
::selection {
	background: #000;
	color: #fff;
	text-shadow: none;
}
hr {
	display: block;
	border: solid #aaa;
	border-width: 1px 0 0;
	clear: both;
	margin: 1.5em 0;
	height: 0;
}

audio,
canvas,
img,
video {
	vertical-align: middle;
}
fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}
textarea {
	resize: vertical;
}

*,
*:before,
*:after,
a {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	background-repeat: no-repeat;
}
p { margin: 0 0 10px 0; }
p img { margin: 0; }
img {
	max-width:100%;
	height:auto;
}

.remove-top { margin-top: 0 !important; }
.add-top { margin-top: 10px !important; }		  /* Même valeur que la marge du <p> */
.half-top { margin-top: 5px !important; }
.add-d-top { margin-top: 20px !important; }		  /* Double marge */
.remove-bottom { margin-bottom: 0 !important; }
.half-bottom { margin-bottom: 5px !important; }
.add-bottom { margin-bottom: 10px !important; }   /* Même valeur que la marge du <p> */
.add-d-bottom { margin-bottom: 20px !important; } /* Double marge */


/* ==========================================================================
   Styles de base généraux
   ========================================================================== */

html {
	font-family:Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #4c4c4c;
	font-weight:400;
}

/*
 * Typographie
 */
h1, h2, h3, h4, h5, h6 {
	font-family: 'Source Sans Pro', sans-serif;
	color: #78797b;
	font-weight: 600;
}
h4, h5, h6 { font-weight: 400; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
h1 sup, h2 sup, h3 sup, h4 sup, h5 sup, h6 sup { text-transform:none; }

h1 { 
	font-size: 3.142857142857143em; /* 44px / 14px */
	line-height: 1;
	margin: 0 0 27px 0;
	text-transform:uppercase;
}
h2 { 
	font-size: 1.428571428571429em; /* 20px / 14px */
	line-height: 1.25; /* 25px / 20px */
	margin: 15px 0 5px 0;
	color:#61756e;
	text-transform:uppercase;
}
h3 {
	font-family:Arial, Helvetica, sans-serif;
	font-size: 1.285714285714286em; /* 18px / 14px */
	line-height: 1.285714em;
	margin: 25px 0 8px 0;
	color:#4c4c4c;
}
h3.fleche {
	position:relative;
}
h3.fleche:before {
	content:"";
	background:url(../img/fleche.png) no-repeat 0 0;
	display:block;
	position:absolute;
	left:-44px;
	top:0;
	width:31px;
	height:22px;
}
h4 { 
	font-size: 1.076923em;
	line-height: 1.285714em;
	margin: 15px 0 5px 0;
	font-weight:600;
	color:#61756e;
}
h5 { 
	font-size: 1.076923em;
	line-height: 1.285714em;
	margin: 15px 0 5px 0;
}
h6 { 
	font-size: 1em;
	line-height: 1.307692em;
	margin: 10px 0 5px 0;
}

h1:focus,
h2:focus,
h3:focus {
	outline:0;
}

a,
a:link,
a:visited {
	color: #4c4c4c;
	text-decoration: underline;
}
a:active,
a:hover,
a:focus {
	color: #000;
	text-decoration:underline;
}
a:focus {
	outline:1px dotted #000;
}

/* Champs de formulaire */

label {
	display:block;
	font-size:12px; /* 12px / 14px */
	text-transform:uppercase;
	color:#000;
	margin-bottom:7px;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"] {
	font-family: 'Source Sans Pro', sans-serif;
	color: #4c4c4c;
	font-weight: 400;
	background-color:#fff;
	border:0;
	border-radius:0;
	padding: 8px 6px;
	width:300px;
	max-width:100%;
	border: 1px solid #a3a3a3;
}

/* Boutons */
.button,
.button:visited,
button,
input[type="submit"],
input[type="reset"],
input[type="button"],
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:active,
button:active,
input[type="submit"]:active,
input[type="reset"]:active,
input[type="button"]:active {
	font-family: 'Source Sans Pro', sans-serif;
	color: #fff;
	font-weight: 600;
	text-transform:uppercase;
	background-color:#45a5c9;
	border:0;
	border-radius:0;
	padding: 5px 9px;
	display: inline-block;
	text-decoration: none;
	cursor: pointer;
	line-height: normal;
}


/* ==========================================================================
   Classes misc
   ========================================================================== */

/* Textes/paragraphes */
.vsmall { font-size: 85%; line-height:1.5; }
.small { font-size: 90%; line-height:1.5; }
.big { font-size: 125%; }

.alignerTxtG { text-align:left; }
.alignerTxtD { text-align:right; }
.alignerTxtC { text-align:center; }


/* ==========================================================================
   Styles pour ce site
   ========================================================================== */
html {
	height:100%;
}

body {
	background:url(../img/bg.jpg) no-repeat #fff top center;
	background-attachment:fixed;
	background-size:cover;
	height:100%;
	margin:0;
	padding:0;
}
body.information {
	background-image:url(../img/bg_info.jpg);
}
body.aide {
	background-image:url(../img/bg_aide.jpg);
}

.wrapper {
	min-width:320px;
	overflow:hidden;
}

/* Menu */
.enteteSite {
	background-color:#fff;
}
.enteteWrap {
	position:relative;
	display:table;
	height:95px;
	width:100%;
	max-width:1000px;
	margin:0 auto;
}
.enteteSite h1 {
	margin:0;
	padding-bottom:7px;
	display:table-cell;
	vertical-align:bottom;
	
	font-size: 2.857142857142857em; /* 40px / 14px */
	line-height: 1;
	font-weight: 400;
	text-transform:none;
	color:#000;
}
.enteteSite h1 a {
	text-decoration:none;
	color:#000;
}
.enteteSite h1 span {
	color:#494a49;
}

.menuPrincipal {
	position:relative;
	font-family: 'Source Sans Pro', sans-serif;
	display:table-cell;
	vertical-align:bottom;
	padding-bottom:1px;
}
.menuPrincipal ul {
	float:right
}
.menuPrincipal ul,
.menuPrincipal li {
	margin:0;
	padding:0;
	list-style:none;
}
.menuPrincipal li {
	margin:0 0 0 8px;
	float:left;
}
.menuPrincipal li:first-child {
	margin-left:0;
}
.menuPrincipal a:link,
.menuPrincipal a:visited {
	display:block;
	padding:5px 10px;
	color:#fff;
	background-color:#4a4a49;
	text-transform:uppercase;
	text-decoration:none;
}
.menuPrincipal a:hover,
.menuPrincipal a:active,
.menuPrincipal a:focus,
.menuPrincipal .active a {
	color:#b8c3ae;
}
.menuPrincipal .connexion a:link,
.menuPrincipal .connexion a:visited,
.menuPrincipal .connexion a:hover,
.menuPrincipal .connexion a:active,
.menuPrincipal .connexion a:focus {
	color:#fff;
	background-color:#45a5c9;
}

.boiteConnexion {
	display:none;
	position:absolute;
	z-index:1000;
	right:0;
	top:100%;
	background-color:#45a5c9;
	padding:25px;
	width:230px;
}
.boiteConnexion.active {
	display:block;
}

.boiteConnexion .btConnexion {
	background-color:#4a4a49;
	font-size:12px;
}

.contenuPrincipal {
	padding-bottom:150px; /* Hauteur du Footer .piedSite */
}
.contenuPrincipal > *:first-child,
.colonneDroite > *:first-child {
	margin-top:0;
}
.contenuPrincipal > *:last-child,
.colonneDroite > *:last-child {
	margin-bottom:0;
}


/* Accueil */
.accueil .enteteSite h1 {
	display:none;
}
.accueil .contenuPrincipal {
	display:table;
	width:100%;
	padding-top:0;
	padding-left:0;
	padding-right:0;
}
.accueil .contenuWrap {
	background-color:transparent;
	max-width:none;
	padding:0;
}
.accueil .contenuWrap {
	display:table-cell;
	vertical-align:middle;
	text-align:center;
}
.accueil .contenuWrap h1 {
	color:#3f4342;
	font-size:6.428571428571429em; /* 90 / 14 */
	font-weight: 600;
	margin:0;
	text-transform:none;
	display:inline-block;
	border-bottom:2px solid #4c4c4c;
	padding:0 13px 5px 13px;
	margin-bottom:16px;
}
.accueil .accroche {
	font-family: 'Source Sans Pro', sans-serif;
	color:#4c4c4c;
	text-transform:uppercase;
	font-weight:600;
	font-size:2.857142857142857em; /* 40 / 14 */
	margin:0 0 40px 0;
	
}
.accueil .credits {
	font-family: 'Source Sans Pro', sans-serif;
	color:#4c4c4c;
	text-transform:uppercase;
	font-size:2.285714285714286em; /* 32 / 14 */
	font-weight:400;
	margin:0 0 100px 0;
}
.accueil .appui {
	font-family: 'Source Sans Pro', sans-serif;
	color:#000;
	font-size:1.285714285714286em; /* 18 / 14 */
	font-weight:400;
	margin:0;
}

/* Pages secondaires */
.contenuPrincipal {
	padding-top:50px;
}
.contenuWrap {
	background-color:#fff;
	background-color:rgba(255, 255, 255, 0.7);
	margin:0 auto;
	max-width:1000px;
	padding:40px 150px;
}


.piedSite {
	position:fixed;
	left:0;
	bottom:0;
	background-color:#707172;
	background-color:rgba(112,113,114,0.9);
	height:150px; /* Même valeur que le padding-bottom de .contenuPrincipal */
	width:100%;
}
.piedSite ul {
	display:table;
	height:105px;
	width:100%;
	max-width:720px;
	margin:0 auto;
	padding:0 30px;
}
.piedSite li {
	list-style-type:none;
	margin:0;
	padding:0 20px;
	display:table-cell;
	vertical-align:bottom;
}
.piedSite .logoESG {
	max-width:299px;
}
.piedSite .logoTELUQ {
	max-width:170px;
}
.piedSite .logoUQAR {
	max-width:158px;
}
.piedSite li.separateur {
	padding-left:0;
	padding-right:0;
	font-size:60px;
	line-height:1;
	color:#000;
	font-family: "Source Sans Pro", sans-serif;
}
.piedSite li:first-child {
	padding-left:0;
}
.piedSite li:last-child {
	padding-right:0;
}
.piedSite img {
	max-width:100%;
	height:auto;
}


/* ==========================================================================
   Helper classes
   ========================================================================== */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px;
}
.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}
.hidden {
    display: none !important;
    visibility: hidden;
}
.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}
.invisible {
    visibility: hidden;
}
.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}


/* ==========================================================================
   Media Queries
   ========================================================================== */

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

/* Tablette portrait (1023px et moins) */
@media only screen and (max-width: 1023px){
	.enteteWrap {
		padding:0 15px;
	}
	.contenuPrincipal {
		padding-left:15px;
		padding-right:15px;
	}
}

/* Strict minimum pour desktop (960px et moins) */
@media only screen and (max-width: 960px){
	/* Footer */
	.contenuPrincipal {
		padding-bottom:100px; /* Hauteur du Footer .piedSite */
	}
	.piedSite {
		height:100px; /* Même valeur que le padding-bottom de .contenuPrincipal */
	}
	.piedSite ul {
		height:80px;
	}
}

/* Mobile portrait/paysage (320px à 767px) */
@media only screen and (max-width: 767px){
	/* Menu */
	.enteteWrap {
		height:auto;
		padding:10px 15px 0 15px;
	}
	.enteteSite h1,
	.menuPrincipal {
		display:block;
		width:auto;
	}
	.menuPrincipal {
		display:inline-block;
	}
	.menuPrincipal ul { 
		float:none;
		margin:0 auto;
		width:auto;
		overflow:hidden;
	}
	
	.contenuPrincipal {
		padding-top: 25px;
	}
	.contenuWrap {
		padding-left:50px;
		padding-right:50px;
	}
	
	/* Accueil */
	.accueil .contenuPrincipal {
		font-size:10px;
	}
	.accueil .appui {
		font-size: 1.3em; /* 13px / 10px */
	}
	
	/* Footer */
	.contenuPrincipal {
		padding-bottom:100px; /* Hauteur du Footer .piedSite */
	}
	.piedSite {
		height:100px; /* Même valeur que le padding-bottom de .contenuPrincipal */
	}
	.piedSite ul {
		height:100px;
		padding-left:15px;
		padding-right:15px;
	}
	.piedSite li.separateur {
		display:none;
	}
	.piedSite li {
		padding: 0 10px;
		vertical-align:middle;
	}
	/* Logos réduits de moitié */
	.piedSite .logoESG {
		max-width:150px;
	}
	.piedSite .logoTELUQ {
		max-width:85px;
	}
	.piedSite .logoUQAR {
		max-width:79px;
	}
	
}

/* Mobile et mini tablette*/
@media only screen and (max-width: 550px){
	.contenuWrap {
		padding-top:25px;
		padding-left:25px;
		padding-right:25px;
	}
	.aide .contenuWrap {
		padding-left:50px;
	}
	
	/* Accueil */
	.accueil .contenuPrincipal {
		font-size:8px;
	}
	.accueil .contenuWrap h1 {
		font-size:4.5em;
	}
	.accueil .credits {
		margin: 0 0 50px;
	}
	.accueil .appui {
		font-size: 1.5em; /* 12px / 8px */
	}
	
	/* Footer */
	.contenuPrincipal {
		padding-bottom:50px; /* Hauteur du Footer .piedSite */
	}
	.piedSite {
		height:50px; /* Même valeur que le padding-bottom de .contenuPrincipal */
	}
	.piedSite ul {
		height:50px;
	}
}

/* Mobile portrait (320px) */
@media only screen and (max-width: 400px){
	h1 {
		font-size:2.8em;
	}
	.enteteSite h1 {
		font-size: 2.285714285714286em; /* 32px / 14px */
	}
	
	.menuPrincipal {
		font-size:0.8571428571428571em; /* 12px / 14px */
	}
	.menuPrincipal a:link,
	.menuPrincipal a:visited {
		padding-left:5px;
		padding-right:5px;
	}
}

/* Grand écran (1050px et +) */
@media only screen and (min-width: 1050px){
	
}

/* Grand écran (1680px et +) */
@media only screen and (min-width: 1680px){
	
}


/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}