#wrapper 							{ background-position: calc(50% - 190px) 180px;}

@media (max-width: 1550px) {
#wrapper 							{ background-position: calc(100% - 7.5vw) 180px;}
}

/***** top_page *****/
.page_content                       { background: url(../images/cloud_page.svg) calc(50% + 10px) 270px no-repeat;}
.top_page                           { padding: 140px 0 0 0;}
.top_page .titre_main               { margin-bottom: 5px;}
.top_page .chapo                    { margin-bottom: 0; margin-top: 10px;}

.top_grid .texte                    { position: relative; padding-right: 120px;}
.top_grid .breadcrumb               { position: absolute; top: 0; left: 0;}


/***** breadcrumb *****/
.breadcrumb							{ line-height: 0; position: relative; padding: 40px 0 30px;}
.breadcrumb a                       { color: var(--main-color);}
.breadcrumb a.active                { color: var(--third-color);}
.breadcrumb li 						{ display: inline-block; font: 400 14px/25px var(--font-main); letter-spacing: 0.4px; margin-right: 40px; position: relative;}
.breadcrumb li:last-child           { margin-right: 0;}
.breadcrumb li:not(:last-child):after { width: 1px; height: 10px; position: absolute; right: -20px; top: 9px; background: var(--main-color); content: ""; }

@media (min-width:1201px) {
.breadcrumb li a:hover				{ color: var(--third-color);}
}
@media (max-width:1200px) { 
.breadcrumb							{ display: none;}
}

/***** page content *****/
.page_content 								{ position: relative;}
.page_content .ul_list a, 
.page_content p a							{ border-bottom: 1px solid transparent; padding-bottom: 2px; color: var(--second-color);}
.ul_list b,
.ul_list strong                             { font-size: 17px; }
.ul_list.numbers                            { list-style: none;  }
.ul_list.numbers li                         { background: none; padding: 15px 0 15px 65px;}

#videocontent       { margin-top: 40px;}
.show_hide.first    { margin-top: 40px;}

@media (min-width:1201px) {
}
@media (max-width:1000px) {
.page_content 								{ padding-bottom: 0;}
}
@media (max-width:700px) {

}




.bloc_texte                         { margin: 60px 0; position: relative;}
.cloud1                             { position: absolute; top: -65px; right: 0; animation: moveCloud 45s linear infinite;}
.photo img                          { width: 100%; height: auto; object-fit: cover; display: block; border-radius: 30px;}
.photo video                        { width: 100%; height: auto; display: block; border-radius: 30px;}

@media (min-width:1000px) {
.atout .grid                        { grid-template-columns: repeat(3, 1fr);}
}
@media (max-width:1000px) {
.cloud1                             { display: none;}
}
@media (max-width:700px) {
.bloc_texte                         { margin: 50px 0;}
.photo img                          { border-radius: 10px;}
.photo video                        { border-radius: 10px;}
}



.blocquote                          { position: relative; padding-top: 65px;}
.blocquote .content                 { font: 500 20px/30px var(--font-main); color: var(--white); text-align: center; background: var(--main-color); padding: 30px; border-radius: 5px;} 
.blocquote .titre                   { padding-bottom: 65px; background: url(../images/arrow_page.svg) center bottom no-repeat; position: absolute; top: 0; left: 0; z-index: 1;}

@media (max-width:700px) {
.blocquote .content                 { padding-left: 20px; padding-right: 20px;}
}




.gridimg                            { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 40px; margin-top: 100px;}
.gridimg img                        { border-radius: 30px; width: 100%; height: auto; display: block;}

@media (max-width:1200px) {
.gridimg                            { gap: 20px;}
}
@media (max-width:1000px) {
.gridimg                            { grid-template-columns: 1fr 1fr; margin-top: 70px;}
.gridimg img:last-of-type           { grid-column: 1 / -1;}
}
@media (max-width:700px) {
.gridimg img                        { border-radius: 10px;}
.gridimg                            { grid-template-columns: 1fr; margin-top: 50px;}
}


.etape                              { display: grid; grid-template-columns: 360px auto; gap: 80px; align-items: start; margin-top: 30px;}
.etape .photo                       { position: relative; max-width: 360px;}
.etape .photo .titre                { padding-bottom: 85px; background: url(../images/arrow_page.svg) right 25px bottom no-repeat; position: absolute; top: 50px; left: 50px; margin: auto; z-index: 1;}
.etape .photo img                   { border-radius: 30px; width: 100%; height: auto; display: block;}
.etape .texte                       { padding: 60px 40px 50px; border-radius: 30px; background-color: var(--white);}
.etape .item                        { position: relative; padding-left: 85px; padding-bottom: 35px;}
.etape .item:last-of-type           { padding-bottom: 0;}
.etape .item:not(:last-of-type)::before { content: ""; display: block; position: absolute; top: 22px; left: 21px; width: 4px; height: 100%; background: url(../images/border.svg) top repeat-y;}
.etape .nbr                         { position: absolute; left: 5px; top: 5px; width: 35px; height: 35px; border-radius: 50%; background: var(--main-color); box-shadow: 0 0 0 5px var(--main-color-light2); text-align: center; color: var(--white); font: 500 20px/35px var(--font-main);}
.etape .item .titre                 { color: var(--third-color); font: 500 25px / 35px var(--font-main); margin-bottom: 15px;}

