/*
=========================================================================
	TITRES (h1, h2, h3, h4)
	- Titres standards
	- Variantes
=========================================================================
*/

h1, .h1 {
	color: #074b98;
	font-family: "proxima-nova-bold", sans-serif;
	font-size: 22px;
	margin: 0.2em 0 12px;
	text-transform: uppercase;
}
h1 > sup {
	text-transform: none;
}
@media (min-width: 766px) {
h1, .h1 {
	font-size: 24px;
}
}
h2, .h2 {
	font-family: "proxima-nova-bold", sans-serif;
	font-size: 20px;
	margin: 1.2em 0 10px 0;
	letter-spacing: 0;
	color: black;
	text-transform: none;
}

@media (min-width: 766px) {
	h2, .h2 {
		font-size: 22px;
	}
}
h2 > sup {
	text-transform: none;
}
h3, .h3 {
	color: #074b98;
	font-family: "proxima-nova-bold", sans-serif;
	font-size: 18px;
	margin: 1.2em 0 10px 0;
	text-transform: uppercase;
}
h3 > sup {
	text-transform: none;
}
h4, .h4 {
	font-family: "proxima-nova-bold", sans-serif;
	font-size: 16px;
	margin: 1.2em 0 7px 0;
	text-transform: uppercase;
	color: black;
}
h5, .h5 {
	font-family: "proxima-nova-bold", sans-serif;
	font-size: 16px;
	margin: 1.2em 0 4px 0;
	color: black;
	text-transform: none;
}


h2 + h3 {
	margin-top: 0.5em;
}
h3 + h4 {
	margin-top: 0;
}
#texte > .lien_video:first-child + h2, #texte > .lien-video:first-child + h2, #texte > h2:first-child {
	margin-top: 0.5em;
}
#texte > .lien_video:first-child + h3, #texte > .lien-video:first-child + h3, #texte > h3:first-child {
	margin-top: 0.3em;
}
[class*="colonnes-"] > .col > h2:first-child, 
[class*="colonnes-"] > .col > h3:first-child, 
[class*="colonnes-"] > .col > h4:first-child,
[class*="colonnes-"] > .col > h5:first-child {
	margin-top: 0;
}


/* Titre après des colonnes */
[class*="colonnes-"] + h2, 
[class*="colonnes-"] + h3, 
[class*="colonnes-"] + h4,
[class*="colonnes-"] + h5 {
	margin-top: 0em;
}

/*
=========================================================================
Slogan
=========================================================================
*/
#intro .slogan, .slogan {
	color: #074b98;
	font-size: 24px;
	font-weight: 100;
	line-height: 28px;
	margin: 0 0 18px;
	text-transform: uppercase;
}
#intro .slogan *, .slogan * {
	font-size: 24px;
}

/* Style spécifique pour une page de contenu, voir page-contenu.css.

/*
=========================================================================
Titres dans des bandes
=========================================================================
*/
h2[class*="picto-"], h3[class*="picto-"] {
	position: relative;
}
h2.titrebande,
.h2.titrebande,
h3.titrebande,
.h3.titrebande {
	background-color: #f2f2f2;
	color: #074b98;
	clear: both;
	display: block;
	font-size: 1.2em;
	margin: 20px 0px;
	padding: 10px 35px 11px 15px;
	position: relative;
	text-transform: uppercase;
	user-select: none;
}
h3.titrebande,
.h3.titrebande {
	font-size: 1.1em;
}
.titrebande.question {
	text-transform: none;
}
h2[class*="picto-"].titrebande:before, h3[class*="picto-"].titrebande:before {
	position: absolute;
	width: 55px;
	height: 80%;
	max-height: 50px;
	content: "";
	background-repeat: no-repeat;
	background-position: center;
	left: 0;
	top: 50%;
	-webkit-transform: translateY(-51%);
	transform: translateY(-51%);
}
h2[class*="picto-"].titrebande, h3[class*="picto-"].titrebande {
	padding-left: 60px;
}
/* Couleurs selon le module */
.citoyens h2.titrebande, .citoyens h3.titrebande {
	background-color: #DDE4D4;
}
.gensaffaires h2.titrebande, .gensaffaires h3.titrebande {
	background-color: #b9d2e8;
}
.touristes h2.titrebande, .touristes h3.titrebande {
	background-color: #ecbcaa;
}
.apropos h2.titrebande, .apropos h3.titrebande {
	background-color: #bfc3d2;
}
/*
=========================================================================
Hyperliens
=========================================================================
*/

