/*  CCS Complétaire VENDE EAU */


/* Modification de la police de caractère
html,body,abbr,blockquote,q,cite,sub,sup,h1,h2,h3,h4,h5,h6,a, p{
	font-family: 'AvenirNext','Montserrat','sans-serif' !important;  
}*/

/****************************************************/
/***********   Personalisation Admin       *********/

/*Boutons M'inscrie et Me connecte*/
ul.nav-connexion {
    width: fit-content;
}



ul.nav-connexion li  a{
				height: 15x;
				width: fit-content;
				font-size: 12px;
				font-weight: bold;
				background-color:#B4C837;
				border-radius: 8px;
				color:  #ffffff;
				text-align:center;
				box-shadow:none;
				text-shadow:none;
}


#text{
			display:none;
}
ul.nav-connexion li a:hover {
	 font-weight: bold;
	 color: #000;
	 box-shadow:none;
	 text-shadow:none;
}



.btn-primary {
	-webkit-text-size-adjust: 100%;
    /*font-family: 'AvenirNext','sans-serif'!important;*/
    text-decoration: none;
    display: inline-block;
    line-height: 20px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid #ccc;
    border-radius: 8px;
    color: #fff;
    background-image: linear-gradient(to bottom,#B4C837,#B4C837);
    background-repeat: repeat-x;
    border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);
    float: right;
    font-size: 14px!important;
    width: 200px;
    margin-bottom: 2px;
    background-color: #B4C837 !important;
	
}

.btn{
	background-color: #B4C837 !important;
	background-image: linear-gradient(to bottom,#B4C837,#B4C837);
	color: #fff;
	border-radius: 8px;
	/*font-family: 'AvenirNext','sans-serif'!important;*/
    text-decoration: none;
	line-height: 20px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
	 text-shadow:none !important;

}

.btn-cover {
	-webkit-text-size-adjust: 100%;
    /*font-family: 'AvenirNext',sans-serif!important;*/
    text-decoration: none;
    display: inline-block;
    line-height: 20px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid #ccc;
    background-image: linear-gradient(to bottom,#B4C837,#B4C837);
    background-repeat: repeat-x;
    border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);
    float: right;
    border-radius: 8px;
    font-size: 12px!important;
    padding: 2px 6px!important;
    width: 200px!important;
    margin-bottom: 2px;
    background-color: #B4C837 !important;
}

.btn-cover a {
	color: #fff;
}

.footer-top {
 
    background-color: #f0f0f0;
	/*box-shadow: 1px 7px 14px rgb(0 0 0 / 50%);*/
	box-shadow: -1px 13px 13px rgb(0 0 0 / 50%);
}

.footer-wrapper{
    background-color: #edf5f5 !important;
	box-shadow: -1px 13px 13px rgb(0 0 0 / 50%);
}


.footer-bottom {
    background-color: #5eb2ca;
	box-shadow: -1px 13px 13px rgb(0 0 0 / 50%);
}

#footerUsager h1, #footerUsager h2, #footerUsager h3, #footerUsager h4, #footerUsager p, #footerUsager a, #footerUsager strong {
    color: #000000 !important;
}


.footer-wrapper h1, .footer-wrapper h2, .footer-wrapper h3, .footer-wrapper h4, .footer-wrapper p, .footer-wrapper a, .footer-wrapper strong {
    color: #000000 !important;
}


.carousel-caption {
    position: absolute;
    right: 908px;
    left: auto;
    bottom: 65px;
    width: 18%;
	padding: 0px;
}
  
/*

#demoFacture
{ background-image: url("/Portail/fr-FR/Document/AfficherImage/?code=aide_attacher_abo")!important; 
   
}
#demoFacture:hover {
	-webkit-transform:scale(1.7);
	transform:scale(1.7);
}
*/
#demoFacture {
	background-image: none !important;
	display:none;
}

/* CSS formulaire nouvel abonnement */
.btn-group>.btn:active, .btn-group>.btn.active {
    z-index: 2;
	margin-left: 1em;
    background-color: #B4C837;
}

.btn-group>.btn+.btn {
    margin-left: 1em;
}

