/*
=========================================================================
	Encadré
     - avec ou sans pictogramme, à gauche
     - blanc, gris ou bleu
     - avec ou sans flèche, à droite

     La classe .zone_encadre fonctionne par souci de compatibilité
     mais il faut maintenant utiliser .encadre
=========================================================================



    L'encadré de base est blanc avec un cadre gris *
    <div class="encadre"
*/
.zone_encadre, /* obsolète */
.encadre,
.col.encadre {
	background-color: white;
	box-shadow: inset 0 0 0 0.3em #eeeeee;
	display: block;
	margin-top: 10px;
	margin-bottom: 15px;
	padding: 1em;
	color: inherit;
	text-decoration: inherit;
	clear:both
}

@media (min-width: 766px) {
	.zone_encadre,
	.encadre,
	.col.encadre {
		box-shadow: inset 0 0 0 0.5em #eeeeee;
		padding: 25px 2em 25px 2em;
	}
}
/* Titres dans les encadrés*/
.zone_encadre>h2:first-child,
.encadre>h2:first-child,
.zone_encadre>h3:first-child,
.encadre>h3:first-child,
.zone_encadre>h4:first-child,
.encadre>h4:first-child,.zone_encadre>h5:first-child,
.encadre>h5:first-child,
.zone_encadre>.lien-video.aligne_droite + h2,
.encadre>.lien-video.aligne_droite + h2,
.encadre>.lien-video.aligne-droite + h2,
.zone_encadre>.lien-video.aligne_droite + h3,
.encadre>.lien-video.aligne_droite + h3,
.encadre>.lien-video.aligne-droite + h3 {
	margin-top: 0;
}
/* Paragraphes dans les encadrés*/
.zone_encadre>p:first-child,
.encadre>p:first-child {
	margin-top: 0;
}

/* Lorsqu'il y a une image en premier dans l'encadré */
.zone_encadre > .ph_aligne_droite + h2,
.zone_encadre > .ph_aligne_droite + h3,
.zone_encadre > .ph_aligne_droite + h4,
.encadre > .ph_aligne_droite + h2,
.encadre > .ph_aligne_droite + h3,
.encadre > .ph_aligne_droite + h4,
.zone_encadre > .ph_aligne_gauche + h2,
.zone_encadre > .ph_aligne_gauche + h3,
.zone_encadre > .ph_aligne_gauche + h4,
.encadre > .ph_aligne_gauche + h2,
.encadre > .ph_aligne_gauche + h3,
.encadre > .ph_aligne_gauche + h4,
.zone_encadre > .ph-aligne-droite + h2,
.zone_encadre > .ph-aligne-droite + h3,
.zone_encadre > .ph-aligne-droite + h4,
.zone_encadre > .ph-aligne-gauche + h2,
.zone_encadre > .ph-aligne-gauche + h3,
.zone_encadre > .ph-aligne-gauche + h4,
.encadre > .aligne-droite + h2,
.encadre > .aligne-droite + h3,
.encadre > .aligne-droite + h4,
.encadre > .aligne-gauche + h2,
.encadre > .aligne-gauche + h3,
.encadre > .aligne-gauche + h4, .encadre > .aligne-droite + a > h2 {
	margin-top: 0;
	margin-bottom: 2px;
}

/* Enlève de l'espace après le dernier paragraphe ou la dernière liste à puce d'un encadré pour que le padding soit uniforme */
.zone_encadre > p:last-child,
.encadre > p:last-child,
.zone_encadre > ul:last-child,
.encadre > ul:last-child,
.zone_encadre > ol:last-child,
.encadre > ol:last-child,
.zone_encadre > span:last-child > p:last-child,
.encadre > span:last-child > p:last-child  {
	margin-bottom: 0;
}
.encadre > p:last-child > a.btn {
	margin-bottom: 7px;
}
.encadre > p:last-child > a.lien-vedette {
    padding-bottom: 0;
}