/* Couleur standard des hyperliens */
a {
	color: #074b98;
	transition: color 0.3s;
}
a:hover {
	color: #107CC0;
	text-decoration: none;
}
/* Liens a sans href, des liens nons actifs*/

a:not([href]) {
	color: #cccccc;
}

/* Paragraphes avec picto */

p[class*="picto-"] {
	padding-left: 25px;
}
p[class*="picto-"]:before {
	float: left;
	content: " ";
	width: 25px;
	height: 25px;
	margin-left:-28px;
	margin-top: -2px;
}

p.note[class*="picto-"]:before{
    margin-top: -5px;
}

/* Liens avec picto */
.lien[class*="picto-"] {
	padding-left: 20px;
	position: relative;
}
a.lien[class*="picto-"]:before,
span.lien[class*="picto-"]:before
 {
	display: block;
	content: " ";
	background-position: top left;
	background-repeat: no-repeat;
	width: 22px;
	height: 22px;
	top: 1px;
	left: -4.5px;
	position: absolute;
}




h2 > a.lien[class*="picto-"]:before, 
h2 > span.lien[class*="picto-"]:before {
	top: 0px;
}
h3 > a.lien[class*="picto-"]:before, 
h3 > span.lien[class*="picto-"]:before {
	top: -1px;
}
h4 > a.lien[class*="picto-"]:before, 
h4 > span.lien[class*="picto-"]:before {
	top: -2px;
}


/* Si on veut les pictos après à la place */
.picto-apres.picto-carte-interactive, 
.picto-apres.picto-carte-google, 
.picto-apres.picto-cadenas {
	padding-left: 0px;
	padding-right: 21px;
}
.picto-apres.picto-carte-interactive:before, 
.picto-apres.picto-carte-google:before, 
.picto-apres.picto-cadenas:before {
	background-image: none
}
.picto-apres.picto-carte-interactive:after, 
.picto-apres.picto-carte-google:after, 
.picto-apres.picto-cadenas:after {
	display: block;
	content: " ";
	background-position: top right;
	background-repeat: no-repeat;
	width: 22px;
	height: 22px;
	bottom: 1px;
	right: 0;
	position: absolute;
}
.picto-apres.picto-carte-interactive:after {
	background-image: url(../img/pictos/picto-carte-interactive.svg);
}
.picto-apres.picto-carte-google:after {
	background-image: url(../img/pictos/picto-carte-google.svg);
}
.picto-apres.picto-cadenas:after {
	background-image: url(../img/pictos/picto-cadenas.svg);
}



h2 > .picto-apres.picto-carte-interactive:after, 
h2 > .picto-apres.picto-carte-google:after, 
h2 > .picto-apres.picto-cadenas:after{
	bottom: -1px;
}
h3 > .picto-apres.picto-carte-interactive:after, 
h3 > .picto-apres.picto-carte-google:after, 
h3 > .picto-apres.picto-cadenas:after{
	bottom: -1px;
}
h4 > .picto-apres.picto-carte-interactive:after, 
h4 > .picto-apres.picto-carte-google:after, 
h4 > .picto-apres.picto-cadenas:after{
	bottom: -2px;
}

/* Carte interactive + Carte google un à côté de l'autre */
@media (min-width: 766px) {.lien.picto-carte-interactive  + .lien.picto-carte-google {margin-left:10px;}
}



/* Lien surligné d'une couleur */
.lien.style2 {
	background-color: #f2f2f2;
	margin: -2px 1px -3px;
	padding: 3px 5px 4px;
}

.lien.style2[class*="picto-"] {
	padding-left: 23px;
}
.lien.style2[class*="picto-"]:before {
	left: 0;
}

