@font-face { font-family: 'Quicksand'; src: url(../Quicksand-VariableFont_wght.ttf) format('truetype'); font-weight: 1 1000; font-style: normal; font-display: swap; }
@font-face { font-family: 'Garamond'; src: url(../CormorantGaramond-LightItalic.ttf) format('truetype'); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'Number Five'; src: url(../numberfivesmooth.otf) format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; padding: 0; font-family: 'Quicksand', sans-serif; font-size: 20px; color: #96623E; background-color: #FFF9F5; height: 100%; }
img { max-width: 100%; height: auto; }

h1 { font-family: 'Garamond', serif; font-size: 60px; padding: 0; margin: 0; color: #96623E; text-align: center; font-weight: 300; }
h2 { font-family: 'Garamond', serif; font-size: 50px; padding: 0; margin: 0; color: #96623E; text-align: center; font-weight: 300; }

a:link, a:visited { text-decoration: none; }
a:hover { text-decoration: none; }
input[type="checkbox"] { transform: scale(1.5);}

/* LOGO TOP */
.divlogo { width: 100%; margin: 0; padding: 20px 0; text-align: center; background-image: url(../riad-hotel-maroc-desert-images/hotel-riad-mhamid.jpg); background-size: cover; background-position: center bottom; box-shadow: 8px 8px 12px #96623E; height: 400px; }
.divlogo a:link, .divlogo a:visited { font-family: 'NumberFive', serif; font-size: 60px; color: #FFF; transition: all .5s; }
.divlogo a:hover { color: #CC912F; transition: all .5s; }
.divlogotxt { display: inline-block; }
.logoimg { vertical-align: middle; width: 150px; height: auto; margin: 0 30px 0 0; display: inline-block; }
.desert { font-family: 'NumberFive', serif; font-size: 36px; }

/* MENU PRINCIPAL */
#divmenu { width: 100%; text-align: center; z-index: 10000; background-color: #FDE4D6; transition: all 0.3s ease; }
.fixNavigation { z-index: 9999; position: fixed; top: 0; width: 100%; transition: all .5s; }
.cale { height: 130px; display: none; transition: height 0.3s ease; }
.caleok { display: block; }

.nav { position: relative; display: inline-block; z-index: 100; font-size: 18px; vertical-align: bottom; }
.nav-list { text-align: left; list-style: none; margin: 0; padding: 0; }
.nav-item { float: left; position: relative; }
.nav-item a { display: block; color: #96623E !important; padding: 15px 20px; margin: 0; transition: all .5s; }
.nav-item a:hover { background: #FFF8F4; color: #96623E !important; transition: all .5s; }
.itemactif { background-color: #FFF8F3; }
.itemactif a:link, .itemactif a:visited { color: #FFF8F3; }
.itemactif a:hover { color: #96623E; }

/* SOUS-MENU PUR CSS */
.nav-submenu { display: none; position: absolute; top: 100%; left: 0; min-width: 200px; background: #FDE4D6; box-shadow: 0 4px 12px rgba(0,0,0,0.15); list-style: none; padding: 0; margin: 0; z-index: 9999; }
.nav-submenu li { float: none; width: 100%; }
.nav-submenu a { padding: 12px 20px; display: block; }
.nav-item:hover .nav-submenu { display: block; }

/* IMAGE PRINCIPALE - centrée */
.imgriad { display: block; max-width: 100%; height: auto; margin: 30px auto; border-radius: 8px; box-shadow: 0 4px 12px rgba(150,98,62,0.25); }


.smenus { width: 100%; text-align: center; z-index: 1000; display: block; overflow: hidden; background-color: #FEEEE5; font-size: 18px; }
.smenusdiv { display: inline-block; padding: 15px; margin: 0; color: #4d4a49; transition: all .5s; font-size: 18px; }
.smenusdiv:hover, .smenusdivactif:hover { background: #FFF9F5; color: #213576; transition: all .5s; }
.smenusdivactif { display: inline-block; padding: 15px 20px; margin: 0; color: #213576; background-color: #FFF8F3; font-size: 18px; }

/* MENU MOBILE */
.nav-mobile { display: none; cursor: pointer; position: absolute; top: 0; right: 0; background: #3d3d3b url(../js/menu/img/bouton.gif) no-repeat center center; height: 50px; width: 50px; transition: all .5s; }
.nav-click { position: absolute; top: 0; right: 0; display: none; border-left: 1px solid #3d3d3b; height: 49px; width: 50px; cursor: pointer; }
.nav-click i { display: block; height: 48px; width: 48px; background: url(../js/menu/img/img/drop.svg) no-repeat center center; background-size: 20px; }
.nav-click:hover { background-color: #9cdcf9; }
.nav-rotate { transform: rotate(180deg); }
.padImg a { padding: 10px 10px 7px 20px !important; }

/* MENU DROITE (langue + tel + contact) */
.btns { position: fixed; right: 0; top: 140px; z-index: 1000; overflow: hidden; background-color: rgba(248,200,151,.7); }
.btnsFix { position: fixed; right: 0; top: 65px; z-index: 1000; overflow: hidden; background-color: rgba(248,200,151,.7); transition: all .5s; }
.marocain { margin: 0 10px; vertical-align: middle; }
.btnlangue { transition: all .4s; margin: 7px; display: inline-block; font-size: 18px; color: #333; }
.btnlangue:hover { opacity: 0.7; transition: all .4s; color: #900; }

/* CONTENU PRINCIPAL */
.mhamid { max-width: 1200px; margin: 0 auto; width: 100%; overflow: hidden; }
.centrer { text-align: center; }
.txt1 { padding: 30px; text-align: justify; color: #96623E; width: 100%; max-width: 1200px; margin: 0 auto; background-color: #FFF9F5; }
.txt1::after { content: ""; display: table; clear: both; }
.maroc { float: left; width: 45%; margin: 0 30px 20px 0; background-color: #FFF9F5; }
.tabletexte { font-size: 20px; color: #96623E; }
.tabletexte a:link, .tabletexte a:visited { color: #2241AC; transition: all .5s; }
.tabletexte a:hover { color: #345254; transition: all .5s; }
.txt1 a:link { color: #019cc8; }
.txt1 a:visited { color: #019cc8; }
.txt1 a:hover { color: #012a8d; }
.txtpetit { font-size: 14px; }
.txtpetit10 { font-size: 10px; }
.texteseul { width: 80%; max-width: 1200px; margin: 0 auto; padding: 30px; text-align: justify; }

/* RIAD (encart contenu) */
.riad { width: 70%; max-width: 1200px; margin: 140px auto; overflow: hidden; box-shadow: 1px 1px 28px #CCC; border: #CCC 1px solid; min-height: 630px; padding: 50px; border-radius: 15px; background-color: rgba(250, 250, 250, 0.7); }
.riad h2 { font-family: 'Garamond', serif; font-size: 50px; text-align: left; }

/* ACTUS */
.news { width: auto; text-align: center; margin: 10px auto; }
.news-in { width: 100%; max-width: 1300px; text-align: center; margin: 0 auto; }
.actus { overflow: hidden; width: 250px; margin: 35px; border: #CCC 1px solid; border-radius: 10px; display: inline-block; background-color: #FFF; cursor: pointer; vertical-align: top; transition: all .5s; }
.actu { height: 300px; width: 250px; margin: 0; border: #CCC 1px solid; border-radius: 10px; vertical-align: top; transition: all .5s; }
.actus .date { font-size: 16px; color: #000; }
.actus .txt { overflow: hidden; height: 178px; font-size: 14px; color: #000; padding: 10px; margin: 0; text-align: justify; background: linear-gradient(rgba(255,255,255,.8), rgba(255,255,255,.0)); border-radius: 10px 10px 0 10px; transition: all .5s; }
.actus .txtfull { background-color: #F4F4F4; overflow: hidden; height: 370px; font-size: 14px; padding: 15px; margin: 0; text-align: justify; border-radius: 10px 10px 0 10px; }
.actus h2 { font-family: 'NumberFive', serif; font-size: 26px; text-align: center; padding: 0; color: #000; }
.actus:hover .txt { background-color: rgba(196, 155, 72, 0.8); transition: all .5s; }

/* MAP */
#map_canvas { width: 100%; height: 450px; }

/* SLIDER */
.slider1 { background-color: #dadbdc; z-index: 100; display: block; max-height: 1000px; }
.slidebackground { background-repeat: no-repeat; background-position: left center; background-size: cover; width: 100%; min-height: 700px; height: 100%; }
#wrapper { width: 100%; padding: 0; margin: 0; }
.rslides { position: relative; list-style: none; margin: 0; padding: 0; }
.rslides li { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; visibility: hidden; transition: opacity 0.5s ease; z-index: 1;list-style-type: none; }
.rslides li.rslides-active { opacity: 1; visibility: visible; z-index: 2; }
.rslides li:first-child { position: relative; }
.rslides img { display: block; width: 100%; height: auto; }
.rslides_container { margin: 0 auto; position: relative; width: 100%; }
.centered-btns_tabs { position: relative; margin-top: -55px; text-align: center; z-index: 1000; padding: 0; }
.centered-btns_tabs li { display: inline-block; margin-right: 5px; }
.centered-btns_tabs a { text-indent: -9999px; overflow: hidden; border-radius: 20px; background: rgba(0,0,0,.2); display: inline-block; box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3); width: 15px; height: 15px; border: #CCC 1px solid; margin: 5px; cursor: pointer; transition: background 0.3s; }
.centered-btns_tabs a:hover { background: rgba(0,0,0,.5); }
.centered-btns_here a { background: rgba(0,0,0,.8); }

/* FORMULAIRES */
input, textarea, select { border-radius: 5px; font-size: 14px; font-family: Verdana, Geneva, sans-serif; color: #4d4a49; padding: 5px; margin: 4px; width: 300px; border: solid 1px #dcdcdc; }
input:focus, textarea:focus, select:focus { border: solid 1px #000; box-shadow: 0 0 2px 2px #a4d38e; }
.bouton { background-color: #FFF8F3; cursor: pointer; width: 300px; font-size: 20px; transition: all .5s; }
.bouton:hover { background-color: #C4B5AC; transition: all .5s; }
.buttonfit { display: inline-block; padding: 12px 24px; background-color: #96623E; color: #FFF; border-radius: 4px; transition: all .3s; cursor: pointer; }
.buttonfit:hover { background-color: #CC912F; transform: scale(1.05); }

/* BAS DE PAGE */
.basliens { width: 100%; text-align: center; margin: 40px 0 0 0; color: #FFF; overflow: hidden; bottom: 0; background-image: url(../riad-hotel-maroc-desert-images/riad-mhamid.png); background-repeat: repeat-x; clear: both; }
.basliens a:link, .basliens a:visited { color: #FFF; transition: all .5s; }
.basliens a:hover { color: #FFF; transition: all .5s; }
.imgbas { max-width: 306px; height: auto; }
.hotel { width: 60%; overflow: hidden; text-align: center; margin: 0 auto; padding: 90px 0; }

/* RETOUR EN HAUT */
.back_top { position: fixed; bottom: 30px; margin: 10px; right: 30px; width: 80px; height: 80px; display: block; opacity: 0.4; transition: .5s; background-image: url(../riad-hotel-maroc-desert-images/fleche-page.png); background-color: transparent; border: 0; cursor: pointer; }
.back_top:hover { opacity: 0.9; transition: .5s; }

/* GALERIE MOSAÏQUE DYNAMIQUE */
.gallery { background-color: #FFF; width: 100%; margin: 0; padding: 0; overflow: hidden; }
.gallery-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; margin-bottom: 2px; }
.gallery-item { display: block; overflow: hidden; position: relative; }
.gallery-item.span-2 { grid-column: span 2; }
.gallery-item.span-3 { grid-column: span 3; }
.gallery-item.span-4 { grid-column: span 4; }
.gallery-item.span-6 { grid-column: span 6; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.gallery-item:hover img { transform: scale(1.05); }

/* COOKIE BANNER */
#cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; background: #96623E; color: #FFF; padding: 1em 1.5em; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; font-size: 16px; z-index: 100000; box-shadow: 0 -2px 12px rgba(0,0,0,0.3); }
#cookie-banner p { margin: 0; flex: 1; min-width: 250px; color: #FFF; }
#cookie-banner button { padding: 10px 20px; cursor: pointer; color: #96623E; background: #FFF; border: none; border-radius: 4px; font-size: 16px; font-weight: bold; transition: opacity .3s; }
#cookie-banner button:hover { opacity: 0.85; }

/* RESPONSIVE MOBILE */
@media only screen and (max-width: 768px) {
    .nav-mobile { display: block; }
    .nav { width: 100%; padding: 50px 0 0 0; background-color: #FCD2BC; }
    .nav-list { display: none; }
    .nav-list.open { display: block !important; }
    .nav-item { width: 100%; float: none; }
    .nav-item a { padding: 15px 10px; color: #213576; transition: all .5s; }
    .nav-click { display: block; }
    .nav-mobile-open { background-color: #96623E; border-radius: 5px 5px 0 0; }
    .nav-submenu { position: static; width: 85%; box-shadow: none; display: none; background-color: rgba(252,210,188,0.5); }
    .nav-submenu.open { display: block; }
    .nav-submenu-item a { color: #828487; }
    .nav-submenu-item a:hover { color: #828487; }
    .smenusdiv, .smenusdivactif { padding: 15px 10px; margin: 0; }
    .smenus { min-height: 45px; }
    .smenusdivactif { width: 100%; }
    .slidebackground { height: 350px !important; min-height: 350px; }
	.maroc { float: none; width: 100%; margin: 0 0 20px 0; }
	.tabletexte { padding: 0; }
    .tabletexte { padding: 15px; text-align: justify !important; }
    h1 { font-size: 50px; }
    h2 { font-size: 40px; }
    .texteseul { width: 90%; max-width: 1200px; margin: 0 auto; padding: 15px; }
    .back_top { bottom: 10px; right: 10px; width: 40px; height: 40px; background-size: cover; }
    .divlogo a:link, .divlogo a:visited { font-size: 30px; }
    .divlogotxt { width: 100%; }
    .logoimg { margin: 0; }
    .imgbas { max-width: 250px; height: auto; }
    .btns { display: none; }
    #map_canvas { height: 250px; }
    .gallery-row { grid-template-columns: 1fr; }
    .gallery-item.span-2,
    .gallery-item.span-3,
    .gallery-item.span-4,
    .gallery-item.span-6 { grid-column: span 1; }
    .gallery-item { height: 250px !important; }}

@media (prefers-reduced-motion: reduce) {
    .gallery-item:hover img { transform: none; }
}