/*
   L'encadré peut afficher un pictogramme à gauche.
   <div class="encadre picto-*"
*/
div[class*="picto-"].zone_encadre,
div[class*="picto-"].encadre {
	padding-left: 50px;
	position: relative;
}

@media only screen and (min-width: 766px) {
	div[class*="picto-"].zone_encadre,
	div[class*="picto-"].encadre {
		padding-left: 90px;
	}
}
div[class*="picto-"].zone_encadre:before,
div[class*="picto-"].encadre:before {
	display: block;
	content: " ";
	background-position: center;
	background-repeat: no-repeat;
	top: 1.1em;
	left: 3px;
	width: 45px;
	height: 40%;
	max-height: 30px;
	position: absolute;
	text-align: center;
}

@media (min-width: 766px) {
	div[class*="picto-"].zone_encadre:before,
	div[class*="picto-"].encadre:before {
		top: 50%;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
		left: 10px;
		width: 75px;
		height: 50%;
		max-height: 65px;
	}
}

@media (min-width: 766px) {
	div[class*="picto-"].zone_encadre.encadre-haut:before, div[class*="picto-"].encadre.encadre-haut:before {
		top: 1.15em;
		-webkit-transform: none;
		transform: none;
	}
}


/*
   Encadré avec un picto encerclé

*/
.encadre[class*="picto-"].p-cercle:before {
	border-width: 2px;
	max-height: 45px;
} 
@media (min-width: 766px) {
	.encadre[class*="picto-"].p-cercle:before {
		border-width: 3px;
		width:65px;
		max-height: 65px;
		left: 15px;
	} 
	.encadre.encadre-haut[class*="picto-"].p-cercle:before {
		top: 1.45em;
	} 
}

/*
   Encadré avec un picto à droite.

*/
div[class*="picto-"].zone_encadre.aligne-droite,
div[class*="picto-"].encadre.aligne-droite {
	float: none;
	padding-left: 14px;
	padding-right: 50px;
	margin-left: 0;
}
@media only screen and (min-width: 766px) {
	div[class*="picto-"].zone_encadre.aligne-droite,
	div[class*="picto-"].encadre.aligne-droite {
		padding-left: 2em;
		padding-right: 90px;
	}
}
div[class*="picto-"].zone_encadre.aligne-droite:before,
div[class*="picto-"].encadre.aligne-droite:before {
	right: 3px;
	left: auto;
}

@media (min-width: 766px) {
	div[class*="picto-"].zone_encadre.aligne-droite:before,
	div[class*="picto-"].encadre.aligne-droite:before {
		right: 10px;
	}
}



/*
   L'encadré peut être gris. On l'appelle le "style2".
   <div class="encadre style2"

*/

.encadre.style2 {
	background-color: #f2f2f2;
	box-shadow: none;
}
div[class*="picto-"].encadre.style2:before {
	left: 2px;
}

@media only screen and (min-width: 766px) {
	div[class*="picto-"].encadre.style2:before {
		left: 8px;
	}
}

div[class*="picto-"].encadre.style2.aligne-droite:before {
	right: 2px;
	left: auto;
}

@media only screen and (min-width: 766px) {
	div[class*="picto-"].encadre.style2.aligne-droite:before {
		right: 8px;
		left: auto;
	}
}
/*
   L'encadré peut être bleu. On l'appelle le "style3"
   <div class="encadre style3"

*/

.encadre.style3 {
	background-color: #074b98;
	box-shadow: none;
}
.encadre.style3>* {
	color: white;
}
.encadre.style3 a {
	color: white;
}

.encadre.style3 a.lien[class*="picto-carte-interactive"]:before {
	filter: invert(50%) brightness(200%);
}
.encadre.style3 a.lien[class*="picto-carte-google"]:before {
	background-image: url(/img/pictos/picto-carte-google-blanc.svg)
}
.encadre.style3 a.lien-vedette:after {
    filter: invert(50%) brightness(200%);
}