/* En savoir plus (chevron vers la droite) */
.lien.savoir-plus {
	position: relative;
	padding-right: 14px;
}
.lien.savoir-plus:after {
	content: "»";
	display: block;
	width: 25px;
	height: 25px;
	right: -14px;
	top: 0em;
	position: absolute;
	font-size: 120%;
}
/* Retour à (chevron vers la gauche) */
.lien.retour {
	position: relative;
	padding-left: 12px;
}
.lien.retour:before {
	content: "«";
	display: block;
	width: 25px;
	height: 25px;
	left: 0;
	top: 0;
	position: absolute;
	font-size: 120%;
}

/* Hyperlien avec retrait */
.lien.retrait{padding-left:12px;position:relative;}
.lien.retrait:before {content:"•";
	display: block;
	width: 25px;
	height: 25px;
	left: 0;
	top: 0;
	position: absolute;
	font-size: 120%;}
/* 	Adresses courriel trop longues sur mobile
	Coupe l'adresse quand elle est plus large de l'écran et ajoute "..."
*/
@media (max-width: 767px) {
	a[href*="mailto:"] {
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		display: inline-block;
	}
}

/* Numéro de téléphone (mobile) */
@media (max-width: 767px) {
	a[href*="tel:"] {
		padding-left: 15px;
		position: relative;
		white-space: nowrap;
	}
	a[href*="tel:"]:before {
		background-image: url(/img/pictos/picto-telephone2.svg);
		background-position: top left;
		background-repeat: no-repeat;
		content: " ";
		display: block;
		width: 22px;
		height: 22px;
		top: 55%;
		left: -3.5px;
		position: absolute;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
	}
	.encadre.style3 a[href*="tel:"]:before,
	.zone_encadre.style3 a[href*="tel:"]:before,
	.renseignements-supplementaires a[href*="tel:"]:before,
	.renseignements a[href*="tel:"]:before {
		-webkit-filter: invert(50%) brightness(200%);
		filter: invert(50%) brightness(200%);
	}
}
/* Liens vers agrandissement photo (voir styles-images.css ) */





/*
=========================================================================
	Textes
-  Paragraphe
- Listes
- Blockquote
- ???

=========================================================================

*/

strong, b {
	font-family: 'proxima-nova-bold', sans-serif;
}
/*
=========================================================================
    PARAGRAPHES
=========================================================================

*/
p {
	font-size: 16px;
	line-height: 1.35em;
	margin-bottom: 12px;
}
.surtitre {
	font-family: "proxima-nova-bold", sans-serif;
	margin-bottom: 1px;
    font-size: 16.5px;
}
.surtitre + * {
	margin-top: 0;
}
#texte {
	font-size: 1.05em;
	letter-spacing: 0.1px;
}
.note {
	font-size: 14px;
	line-height: 1.15em;
}

.credit {
	font-size: 14px;
	font-style: italic;
	line-height: 1.15em;
}
/* Hack pour faire en sorte que les interlignes ne sont pas touchées par les exposants*/
sup {
	vertical-align: baseline;
	position: relative;
	top: -0.4em;
}
/*
=========================================================================
    LISTES
=========================================================================

*/
ul, ol {
	font-size: 16px;
	margin-top: 0.8em;
	margin-bottom: 1.6em;
	margin-left: 2em;
}
ul li, ol li {
	line-height: 1.3em;
}
li {
	margin-top: 0.4em;
}
ul ul, ol ul, ul ol, ol ol {
	margin-top: 0;
	margin-bottom: 0;
}


/* Liste avec picto au lieu de la puce */

ul.liste-pictos {
	list-style: none;
}


.liste-pictos li[class*="picto-"] {
	
	list-style:none;
}
.liste-pictos li[class*="picto-"]:before {
	margin-top: -2.5px;

}
.liste-pictos li{list-style: disc;
	margin-left: 1px;
	position: relative;}
.liste-pictos li[class*="picto-"]:before{	display: block;
	content: " ";
	background-position: top left;
	background-repeat: no-repeat;
	width: 22px;
	height: 22px;
	top: 1px;
	left: -24px;
	position: absolute;}


