@charset "utf-8";
/*
=========================================================================

    BOUTONS

    S'applique sur les balises :
        - <a></a>
        - <input type="button"> et <input type="submit">s
        - <button></button>


/* Certains styles de boutons ont été mis dans d'autres css :
FORMULAIRE.CSS
- Bouton Rechercher avec uniquement une loupe (Patrimoine urbain et recherche d'archives)
- Boutons Téléchargement de fichier

BANDE-HAUT.CSS
- Bouton Rechercher avec uniquement une loupe (Recherche dans le site)
=========================================================================
*/

/* Bouton régulier (vert, grandeur médium) */

.btn {
	background-color: #108848;
	border: 0;
	border-radius: 3px;
	color: white;
	cursor: pointer;
	display: inline-block;
	font: 600 1em 'proxima-nova-bold', sans-serif;
	padding: 8px 30px 10px;
	text-decoration: none;
	transition: background-color 0.2s, color 0.2s;
	-webkit-appearance: none;
}
.btn:hover, .btn:focus {
	background-color: #007236;
	color: white;
}
.btn:active {
	background-color: #007236;
	color: rgba(255,255,255,0.5);
}
.btn.btn-grand {
	font-size: 1.1em;
	padding: 13px 42px;
}
.btn.btn-petit {
	padding: 8px 18px;
}
.carte-interactive .btn {
	color: white!important;
	text-decoration: none!important;
}
/*
=========================================================================
    PICTOGRAMMES
=========================================================================

*/
/* pour les balises <a> et <button> */
.btn[class*="picto-"] { /* 30px */
	padding-left: 38px;
	padding-right: 20px;
	position: relative;
}
.btn.btn-grand[class*="picto-"] { /* 42 px */
	padding-left: 50px;
	padding-right: 32px;
}
.btn.btn-petit[class*="picto-"] { /* 18 px */
	padding-left: 26px;
	padding-right: 10px;
}
.btn[class*="picto-"]:before {
	-webkit-filter: invert(50%) brightness(200%);
	filter: invert(50%) brightness(200%);
	position: absolute;
	width: 25px;
	height: 100%;
	max-height: 25px;
	content: "";
	background-repeat: no-repeat;
	background-position: center;
	left: 10px;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	transition: opacity 0.2s;
}
.btn.btn-grand[class*="picto-"]:before {
	width: 35px;
	max-height: 35px;
	left: 12px;
}
.btn.btn-petit[class*="picto-"]:before {
	width: 20px;
	max-height: 20px;
	left: 5px;
}
.btn[class*="picto-"]:active:before {
	opacity: 0.5;
}
/* pour les balises <input> */
/* Par leur limitations, les balises input ne peuvent pas afficher aussi facilement un pictogramme. C'est quand même possible mais pour un sous-groupe de pictos qui seront définis ici :
	picto-loupe

	De plus, le fichier SVG blanc doit être utilisé puisqu'il n'est pas possible d'appliquer une transformation filter sur un background sans toucher à la couleur (vert) du bouton.
	À terme, il serait préférable de toujours utiliser la balise <button></button> pour les boutons.

*/

input.btn[class*="picto-"] {
	background-repeat: no-repeat;
	background-position: 10px center;
	background-size: 25px 25px;
}
input.btn.btn-grand[class*="picto-"] {
	background-position: 12px center;
	background-size: 35px 35px;
}
input.btn.btn-petit[class*="picto-"] {
	background-position: 5px center;
	background-size: 20px 20px;
}
/*
	Il faut lister ici tous les pictos qu'on veut pouvoir utiliser sur les boutons <input> )
Voir plus bas pour les pictos dans un lien
*/
input.btn.picto-loupe {
	background-image: url("../img/pictos/picto-loupe-blanc.svg")
}
input.btn.picto-fleche-gauche {
	background-image: url("../img/pictos/picto-fleche-gauche-blanc.svg")
}
input.btn.picto-fleche-droite {
	background-image: url("../img/pictos/picto-fleche-droite-blanc.svg")
}
input.btn.picto-dossier-ouvert {
	background-image: url("../img/pictos/picto-dossier-ouvert-blanc.svg")
}
input.btn.picto-fermer {
	background-image: url("../img/pictos/picto-fermer-blanc.svg")
}
input.btn.picto-plus {
	background-image: url("../img/pictos/picto-plus-blanc.svg")
}
/*
=========================================================================
    BOUTONS PICTO UNIQUEMENT (loupe, fermer)
=========================================================================

*/
.btn.btn-picto {
	padding: 20px;
}
.btn.btn-picto[class*="picto-"]:before {
	left: 8px
}
.btn.btn-picto span {
	display: none;
}
input.btn.btn-picto {
	padding: 10px 20px;
	background-position: 8px center;
}
/*
=========================================================================
    BOUTONS FLÈCHES pour les carrousels
=========================================================================

*/
.btn.btn-carrousel {
	padding: 20px;
	border-radius: 20px;
}
.btn.btn-carrousel.picto-fleche-gauche[class*="picto-"]:before {
	left: 6px
}
.btn.btn-carrousel span {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	border: 0;
}
input.btn.btn-carrousel {
	padding: 10px 20px;
	background-position: 8px center;
}
/*
=========================================================================
    COULEURS
=========================================================================

*/