/*
  Encadré bordure jaune. On l'appelle le "style4"
   <div class="encadre style4"

*/

.encadre.style4 {
	box-shadow:inset 0 0 0 0.3em #ffcb04;
}

@media (min-width: 766px) {
	.encadre.style4 {
        box-shadow:inset 0 0 0 0.5em #ffcb04;
    }
}

/* Le filter change le SVG bleu en blanc dans Chrome/Firefox/Safari et Edge.
   Mais pas dans IE. Pour ce dernier, il faut appeler une version blanche dans _pictos.css */
div[class*="picto-"].encadre.style3:before {
	-webkit-filter: invert(50%) brightness(200%);
	filter: invert(50%) brightness(200%);
}
div[class*="picto-"].encadre.style3:before {
	left: 2px;
}

@media only screen and (min-width: 766px) {
	div[class*="picto-"].encadre.style3:before {
		left: 8px;
	}
}
div[class*="picto-"].encadre.style3.aligne-droite:before {
	right: 2px;
	left: auto;
}

@media only screen and (min-width: 766px) {
	div[class*="picto-"].encadre.style3.aligne-droite:before {
		right: 8px;
		left: auto;
	}
}
/*
   Message d'avertissement (annonce de fermeture d'application, info-collecte : changement de collecte)
   <div class="encadre encadre-avertissement"

*/
.encadre-avertissement {
	background-color: #ffcb04;
	box-shadow: none;
	padding: 1em 1.8em 1em;
}
.encadre-avertissement a, .encadre-avertissement a:focus, .encadre-avertissement a:hover {
	color: #000000;
}
.encadre-avertissement a.btn, .encadre-avertissement a.btn:focus, .encadre-avertissement a.btn:hover {
	color: #FFFFFF;
}
.encadre-avertissement h2 {color:black}
div[class*="picto-"].encadre-avertissement:before {
	filter: invert(50%) brightness(0%);
}
/*
   Message d'alerte (Bande d'urgence)
   <div class="encadre encadre-urgent"

*/
#bande-urgente{
	text-align:center;
	background-color: #dc3b00;
	box-shadow: 0px -15px 10px -10px rgba(0, 0, 0, 0.3) inset;
}

#bande-urgente span{display:block}
#bande-urgente a.btn-fermer span{display:none}

.encadre-urgent {
	max-width: 1160px;
	text-align: left;
	background-color: transparent;
	box-shadow: none;
	color: white;
	padding: 0.9em 2.2em 1em 1.8em;
	margin: auto;
}
.encadre-urgent p {
	margin: 0;
}