/*.liste-pictos li[class*="picto-"] {
	padding-left: 30px;
	margin-left: 1px;
	position: relative;}*/
.liste-pictos.liste-pictos-grands li {
	padding-left: 22px;
    padding-top: 5px;
    padding-bottom: 10px;
}
.liste-pictos.liste-pictos-grands li[class*="picto-"]:before {
	left: -30px;
	width: 44px;
	height: 44px;
	top: 50%;
    transform: translateY(-50%);
}
/* Espace l'image d'en tête du texte au dessous*/
h1 + figure {
	position: relative;
	max-width: none;
}
@media (min-width: 766px) {
	h1 + img, 
	h1 + figure {
		margin-bottom: 14px
	}
}
/*
=========================================================================
 Autres éléments
- Touches de clavier
- Abbréviations
=========================================================================

*/

/* Touches de clavier*/
kbd {
	-moz-border-radius: 3px;
	-moz-box-shadow: 0 1px 0 rgba(0,0,0,0.2), 0 0 0 2px #fff inset;
	-webkit-border-radius: 3px;
	-webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.2), 0 0 0 2px #fff inset;
	background-color: #f7f7f7;
	border: 1px solid #ccc;
	border-radius: 3px;
	box-shadow: 0 1px 0 rgba(0,0,0,0.2), 0 0 0 2px #fff inset;
	color: #333;
	display: inline-block;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 1.4;
	margin: 0 .1em;
	padding: .1em .6em;
	text-shadow: 0 1px 0 #fff
}
abbr[title], acronym[title] {
	text-decoration: none;
}

/*
=========================================================================
Nouveauté - .nouveau
=========================================================================
*/


h3.nouveau:after, h2.nouveau:after, span.nouveau:after{    content: "Nouveau";
    font-size: 12px;
    color: white;margin-left:10px;
    background-color: #dc3b00;
   text-transform:uppercase;vertical-align:2px;
    padding:0px 5px;border-radius:3px;font-family:"Proxima-nova";display:inline-block}

/*
=========================================================================
Nouveauté - .annule
=========================================================================
*/
h3.annule:after, h2.annule:after, span.annule:after{    content: "Annulé";
    font-size: 12px;
    color: white;margin-left:10px;
    background-color: #dc3b00;
   text-transform:uppercase;vertical-align:2px;
    padding:0px 5px;border-radius:3px;font-family:"Proxima-nova";display:inline-block}

/*
=========================================================================
Terminé - .termine
=========================================================================
*/
h3.termine:after, h2.termine:after, span.termine:after, a.termine:after{    content: "Terminé";
    font-size: 12px;
    color: white;margin-left:10px;
    background-color: #dc3b00;
   text-transform:uppercase;vertical-align:2px;
    padding:0px 5px;border-radius:3px;font-family:"Proxima-nova";display:inline-block}


/*
=========================================================================
En cours - .en-cours
=========================================================================
*/


h3.en-cours:after, h2.en-cours:after, span.en-cours:after{    content: "En cours";
    font-size: 12px;
    color: white;margin-left:10px;
    background-color: #dc9600;
   text-transform:uppercase;vertical-align:2px;
    padding:0px 5px;border-radius:3px;font-family:"Proxima-nova";display:inline-block}

/*
=========================================================================
Terminé - .a-venir
=========================================================================
*/
h3.a-venir:after, h2.a-venir:after, span.a-venir:after, a.a-venir:after{    content: "À venir";
    font-size: 12px;
    color: white;margin-left:10px;
    background-color: #dc3b00;
   text-transform:uppercase;vertical-align:2px;
    padding:0px 5px;border-radius:3px;font-family:"Proxima-nova";display:inline-block}

/*
=========================================================================
Terminé - .ferme
=========================================================================
*/
h3.ferme:after, h2.ferme:after, span.ferme:after, a.ferme:after{    content: "Fermé";
    font-size: 12px;
    color: white;margin-left:10px;
    background-color: #dc3b00;
   text-transform:uppercase;vertical-align:2px;
    padding:0px 5px;border-radius:3px;font-family:"Proxima-nova";display:inline-block}



