.cd-image .cd-vignette {
    width:  100%
}

#zone-centrale {
    background-color: #F8F8F8;
}

/* Page hub */

#page-hub #promo{margin-bottom: 3rem;background-color: #fff;}
#page-hub #promo + h2{margin-bottom: -1rem;}

#page-hub #promo div.cd-grille div.desc{
  border-right: 1px solid #cdcdcd;
  padding-right: 14px;
  padding: 0px 20px;
}

#page-hub #promo div.cd-grille div.desc h2{
  line-height: 1.15;
}
#page-hub #promo div.cd-grille div.desc p{
  line-height: 1.25;
}

html[style='font-size: 150%;'] #page-hub #promo div.cd-grille div.desc,
html[style='font-size: 200%;'] #page-hub #promo div.cd-grille div.desc{
  border-right: 0px;
  border-bottom: 1px solid #979797;
  padding: 0px 14px;
}
@media (max-width: 576px){

    #page-hub #promo div.cd-grille div.desc{
        border-bottom: 1px solid #979797;
        border-right:  0px !important;
        padding: 0px 10px;
    }
}


div.professionnels-filtre {

  margin-bottom: 1rem;
}

div.professionnels-filtre select{
    height: 3.2rem !important;
    min-width: 100%;
    max-width: 100%;
}

div.professionnels-filtre input, div.professionnels-filtre label {
    display:block;
}
div#filtre-prof{
    background-color: white;
    padding: 20px;
}

select:disabled{
  color: #6666667a;
  background-color: #e6e7e8;
  border: none;
}
div#filtre-prof select:not(#domaine-n1):not(#affaires-n2){
  display: none;
}
.cd-panel.hubProf{
  border: solid 1px #cbcbcb;
}


/* redéfinition de class */

.cd-tuiles .cd-tiroir > a,
.cd-tuiles.cd-lien > *:not(.cd-collapse) > *,
.cd-tuiles > .cd-lien > a,
.cd-tuiles:not(.cd-lien) > *:not(.cd-lien):not(.cd-tiroir):not(.cd-collapse) {
  border: solid 1px #cbcbcb ;
}

*:not(.cd-icone) .cd-layout-horizontal[class*=ic-]:not([class*=-ic]):before {
  background-color: transparent;
}

#zone-centrale .cd-layout-horizontal.cd-fond-blanc {
  margin-top: 0;
  border: solid 1px #cbcbcb;
}

html:not([style='font-size: 150%;']):not([style='font-size: 200%;']) .cd-layout-horizontal:not(.cd-icone) > *:last-child:before {
    border-left: 0px;
}
.ic-aimerez-le-plus:before {
  background-image: url('/ressources/images/ic-valise-avantages.svg');
}

.cd-grille .cd-bloc-info.cd-service-clientele {
  background-image: url(/ressources/images/b30-img-service-clientele.jpg);
  background-size: cover;
  background-position: 95% 15%;
}
@media (max-width: 768px){
  .cd-grille .cd-bloc-info.cd-service-clientele {
  background-position-x: 100% !important;
  
}
}

@media (min-width:769px){
  #page-hub{margin-top: -5rem !important;}
  html[style='font-size: 150%;'] #page-hub,
  html[style='font-size: 200%;'] #page-hub{margin-top: 0rem !important;}
  .bg-white{background-color: #fff !important; }  


  html:not([style='font-size: 150%;']):not([style='font-size: 200%;']) .hubProf .cd-layout-horizontal.cd-icone:not(.no-filet) > *:after, .hubProf .cd-layout-horizontal:not(.cd-icone):not(.no-filet) > *:before {
    top: 0px;
    bottom: 0px;
  }
}

/* Section vitines */ 
.cd-max-ctn[style*="b30-vit"]{background-repeat:no-repeat}  

.cd-top-vitrine .t22 {font-size: 1.38rem;}

#contenu .professionnels{background-repeat: no-repeat;background-size: cover;}
#contenu .professionnels .texte-vitrine img {width: auto !important;}

@media (max-width: 576px){
   #contenu .professionnels {background-size: auto;} 
   #contenu .professionnels .texte-vitrine .w-50 {
       width: 100% !important;
       padding-bottom: 5px;
    }  
}

