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

h1, .h1 {
	color: #074b98;
	font-family: "proxima-nova-bold", sans-serif;
	font-size: 23px;
	margin: 0.2em 0 12px;
	text-transform: uppercase;
}
@media (min-width: 766px) {
	h1, .h1 {
        font-size: 25px;
	}
}
h1 > sup {
	text-transform: none;
}

h2, .h2 {
	font-size: 23px;
	letter-spacing: -.25px;
	text-transform: none;
    color: #074b98;
    font-family: 'proxima-nova-bold', sans-serif;
    font-weight: 600;
    margin: 1.15em 0 12px 0;
    line-height: 1.15em;
}

@media (min-width: 766px) {
	h2, .h2 {
        font-size: 25px;
	}
}
h2 > sup {
	text-transform: none;
}
h3, .h3 {
    color: #222;
    margin: 1.4em 0 12px 0;
    font-family: "proxima-nova-bold", sans-serif;
    line-height: 1.15em;
    font-weight: 600;
    font-size: 19px;
    letter-spacing: -.25px;
}
@media (min-width: 766px) {
    h3, .h3 {
        font-size: 20px;
    }
}
h3 > sup {
	text-transform: none;
}
h4, .h4 {
	font-family: "proxima-nova-bold", sans-serif;
    font-weight: 600;
	margin: 1.2em 0 4px 0;
	color: black;
    text-transform: none;
    font-size: 17px;
}
h5, .h5 {
	font-family: "proxima-nova-bold", sans-serif;
	font-size: 16px;
    font-weight: 600;
	margin: 1.2em 0 4px 0;
	text-transform: none;
    color: #074b98;
}


h2 + h3 {
	margin-top: 0.5em;
}
h3 + h4 {
	margin-top: 0;
}
#texte > .lien-video:first-child + h2, #texte > h2:first-child {
    margin-top: .75em;
}

img + #texte > .lien-video:first-child + h2, img + #texte > h2:first-child {

    margin-top: .25em;
}
#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;
}

/*
=========================================================================
Sous-titre
=========================================================================

*/
.soustitre {
	font-weight: 600;
	letter-spacing: 0;
    font-size: 1em;
    font-family: 'proxima-nova-medium';
}
#texte .soustitre:first-child,
h1 + .soustitre {
	margin-top: -10px;
}
h2 + .soustitre {
	margin-top: -9px;
}

h3 + .soustitre {
	margin-top: -8px;
}

h4 + .soustitre {
	margin-top: -5px;
}

/* 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
h4.titrebande,
.h4.titrebande  {
	background-color: #f2f2f2;
	color: #074b98;
	clear: both;
	display: block;
	font-size: 1.2em;
	margin: 15px 0;
	padding: 10px 35px 11px 15px;
	position: relative;
	user-select: none;
}
/*
h3.titrebande,
.h3.titrebande {
	font-size: 1.1em;
}

.titrebande.question {
	text-transform: none;
}
*/
h2[class*="picto-"]:before, h3[class*="picto-"]:before {
	position: absolute;
	width: 40px;
	height: 110%;
	max-height: 50px;
	content: "";
	background-repeat: no-repeat;
	background-position: center;
	left: 0;
	top: 50%;
	transform: translateY(-51%);
}
h2[class*="picto-"], h3[class*="picto-"] {
	padding-left: 40px;
}
h2[class*="picto-"].titrebande:before, h3[class*="picto-"].titrebande:before, h4[class*="picto-"].titrebande:before {
	width: 55px;
	height: 80%;
}
h2[class*="picto-"].titrebande, h3[class*="picto-"].titrebande, h4[class*="picto-"].titrebande {
	padding-left: 60px;
}
/* Couleurs selon le module */
.citoyens h2.titrebande, .citoyens h3.titrebande, .citoyens h4.titrebande {
	background-color: #DDE4D4;
}
.gensaffaires h2.titrebande, .gensaffaires h3.titrebande, .gensaffaires h4.titrebande {
	background-color: #b9d2e8;
}
.touristes h2.titrebande, .touristes h3.titrebande, .touristes h4.titrebande {
	background-color: #ecbcaa;
}
.apropos h2.titrebande, .apropos h3.titrebande, .apropos h4.titrebande {
	background-color: #bfc3d2;
}
/*
=========================================================================
Hyperliens
=========================================================================
*/

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

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

/*
=========================================================================
Hyperliens en vedette - emphase et chevron
=========================================================================
*/
a.lien-vedette {
    display: inline-block;
    font-family: 'proxima-nova-medium';
    position: relative;
    text-decoration: underline;
    font-weight: 900;
    font-size: 1em;
    letter-spacing: .2px;
    line-height: 1.1em;
    padding-right: 1.2em;
    padding-top: 0.2em;
    padding-bottom: 0.2em;
    margin-bottom: 0.6em;
}
a.lien-vedette.gris {
    color: #464646
}
a.lien-vedette.grand {
    font-size: 1.075em;
}
a.lien-vedette.tres-grand {
    font-size: 1.35rem;
    font-weight: 100;
    text-decoration: none;
    letter-spacing: -.5px;
}

a.lien-vedette:after {
    content: "";
    background-image: url(/img/pictos/picto-fleche-droite.svg);
    background-repeat: no-repeat;
    display: inline-block;
    width: 0.9em;
    height: 0.9em;
    position: relative;
    top: 0.15em;
    right: -0.4em;
    transition: right .3s;
    margin-right: -0.9em;
}
a.lien-vedette.tres-grand:after {
    top: 0.13em;
}
a.lien-vedette:focus,
a.lien-vedette:hover {
    text-decoration: none;
}
a.lien-vedette:focus:after,
a.lien-vedette:hover:after {
    right: -0.8em;
}
a.lien-vedette.tres-grand:focus,
a.lien-vedette.tres-grand:hover {
    text-decoration: underline;
}


