@font-face {
font-family: 'Bettarria';
src: url(../fonts/Bettarria.ttf);
}
@media screen and (max-width: 1600px) {
nav ul {
bottom: 7vh;
left: 7vh;
}
nav ul li a , nav ul li button {
font-size: 30pt;
}
nav .social {
bottom: 4vh;
}
nav .btn-close {
top: 25px;
left: 25px;
font-size: 16pt;
}
nav .btn-close .lines {
margin-right: 20px;
}
.devise-list .btn-close-lines, .lang-list .btn-close-lines {
right: 4vh;
}
.devise-list h3, .lang-list h3 {
font-size: 35pt;
}
.devise-list ul li a, .devise-list ul li button, .lang-list ul li a , .lang-list ul li button {
font-size: 12pt;
}
.btn-close-round {
top: 4vh;
left: 4vh;
font-size: 14pt;
padding: 0px 0px 0px 70px;
}
.btn-close-round::after {
width: 50px;
height: 50px;
}
.btn-close-lines {
top: 4vh;
left: 4vh;
font-size: 14pt;
}
.btn-close-lines .lines {
width: 30px;
height: 26px;
margin-right: 15px;
}
.btn-close-lines .lines span:nth-child(1) {
transform: translateY(12px);
}
.btn-close-lines .lines span:nth-child(2) {
transform: translateY(-12px);
}
.reservation-block .site-config span {
font-size: 14pt;
}
.reservation-block .official {
font-size: 14pt;
}
.reservation-block h3 {
margin: 40px 0px;
font-size: 30pt;
}
.reservation-block .ctn {
margin: 100px 0px;
}
.reservation-block .ctn .person-ctn label {
font-size: 14pt;
}
.reservation-block .book {
padding: 15px 0px;
font-size: 14pt;
}
.services-carousel {
top: 50px;
}
.services-carousel .item .title {
top: -20px;
font-size: 20pt;
}
.services-carousel .item .extrait {
margin: 20px 0px;
font-size: 12pt;
}
.services-carousel .item .starting span {
font-size: 12pt;
}
.services-carousel .item .download-file {
font-size: 12pt;
}
.services-carousel .item .btn-more {
font-size: 12pt;
}
.images-carousel-modal .main-images-carousel .owl-nav .owl-prev, .images-carousel-modal .main-images-carousel .owl-nav .owl-next {
width: 60px;
height: 20px;
right: 25px;
}
.images-carousel-modal .main-images-carousel .owl-nav .owl-prev {
left: 25px;
}
.map-modal {
padding: 11vh 0px 0px;
}
.map-modal iframe {
height: 89vh;
}
.sub-services > span {
font-size: 30pt;
}
.sub-services .services-carousel {
top: 120px;
}
.sub-services .services-carousel .owl-item {
padding-bottom: 50px;
}
.srv-detail h1 {
font-size: 25pt;
margin-bottom: 30px;
}
.srv-detail .extrait {
font-size: 12pt;
}
.srv-detail .starting span {
font-size: 12pt;
}
.my-app {
}
.my-app .header .left .menu_toggle {
width: 70px;
height: 70px;
padding: 25px 20px;
}
.my-app .header .left > span {
font-size: 14pt;
}
.my-app .header .left .go-back-home {
font-size: 14pt;
}
.my-app .header .right span {
font-size: 14pt;
}
.my-app .header .right a , .header .right button {
font-size: 14pt;
padding: 0px 40px;
}
.my-app .home .etab-name {
font-size: 50pt;
width: 35vw;
}
.my-app .intro {
padding: 30vh 0 10vh 0;
}
.my-app .intro .about {
top: 3vh;
font-size: 120pt;
}
.my-app .intro h2 {
top: 15vh;
font-size: 50pt;
}
.my-app .intro .ctn {
max-width: 72%;
}
.my-app .intro .ctn .info {
width: 35vw;
}
.my-app .intro .ctn .info .extrait {
font-size: 14pt;
}
.my-app .intro .ctn .info a , .intro .ctn .info button {
font-size: 14pt;
padding: 0px 70px 0px 0px;
}
.my-app .intro .ctn .info a::after , .intro .ctn .info button::after {
width: 50px;
height: 50px;
}
.my-app .intro .ctn .extra-info {
padding-top: 0px;
}
.my-app .intro .ctn .extra-info .extrait {
font-size: 14pt;
}
.my-app .intro .ctn .extra-info img {
margin: 80px auto;
}
.my-app .rooms h2 {
top: 5vh;
font-size: 18pt;
}
.my-app .rooms h2 span {
font-size: 90pt;
}
.my-app .rooms .rooms-carousel .item span {
font-size: 18pt;
margin-bottom: 30px;
}
.my-app .rooms .rooms-carousel .item h3 {
font-size: 50pt;
}
.my-app .rooms .rooms-carousel .item .btn-more {
bottom: 10vh;
font-size: 14pt;
padding: 0px 70px 0px 0px;
}
.my-app .rooms .rooms-carousel .item .btn-more::after {
width: 50px;
height: 50px;
}
.my-app .rooms .rooms-carousel .owl-nav .owl-prev, .my-app .rooms .rooms-carousel .owl-nav .owl-next {
width: 60px;
height: 30px;
}
.my-app .comments {
padding: 8vh 0px;
}
.my-app .comments h2 {
font-size: 50pt;
}
.my-app .comments h2 span {
font-size: 90pt;
}
.my-app .comments .filter-comments-carousel {
margin: 0 auto 50px;
}
.my-app .comments .filter-comments-carousel .owl-stage-outer .item {
margin: 0px 40px;
}
.my-app .comments .filter-comments-carousel .owl-stage-outer .item::after {
right: -40px;
}
.my-app .comments .filter-comments-carousel .owl-stage-outer .item a , .comments .filter-comments-carousel .owl-stage-outer .item button {
font-size: 14pt;
}
.my-app .comments .comments-carousel {
width: 800px;
}
.my-app .comments .comments-carousel .item {
padding: 80px 0px;
}
.my-app .comments .comments-carousel .item .note {
font-size: 14pt;
}
.my-app .comments .comments-carousel .item .note span {
font-size: 12pt;
}
.my-app .comments .comments-carousel .item .author-info span {
font-size: 14pt;
}
.my-app .comments .comments-carousel .item .extrait {
font-size: 14pt;
}
.my-app .comments .comments-carousel .item .date {
margin: 20px 0px 0px;
font-size: 12pt;
}
.my-app .comments .comments-carousel .item .btn-more {
font-size: 12pt;
}
.my-app .comments .comments-carousel .item .engine {
width: 30px;
height: 30px;
}
.my-app .comments .comments-carousel .owl-nav .owl-next, .my-app .comments .comments-carousel .owl-nav .owl-prev {
width: 60px;
height: 25px;
}
.my-app .equipLand {
padding: 0px;
}
.my-app .equipLand .ctn {
width: 1100px;
}
.my-app .equipLand .ctn .first span, .my-app .equipLand .ctn .second span {
font-size: 35pt;
}
.my-app .services {
padding: 5vh 0px;
}
.my-app .services h2 {
font-size: 50pt;
margin-bottom: 50px;
}
.my-app .services h2 span {
font-size: 110pt;
}
.my-app .services .services-filter-carousel .item span {
font-size: 30pt;
}
.my-app .gallery {
padding: 5vh 0px;
}
.my-app .gallery h2 {
font-size: 50pt;
}
.my-app .gallery h2 span {
font-size: 90pt;
}
.my-app .contact {
padding: 10vh 0px;
}
.my-app .contact h2 {
font-size: 20pt;
}
.my-app .contact h2 span {
font-size: 90pt;
}
.my-app .contact .btn-compose {
width: 900px;
}
.my-app .contact .btn-compose span {
font-size: 50pt;
}
.my-app .contact .ctn form {
width: 45vw;
margin: 0 auto;
}
.my-app .contact .ctn form > div {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 0px 0px;
border-bottom: 1px solid #1D3B21;
margin-bottom: 0px;
transform: translateY(80%);
opacity: 0;
}
.my-app .contact .ctn form > div label {
color: #1D3B21;
font-size: 20pt;
font-family: "Poppins";
}
.my-app .contact .ctn form > div input, .my-app .contact .ctn form > div textarea {
width: 20vw;
padding: 20px 0px;
border: none;
font-family: "Poppins";
outline: none;
color: #808080;
background-color: transparent;
font-size: 14pt;
}
.my-app .contact .ctn form > div input::-webkit-input-placeholder, .my-app .contact .ctn form > div textarea::-webkit-input-placeholder {
color: #808080;
letter-spacing: 2pt;
}
.my-app .contact .ctn form .send_contact {
display: block;
margin: 60px auto;
width: max-content;
transform: translateY(100%);
opacity: 0;
}
.my-app .contact .ctn form .send_contact span {
text-transform: capitalize;
color: #1D3B21;
font-size: 50pt;
border-bottom: 2px solid #1D3B21;
font-family: 'Cormorant Garamond';
font-weight: 500;
letter-spacing: -3px;
}
.my-app footer .first div span {
font-size: 12pt;
}
.my-app footer .first div .show-maps {
font-size: 12pt;
}
.my-app footer .second a , footer .second button {
font-size: 12pt;
}
.my-app footer .third span {
font-size: 10pt;
}
.my-app .page-first-block h2 {
font-size: 50pt;
}
.my-app .rmLt-all div span {
font-size: 12pt;
}
.my-app .rmLt-all div h3 {
font-size: 30pt;
}
.my-app .dtrm-second .ctn {
max-width: 75%;
}
.my-app .dtrm-second .ctn .img-ctn {
width: 55vh;
height: 55vh;
}
.my-app .dtrm-second .ctn .info h3 {
font-size: 35pt;
margin-bottom: 30px;
}
.my-app .dtrm-second .ctn .info .extrait {
font-size: 14pt;
margin-bottom: 30px;
}
.my-app .dtrm-second .ctn .info .btn-book {
font-size: 14pt;
padding: 0px 70px 0px 0px;
}
.my-app .dtrm-second .ctn .info .btn-book::after {
width: 50px;
height: 50px;
}
.my-app .dtrm-fourth .ctn {
max-width: 75%;
}
.my-app .dtrm-fourth .ctn .info1 span {
font-size: 13pt;
}
.my-app .dtrm-fourth .ctn .info1 span.title {
font-size: 25pt;
}
.my-app .dtrm-fourth .ctn .info2 {
width: 50%;
}
.my-app .dtrm-fourth .ctn .info2 h3 {
font-size: 30pt;
}
.my-app .dtrm-fourth .ctn .info2 ul li {
padding: 12px 0px;
font-size: 12pt;
}
.my-app .bookNow-ctn a , .bookNow-ctn button {
font-size: 80pt;
}
.my-app .dtrm-fifth {
padding: 8vh 0px;
}
.my-app .dtrm-fifth h2 {
margin-bottom: 60px;
font-size: 45pt;
}
.my-app .dtrm-fifth .more-rooms-carousel .item span {
font-size: 20pt;
}
.my-app .equip-second .equipments .bloc span {
font-size: 12pt;
}
.my-app .equip-second .equipments .bloc span.title {
font-size: 20pt;
margin-bottom: 30px;
}
.my-app .srv-list .ctn {
width: 75%;
}
.my-app .srv-list .ctn .srv-group span {
font-size: 30pt;
}
}
@media screen and (max-width: 1366px) {
nav ul li a , nav ul li button {
font-size: 20pt;
}
.reservation-block .ctn {
margin: 40px 0px;
}
}
@media screen and (max-width: 1024px) {
nav ul {
bottom: 5vh;
left: 5vh;
}
nav ul li a , nav ul li button {
font-size: 20pt;
}
nav .social {
bottom: 4vh;
}
nav .social a {
margin-right: 20px;
}
nav .social a img {
width: 23px;
}
nav .site-config span {
margin-left: 30px;
font-size: 14pt;
}
nav .btn-close {
font-size: 14pt;
}
nav .btn-close .lines {
margin-right: 15px;
}
.devise-list .btn-close-lines, .lang-list .btn-close-lines {
right: 4vh;
}
.devise-list h3, .lang-list h3 {
font-size: 25pt;
}
.devise-list > span, .lang-list > span {
font-size: 10pt;
}
.devise-list ul li, .lang-list ul li {
margin-left: 2vh;
}
.devise-list ul li a, .devise-list ul li button, .lang-list ul li a , .lang-list ul li button {
font-size: 10pt;
}
.btn-close-lines {
font-size: 12pt;
}
.btn-close-lines .lines {
width: 25px;
height: 26px;
margin-right: 10px;
}
.btn-close-round {
font-size: 12pt;
padding: 0px 0px 0px 60px;
}
.btn-close-round::after {
width: 40px;
height: 40px;
}
.reservation-block {
padding: 10vh 3vh;
}
.reservation-block .site-config span {
font-size: 12pt;
}
.reservation-block .official {
font-size: 12pt;
}
.reservation-block h3 {
margin: 20px 0px;
font-size: 25pt;
}
.reservation-block .ctn .person-ctn label {
font-size: 12pt;
}
.reservation-block .ctn .person-ctn .person .plus, .reservation-block .ctn .person-ctn .person .minus {
width: 25px;
height: 25px;
}
.reservation-block .ctn .person-ctn .person .val {
font-size: 14pt;
}
.reservation-block .ctn .caleran-container .caleran-input .caleran-calendar .caleran-days-container {
padding: 10px 20px;
}
.reservation-block .ctn .caleran-container .caleran-input .caleran-calendar .caleran-day span {
height: 30px;
width: 30px;
font-size: 1.1em !important;
}
.reservation-block .ctn .caleran-container .prevMonth, .reservation-block .ctn .caleran-container .nextMonth {
top: 40px;
width: 40px;
height: 15px;
}
.reservation-block .ctn .caleran-container .prevMonth {
left: 5px;
}
.reservation-block .ctn .caleran-container .nextMonth {
right: 5px;
}
.reservation-block .book {
padding: 12px 0px;
font-size: 12pt;
}
.services-carousel .item .title {
font-size: 18pt;
}
.services-carousel .item .extrait {
font-size: 11pt;
}
.services-carousel .item .starting span {
font-size: 11pt;
}
.services-carousel .item .download-file {
font-size: 11pt;
}
.services-carousel .item .btn-more {
font-size: 11pt;
}
.images-carousel-modal .main-images-carousel .item {
width: 75%;
margin: 0 auto;
}
.images-carousel-modal .main-images-carousel .item img {
width: 100%;
height: auto;
top: 50%;
transform: translate(-50%, -50%);
}
.images-carousel-modal .main-images-carousel .owl-nav .owl-prev, .images-carousel-modal .main-images-carousel .owl-nav .owl-next {
width: 40px;
height: 18px;
}
.my-app {
}
.my-app .header .left .menu_toggle {
width: 60px;
height: 60px;
padding: 20px 15px;
}
.my-app .header .left > span {
font-size: 12pt;
}
.my-app .header .left .go-back-home {
font-size: 12pt;
}
.my-app .header .right span {
font-size: 12pt;
}
.my-app .header .right a , .header .right button {
font-size: 12pt;
padding: 0px 40px;
}
.my-app .home .etab-name {
font-size: 40pt;
width: 40vw;
}
.my-app .intro .about {
font-size: 100pt;
}
.my-app .intro h2 {
font-size: 40pt;
width: 40vw;
}
.my-app .intro .ctn {
max-width: 80%;
}
.my-app .intro .ctn .img-ctn {
width: 35vw;
height: 35vw;
}
.my-app .intro .ctn .info .extrait {
font-size: 12pt;
}
.my-app .intro .ctn .info a , .intro .ctn .info button {
font-size: 12pt;
padding: 0px 60px 0px 0px;
}
.my-app .intro .ctn .info a::after , .intro .ctn .info button::after {
width: 40px;
height: 40px;
}
.my-app .intro .ctn .extra-info .extrait {
font-size: 12pt;
}
.my-app .intro .ctn .extra-info img {
margin: 50px auto;
}
.my-app .rooms h2 {
font-size: 16pt;
}
.my-app .rooms h2 span {
font-size: 80pt;
}
.my-app .rooms .rooms-carousel .item span {
font-size: 16pt;
margin-bottom: 20px;
}
.my-app .rooms .rooms-carousel .item h3 {
font-size: 35pt;
}
.my-app .rooms .rooms-carousel .item .btn-more {
bottom: 5vh;
font-size: 12pt;
padding: 0px 60px 0px 0px;
}
.my-app .rooms .rooms-carousel .item .btn-more::after {
width: 40px;
height: 40px;
}
.my-app .rooms .rooms-carousel .owl-nav .owl-prev, .my-app .rooms .rooms-carousel .owl-nav .owl-next {
width: 50px;
height: 20px;
}
.my-app .comments h2 {
font-size: 40pt;
}
.my-app .comments h2 span {
font-size: 80pt;
}
.my-app .comments .filter-comments-carousel .owl-stage-outer .item {
margin: 0px 30px;
}
.my-app .comments .filter-comments-carousel .owl-stage-outer .item::after {
right: -30px;
}
.my-app .comments .filter-comments-carousel .owl-stage-outer .item a , .comments .filter-comments-carousel .owl-stage-outer .item button {
font-size: 12pt;
}
.my-app .comments .comments-carousel {
width: 700px;
}
.my-app .comments .comments-carousel .item {
padding: 80px 0px;
}
.my-app .comments .comments-carousel .item .note {
font-size: 12pt;
}
.my-app .comments .comments-carousel .item .note span {
font-size: 10pt;
}
.my-app .comments .comments-carousel .item .author-info span {
font-size: 12pt;
}
.my-app .comments .comments-carousel .item .extrait {
font-size: 12pt;
}
.my-app .comments .comments-carousel .item .date {
margin: 20px 0px 0px;
font-size: 12pt;
}
.my-app .comments .comments-carousel .item .btn-more {
font-size: 12pt;
}
.my-app .comments .comments-carousel .item .engine {
width: 30px;
height: 30px;
}
.my-app .comments .comments-carousel .owl-nav .owl-next, .my-app .comments .comments-carousel .owl-nav .owl-prev {
width: 50px;
height: 18px;
}
.my-app .equipLand .ctn {
width: 80%;
}
.my-app .equipLand .ctn .first span, .my-app .equipLand .ctn .second span {
font-size: 30pt;
}
.my-app .services h2 {
font-size: 40pt;
margin-bottom: 40px;
}
.my-app .services h2 span {
font-size: 100pt;
}
.my-app .services .services-filter-carousel .item span {
font-size: 25pt;
}
.my-app .gallery h2 {
font-size: 40pt;
margin-bottom: 50px;
}
.my-app .gallery h2 span {
font-size: 80pt;
}
.my-app .contact h2 {
font-size: 18pt;
}
.my-app .contact h2 span {
font-size: 80pt;
}
.my-app .contact .btn-compose {
width: 750px;
margin: 50px auto 0px;
}
.my-app .contact .btn-compose span {
font-size: 90pt;
}
.my-app .contact .ctn form {
width: 50vw;
}
.my-app .contact .ctn form > div {
padding: 15px 0px 0px;
}
.my-app .contact .ctn form > div label {
font-size: 16pt;
}
.my-app .contact .ctn form > div input, .my-app .contact .ctn form > div textarea {
padding: 20px 0px;
font-size: 14pt;
}
.my-app .contact .ctn form .send_contact {
margin: 40px auto;
}
.my-app .contact .ctn form .send_contact span {
font-size: 40pt;
}
.my-app footer .first {
width: 90%;
}
.my-app footer .first div span {
font-size: 11pt;
}
.my-app footer .first div .show-maps {
font-size: 11pt;
}
.my-app footer .second {
padding: 20px 5vw;
}
.my-app footer .second a , footer .second button {
font-size: 11pt;
}
.my-app footer .third {
padding: 20px 5vw;
}
.my-app footer .third span {
font-size: 10pt;
}
.my-app .page-first-block h2 {
font-size: 40pt;
}
.my-app .rmLt-all div span {
font-size: 12pt;
}
.my-app .rmLt-all div h3 {
font-size: 25pt;
letter-spacing: 0.08em;
}
.my-app .dtrm-second .ctn {
max-width: 80%;
}
.my-app .dtrm-second .ctn .img-ctn {
width: 50vh;
height: 50vh;
}
.my-app .dtrm-second .ctn .info h3 {
font-size: 25pt;
}
.my-app .dtrm-second .ctn .info .extrait {
font-size: 12pt;
}
.my-app .dtrm-second .ctn .info .btn-book {
font-size: 12pt;
padding: 0px 60px 0px 0px;
}
.my-app .dtrm-second .ctn .info .btn-book::after {
width: 40px;
height: 40px;
}
.my-app .dtrm-fourth .ctn {
max-width: 80%;
}
.my-app .dtrm-fourth .ctn .info1 span {
font-size: 11pt;
}
.my-app .dtrm-fourth .ctn .info1 span.title {
font-size: 20pt;
}
.my-app .dtrm-fourth .ctn .info2 h3 {
font-size: 22pt;
}
.my-app .dtrm-fourth .ctn .info2 ul li {
padding: 10px 0px;
font-size: 11pt;
}
.my-app .bookNow-ctn a , .bookNow-ctn button {
font-size: 60pt;
}
.my-app .dtrm-fifth h2 {
margin-bottom: 50px;
font-size: 35pt;
}
.my-app .dtrm-fifth .more-rooms-carousel .item {
width: 25vw;
}
.my-app .dtrm-fifth .more-rooms-carousel .item span {
font-size: 16pt;
}
.my-app .equip-second .equipments {
width: 60%;
}
.my-app .srv-list .ctn {
width: 80%;
}
.my-app .srv-list .ctn .srv-group span {
font-size: 25pt;
}
}
@media screen and (max-width: 768px) {
.menu_mobile {
display: block;
}
.services-carousel {
top: 100px;
}
.services-carousel .item {
width: 60vw;
}
.devise-list, .lang-list {
width: 100%;
}
.devise-list .btn-close-lines, .lang-list .btn-close-lines {
left: 3vh;
right: unset;
}
.reservation-block .ctn {
flex-direction: column;
}
.reservation-block .ctn .person-ctn {
margin-top: 120px;
}
.reservation-block .ctn .caleran-container {
width: 90%;
}
.reservation-block .ctn .caleran-container .caleran-input .caleran-calendar:nth-child(2) {
border-right: unset !important;
}
nav ul {
bottom: unset;
top: 15vh;
left: 0;
}
nav ul li a , nav ul li button {
font-size: 25pt;
color: #FCF7F3;
margin: 0 auto;
}
nav .logo {
display: none;
}
nav .social {
bottom: 5vh;
right: 50%;
transform: translateX(50%);
}
nav .social a img {
width: 30px;
}
nav .social a:last-child {
margin-right: 0px;
}
nav .site-config span {
margin-left: 30px;
font-size: 14pt;
}
nav .btn-close {
font-size: 14pt;
}
nav .btn-close .lines {
margin-right: 15px;
}
.my-app {
}
.my-app .header .left::after, .my-app .header .right::after {
display: none;
}
.my-app .header .left .menu_toggle {
display: none;
}
.my-app .header .left > span {
display: none;
}
.my-app .header .left .go-back-home {
display: none;
}
.my-app .header:not(.homePageHeader) .left .go-back-home {
display: block;
}
.my-app .header .logo {
width: 20vw;
transform: translateY(70%) translateX(-50%);
}
.my-app .header .right {
padding: 20px 0px;
}
.my-app .header .right a , .header .right button {
display: none;
}
.my-app .header .right span {
font-size: 14pt;
}
.my-app .home .social {
display: none;
}
.my-app .home .etab-name {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
.my-app .intro .Path_1 {
width: unset;
height: 80%;
}
.my-app .intro .ctn {
max-width: 80%;
flex-direction: column;
align-items: center;
z-index: 9;
}
.my-app .intro .ctn .img-ctn {
width: 45vw;
height: 45vw;
}
.my-app .intro .ctn .info {
margin-top: 40px;
padding-bottom: 70px;
width: 60vw;
}
.my-app .intro .ctn .info a , .intro .ctn .info button {
bottom: 20px;
left: 50%;
transform: translateX(-50%) !important;
}
.my-app .rooms .rooms-carousel .item span {
font-size: 14pt;
}
.my-app .rooms .rooms-carousel .item h3 {
font-size: 30pt;
}
.my-app .rooms .rooms-carousel .owl-nav .owl-prev, .my-app .rooms .rooms-carousel .owl-nav .owl-next {
width: 50px;
height: 20px;
}
.my-app .rooms .rooms-carousel .owl-nav .owl-next {
right: 30px;
}
.my-app .rooms .rooms-carousel .owl-nav .owl-prev {
left: 30px;
}
.my-app .comments {
min-height: unset;
}
.my-app .comments .filter-comments-carousel .owl-stage-outer .item a , .comments .filter-comments-carousel .owl-stage-outer .item button {
font-size: 13pt;
width: max-content;
margin: 0 auto;
}
.my-app .comments .filter-comments-carousel .owl-stage-outer .item::after {
display: none;
}
.my-app .comments .comments-carousel {
width: 600px;
}
.my-app .comments .comments-carousel .owl-nav {
width: 120%;
}
.my-app .comments .comments-carousel .owl-nav .owl-next, .my-app .comments .comments-carousel .owl-nav .owl-prev {
width: 50px;
height: 18px;
}
.my-app .equipLand {
padding: 10vh 0px;
min-height: unset;
}
.my-app .equipLand .ctn .first, .my-app .equipLand .ctn .second {
width: 48%;
height: 40vh;
}
.my-app .equipLand .ctn .first span, .my-app .equipLand .ctn .second span {
font-size: 25pt;
}
.my-app .services {
padding: 10vh 0px;
}
.my-app .services .services-filter-carousel .item {
width: 45vw;
}
.my-app .gallery {
min-height: unset;
}
.my-app .gallery .gallery-carousel .item {
height: 30vh;
}
.my-app .contact {
padding: 10vh 0px 0px;
}
.my-app .contact #Layer_6 {
height: 70%;
}
.my-app .contact #Layer_7 {
height: 100%;
}
.my-app .contact .btn-compose {
width: 550px;
margin: 50px auto 0px;
}
.my-app .contact .btn-compose span {
font-size: 70pt;
}
.my-app .contact .ctn form {
width: 60vw;
}
.my-app footer {
z-index: 9;
}
.my-app footer .first {
width: 80%;
flex-wrap: wrap;
padding: 0px;
}
.my-app footer .first div {
width: 50%;
margin-bottom: 30px;
}
.my-app footer .first div span {
font-size: 12pt;
}
.my-app footer .first div .show-maps {
font-size: 11pt;
}
.my-app footer .first div:nth-child(2n) {
padding-left: 50px;
}
.my-app footer .second a , footer .second button {
font-size: 12pt;
}
.my-app footer .third {
padding: 20px 5vw 140px 5vw;
}
.my-app footer .third span {
font-size: 11pt;
}
.my-app .rmLt-all div {
width: 100% !important;
height: 60vh;
}
.my-app .dtrm-second {
padding: 10vh 0px;
}
.my-app .dtrm-second .ctn {
max-width: 80%;
flex-direction: column;
}
.my-app .dtrm-second .ctn .info {
margin-top: 40px;
width: 80%;
}
.my-app .dtrm-second .ctn .info h3 {
text-align: center;
}
.my-app .dtrm-second .ctn .info .extrait {
text-align: center;
}
.my-app .dtrm-second .ctn .info .btn-book {
margin: 0 auto;
}
.my-app .dtrm-third {
padding: 0px 5vh;
}
.my-app .dtrm-third .ctn .img-ctn {
width: 33.33%;
height: 30vh;
}
.my-app .dtrm-fourth {
padding: 10vh 0px 5vh;
}
.my-app .dtrm-fourth .ctn {
max-width: 100%;
flex-direction: column;
}
.my-app .dtrm-fourth .ctn .info1 {
width: 100%;
padding: 5vh 0px;
}
.my-app .dtrm-fourth .ctn .info1 img {
width: 20%;
}
.my-app .dtrm-fourth .ctn .info1 span {
font-size: 12pt;
}
.my-app .dtrm-fourth .ctn .info2 {
margin-top: 40px;
width: 100%;
}
.my-app .dtrm-fourth .ctn .info2 h3 {
font-size: 30pt;
width: 100%;
text-align: center;
}
.my-app .dtrm-fourth .ctn .info2 ul {
margin: 0 auto;
width: 80%;
}
.my-app .dtrm-fourth .ctn .info2 ul li {
font-size: 12pt;
}
.my-app .dtrm-fifth .more-rooms-carousel {
padding-left: 10vh;
}
.my-app .dtrm-fifth .more-rooms-carousel .item {
width: 35vw;
}
.my-app .equip-second .equipments {
width: 80%;
}
.my-app .srv-list .ctn .srv-group {
width: 48%;
height: 50vh;
}
.my-app .srv-list .ctn .srv-group span {
font-size: 22pt;
}
.listchambres .my-app footer .first, .detailChambre .my-app footer .first {
padding-top: 50px;
}
.reserve-block {
display: flex;
}
.srv-detail .img-ctn {
width: 70vw;
height: 35vh;
}
}
@media screen and (max-width: 575px) {
.menu_mobile {
left: unset;
right: 20px;
font-size: 12pt;
}
.reserve-block {
display: none;
}
nav {
z-index: 1000;
}
nav ul li {
padding: 15px;
}
nav ul li a , nav ul li button {
font-size: 18pt;
}
nav .social a img {
width: 25px;
}
nav .social a:last-child {
margin-right: 0px;
}
nav .site-config {
right: unset;
left: 0px;
}
nav .site-config span {
margin: 0px 0px 0px 20px;
font-size: 12pt;
}
nav .btn-close {
font-size: 12pt;
left: unset;
right: 20px;
}
nav .btn-close .lines {
width: 20px;
margin-right: 10px;
}
.devise-list, .lang-list {
padding-top: 50px;
}
.devise-list .btn-close-lines, .lang-list .btn-close-lines {
left: unset;
right: 20px;
}
.devise-list h3, .lang-list h3 {
max-width: 80%;
font-size: 20pt;
}
.devise-list > span, .lang-list > span {
margin-bottom: 20px;
max-width: 80%;
}
.devise-list ul, .lang-list ul {
width: 80%;
}
.devise-list ul li, .lang-list ul li {
width: 100%;
padding: 0px;
margin: 0px 0px 20px 0px;
}
.devise-list ul li a, .devise-list ul li button, .lang-list ul li a , .lang-list ul li button {
width: 80%;
margin: 0 auto;
padding: 10px 40px;
text-align: center;
}
.btn-close-lines {
font-size: 12pt;
}
.btn-close-lines .lines {
width: 20px;
}
.btn-close-round {
font-size: 0pt;
padding: 0px;
width: 40px;
height: 40px;
right: 20px;
left: unset;
}
.btn-close-round::after {
width: 40px;
height: 40px;
}
.services-carousel {
top: 60px;
left: 20px;
}
.services-carousel .item {
width: 80vw;
}
.services-carousel .item .title {
font-size: 16pt;
}
.services-carousel .item .extrait {
font-size: 10pt;
}
.services-carousel .item .starting span {
font-size: 10pt;
}
.services-carousel .item .download-file {
font-size: 10pt;
}
.services-carousel .item .btn-more {
font-size: 10pt;
}
.images-carousel-modal .main-images-carousel .item {
width: 100%;
margin: 0 auto;
}
.images-carousel-modal .main-images-carousel .item img {
width: 100%;
height: auto;
top: 50%;
transform: translate(-50%, -50%);
}
.images-carousel-modal .main-images-carousel .owl-nav .owl-prev, .images-carousel-modal .main-images-carousel .owl-nav .owl-next {
width: 40px;
height: 18px;
bottom: 0;
}
.sub-services > span {
font-size: 25pt;
}
.sub-services .services-carousel {
top: 70px;
}
.sub-services .services-carousel .owl-item {
padding-bottom: 50px;
}
.srv-detail h1 {
font-size: 20pt;
margin-bottom: 20px;
}
.srv-detail .img-ctn {
width: 80vw;
height: 50vw;
}
.srv-detail .extrait {
width: 80vw;
font-size: 11pt;
}
.srv-detail .starting span {
font-size: 11pt;
}
.my-app {
}
.my-app .header {
flex-direction: row-reverse;
}
.my-app .header .right span {
margin: 0px 0px 0px 20px;
font-size: 12pt;
}
.my-app .header .logo {
width: 30vw;
}
.my-app .header:not(.homePageHeader) {
flex-direction: row;
}
.my-app .header:not(.homePageHeader) .right span {
display: none;
}
.my-app .header:not(.homePageHeader) .left .go-back-home {
display: block;
font-size: 0px;
width: 30px;
height: 30px;
padding: 0;
left: 20px;
top: 15px;
}
.my-app .header:not(.homePageHeader) .left .go-back-home::after {
width: 100%;
height: 100%;
}
.my-app .intro {
padding: 25vh 0 10vh 0;
}
.my-app .intro .about {
font-size: 80pt;
}
.my-app .intro h2 {
font-size: 30pt;
width: 65vw;
}
.my-app .intro .ctn {
max-width: 90%;
}
.my-app .intro .ctn .img-ctn {
width: 55vw;
height: 70vw;
}
.my-app .intro .ctn .info {
margin-top: 30px;
width: 85vw;
}
.my-app .intro .ctn .info a , .intro .ctn .info button {
width: max-content;
font-size: 12pt;
}
.my-app .intro .ctn .extra-info {
width: 90%;
}
.my-app .intro .ctn .extra-info img {
width: 100%;
margin: 50px auto 150px;
}
.my-app .rooms h2 {
top: 0;
color: #2D2E28;
font-size: 14pt;
}
.my-app .rooms h2 span {
font-size: 70pt;
}
.my-app .rooms .rooms-carousel .item {
height: 80vh;
margin-top: 20vh;
flex-direction: column-reverse;
justify-content: flex-end;
}
.my-app .rooms .rooms-carousel .item span {
font-size: 12pt;
margin-top: 30px;
}
.my-app .rooms .rooms-carousel .item h3 {
font-size: 25pt;
max-width: 90%;
margin-top: 50px;
}
.my-app .rooms .rooms-carousel .item .btn-more {
bottom: 20px;
}
.my-app .rooms .rooms-carousel .owl-nav .owl-prev, .my-app .rooms .rooms-carousel .owl-nav .owl-next {
width: 40px;
height: 20px;
bottom: 30vh;
}
.my-app .rooms .rooms-carousel .owl-nav .owl-next {
right: 20px;
}
.my-app .rooms .rooms-carousel .owl-nav .owl-prev {
left: 20px;
}
.my-app .comments h2 {
font-size: 30pt;
}
.my-app .comments h2 span {
font-size: 70pt;
}
.my-app .comments .filter-comments-carousel .owl-stage-outer .item {
margin: 0px;
}
.my-app .comments .filter-comments-carousel .owl-stage-outer .item a , .comments .filter-comments-carousel .owl-stage-outer .item button {
font-size: 12pt;
width: max-content;
margin: 0 auto;
}
.my-app .comments .filter-comments-carousel .owl-stage-outer .item::after {
display: none;
}
.my-app .comments .comments-carousel {
width: 80%;
}
.my-app .comments .comments-carousel .item .extrait {
width: 90%;
font-size: 11pt;
}
.my-app .comments .comments-carousel .owl-nav {
width: 120%;
}
.my-app .comments .comments-carousel .owl-nav .owl-next, .my-app .comments .comments-carousel .owl-nav .owl-prev {
width: 40px;
height: 15px;
margin: 0;
}
.my-app .equipLand {
padding: 5vh 0px;
}
.my-app .equipLand .ctn {
flex-direction: column;
}
.my-app .equipLand .ctn .first, .my-app .equipLand .ctn .second {
width: 100%;
height: 60vh;
margin-bottom: 30px;
}
.my-app .equipLand .ctn .first span, .my-app .equipLand .ctn .second span {
font-size: 20pt;
}
.my-app .services {
padding: 3vh 0px 5vh;
}
.my-app .services h2 {
font-size: 30pt;
}
.my-app .services h2 span {
font-size: 80pt;
}
.my-app .services .services-filter-carousel .item {
width: 70vw;
}
.my-app .services .btn-close-round {
top: 20px;
}
.my-app .gallery h2 {
font-size: 30pt;
}
.my-app .gallery h2 span {
font-size: 70pt;
}
.my-app .gallery .gallery-carousel .item {
height: 30vh;
}
.my-app .contact {
min-height: 100dvh;
}
.my-app .contact h2 {
font-size: 14pt;
}
.my-app .contact h2 span {
font-size: 70pt;
}
.my-app .contact .btn-compose {
width: 70%;
margin: 50px auto 0px;
}
.my-app .contact .btn-compose span {
font-size: 35pt;
}
.my-app .contact .ctn form {
width: 80vw;
}
.my-app .contact .ctn form > div {
padding: 0;
}
.my-app .contact .ctn form > div label {
font-size: 12pt;
}
.my-app .contact .ctn form > div input, .my-app .contact .ctn form > div textarea {
width: 35vw;
font-size: 12pt;
}
.my-app .contact .ctn form .send_contact {
margin: 25px auto;
}
.my-app .contact .ctn form .send_contact span {
font-size: 30pt;
}
.my-app footer .first {
width: 90%;
}
.my-app footer .first div {
width: 100%;
}
.my-app footer .first div:nth-child(2n) {
padding-left: 0px;
}
.my-app footer .first div span {
font-size: 11pt;
}
.my-app footer .second a , footer .second button {
font-size: 11pt;
}
.my-app footer .second .back-to-top {
font-size: 0px;
padding: 0px;
width: 40px;
height: 40px;
}
.my-app footer .third {
padding: 20px 5vw 100px 5vw;
flex-direction: column-reverse;
}
.my-app footer .third > div {
margin-bottom: 20px;
}
.my-app .page-first-block h2 {
font-size: 30pt;
}
.my-app .rmLt-all div {
height: 50vh;
padding-top: 50px;
}
.my-app .rmLt-all div span {
margin-bottom: 30px;
}
.my-app .rmLt-all div h3 {
font-size: 18pt;
max-width: 80%;
}
.my-app .dtrm-second .ctn {
max-width: 80%;
}
.my-app .dtrm-second .ctn .img-ctn {
width: 80vw;
height: 80vw;
}
.my-app .dtrm-second .ctn .info {
width: 100%;
}
.my-app .dtrm-third {
padding: 0px 5vh;
}
.my-app .dtrm-third .ctn .img-ctn {
width: 50%;
height: 30vh;
}
.my-app .dtrm-fourth .ctn .info1 {
width: 100%;
padding: 5vh 0px;
}
.my-app .dtrm-fourth .ctn .info1 span {
font-size: 11pt;
}
.my-app .dtrm-fourth .ctn .info2 h3 {
font-size: 25pt;
}
.my-app .dtrm-fourth .ctn .info2 ul li {
font-size: 11pt;
width: 100%;
}
.my-app .bookNow-ctn a , .bookNow-ctn button {
font-size: 40pt;
letter-spacing: -5px;
}
.my-app .dtrm-fifth h2 {
font-size: 25pt;
}
.my-app .dtrm-fifth .more-rooms-carousel {
padding-left: 20px;
}
.my-app .dtrm-fifth .more-rooms-carousel .item {
width: 70vw;
}
.my-app .dtrm-fifth .more-rooms-carousel .item span {
font-size: 14pt;
margin-top: 25px;
}
.my-app .equip-second .equipments {
width: 80%;
}
.my-app .equip-second .equipments .bloc {
width: 100%;
}
.my-app .equip-second .equipments .bloc span {
font-size: 11pt;
text-align: left;
}
.my-app .equip-second .equipments .bloc span.title {
font-size: 18pt;
margin-bottom: 20px;
}
.my-app .srv-list .ctn .srv-group {
width: 100%;
height: 60vh;
margin-bottom: 6vh;
}
.my-app .srv-list .ctn .srv-group span {
font-size: 18pt;
}
.my-app .srv-list .ctn .srv-group:nth-child(2n) {
margin-top: 0;
}
}
@media screen and (max-width: 768px) {
.my-app .homePageHeader { flex-direction: row !important; align-items: center !important; height: 70px !important; }
.my-app .homePageHeader .left { display: flex !important; position: static; height: 70px; }
.my-app .homePageHeader .left::after { display: none; }
.my-app .homePageHeader .left > span { display: none !important; }
.my-app .homePageHeader .left .menu_toggle {
display: flex !important;
width: 70px !important;
height: 70px !important;
padding: 25px 20px !important;
}
.menu_mobile { display: none !important; }
.my-app .homePageHeader .right { margin-right: 20px; }
.my-app .home .home-slide-carousel .item {
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
.my-app .home .home-slide-carousel .item:has(img[src*="depuis_la_terrasse"]) {
background-image: url(../images/mobile/riad-ilyan-marrakech.webp?v=2); }
.my-app .home .home-slide-carousel .item:has(img[src*="home_2"]) {
background-image: url(../images/mobile/home_2.webp?v=2); }
.my-app .home .home-slide-carousel .item:has(img[src*="home_3"]) {
background-image: url(../images/mobile/home_3.webp?v=2); }
.my-app .home .home-slide-carousel .item:has(img[src*="home_4"]) {
background-image: url(../images/mobile/home_4.webp?v=2); }
.my-app .home .home-slide-carousel .item:has(img[src*="home_5"]) {
background-image: url(../images/mobile/home_5.webp?v=2); }
.my-app .home .home-slide-carousel .item img { display: none !important; }
.page-first-block-bg.bg-petite-chambre-double {
background-image: url(../images/mobile/Petite-chambre-double.webp?v=2) !important; }
.page-first-block-bg.bg-chambre-double-standard {
background-image: url(../images/mobile/Chambre-double-standard.webp?v=2) !important; }
.page-first-block-bg.bg-chambre-double-lits-jumeaux {
background-image: url(../images/mobile/Chambre-double-lits-jumeaux.webp?v=2) !important; }
.page-first-block-bg.bg-srv {
background-image: url(../images/mobile/DSC06723.webp?v=2) !important; }
.page-first-block-bg.bg-equip {
background-image: url(../images/mobile/DSC06851.webp?v=2) !important; }
.page-first-block-bg.bg-land {
background-image: url(../images/mobile/16.webp?v=2) !important; }
body.listchambres .page-first-block-bg.bg-equip {
background-image: url(../images/mobile/Petite-chambre-double.webp?v=2) !important; }
.my-app .homePageHeader .logo { width: 180px !important; margin-top: -80px; }
.my-app .homePageHeader .logo img { width: 100%; height: auto; }
/* L'entête cède sa place au FAB flottant .mb-bookbar sur mobile */
.my-app .header .right > a , .header .right > button {
display: none !important;
}
.my-app .home > .ratings-badges { display: none !important; }
.reviews-band {
display: flex !important;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 26px;
min-height: 50vh;
background: #1D3B21;
padding: 40px 20px;
box-sizing: border-box;
text-align: center;
}
.reviews-band .rb-title {
display: block;
font-family: 'Pinyon Script', cursive;
font-size: 133.333px;
font-weight: 400;
text-transform: none;
letter-spacing: 0;
line-height: 1;
color: rgba(255, 255, 255, 0.2);
}
.reviews-band .rb-title .rb-script {
display: block;
font-family: 'Cormorant Garamond';
font-size: 53.333px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 6.4px;
line-height: 1.1;
color: #ffffff;
margin-top: 4px;
}
.reserve-block { display: none !important; }
.reviews-band .rb-row {
display: flex;
justify-content: center;
align-items: flex-start;
gap: 38px;
flex-wrap: nowrap;
}
.reviews-band .rating-badge {
display: flex;
flex-direction: column;
align-items: center;
gap: 9px;
text-decoration: none;
pointer-events: none;
cursor: default;
}
.reviews-band .rating-badge img {
width: 34px; height: 34px;
object-fit: contain;
filter: brightness(0) invert(1);
}
.reviews-band .rating-badge span {
font-family: "Poppins", sans-serif;
color: #ffffff;
font-size: 1.05em;
font-weight: 400;
}
.reviews-band .rating-badge span small { font-size: .72em; opacity: .8; }
nav .site-config,
nav .ratings-badges { display: none !important; }
nav .social {
display: flex !important;
flex-direction: row !important;
justify-content: flex-start !important;
left: 10% !important;
right: auto !important;
top: 637px !important;
bottom: auto !important;
transform: none !important;
gap: 22px;
}
nav .social a { margin: 0 !important; }
html[dir="rtl"] nav ul {
padding-left: 0 !important;
padding-right: 10% !important;
}
html[dir="rtl"] nav .social {
left: auto !important;
right: 10% !important;
}
nav ul {
align-items: flex-start !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
padding-left: 10% !important;
box-sizing: border-box !important;
top: 215px !important;
bottom: 20px !important;
height: auto !important;
justify-content: flex-start !important;
}
nav ul li {
text-align: left !important;
padding: 16px 0 !important;
}
nav ul li a , nav ul li button {
text-align: left !important;
margin-left: 0 !important;
margin-right: 0 !important;
transition: letter-spacing 0.3s ease-in-out !important;
}
nav .logo {
display: block !important;
width: 180px !important;
height: auto !important;
top: 28px !important;
left: 50% !important;
transform: translateX(-50%) !important;
}
nav .logo img { width: 100% !important; height: auto !important; display: block; }
nav ul li a .nav-extra , nav ul li button .nav-extra { display: none !important; }
nav ul li a:hover, nav ul li button:hover,
nav ul li a:active, nav ul li button:active,
nav ul li a:focus , nav ul li button:focus { letter-spacing: 0.04em !important; }
nav .btn-close {
top: 0 !important;
left: 0 !important;
width: 70px !important;
height: 70px !important;
justify-content: center !important;
align-items: center !important;
padding: 0 !important;
font-size: 0 !important;
}
nav .btn-close .lines {
width: 30px !important;
margin-right: 0 !important;
}
.reservation-block .site-config {
display: none !important;
}
.reservation-block {
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
height: 100vh !important;
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
background: #f5f5f5 !important;
z-index: 9998 !important;
overflow: hidden !important;
}
.reservation-block .btn-close-lines,
.reservation-block .official,
.reservation-block h3 {
padding: 15px 20px !important;
}
.reservation-block .btn-close-lines {
background: transparent !important;
border-bottom: none !important;
flex-shrink: 0 !important;
}
.reservation-block h3 {
background: #FCF8F2 !important;
margin: 0 !important;
font-size: 18pt !important;
text-align: center !important;
flex-shrink: 0 !important;
}
.reservation-block .ctn {
flex: 1 !important;
overflow-y: auto !important;
padding: 20px !important;
background: #FCF8F2 !important;
}
.reservation-block .ctn.step-1 .persons-section {
display: none !important;
}
.reservation-block .ctn.step-2 #choose-dates-booknow,
.reservation-block .ctn.step-2 .caleran-container,
.reservation-block .ctn.step-2 .caleran-container-mobile,
.reservation-block .ctn.step-2 .date-inputs-ctn {
display: none !important;
}
.reservation-block .ctn .caleran-container-mobile .caleran-input .caleran-calendars .caleran-calendar .caleran-days-container .caleran-day span,
.reservation-block .ctn .caleran-container .caleran-input .caleran-calendars .caleran-calendar .caleran-days-container .caleran-day span {
display: flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 50% !important;
width: 40px !important;
height: 40px !important;
padding: 0 !important;
font-size: 14px !important;
}
/* ── Calendrier mobile : MÊME design que le desktop (spec du site) ──
   Plage sélectionnée : cercle filaire 1px vert sur chaque jour.
   Départ / arrivée : cercle filaire 2px vert.
   Fond transparent, numéraux verts, graisse normale — aucun aplat. */
.reservation-block .ctn .caleran-container-mobile .caleran-input .caleran-calendars .caleran-calendar .caleran-days-container .caleran-day.caleran-selected span,
.reservation-block .ctn .caleran-container-mobile .caleran-input .caleran-calendars .caleran-calendar .caleran-days-container .caleran-day.caleran-hovered span,
.reservation-block .ctn .caleran-container .caleran-input .caleran-calendars .caleran-calendar .caleran-days-container .caleran-day.caleran-selected span,
.reservation-block .ctn .caleran-container .caleran-input .caleran-calendars .caleran-calendar .caleran-days-container .caleran-day.caleran-hovered span {
background: transparent !important;
color: #1D3B21 !important;
border: 1px solid #1D3B21 !important;
border-radius: 50% !important;
font-weight: normal !important;
}
.reservation-block .ctn .caleran-container-mobile .caleran-input .caleran-calendars .caleran-calendar .caleran-days-container .caleran-day.caleran-start span,
.reservation-block .ctn .caleran-container-mobile .caleran-input .caleran-calendars .caleran-calendar .caleran-days-container .caleran-day.caleran-end span,
.reservation-block .ctn .caleran-container .caleran-input .caleran-calendars .caleran-calendar .caleran-days-container .caleran-day.caleran-start span,
.reservation-block .ctn .caleran-container .caleran-input .caleran-calendars .caleran-calendar .caleran-days-container .caleran-day.caleran-end span {
background: transparent !important;
color: #1D3B21 !important;
border: 2px solid #1D3B21 !important;
border-radius: 50% !important;
font-weight: normal !important;
}
.reservation-block .ctn .caleran-container-mobile .caleran-input .caleran-calendars .caleran-calendar .caleran-days-container .caleran-day span,
.reservation-block .ctn .caleran-container .caleran-input .caleran-calendars .caleran-calendar .caleran-days-container .caleran-day span {
border: none !important;
background: transparent !important;
color: #1D3B21 !important;
font-family: 'Poppins', sans-serif !important;
}
/* cellules neutres + désactivées */
.reservation-block .ctn .caleran-container-mobile .caleran-day,
.reservation-block .ctn .caleran-container .caleran-day {
background: transparent !important;
border: none !important;
}
.reservation-block .ctn .caleran-container-mobile .caleran-day.caleran-disabled span,
.reservation-block .ctn .caleran-container .caleran-day.caleran-disabled span {
opacity: .25 !important;
}
/* titre du mois en Cormorant, jours de semaine discrets */
.reservation-block .ctn .caleran-container-mobile .caleran-title,
.reservation-block .ctn .caleran-container .caleran-title {
font-family: 'Cormorant Garamond', serif !important;
color: #1D3B21 !important;
letter-spacing: .12em !important;
text-transform: uppercase !important;
background: transparent !important;
}
.reservation-block .ctn .caleran-container-mobile .caleran-dayofweek,
.reservation-block .ctn .caleran-container .caleran-dayofweek {
color: rgba(29,59,33,.55) !important;
font-family: 'Poppins', sans-serif !important;
text-transform: uppercase !important;
font-size: 9px !important;
letter-spacing: .08em !important;
background: transparent !important;
}
.reservation-block .book {
position: fixed !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
height: 70px !important;
margin: 0 !important;
padding: 15px 20px !important;
padding-bottom: calc(15px + env(safe-area-inset-bottom, 0px)) !important;
border-top: 1px solid rgba(29,59,33,.18) !important;
background: #FCF8F2 !important;
border-radius: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 16pt !important;
flex-shrink: 0 !important;
}
.reservation-block .ctn {
padding-bottom: 100px !important;
}
.reservation-block .ctn .persons-section {
display: flex !important;
flex-direction: column !important;
gap: 30px !important;
}
.reservation-block .ctn .person-ctn {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
}
.reservation-block .ctn .person-ctn label {
font-size: 16pt !important;
margin-bottom: 15px !important;
}
.reservation-block .ctn .person {
display: flex !important;
align-items: center !important;
gap: 20px !important;
}
.reservation-block .ctn .person .minus,
.reservation-block .ctn .person .plus {
width: 40px !important;
height: 40px !important;
border: 2px solid #1D3B21 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
font-size: 20px !important;
color: #1D3B21 !important;
}
.reservation-block .ctn .person .val {
font-size: 18pt !important;
min-width: 40px !important;
text-align: center !important;
}
.reservation-block .error-message {
display: none !important;
color: #d32f2f !important;
text-align: center !important;
margin-top: 15px !important;
font-size: 14pt !important;
}
.reservation-block .error-message.show {
display: block !important;
}
.two-months-badge {
display: none !important;
text-align: center !important;
margin-top: 15px !important;
padding: 12px 20px !important;
background: linear-gradient(135deg, #FFE66D 0%, #95E1D3 100%) !important;
border-radius: 20px !important;
font-size: 14pt !important;
font-weight: 600 !important;
color: #333 !important;
animation: bounce 0.5s ease-in-out !important;
box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
}
@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
}
@media screen and (min-width: 1025px) {
nav ul {
top: 0;
bottom: 0;
height: 100%;
box-sizing: border-box;
padding: 12vh 0;
justify-content: center;
}
}
/* ============================================================
   TABLETTE (769–1024px) — images portrait 3:4 dediees
   (dossier assets/images/tablet/, meme mecanique que mobile/)
   Plage min/max explicite : aucune interference avec le mobile
   (<=768px, blocs plus haut) ni le desktop (>=1025px).
   ============================================================ */
@media screen and (min-width: 769px) and (max-width: 1024px) {
.my-app .home .home-slide-carousel .item {
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
.my-app .home .home-slide-carousel .item:has(img[src*="depuis_la_terrasse"]) {
background-image: url(../images/tablet/riad-ilyan-marrakech.webp?v=1); }
.my-app .home .home-slide-carousel .item:has(img[src*="home_2"]) {
background-image: url(../images/tablet/home_2.webp?v=1); }
.my-app .home .home-slide-carousel .item:has(img[src*="home_3"]) {
background-image: url(../images/tablet/home_3.webp?v=1); }
.my-app .home .home-slide-carousel .item:has(img[src*="home_4"]) {
background-image: url(../images/tablet/home_4.webp?v=1); }
.my-app .home .home-slide-carousel .item:has(img[src*="home_5"]) {
background-image: url(../images/tablet/home_5.webp?v=1); }
.my-app .home .home-slide-carousel .item img { display: none !important; }
.page-first-block-bg.bg-petite-chambre-double {
background-image: url(../images/tablet/Petite-chambre-double.webp?v=1) !important; }
.page-first-block-bg.bg-chambre-double-standard {
background-image: url(../images/tablet/Chambre-double-standard.webp?v=1) !important; }
.page-first-block-bg.bg-chambre-double-lits-jumeaux {
background-image: url(../images/tablet/Chambre-double-lits-jumeaux.webp?v=1) !important; }
.page-first-block-bg.bg-srv {
background-image: url(../images/tablet/DSC06723.webp?v=1) !important; }
.page-first-block-bg.bg-equip {
background-image: url(../images/tablet/DSC06851.webp?v=1) !important; }
.page-first-block-bg.bg-land {
background-image: url(../images/tablet/16.webp?v=1) !important; }
body.listchambres .page-first-block-bg.bg-equip {
background-image: url(../images/tablet/DSC06680.webp?v=1) !important; }
}
/* ============================================================
   MOBILE — carte chambre en CARRÉ 1:1.
   Sert la page /en/ (prerender à l'ANCIENNE structure : photo
   directement dans .item). Sur la page FR (et langues in-place),
   le <style> inline de index.html — plus tard dans le document —
   prend le dessus et gère le carré via .room-visual.
   height:auto neutralise le height:80vh du bloc <=575px.
   ============================================================ */
@media screen and (max-width: 768px) {
.my-app .rooms .rooms-carousel .item { aspect-ratio: 1 / 1; height: auto; }
}
/* ============================================================
   AGENDA MOBILE EN 3 ÉTAPES (≤768px) — habillage uniquement.
   Étape 1 dates · Étape 2 voyageurs · Étape 3 confirmation.
   Identité : traits fins (écho burger), or #C39F61, vert #1D3B21,
   Cormorant pour les dates, Poppins pour les libellés.
   ============================================================ */
@media screen and (min-width: 769px) {
/* desktop : éléments du flux mobile inertes */
.mb-steps, .mb-next, .mb-summary, .mb-recap, .mb-stepname, .mb-hint, .mb-who, .mb-sub, .mb-bookbar { display: none !important; }
}
@media screen and (max-width: 768px) {
/* ── visibilité par étape ───────────────────────────────── */
/* Réserver : étape 3 seulement ; CTA « suivant » : étapes 1, 2, 2bis */
.reservation-block.mstep-1 .book,
.reservation-block.mstep-2 .book,
.reservation-block.mstep-2b .book { display: none !important; }
.reservation-block.mstep-3 .mb-next { display: none !important; }
/* chip « Modifier » + titre selon l'étape */
.reservation-block.mstep-1 .mb-edit { display: none; }
.reservation-block .ctn.step-1 .mb-who { display: none; }
/* étape 2 : adultes + enfants + chambres (les âges ont leur étape) */
.reservation-block .ctn.step-2 .rooms-ctn { display: grid !important; }
.reservation-block .ctn.step-2 .children-ages-ctn { display: none !important; }
/* étape 2bis : âge des enfants uniquement, plein écran */
.reservation-block .ctn.step-2b #choose-dates-booknow,
.reservation-block .ctn.step-2b .caleran-container,
.reservation-block .ctn.step-2b .caleran-container-mobile,
.reservation-block .ctn.step-2b .date-inputs-ctn,
.reservation-block .ctn.step-2b .person-ctn,
.reservation-block .ctn.step-2b .children-ctn,
.reservation-block .ctn.step-2b .rooms-ctn { display: none !important; }
.reservation-block .ctn.step-2b .children-ages-ctn { display: block !important; }
/* étape 3 : récapitulatif uniquement (tout le reste masqué) */
.reservation-block .ctn.step-3 #choose-dates-booknow,
.reservation-block .ctn.step-3 .caleran-container,
.reservation-block .ctn.step-3 .caleran-container-mobile,
.reservation-block .ctn.step-3 .date-inputs-ctn,
.reservation-block .ctn.step-3 .person-ctn,
.reservation-block .ctn.step-3 .children-ctn,
.reservation-block .ctn.step-3 .rooms-ctn,
.reservation-block .ctn.step-3 .children-ages-ctn,
.reservation-block .ctn.step-3 .persons-section { display: none !important; }
/* récap : visible à l'étape 3 seulement */
.reservation-block .ctn .mb-recap { display: none; }
.reservation-block .ctn.step-3 .mb-recap { display: flex; }

/* ── en-tête du panneau : zone aérée (l'officiel chevauchait le
   titre garantie + Retour sur petit écran) ─────────────────── */
/* Plein écran : la ligne officielle et le titre « garantie » sont
   masqués en mobile (gain d'espace, demande client). */
.reservation-block .official,
.reservation-block h3 {
display: none !important;
}
/* fond UNIFIÉ crème du site — aucun blanc/gris dans l'agenda.
   100dvh + safe-area : couvre la zone d'encoche iOS (la page ne
   transparaît plus en haut). */
.reservation-block {
background: #FCF8F2 !important;
height: 100dvh !important;
padding-top: env(safe-area-inset-top, 0px) !important;
}
/* en-tête d'étape sur DEUX lignes, centré :
   « ÉTAPE 1 SUR 2 » discret, puis le titre (DATES / VOYAGEURS)
   en grand Cormorant dessous. */
.reservation-block .mb-stepname {
display: flex !important;
flex-direction: column;
align-items: center;
gap: 4px;
margin: 44px 70px 10px !important;
text-align: center !important;
}
.reservation-block .mb-stepname i {
font-style: normal;
font-family: 'Poppins', sans-serif !important;
font-size: 8pt;
letter-spacing: .18em;
text-transform: uppercase;
color: rgba(29,59,33,.55);
}
.reservation-block .mb-stepname b {
font-weight: 500;
font-family: 'Cormorant Garamond', serif !important;
font-size: 20pt;
letter-spacing: .12em;
text-transform: uppercase;
color: #1D3B21;
}
/* bouton fermer : croix seule dans un CERCLE filaire (signature du site) */
.reservation-block .btn-close-lines > span {
display: none !important;
}
.reservation-block .btn-close-lines {
background: transparent !important;
width: 44px !important;
height: 44px !important;
padding: 0 !important;
border: 1.5px solid #1D3B21 !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.reservation-block .btn-close-lines .lines {
width: 16px !important;
height: 16px !important;
margin: 0 !important;
}
.reservation-block .btn-close-lines .lines {
position: relative !important;
display: block !important;
}
.reservation-block .btn-close-lines .lines span {
position: absolute !important;
top: 50% !important;
left: 0 !important;
width: 100% !important;
height: 1.5px !important;
margin-top: -0.75px !important;
transform: none;
}
/* « Retour » aligné à DROITE en mobile */
.reservation-block .btn-close-lines {
left: auto !important;
right: 16px !important;
}

/* ── indicateur : 3 traits, l'actif s'allonge en doré ───── */
.reservation-block .mb-stepname {
margin: 14px 16px 6px;
font-family: 'Poppins', sans-serif;
font-size: 8.5pt;
letter-spacing: .12em;
text-transform: uppercase;
color: #1D3B21;
text-align: start;
}
.reservation-block .mb-steps {
display: flex;
align-items: center;
gap: 8px;
margin: 0 16px 8px;
}
.reservation-block .mb-steps span {
display: block;
flex: 1 1 0;
height: 2px;
border-radius: 1px;
background: #1D3B21;
opacity: .18;
transition: opacity .4s ease, background-color .4s ease;
}
.reservation-block .mb-steps span.on {
opacity: 1;
background: #1D3B21;
}

/* ── BAS DE PANNEAU VERT (comme le bouton Réserver fixe de l'accueil) :
   CTA pleine largeur + dates Arrivée/Départ en filaire BLANC sur vert. */
.reservation-block .mb-summary {
position: fixed;
left: 0;
right: 0;
bottom: calc(84px + env(safe-area-inset-bottom, 0px));
margin: 0;
padding: 16px;
background: #1D3B21;
z-index: 31;
}
.reservation-block.mstep-1:not(.has-dates) .mb-summary {
display: none;
}
.reservation-block .mb-summary .mb-s-dates {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 7px 14px;
border: 1px solid rgba(252,248,242,.7);
border-radius: 12px;
background: transparent;
color: #FCF8F2;
}
.reservation-block .mb-summary .mb-col {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
flex: 1 1 0;
}
.reservation-block .mb-summary .mb-col i {
font-style: normal;
font-family: 'Poppins', sans-serif;
font-size: 7.5pt;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(252,248,242,.7);
}
.reservation-block .mb-summary .mb-col b {
font-family: 'Poppins', sans-serif;
font-weight: 400;
font-size: 11pt;
letter-spacing: .06em;
}
.reservation-block .mb-summary .mb-arrow {
color: #FCF8F2;
font-size: 12pt;
flex: 0 0 auto;
padding: 0 6px;
}
.reservation-block .mb-summary .mb-edit {
flex: 0 0 auto;
font-family: 'Poppins', sans-serif;
font-size: 7.5pt;
letter-spacing: .1em;
text-transform: uppercase;
color: #FCF8F2;
border: 1px solid rgba(252,248,242,.7);
border-radius: 10px;
padding: 3px 10px;
margin-left: 8px;
}
/* ── titre voyageurs (étape 2) ── */
.reservation-block .mb-who {
margin: 14px 16px 8px;
font-family: 'Cormorant Garamond', serif;
font-size: 20pt;
font-weight: 500;
letter-spacing: .12em;
text-transform: uppercase;
color: #1D3B21;
text-align: center;
}
/* .ctn est un conteneur flex centré (justify-content:center) : quand son
   contenu dépasse, le HAUT (titre du mois) est rogné hors de la zone de
   défilement. On ancre le flux en haut. */
.reservation-block .ctn {
justify-content: flex-start !important;
}
/* numéraux du calendrier : VERT uniquement, quel que soit l'état
   (week-end, désactivé, hors mois) — aucune couleur système caleran. */
.reservation-block .ctn .caleran-container-mobile .caleran-input .caleran-calendars .caleran-calendar .caleran-days-container .caleran-day.caleran-weekend span,
.reservation-block .ctn .caleran-container .caleran-input .caleran-calendars .caleran-calendar .caleran-days-container .caleran-day.caleran-weekend span {
color: #1D3B21 !important;
}
.reservation-block .ctn .caleran-container-mobile .caleran-input .caleran-calendars .caleran-calendar .caleran-days-container .caleran-day.caleran-disabled span,
.reservation-block .ctn .caleran-container .caleran-input .caleran-calendars .caleran-calendar .caleran-days-container .caleran-day.caleran-disabled span,
.reservation-block .ctn .caleran-container-mobile .caleran-input .caleran-calendars .caleran-calendar .caleran-days-container .caleran-day.caleran-not-in-month span,
.reservation-block .ctn .caleran-container .caleran-input .caleran-calendars .caleran-calendar .caleran-days-container .caleran-day.caleran-not-in-month span {
color: #1D3B21 !important;
opacity: .25 !important;
}
/* jours « hors plage » (filler) : vert estompé, pas de violet caleran */
.reservation-block .ctn .caleran-filler,
.reservation-block .ctn .caleran-filler span {
color: #1D3B21 !important;
opacity: .25 !important;
background: transparent !important;
}
/* aucune bordure grise/blanche héritée de caleran — TOUS les wrappers,
   y compris le rendu « mobile » (caleran-inline / calendars / left) */
.reservation-block .ctn .caleran-container,
.reservation-block .ctn .caleran-container-mobile,
.reservation-block .ctn .caleran-inline,
.reservation-block .ctn .caleran-input,
.reservation-block .ctn .caleran-calendars,
.reservation-block .ctn .caleran-calendar,
.reservation-block .ctn .caleran-left,
.reservation-block .ctn .caleran-right {
border: none !important;
box-shadow: none !important;
background: transparent !important;
}
/* cellules toujours CARRÉES (cercles parfaits, pas d'arcs coupés) */
.reservation-block .ctn .caleran-day,
.reservation-block .ctn .caleran-filler {
height: auto !important;
overflow: visible !important;
padding: 2px 0 !important;
}
.reservation-block .ctn .caleran-day span {
width: 40px !important;
height: 40px !important;
min-width: 40px !important;
min-height: 40px !important;
line-height: 1 !important;
box-sizing: border-box !important;
}
.reservation-block .ctn .caleran-day,
.reservation-block .ctn .caleran-dayofweek {
background: transparent !important;
}
/* ── calendrier nu, plein écran (sans cadre) ── */
.reservation-block .ctn .caleran-container,
.reservation-block .ctn .caleran-container-mobile {
margin: 0 8px !important;
border: none !important;
padding: 0 !important;
background: transparent !important;
width: auto !important;
}
/* ── carte voyageurs : rangées « libellé+sous-titre | compteur » ── */
.reservation-block .ctn.step-2 .persons-section,
.reservation-block .ctn.step-2b .persons-section,
.reservation-block .ctn.step-3 .persons-section {
align-self: stretch;
width: auto !important;
margin: 0 16px !important;
border: none;
padding: 0 4px;
gap: 0 !important;
background: transparent;
}
.reservation-block .ctn.step-2 .person-ctn,
.reservation-block .ctn.step-2 .children-ctn,
.reservation-block .ctn.step-2 .rooms-ctn {
display: grid !important;
grid-template-columns: 1fr auto;
align-items: center !important;
width: 100%;
margin: 0 !important;
padding: 14px 0;
border-bottom: 1px solid rgba(29,59,33,.15);
}
.reservation-block .ctn.step-2 .rooms-ctn,
.reservation-block .ctn.step-3 .rooms-ctn { border-bottom: none; }
.reservation-block .ctn.step-2 .person-ctn > label,
.reservation-block .ctn.step-2 .children-ctn > label,
.reservation-block .ctn.step-2 .rooms-ctn > label,
.reservation-block .ctn.step-3 .rooms-ctn > label {
grid-column: 1;
position: static !important;
transform: none !important;
left: auto !important;
top: auto !important;
margin: 0 !important;
font-size: 11pt !important;
text-align: start !important;
}
.reservation-block .ctn.step-2 .mb-sub { grid-column: 1; justify-self: start; }
.reservation-block .ctn.step-2 .person-ctn > label,
.reservation-block .ctn.step-2 .children-ctn > label,
.reservation-block .ctn.step-2 .rooms-ctn > label { justify-self: start; }
.reservation-block .ctn.step-2 .person-ctn > .person,
.reservation-block .ctn.step-2 .children-ctn > .person,
.reservation-block .ctn.step-2 .rooms-ctn > .person,
.reservation-block .ctn.step-3 .rooms-ctn > .person {
grid-column: 2;
grid-row: 1 / span 2;
}
/* compteurs : SVG dédiés (cercle + glyphe dans le fichier) */
.reservation-block .ctn.step-2 .person,
.reservation-block .ctn.step-3 .person {
gap: 16px !important;
}
.reservation-block .ctn.step-2 .person .minus,
.reservation-block .ctn.step-2 .person .plus,
.reservation-block .ctn.step-3 .person .minus,
.reservation-block .ctn.step-3 .person .plus {
flex: 0 0 44px !important;
min-width: 44px !important;
width: 44px !important;
height: 44px !important;
border: none !important;
border-radius: 0 !important;
background: transparent no-repeat center / contain !important;
}
.reservation-block .ctn.step-2 .person .minus,
.reservation-block .ctn.step-3 .person .minus {
background-image: url(../images/svg/moins.svg) !important;
}
.reservation-block .ctn.step-2 .person .plus,
.reservation-block .ctn.step-3 .person .plus {
background-image: url(../images/svg/plus.svg) !important;
}
.reservation-block .ctn.step-2 .person .minus::before,
.reservation-block .ctn.step-2 .person .minus::after,
.reservation-block .ctn.step-2 .person .plus::before,
.reservation-block .ctn.step-2 .person .plus::after,
.reservation-block .ctn.step-3 .person .minus::before,
.reservation-block .ctn.step-3 .person .minus::after,
.reservation-block .ctn.step-3 .person .plus::before,
.reservation-block .ctn.step-3 .person .plus::after {
content: none !important;
}
.reservation-block .ctn.step-2 .person .val,
.reservation-block .ctn.step-3 .person .val {
min-width: 30px !important;
font-size: 14pt !important;
}
/* rangées équilibrées : hauteur régulière, libellés un cran plus présents */
.reservation-block .ctn.step-2 .person-ctn,
.reservation-block .ctn.step-2 .children-ctn,
.reservation-block .ctn.step-2 .rooms-ctn,
.reservation-block .ctn.step-3 .rooms-ctn {
padding: 22px 0 !important;
}
.reservation-block .ctn.step-2 .person-ctn > label,
.reservation-block .ctn.step-2 .children-ctn > label,
.reservation-block .ctn.step-2 .rooms-ctn > label,
.reservation-block .ctn.step-3 .rooms-ctn > label {
font-size: 12pt !important;
letter-spacing: .06em;
}
/* Âges des enfants : pleine largeur, boutons en grille aérée
   (l'étape dédiée donne tout l'espace nécessaire, même à 3+ enfants) */
.reservation-block .ctn.step-2b .children-ages-ctn {
display: block !important;
width: 100% !important;
margin: 0 !important;
padding: 6px 0 18px !important;
border-bottom: 1px solid rgba(29,59,33,.15);
}
.reservation-block .ctn.step-2b .children-ages-ctn[style*="display: none"] {
display: none !important;
border-bottom: none;
}
.reservation-block .ctn.step-2b #ages-list {
display: flex !important;
flex-wrap: wrap !important;
gap: 10px !important;
justify-content: flex-start !important;
}
.reservation-block .ctn.step-2b .age-btn-wrapper {
flex: 0 0 calc(33.33% - 7px);
}
/* boutons d'âge : la FORME d'origine (pilule, bord 2px) */
.reservation-block .ctn.step-2b .age-select-button {
width: 100% !important;
min-height: 44px !important;
border: 2px solid #1D3B21 !important;
border-radius: 25px !important;
padding: 11px 16px !important;
background-color: transparent !important;
color: #1D3B21 !important;
font-family: 'Poppins', sans-serif !important;
font-size: 9.5pt !important;
}
/* liste d'âges : s'ouvre VERS LE HAUT (au-dessus du bouton), opaque */
.reservation-block .ctn.step-2b .children-ages-ctn .age-btn-wrapper {
position: relative;
}
.reservation-block .ctn.step-2b .children-ages-ctn .age-list {
top: auto !important;
bottom: calc(100% + 6px) !important;
background: #FCF8F2 !important;
border: 1px solid rgba(29,59,33,.45) !important;
border-radius: 12px !important;
max-height: 240px !important;
overflow-y: auto !important;
z-index: 40 !important;
}
/* âge sélectionné : vert plein + COCHE crème (comme desktop) */
.reservation-block .ctn.step-2b .age-select-button.selected {
border-color: #1D3B21 !important;
background-color: #1D3B21 !important;
color: #FCF8F2 !important;
padding-right: 36px !important;
background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 9.4"><path style="fill:%23FCF8F2;" d="M4,9.4l-4-4L1.4,4L4,6.6L10.6,0L12,1.4L4,9.4z"/></svg>') !important;
background-repeat: no-repeat !important;
background-position: right 14px center !important;
background-size: 12px !important;
}
.reservation-block .mb-sub {
display: block;
font-family: 'Poppins', sans-serif;
font-size: 7.5pt;
letter-spacing: .06em;
color: rgba(29,59,33,.55);
margin-top: 2px;
text-align: start;
}

/* ── indication sous le contenu ── */
.reservation-block .mb-hint {
margin: 6px 16px 140px;
text-align: center;
font-family: 'Poppins', sans-serif;
font-size: 8.5pt;
letter-spacing: .08em;
color: rgba(29,59,33,.65);
min-height: 1.2em;
}
/* ── CTA pilule (étape 1) — même gabarit que Réserver ── */
.reservation-block .mb-next {
position: fixed;
left: 0;
right: 0;
bottom: 0;
height: calc(84px + env(safe-area-inset-bottom, 0px));
padding-bottom: calc(30px + env(safe-area-inset-bottom, 0px));
border-radius: 0;
background: #1D3B21;
color: #FCF8F2;
font-family: 'Poppins', sans-serif;
font-size: 10pt;
letter-spacing: .14em;
text-transform: uppercase;
display: flex;
align-items: center;
justify-content: center;
z-index: 30;
cursor: pointer;
transition: opacity .3s ease, background-color .3s ease;
}
.reservation-block .mb-next.is-disabled {
background: #1D3B21;
border: none;
color: rgba(252,248,242,.55);
}
.reservation-block .mb-next:active { opacity: .85; }
/* Réserver : même pilule verte */
.reservation-block .book {
position: fixed !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100% !important;
height: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
padding-bottom: calc(30px + env(safe-area-inset-bottom, 0px)) !important;
border-radius: 0 !important;
border: none !important;
background: #1D3B21 !important;
color: #FCF8F2 !important;
font-family: 'Poppins', sans-serif !important;
font-size: 10pt !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
padding: 0 !important;
}

/* ── récap de confirmation (étape 3) ────────────────────── */
.reservation-block .mb-recap {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
padding: 8vh 8vw;
}
.reservation-block .mb-recap .mb-r-dates {
font-family: 'Cormorant Garamond', serif;
font-size: 19pt;
color: #1D3B21;
letter-spacing: .06em;
text-align: center;
}
.reservation-block .mb-recap .mb-r-sep {
width: 60px;
height: 1px;
background: rgba(29, 59, 33, .4);
}
.reservation-block .mb-recap .mb-r-line {
font-family: 'Poppins', sans-serif;
font-size: 10pt;
text-transform: uppercase;
letter-spacing: .12em;
color: #1D3B21;
opacity: .85;
text-align: center;
}
}

/* ============================================================
   BOUTON « RÉSERVER » FLOTTANT (mobile, style Material 3)
   Pilule (extended FAB) visible dès le chargement, fixée pendant
   toute la navigation, au-dessus de la barre iOS (safe-area).
   Masquée quand l'agenda ou le menu sont ouverts (ils ont leurs
   propres CTA). Ripple M3 injecté en JS (.mb-ripple).
   ============================================================ */
@media screen and (max-width: 768px) {
.mb-bookbar {
position: fixed;
right: 20px;
bottom: calc(24px + env(safe-area-inset-bottom, 0px));
z-index: 9000;
width: 64px;
height: 64px;
border-radius: 50%;
background: #1D3B21;
color: #FCF8F2;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
box-shadow: 0 8px 24px rgba(0, 0, 0, .35), 0 3px 8px rgba(29, 59, 33, .4);
transition: transform .3s cubic-bezier(.2, 0, 0, 1), box-shadow .2s ease, opacity .3s ease;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.mb-bookbar svg {
flex: 0 0 auto;
display: block;
width: 28px;
height: 28px;
}
.mb-bookbar .mb-fab-label { display: none; }
.mb-bookbar:active {
transform: scale(.92);
box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
}
body.resa-open .mb-bookbar,
body.menu-open .mb-bookbar {
transform: translateY(200%);
opacity: 0;
pointer-events: none;
}
.mb-bookbar .mb-ripple {
position: absolute;
border-radius: 50%;
background: rgba(252, 248, 242, .30);
transform: scale(0);
animation: mbRipple .55s cubic-bezier(.2, 0, 0, 1) forwards;
pointer-events: none;
}
/* Voile du container transform : cercle vert qui s'étend depuis le FAB */
.mb-fab-morph {
position: fixed;
z-index: 9998;
width: 64px;
height: 64px;
border-radius: 50%;
background: #1D3B21;
pointer-events: none;
transform: scale(1);
transition: transform .5s cubic-bezier(.2, 0, 0, 1), opacity .35s ease;
}
}
@keyframes mbRipple {
to { transform: scale(2.8); opacity: 0; }
}

/* ============================================================
   LECTEUR D'AMBIANCE : masqué dès que le menu burger ou
   l'agenda de réservation sont ouverts (mobile ET desktop).
   ============================================================ */
body.menu-open .snd-player,
body.resa-open .snd-player {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}

/* ============================================================
   FEEDBACK M3 DISCRET (agenda) : au survol/appui, le tracé se
   « graisse » légèrement — même esprit que le J'ai compris du
   popup. Aucun changement au repos, le design reste intact.
   + focus visible charté pour la navigation clavier.
   ============================================================ */
.reservation-block .person .minus:hover,
.reservation-block .person .plus:hover {
filter: drop-shadow(0 0 .8px #1D3B21);
}
.reservation-block .person .minus:active,
.reservation-block .person .plus:active {
filter: drop-shadow(0 0 1px #1D3B21);
transform: scale(.94);
}
.caleran-day:not(.caleran-disabled):hover span {
-webkit-text-stroke: .8px currentColor;
}
.caleran-day:not(.caleran-disabled):active span {
-webkit-text-stroke: 1px currentColor;
}
.reservation-block button:focus-visible,
.reservation-block .age-select-button:focus-visible,
.mb-bookbar:focus-visible,
#sound-toggle:focus-visible,
.sn-bar button:focus-visible,
.sn-bar a:focus-visible {
outline: 2px solid rgba(29, 59, 33, .55);
outline-offset: 3px;
}