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

h1, .h1 {
	color: #074b98;
	font-weight: 700;
	font-size: 26px;
	line-height: 1.025em;
	margin: 0.2em 0 12px;
	letter-spacing: -.75px;
}
@media (min-width: 767px) {
	h1, .h1 {
		font-size: 30px;
		
	}
}
h1 > sup {
	text-transform: none;
}

h2, .h2 {
	font-size: 23px;
	letter-spacing: -.25px;
	text-transform: none;
    color: #074b98;
    font-weight: bold;
	margin: 1.15em 0 12px 0;
    margin: 1.55em 0 14px 0;
    line-height: 1.15em;
}

@media (min-width: 767px) {
	h2, .h2 {
        font-size: 24px;
	}
}
h2 > sup {
	text-transform: none;
}
h3, .h3 {
    color: #222;
    margin: 1.4em 0 12px 0;
	margin: 1.75em 0 13px 0;
    font-weight: bold;
    line-height: 1.15em;
    font-size: 19px;
    letter-spacing: -.25px;
}
@media (min-width: 767px) {
    h3, .h3 {
        font-size: 20.5px;
    }
}
h3 > sup {
	text-transform: none;
}
h4, .h4 {
	color: #343434;
	font-size: 17px;
	line-height: 1.25em;
    margin: 1.2em 0 4px 0;
}
h5, .h5 {
	font-weight: bold;
	font-size: 16.5px;
	margin: 1.2em 0 4px 0;
	text-transform: none;
    color: #074b98;
}

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

img + #texte > .lien-video:first-child + h2, 
img + #texte > h2:first-child {
    margin-top: 0;
}
#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;
}

/* Titre après des tuiles */
[class*="tuiles"] + h2 
 {
	margin-top: 2.55em;
}

/* Titre après des tuiles */
[class*="tuiles"] + h2 
 {
	margin-top: 2.55em;
}

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

/*
=========================================================================
Intro des installations sportives
=========================================================================

*/
.introduction {
 margin: 20px 0
}
/*
=========================================================================
Sous-titre
=========================================================================

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

h3 + .soustitre {
	margin-top: -.25rem;
}

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-"], h4[class*="picto-"] {
	position: relative;
}

h2.titrebande,
.h2.titrebande {
	background-color: #f2f2f2;
	color: #074b98;
	clear: both;
	display: block;
	font-size: 1.4em;
	margin: 30px 0 15px;
	padding: 12px 35px 11px 15px;
	position: relative;
}
h3.titrebande,
.h3.titrebande
h4.titrebande,
.h4.titrebande  {
	background-color: #f2f2f2;
	color: #074b98;
	clear: both;
	display: block;
	font-size: 1.2em;
	margin: 30px 0 15px;
	padding: 14px 35px 11px 15px;
	position: relative;
}
h2[class*="picto-"]:before, h3[class*="picto-"]:before, h4[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;
}
h4[class*="picto-"] {
	padding-left: 25px;
}
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;*/
	background-color: #E5EAEB;
}
/*
=========================================================================
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,
a.lien.vedette {
    display: inline-block;
    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,
a.lien.vedette.gris {
    color: #464646
}
a.lien-vedette.grand,
a.lien.vedette.grand {
    font-size: 1.075em;
}
a.lien-vedette.tres-grand,
a.lien.vedette.tres-grand {
    font-size: 1.35rem;
    font-weight: 100;
    text-decoration: none;
    letter-spacing: -.5px;
}

a.lien-vedette:after,
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,
a.lien.vedette.tres-grand:after {
    top: 0.13em;
}
a.lien-vedette:focus,
a.lien.vedette:focus,
a.lien-vedette:hover,
a.lien.vedette:hover {
    text-decoration: none;
}
a.lien-vedette:focus:after,
a.lien.vedette:focus:after,
a.lien-vedette:hover:after,
a.lien.vedette:hover:after {
    right: -0.8em;
}
a.lien-vedette.tres-grand:focus,
a.lien.vedette.tres-grand:focus,
a.lien-vedette.tres-grand:hover,
a.lien.vedette.tres-grand:hover {
    text-decoration: underline;
}


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

}
h2>a.lien-vedette:after,
h2>a.lien.vedette:after,
.h2>a.lien-vedette:after,
.h2>a.lien.vedette:after {
    top: 5px;
}
h3 > a.lien-vedette:after,
h3>a.lien.vedette:after,
.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;
}*/