h2 > a.lien-vedette,
h3 > a.lien-vedette {
	margin-bottom: 0;
	padding-bottom: 0;

}
h2 > a.lien-vedette:after, 
.h2 > a.lien-vedette:after {
    top: 5px;
}
h3 > a.lien-vedette:after, 
.h3 > a.lien-vedette:after {
    top: 3.5px;
}

/* Paragraphes avec picto */

p[class*="picto-"] {
	padding-left: 32px;
}
p[class*="picto-"]:before {
	float: left;
	content: " ";
	width: 25px;
	height: 25px;
	margin-left:-32px;
	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:"] {
		position: relative;
		display: inline-block;
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		top: 5px;
	}
}

/* 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;
}

.note.bdi-date-maj {
    margin-top: 40px;
}

.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 {
    font-size: 75%;
    line-height: 0;
	vertical-align: baseline;
	position: relative;
	top: -0.4em;
}
sub {
    font-size: 75%;
    line-height: 0;
    vertical-align: baseline;
	position: relative;
    bottom: -0.25em;
}
/*
=========================================================================
    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
=========================================================================
*/


h2.nouveau:after, h3.nouveau:after, h4.nouveau:after, span.nouveau:after, a.nouveau:after{    
	content: "Nouveau";
	background-color: #dc3b00;
    border-radius: 3px;
	color: white;
	display: inline-block;
	font:  600 12px/18px  "proxima-nova";
	margin-left: 10px;
    padding: 0 6px;
	text-transform:uppercase;
	vertical-align:2px;
}

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

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


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


h2.en-cours:after, h3.en-cours:after, h4.en-cours:after, span.en-cours:after, a.en-cours:after{   	  content: "En cours";
	background-color: #dc9600;
    border-radius: 3px;
	color: white;
	display: inline-block;
	font:  600 12px/18px  "proxima-nova";
	margin-left: 10px;
    padding: 0 6px;
	text-transform:uppercase;
	vertical-align:2px;
}

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

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

/*
=========================================================================
Reporté - .reporte
=========================================================================
*/
h2.reporte:after, h3.reporte:after, h4.reporte:after, h5.reporte:after, span.reporte:after, a.reporte:after{    
	content: "Reporté";
	background-color: #dc3b00;
    border-radius: 3px;
	color: white;
	display: inline-block;
	font:  600 12px/18px  "proxima-nova";
	margin-left: 10px;
    padding: 0 6px;
	text-transform:uppercase;
	vertical-align:2px;
}



/*
=========================================================================
Complet - .complet
=========================================================================
*/
h2.complet:after, h3.complet:after, h4.complet:after, span.complet:after, a.complet:after{    		content: "Complet";
	background-color: #dc3b00;
    border-radius: 3px;
	color: white;
	display: inline-block;
	font:  600 12px/18px  "proxima-nova";
	margin-left: 10px;
    padding: 0 6px;
	text-transform:uppercase;
	vertical-align:2px;
}

/*
=========================================================================
On rerute - .recrute
=========================================================================
*/
h2.recrute:after, h3.recrute:after, h4.recrute:after, span.recrute:after, a.recrute:after{    		content: "On recrute";
	background-color: #dc3b00;
    border-radius: 3px;
	color: white;
	display: inline-block;
	font:  600 12px/18px  "proxima-nova";
	margin-left: 10px;
    padding: 0 6px;
	text-transform:uppercase;
	vertical-align:2px;
}



/*
=========================================================================
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 (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;
	min-height: 40px;
	position: absolute;
	text-align: center;
}
@media (min-width: 490px) {
	[class*="picto-"].bloc-texte:before {
		height: 100%;
		width: 65px;
		min-height: 55px;
	
	}
}
@media (min-width: 766px) {
	[class*="picto-"].bloc-texte:before {
		top: 50%;
		transform: translateY(-50%);
		left: 0;
		width: 90px;
		height: 100%;
		min-height: 70px;
		max-height: 80px;
	
	}
}

@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, .contenu-superpose.ferme-preparation-saison: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 {
	border-left: 0.5em solid #eeeeee;
  	margin: 1em 0;
  	padding: 5px 1.5em 5px 1.55em;
}

blockquote > p:last-child {
  margin-bottom: 0
}


/* 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";}
.contenu-superpose.ferme-preparation-saison:after{content: "En préparation pour la saison";}


/* Ligne du temps compacte */
/*
===================================================================
	Progression
===================================================================
*/
.progression {
  margin: 1em 0;
  padding-left: 55px;
  position: relative; }

.progression:before {
  background-color: #b9d2e6;
  content: "";
  position: absolute;
  height: 97%;
  width: 4px;
  left: 14.5px; }

.progression .item {
  padding-bottom: 1em;
  min-height: 40px;
  position: relative; }

@media (min-width: 767px) {
  .progression .item {
    min-height: 50px; } }
.progression .item:before {
  background: white;
  border: 4px solid #b9d2e6;
  border-radius: 14px;
  content: "";
  position: absolute;
  top: -2.5px;
  left: -52.5px;
  width: 28px;
  height: 28px; }

.progression .item.complet {
  min-height: 55px; }

@media (min-width: 767px) {
  .progression .item.complet {
    min-height: 65px; } }

.progression.compact .item.complet {
    min-height: auto; 
} 
.progression .item.complet:before {
  background: #b9d2e6 url(/img/pictos/picto-accepter-blanc.svg); }

.progression .item.en-cours:before {
  background: #00539f;
  border-radius: 19px;
  top: -7.5px;
  left: -57.5px;
  width: 38px;
  height: 38px; }