/* 
Ceci est la feuille de style CSS appliquées sur l'Agence en ligne.
Elle applique une surcharge de style à l'AEL de base aux couleurs de Nantes Métropole.
*/

/* Variables utilisées au sein de l'AEL */
:root {
	--black: #000000;
	--white: #ffffff;
	--color-primary-lighter: #e4f4fb;
	--color-primary: #087fa3;
	--color-primary-dark: #055a81;
	--color-secondary-lighter: #e0f6ee;
	--color-secondary: #20a791;
	--color-secondary-dark: #167e6a;
	--color-secondary-darker: #0f5b4c;
	--color-grey-lighter: #f6f5f4;
	--color-grey-light: #efedeb;
	--color-grey-outline: #d4d1ce;
	--color-grey-dark: #949494;
	--color-grey-darker: #707070;
	
	--font-size-xs: 14px;
	--font-size-s: 16px;
	--font-size-m: 18px;
	--font-size-l: 21px;
	--font-size-xl: 25px;
	
	--padding-xs: 0.5rem;
	--padding-s: 0.625rem;
	--padding-m: 0.75rem;
	--padding-l: 1rem;
	
	--border-radius: 1rem;
	
	--line-height: 1.4rem;
	
	--content-size-l: 1170px;
	--content-size-m: 980px;
	--content-size-s: 764px;
}

/* Police utilisée */
/* Définition de la police */
@font-face {
	font-family: 'Source Sans';
	font-style: normal;
	font-weight: 300;
	src: url('../../Content/Font/source-sans-pro/SourceSansPro-Regular.ttf');
}

/* Police par defaut */
body *:not(i[class*="icon-"], span[class*="icon-"]) {
	font-family: 'Source Sans' !important;
}

/*///////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////// ELEMENTS COMMUNS A TOUTES LES PAGES
///////////////////////////////////////////////////////////////////////////////////////////////////////////*/

/* Retrait de la ligne du haut */
.top_line {
    display:none;
}

/* Style titres h1 */
h1 {
	font-size: var(--font-size-xl) !important;
	color: var(--color-secondary);
	font-weight: 600;
}

/* Style titres h2 */
h2 {
	font-size: var(--font-size-l) !important;
	font-weight: 600;
}

/* Style titres h3, h4 */
h2, h3 {
	color: var(--black);
}

/* Couleur, taille des éléments de texte */
body, p, label, a, button, input {
	font-size: var(--font-size-s) !important;
	color: var(--black);
	line-height: var(--line-height) !important;
}

/* Débuts de ligne colorées */
hr {
    border-bottom: 1px solid var(--color-primary);
}

/* Couleurs des liens */
ul li, ul li a {
	color: var(--black);
}

/* Couleurs des liens au survolement */
ul li a:hover,
ul li a:focus {
	color: var(--color-primary);
}

/* Couleur des icones */
.icon-large {
	color: var(--color-primary) !important;
}

/* Couleur des icones */
.icon-medium,
.icon-large.icon-credit-card {
	color: var(--color-secondary) !important;
}

/* Couleur des balises a */
a {
	color: var(--color-primary);
}

/* Couleur des balises a au survol */
a.active {
	background-color: var(--color-primary-dark) !important;
}

/* couleur des Pop-up */
.modal-egee .modal-header{
	    background-color: var(--color-primary) !important;
}

/* Affichage du bouton de fermeture des Pop-up */
.modal-egee .close {
	opacity: 1;
}

/* Retrait du contour de la page */
#out_container,
header {
	box-shadow:none !important;
	width:100% !important;
}

/* Couleur du fond de la page */
body {
	background-color: var(--white);
	overflow-x:	hidden;
}

/* Agencement de la page sur grand écran PC */
@media (min-width: 1170px) {
	.main-content>*:not(.recent-actualites, .modal),
	.main-content .actualite-wrapper,
	.footer-wrapper,
	body:not(.aideenligne)>header>*:not(.navbar) {
		width: var(--content-size-l) !important;
		margin:auto;
	}
}

/* Agencement de la page sur moyen écran PC */
@media (min-width: 980px) and (max-width: 1199px) {
	.main-content>*:not(.recent-actualites, .modal),
	.main-content .actualite-wrapper,
	.footer-wrapper,
	body:not(.aideenligne)>header>*:not(.navbar) {
		width: var(--content-size-m) !important;
		margin:auto;
	}
}