.btn.btn-second {
	background-color: #787878;
}
.btn.btn-second:hover, .btn.btn-second:focus {
	background-color: #505050;
}
.btn.btn-second:active {
	background-color: #505050;
}
.btn.btn-danger {
	background-color: #c9302c
}
.btn.btn-danger:hover, .btn.btn-danger:focus {
	background-color: #b91c18;
}
.btn.btn-danger:active {
	background-color: #b91c18;
}
/*
=========================================================================
    HYPERLIENS
=========================================================================

*/
.btn.btn-lien {
	background: transparent;
	color: #074b98;
	font-weight: normal;
	text-decoration: underline;
	padding-left: 0;
	padding-right: 0;
}
.btn.btn-lien:hover {
	color: #186db7;
	text-decoration: none;
}
/*
=========================================================================
   HYPERLIENS AVEC PICTOS
=========================================================================

*/

.btn.btn-lien[class*="picto-"]:before {
	webkit-filter: none;
	filter: none;
	left: 0px;
}
.btn.btn-lien[class*="picto-"] {
	padding-left: 30px;
}
.btn.btn-lien.btn-petit[class*="picto-"] {
	padding-left: 25px;
}
.btn.btn-lien.btn-grand[class*="picto-"] {
	padding-left: 35px;
}
input.btn.btn-lien[class*="picto-"] {
	background-position: 0px center;
}
/*
	Il faut lister ici tous les pictos qu'on veut pouvoir utiliser sur les boutons <input>
*/
input.btn.btn-lien.picto-plus {
	background-image: url("../img/pictos/picto-plus.svg")
}
input.btn.btn-lien.picto-liste {
	background-image: url("../img/pictos/picto-liste.svg")
}
/*
=========================================================================
    BOUTONS INACTIFS - DISABLED
=========================================================================

*/
.btn[disabled] {
	background-color: rgba(100, 100, 100, 0.4);
	color: rgba(255,255,255,0.6);
	cursor: default;
	pointer-events: none;
}
.btn.btn-lien[disabled] {
	background-color: transparent;
	color: rgba(7, 75, 82, 0.5);
}
/*
=========================================================================
	Boutons partagez
=========================================================================

*/
#boutons-partage {
	clear: both;
	max-width: 760px;
	margin: auto;
	margin-top: 25px;
	margin-bottom: 20px;
	padding-left: 15px;
	padding-right: 15px;
}
#boutons-partage > p {
	margin-bottom: 0.3em;
	font-size: 14px;
}
#boutons-partage .ssk {
	background-color: #212837;
	background-size: 18px;
	background-repeat: no-repeat;
	background-position: 7px 7px;
    color: white;
	display: inline-block;
	width: 32px;
	height: 32px;
	transition: background-color 0.3s;
}

@media (min-width: 767px) {
#boutons-partage .ssk {
	background-size: 14px;
	background-position: 5px 5px;
	margin-right: -1px;
	width: 24px;
	height: 24px;
}
}
#boutons-partage .ssk-facebook {
	background-image: url(/img/pictos/picto-partage-facebook.svg);
}
#boutons-partage .ssk-facebook:hover {
	background-color: #1877f2;
}
#boutons-partage .ssk-twitter {
	background-image: url(/img/pictos/picto-partage-twitter.svg);
}
#boutons-partage .ssk-twitter:hover {
	background-color: #1da1f2;
}
#boutons-partage .ssk-linkedin {
	background-image: url(/img/pictos/picto-partage-linkedin.svg);
}
#boutons-partage .ssk-linkedin:hover {
	background-color: #1c87bd;
}
#boutons-partage .ssk-pinterest {
	background-image: url(/img/pictos/picto-partage-pinterest.svg);
}
#boutons-partage .ssk-pinterest:hover {
	background-color: #bd081c;
}
#boutons-partage .ssk-favoris {
	background-image: url(/img/pictos/picto-partage-favoris.svg);
}
#boutons-partage .ssk-favoris:hover {
	background-color: #faa61a;
}
#boutons-partage .ssk-imprimer {
	background-image: url(/img/pictos/picto-partage-imprimer.svg);
}
#boutons-partage .ssk-imprimer:hover {
	background-color: #757575;
}
#boutons-partage .ssk-email {
	background-image: url(/img/pictos/picto-partage-courriel.svg);
}
#boutons-partage .ssk-email:hover {
	background-color: #074b98;
}
/*
=========================================================================
	Boutons information tooltipster
Voir aussi page contenu > accès famille (à retirer probablement lorsque harmonisé)
=========================================================================

*/
.reference-tooltip {
	cursor: pointer;
}
.tooltip {
	cursor: pointer;
	margin-right: 2px;
	margin-bottom: -2px;
	width: 14px;
}
.tooltip[src*=".svg"] {
	width: 21px;
	height: 21px;
	margin-bottom: -6px;
	margin-left: -2px;
}
a.tooltip {
	padding: 0 5px 0 2px;
}
/*
Infobulles

*/
body .tooltipster-default {
	border-color: #074b98;
	border-radius: 7px;
	background: #074b98;
}
body .tooltipster-default .tooltipster-content {
	font-family: "proxima-nova", sans-serif;
	font-size: 16px;
	line-height: 20px;
	padding: 15px;
}

@media (min-width: 767px) {
body .tooltipster-default {
	border-radius: 15px;
}
body .tooltipster-default .tooltipster-content {
	padding: 25px;
}
}
/*
Recaptcha
*/
.g-recaptcha {
	margin: 0 0 15px 0;
}

/*
Boutons dans les popups de carte ESRI
*/
.esriPopup a[href].btn {
	color: white;
	text-decoration: none;
}