@media (min-width: 769px) {
    .cd-top-vitrine  > div.c-bg-transparent,
    .cd-top-vitrine  > div.c-bg-transparent{
        background-color: transparent;
        padding-left: 0px;
        margin-left: -20px;
    }
}

.cd-top-vitrine:not(.cd-vitrine) {
    min-height: 450px;
}
.cd-top-vitrine > div{
  min-width: 0;
    width: 45%;
    width: calc(50% - 20px);;
}
.cd-top-vitrine #psychologues {background-color: #DCE3DC;}
.cd-top-vitrine #psychologues:after {
  background: linear-gradient(to bottom, transparent 0, #DCE3DC 28px, #DCE3DC 100%);
  background: linear-gradient(to bottom, transparent 0, currentColor 28px, currentColor 100%); 
  color: #DCE3DC;
}

.cd-top-vitrine #criminologues {background-color: #F5F1F0;}
.cd-top-vitrine o#criminologues:after {
  background: linear-gradient(to bottom, transparent 0, #F5F1F0 28px, #F5F1F0 100%);
  background: linear-gradient(to bottom, transparent 0, currentColor 28px, currentColor 100%); 
  color: #F5F1F0;
}

.cd-top-vitrine #dietetistes {background-color: #F5F1F0;}
.cd-top-vitrine #dietetistes:after {
  background: linear-gradient(to bottom, transparent 0, #F5F1F0 28px, #F5F1F0 100%);
  background: linear-gradient(to bottom, transparent 0, currentColor 28px, currentColor 100%); 
  color: #F5F1F0;
}

/* Redefinition des styles pour les vitrine  */
#contenu .cd-top-vitrine {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin: 0 -10px 30px;
  padding: 20px;
  min-height: 375px;
  background-size: cover;
  background-repeat: no-repeat;
  -ms-flex-line-pack: start;
  align-content: flex-start;
  background-position: 50% 0%;
}

@media (min-width: 576px) {
  #contenu .cd-top-vitrine {
   margin: 0 0 30px;
  }
}


@media (max-width: 768px) {
  #contenu .cd-top-vitrine {
   background-repeat: no-repeat;
   background-size: inherit;
   margin: 0 0px 30px;
   padding: 20px 10px;
  } 
  .cd-top-vitrine > div{
   min-width: 0;
   width: 45%;
   width: 100%;
   margin-top: 350px;
   padding: 20px;
   background-color: #fffffffa;
   border-radius: 8px;
  }   
  .texte-vitrine .flex-container {
    width: 50%;
  } 
  html[style='font-size: 150%;'] #carte-credit-ligne .tuile-h .desc,
  html[style='font-size: 200%;'] #carte-credit-ligne .tuile-h .desc{
   padding-bottom: 3rem;
  }
  
}

    
@media (max-width: 768px) and (min-width: 577px){
    .texte-vitrine .flex-container{
        width: calc(100% - 45%) !important;
        /* width: 57% !important; */
    }  
}

#contenu .cd-top-vitrine.ancre-h100, #contenu .professionnels.ancre-h100 { background-position-x: 100%; } 
#contenu .cd-top-vitrine.ancre-h95, #contenu .professionnels.ancre-h95 { background-position-x: 95%; } 
#contenu .cd-top-vitrine.ancre-h90, #contenu .professionnels.ancre-h90 { background-position-x: 90%; } 
#contenu .cd-top-vitrine.ancre-h85, #contenu .professionnels.ancre-h85 { background-position-x: 85%; } 
#contenu .cd-top-vitrine.ancre-h80, #contenu .professionnels.ancre-h80 { background-position-x: 80%; } 
#contenu .cd-top-vitrine.ancre-h75, #contenu .professionnels.ancre-h75 { background-position-x: 75%; } 
#contenu .cd-top-vitrine.ancre-h70, #contenu .professionnels.ancre-h70 { background-position-x: 70%; } 
#contenu .cd-top-vitrine.ancre-h65, #contenu .professionnels.ancre-h65 { background-position-x: 65%; }     
#contenu .cd-top-vitrine.ancre-h50, #contenu .professionnels.ancre-h50 { background-position-x: 50%; } 
#contenu .cd-top-vitrine.ancre-h55, #contenu .professionnels.ancre-h55 {background-position-x: 70%;}     

