@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:
* */
/* 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:
* */
/* 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-liste-des-forfaits {
max-width: 1200px;
width: calc(100% - 50px);
margin: 0 auto;
padding: 50px 0 70px;
}
#block-liste-des-forfaits .wrapper .introduction h2 {
color: #2C3E50;
font-size: 1.875em;
font-family: "basier_squarebold";
line-height: 100%;
margin: 0 0 0 0;
}
#block-liste-des-forfaits .wrapper .introduction p {
font-size: 1.125em;
color: #3c546c;
margin: 10px 0 0 0;
}
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee {
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;
-webkit-box-align: start;
-ms-flex-align: start;
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
align-items: flex-start;
margin: 0 0 0 0;
}
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau {
width: 100%;
}
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau .nav-liste-de-prix-mobile {
margin: 45px 0 40px 0;
padding: 0;
list-style-type: none;
border: 1px solid #DDE6ED;
border-bottom: 0;
}
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau .nav-liste-de-prix-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: calc(100% - 15px);
border-right: 0;
cursor: pointer;
}
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau .nav-liste-de-prix-mobile li.selected {
background-color: #3c546c;
color: #fff;
}
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau .nav-liste-de-prix-mobile li:nth-child(3) {
background-image: url(../images/plus-populaire-mobile.png);
background-size: contain;
background-position: right top 4px;
background-repeat: no-repeat;
}
body.lang-en #block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau .nav-liste-de-prix-mobile li:nth-child(3), body.lang-en-us #block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau .nav-liste-de-prix-mobile li:nth-child(3) {
background-image: url(../images/most-popular-mobile.png);
}
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau table tr:first-child th {
display: none;
}
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau table tr:first-child th.show {
display: table-cell;
color: #52b3d9;
font-size: 2em;
padding: 6px 0 7px 0;
background-color: transparent;
}
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau table tr:nth-child(2) td:first-child {
display: none;
}
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau table tr th {
font-size: 1.5em;
color: #3c546c;
font-family: "basier_squarebold";
line-height: 100%;
padding: 40px 60px 15px 15px;
text-align: left;
position: relative;
}
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau table tr th[colspan="4"] {
background-color: #DDE6ED;
font-size: 1.25em;
font-family: "basier_squaresemibold";
color: #2C3E50;
height: 50px;
padding: 15px 0 0 15px;
line-height: 50px;
position: relative;
}
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau table tr th[colspan="4"]::before {
content: " ";
height: 15px;
width: calc(100% + 2px);
background-color: #fff;
position: absolute;
top: 0px;
left: -1px;
}
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau table tr td {
display: none;
border: 1px solid #DDE6ED;
font-size: 0.825em;
height: 50px;
color: #3c546c;
font-family: "basier_squaremedium";
line-height: 130%;
padding: 0 15px 0 15px;
}
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau table tr td.show {
display: table-cell;
}
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau table tr td:first-child {
display: table-cell;
}
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau table tr td.checked {
background-image: url(../images/crochet.png);
background-position: center center;
background-size: 22px;
background-repeat: no-repeat;
}
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau table tr td.none {
background-image: url(../images/none.png);
background-position: center center;
background-size: 12px;
background-repeat: no-repeat;
}
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau table tr td[rowspan="9"],
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau table tr td[rowspan="10"] {
text-align: center;
font-size: 2.8125em;
color: #52b3d9;
margin: 0 0 0 0;
line-height: 85%;
font-family: "basier_squaremedium";
padding: 0 10px 0 10px;
}
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau table tr td[rowspan="9"] span,
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau table tr td[rowspan="10"] span {
font-size: 0.33333em;
display: inline-block;
width: 100%;
line-height: 120%;
color: #3c546c;
}
body.lang-en #block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau table tr td[rowspan="9"], body.lang-en-us #block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau table tr td[rowspan="9"],
body.lang-en #block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau table tr td[rowspan="10"],
body.lang-en-us #block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau table tr td[rowspan="10"] {
line-height: 45%;
}
body.lang-en #block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau table tr td[rowspan="9"] span, body.lang-en-us #block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau table tr td[rowspan="9"] span,
body.lang-en #block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau table tr td[rowspan="10"] span,
body.lang-en-us #block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau table tr td[rowspan="10"] span {
line-height: 280%;
}
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau table tr td:nth-child(3),
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau table tr th:nth-child(3) {
background-color: transparent;
}
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau table tr:nth-child(1) th:nth-child(1) {
border-top: 0;
border-left: 0;
}
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau table tr:nth-child(2) {
height: 120px;
}
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau table tr:nth-child(2) td:nth-child(1) {
color: #3c546c;
font-size: 1.125em;
font-family: "basier_squaresemibold";
line-height: 120px;
padding: 0 15px 0 20px;
}
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau table tr:nth-child(2) td:nth-child(2),
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau table tr:nth-child(2) td:nth-child(3),
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau table tr:nth-child(2) td:nth-child(4) {
text-align: center;
font-size: 2.5em;
color: #3c546c;
margin: 0 0 0 0;
padding: 0 0 0 0;
line-height: 50%;
font-family: "basier_squaremedium";
}
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau table tr:nth-child(2) td:nth-child(2) span,
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau table tr:nth-child(2) td:nth-child(3) span,
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau table tr:nth-child(2) td:nth-child(4) span {
font-size: 0.35em;
display: inline-block;
width: 100%;
line-height: 120%;
}
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau table td:nth-child(1) {
width: 360px;
}
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau table td:nth-child(2),
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau table td:nth-child(3),
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau table td:nth-child(4) {
width: 180px;
}
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau p {
display: none;
}
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .offre-simplifiee {
display: none;
width: 100%;
margin: 0 0 0 0px;
padding: 0 0 20px 0;
}
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .offre-simplifiee h3 {
font-size: 2em;
color: #52b3d9;
line-height: 110%;
font-family: "basier_squarebold";
min-height: 50px;
padding: 15px 15px 10px 0px;
margin: 0;
}
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .offre-simplifiee p.prix {
text-align: center;
font-size: 2.5em;
color: #3c546c;
margin: 0 0 0 0;
padding: 0 0 0 0;
line-height: 50%;
font-family: "basier_squaremedium";
border: 1px solid #DDE6ED;
padding: 40px 0 30px;
}
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .offre-simplifiee p.prix span {
font-size: 0.35em;
display: inline-block;
width: 100%;
line-height: 120%;
}
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .offre-simplifiee p {
font-size: 0.9375em;
font-family: "basier_squaresemibold";
color: #3c546c;
margin: 0 0 0 0;
line-height: 120%;
padding: 20px 15px 0 0px;
}
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .offre-simplifiee p.note {
font-size: 0.8125em;
color: #3c546c;
margin: 0 0 0 0;
font-family: "basier_squareregular";
}
@media only screen and (min-width: 768px) {
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee {
margin: 60px 0 0 0;
}
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau {
width: 100%;
order: 1;
}
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau .nav-liste-de-prix-mobile {
display: none;
}
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau table tr:first-child th {
display: table-cell;
}
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau table tr:first-child th.show {
display: table-cell;
width: auto;
}
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau table tr:nth-child(2) td:first-child {
display: table-cell;
}
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau table tr th {
border: 1px solid #DDE6ED;
padding: 40px 0 15px 0;
text-align: center;
}
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau table tr th:nth-child(3)::before {
content: "";
width: 162px;
height: 59px;
background-image: url(../images/plus-populaire.png);
background-size: contain;
background-repeat: no-repeat;
position: absolute;
top: -17px;
right: -6px;
z-index: 2;
}
body.lang-en #block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau table tr th:nth-child(3)::before, body.lang-en-us #block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau table tr th:nth-child(3)::before {
background-image: url(../images/most-popular.png);
}
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau table tr th[colspan="4"] {
padding: 15px 0 0 20px;
}
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau table tr td {
display: table-cell;
font-size: 0.9375em;
padding: 0 5px 0 20px;
}
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau table tr td.show {
display: table-cell;
}
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau table tr td:first-child {
display: table-cell;
}
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau table tr td[rowspan="9"],
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau table tr td[rowspan="10"] {
line-height: 80%;
}
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau table tr td:nth-child(2),
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau table tr th:nth-child(2) {
border-right-color: #52b3d9;
}
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau table tr td:nth-child(3),
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau table tr th:nth-child(3) {
background-color: rgba(221, 230, 237, 0.5);
border-color: #52b3d9;
}
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau table tr:nth-child(2) td:nth-child(1) {
line-height: 120%;
}
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau table tr:nth-child(2) td:nth-child(2),
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau table tr:nth-child(2) td:nth-child(3),
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau table tr:nth-child(2) td:nth-child(4) {
text-align: center;
font-size: 2.5em;
color: #3c546c;
margin: 0 0 0 0;
padding: 0 0 0 0;
line-height: 50%;
font-family: "basier_squaremedium";
}
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau table tr:nth-child(2) td:nth-child(2) span,
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau table tr:nth-child(2) td:nth-child(3) span,
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau table tr:nth-child(2) td:nth-child(4) span {
font-size: 0.35em;
display: inline-block;
width: 100%;
line-height: 120%;
}
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau table td:nth-child(1) {
width: 40%;
}
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau table td:nth-child(2),
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau table td:nth-child(3),
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau table td:nth-child(4) {
width: 20%;
}
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau p {
display: block;
font-size: 0.8125em;
font-family: "basier_squaresemibold";
color: #3c546c;
margin: 25px 0 0 0;
}
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .offre-simplifiee {
display: block;
width: 100%;
max-width: 350px;
margin: 50px 0 0 0px;
border: 1px solid #52b3d9;
order: 2;
}
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .offre-simplifiee h3 {
font-size: 1.5em;
padding: 15px;
color: #3c546c;
border-bottom: 1px solid #DDE6ED;
text-align: center;
}
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .offre-simplifiee p {
padding: 20px 15px 0 15px;
}
}
@media only screen and (min-width: 1024px) {
#block-liste-des-forfaits {
width: calc(100% - 120px);
padding: 60px 0 80px;
}
#block-liste-des-forfaits .wrapper .introduction {
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-liste-des-forfaits .wrapper .introduction h2 {
width: calc(100% - 540px);
font-size: 3em;
}
#block-liste-des-forfaits .wrapper .introduction p {
width: 540px;
font-size: 1.25em;
}
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee {
margin: 70px 0 0 0;
order: 1;
}
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau {
width: calc(100% - 180px - 20px);
}
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau table tr th:nth-child(3)::before {
width: 149px;
right: -9px;
}
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau table td:nth-child(1) {
width: calc(100% - 420px);
}
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau table td:nth-child(2),
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau table td:nth-child(3),
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau table td:nth-child(4) {
width: 140px;
}
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .offre-simplifiee {
width: 178px;
margin: 0 0 0 20px;
order: 2;
}
}
@media only screen and (min-width: 1280px) {
#block-liste-des-forfaits {
width: calc(100% - 160px);
padding: 85px 0 130px;
}
#block-liste-des-forfaits .wrapper .introduction h2 {
font-size: 3.75em;
}
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee {
margin: 90px 0 0 0;
order: 1;
}
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau {
width: calc(100% - 240px - 60px);
}
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau table tr th:nth-child(3)::before {
width: 166px;
right: 0;
}
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau table tr td {
line-height: 50px;
}
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau table td:nth-child(1) {
width: calc(100% - 450px);
}
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau table td:nth-child(2),
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau table td:nth-child(3),
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau table td:nth-child(4) {
width: 150px;
}
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .offre-simplifiee {
width: 238px;
margin: 0 0 0 60px;
order: 2;
}
}
@media only screen and (min-width: 1440px) {
#block-liste-des-forfaits .wrapper .wrapper-tableau-offre-simplifiee .tableau table tr:nth-child(2) td:nth-child(1) {
line-height: 120px;
}
}