body{

  --main-color: #d8245b;
  --main-color-hover: #e91e63;
  --color-bold: #274873;
  --color-lightGrey: #efefef;
  --color-darkGrey: #282828;
  --color-text: #6c7293;
  --color-title:  #435c7d;
  --color-text-footer: #aaa;
  --color-bg-table: #f6f6f6;
}


a {
  color: #d8245b;
  text-decoration: underline;
  font-size: 16px;
}


html,body{

  color: var(--color-text);

  font-size: 0.875rem;

  font-size: 13px;

  /*font-family: "Poppins", Arial, sans-serif;*/

  min-height: 100vh;

  width: 100%;

  margin: 0;

}



.page{

  display: flex;

  flex-direction: column;

  min-height: 100vh;

}

main{

  flex-grow: 1;

  flex-basis: 0;

  padding-top: 80px;

}

p{

  margin-bottom: 0;

}

.fw-bolder{

  color: var(--color-bold);

}

.bg-primary{

  background-color: var(--main-color)!important;

}



.bg-lightGrey{

  background-color: var(--color-lightGrey);

}

.bg-darkGrey{

  background-color: var(--color-darkGrey);

}

.cstBtn{

  background-color: var(--main-color);

  border-color: var(--main-color);

  color: #fff;

  font-size: 1.1rem;

  text-transform: capitalize;

  font-weight: 500;

  text-align: center;

  width: 100%;

  line-height: 1.5;

  border-radius: .2rem;

  display: inline-block;

  padding: .5rem 0;

  text-decoration: none;

}

.cstBtn:hover{

  color: #fff;

  text-decoration: underline;

  background-color: var(--main-color-hover);

}

h1, h2, h3{

  font-size: 1.8em;

  color: var(--color-title);

  font-weight: 700;

    text-transform: uppercase;

}

h2 {

    font-size: 1.6em;

}

h3 {

    font-size: 1.3em;

}

/************* header *************/

.navbar{

  background-color: #fff;

}

.navbar-nav {
  text-transform: uppercase;
}

.navbar-toggler{

  background-color: var(--main-color);

}

.navbar-toggler span{

  width: 22px;

  height: 3px;

  background-color: #fff;

  display: block;

  margin: 4px 0;

}

.navbar-brand img{

  height: 40px;

  width: auto;

}

.navbarCol{

  display: flex;

  justify-content: space-between;

  flex-wrap: wrap;

}

#navbarNav{

  width: auto;

  height: 80px;

}

.navbar-brand{

  display: flex;

  align-items: center;

}

.logoText{

  font-weight: 400;

  font-size: .9em;

  padding-left: 10px;

  color: var(--color-title);

  font-size: 1.3rem;

  line-height: initial;

  font-weight: 700;

  line-height: 18px;

}

.line1{

  font-weight: 400;

  font-size: .9em;

}

.navbar #navbarNav .nav-link{
  padding: 26px 13px;
  font-size: 1.1em;
  color: var(--color-text);
  border-bottom: 4px inset #fff; 
}

.navbar #navbarNav .nav-link:hover{

  color: var(--main-color);

  border-bottom: 4px inset var(--main-color);

}

.nav-item{

  position: relative;

}

.navbar{

  padding: 0;

  height: 80px;

  border-bottom: 1px solid var(--color-lightGrey);

  transition: .5s;

}

.dropdown-item{

  text-transform: uppercase;

}

.dropdown-menu{

  border-width: 0;

  padding: 0;

  -webkit-box-shadow: 0 0 50px 0 rgba(82,63,105,.15);

    box-shadow: 0 0 50px 0 rgba(82,63,105,.15);

}

.navbar .dropdown-menu li a{

  height: 50px;

  line-height: 20px;

  font-weight: 500;

  color: var(--color-text);

  font-size: 1rem;

  padding: 1em;

  transition: .25s;

  border-bottom: 4px solid transparent;

}

.navbar .dropdown-menu .dropdown-item:focus,

.navbar .dropdown-menu .dropdown-item:hover {

    color: var(--main-color);

    background-color: #fff;

    border-bottom: 4px solid var(--main-color);

}