/* Agencement de la page sur tablette */
@media (min-width: 768px) and (max-width: 979px) {
	.main-content>*:not(.recent-actualites, .modal),
	.main-content .actualite-wrapper,
	.footer-wrapper,
	body:not(.aideenligne)>header>*:not(.navbar) {
		width: var(--content-size-s) !important;
		margin:auto;
	}
}

/* Agencement de la page sur mobile */
@media (max-width: 767px) {
	#out_container {
		margin: 0 !important;
	}
}

/*///////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////// CAROUSEL
///////////////////////////////////////////////////////////////////////////////////////////////////////////*/

/* Ajustement des tailles d'images */
#myCarousel {
	height: 600px;
    object-fit: cover;
}

/* Taille et couleur des flèches */
.carousel i {
	color: var(--color-secondary) !important;
	font-size: 40px;
}

/* opacité des bulles */
.carousel-control {
	opacity: 1
}

/* Forme du conteneur de texte */
.carousel-caption {
	background: none;
    background-color: var(--white);
	border-radius: 10px 0 0 10px;
	right: 0;
	top: 400px;
	max-height: 150px;
}

/* Style des éléments de texte du carousel */
.carousel-caption a,
.carousel-caption h4,
.carousel-caption p {
	color: var(--black);
	padding: 0 !important;
}

/* Arrondi du carousel */
.carousel-inner {
	border-radius: var(--border-radius);
	height: 100%;
}

/* Espacement carousel */
.carousel {
	margin: var(--padding-l) 0;
}

/* Espacement carousel */
.visible-desktop {
	margin: 10px 0;
}

/* Retrait du carousel en mobile */
@media (max-width: 767px) {
    .span12 .visible-desktop {
        display: block !important;
    }
	
	#myCarousel {
		display: none !important;
	}
}

/*///////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////// BOUTONS
///////////////////////////////////////////////////////////////////////////////////////////////////////////*/

/* Bouton primaire */
.btn {
	border: solid 2px var(--color-primary) !important;
    background-color: var(--white) !important;
    color: var(--color-primary) !important;
	padding: var(--padding-s) var(--padding-l) !important;
    line-height: 1.4 !important;
    border-radius: var(--border-radius) !important;
	text-shadow: none !important;
	background-image: none !important;
}

/* Bouton primaire survolé ou actif */
.btn.active, 
.btn:hover ,
.btn:focus {
	background-color: var(--white) !important;
	color: var(--color-primary-dark) !important;
	border: solid 2px var(--color-primary-dark) !important;
}

.btn span:not(:last-child) {
	margin-right: 0.25rem;
}

/* Boutons de demandes */
.btn-assistant {
	font-size : var(--font-size-xs) !important;
	margin : 4px auto;
	max-width: 200px;
}

/* Boutons de demandes */
.assistant-boutons {
	display: flex;
    height: auto;
    flex-direction: row-reverse;
}

/* Boutons secondaires */
.btn-mini{
    background-color: var(--color-primary) !important;
    color: var(--white) !important;
	font-size: var(--font-size-xs);
}

/* Boutons secondaires survolés */
.btn-mini.active, 
.btn-mini:hover ,
.btn-mini:focus{
	background-color: var(--color-primary-dark) !important;
	border: 2px solid var(--color-primary-dark) !important;
	color: var(--white) !important;
}

/* Boutons de connexion */
.nav-connexion .btn-mini {
	background-color: var(--color-secondary) !important;
	border: 2px solid var(--color-secondary) !important;
	color: var(--white) !important;
}

/* Boutons de connexion survolés */
.nav-connexion .btn-mini:hover {
	background-color: var(--color-secondary-dark) !important;
	border: 2px solid var(--color-secondary-dark) !important;
}

/* Groupe de boutons actifs */
.btn-group .active {
	background-color: var(--color-primary) !important;
	color: var(--white) !important;
	box-shadow: none;
    border-color: var(--color-primary) !important;
}

/* Boutons secondaires, exemple bouton telechargement CSV */
.btn-group .btn[disabled] {
	opacity: 1 !important;
}

/* Boutons secondaires, exemple bouton telechargement CSV */
.btn-group .btn {
	padding: var(--padding-xs) !important;
}

