@charset "UTF-8";
/* Welcome to Compass.
 * In this file you should write your main styles. (or centralize your imports)
 * Import this file using the following HTML or equivalent:
 * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
/* Welcome to Compass.
 * In this file you should write your main styles. (or centralize your imports)
 * Import this file using the following HTML or equivalent:
 * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
/* placeholder: proportions vidéo youtube responsive */
/* placeholder : width de 100vw */
/* changer delay selon position dans la liste*/
/* changer width selon position dans la liste */
#block-accueilforfaits {
  background-color: #f1f1f1;
  padding: 50px 0 70px 0;
}
#block-accueilforfaits .field--name-body {
  max-width: calc(1440px - 240px);
  width: calc(100% - 50px);
  margin: 0 25px;
}
#block-accueilforfaits .field--name-body .field__item {
  margin: 0;
  padding: 25px 0;
}
#block-accueilforfaits .field--name-body .field__item h2 {
  font-size: 2.375em;
  font-family: "basier_squarebold";
  line-height: 100%;
  margin: 0 0 0 0;
  color: #2C3E50;
}
#block-accueilforfaits .field--name-body .field__item p:nth-child(2) {
  display: none;
}
#block-accueilforfaits .field--name-body .field__item p.mobile {
  display: none;
}
#block-accueilforfaits .field--name-body .field__item ul {
  list-style-type: none;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
#block-accueilforfaits .field--name-body .field__item ul li {
  width: 100%;
  text-align: center;
  background-color: #fff;
  display: none;
}
#block-accueilforfaits .field--name-body .field__item ul li.show {
  display: block;
}
#block-accueilforfaits .field--name-body .field__item ul li h3 {
  color: #52b3d9;
  font-size: 2em;
  font-family: "basier_squarebold";
  line-height: 100%;
  padding: 30px 25px;
  margin: 0;
  text-align: left;
}
#block-accueilforfaits .field--name-body .field__item ul li:nth-child(4) h3 {
  font-size: 2em;
}
#block-accueilforfaits .field--name-body .field__item ul li:nth-child(4) h3 span {
  font-size: 0.5em;
  color: #3c546c;
}
#block-accueilforfaits .field--name-body .field__item ul li div {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  align-items: center;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  text-align: center;
  width: calc(100% - 80px);
  margin: 0 auto;
  border: 1px solid #52b3d9;
  background-color: #EEF2F6;
  padding: 15px 15px 30px 15px;
}
#block-accueilforfaits .field--name-body .field__item ul li div p {
  font-size: 0.875em;
  color: #3c546c;
  margin: 0 0 0 0;
  line-height: 120%;
}
#block-accueilforfaits .field--name-body .field__item ul li div p strong {
  font-size: 3.214em;
  font-family: "basier_squaremedium";
  display: inline-block;
  width: 100%;
  line-height: 120%;
}
#block-accueilforfaits .field--name-body .field__item ul li div p:nth-child(2) {
  display: block;
}
#block-accueilforfaits .field--name-body .field__item ul li span.note-mobile {
  font-size: 0.9em;
  font-family: "basier_squaresemibold";
  color: #2C3E50;
  display: block;
  margin: 0 0 10px 0;
  display: block;
  width: 100%;
}
#block-accueilforfaits .field--name-body .field__item ul li a {
  margin: 30px 0;
  display: inline-block;
  font-size: 1rem;
  color: #fff;
  text-decoration: none;
  background-color: #d9534f;
  border-radius: 70px;
  height: 45px;
  line-height: 45px;
  padding: 0 30px;
  font-family: "basier_squaremedium";
}
#block-accueilforfaits .field--name-body .field__item ul li a:hover {
  background-color: #52b3d9;
}
#block-accueilforfaits .field--name-body .field__item p.note {
  font-size: 0.75em;
  color: #3c546c;
  padding: 0px 25px 15px 25px;
  margin: 0;
  background-color: #fff;
  line-height: 110%;
}
#block-accueilforfaits .field--name-body .field__item ul.navigation-forfaits-mobile {
  margin: 30px 0 0 0;
  padding: 0;
  list-style-type: none;
}
#block-accueilforfaits .field--name-body .field__item ul.navigation-forfaits-mobile li {
  display: block;
  color: #52b3d9;
  font-size: 1.25em;
  font-family: "basier_squarebold";
  height: 50px;
  line-height: 50px;
  padding: 0 0 0 15px;
  background-color: #fff;
  text-align: left;
  border-bottom: 1px solid #DDE6ED;
  width: 100%;
  border-right: 0;
  cursor: pointer;
}
#block-accueilforfaits .field--name-body .field__item ul.navigation-forfaits-mobile li.selected {
  background-color: #3c546c;
  color: #fff;
}
#block-accueilforfaits .field--name-body .field__item ul.navigation-forfaits-mobile li:nth-child(2) {
  background-image: url(../images/plus-populaire-mobile.png);
  background-size: contain;
  background-position: right top 4px;
  background-repeat: no-repeat;
}
body.lang-en #block-accueilforfaits .field--name-body .field__item ul.navigation-forfaits-mobile li:nth-child(2), body.lang-en-us #block-accueilforfaits .field--name-body .field__item ul.navigation-forfaits-mobile li:nth-child(2) {
  background-image: url(../images/most-popular-mobile.png);
}