@media (max-width:1200px) {
.etape                              { gap: 30px;}
.etape .item                        { padding-left: 65px;}
}
@media (max-width:1000px) {
.etape                              { display: block;}
.etape .photo                       { display: none;}
}
@media (max-width:700px) {
.etape .texte                       {padding: 40px 20px; border-radius: 10px;}
.etape .item .titre                 { font-size: 16px; line-height: 22px;}
}
.page_content .ul_list a, 
.page_content p a					{ border-bottom: 1px solid transparent; padding-bottom: 2px; color: #f28c00;}
@media (min-width:1201px) {
.page_content .ul_list a:hover,
.page_content p a:hover				{ border-color: #f28c00;}
}



/***** tableau des tarifs *****/
.blocJourTitre, .blocTarifTitre	    { background:#002a43; color:#fff; font-family:Barlow;}
.blocJourTitre, .blocJour	        { float:left; width:80%; border-bottom:1px solid #fff; clear:both; padding:5px;}
.blocTarifTitre, .blocTarif	        { float:left; width:20%; border-bottom:1px solid #fff; padding:5px;}
.blocJour	                        { background:#ededed;}
.blocTarif	                        { background:#f28c00;}
.blocTarifInfo                      { margin-top: 15px; font-weight: 600; font-size: 13px;}  
th:first-of-type                    { border-top-left-radius: 15px;}
th:last-of-type                     { border-top-right-radius: 15px; }
tr:last-of-type td:first-of-type    { border-bottom-left-radius: 15px; }
tr:last-of-type td:last-of-type     { border-bottom-right-radius: 15px; }

.priceTable						    { width:100%; border-collapse:collapse;}
.priceTable tr					    { border: 1px solid #ebf3f8; }
.priceTable	th					    { text-align:left; background:#fff; color:#002a43; font-family: Barlow; font-weight: 600; padding: 5px 15px; font-size: 17px; }
.priceTable td					    { background: #fff; padding: 10px 15px; }
.priceTable td.regularSeason	    { background: #0078be; color:#fff; font-size: 16px; font-weight: 500; }
.priceTable td.highSeason		    { background: #f28c00; color: #fff; font-size: 16px; font-weight: 500; }



#acces .nbr                         { position: absolute; left: 5px; top: 10px; width: 35px; height: 35px; border-radius: 50%; background: var(--main-color); box-shadow: 0 0 0 5px var(--main-color-light2); text-align: center; color: var(--white); font: 500 20px/35px var(--font-main);}

#reservation .top_page              { text-align: center; font-size: 30px; line-height: 40px; padding: 300px 0 0;}
#reservation .top_page .titre_main  { margin-bottom: 0;}
#reservation .bloc_texte            { margin-top: 0; margin-bottom: 200px;}

@media (max-width:700px) {
#reservation .top_page              { padding: 200px 0 0;}
#reservation .bloc_texte            { margin-bottom: 40px;}
}


/*** Accès ***/
.bloc-acces             { padding: 60px 40px 50px; border-radius: 30px; background-color: var(--white);}
.bloc-acces .sous_titre { color: var(--third-color); font: 500 25px / 35px var(--font-main); margin-bottom: 15px; background-color: initial; text-transform: none; padding: 0; margin-top: 40px; display: block; }
.bloc-acces .sous_titre:nth-child(1) { margin-top: 0; }

/*** Module ***/
.date               { color: var(--gray); font-size: 14px;}
.dynamique img      { max-width: 100%; height: auto; margin: 30px 0; display: block;}
.dynamique h2, .dynamique h3, .dynamique h4, .dynamique h5, .dynamique h6 { font: var(--sous-titre);    position: relative;    color: var(--white);    margin-bottom: 15px;    border-radius: 5px;    padding: 11px 30px;    background-color: var(--main-color);    text-transform: uppercase;    display: inline;    box-shadow: 0 0 0 var(--main-color), 0 0 0 var(--main-color);    box-decoration-break: clone;    letter-spacing: 0.6px; }
.dynamique p        { margin: 20px 0; font-size: 16px; line-height: 1.6; color: var(--text-color); }
.dynamique ul       { margin: 20px 0; padding-left: 5px; }
.dynamique ul li    { padding: 7px 0 7px 35px; position: relative; line-height: 30px; background: url(../images/checklist.svg) left 15px no-repeat;}