/* Boutons secondaires, exemple bouton telechargement CSV */
.btn-group .btn:hover {
	border-color: var(--color-primary) !important;
}

/*///////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////// HAUT DE PAGE
///////////////////////////////////////////////////////////////////////////////////////////////////////////*/

/* Taille logo */
#out_container > header .banniere div.logo {
	width : 45% !important;
	padding: 10px;
    background-color: white;
	margin:0;
}

/* Taille logo en mobile */
@media (max-width: 767px) {
	#out_container > header .banniere div.logo {
		width : 100% !important;
	}
}

/* Affichage baniere */
.banniere{
	background-size: 100% auto !important;
	background-color: var(--white);
	display: flex;
}

/* Style mobile des boutons de navigation */
.buttons-container {
	background-color: var(--black);
}

/* Style mobile des boutons de navigation */
.buttons-container .nav-select {
	border-radius: var(--border-radius);
}

/* Elements de styles relatifs à l'affichage des boutons de navigation */
.navbar .nav {
	list-style-type: none;
	display: flex;
	justify-content: center;
	float: none;
	margin: 0;
}

/* Couleurs boutons de navigation */
.navbar-inner {
	background-color: var(--black);
	border: none;
}

/* Affichage des boutons de navigation */
.navbar .nav>li {
	border-right: 0px;
	padding: var(--padding-m) 20px;
}

/* Couleur écriture des boutons de navigation */
.navbar .nav>li a {
	color: var(--white) !important;
	margin: 0;
	padding: 0;
}

/* Ligne du bas des boutons de navigation au survol */
.navbar .nav li:hover a {
	text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
}

/* Retrait barre du haut des boutons de navigation au survol */
.navbar .nav li:hover>a {
	border-top: none;
}

/* Ligne du bas des boutons de navigation pour l'onglet actif */
.navbar .nav .active a {
	text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
	border-top: none;
}

/* Couleur fond boutons de navigation au survol qui ne change pas */
.navbar .nav .active>a,
.navbar .nav .active>a:hover {
	background-color: transparent;
	padding: 0;
}

/* Couleur  boutons de navigation au survol */
.navbar .nav>li:hover a,
.navbar .nav>li:hover a i {
	color: var(--white) !important;
	padding: 0;
}

/* Couleur  boutons de navigation */
.navbar .nav .active>a,
.navbar .nav .active>a:hover,
.navbar .nav .active a>i,
.navbar .nav .active a>i:hover {
	color: var(--white) !important;
	border-top: none;
}

 /* Retrait des sous-titres du menu */
.navbar .nav-pills i {
	display: none !important;
}

/*///////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////// PIED DE PAGE
///////////////////////////////////////////////////////////////////////////////////////////////////////////*/

/* Position du pied de page */
.footer-wrapper .main-block, 
.footer-bottom .main-block {
	position:				relative;
	margin:					auto;
}

/*Couleur police pour pied de page*/
#footerUsager h1, #footerUsager h2, 
#footerUsager h3, #footerUsager p, 
#footerUsager strong, #footerUsager .span4,
#footerUsager a {
 color: var(--white) !important;
}

/* Image de fond pied de page */
#footerUsager {
	background-image: linear-gradient(225deg, var(--color-secondary), var(--color-primary-dark));
	width: 100%;
}

/* Transparence footer haut */
.footer-top {
	height: 20px;
	background-color: transparent !important;
}

/* Transparence footer milieu */
.footer-wrapper {
	background-color: transparent !important;
    margin: auto;
}

/* Transparence footer bas */
.footer-bottom {
	background-color: transparent !important;
}

/* Style footer bas */
.footer-bottom .main-block {
	padding: 10px 20px;
}

/* Alignement contenu footer bas */
.footer-bottom .span12 {
	align-content: center;
}

/* Application de la taille du logo en mobile */ 
@media (max-width: 767px) {
	#footerUsager .span4 img {
		width: 25%;
	}
}

/*///////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////// BLOCS DE TEXTE
///////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.cartedevisite {
	color: var(--color-grey-darker);
}

/* Majuscule dans la carte de visite */
#menuAbonnementSynthese-inner .cartedevisite .cartesynthese-dates div::first-letter,
#menuAbonnementSynthese-inner .cartedevisite .cartesynthese-montantTTC div::first-letter {
	text-transform: uppercase;
}