.picto-apres {
	padding-left: 0px !important;
	padding-right: 21px;
}
.picto-apres:before {
	background-image: none !important;
}
.picto-apres:after {
	display: block;
	content: " ";
	background-position: top right;
	background-repeat: no-repeat;
	width: 22px;
	height: 22px;
	bottom: 1px;
	right: 0;
	position: absolute;
}




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: 18px;
		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:not(.rens-haut) 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-weight: bold;
}

/*
=========================================================================
    PARAGRAPHES
=========================================================================

*/
p {
	font-size: 16.5px;
	line-height: 1.35em;
	margin-bottom: 14px;
}
.surtitre {
	font-weight: bold;
	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.25;
}

.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: 16.5px;
	margin-top: 0.8em;
	margin-bottom: 1.6em;
	margin-left: 1.75em;
}
ul li, ol li {
	line-height: 1.3em;
}
li {
	margin-top: 0.6em;
}
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
	}
}

/* Liste en grille avec pictos moyens (Section Emplois) */
ul.liste-pictos.liste-pictos-tuiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.5rem;
    margin-left: 0;
    padding: 0;
}
ul.liste-pictos.liste-pictos-tuiles.liste-2-colonnes {
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
ul.liste-pictos.liste-pictos-tuiles li {
    padding-block: 0.2rem;
    align-items: center;
    align-self: center;
    min-height: 45px;
    padding-left: 45px;
    position: relative;
}
ul.liste-pictos.liste-pictos-tuiles li::before {
    margin: 0 auto 5px;
    width: 45px;
    height: 45px;
    background-position: center;
    top: -7px;
    left: -6px;
}


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


/*
=========================================================================
Étiquettes
=========================================================================
*/

.etiquette {
	background-color: var(--c-gris-sombre);
	border-radius: 3px;
	color: white;
	display: inline-block;
	font:  600 12px/18px "proxima-nova";
	letter-spacing: 0;
    padding: 0 6px;
	position: relative;
	text-transform: uppercase;
	vertical-align: 2px;
}
h2 > .etiquette,
h3 > .etiquette {
	bottom: 1px;
}
h2.trigger .etiquette,
h3.trigger .etiquette {
	margin-left: .5rem !important;
	margin-top: inherit;
	padding: 2px 8px;
}
a > .etiquette {
	margin-left: 10px;
}

.c-orange { background-color: color-mix(in srgb, var(--c-orange) 65%, #800000); }
.c-jaune { background-color: var(--c-jaune); color: black }
.c-vert { background-color: var(--c-vert) }
.c-vert-sombre { background-color: var(--c-vert-sombre) }
.c-citoyens { background-color: var(--c-citoyens) }
.c-gaffaires { background-color: var(--c-gaffaires)}
.c-touristes {background-color: var(--c-touristes)}
.c-apropos {background-color: var(--c-apropos)}
.c-bleu-gris {background-color: var(--c-bleu-gris)}
.c-rouge-pompier {background-color: var(--c-rouge-pompier)}
.c-bleu-ville {background-color: var(--c-bleu-ville)}
.c-bleu-moyen {background-color: var(--c-bleu-moyen)}
.c-bleu-sombre { background-color: var(--c-bleu-sombre)}
.c-bleu-cyan {	background-color: var(--c-bleu-cyan)}
.c-gris-pale {	background-color: var(--c-gris-pale);
	color: black}
.c-gris-moyen {	background-color: var(--c-gris-moyen);
	color: black}
.c-gris {	background-color: var(--c-gris);
	color: black}
.c-gris-sombre {	background-color: var(--c-gris-sombre)}
.c-noir {	background-color: var(--c-noir)}
.c-citoyens-pale {	background-color: var(--c-citoyens-pale);
	color: black}
.c-gaffaires-pale {	background-color: var(--c-gaffaires-pale);
	color: black}
.c-touristes-pale {	background-color: var(--c-touristes-pale);
	color: black}
.c-apropos-pale {	background-color: var(--c-apropos-pale);
	color: black}
.c-rouge {	background-color: color-mix(in srgb, var(--c-rouge) 95%, black);}


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



/*
/*
=========================================================================
Réservation requise - .reservation
=========================================================================
*/
h2.reservation:after, h3.reservation:after, h4.reservation:after, span.reservation:after, a.reservation:after{    		content: "Réservation requise";
	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;
}



/*
/*
=========================================================================
Accès exclusif - .acces-exclusif
=========================================================================
*/
h2.acces-exclusif:after, h3.acces-exclusif:after, h4.acces-exclusif:after, span.acces-exclusif:after, a.acces-exclusif:after
{  
	content: "Accès exclusif";
	background-color: #697697;
    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-weight: bold;
	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,.contenu-superpose.ferme-greve: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";}
.contenu-superpose.ferme-greve:after {
    content: "Fermé (grève)";
}


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

/*
===================================================================
	Indicateur pour numscroller (Dev. durable et Emplois)
===================================================================
*/
.indicateur p {
    padding-left: 45px;
    line-height: 1.1em;
}
.indicateur .ind {
    color: #074b98;
    font: 500 1.5em / 1.6rem 'proxima-nova', sans-serif;
    letter-spacing: -.5px;
    margin-bottom: 2px;
}
.indicateur .ind.tres-grand, .indicateur .ind .tres-grand {
    font: 500 88px / 70px 'proxima-nova', sans-serif;
    margin-left: -3px;
    padding-left: 45px;
}
.indicateur .gras, .indicateur .ind.gras {
    font-weight: 700;
}

/***styles installations sportives - loisirs ****/
	/**légende de l'état des pistes**/
.piste-legende {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1rem;
  font-size: 0.95rem;
  align-items: center;
background-color: #DCDCDC;
padding: 1rem;
margin-top:2rem;
}

.piste-legende p {
 margin-bottom: 0
}

.legende-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.legende-item .icon {
  width: 20px;
  height: auto;
}
	
		
/**fart **/
.fart-block {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.fart.nom {
  font-size: 1.1rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.fart {
  font-size: 0.875rem;
  padding: 0.3em 0.6em;
  border-radius: 5px;
  background-color: #eee;
  color:whitesmoke;
  white-space: nowrap;
	font-weight: bold;
}
.fart-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
/* Couleurs de fart */
.fart.vert {
  background-color: #108848;
}

.fart.bleu {
  background-color: #107CC0;
	color:white
}

.fart.rouge {
  background-color: #dc3b00;
}

.fart.violet {
  background-color: #8015db;
}
		
.fart.jaune {
  background-color: #ffcb04;
color: black;
}
.fart.blanc {
  background-color: #efefef;
color: #545454;
	border: 1px solid #545454
}
			

/* État des pistes de ski et difficulté*/
		
.piste-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  /*flex-wrap: wrap;*/
}

/* Icônes de difficulté */
.difficulte {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border-radius: 2px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Icône de difficulté */
.piste-icon {
  width: 20px;
  height: auto;
}		

/* Icône du style de ski */
.piste-style {
  width: 28px;
  height: auto;
}		
		
.etat {
  padding: 0.2em 0.6em;
  border-radius: 4px;
  font-size: 0.9rem;
}


/* Couleurs selon état */
.etat.bonne {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.etat.passable {
  background: #fff3cd;
  color: #856404;
  border: 1px solid #ffeeba;
}

.etat.ferme {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

.message { 
	font-size: 14px; color:#545454; font-style: italic; font-weight: bold	
	}	

/**étiquette statut des fiches d'installations sportives ouvert, fermé etc**/
.ouvert{
	background-color: green;
    padding: 0.3rem;
    border-radius: 6px;
    font-size: 0.6em;
	margin-left: 12px
	}	
		
		
.statut-fiche-installation {padding: 0.1rem 0.3rem;border-radius: 6px; font-weight: bold; font-size: 14px; color: black; }
		
.statut-ouvert {border: 2px solid #108848;}		
.statut-ferme {border: 2px solid #dc3b00;}
.statut-preparation {border: 2px solid #ee7523;}	
/**test**/
.etiquette {
    margin-left: 0!important;
    margin-right: 10px;
    padding: 5px 10px;
    font-size: 13px;
	margin-top:4px;
	text-transform:none
}