.texte-vitrine .flex-container{width: 85%;align-items: center;}



/* Section de carte de credit */ 
#cartes-credit > div {
    position: relative;
    margin-bottom: 1rem;
    border: solid 1px #d5d5d5;
}
#cartes-credit > div > a{
    color: #3e3e3e;
    text-decoration: none;
}
#cartes-credit > div > a > p{
    padding-left: 1rem;
    color: #3e3e3e;
}
#cartes-credit > div > a > p.titre.carte-credit {
    margin-top: -0.4rem;
    background-color: #eef7f3;
    text-transform: uppercase;
    padding-top: 10px;
    padding-bottom: 10px;
}

.desc.ic-bonisdollard{
    margin-left: -10px !important;
    padding-left: 2.5rem !important;
}

.ic-bonisdollard::before{
    background-image: url(/ressources/images/b30-pro-ic-bonidollards.svg);
    width: 1.5rem !important;
    height: 1.5rem !important;
    top: calc((1.5em - 2rem) / 2) !important;
    left: 0.5rem !important;
}
#cartes-donidollard > a::after{
    bottom: 3rem;
}

#cartes-donidollard .cd-grille.flex-direction{
    flex-direction: column;
}

@media (min-width: 768px) {
  #cartes-donidollard .cd-grille.flex-direction{flex-direction: row;}
}

#cartes-donidollard .colonnes{
    padding: 0px;
}
#cartes-donidollard .colonnes .img{
    margin-left: 0px;
}
#cartes-donidollard .colonnes .img img{
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    width: 100%;
    height: 100%;
}

html[style='font-size: 150%;'] #cartes-donidollard .colonnes .img img,
html[style='font-size: 200%;'] #cartes-donidollard .colonnes .img img{
    border-top-right-radius: 8px;
    border-bottom-left-radius: 0px;
}

#cartes-donidollard .colonnes .img + .desc{
    padding-left: 40px;
    padding-top: 20px;
}
@media (max-width: 769px) {
    #cartes-donidollard .colonnes .img img{
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        border-bottom-left-radius: 0px;
        width: 100%;
        height: 100%;
    }
    #cartes-donidollard .colonnes .img + .desc {
        padding: 20px;
    }    
}

@media (min-width: 769px){
    .cd-grille.gutter-10 > .cd-50 {
        flex-basis: calc(50% - 10px);
        -ms-flex-preferred-size: calc(50% - 20px);
        max-width: calc(50% - 10px);
    }
}


/* Model de Bloc A - exclusif */
#carte-credit-ligne .tuile-h {
     border-radius: 8px;
     margin: 0px 0px 15px -5px;
}
#carte-credit-ligne .tuile-h a{
     border: solid 1px #d5d5d5;
     border-radius: 8px;
     /* height: 110px; */
}

#carte-credit-ligne .tuile-h a:focus,
#carte-credit-ligne .tuile-h a:hover{
     border: 1px solid #fff;
}


/* bordure au survol/focus */
#carte-credit-ligne.lien-carte > * > a{
  position: relative;
}
#carte-credit-ligne.lien-carte > * > a:before {
  content: '';
  position: absolute;
  top: -1px;
  right: -1px;
  bottom: -1px;
  left: -1px;
  z-index: 3;
  border: 2px solid transparent;
}