/*///////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////// FORMULAIRES
///////////////////////////////////////////////////////////////////////////////////////////////////////////*/

/* Style des champs de formulaires input et textarea */
input:not(input[type="submit"], input[type="button"], input[type="checkbox"]),
textarea {
	border: 2px solid var(--color-grey-outline) !important;
    border-radius: 1rem !important;
    padding: var(--padding-s) 0 !important;
    height: auto !important;
    width: 100% !important;
    text-indent: var(--padding-l);
	box-sizing: border-box;
}

/* Style des champs de formulaires checkbox */
input[type="checkbox"] {
	margin-right: 10px;
}

/* Style des champs de formulaires checkbox */
.editor-field .select2-container,
input[type="checkbox"] {
	margin-bottom: 10px;
}

/* Style des champs de formulaires sélecteurs */
.editor-field .selection .select2-selection {
	border: 2px solid var(--color-grey-outline) !important;
    border-radius: var(--border-radius) !important;
    padding: var(--padding-s) 0 !important;
    height: auto !important;
	display: flex;
    align-items: center;
	min-height: 46px;
}

/* Style des champs de formulaires sélecteurs */
.editor-field .select2-container {
	width: 100% !important;
}

/* Style du contenu sélecteur */
.editor-field .select2-container .select2-selection__rendered {
	line-height: var(--line-height);
}

/* Style flèche sélecteurs */
.editor-field .selection .select2-selection .select2-selection__arrow {
	top: 11px;
}

/* Style champs formulaires au survol */
input:hover,
textarea:hover,
.editor-field .selection .select2-selection:hover {
	border-color: var(--color-grey-dark) !important;
}

/* Style champs formulaires au focus */
input:focus,
textarea:focus,
.editor-field .selection .select2-selection:focus {
	border-color: var(--color-primary) !important;
	box-shadow: 0 0 0 3px var(--color-secondary-lighter) !important;
}

/* Style champs formulaire date */
.EgeeDate .add-on {
	padding: var(--padding-s) var(--padding-l) !important;
    margin-left: 0px;
    border-radius: var(--border-radius) !important;
}

/* Style champs formulaire date */
.EgeeDate i {
	padding: 0;
}

/* Style champs formulaire date */
.EgeeDate input {
	width: 95% !important;
}

/* Style champs de recherche */
#SearchContainer #Search {
	margin-left: 5px;
}

/* Style champs de recherche au focus */
#SearchContainer input:focus,
#Login:focus,
#MotDePasse:focus {
	box-shadow: none;
	border-color: var(--color-primary);
}

/*///////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////// MENU PRINCIPAL
///////////////////////////////////////////////////////////////////////////////////////////////////////////*/

/* Centrage du texte d'accueil */
.accueil p, .accueil h3 {
	text-align: center;
}

/* Style texte titre corps page accueil */
.accueil-corps-title {
	text-transform: none;
	line-height: 1.25;
}

/* Couleur sous-titre accueil */
.accueil-corps-subtitle {
	text-transform: none;
	color: var(--color-grey-lighter);
}

/* Couleur paragraphe page accueil */
.accueil-corps,
.accueil-corps-bas-texte {
	color: var(--color-grey-dark);
}

/* Taille Bloc page accueil mobile */
@media (max-width: 480px) {
    .hero-list div.span3 {
        min-height: 0;
    }
	
	.hero-list {
		flex-direction: column;
	}
}

/* Taille Bloc page accueil Tablette */
@media (max-width: 767px) {
    .hero-list div.span3 {
        min-height: 0;
    }
	
	.hero-list {
		flex-direction: column;
	}
}

/* Couleur et arrondi Bloc page accueil */
.grey-box {
	background-color : var(--color-primary-lighter);
	border: none;
	border-radius: var(--border-radius);
}

/* Interligne texte bloc page accueil */
.grey-box p {
	line-height: 1;
}

/* Centrage bloc page accueil */
.hero-list {
	display: flex;
    justify-content: center;
}

/* Couleur et interligne titre bloc page accueil */
.hero-list h2 {
	color: var(--black) !important;
	line-height: 1.25;
}

/* Icone bloc page accueil */
.hero-list img {
	height: 6em;
    padding-bottom: 5px;
}

