.orange {color:#fba33f}
.jaune {color:#ffee00}
.dark-grey {color:#969698}
.light-grey {color:#d4d4d4}

hr {display:block; height:0.1rem; margin:0; padding:0; border:0; background-color:#eee}

.banniere-img-xl380.un .full .visuel {display:block; width:100%; height:380px; background:url(../img/bg-banniere-new-york-1440.jpg) 70% center / cover no-repeat}
.banniere-img-xl380.deux .full .visuel {display:block; width:100%; height:380px; background:url(../img/bg-banniere-paris-1440.jpg) 30% center / cover no-repeat}

.bloc3-tuile .btn-primaire, .bloc3-tuile .btn-secondaire {width:100% !important; max-width:100%}

.popin {position:fixed; left:0; top:0; display:none; width:100%; height:100%; margin:0 !important; overflow-x:hidden; overflow-y:auto; opacity:0; outline:0; z-index:2000}
.popin .fenetre {position:relative; max-width:870px; width:auto; margin:60px auto; pointer-events:none}
.popin .fenetre .contenu {position:relative; display:flex; flex-direction:column; width:100%; padding:45px 60px; background-color:#fff; background-clip:padding-box; outline:0; pointer-events:auto}
.popin .fenetre .contenu .header {position:relative; display:flex; align-items:flex-start; justify-content:space-between; min-height:2rem; margin:-15px -15px 0 0}
.popin .fenetre .contenu .header .fermer.picto {line-height:1.5rem; font-size:2.4rem; font-weight:700; text-align:right; margin:-10px -10px -10px auto; padding:10px}
.popin .fenetre .contenu .header .fermer.picto:hover {outline:1px dotted}
.popin .fenetre .contenu .header .fermer.texte {display:none}
.popin .fenetre .contenu.dark .header button {color:#fff}
.bg-popin {position:fixed; left:0; top:0; display:none; width:100vw; height:100vh; background-color:#000; opacity:0; z-index:1999}
.scrollbar-measure {position:absolute; top:-9999px; width:100px; height:100px; overflow:scroll}

.bloc1-etapes3 .row .bloc {position:relative; z-index:5}
.bloc1-etapes3 .row .bloc img, .bloc1-etapes3 .row .bloc .icon {display:inline-block; height:60px; font-size:6rem; margin-bottom:15px}
.bloc1-etapes3 .row .bloc .numero {display:inline-block; width:44px; height:44px; line-height:4.2rem; font-size:2rem; margin:0 15px; border-radius:100%}
.bloc1-etapes3.bg-blanc .row .bloc .numero {border:1px solid #000; box-shadow:-15px 0 0 0 #fff, 15px 0 0 0 #fff; background-color:#fff}
.bloc1-etapes3.bg-gris1 .row .bloc .numero {border:1px solid #fff; box-shadow:-15px 0 0 0 #333, 15px 0 0 0 #333; background-color:#333}
.bloc1-etapes3.bg-gris2 .row .bloc .numero {border:1px solid #000; box-shadow:-15px 0 0 0 #f4f4f4, 15px 0 0 0 #f4f4f4; background-color:#f4f4f4}
.bloc1-etapes3.bg-noir .row .bloc .numero {border:1px solid #fff; box-shadow:-15px 0 0 0 #000, 15px 0 0 0 #000; background-color:#000}
/*.bloc1-etapes3 .row .bloc::after {position:absolute; left:0; top:96px; width:100%; height:1px; content:""; z-index:-1}*/
.bloc1-etapes3 .row .bloc:first-child::after {left:50%}
.bloc1-etapes3 .row .bloc:last-child::after {width:50%}
.bloc1-etapes3.xs .row .bloc::after {top:21px}
.bloc1-etapes3.bg-blanc .row .bloc::after {background-color:#ccc}
.bloc1-etapes3.bg-gris1 .row .bloc::after {background-color:#fff}
.bloc1-etapes3.bg-gris2 .row .bloc::after {background-color:#000}
.bloc1-etapes3.bg-noir .row .bloc::after {background-color:#555}

.bloc-etape-vertical {display:none}

.bloc4-offres .row .bloc {display:flex; flex-direction:column; flex:0 1 300px; margin:0 30px 16px 0}
.bloc4-offres .row .bloc:last-child {margin-right:0}
.bloc4-offres .row .bloc li {margin-left:0; padding:15px 0; border-bottom:1px solid #eee}
.bloc4-offres .row .bloc li .icon {font-size:2rem; margin-right:10px}
.bloc4-offres .row .contenu {display:flex; justify-content:center; overflow-x:auto; scrollbar-width:thin; scrollbar-color:#f16e00 #ccc}
.bloc4-offres .row .contenu img{display:block; margin:0 auto}
.bloc4-offres .row .contenu .superieur {justify-content:flex-start !important}
.bloc4-offres .row .contenu::-webkit-scrollbar {width:10px}
.bloc4-offres .row .contenu::-webkit-scrollbar-track {background-color:#ccc}
.bloc4-offres .row .contenu::-webkit-scrollbar-thumb {background-color:#f16e00} 

.bloc2-offre-prod .row .bloc {display:flex; flex-wrap:wrap}
.bloc2-offre-prod .row .bloc:nth-child(1) .produit {flex:1 1 0px; margin:0 30px 0 0}
.bloc2-offre-prod .row .bloc:nth-child(1) .contenu {flex:1 1 0px}

.bloc1-zig-zag-img .row:nth-child(1n+2) {padding-top:15px}
.bloc1-zig-zag-img .row.zag .visuel {order:-1}

.bloc1-faq .row .item {border-bottom:1px solid #000}
.bloc1-faq .row .item:last-child {border-bottom:0}
.bloc1-faq .row .item .titre {display:flex; justify-content:space-between; align-items:center; min-height:70px; padding:11px 0}
.bloc1-faq .row .item .titre h3 {line-height:2.4rem; font-size:1.8rem; padding:0}
.bloc1-faq .row .item .titre h3.txt-max {max-width:1000px !important}
.bloc1-faq .row .item .titre:hover h3, .bloc1-faq .row .item .titre:focus h3 {text-decoration:underline; color:#555}
.bloc1-faq .row .item .titre:active h3 {color:#f16e00}
.bloc1-faq .row .item .titre::after {font-family:icon-orange; font-size:1.4rem; font-weight:700; color:#f16e00; content:"\e93c"; margin-left:15px}
.bloc1-faq .row .item .texte {margin-bottom:30px}
.bloc1-faq .row .item .texte .txt-max {max-width:900px !important}
.bloc1-faq .row .item.ouvert .titre::after {content:"\e93d"}
.bloc1-faq.xl .row .item .titre {min-height:90px; padding:15px 0}
.bloc1-faq.xl .row .item .titre h3 {line-height:3rem; font-size:2.6rem}
.bloc1-faq.xl .row .item .titre::after {font-size:1.9rem}
.bloc1-faq.xl .row .item .texte {line-height:2.4rem; font-size:1.8rem}
.bloc1-faq.dark .row .item {border-bottom-color:#fff}
.bloc1-faq.dark .row .item .titre:hover h3, .bloc1-faq.dark .row .item .titre:focus h3 {color:#ccc}
.bloc1-faq.dark .row .item .titre:active h3 {color:#ff7900}
.bloc1-faq.dark .row .item .titre::after {color:#ff7900}

@media (max-width:1439.98px){
.popin .fenetre {max-width:calc((100% - 6.25%) * (2 / 3) - 30px)}
}

@media (max-width:1199.98px){
.banniere-img-xl380 .full .visuel {height:320px}

.popin .fenetre {max-width:calc((100% - 6.25%) * (5 / 6) - 30px)}
.popin .fenetre .contenu {padding:45px}

.bloc1-prod-xl-ttl-prix-txt-btn .row .produit img {width:75%}

.bloc2-offre-prod .row .bloc .tarif {width:100%}
.bloc2-offre-prod .row .bloc:nth-child(1) .produit {flex:1 1 100%; margin:0 0 15px 0}

.bloc1-etapes3 .row .bloc .numero {width:34px; height:34px; line-height:3.2rem; font-size:1.6rem; margin:0 10px}
.bloc1-etapes3 .row .bloc::after {top:91px}
.bloc1-etapes3.xs .row .bloc::after {top:16px}

.bloc1-faq .row .item .titre {min-height:70px; padding:13px 0}
.bloc1-faq .row .item .titre h3 {line-height:2.2rem; font-size:1.6rem}
.bloc1-faq .row .item .titre h3.txt-max {max-width:800px !important}
.bloc1-faq .row .item .titre::after {font-size:1.2rem}
.bloc1-faq .row .item .texte .txt-max {max-width:700px !important}
.bloc1-faq.xl .row .item .titre {min-height:80px; padding:14px 0}
.bloc1-faq.xl .row .item .titre h3 {line-height:2.6rem; font-size:2.2rem}
.bloc1-faq.xl .row .item .titre::after {font-size:1.6rem}
.bloc1-faq.xl .row .item .texte {line-height:2.2rem; font-size:1.6rem}
}

@media (max-width:959.98px){
.popin .fenetre {max-width:calc((100% - 3.125%) * (5 / 6) - 30px)}

/*comme il y a 5 bloc, je remonte les lignes css ici au lieu de 735px*/
.bloc4-offres .row .bloc {flex:1 0 240px; margin-right:15px}
.bloc4-offres .row .contenu {justify-content:flex-start}
}

@media (max-width:735.98px){
.banniere-img-xl380 .full .visuel {height:260px}

.popin .fenetre {max-width:100%; height:100%; margin:0}
.popin .fenetre .contenu {min-height:100%; padding:30px 15px}
.popin .fenetre .contenu .header .fermer.picto {margin-right:15px}
/*.popin .fenetre .contenu .header .fermer.texte {display:block}*/
.popin .fenetre .contenu .body {flex:1 1 auto; margin:15px 0}
.popin .fenetre .contenu .footer {text-align:center}

.bloc1-prod-xl-ttl-prix-txt-btn .row .produit img {width:50%}

.bloc1-etapes3 .row .bloc {display:none}
/*.bloc1-etapes3 .row .bloc {margin-top:0 !important}
.bloc1-etapes3 .row > .bloc:nth-child(n+3) {margin-top:15px !important}
.bloc1-etapes3 .row .bloc .numero {width:24px; height:24px; line-height:2.2rem; font-size:1.4rem; margin:0 5px}
.bloc1-etapes3 .row .bloc::after {top:87px}
.bloc1-etapes3 .row .bloc:nth-child(2)::after {width:50%}
.bloc1-etapes3 .row .bloc:nth-child(3)::after {display:none}
.bloc1-etapes3.xs .row .bloc::after {top:12px}*/
.bloc-etape-vertical {display:block}
.bloc-etape-vertical .row .bloc {width:100%}
.bloc-etape-vertical .row .bloc p {display:inline-flex; flex-direction:column; flex-wrap:wrap; width:80%}
.bloc-etape-vertical .row .bloc .numero {display:inline-block; width:60px; height:60px; line-height:4.2rem; font-size:2rem; margin:0 15px; border-radius:100%}
.bloc-etape-vertical.bg-gris2 .row .bloc .numero {border:1px solid #000; box-shadow:-15px 0 0 0 #f4f4f4, 15px 0 0 0 #f4f4f4; background-color:#000; color:#fff}

.bloc1-zig-zag-img .row.zig .visuel {order:-1}

.bloc1-ttl-prix-txt-btn-prod .row .produit {order:-1}

.bloc1-faq .row .item .titre h3.txt-max {max-width:none !important}
.bloc1-faq .row .item .texte {margin-bottom:15px}
.bloc1-faq .row .item .texte .txt-max {max-width:none !important}
.bloc1-faq.xl .row .item .titre {min-height:70px; padding:11px 0}
.bloc1-faq.xl .row .item .titre h3 {line-height:2.4rem; font-size:2rem}
.bloc1-faq.xl .row .item .titre::after {font-size:1.5rem}
}