@font-face { font-family: 'Shadows Into Light'; src: url(../ShadowsIntoLightTwo-Regular.ttf) format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Architects Daughter'; src: url(../ArchitectsDaughter-Regular.ttf) format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background-color: #FFF; font-family: Verdana, Geneva, sans-serif; color: #000; font-size: 20px; width: 100%; height: 100%; }
img { max-width: 100%; height: auto; }

a { color: #621E00; text-decoration: none; transition: color .3s ease; }
a:hover { color: #000; }

h1, h2, h3 { font-family: 'Shadows Into Light', cursive; color: #621E00; text-shadow: 0 0 6px #777; font-weight: 100; font-style: italic; margin: 0; padding: 0; }
h1 { font-size: 50px; color: #DDAE8E; }
h2 { font-size: 40px; }
h3 { font-size: 35px; }

input, select, textarea { border-radius: 5px; font-family: 'Architects Daughter', cursive; font-size: 20px; color: #621E00; padding: 5px; margin: 3px; font-weight: 100; }

.desert_menu { width: 100%; overflow: hidden; text-align: center; margin-top: 20px; }
.contient { width: 80%; overflow: hidden; margin: 20px auto 50px auto; text-align: center; }
.centre { width: 87%; margin: 0 auto; overflow: hidden; border: 1px solid #081A1E; min-height: 430px; padding: 30px; border-radius: 10px; }

.desert-1 { height: 1px; background-color: #CCC; }
.desert-2 { width: 100%; overflow: hidden; background-size: cover; height: 370px; margin: 0; }
.desert-3 { width: 100%; overflow: hidden; background-color: rgba(119, 69, 32, 0.4); text-align: center; padding: 20px 0; }

.menu { position: absolute; width: 250px; text-align: left; padding: 0; top: 241px; margin-left: 20%; }
.desert-desert-marocain { font-family: 'Shadows Into Light', cursive; font-size: 80px; color: #621E00 !important; text-shadow: 0 0 9px #FFF; margin: 0 auto; width: 73%; text-align: right; min-height: 270px; line-height: 150px; overflow: hidden; transition: all .8s; font-style: italic; }
.desert-desert-marocain:hover { font-size: 70px; }
.btn_desert { width: 210px; height: 210px; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; text-decoration: none; border-radius: 20px; margin: 10px 5px; padding: 15px; border: 1px solid #F5F5F5; transition: all .8s; text-align: center; box-sizing: border-box; }
.btn_desert:hover { box-shadow: 0 0 1em #666; border-color: #985625; }
.btn_desert_texte { width: 100%; line-height: 1.2; margin: 0; display: block; text-align: center; font-family: 'Shadows Into Light', cursive; font-size: 28px; font-style: italic; }

.gallery { column-count: 4; column-gap: 15px; }
.gallery img { width: 100%; margin-bottom: 15px; display: block; border-radius: 8px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); transition: transform .3s; cursor: pointer; }
.gallery img:hover { transform: scale(1.02); }

/* MODALE LIGHTBOX */
.modal { display: none; position: fixed; inset: 0; z-index: 1000000; overflow: auto; background-color: rgba(0, 0, 0, 0.92); }
.modal-content { margin: 30px auto; display: block; width: auto; height: 80vh; padding: 15px; box-sizing: border-box; }
.close { position: absolute; top: 60px; right: 35px; color: #FFF; font-size: 40px; font-weight: bold; cursor: pointer; transition: color .3s; }
.close:hover { color: #DDAE8E; }
.nav-button { position: absolute; top: 50%; background-color: rgba(0, 0, 0, 0.6); transform: translateY(-50%); color: #FFF; cursor: pointer; font-size: 30px; font-weight: bold; border: 0; padding: 15px 20px; border-radius: 50%; transition: background .3s; }
.nav-button:hover { background-color: rgba(0, 0, 0, 0.9); }
#prevBtn { left: 10px; }
#nextBtn { right: 10px; }

.galerie_desert { border-radius: 10px; width: 85%; overflow: hidden; border: 1px solid #CCC; text-align: center; margin: 30px auto 0 auto; transition: all .5s; background-color: rgba(119, 69, 32, 0.4); }
.galerie_desert:hover { box-shadow: 0 0 1em #666; }
.popup-gallery { width: 100%; overflow: hidden; margin: 30px 0 0 0; }

.galerie_fiche { min-width: 80px; padding: 0 10px; border-radius: 5px; overflow: hidden; border: 1px solid #CCC; text-align: center; margin: 10px 0 0 0; transition: all .5s; display: inline-block; vertical-align: bottom; background-color: rgba(119, 69, 32, 0.4); }
.galerie_fiche:hover { box-shadow: 0 0 1em #666; }
.galerie_desert-marocain { clear: both; width: 100%; display: inline-block; text-align: left; margin-top: 150px; font-size: 24px; }

.desert-top { margin: 0 auto; max-width: 900px; text-align: right; font-size: 18px; line-height: 50px; }
.desert-menu, .desert-menu:link, .desert-menu:visited { font-family: 'Architects Daughter', cursive; font-size: 24px; color: #000; text-shadow: 0 0 3px #777; text-decoration: none; }
.desert-menu:hover { color: #F90; text-shadow: 0 0 0 #777; text-decoration: underline; }

.en_btn, .fr_btn { width: 30px; height: 29px; display: inline-block; cursor: pointer; margin: 0 15px 0 0; text-decoration: none; transition: all .5s; opacity: 0.5; }
.en_btn { background-image: url(../images-desert-marocain/uk-s.png); }
.en_btn:hover { background-image: url(../images-desert-marocain/uk.png); opacity: 1; }
.fr_btn { background-image: url(../images-desert-marocain/fr-s.png); }
.fr_btn:hover { background-image: url(../images-desert-marocain/fr.png); opacity: 1; }

.footer-desert { position: relative; background: linear-gradient(180deg, #8A5A44 0%, #5D3522 100%) !important; color: #F5E6D3; padding: 90px 30px 0; margin-top: 60px; background-image: url(../images-desert-marocain/desert.gif); background-position: top center; background-repeat: repeat-x; background-size: auto 60px; font-family: 'Architects Daughter', cursive; }
.footer-desert-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.3fr 1fr 1.2fr; gap: 50px; padding-bottom: 35px; }
.footer-desert-titre { font-family: 'Shadows Into Light', cursive; font-size: 32px; color: #FFE3C5; text-shadow: 0 0 10px rgba(0,0,0,0.4); margin: 0 0 18px 0; padding-bottom: 10px; border-bottom: 2px dashed rgba(255, 227, 197, 0.4); font-style: italic; font-weight: 100; }
.footer-desert-baseline { line-height: 1.6; margin: 0 0 20px 0; font-size: 17px; }
.footer-desert-baseline strong { color: #FFE3C5; }
.footer-desert-tripadvisor { margin-top: 20px; padding: 12px; background: rgba(255,255,255,0.08); border-radius: 8px; display: inline-block; transition: all .3s ease; }
.footer-desert-tripadvisor:hover { background: rgba(255,255,255,0.15); transform: translateY(-2px); }
.footer-desert-tripadvisor img { display: block; max-width: 180px; }
.footer-desert-nav ul { list-style: none; padding: 0; margin: 0; }
.footer-desert-nav li { padding: 6px 0; }
.footer-desert-nav a { color: #F5E6D3; text-decoration: none; font-size: 18px; transition: all .25s ease; display: inline-block; }
.footer-desert-nav a:hover { color: #FFE3C5; transform: translateX(8px); }
.footer-desert-tel { font-size: 18px; line-height: 1.8; margin: 0 0 15px 0; }
.footer-desert-tel a { color: #F5E6D3; text-decoration: none; font-weight: bold; transition: color .3s; }
.footer-desert-tel a:hover { color: #FFE3C5; }
.footer-desert-whatsapp { display: inline-block; padding: 10px 24px; background: #25D366; color: #FFF !important; border-radius: 25px; font-weight: bold; text-decoration: none; transition: all .3s ease; box-shadow: 0 3px 10px rgba(0,0,0,0.2); }
.footer-desert-whatsapp:hover { background: #1FAE54; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(37,211,102,0.4); }
.footer-desert-sites { font-size: 16px; margin-top: 20px; line-height: 1.8; }
.footer-desert-sites strong { color: #FFE3C5; }
.footer-desert-sites a { color: #F5E6D3; text-decoration: none; font-style: italic; transition: color .3s; }
.footer-desert-sites a:hover { color: #FFE3C5; text-decoration: underline; }
.footer-desert-bottom { background: rgba(0, 0, 0, 0.25); margin-top: 30px; padding: 18px 30px; text-align: center; font-size: 14px; color: rgba(245, 230, 211, 0.8); }
.footer-desert-bottom p { margin: 0; }
.footer-desert-bottom a { color: #F5E6D3; text-decoration: none; transition: color .3s; }
.footer-desert-bottom a:hover { color: #FFE3C5; text-decoration: underline; }
.yoga { float: left; width: 250px; background-color: #003366; text-align: left; padding: 0; box-shadow: 0 0 1em #777; }
.desert-maroc-titre { font-family: 'Shadows Into Light', cursive; font-size: 20px; height: 4px; width: 100%; margin: 0; padding: 0; color: #999; }
.desert-maroc, .desert-maroc:link, .desert-maroc:visited { font-family: 'Shadows Into Light', cursive; font-size: 24px; color: #FFF; text-decoration: none; font-weight: bold; transition: all .5s; }
.desert-maroc:hover { color: #EBB889; cursor: pointer; }

.desert-texte { text-align: justify; }
.img_index { margin: 15px; }
.cadre { border: 1px solid #FFF; width: 980px; }
.photo { border: 1px solid #081A1E; }
.txtpt { font-size: 12px; color: #000; }
.txttitre { font-family: 'Shadows Into Light', cursive; font-size: 34px; font-weight: 100; font-style: italic; margin: 0; padding: 0;color: #621E1A }
.titre { font-family: 'Architects Daughter', cursive; font-size: 26px; margin: 0; padding: 0; }
.txt { font-family: 'Architects Daughter', cursive; font-size: 20px; margin: 0; padding: 0; }
#overflo { overflow: auto; width: 630px; height: 120px; }
.marg40 {margin:40px 0}
.norm {width:100%; text-align:center}
.pad15 {padding:25px 0}

.back_top { position: fixed; bottom: 30px; right: 30px; width: 50px; height: 50px; border-radius: 50%; background: rgba(98, 30, 0, 0.8); color: #FFF; border: 0; cursor: pointer; font-size: 24px; opacity: 0.5; transition: opacity .3s, transform .3s; z-index: 999; }
.back_top:hover { opacity: 1; transform: translateY(-3px); }

table { width: 100%; max-width: 100%; border-collapse: collapse; margin: 25px 0; background-color: rgba(255, 255, 255, 0.85); border-radius: 8px; overflow: hidden; border:1px solid #666; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); font-family: 'Architects Daughter', cursive; font-size: 18px; }
thead { background-color: #621E00; color: #FFF; }
thead th { padding: 8px; text-align: left; font-size: 22px; font-weight: 100; font-style: italic; letter-spacing: 1px; border-bottom: 3px solid #985625; }
tbody td { padding: 6px; border-bottom: 1px solid #E8D5C0; color: #4A1F00; vertical-align: top; }
tbody tr:nth-child(even) { background-color: rgba(221, 174, 142, 0.15); }
tbody tr { transition: background-color .25s ease; }
tbody tr:hover { background-color: rgba(221, 174, 142, 0.4); }
tbody tr:last-child td { border-bottom: 0; }
tbody td:first-child { font-weight: bold; color: #621E00; }
table a { color: #621E00; font-weight: bold; }
table a:hover { color: #985625; text-decoration: underline; }
caption { caption-side: top; padding: 12px; font-family: 'Shadows Into Light', cursive; font-size: 28px; color: #621E00; text-shadow: 0 0 3px #777; font-style: italic; }

/* Tables scrollables horizontalement sur mobile */
@media (max-width: 500px) {
    table.responsive { display: block; }
    table.responsive thead { display: none; }
    table.responsive tbody, table.responsive tr, table.responsive td { display: block; width: 100%; }
    table.responsive tr { margin-bottom: 15px; padding: 10px; background-color: rgba(255, 255, 255, 0.95); border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); }
    table.responsive td { padding: 6px 0; border-bottom: 1px dashed #DDAE8E; text-align: right; }
    table.responsive td:before { content: attr(data-label); float: left; font-weight: bold; color: #621E00; }
    table.responsive td:last-child { border-bottom: 0; }
    .btn_desert { width: 95%; height: auto; overflow: hidden; border: 1px solid #744938; line-height: normal; padding: 15px; }
    .desert-texte { padding: 10px; }
    .btn_desert_texte { width: 100%; margin-top: 0; text-align: center; }
    .desert-2 { height: auto; min-height: 200px; }
    .gallery { column-count: 2; }	
}

@media (max-width: 600px) {
    .desert-desert-marocain { font-size: 50px; text-shadow: 0 0 5px #777; text-align: center; line-height: 120px; min-height: 100px; width: 100%; }
    .desert-desert-marocain:hover { font-size: 45px; }
    .desert-top { display: none; }
    .desert-bas2 { display: none; }
    .centre { width: 87%; margin: 10px auto; overflow: hidden; box-shadow: none; padding: 10px; border: 1px solid #666; }
    .menu { top: 150px; margin-left: 5%; }
    .bas { overflow: hidden; min-height: 50px; }
    .btn_desert { margin: 5px; }
    .contient { width: 100%; }
    .back_top { bottom: 15px; right: 15px; width: 40px; height: 40px; font-size: 18px; }
    .footer-desert { padding: 70px 20px 0; }
    .footer-desert-inner { grid-template-columns: 1fr; gap: 30px; text-align: center; }
    .footer-desert-titre { font-size: 28px; }
    .footer-desert-nav a:hover { transform: none; }	
}

@media (max-width: 700px) {
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
    table thead { display: table-header-group; }
    table tbody { display: table-row-group; }
    table tr { display: table-row; }
    table th { white-space: normal; }
	table td { white-space: normal;padding:5px }
	h1 { font-size: 30px; color: #DDAE8E; }
	h2 { font-size: 26px; }
	h3 { font-size: 22px; }
	
}

@media (max-width: 900px) {
    .footer-desert-inner { grid-template-columns: 1fr 1fr; gap: 35px; }
    .footer-desert-presentation { grid-column: 1 / -1; text-align: center; }
    .footer-desert-tripadvisor { margin: 20px auto 0; }
}

@media (max-width: 1000px) {
    .gallery { column-count: 3; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
    .gallery img:hover { transform: none; }
    .desert-desert-marocain:hover { font-size: 80px; }
}