#carte-credit-ligne.lien-carte > * > a:hover:before,
#carte-credit-ligne.lien-carte > * > a:focus:before {
  border-color: #00884e;
  border-radius: 8px;
}

html[style='font-size: 150%;'] #carte-credit-ligne .tuile-h,
html[style='font-size: 200%;'] #carte-credit-ligne .tuile-h{height: auto;margin: 0 10px 10px 10px;}


#carte-credit-ligne .tuile-h div.img-carte {
    flex-basis: 35%;
    -ms-flex-preferred-size: 35%;
    max-width: 35%;
    background-color: #cce8dc;
    /* vertical-align: middle; */
    display: flex;
    align-items: center;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}
#carte-credit-ligne .tuile-h div.desc {
     padding: 10px;
}
#carte-credit-ligne .tuile-h .img-carte img {
     width: 8.8125rem;
     height: auto;
     border-top-left-radius: 8px;
     border-bottom-left-radius: 8px;
     /* vertical-align: middle; */
     align-items: center;
}
#carte-credit-ligne .desc .titre{
    margin-top: 0;
    margin-bottom: 0;
    color: #383838;
    text-decoration: none;
    font-family: arial, helvetica, sans-serif;
    font-size: 0.9375rem;
    font-weight: 700;
} 
#carte-credit-ligne .desc .avantage-carte{
    font-size: 0.875rem;
    display: block;
    margin-top: 3px
} 
#carte-credit-ligne .desc .avantage-carte +.avantage-carte{
    width: 80%;
} 

#carte-credit-ligne .desc {
    display: block;
    margin: 0;
    color: #3e3e3e;
    font-size: 1rem;
    font-weight: normal;
    line-height: 131%;
}


#promo .cd-grille {
    margin: 15px 0px;
}


#promo .cd-grille #carte-credit-ligne .cd-grille{
    margin: 0px;
}

#promo div.cd-grille div#forfaits{
  border-right: 1px solid #cbcbcb;
  padding-right: 14px;
}

html[style='font-size: 150%;'] #promo div.cd-grille div#forfaits,
html[style='font-size: 200%;'] #promo div.cd-grille div#forfaits{
  border-right: 0px;
  border-bottom: 1px solid #cbcbcb;
  padding: 0px 14px;
}
html[style='font-size: 150%;'] #promo div.cd-grille div#cartes,
html[style='font-size: 200%;'] #promo div.cd-grille div#cartes{
  padding: 0px 14px;
}


#promo, .detail{
    border: solid 1px #cdcdcd;
    border-radius: 8px;
    background-color: #fff;
}

#promo .cd-grille h4{
    color: #3E3E3E;
}

#promo #img-promo{
    /* margin-bottom: 10px; */
    /* padding-bottom: 10px; */
    min-height: 10.5625rem;
    justify-content: center;
    align-items: center;
    height: 10.5625rem;
    flex-wrap: inherit;
}
#promo #img-promo .flex-container{
    display: flex;
    flex-direction: column;
    max-width: 15rem;
    align-items: center;
    margin: 0 25px;
    height: 100%;
    justify-content: center;
    align-self: center;
}

html[style='font-size: 150%;'] #promo #img-promo .flex-container, 
html[style='font-size: 200%;'] #promo #img-promo .flex-container{height: auto}


#promo #img-promo .flex-container .img{
    flex-grow: 1;
    max-height: 70px;
}

.col-transac-cartes{
  display: -webkit-box;
  display: -ms-flexbox; 
  display: flex;
    flex-direction: column;
}

#forfaits div{
  flex-grow: 1;
}

.col-transac-cartes div.detail{
  border-radius : 8px;
  padding: 0px 10px 10px 10px;
}