/* Texte bloc page accueil */
.hero-list .grey-box a {
	margin: 0;
    width: 100%;
}

/* Couleurs et style des boutons dans les blocs d'accueil */
.grey-box a {
	background-color: var(--color-primary);
    border-radius: var(--border-radius);
    text-decoration: none;
    color: var(--white);
    padding: var(--padding-s) 0px;
    margin: var(--padding-xs) 0 !important;
}

.grey-box a:hover {
	background-color: var(--color-primary-dark);
}

/* Couleur du titre du bloc */
.grey-box h4 {
	font-size: var(--font-size-m);
    color: var(--color-primary);
	margin: var(--padding-xs);
}

/* Affichage du bloc accueil */
.grey-box .bloc-accueil {
	height: 100%;
    display: flex;
    flex-direction: column;
    flex-flow: wrap;
}

/* fixation des boutons de lien au bas du bloc */
.grey-box .bloc-buttons {
	width: 100%;
	display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* Style du bandeau Actualites */
.recent-actualites {
    background-color: var(--color-secondary-lighter);
    border-bottom: var(--color-secondary-lighter) solid 2px;
}

/* Style texte du bandeau Actualites */
.actualites-slide .slides li,
.actualites-slide .slides li a {
	color: var(--black);
}

/*///////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////// TABLEAUX
///////////////////////////////////////////////////////////////////////////////////////////////////////////*/

/* Icone de deploiement */
table.dataTable.dtr-inline.collapsed>tbody>tr>td:first-child:before{
	background-color : var(--color-secondary) !important;
}

/* Icone de replis */
table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before{
	background-color : var(--color-secondary-darker) !important;
}

/* Bas du tableau */
table.dataTable.no-footer {
    border-bottom: 1px solid var(--color-grey-outline);
}

/* Bas des éléments */
table thead th { 
	border-bottom-color: var(--color-grey-outline) !important;
}

/* Style première ligne du tableau */
table.dataTable.dtr-inline.collapsed>tbody>tr>td:first-child:before {
    line-height: 16px !important;
    font-size: var(--font-size-l);
}

/* Tableau documents */
.table-striped td a:hover,
#tableAbonnement a:hover {
	color: var(--black);
}

/*///////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////// MENU DE SYNTHESE ABONNEMENT
///////////////////////////////////////////////////////////////////////////////////////////////////////////*/

/* Couleur écriture du menu */
#menuAbonnementSynthese-inner,
#menuAbonnementSynthese-inner p {
	color: var(--color-grey-darker);
}

/* Bordure du menu */
 .incruste{
	box-shadow : none; /* pas de degrade */
	border : 3px solid var(--color-grey-outline);
	text-align: left !important;
}

/* Alinea bloc synthese */
#menuAbonnementSynthese-inner>.row-fluid>.span12>* {
	text-indent: 10px;
}

/* Alinea bloc synthese */
#menuAbonnementSynthese-inner>.row-fluid>.span12>strong {
	padding: 10px;
}

/* Couleur et style du titre du menu */
#synthese #menuAbonnementSynthese .title {
	position: relative;
	display: block;
	background: var(--color-primary-lighter) !important;
	color: var(--black) !important;
	-webkit-transition: background .25s ease-out;
	transition: background .25s ease-out;
}

/* Couleur des éléments du menu au survol ou a l'etat actif */
#synthese #menuAbonnementSynthese .active a,
#synthese #menuAbonnementSynthese .title:hover,
#synthese #menuAbonnementSynthese .title:focus,
#synthese #menuAbonnementSynthese #menuAbonnementSynthese-inner .active h3,
#synthese #menuAbonnementSynthese .title:hover h3,
#synthese #menuAbonnementSynthese .title:focus h3,
#synthese #menuAbonnementSynthese .active .icon-medium,
#synthese #menuAbonnementSynthese .title:focus .icon-medium,
#synthese #menuAbonnementSynthese .title:hover .icon-medium {
	background-color: var(--color-primary) !important;
	color: var(--white) !important;
}

/* Couleur et style des boutons de redirection vers les syntheses */
#synthese #menuAbonnementSynthese .title h3 {
	background: none !important;
	color: var(--black) !important;
	text-align: left;
	font-weight: 500;
	text-transform: uppercase;
}