.miniNav{

  height: 50px;

  /* background-color: #212529; */

  background-color: var(--color-darkGrey);

}

.miniNav #navbarNav a.nav-link{

  padding: 12px;

  color: #fff!important;

  border-bottom: 4px inset var(--color-darkGrey);

  /* border-bottom: 4px inset #212529; */

}

.miniNav .navbar-brand .logoText{

  color: var(--main-color);

}

/******** tableau *******************/

thead{

  border: 1px solid var(--main-color);

}

table tbody{

  background-color: var(--color-bg-table);

}

tbody tr:nth-child(1), tbody tr:nth-child(2), tbody tr:nth-child(3), tbody tr:last-child {

    border-left: 1px solid var(--main-color)!important;

    border-right: 1px solid var(--main-color)!important;

}

tbody>tr:nth-child(2n) {

    background-color: var(--color-lightGrey);

}

tr:last-child, tr:nth-child(3) {

    border-bottom: 1px solid var(--main-color)!important;

}

tr.empty {

    background-color: #fff!important;

    height: 20px;

    border: 0 solid #fff!important;

}

tbody tr:not(.empty):not(.titleRecommended) td:last-child,

tbody tr:not(.empty):not(.titleRecommended) td:first-child{

  width: 180px;

  padding: 0.75rem;

  vertical-align: middle;

}

.noteStar{

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

}



tr{

  border-style: none;

}

.btnPicture{

  position: relative;

  display: inline-block;

}

.btnPicture img{

  border: 1px solid transparent;

  height: 100%;

  width: auto;

}

.btnPicture:hover img {

  border: 1px solid var(--main-color);

    opacity: .9;

}

.sitePosition {

    position: absolute;

    left: 0;

    top: 0;

    width: 30px;

    background-color: var(--main-color);

    text-align: center;

    font-size: 20px;

    font-weight: 700;

    color: #fff;

    border-radius: 0 0 10px;

}

tbody td:nth-child(3) {

    width: 170px;

    font-size: 28px;

    font-weight: 500;

    color: var(--main-color-hover);

    text-align: center;

    background-color: rgba(255,255,255,.4);

    margin: auto;

    height: 100%;

    vertical-align: middle;

}



.noteFix {

    color: #6b6b6b;

    font-weight: 300;

    font-size: 24px;

}

.btnTitle {

    font-size: 24px;

    font-weight: 500;

    color: #615e58;

    text-decoration: none;

}

.btnTitle:hover{

  text-decoration: underline;

  color: #615e58;

}



.rankingStars{

  display: flex;

  justify-content: center;

}

.tableTitle{

  text-align: center;

  font-size: 18px;

  text-transform: uppercase;

  font-weight: 500;



}

.titleRecommended{

  background-color: #fff!important;

  color: var(--main-color);

  border: 1px solid var(--main-color);

  border-bottom-width: 0;

  padding: 2px;

}

.tr-favoris .sitePosition{

  display: none;

}

/***************** footer ************/

input[type=email]{

  line-height: 20px;

    margin-bottom: 0;

    margin-top: 0;

    padding: 10px 10px;

}

button.cstBtn{
  height: 100%;
}

button.cstBtn:hover{

  text-decoration: none;

}

footer{

  text-align: center;

}

.formContainer{

  width: 700px;

}

.inputContainer{

  width: 70%;

}

.btnContainer{

  width: 30%

}

footer .bg-darkGrey p,

footer .bg-darkGrey a{

  color: var(--color-text-footer);

}

.menuFooter{

  display: flex;

  justify-content: center;

  list-style: none



}

.menuFooter a{

  padding-left: 10px;

  padding-right: 17px;

  position: relative;

  text-decoration: underline;

}

.menuFooter li:last-of-type a{

  padding-right: 10px;

}

.menuFooter li:not(:last-of-type) a::after{

  content: "";

  position: absolute;

  width: 7px;

  height: 1px;

  right: 0;

  top: 50%;

  background-color: var(--color-text-footer);

}