/*
=========================================================================
Bloc texte avec picto
Comme un encadré mais sans le cadre
=========================================================================
*/
.bloc-texte {
	clear: both;
	margin-top: 10px;
	margin-bottom: 15px;
	padding: 0;
	color: inherit;
	text-decoration: inherit;
	min-height: 41px;
}
[class*="picto-"].bloc-texte {
	padding-left: 70px;
	position: relative;
}

@media only screen and (min-width: 766px) {
[class*="picto-"].bloc-texte {
	padding-left: 95px;
	padding-right: 35px;
}
}
[class*="picto-"].bloc-texte:before {
	display: block;
	content: " ";
	background-position: center;
	background-repeat: no-repeat;
	top: 0.1em;
	left: 0;
	width: 60px;
	max-height: 120px;
	min-height: 80px;
	position: absolute;
	text-align: center;
}

@media (min-width: 766px) {
[class*="picto-"].bloc-texte:before {
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	left: 0;
	width: 90px;
	height: 110%;
	max-height: 60px;
}
}

@media (min-width: 766px) {
[class*="picto-"].bloc-texte.bloc-texte-haut:before {
	top:0px;
	-webkit-transform: none;
	transform: none;
}
}
[class*="picto-"].bloc-texte.aligne-droite {
	float: none;
	margin-left: 0;
	padding-left: 0;
	padding-right: 75px;
}
[class*="picto-"].bloc-texte.aligne-droite:before {
	right: 0;
	left: auto;
}


/*
=========================================================================
Contenu superposé
- Permet de faire apparaître un texte par dessus dans une bande grise. Le contenu en dessous est grisé.
=========================================================================
*/
.contenu-superpose {
	position: relative;
}
.contenu-superpose:before {
	content: " ";
	position: relative;
    pointer-events:none;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	opacity: 0.5;
	background-color: white;
	z-index: 0;
}
.installations .contenu-superpose:before {
	height: 80%;
	top: 45px;
}

.contenu-superpose * {
	opacity: 0.7;
}
.contenu-superpose a.lien {
	padding-left: 0;
	/*text-decoration: none;*/
	color: #ccc;
	z-index:0
}
.contenu-superpose a.lien:before {
	content: none;
}
.contenu-superpose:after {

	background-color: rgba(84, 84, 84,0.8);
	position: absolute;
	width: 100%;
	font-family: "proxima-nova-bold", sans-serif;
	font-size: 1.3em;
	color: white;
	padding: 5px;
	text-align: center;
	left: 0px;
	top: 60px;
	text-transform: uppercase;
}
.contenu-superpose.ferme-temporairement:after,.contenu-superpose.fermee-temporairement:after,.contenu-superpose.ferme-saison:after,.contenu-superpose.ferme-definitivement:after,.contenu-superpose.ferme-nouvel-ordre:after, .contenu-superpose.ouverture-bientot:after {
	background-color: rgba(255, 203, 4,0.8);
	color:black!important;
}

@media (min-width: 1100px) {
.contenu-superpose:after {
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}
}

blockquote {
  background: #f9f9f9;
  border-left: 10px solid #ccc;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
}
blockquote:before {
  color: #ccc;
  content: open-quote!important;
  font-size: 3em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.1em;
}
blockquote p {
  display: inline;
}


/* Texte selon les cas */
.contenu-superpose.complet:after {
	content: "Complet";}
.contenu-superpose.annule:after {
	content: "Annulé";}
.contenu-superpose.termine:after {
	content: "Terminé";}
.contenu-superpose.ferme-temporairement:after {
	content: "Fermé temporairement";}
.contenu-superpose.fermee-temporairement:after {
	content: "Fermée temporairement";}
.contenu-superpose.ferme-saison:after {
	content: "Fermé pour la saison";}
.contenu-superpose.ferme-definitivement:after {
	content: "Fermé définitivement";}
.contenu-superpose.ferme-nouvel-ordre:after {
	content: "Fermé jusqu'à nouvel ordre";}
.contenu-superpose.ouverture-bientot:after {
	content: "Ouverture à venir";}