@media only screen and (min-width: 1024px) {
  #block-accueilforfaits {
    padding: 60px 0 80px 0;
  }
  #block-accueilforfaits .field--name-body {
    margin: 0 auto;
  }
  #block-accueilforfaits .field--name-body .field__item {
    background-color: #fff;
    margin: 0;
    padding: 35px 35px 50px 35px;
    box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.05);
  }
  #block-accueilforfaits .field--name-body .field__item h2 {
    font-size: 3em;
  }
  #block-accueilforfaits .field--name-body .field__item p {
    font-size: 1.35em;
    margin: 35px 0 40px 0;
    color: #3c546c;
    font-family: "basier_squaresemibold";
    line-height: 120%;
  }
  #block-accueilforfaits .field--name-body .field__item p:nth-child(2) {
    display: block;
  }
  #block-accueilforfaits .field--name-body .field__item ul {
    margin: 0 0 30px 0;
  }
  #block-accueilforfaits .field--name-body .field__item ul li {
    width: 22.76%;
    display: block;
  }
  #block-accueilforfaits .field--name-body .field__item ul li h3 {
    color: #3c546c;
    font-size: 1.5em;
    padding: 40px 0px 15px 0px;
    border: 1px solid #52b3d9;
    border-bottom: 0;
    text-align: center;
  }
  #block-accueilforfaits .field--name-body .field__item ul li div {
    height: 155px;
    width: calc(100% - 2px);
    background-color: transparent;
    padding: 0;
  }
  #block-accueilforfaits .field--name-body .field__item ul li span.note-mobile {
    display: none;
  }
  #block-accueilforfaits .field--name-body .field__item ul li a {
    margin: 45px 0;
  }
  #block-accueilforfaits .field--name-body .field__item ul li:nth-child(1) div {
    border-top-color: #DDE6ED;
  }
  #block-accueilforfaits .field--name-body .field__item ul li:nth-child(2) {
    position: relative;
  }
  #block-accueilforfaits .field--name-body .field__item ul li:nth-child(2) h3 {
    background-color: rgba(221, 230, 237, 0.5);
  }
  #block-accueilforfaits .field--name-body .field__item ul li:nth-child(2) h3::before {
    content: "";
    width: 174px;
    height: 59px;
    background-image: url(../images/plus-populaire.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: -17px;
    right: 0;
    z-index: 2;
  }
  body.lang-en #block-accueilforfaits .field--name-body .field__item ul li:nth-child(2) h3::before, body.lang-en-us #block-accueilforfaits .field--name-body .field__item ul li:nth-child(2) h3::before {
    background-image: url(../images/most-popular.png);
  }
  #block-accueilforfaits .field--name-body .field__item ul li:nth-child(2) div {
    background-color: rgba(221, 230, 237, 0.5);
  }
  #block-accueilforfaits .field--name-body .field__item ul li:nth-child(3) {
    padding-right: 39px;
    border-right: 2px solid #EEF2F6;
  }
  #block-accueilforfaits .field--name-body .field__item ul li:nth-child(3) div {
    border-top-color: #DDE6ED;
  }
  #block-accueilforfaits .field--name-body .field__item ul li:nth-child(4) {
    padding-left: 39px;
  }
  #block-accueilforfaits .field--name-body .field__item ul li:nth-child(4) h3 {
    padding: 18px 15px 12px 15px;
    font-size: 1.38em;
  }
  #block-accueilforfaits .field--name-body .field__item ul li:nth-child(4) h3 span {
    font-size: 0.525em;
    font-family: "basier_squaresemibold";
  }
  #block-accueilforfaits .field--name-body .field__item ul li:nth-child(4) div {
    border-top-color: #DDE6ED;
  }
  #block-accueilforfaits .field--name-body .field__item p.note {
    font-size: 0.8125em;
    margin: 10px 0 0 0;
    padding: 0;
    background-color: transparent;
  }
  #block-accueilforfaits .field--name-body .field__item ul.navigation-forfaits-mobile {
    display: none;
  }
}
@media only screen and (min-width: 1280px) {
  #block-accueilforfaits {
    padding: 100px 0 80px 0;
  }
  #block-accueilforfaits .field--name-body {
    width: calc(100% - 160px);
  }
  #block-accueilforfaits .field--name-body .field__item {
    padding: 60px;
  }
  #block-accueilforfaits .field--name-body .field__item h2 {
    font-size: 3.75em;
  }
  #block-accueilforfaits .field--name-body .field__item p {
    font-size: 1.5625em;
    margin: 55px 0 45px 0;
  }
  #block-accueilforfaits .field--name-body .field__item ul {
    margin: 0 0 50px 0;
  }
  #block-accueilforfaits .field--name-body .field__item ul li:nth-child(4) h3 {
    padding: 18px 15px 12px 15px;
  }
}
@media only screen and (min-width: 1440px) {
  #block-accueilforfaits {
    padding: 120px 0 100px 0;
  }
  #block-accueilforfaits .field--name-body .field__item {
    padding: 60px;
  }
  #block-accueilforfaits .field--name-body .field__item ul {
    margin: 0 0 50px 0;
  }
  #block-accueilforfaits .field--name-body .field__item ul li {
    width: 240px;
  }
  #block-accueilforfaits .field--name-body .field__item ul li:nth-child(3) {
    padding-right: 59px;
  }
  #block-accueilforfaits .field--name-body .field__item ul li:nth-child(4) {
    padding-left: 59px;
  }
}