/* Bouton acces synthese complete */
#menuAbonnementSynthese-inner>.row-fluid:last-child .span12 {
	text-align: left;
	background-color: var(--color-secondary-lighter);
	align-content: center;
}

/* Bouton acces synthese complete au survol */
#menuAbonnementSynthese-inner>.row-fluid:last-child .span12:hover {
	background-color: var(--white);
}

/* Texte acces synthese complete */
#synthese .pull-right {
	color: var(--black) !important;
	float: left;
	width: 100%;
	line-height: 35px;
}

/* Texte acces synthese complete au survol */
#synthese .pull-right:hover {
	text-decoration: none;
	color: var(--black) !important;
}

/* Couleur acces synthese complete */
#breadcrumb li:last-child {
	color: var(--color-primary);
}

/* couleur icone */
#synthese #menuAbonnementSynthese .icon-medium {
	color: var(--black) !important;
}

/* Icone page Mes contrats */
.main-content .main-block .span8 img {
	height: 60px;
    width: 60px;
    max-width: none;
    position: relative;
    top: -25px;
	left: -10px;
}

/*///////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////// DEMANDE DE NOUVEL ABONNEMENT
///////////////////////////////////////////////////////////////////////////////////////////////////////////*/

/* Etape d'une demande */
.bwizard-steps li, .bwizard-steps .activable {
	background-color : var(--color-primary) !important;
}

/* Etape d'une demande active */
.bwizard-steps .active{
	background-color : var(--color-secondary) !important;
	color : var(--white);
}

/* Fin du bouton etape d'une demande */
.bwizard-steps .active:after{
	border-left-color: var(--color-secondary) !important;
}

/* Fin du bouton etape d'une demande */
.bwizard-steps li:after, .bwizard-steps .activable:after {
    position: absolute;
    right: -20px;
    top: 0;
    height: 0;
    width: 0;
    border-bottom: 20px inset transparent;
    border-left: 20px solid var(--color-primary);
    border-top: 20px inset transparent;
    content: "";
    z-index: 2;
}

/* Couleur de fond du bouton etape d'une demande */
.label-inverse, .badge-inverse {
    background-color: var(--color-primary);
}

/* Couleur de texte du bouton etape d'une demande */
.assistant-avancement ul li {
	color: var(--white);
}

/* Retrait element du bouton étape */
.bwizard-steps .badge-inverse {
	display: none;
}

/*///////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////// PERSONNALISATION IMAGE AIDE RATTACHEMENT ABONNEMENT
///////////////////////////////////////////////////////////////////////////////////////////////////////////*/

/* Prerequis : 
Creer un document dans l'administration de l'AEL avec l'image souhaitee ayant 
pour code : aide_attacher_abo */

/* Taille image */
#demoFacture {
  height: 300px;
  background-size: contain;
  background-repeat: no-repeat;
}

/* Image rattachement facture */
#divParFacture #demoFacture {
  background-image:  url("/Portail/fr-FR/Document/AfficherImage/?code=aide_attacher_abo") !important;
}

/* Image rattachement contrat */
#divParContrat #demoFacture {
  background-image:  url("/Portail/fr-FR/Document/AfficherImage/?code=aide_attache_contrat") !important; 
}

/* Zoom lors du survol de l'image d'aide au rattachement d'un abonnement*/
#demoFacture:hover {
	-webkit-transform:	scale(1.7);
	transform:			scale(1.7);
}

/* Zoom lors du survol de l'image d'aide au paiement express */
.aide-paiement-express img:hover {
	-webkit-transform:	scale(1.7);
	transform:			scale(1.7);
}

/* Taille de l'image d'aide au paiement express */
.aide-paiement-express img {
	height: 350px;
}

/*///////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////// AUTRE
///////////////////////////////////////////////////////////////////////////////////////////////////////////*/

/* Désactiver l'icône "œil" en double sur Edge/Chromium */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
	display: none;
}

/* Taille de l'icone aide en ligne */
.aide-en-ligne-usager {
	padding: var(--padding-xs) 0 0 0;
    margin: 0;
}

/* Taille de l'icone aide en ligne */
#butAideEnLigne:before {
	font-size: 30px;
    color: var(--color-secondary);
}

/* Taille de l'icone aide en ligne */
.aideenligne .logo img {
	max-width: 80%;
}