.encadre-urgent a{
	color: #ffffff;
}
.encadre-urgent a:focus,
.encadre-urgent a:hover{color:#e6e6e6}

div[class*="picto-"].encadre-urgent:before {
	height: 70%;
	-webkit-filter: invert(50%) brightness(200%);
	filter: invert(50%) brightness(200%);
}
/* Bouton Fermer (X) */
.encadre-urgent .btn-picto.picto-fermer {
	background-color: transparent;
	position: absolute;
	top: 5px;
	right: 2px;
}
/*
   Encadré d'erreur utilisé principalement dans les formulaires et les applications pour le message d'erreur général
   <div class="encadre encadre-erreur"
*/

.encadre-erreur {
	background-color: #dc3b00;
	box-shadow: none;
	color: white;
	padding: 1em 1.8em 1em;
}
div[class*="picto-"].encadre-erreur:before {
	-webkit-filter: invert(50%) brightness(200%);
	filter: invert(50%) brightness(200%);
}
/*
    ENCADRÉ AVEC IMAGE
    <div class="encadre encadre-image"

    aligne-gauche (par défaut) ou aligne-droite

*/

.encadre-image {
	overflow: hidden;
	position: relative;
}

@media (min-width: 766px) {
	.encadre-image {
		overflow: hidden;
		position: relative;
		padding-left: 2em;
	}
}
.encadre-image figure {
	margin-top: 0;
	max-width: 200px;
}

@media (min-width: 766px) {
	.encadre-image figure {
		display: -webkit-flex;
		display: flex;
		align-items: center;
		margin-top: 3px;
		position: absolute;
		height: calc(100% - 2.1em);
		overflow: hidden;
	}
    .encadre.encadre-image figure {
        height: calc(100% - 3.55em);
    }
    
}

.encadre-image figure img{
	max-width: 200px;
}
.encadre-image.encadre-haut figure {
	-webkit-align-items: flex-start;
	align-items: flex-start;
	margin-top: 2px;
	height: calc(100% - 2.9em);
}

@media (min-width: 766px) {
	.encadre-image>*:not(figure) {
		padding-left: 220px;
	}
}
.encadre-image.encadre-image-complete figure {
	position: relative;
	margin-top: -1px;
	margin-right: 1.2em;
}
@media (min-width: 766px) {
	.encadre-image.encadre-image-complete figure {
		float: left;
		margin-bottom: 0;
	}
}
.encadre-image.encadre-image-complete img {
	max-width: 250px;
}

@media (min-width: 766px) {
	.encadre-image.aligne-droite {
		padding-left: 2em;
		padding-right: 1.5em;
		float: none;
		margin-left: 0;
	}
	.encadre-image.aligne-droite figure {
		right: 1.5em;
	}
	.encadre-image.aligne-droite>*:not(figure) {
		padding-left: 0;
		padding-right: 220px;
	}
	.encadre-image.encadre-image-complete.aligne-droite figure {
		float: right;
		margin-right: 0;
		margin-left: 1.5em;
		right: inherit;
	}
}
.encadre.encadre-image figure + h2, .encadre.encadre-image figure + h3, .encadre.encadre-image figure + h4 {
	margin-top: 0;
}

/*
    Un encadre dans un encadre

*/
@media (min-width: 766px) {
    .encadre .encadre {
        margin-left: -1px;
        padding: 20px 1.5em;
    }
    .encadre[class*="picto-"] .encadre {
        margin-left: -1.5em;
        margin-top: 15px;
    }
    .encadre .encadre.style4 {
        box-shadow: inset 0 0 0 0.3em #ffcb04
    }
}



/*
    RENSEIGNEMENTS SUPPLÉMENTAIRES
    <div class="renseignements"

*/
.renseignements {
	visibility: hidden;
}
.rens-visible {
	visibility: visible;
}
#renseignements.encadre.style3,
.renseignements-supplementaires,
.renseignements {
	background-color: white;
	box-shadow: inset 0 0 0 0.3em #eeeeee;
	display: block;
	margin-top: 2em;
	margin-bottom: 1.5em;
	padding: 1em;
	color: inherit;
	text-decoration: inherit;
	clear:both
}

@media (min-width: 766px) {
	#renseignements.encadre.style3,
	.renseignements-supplementaires,
	.renseignements {
		box-shadow: inset 0 0 0 0.5em #eeeeee;
		padding: 25px 2.8em 25px 2em;
	}
}
#renseignements.encadre.style3,
.renseignements-supplementaires,
.renseignements {
	background-color: #074b98;
	box-shadow: none;
}
#renseignements.encadre.style3>*,
.renseignements-supplementaires>*,
.renseignements>* {
	color: white;
}
#renseignements.encadre.style3 a,
.renseignements-supplementaires a,
.renseignements a {
	color: white;
}
.renseignements a:focus,
.renseignements a:hover {
	color: white;
	text-decoration: none;
}
#renseignements.encadre.style3>h2:first-child,
.renseignements-supplementaires>h2:first-child,
.renseignements>h2:first-child {
	font-size: 17px;
	margin: 0 0 0.3em;
	padding: 0;
	text-transform: uppercase;
}
@media (min-width: 766px) {
	#renseignements.encadre.style3>h2:first-child,
	.renseignements-supplementaires>h2:first-child,
	.renseignements>h2:first-child {
		font-size: 18px;
	}
}
#renseignements.encadre.style3>*:last-child,
.renseignements-supplementaires>*:last-child,
.renseignements>*:last-child {
	margin-bottom: 0;
}
#renseignements.encadre.style3 > h3,
.renseignements-supplementaires > h3,
.renseignements > h3 {
	margin-top: 0.7em;
	margin-bottom: 2px;
	font-size: 17px;
	text-transform: none;
}
#renseignements.encadre.style3 a.lien[class*="picto-carte-interactive"]:before,
.renseignements-supplementaires  a.lien[class*="picto-carte-interactive"]:before,
.renseignements a.lien[class*="picto-carte-interactive"]:before {
	-webkit-filter: invert(50%) brightness(200%);
	filter: invert(50%) brightness(200%);
}
#renseignements.encadre.style3 a.lien[class*="picto-carte-google"]:before,
.renseignements-supplementaires  a.lien[class*="picto-carte-google"]:before,
.renseignements  a.lien[class*="picto-carte-google"]:before {
	background-image: url(/img/pictos/picto-carte-google-blanc.svg)
}
/* Titres bandes renseignements supplémentaires - transition pour les encadrés*/
h2.savoirplus {
	background-color: #074b98;
	color: white;
	padding: 11px 15px;
	clear: both;
	font-size: 17px;
	text-transform: uppercase;
}

@media (min-width: 766px) {
	h2.savoirplus {
		font-size: 18px;
	}
}
h2.savoirplus + p {
	margin-top: 0.7em;
}
.renseignements.rens-haut {
	background-color: transparent;
	padding: 0 0 0 1px;
}
.renseignements.rens-haut > * {
	color: black;
}
.renseignements.rens-haut a {
	color: #074b98;
}
.renseignements.rens-haut a.btn {
	color: white;
}
.renseignements.rens-haut > h2:first-child {
	background-color: #074b98;
    color: white;
    padding: 11px 15px;
    clear: both;
	margin-left: -1px;
    font-size: 17px;
    text-transform: uppercase;
}
@media (min-width: 766px) {
	.renseignements.rens-haut > h2:first-child {
	    font-size: 18px;
		margin-bottom: 0.6em;
	}
}
.renseignements.rens-haut a.lien[class*="picto-carte-interactive"]:before {
	-webkit-filter: none;
	filter: none;
}
.renseignements.rens-haut  a.lien[class*="picto-carte-google"]:before {
	background-image: url(/img/pictos/picto-carte-google.svg)
}


/** encadré patrimoine lié**/
.encadre-patrimoine-lie {background-color:#efefef; padding:10px}
.photo-patrimoine-lie  {height: 99px; width: 150px; overflow: hidden; position:relative}
.photo-patrimoine-lie img {position: absolute;top: -9999px;bottom: -9999px;left: -9999px;right: -9999px;margin: auto;width: 100%;}
.encadre-patrimoine-lie a {text-decoration: none}





main:not(.menu-gauche) .encadre.encadre-large.style2,
main:not(.menu-gauche) .encadre.encadre-large.style3,
main:not(.menu-gauche) .encadre.encadre-large.style5,
main:not(.menu-gauche) .encadre.encadre-large.style6 {
    padding-left: 0;
    padding-right: 0;
}
@media (min-width: 767px) {
    main:not(.menu-gauche) .encadre.encadre-large.style2:not(.encadre-sans-padding),
    main:not(.menu-gauche) .encadre.encadre-large.style3:not(.encadre-sans-padding),
    main:not(.menu-gauche) .encadre.encadre-large.style5:not(.encadre-sans-padding),
    main:not(.menu-gauche) .encadre.encadre-large.style6:not(.encadre-sans-padding) {
        padding-left: 1em;
        padding-right: 1em;
    }
}
/* style5 */
.encadre.style5 {
    /*background: linear-gradient(180deg, rgba(235,237,233,1) 0%, rgba(210,213,208,1) 100%);*/
    background: linear-gradient(180deg, rgba(240,240,240,1) 0%, rgba(220,220,220,1) 100%);
    box-shadow: none;
}
main:not(.menu-gauche) .encadre.encadre-large.style5 {
    background: transparent;
}


/* style6 */
.encadre.style6 {
    background: linear-gradient(180deg, #004a9c 0%, #192b42 100%);
    box-shadow: none;
}
main:not(.menu-gauche) .encadre.encadre-large.style6 {
    background: transparent;
}
.encadre.style6 * {
    color: white;
}

/* Encadré dont le fond est pleine largeur */
main:not(.menu-gauche) .encadre.encadre-large {
    position: relative;
    z-index: 0;
}
@media (min-width: 1250px) {
    main:not(.menu-gauche) .encadre.encadre-large {
        padding-left: 0;
        padding-right: 0;
        padding-top: 2.5em;
        padding-bottom: 2.5em;
    }
     main:not(.menu-gauche) .encadre.grandes-marges {
        padding-bottom: 3.5em;
    }
    
}
main:not(.menu-gauche) .encadre.encadre-large::before {
    background-position: center;
    top: 0;
    width: 100vw;
    transform: translateX(-50%);
    left: 50%;
    content: '';
    height: 100%;
    background-color: inherit;
    position: absolute;
    z-index: -1;
}

main:not(.menu-gauche) .encadre.encadre-large:not([class*="style"]),
main:not(.menu-gauche) .encadre.encadre-large.style4 {
    box-shadow: none;
    background: transparent;
}
main:not(.menu-gauche) .encadre.encadre-large:not([class*="style"])::before,
main:not(.menu-gauche) .encadre.encadre-large.style4::before {
    box-shadow: inset 0 0 0 0.35em #eeeeee;
    width: calc(100vw - 2em);
    z-index: 0;
}
@media (min-width: 1250px) {
    main:not(.menu-gauche) .encadre.encadre-large:not([class*="style"])::before,
    main:not(.menu-gauche) .encadre.encadre-large.style4::before {
        box-shadow: inset 0 0 0 0.5em #eeeeee;
        width: 98vw;
    }
}

main:not(.menu-gauche) .encadre.encadre-large.style4::before{
    box-shadow: inset 0 0 0 0.35em #ffcb04;
}
@media (min-width: 1250px) {
    main:not(.menu-gauche) .encadre.encadre-large.style4::before{
        box-shadow: inset 0 0 0 0.5em #ffcb04;
    }
}
main:not(.menu-gauche) .encadre.encadre-large.style5::before {
    background: linear-gradient(180deg, rgba(250,250,250,1) 0%, rgba(225,225,225,1) 100%);
}

main:not(.menu-gauche) .encadre.encadre-large.style6::before {
     background: linear-gradient(180deg, #004a9c 0%, #192b42 100%);
}



@media (min-width: 767px) {
    main:not(.menu-gauche) .encadre.encadre-large.contenu-demi {
        padding-right: 50%;
    }
}

.encadre.collapse {
    margin-top: 0;
    margin-bottom: 0;
}
.encadre.collapse-top {
    margin-top: 0;
}
.encadre.collapse-bottom {
    margin-bottom: 0;
}

/* Encadré avec une image png qui sort du cadre */
.encadre-png figure {
    display: none;
}
@media (min-width: 766px) {
    .encadre-png.encadre-image>*:not(figure) {
        padding-left: 0;
    }
}
@media (min-width: 876px) {
    .encadre-png.encadre-image>*:not(figure) {
        padding-left: 135px;
    }
    .encadre-png.encadre-image {
        margin-top: 40px;
        overflow: visible;
    }
    .encadre-png.encadre-image figure {
        display: block;
        position: absolute;
        margin-top: -45px;
        height: 150px;
    }
    .encadre-png.encadre-image figure img {
        height: 150px;
        width: auto;
    }
}