/*
@media (max-width:720px ) AND (min-width:600px){
  #promo #img-promo{height: auto;}
 }
*/
@media (max-width:768px){
    #promo #img-promo .flex-container{
        margin: 0 10px;
        margin-top: 15px;
    }
    

  #carte-credit-ligne .desc .avantage-carte{
    max-width: 75%
  } 
  #promo div.cd-grille div#cartes{padding: 0px 10px;} 
    #carte-credit-ligne .tuile-h {height: auto;flex-direction: column;}
    #carte-credit-ligne .tuile-h div.img-carte{height: auto;}
    #carte-credit-ligne .tuile-h .img-carte img {
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        border-bottom-left-radius: 0px;
    }  
      #carte-credit-ligne .tuile-h div.img-carte{
        flex-basis: 100%;
        -ms-flex-preferred-size: 100%;
        max-width: 100%;
        height: auto;
      }      
}

@media (max-width: 576px){
    #promo #img-promo{flex-direction: column;height: auto;}
  #promo #img-promo .flex-container{ margin: 10px 20px; }  
    #promo div.cd-grille div#forfaits{
        border-bottom: 1px solid #cbcbcb;
        border-right:  0px !important;
        padding: 0px 10px;
    }
    #promo div.cd-grille div#cartes{
        padding: 0px 10px;
    } 
    #carte-credit-ligne .tuile-h {
        height: auto;
    }
    #carte-credit-ligne .tuile-h{
        border: solid 1px #d5d5d5;
    }
    #carte-credit-ligne .tuile-h a{
         border: 0px;
    }    
    #carte-credit-ligne .tuile-h .img-carte img {
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        border-bottom-left-radius: 0px;
     }     
}

html[style='font-size: 150%;'] #carte-credit-ligne .tuile-h .img-carte img {
    width: 100%;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom-left-radius: 0px;
}
html[style='font-size: 200%;'] #carte-credit-ligne .tuile-h .img-carte img {
    width: 100%;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom-left-radius: 0px;
}

html[style='font-size: 150%;'] #carte-credit-ligne .tuile-h .desc{margin-top: 10px;}
html[style='font-size: 200%;'] #carte-credit-ligne .tuile-h .desc{margin-top: 10px;}

#carte-credit-ligne.lien-carte  > * > a{
    text-decoration: none;
}

/* Que pour l'offre fmsq */
#carte-credit-ligne.lien-carte  > * > a#specialiste{
    min-height: 9.375rem
}
#carte-credit-ligne.lien-carte  > * > a#specialiste img{
    width: 9.8125rem;
}

#carte-credit-ligne.lien-carte  > * > a .desc:after {
    content: '';
    position: absolute;
    right: 1.25rem;
    bottom: 1.0rem;
    width: 1.5rem;
    height: 1.5rem;
    background-image: url(/ressources/images/ic-fleche-liens.svg);
    background-size: contain;
    background-repeat: no-repeat;
}

/* Section Conjoint */ 

.ic-couple:before {
    background-image: url(/ressources/images/b30-ic-pro-conjoint.svg);
    top: calc((1.5em + 1.5rem) / 2) !important;
    left: calc((1.5em - 6.5rem) / 2) !important;
    width: 4rem !important;
}
.cd-panel:not(.hubProf) {
    padding-top: 40px;
    padding-bottom: 40px;
}
.cd-panel#conjoint  .panel-interne{
    padding: 0px 9px 0px 81px;
    margin: auto;
} 

@media (min-width: 769px) {
 .cd-panel#conjoint {
    margin-bottom: 30px;
    border: 1px solid #979797;
  }      
}

@media (max-width: 768px){

  .cd-panel {
  margin-right: 0px;
  margin-left: 0px;
  border-radius: 8px;
  }
}

/* Section de affaire */ 
.ic-affaires-vert:before { background-image: url(/ressources/images/b30-ic-affaires.svg); }
.ic-cartes-credit-vert:before { background-image: url(/ressources/images/b30-ic-cartes-credit.svg); } 
.ic-employes-vert:before { background-image: url(/ressources/images/b30-ic-employes.svg); }
.ic-entreprise-vert:before { background-image: url(/ressources/images/b30-ic-entreprise.svg); }