.cstIcon{

  width: 22px;

  height: 22px;

  display: inline-block;

  margin: 1px;

  position: relative;

}

.titleRecommended .cstIcon{

  width: 16px;

  height: 16px;

  vertical-align: text-top;

  margin:5px 5px 0 5px;

}

.cstIcon::before {

  position: absolute;

  display: inline-block;

  content: "";

  width: 100%;

  height: 100%;

  top: 0;

  left: 0;

  background-repeat: no-repeat;

  background-size: contain;

  background-position: center;

}

.alert.alert-solid-brand {
    background: rgba(93,120,255,.1);
    border-color: transparent;
    color: #5d78ff;
}
.alert {
    position: relative;
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: .25rem;
}
.alert {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    margin: 0 0 20px;
}

.btn-info {
    background-color: #2786fb!important;
    border-color: #2786fb!important;
    color: #fff !important;
    font-size: 1.1rem;
    text-transform: capitalize;
    font-weight: 500;
    text-align: center;
    width: 100%;
    line-height: 1.5;
    border-radius: .2rem;
    display: inline-block;
    padding: .5rem 0;
    text-decoration: none;
}

.alert-success { background-color: #8BC34A; border: 1px solid #379a3b; color: white; }




@media (max-width: 991.9px) {

  .navbar{

    height: auto;

    background-color: var(--color-darkGrey);

    padding: 5px 0;

  }

  .miniNav .navbar-brand .logoText,

  .logoText{

    color: #fff;

  }

  .navbar #navbarNav a.nav-link{

    text-align: right;

    border-width: 0px;

    padding: 13px;

  }

  .navbar #navbarNav .nav-link:hover{

    border-width: 0px;

  }

  #navbarNav {

    width: 100%;

    height: auto;

  }

  .dropdown-toggle{

    display: none;

  }

  .dropdown-menu{

    display: block;

    text-align: right;

    background-color: var(--color-darkGrey);

    box-shadow: none;

  }

  .navbar .dropdown-menu li a,

  .navbar #navbarNav .nav-link{

    color: #fff;

    border-width: 0px;

  }

  .navbar .dropdown-menu .dropdown-item:focus, .navbar .dropdown-menu .dropdown-item:hover {

    background-color: var(--color-darkGrey);

    border-width: 0px;

}

  .noteFix,

  .rankingStars{

    display: none;

  }

  tbody td:nth-child(3) {

    width: auto;

    font-size: 28px;

    font-weight: 500;

    color: var(--main-color-hover);

    text-align: center;

    background-color: rgba(255,255,255,.4);

    margin: auto;

  }

}



@media (max-width: 767.9px) {







  .miniNav .navbar-brand .logoText{

    color: #fff;

  }

  tbody tr:not(.empty):not(.titleRecommended) td:last-child{

      padding-bottom: 25px;
      width: 80%;
    }

  tbody tr:not(.empty):not(.titleRecommended) td:first-child{

    padding-top: 25px;

  }

  td{

    display: block;

    margin: auto;

  }

  .noteFix,

  .rankingStars{

    display: inline-block;

  } 

.cstBtn {
  font-size: 1.4rem;
}

  tbody td:nth-child(3) {

    background-color: transparent;

  }

  tbody td:nth-child(2) {

    max-width: 450px;

  }

  .formContainer{

    padding-left: 30px;

    padding-right: 30px;

  }

  .btnContainer,

  .inputContainer {

    width: 100%;

  }

  .btnContainer{

    margin-top: 20px;

  }

  .menuFooter{

    display: flex;

    flex-direction: column;

    padding: 0;

    text-align: left;

  }

  .menuFooter li{

    padding: 10px 0;

    border-bottom: 1px solid #3a3a3a;

  }

  .menuFooter a::after{

    display: none;

  }

}

@media (max-width: 419.9px) {

  tbody td:nth-child(2) {

    display: none;

  }

}

.btnReviewFrame 	{ font-size: 1.2rem;}
.btnReviewFrame a  	{ font-size: 18px !important; color: #d8245b !important; }