.assistant-contenu {

    min-height: 560px;
    height: fit-content !important;
}


.bwizard-steps .active {
    background: #5eb2ca !important;
}

.bwizard-steps .active:after {
    border-left-color: #5eb2ca !important;
}

label {

    line-height: 30px !important;
}

form label {

    font-size: 14px !important;
    font-weight: 550 !important;
}



/* Gestion bannière */

@media (max-width: 768px) {
 .banniere{
    background-image: none !important;
}
}


/****************************************************/
/*****  Page d'accueil : 4 encadres identiques  *****/
/****************************************************/

/* Les 4 encadres ont la meme hauteur */
.row-fluid.hero-list {
    display: flex;
    flex-wrap: wrap;
}
.row-fluid.hero-list:before,
.row-fluid.hero-list:after {
    display: none;
}
.row-fluid.hero-list .grey-box {
    float: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 22px 16px;
    margin-bottom: 20px;
}

/* Icone : meme taille, meme espace partout */
.row-fluid.hero-list .grey-box h2:first-child {
    margin: 0 0 12px 0;
}
.row-fluid.hero-list .grey-box h2:first-child img {
    height: 60px !important;
    width: 60px !important;
    margin: 0 !important;
    border: 0 !important;
}

/* Titre : reserve la place de 2 lignes pour que les textes demarrent a la meme hauteur */
.row-fluid.hero-list .grey-box h2:nth-child(2) {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.4em;
    margin: 0 0 14px 0;
    line-height: 1.15;
}

/* Police : une seule police pour tous les textes des encadres (titres h2 = police du theme, inchangee) */
.row-fluid.hero-list .grey-box p,
.row-fluid.hero-list .etapes,
.row-fluid.hero-list .etapes * {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Textes */
.row-fluid.hero-list .grey-box p {
    margin: 0 0 10px 0;
    font-size: 14px;
    line-height: 1.5;
}

/* Etapes de l'encadre "Pas encore abonne" */
.row-fluid.hero-list .etapes {
    width: 100%;
    margin: 6px 0 0 0;
    text-align: left;
}
.row-fluid.hero-list .etape {
    display: flex;
    align-items: flex-start;
    margin-bottom: 14px;
    font-size: 14px;
    line-height: 1.5;
}
.row-fluid.hero-list .etape + .etape {
    margin-bottom: 8px;
}
.row-fluid.hero-list .etape .num {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    line-height: 26px;
    margin-right: 10px;
    border-radius: 50%;
    background: #ee7d00;
    color: #ffffff;
    font-weight: bold;
    text-align: center;
}
.row-fluid.hero-list .etape .txt {
    padding-top: 2px;
}

/* Telephone : centre dans l'encadre */
.row-fluid.hero-list .tel-bloc {
    text-align: center;
}
.row-fluid.hero-list .tel-bloc .tel {
    display: inline-block;
    margin: 0 0 4px 0;
    padding: 5px 14px;
    border: 2px solid #ee7d00;
    border-radius: 8px;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.3;
    color: #ee7d00 !important;
    text-decoration: none;
}
.row-fluid.hero-list .tel-bloc .tel:hover {
    background: #ee7d00;
    color: #ffffff !important;
}
.row-fluid.hero-list .tel-bloc .horaires {
    display: block;
    font-size: 13px;
    color: #555555;
}

/****************************************************/
/*****  Carrousel visible sur telephone/tablette  ***/
/****************************************************/

/* Bootstrap 2 cache tout bloc "visible-desktop" sous 980 px.
   Si le carrousel est dans un tel bloc, on reaffiche ce bloc
   (le bloc voisin avec le tableau de 1200 px reste cache). */
.visible-desktop:has(.carousel),
.visible-desktop:has(#veCarrousel) {
    display: block !important;
}

/* Le carrousel ne depasse jamais de l'ecran */
.carousel,
.carousel-inner,
.carousel-inner .item {
    max-width: 100%;
    box-sizing: border-box;
}
.carousel-inner .item img {
    max-width: 100%;
    height: auto;
}

/* Image cliquable */
.carousel-inner .item > a {
    display: block;
}