.no-padding-right { padding-right:  10px!important } 
.no-padding-left { padding-left: 10px!important }
@media (min-width: 769px){
    .no-padding-right { padding-right:  0!important } 
    .no-padding-left { padding-left: 0!important }
}

.offre-exclusive{
  background-color: #eef7f3 !important;
  border: solid 2px #cbcbcb !important;
  }

.offre-exclusive span.desc p:not(.desc){
      line-height: 131% !important;
}  

#page.fr .offre-exclusive:before {
    content: 'Offre exclusive';
    position: absolute;
    top: 0;
    left: 0;
    width: 9.5rem;
    height: 2.5rem;
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    color: #fff;
    background-color: #007944;
    padding: 0.5rem;
    border-top-left-radius: 6px;
}

#page.en .offre-exclusive:before {
    content: 'Exclusive offer';
    position: absolute;
    top: 0;
    left: 0;
    width: 9.5rem;
    height: 2.5rem;
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    color: #fff;
    background-color: #007944;
    padding: 0.5rem;
    border-top-left-radius: 6px;
}



/* Section de investissement */ 
.ic-pro-portefeuille:before { background-image: url(/ressources/images/b30-ic-pro-portefeuille.svg); }
.ic-pro-courtage:before { background-image: url(/ressources/images/b30-ic-pro-courtage.svg); }
.ic-pro-valeur-mobilieres:before { background-image: url(/ressources/images/b30-ic-pro-valeur-mobilieres.svg); }
.ic-pro-investissement:before { background-image: url(/ressources/images/ic-pro-investissements.svg); }
.cd-tuiles > div > h3, .cd-tuiles > li > titre{line-height: inherit !important;}
.ic-pro-investissement .cd-position-bas ul.cd-liens-action {margin-bottom: 0px !important;}


/*   Section Obtenir   */

#obtenir {
    border: solid 1px #cbcbcb;
    border-radius:8px;
} 

#obtenir div:last-child {
    padding-left: 20px ;
    padding-right: 20px ;
}
#obtenir div:first-child {
    height: 220px;
    height: 13.75rem;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    border-top-left-radius: 0px;
    background-position-y: 30%;
    background-size: cover;
} 
@media (max-width: 577px){
     #obtenir div:first-child {
      height: 220px;
      height: 13.75rem;
      border-top-right-radius: 8px;
      border-top-left-radius: 8px;
      border-bottom-right-radius: 0px;
  } 
    #obtenir div:last-child {
        padding-top: 20px;
    }    
}


@media (min-width: 577px){
    
    #obtenir {
        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: space-between;
        justify-content: space-between;
    }   
    #obtenir > div {
        width : 50% ;
    }
    #obtenir div:first-child {
        order: 2;
        
    }     
    #obtenir div:last-child {
        padding-top: 20px ;
        order: 1;
    } 
    #obtenir div img {
        width: 100%;
        height: 100%;
    }     
}




/*  150 et 200 % */
html[style='font-size: 150%;'] #obtenir > div, 
html[style='font-size: 200%;'] #obtenir > div {
    width: 100%;
}

html[style='font-size: 150%;'] #obtenir div:first-child, 
html[style='font-size: 200%;'] #obtenir div:first-child {
    order: 1;
    background-size: cover;
    background-position-y: 35%;
    border-bottom-right-radius: 0px;
    border-top-left-radius: 8px;
}

html[style='font-size: 150%;'] #obtenir div:last-child, 
html[style='font-size: 200%;'] #obtenir div:last-child {
    order: 2;
}



html[style='font-size: 150%;'] #obtenir, 
html[style='font-size: 200%;'] #obtenir { 
    flex-direction: column;

}


/* Section Previlege */ 
@media (min-width: 600px) AND  (max-width: 769px ) {   
  .cd-grille.gutter-20 .cd-20{
   max-width: calc(100% - 20px);
   flex-basis: calc(100% - 20px);%;
  }
}