{"id":1641,"date":"2026-05-08T18:23:07","date_gmt":"2026-05-08T17:23:07","guid":{"rendered":"https:\/\/houseinthekasbah.com\/?page_id=1641"},"modified":"2026-05-18T20:09:18","modified_gmt":"2026-05-18T19:09:18","slug":"home","status":"publish","type":"page","link":"https:\/\/houseinthekasbah.com\/fr\/","title":{"rendered":"Home New"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"1641\" class=\"elementor elementor-1641\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-693fbd0 e-con-full e-flex e-con e-parent\" data-id=\"693fbd0\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c14b8a2 elementor-widget elementor-widget-html\" data-id=\"c14b8a2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   VARIABLES & RESET\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n:root {\r\n  --ink:        #141210;\r\n  --ink-soft:   #1e1b18;\r\n  --earth:      #b89a6e;\r\n  --earth-pale: #d4bc97;\r\n  --sand:       #e6ddd0;\r\n  --sand-light: #f0ebe2;\r\n  --cream:      #f7f3ee;\r\n  --white:      #fdfaf7;\r\n  --muted:      #8a8078;\r\n  --border:     rgba(184,154,110,0.2);\r\n  --border-sub: rgba(184,154,110,0.1);\r\n}\r\n\r\n*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\nhtml { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }\r\n\r\nbody {\r\n  background: var(--ink);\r\n  color: var(--sand);\r\n  font-family: 'Raleway', sans-serif;\r\n  font-weight: 300;\r\n  letter-spacing: 0.04em;\r\n  overflow-x: hidden;\r\n  cursor: default;\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   CUSTOM CURSOR\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.cursor {\r\n  width: 8px; height: 8px;\r\n  background: var(--earth);\r\n  border-radius: 50%;\r\n  position: fixed;\r\n  pointer-events: none;\r\n  z-index: 9999;\r\n  transform: translate(-50%, -50%);\r\n  transition: transform 0.1s, width 0.3s, height 0.3s, opacity 0.3s;\r\n  mix-blend-mode: normal;\r\n}\r\n.cursor-ring {\r\n  width: 36px; height: 36px;\r\n  border: 1px solid var(--earth);\r\n  border-radius: 50%;\r\n  position: fixed;\r\n  pointer-events: none;\r\n  z-index: 9998;\r\n  transform: translate(-50%, -50%);\r\n  transition: transform 0.18s ease, width 0.3s, height 0.3s, opacity 0.4s;\r\n  opacity: 0.5;\r\n}\r\n.cursor.hover { width: 14px; height: 14px; }\r\n.cursor-ring.hover { width: 60px; height: 60px; opacity: 0.25; }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   NAVIGATION\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\nnav {\r\n  position: fixed;\r\n  top: 0; left: 0; right: 0;\r\n  z-index: 500;\r\n  padding: 36px 52px;\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  transition: padding 0.5s ease, background 0.5s ease, border-color 0.5s ease;\r\n  border-bottom: 1px solid transparent;\r\n}\r\nnav.scrolled {\r\n  padding: 20px 52px;\r\n  background: rgba(20, 18, 16, 0.94);\r\n  backdrop-filter: blur(20px);\r\n  -webkit-backdrop-filter: blur(20px);\r\n  border-bottom-color: var(--border-sub);\r\n}\r\n\r\n.nav-logo {\r\n  font-family: 'Cormorant Garamond', serif;\r\n  font-size: 0.95rem;\r\n  font-weight: 400;\r\n  letter-spacing: 0.22em;\r\n  text-transform: uppercase;\r\n  color: var(--sand-light);\r\n  text-decoration: none;\r\n  transition: color 0.3s;\r\n}\r\n.nav-logo:hover { color: var(--earth-pale); }\r\n\r\n.nav-links {\r\n  display: flex; gap: 44px; list-style: none;\r\n}\r\n.nav-links a {\r\n  font-size: 0.62rem;\r\n  letter-spacing: 0.22em;\r\n  text-transform: uppercase;\r\n  color: var(--sand);\r\n  text-decoration: none;\r\n  opacity: 0.6;\r\n  transition: opacity 0.3s;\r\n  position: relative;\r\n}\r\n.nav-links a::after {\r\n  content: '';\r\n  position: absolute;\r\n  bottom: -4px; left: 0; right: 0;\r\n  height: 1px;\r\n  background: var(--earth);\r\n  transform: scaleX(0);\r\n  transform-origin: left;\r\n  transition: transform 0.4s ease;\r\n}\r\n.nav-links a:hover { opacity: 1; }\r\n.nav-links a:hover::after { transform: scaleX(1); }\r\n\r\n.nav-reserve {\r\n  font-size: 0.6rem;\r\n  letter-spacing: 0.2em;\r\n  text-transform: uppercase;\r\n  color: var(--earth);\r\n  text-decoration: none;\r\n  border: 1px solid var(--border);\r\n  padding: 9px 20px;\r\n  transition: all 0.3s;\r\n}\r\n.nav-reserve:hover {\r\n  background: var(--earth);\r\n  color: var(--ink);\r\n  border-color: var(--earth);\r\n}\r\n\r\n\/* hamburger mobile *\/\r\n.nav-burger {\r\n  display: none;\r\n  flex-direction: column;\r\n  gap: 5px;\r\n  cursor: pointer;\r\n  padding: 4px;\r\n}\r\n.nav-burger span {\r\n  width: 24px; height: 1px;\r\n  background: var(--sand);\r\n  display: block;\r\n  transition: all 0.3s;\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   HERO \u2014 SCREEN 1\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#hero {\r\n  position: relative;\r\n  height: 100vh;\r\n  min-height: 640px;\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: flex-end;\r\n  overflow: hidden;\r\n}\r\n\r\n.hero-bg {\r\n  position: absolute; inset: 0;\r\n  background-image: url('https:\/\/houseinthekasbah.com\/wp-content\/uploads\/B3A49FE2-7FFC-4547-8700-2F1615403FC3_1_105_c.jpeg');\r\n  \r\n    \/* \u2593\u2593\u2593 PLACEHOLDER \u2014 remplacer par : background-image: url('images\/hero.jpg'); \u2593\u2593\u2593 *\/\r\n    linear-gradient(165deg, #2c2218 0%, #4a3a2a 25%, #6e5a42 55%, #8a7258 75%, #5e4e3a 100%);\r\n  background-size: cover;\r\n  background-position: center 80%;\r\n  transform: scale(1.06);\r\n  animation: heroKenBurns 10s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;\r\n}\r\n\r\n@keyframes heroKenBurns {\r\n  from { transform: scale(1.06); }\r\n  to   { transform: scale(1); }\r\n}\r\n\r\n\/* grain texture overlay *\/\r\n.hero-bg::after {\r\n  content: '';\r\n  position: absolute; inset: 0;\r\n  background-image: url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'\/%3E%3C\/svg%3E\");\r\n  pointer-events: none;\r\n  opacity: 0.4;\r\n}\r\n\r\n.hero-content {\r\n  position: relative;\r\n  z-index: 2;\r\n  padding: 0 52px 90px;\r\n  animation: fadeSlideUp 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;\r\n}\r\n\r\n.hero-eyebrow {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 16px;\r\n  margin-bottom: 24px;\r\n}\r\n.hero-eyebrow-line {\r\n  width: 32px; height: 1px;\r\n  background: var(--earth);\r\n  flex-shrink: 0;\r\n}\r\n.hero-eyebrow-text {\r\n  font-size: 0.6rem;\r\n  letter-spacing: 0.3em;\r\n  text-transform: uppercase;\r\n  color: var(--earth-pale);\r\n}\r\n\r\n.hero-h1 {\r\n  font-family: 'Cormorant Garamond', serif;\r\n  font-size: clamp(3.2rem, 7vw, 6.5rem);\r\n  font-weight: 300;\r\n  line-height: 0.96;\r\n  color: var(--white);\r\n  margin-bottom: 100px;\r\n}\r\n.hero-h1 em {\r\n  font-style: italic;\r\n  color: var(--earth-pale);\r\n  display: block;\r\n}\r\n\r\n.hero-caption {\r\n  font-size: 0.65rem;\r\n  letter-spacing: 0.24em;\r\n  text-transform: uppercase;\r\n  color: var(--sand);\r\n  opacity: 0.55;\r\n}\r\n\r\n\/* scroll indicator *\/\r\n.hero-scroll {\r\n  position: absolute;\r\n  bottom: 40px; right: 52px;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  gap: 10px;\r\n  z-index: 2;\r\n  opacity: 0.5;\r\n  animation: fadeSlideUp 1.4s cubic-bezier(0.16, 1, 0.3, 1) 1s both;\r\n}\r\n.hero-scroll span {\r\n  font-size: 0.54rem;\r\n  letter-spacing: 0.28em;\r\n  text-transform: uppercase;\r\n  color: var(--sand);\r\n  writing-mode: vertical-rl;\r\n}\r\n.hero-scroll-line {\r\n  width: 1px; height: 44px;\r\n  background: linear-gradient(to bottom, var(--earth), transparent);\r\n  animation: scrollPulse 2s ease-in-out infinite;\r\n}\r\n@keyframes scrollPulse {\r\n  0%, 100% { transform: scaleY(1); opacity: 0.5; }\r\n  50% { transform: scaleY(0.6); opacity: 0.2; }\r\n}\r\n\r\n\/* CTA fixe flottant *\/\r\n.floating-cta {\r\n  position: fixed;\r\n  bottom: 36px; right: 44px;\r\n  z-index: 400;\r\n  opacity: 0;\r\n  transform: translateY(12px);\r\n  transition: opacity 0.5s ease, transform 0.5s ease;\r\n  pointer-events: none;\r\n}\r\n.floating-cta.show {\r\n  opacity: 1;\r\n  transform: translateY(0);\r\n  pointer-events: all;\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   BOUTONS GLOBAUX\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.btn {\r\n  display: inline-block;\r\n  font-family: 'Raleway', sans-serif;\r\n  font-size: 0.62rem;\r\n  font-weight: 400;\r\n  letter-spacing: 0.24em;\r\n  text-transform: uppercase;\r\n  text-decoration: none;\r\n  transition: all 0.35s ease;\r\n  cursor: pointer;\r\n  border: none;\r\n  background: none;\r\n}\r\n.btn-gold {\r\n  padding: 15px 36px;\r\n  background: var(--earth);\r\n  color: var(--ink);\r\n}\r\n.btn-gold:hover {\r\n  background: var(--earth-pale);\r\n  transform: translateY(-2px);\r\n  box-shadow: 0 8px 24px rgba(184,154,110,0.25);\r\n}\r\n.btn-outline {\r\n  padding: 14px 34px;\r\n  border: 1px solid var(--earth);\r\n  color: var(--earth-pale);\r\n}\r\n.btn-outline:hover {\r\n  background: var(--earth);\r\n  color: var(--ink);\r\n  transform: translateY(-2px);\r\n}\r\n.btn-outline-white {\r\n  padding: 14px 34px;\r\n  border: 1px solid rgba(247,243,238,0.4);\r\n  color: var(--white);\r\n}\r\n.btn-outline-white:hover {\r\n  background: rgba(247,243,238,0.1);\r\n  border-color: var(--white);\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   REVEAL ANIMATIONS\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.reveal {\r\n  opacity: 0;\r\n  transform: translateY(28px);\r\n  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),\r\n              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);\r\n}\r\n.reveal.in { opacity: 1; transform: translateY(0); }\r\n.reveal-d1 { transition-delay: 0.1s; }\r\n.reveal-d2 { transition-delay: 0.22s; }\r\n.reveal-d3 { transition-delay: 0.38s; }\r\n.reveal-d4 { transition-delay: 0.52s; }\r\n\r\n@keyframes fadeSlideUp {\r\n  from { opacity: 0; transform: translateY(32px); }\r\n  to   { opacity: 1; transform: translateY(0); }\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   SEPARATEUR\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.sep {\r\n  width: 40px; height: 1px;\r\n  background: var(--earth);\r\n  opacity: 0.5;\r\n}\r\n.sep-center { margin: 0 auto; }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   SCREEN 2 \u2014 \u00c9MOTION\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#emotion {\r\n  padding: 130px 52px 120px;\r\n  max-width: 880px;\r\n  margin: 0 auto;\r\n  text-align: center;\r\n}\r\n\r\n.emotion-quote {\r\n  font-family: 'Cormorant Garamond', serif;\r\n  font-size: clamp(1.7rem, 3.8vw, 3rem);\r\n  font-weight: 300;\r\n  font-style: italic;\r\n  line-height: 1.45;\r\n  color: var(--sand-light);\r\n  margin-bottom: 44px;\r\n}\r\n\r\n.emotion-tagline {\r\n  font-size: 0.68rem;\r\n  letter-spacing: 0.26em;\r\n  text-transform: uppercase;\r\n  color: var(--muted);\r\n  margin-top: 36px;\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   SCREEN 3 \u2014 GALERIE\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#galerie {\r\n  padding: 20px 52px 110px;\r\n}\r\n.galerie-header {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: baseline;\r\n  margin-bottom: 28px;\r\n}\r\n.galerie-label {\r\n  font-size: 0.58rem;\r\n  letter-spacing: 0.3em;\r\n  text-transform: uppercase;\r\n  color: var(--earth);\r\n}\r\n.galerie-hint {\r\n  font-size: 0.58rem;\r\n  letter-spacing: 0.15em;\r\n  color: var(--muted);\r\n  opacity: 0.6;\r\n}\r\n\r\n.galerie-track {\r\n  display: flex;\r\n  gap: 12px;\r\n  overflow-x: auto;\r\n  scrollbar-width: none;\r\n  cursor: grab;\r\n  -webkit-overflow-scrolling: touch;\r\n  user-select: none;\r\n}\r\n.galerie-track::-webkit-scrollbar { display: none; }\r\n.galerie-track.grabbing { cursor: grabbing; }\r\n\r\n.gal-item {\r\n  flex-shrink: 0;\r\n  position: relative;\r\n  overflow: hidden;\r\n}\r\n.gal-item:nth-child(1) { width: clamp(280px, 42vw, 560px); height: clamp(320px, 60vh, 620px); }\r\n.gal-item:nth-child(2) { width: clamp(200px, 28vw, 380px); height: clamp(320px, 60vh, 620px); }\r\n.gal-item:nth-child(3) { width: clamp(240px, 35vw, 460px); height: clamp(320px, 60vh, 620px); }\r\n.gal-item:nth-child(4) { width: clamp(180px, 25vw, 340px); height: clamp(320px, 60vh, 620px); }\r\n\r\n.gal-img {\r\n  width: 100%; height: 100%;\r\n  display: block;\r\n  transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n  \/* \u2593\u2593\u2593 PLACEHOLDER couleur \u2014 remplacer par <img> \u2593\u2593\u2593 *\/\r\n}\r\n.gal-item:nth-child(1) .gal-img { background: linear-gradient(160deg,#2e2418 0%,#5a4634 40%,#8a7258 80%,#a0886e 100%); }\r\n.gal-item:nth-child(2) .gal-img { background: linear-gradient(160deg,#221e18 0%,#42382c 40%,#6a5e50 80%,#8a7a6a 100%); }\r\n.gal-item:nth-child(3) .gal-img { background: linear-gradient(160deg,#1e1a14 0%,#3c3228 40%,#5e5246 80%,#7a6e60 100%); }\r\n.gal-item:nth-child(4) .gal-img { background: linear-gradient(160deg,#281e16 0%,#4a3c2e 40%,#6e6050 80%,#8c7e6e 100%); }\r\n\r\n.gal-item:hover .gal-img { transform: scale(1.05); }\r\n\r\n.gal-caption {\r\n  position: absolute;\r\n  bottom: 16px; left: 18px;\r\n  font-size: 0.56rem;\r\n  letter-spacing: 0.22em;\r\n  text-transform: uppercase;\r\n  color: var(--sand);\r\n  opacity: 0.7;\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   SCREEN 4 \u2014 LES SUITES\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#suites {\r\n  padding: 100px 52px;\r\n  border-top: 1px solid var(--border-sub);\r\n}\r\n\r\n.section-header {\r\n  margin-bottom: 64px;\r\n    padding-left: 60px;  \/* Tu valor para la IZQUIERDA *\/\r\n    padding-right: 40px; \/* Tu valor para la DERECHA *\/\r\n}\r\n.section-eyebrow {\r\n  font-size: 0.58rem;\r\n  letter-spacing: 0.3em;\r\n  text-transform: uppercase;\r\n  color: var(--earth);\r\n  display: block;\r\n  margin-bottom: 16px;\r\n}\r\n.section-title {\r\n  font-family: 'Cormorant Garamond', serif;\r\n  font-size: clamp(2rem, 4vw, 3.4rem);\r\n  font-weight: 300;\r\n  line-height: 1.1;\r\n  color: var(--sand-light);\r\n}\r\n\r\n.suites-grid {\r\n  display: grid;\r\n  grid-template-columns: 1fr 1fr;\r\n  gap: 3px;\r\n}\r\n\r\n.suite-card {\r\n  position: relative;\r\n  display: block;\r\n  overflow: hidden;\r\n  text-decoration: none;\r\n  height: clamp(480px, 72vh, 780px);\r\n}\r\n\r\n.suite-bg {\r\n  width: 100%;\r\n  height: 100%;\r\n  display: block;\r\n  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n  background-size: cover;\r\n  background-position: center;\r\n  background-repeat: no-repeat;\r\n  position: absolute !important;\r\n  transform: scale(1.1);\r\n  top: 0;\r\n  left: 0;\r\n\r\n  \/* \u2593\u2593\u2593 PLACEHOLDER \u2014 remplacer par <img> \u2593\u2593\u2593 *\/\r\n}\r\n.suite-card:nth-child(1) .suite-bg {\r\n  background-image: url('https:\/\/houseinthekasbah.com\/wp-content\/uploads\/BBD4292C-3CDE-4B6F-B713-E392E869ECD6.jpeg');\r\n \r\n}\r\n.suite-card:nth-child(2) .suite-bg {\r\n  background-image: url('https:\/\/houseinthekasbah.com\/wp-content\/uploads\/la-chambre-principale-le-lit.webp');\r\n  \r\n}\r\n.suite-card:hover .suite-bg { transform: scale(1.05); }\r\n\r\n.suite-overlay {\r\n  position: absolute; inset: 0;\r\n  background: linear-gradient(to top,\r\n    rgba(20,18,16,0.95) 0%,\r\n    rgba(20,18,16,0.4) 45%,\r\n    rgba(20,18,16,0.05) 100%\r\n  );\r\n  transition: background 0.5s ease;\r\n}\r\n.suite-card:hover .suite-overlay {\r\n  background: linear-gradient(to top,\r\n    rgba(20,18,16,0.98) 0%,\r\n    rgba(20,18,16,0.5) 50%,\r\n    rgba(20,18,16,0.1) 100%\r\n  );\r\n}\r\n\r\n.suite-body {\r\n  position: absolute;\r\n  bottom: 0; left: 0; right: 0;\r\n  padding: 44px 44px 48px;\r\n  transition: transform 0.5s ease;\r\n}\r\n\r\n.suite-num {\r\n  font-family: 'Cormorant Garamond', serif;\r\n  font-size: 0.72rem;\r\n  letter-spacing: 0.3em;\r\n  color: var(--earth);\r\n  display: block;\r\n  margin-bottom: 10px;\r\n}\r\n.suite-name {\r\n  font-family: 'Cormorant Garamond', serif;\r\n  font-size: clamp(1.8rem, 3vw, 2.6rem);\r\n  font-weight: 300;\r\n  color: var(--white);\r\n  line-height: 1.1;\r\n  margin-bottom: 20px;\r\n}\r\n.suite-features {\r\n  list-style: none;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 6px;\r\n  margin-bottom: 32px;\r\n}\r\n.suite-features li {\r\n  font-size: 0.64rem;\r\n  letter-spacing: 0.12em;\r\n  color: var(--sand);\r\n  opacity: 0.7;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 10px;\r\n}\r\n.suite-features li::before {\r\n  content: '';\r\n  width: 18px; height: 1px;\r\n  background: var(--earth);\r\n  flex-shrink: 0;\r\n  opacity: 0.7;\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   SCREEN 5 \u2014 LOCALISATION\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#localisation {\r\n  display: grid;\r\n  grid-template-columns: 1fr 1fr;\r\n  min-height: 70vh;\r\n  border-top: 1px solid var(--border-sub);\r\n}\r\n\r\n.loc-content {\r\n  padding: 100px 64px;\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: center;\r\n}\r\n\r\n.loc-title {\r\n  font-family: 'Cormorant Garamond', serif;\r\n  font-size: clamp(2rem, 3.8vw, 3.2rem);\r\n  font-weight: 300;\r\n  line-height: 1.15;\r\n  margin-bottom: 12px;\r\n  color: var(--sand-light);\r\n}\r\n.loc-city {\r\n  font-size: 0.6rem;\r\n  letter-spacing: 0.28em;\r\n  text-transform: uppercase;\r\n  color: var(--muted);\r\n  margin-bottom: 56px;\r\n}\r\n\r\n.loc-distances {\r\n  display: grid;\r\n  grid-template-columns: 1fr 1fr;\r\n  gap: 36px 24px;\r\n}\r\n.loc-d-item {}\r\n.loc-d-time {\r\n  font-family: 'Cormorant Garamond', serif;\r\n  font-size: 2.4rem;\r\n  font-weight: 300;\r\n  color: var(--earth);\r\n  line-height: 1;\r\n  margin-bottom: 6px;\r\n}\r\n.loc-d-name {\r\n  font-size: 0.6rem;\r\n  letter-spacing: 0.16em;\r\n  text-transform: uppercase;\r\n  color: var(--muted);\r\n}\r\n\r\n.loc-visual {\r\n  position: relative;\r\n  overflow: hidden;\r\n}\r\n.loc-img {\r\n  width: 100%; height: 100%;\r\n  display: block;\r\n  transition: transform 0.8s ease;\r\n  background-size: cover;\r\n  background-position: center;\r\n  \/* \u2593\u2593\u2593 PLACEHOLDER \u2593\u2593\u2593 *\/\r\n background-image: url('https:\/\/houseinthekasbah.com\/wp-content\/uploads\/209A9E28-F307-4F08-8D6F-97A266F14652_1_201_a.jpeg');\r\n}\r\n.loc-visual:hover .loc-img { transform: scale(1.03); }\r\n\r\n.loc-tag {\r\n  position: absolute;\r\n  top: 32px; left: 32px;\r\n  background: rgba(20,18,16,0.75);\r\n  backdrop-filter: blur(12px);\r\n  border: 1px solid var(--border);\r\n  padding: 14px 20px;\r\n}\r\n.loc-tag-city {\r\n  font-family: 'Cormorant Garamond', serif;\r\n  font-size: 1rem;\r\n  font-style: italic;\r\n  color: var(--sand-light);\r\n  display: block;\r\n  margin-bottom: 3px;\r\n}\r\n.loc-tag-sub {\r\n  font-size: 0.52rem;\r\n  letter-spacing: 0.22em;\r\n  text-transform: uppercase;\r\n  color: var(--muted);\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   SCREEN 6 \u2014 EXP\u00c9RIENCE VILLE\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#ville {\r\n  padding: 120px 52px;\r\n  background: var(--cream);\r\n  color: var(--ink-soft);\r\n  text-align: center;\r\n  position: relative;\r\n  overflow: hidden;\r\n}\r\n#ville::before {\r\n  content: 'TANGER';\r\n  position: absolute;\r\n  top: 50%; left: 50%;\r\n  transform: translate(-50%, -50%);\r\n  font-family: 'Cormorant Garamond', serif;\r\n  font-size: clamp(6rem, 18vw, 16rem);\r\n  font-weight: 300;\r\n  color: var(--ink-soft);\r\n  opacity: 0.04;\r\n  letter-spacing: 0.3em;\r\n  pointer-events: none;\r\n  white-space: nowrap;\r\n}\r\n.ville-quote {\r\n  font-family: 'Cormorant Garamond', serif;\r\n  font-size: clamp(1.6rem, 3.4vw, 2.8rem);\r\n  font-weight: 300;\r\n  line-height: 1.4;\r\n  color: var(--ink);\r\n  position: relative;\r\n}\r\n.ville-sub {\r\n  margin-top: 28px;\r\n  font-size: 0.62rem;\r\n  letter-spacing: 0.24em;\r\n  text-transform: uppercase;\r\n  color: var(--earth-dark, #8a6f50);\r\n  position: relative;\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   SCREENS 7-9 \u2014 LES 3 USAGES\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#usages { border-top: 1px solid var(--border-sub); }\r\n\r\n.usage {\r\n  display: grid;\r\n  grid-template-columns: 1fr 1fr;\r\n  min-height: 88vh;\r\n  border-bottom: 1px solid var(--border-sub);\r\n}\r\n.usage:nth-child(even) .usage-media { order: 2; }\r\n.usage:nth-child(even) .usage-body  { order: 1; }\r\n\r\n.usage-media {\r\n  position: relative;\r\n  overflow: hidden;\r\n}\r\n.usage-img {\r\n  width: 100%; height: 100%;\r\n  display: block;\r\n  min-height: 500px;\r\n  transition: transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n  background-size: cover;\r\n  background-position: center;\r\n  \/* \u2593\u2593\u2593 PLACEHOLDER \u2593\u2593\u2593 *\/\r\n}\r\n.usage:nth-child(1) .usage-img { background-image: url('https:\/\/houseinthekasbah.com\/wp-content\/uploads\/1AA274F1-0436-42E9-A1E2-8CBB6BFA2DBA_1_102_a.jpeg'); }\r\n.usage:nth-child(2) .usage-img { background-image: url('https:\/\/houseinthekasbah.com\/wp-content\/uploads\/D842024A-64B5-4807-B6DE-E90FA172895E.webp'); }\r\n.usage:nth-child(3) .usage-img { background-image: url('https:\/\/houseinthekasbah.com\/wp-content\/uploads\/DCD1D84A-98AD-4711-B4CC-ADB1D73DA271_1_201_a.jpeg'); }\r\n.usage:hover .usage-img { transform: scale(1.03); }\r\n\r\n\/* 2. Ajuste exclusivo SOLO para la tercera foto (D\u00eeners) *\/\r\n#usages .usage:nth-of-type(3) .usage-img {\r\n    background-size: cover !important; \r\n    background-position: center center !important; \/* Prioriza ver las velas arriba *\/\r\n    background-color: #141210; \/* Rellena los huecos con el negro de tu web *\/\r\n}\r\n.usage-body {\r\n  padding: 80px 70px;\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: center;\r\n}\r\n\r\n.usage-index {\r\n  font-family: 'Cormorant Garamond', serif;\r\n  font-size: 4.5rem;\r\n  font-weight: 300;\r\n  color: rgba(184,154,110,0.12);\r\n  line-height: 1;\r\n  margin-bottom: 28px;\r\n  display: block;\r\n}\r\n.usage-picto {\r\n  font-size: 1.3rem;\r\n  margin-bottom: 18px;\r\n  display: block;\r\n}\r\n.usage-title {\r\n  font-family: 'Cormorant Garamond', serif;\r\n  font-size: clamp(2rem, 3.2vw, 2.8rem);\r\n  font-weight: 300;\r\n  line-height: 1.12;\r\n  color: var(--sand-light);\r\n  margin-bottom: 24px;\r\n}\r\n.usage-text {\r\n  font-size: 0.76rem;\r\n  line-height: 1.9;\r\n  color: var(--muted);\r\n  max-width: 380px;\r\n  margin-bottom: 10px;\r\n}\r\n.usage-trigger {\r\n  font-size: 0.64rem;\r\n  font-style: italic;\r\n  color: var(--earth-pale);\r\n  margin-bottom: 36px;\r\n  opacity: 0.85;\r\n}\r\n.usage-urgency {\r\n  font-size: 0.58rem;\r\n  letter-spacing: 0.14em;\r\n  text-transform: uppercase;\r\n  color: var(--muted);\r\n  opacity: 0.55;\r\n  margin-top: 14px;\r\n}\r\n\r\n\/* Formulaire shooting *\/\r\n.shoot-form-wrap {\r\n  max-height: 0;\r\n  overflow: hidden;\r\n  transition: max-height 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s;\r\n  opacity: 0;\r\n}\r\n.shoot-form-wrap.open {\r\n  max-height: 600px;\r\n  opacity: 1;\r\n}\r\n.shoot-form {\r\n  margin-top: 28px;\r\n  padding: 28px;\r\n  border: 1px solid var(--border);\r\n  background: rgba(255,255,255,0.025);\r\n}\r\n.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }\r\n.form-group {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 7px;\r\n  margin-bottom: 16px;\r\n}\r\n.form-group label {\r\n  font-size: 0.54rem;\r\n  letter-spacing: 0.22em;\r\n  text-transform: uppercase;\r\n  color: var(--muted);\r\n}\r\n.form-group input,\r\n.form-group select,\r\n.form-group textarea {\r\n  background: transparent;\r\n  border: none;\r\n  border-bottom: 1px solid var(--border);\r\n  padding: 10px 0;\r\n  color: var(--sand);\r\n  font-family: 'Raleway', sans-serif;\r\n  font-size: 0.78rem;\r\n  font-weight: 300;\r\n  outline: none;\r\n  transition: border-color 0.3s;\r\n  -webkit-appearance: none;\r\n}\r\n.form-group input::placeholder,\r\n.form-group textarea::placeholder { color: var(--muted); opacity: 0.45; }\r\n.form-group input:focus,\r\n.form-group select:focus,\r\n.form-group textarea:focus { border-bottom-color: var(--earth); }\r\n.form-group select option { background: #1e1b18; color: var(--sand); }\r\n.form-group textarea { resize: none; height: 72px; }\r\n\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   SECTION NOS ADRESSES 9.1\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#adresses {\r\n    padding: 120px 52px;\r\n    background: var(--ink);\r\n    border-top: 1px solid var(--border-sub);\r\n}\r\n\r\n.adresses-header {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: baseline;\r\n    margin-bottom: 60px;\r\n}\r\n\r\n.adresses-header h2 {\r\n    font-family: 'Cormorant Garamond', serif;\r\n    font-size: clamp(2.5rem, 5vw, 4rem);\r\n    font-weight: 300;\r\n    font-style: italic;\r\n    color: var(--sand-light);\r\n}\r\n\r\n.adresses-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(3, 1fr);\r\n    gap: 30px;\r\n}\r\n\r\n.adresse-card {\r\n    border: 1px solid var(--border-sub);\r\n    padding: 40px;\r\n    display: flex;\r\n    flex-direction: column;\r\n    height: 100%;\r\n    transition: border-color 0.4s ease;\r\n}\r\n\r\n.adresse-card:hover {\r\n    border-color: var(--earth);\r\n}\r\n\r\n.adresse-cat {\r\n    font-size: 0.55rem;\r\n    letter-spacing: 0.3em;\r\n    text-transform: uppercase;\r\n    color: var(--earth);\r\n    margin-bottom: 30px;\r\n    display: block;\r\n}\r\n\r\n.adresse-name {\r\n    font-family: 'Cormorant Garamond', serif;\r\n    font-size: 2.2rem;\r\n    font-weight: 300;\r\n    font-style: italic;\r\n    color: var(--white);\r\n    margin-bottom: 20px;\r\n}\r\n\r\n.adresse-text {\r\n    font-size: 0.8rem;\r\n    line-height: 1.8;\r\n    color: var(--muted);\r\n    margin-bottom: 40px;\r\n    flex-grow: 1;\r\n}\r\n\r\n.adresse-link {\r\n    font-size: 0.6rem;\r\n    letter-spacing: 0.2em;\r\n    text-transform: uppercase;\r\n    color: var(--sand);\r\n    text-decoration: none;\r\n    opacity: 0.6;\r\n    transition: opacity 0.3s;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n}\r\n\r\n.adresse-link:hover {\r\n    opacity: 1;\r\n    color: var(--earth-pale);\r\n}\r\n\r\n@media (max-width: 900px) {\r\n    .adresses-grid { grid-template-columns: 1fr; }\r\n    #adresses { padding: 80px 28px; }\r\n}\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   SCREEN 10 \u2014 UNIVERS\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#univers {\r\n  padding: 140px 52px;\r\n  text-align: center;\r\n  border-top: 1px solid var(--border-sub);\r\n  position: relative;\r\n  overflow: hidden;\r\n  background-image: url('https:\/\/houseinthekasbah.com\/wp-content\/uploads\/F722FD72-AA2F-4CBE-94CD-D5269624D5B4_1_201_a.jpeg');\r\n  background-size: cover;\r\n  background-position: bottom center;\r\n  min-height: 70vh;\r\n}\r\n#univers::before {\r\n  content: '';\r\n  position: absolute;\r\n  top: 50%; left: 50%;\r\n  transform: translate(-50%, -50%);\r\n  width: 600px; height: 600px;\r\n  background: radial-gradient(circle, rgba(184,154,110,0.07) 0%, transparent 65%);\r\n  pointer-events: none;\r\n}\r\n.univers-title {\r\n  font-family: 'Cormorant Garamond', serif;\r\n  font-size: clamp(2.2rem, 5.5vw, 4.4rem);\r\n  font-weight: 300;\r\n  font-style: italic;\r\n  line-height: 1.2;\r\n  color: var(--sand-light);\r\n  margin-bottom: 28px;\r\n  position: relative;\r\n}\r\n.univers-body {\r\n  font-size: 0.7rem;\r\n  letter-spacing: 0.18em;\r\n  text-transform: uppercase;\r\n  color: var(--muted);\r\n  position: relative;\r\n  line-height: 2;\r\n}\r\n#shooting {\r\n    scroll-margin-top: 50px; \/* Esto deja un espacio para que el men\u00fa no tape el contenido *\/\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   SCREEN 11 \u2014 LIENS DISCRETS\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#liens {\r\n  padding: 56px 52px;\r\n  border-top: 1px solid var(--border-sub);\r\n  display: flex;\r\n  justify-content: center;\r\n  gap: 60px;\r\n  flex-wrap: wrap;\r\n}\r\n.lien {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  gap: 7px;\r\n  text-decoration: none;\r\n  opacity: 0.45;\r\n  transition: opacity 0.4s;\r\n}\r\n.lien:hover { opacity: 1; }\r\n.lien-cat {\r\n  font-size: 0.52rem;\r\n  letter-spacing: 0.26em;\r\n  text-transform: uppercase;\r\n  color: var(--muted);\r\n}\r\n.lien-label {\r\n  font-family: 'Cormorant Garamond', serif;\r\n  font-size: 1.1rem;\r\n  font-style: italic;\r\n  color: var(--sand);\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   SCREEN 12 \u2014 CTA FINAL\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#cta-final {\r\n  position: relative;\r\n  padding: 140px 52px;\r\n  text-align: center;\r\n  overflow: hidden;\r\n  background: var(--ink-soft);\r\n  border-top: 1px solid var(--border-sub);\r\n}\r\n.cta-bg {\r\n  position: absolute; inset: 0;\r\n  background-image: url('https:\/\/houseinthekasbah.com\/wp-content\/uploads\/F722FD72-AA2F-4CBE-94CD-D5269624D5B4_1_201_a.jpeg'); \/* <--- Pon aqu\u00ed tu enlace *\/\r\n  background-size: cover;\r\n  background-position: bottom center;\r\n  opacity: 0.8; \/* Ajusta esto si quieres que la foto se vea m\u00e1s o menos oscura *\/\r\n}\r\n.cta-bg::after {\r\n  content: '';\r\n  position: absolute; inset: 0;\r\n  background: rgba(20,18,16,0.55);\r\n}\r\n.cta-content { position: relative; z-index: 1; }\r\n.cta-eyebrow {\r\n  font-size: 0.58rem;\r\n  letter-spacing: 0.3em;\r\n  text-transform: uppercase;\r\n  color: var(--earth-pale);\r\n  opacity: 0.8;\r\n  display: block;\r\n  margin-bottom: 24px;\r\n}\r\n.cta-title {\r\n  font-family: 'Cormorant Garamond', serif;\r\n  font-size: clamp(2.2rem, 5.5vw, 4.2rem);\r\n  font-weight: 300;\r\n  color: var(--white);\r\n  line-height: 1.15;\r\n  margin-bottom: 52px;\r\n}\r\n.cta-btns {\r\n  display: flex;\r\n  gap: 16px;\r\n  justify-content: center;\r\n  flex-wrap: wrap;\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   FOOTER\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\nfooter {\r\n  padding: 44px 52px;\r\n  border-top: 1px solid var(--border-sub);\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  flex-wrap: wrap;\r\n  gap: 20px;\r\n}\r\n.footer-brand {\r\n  font-family: 'Cormorant Garamond', serif;\r\n  font-size: 0.88rem;\r\n  letter-spacing: 0.18em;\r\n  text-transform: uppercase;\r\n  color: var(--sand);\r\n  opacity: 0.45;\r\n}\r\n.footer-nav {\r\n  display: flex; gap: 36px; list-style: none;\r\n}\r\n.footer-nav a {\r\n  font-size: 0.58rem;\r\n  letter-spacing: 0.18em;\r\n  text-transform: uppercase;\r\n  color: var(--muted);\r\n  text-decoration: none;\r\n  transition: color 0.3s;\r\n}\r\n.footer-nav a:hover { color: var(--sand); }\r\n.footer-copy {\r\n  font-size: 0.54rem;\r\n  letter-spacing: 0.1em;\r\n  color: var(--muted);\r\n  opacity: 0.38;\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   RESPONSIVE MOBILE\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n@media (max-width: 900px) {\r\n  nav { padding: 22px 28px; }\r\n  nav.scrolled { padding: 16px 28px; }\r\n  .nav-links, .nav-reserve { display: none; }\r\n  .nav-burger { display: flex; }\r\n\r\n  .hero-content { padding: 0 28px 80px; }\r\n  .hero-scroll { right: 28px; bottom: 28px; }\r\n  .floating-cta { right: 20px; bottom: 20px; }\r\n\r\n  #emotion { padding: 80px 28px; }\r\n  #galerie { padding: 20px 28px 80px; }\r\n  .gal-item:nth-child(1) { width: 78vw; }\r\n  .gal-item:nth-child(2) { width: 62vw; }\r\n  .gal-item:nth-child(3) { width: 70vw; }\r\n  .gal-item:nth-child(4) { width: 58vw; }\r\n\r\n  #suites { padding: 80px 28px; }\r\n  .suites-grid { grid-template-columns: 1fr; gap: 3px; }\r\n  .suite-card { height: clamp(400px, 70vh, 580px); }\r\n\r\n  #localisation { grid-template-columns: 1fr; }\r\n  .loc-content { padding: 80px 28px; }\r\n  .loc-visual { height: 300px; }\r\n\r\n  #ville { padding: 80px 28px; }\r\n\r\n  .usage { grid-template-columns: 1fr; min-height: auto; }\r\n  .usage:nth-child(even) .usage-media { order: 0; }\r\n  .usage:nth-child(even) .usage-body  { order: 1; }\r\n  .usage-img { min-height: 55vw; }\r\n  .usage-body { padding: 52px 28px; }\r\n  .form-row { grid-template-columns: 1fr; }\r\n\r\n  #univers { padding: 80px 28px; }\r\n  #liens { gap: 36px; padding: 48px 28px; }\r\n  #cta-final { padding: 80px 28px; }\r\n  footer { padding: 32px 28px; flex-direction: column; align-items: flex-start; }\r\n  .footer-nav { flex-wrap: wrap; gap: 20px; }\r\n}\r\n\r\n\/* mobile nav panel *\/\r\n.mobile-nav {\r\n  position: fixed;\r\n  inset: 0;\r\n  background: rgba(20,18,16,0.97);\r\n  backdrop-filter: blur(20px);\r\n  z-index: 450;\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 44px;\r\n  opacity: 0;\r\n  pointer-events: none;\r\n  transition: opacity 0.4s;\r\n}\r\n.mobile-nav.open { opacity: 1; pointer-events: all; }\r\n.mobile-nav a {\r\n  font-family: 'Cormorant Garamond', serif;\r\n  font-size: 2.2rem;\r\n  font-weight: 300;\r\n  font-style: italic;\r\n  color: var(--sand-light);\r\n  text-decoration: none;\r\n  opacity: 0.8;\r\n  transition: opacity 0.3s, color 0.3s;\r\n}\r\n.mobile-nav a:hover { opacity: 1; color: var(--earth-pale); }\r\n.mobile-nav-close {\r\n  position: absolute;\r\n  top: 26px; right: 30px;\r\n  font-size: 0.6rem;\r\n  letter-spacing: 0.2em;\r\n  text-transform: uppercase;\r\n  color: var(--muted);\r\n  cursor: pointer;\r\n  background: none;\r\n  border: none;\r\n}\r\n\r\n\/* Forzar la desaparici\u00f3n del icono de CookieYes *\/\r\n#cky-revisit-consent, \r\n.cky-revisit-consent,\r\n.cky-revisit-bottom-left {\r\n    display: none !important;\r\n    opacity: 0 !important;\r\n    visibility: hidden !important;\r\n    pointer-events: none !important;\r\n}\r\n\r\n\/* AJUSTE PARA M\u00d3VILES *\/\r\n@media (max-width: 768px) {\r\n    #adresses {\r\n        padding: 60px 20px !important; \/* Menos margen en los lados *\/\r\n    }\r\n\r\n    .adresses-grid {\r\n        display: flex !important;\r\n        flex-direction: column !important; \/* Tarjetas una debajo de otra *\/\r\n        gap: 20px !important;\r\n    }\r\n\r\n    .adresse-card {\r\n        padding: 30px 20px !important; \/* Tarjetas m\u00e1s compactas *\/\r\n    }\r\n\r\n    .adresses-header {\r\n        flex-direction: column !important;\r\n        align-items: flex-start !important;\r\n        gap: 10px;\r\n        margin-bottom: 40px;\r\n    }\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<!-- Custom cursor (desktop only) -->\r\n<div class=\"cursor\" id=\"cursor\"><\/div>\r\n<div class=\"cursor-ring\" id=\"cursorRing\"><\/div>\r\n\r\n<!-- Mobile nav -->\r\n<div class=\"mobile-nav\" id=\"mobileNav\">\r\n  <button class=\"mobile-nav-close\" onclick=\"closeMobileNav()\">Fermer \u2715<\/button>\r\n  <a href=\"#suites\" onclick=\"closeMobileNav()\">Suites<\/a>\r\n  <a href=\"#usages\" onclick=\"closeMobileNav()\">S\u00e9jour & Cr\u00e9ation<\/a>\r\n  <a href=\"#localisation\" onclick=\"closeMobileNav()\">Tanger<\/a>\r\n  <a href=\"#\" class=\"trigger-reservas\" onclick=\"closeMobileNav()\">R\u00e9server<\/a>\r\n<\/div>\r\n\r\n<!-- \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n     NAVIGATION\r\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n<nav id=\"navbar\">\r\n  <a href=\"https:\/\/houseinthekasbah.com\/fr\/\" class=\"nav-logo\">House in the Kasbah<\/a>\r\n  <ul class=\"nav-links\">\r\n    <li><a href=\"#suites\">Suites<\/a><\/li>\r\n    <li><a href=\"#shooting\">Shooting & D\u00eeners<\/a><\/li>\r\n    <li><a href=\"#localisation\">Tanger<\/a><\/li>\r\n  <\/ul>\r\n  \r\n  <a href=\"#\" class=\"nav-reserve btn trigger-reservas\">R\u00e9server<\/a>\r\n  \r\n  <div class=\"nav-burger\" onclick=\"openMobileNav()\" aria-label=\"Menu\">\r\n    <span><\/span><span><\/span><span><\/span>\r\n  <\/div>\r\n<\/nav>\r\n\r\n<a href=\"#\" class=\"floating-cta btn btn-gold trigger-reservas\" id=\"floatingCta\">\r\n  Voir les suites \u2192\r\n<\/a>\r\n\r\n<script>\r\ndocument.addEventListener('click', function(event) {\r\n  \/\/ Buscamos si lo que ha tocado el usuario es un enlace que contiene la palabra exacta\r\n  const link = event.target.closest('a');\r\n  \r\n  if (link && link.textContent.trim() === 'R\u00e9server') {\r\n    \/\/ Si el enlace que han tocado NO es el principal de escritorio, tomamos el control\r\n    if (!link.classList.contains('trigger-reservas')) {\r\n      \r\n      \/\/ 1. Frenamos la acci\u00f3n normal del enlace m\u00f3vil\r\n      event.preventDefault();\r\n      \r\n      \/\/ 2. Buscamos el bot\u00f3n de escritorio que sabemos que Elementor controla perfectamente\r\n      const botonEscritorio = document.querySelector('nav#navbar .nav-reserve.trigger-reservas');\r\n      \r\n      if (botonEscritorio) {\r\n        \/\/ 3. Le hacemos un clic por c\u00f3digo para que salte el popup en la pantalla\r\n        botonEscritorio.click();\r\n      }\r\n    }\r\n  }\r\n});\r\n<\/script>\r\n\r\n<!-- \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n     SCREEN 1 \u2014 HERO\r\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n<section id=\"hero\">\r\n  <!--\r\n  \u2554\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2557\r\n  \u2551  \ud83d\udcf8 GUIDE PHOTO \u2014 IMAGE HERO (hero.jpg)                      \u2551\r\n  \u2551                                                              \u2551\r\n  \u2551  QUOI PHOTOGRAPHIER :                                        \u2551\r\n  \u2551  Vue panoramique depuis la terrasse ou fen\u00eatre haute.        \u2551\r\n  \u2551  Horizon mer + toits blancs Kasbah en premier plan.          \u2551\r\nhttps:\/\/wouf.com\/collections\/tote-bags  \u2551  Si possible : incluez un d\u00e9tail architectural (arche,       \u2551\r\n  \u2551  rambarde, claustra) pour cr\u00e9er de la profondeur.            \u2551\r\n  \u2551                                                              \u2551\r\n  \u2551  LUMI\u00c8RE : Heure dor\u00e9e (1h avant coucher soleil)             \u2551\r\n  \u2551  ou heure bleue (20 min apr\u00e8s coucher).                      \u2551\r\n  \u2551  \u00c9VITER : midi, lumi\u00e8re plate, ciel blanc.                   \u2551\r\n  \u2551                                                              \u2551\r\n  \u2551  FORMAT : 3:2 paysage \u00b7 min 2400\u00d71600px \u00b7 JPEG optimis\u00e9      \u2551\r\n  \u2551  FICHIER : images\/hero.jpg                                   \u2551\r\n  \u2551                                                              \u2551\r\n  \u2551  COMMENT INT\u00c9GRER :                                          \u2551\r\n  \u2551  Remplacer dans .hero-bg :                                   \u2551\r\n  \u2551  background-image: url('images\/hero.jpg');                   \u2551\r\n  \u2551  (supprimer le gradient placeholder)                         \u2551\r\n  \u255a\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u255d\r\n  -->\r\n  <div class=\"hero-bg\" id=\"heroBg\"><\/div>\r\n  <div class=\"hero-content\">\r\n    <div class=\"hero-eyebrow\">\r\n      <span class=\"hero-eyebrow-line\"><\/span>\r\n      <span class=\"hero-eyebrow-text\">Kasbah de Tanger \u00b7 D\u00e9troit de Gibraltar<\/span>\r\n    <\/div>\r\n    <h1 class=\"hero-h1\">\r\n      Dormir dans<br>\r\n      <em>la Kasbah<\/em>\r\n    <\/h1>\r\n    <p class=\"hero-caption\">Vue sur le d\u00e9troit \u00b7 Deux suites \u00b7 Maison de cr\u00e9ateurs<\/p>\r\n  <\/div>\r\n  <div class=\"hero-scroll\">\r\n    <div class=\"hero-scroll-line\"><\/div>\r\n    <span>D\u00e9couvrir<\/span>\r\n  <\/div>\r\n<\/section>\r\n\r\n<!-- \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n     SCREEN 2 \u2014 \u00c9MOTION\r\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n<section id=\"emotion\">\r\n  <p class=\"emotion-quote reveal\">\r\n    Une maison pos\u00e9e sur la falaise.<br>\r\n    Face \u00e0 la mer, \u00e0 l'Espagne au loin.\r\n  <\/p>\r\n  <div class=\"sep sep-center reveal reveal-d2\"><\/div>\r\n  <p class=\"emotion-tagline reveal reveal-d3\">\r\n    Tanger ne se traverse pas. Elle se ressent.\r\n  <\/p>\r\n<\/section>\r\n\r\n<!-- \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n     SCREEN 3 \u2014 GALERIE\r\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n\r\n \r\n      <!--\r\n      \u2554\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2557\r\n      \u2551  \ud83d\udcf8 GALERIE 1 \u2014 Vue mer \/ d\u00e9troit (galerie-1.jpg)         \u2551\r\n      \u2551  Depuis la terrasse ou fen\u00eatre, pleine mer + horizon.    \u2551\r\n      \u2551  Lumi\u00e8re : matin t\u00f4t (mer calme, lumi\u00e8re rasante)         \u2551\r\n      \u2551  ou coucher soleil (tons chauds).                        \u2551\r\n      \u2551  Orientation : paysage \u00b7 1600\u00d71000px min                 \u2551\r\n      \u2551  <img decoding=\"async\" src=\"images\/galerie-1.jpg\" alt=\"Vue d\u00e9troit\"       \u2551\r\n      \u2551       style=\"width:100%;height:100%;object-fit:cover;\">  \u2551\r\n      \u255a\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u255d\r\n      -->\r\n    \r\n\r\n \r\n      <!--\r\n      \u2554\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2557\r\n      \u2551  \ud83d\udcf8 GALERIE 2 \u2014 Int\u00e9rieur \/ chambre (galerie-2.jpg)       \u2551\r\n      \u2551  Un coin de chambre ou couloir avec lumi\u00e8re naturelle.   \u2551\r\n      \u2551  Montrer les mati\u00e8res : murs textur\u00e9s, tissu, bois.      \u2551\r\n      \u2551  Lumi\u00e8re : naturelle lat\u00e9rale (pas de flash).            \u2551\r\n      \u2551  Orientation : portrait \u00b7 1000\u00d71400px min               \u2551\r\n      \u2551  <img decoding=\"async\" src=\"images\/galerie-2.jpg\" alt=\"Suite\"             \u2551\r\n      \u2551       style=\"width:100%;height:100%;object-fit:cover;\">  \u2551\r\n      \u255a\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u255d\r\n      -->\r\n      \r\n\r\n \r\n      <!--\r\n      \u2554\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2557\r\n      \u2551  \ud83d\udcf8 GALERIE 3 \u2014 Terrasse (galerie-3.jpg)                  \u2551\r\n      \u2551  Vue de la terrasse depuis l'int\u00e9rieur (encadrement      \u2551\r\n      \u2551  d'une porte ou arche). Jeu int\u00e9rieur\/ext\u00e9rieur.         \u2551\r\n      \u2551  Lumi\u00e8re : apr\u00e8s-midi, lumi\u00e8re chaude sur les murs.      \u2551\r\n      \u2551  Orientation : paysage \u00b7 1400\u00d7900px min                  \u2551\r\n      \u2551  <img decoding=\"async\" src=\"images\/galerie-3.jpg\" alt=\"Terrasse\"          \u2551\r\n      \u2551       style=\"width:100%;height:100%;object-fit:cover;\">  \u2551\r\n      \u255a\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u255d\r\n      -->\r\n    \r\n\r\n      <!--\r\n      \u2554\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2557\r\n      \u2551  \ud83d\udcf8 GALERIE 4 \u2014 D\u00e9tail \/ objet (galerie-4.jpg)            \u2551\r\n      \u2551  Un objet choisi, une texture, un d\u00e9tail architectural.  \u2551\r\n      \u2551  Montrer que la maison a \u00e9t\u00e9 curat\u00e9e par des cr\u00e9ateurs.  \u2551\r\n      \u2551  Lumi\u00e8re : naturelle douce, ombre partielle.             \u2551\r\n      \u2551  Orientation : portrait \u00b7 900\u00d71200px min                 \u2551\r\n      \u2551  <img decoding=\"async\" src=\"images\/galerie-4.jpg\" alt=\"D\u00e9tail\"            \u2551\r\n      \u2551       style=\"width:100%;height:100%;object-fit:cover;\">  \u2551\r\n      \u255a\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u255d\r\n      -->\r\n\r\n\r\n<!-- \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n     SCREEN 4 \u2014 LES SUITES\r\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n<section>\r\n  <div class=\"section-header reveal\">\r\n    <span class=\"section-eyebrow\">S\u00e9journer<\/span>\r\n    <h2 class=\"section-title\">Deux suites<\/h2>\r\n  <\/div>\r\n  <div id=\"suites\" class=\"suites-grid\">\r\n\r\n    <a href=\"https:\/\/www.booking.com\/hotel\/ma\/suites-dans-la-kasbah-de-tanger-avec-vue-mer.es.html?label=gen173bo-10CAsojAFCLHN1aXRlcy1kYW5zLWxhLWthc2JhaC1kZS10YW5nZXItYXZlYy12dWUtbWVySDNYA2hNiAEBmAEzuAEHyAEM2AED6AEB-AEBiAIBmAIGqAIBuAKdiYbQBsACAdICJDljYTY2OTlkLTY0NjMtNDkxZS04NjQxLTgyYjNiYTBkNzZmNtgCAeACAQ&amp;sid=1649c520757e6f7845a2ce9b27efe134&amp;keep_landing=1&amp;sb_price_type=total&amp;type=total&amp;\" target=\"_blank\" class=\"suite-card reveal\" rel=\"noopener\">\r\n      <!--\r\n      \u2554\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2557\r\n      \u2551  \ud83d\udcf8 SUITE 1 \u2014 Suite Terrasse (suite-terrasse.jpg)         \u2551\r\n      \u2551  SHOT CLEF : montrer la terrasse + vue mer ensemble.     \u2551\r\n      \u2551  Angle : depuis l'int\u00e9rieur vers la terrasse ouverte,    \u2551\r\n      \u2551  mer visible en arri\u00e8re-plan.                            \u2551\r\n      \u2551  Optionnel : une chaise ou table en terrasse,            \u2551\r\n      \u2551  pas de mise en sc\u00e8ne excessive.                         \u2551\r\n      \u2551  Lumi\u00e8re : matin ou heure dor\u00e9e.                         \u2551\r\n      \u2551  Format : portrait 2:3 \u00b7 1200\u00d71800px min                 \u2551\r\n      \u2551  <img decoding=\"async\" src=\"images\/suite-terrasse.jpg\"                    \u2551\r\n      \u2551       alt=\"Suite avec terrasse \u2013 House in the Kasbah\"    \u2551\r\n      \u2551       style=\"width:100%;height:100%;object-fit:cover;\">  \u2551\r\n      \u255a\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u255d\r\n      -->\r\n      <div class=\"suite-bg\"><\/div>\r\n      <div class=\"suite-overlay\"><\/div>\r\n      <div class=\"suite-body\">\r\n        <span class=\"suite-num\">Suite 01<\/span>\r\n        <h3 class=\"suite-name\">Suite<br>Terrasse<\/h3>\r\n        <ul class=\"suite-features\">\r\n          <li>Terrasse priv\u00e9e<\/li>\r\n          <li>Vue mer et port<\/li>\r\n          <li>Lumi\u00e8re naturelle<\/li>\r\n        <\/ul>\r\n        <span class=\"btn btn-outline\">R\u00e9server<\/span>\r\n      <\/div>\r\n    <\/a>\r\n\r\n    <a href=\"https:\/\/www.booking.com\/hotel\/ma\/suites-dans-la-kasbah-de-tanger-avec-vue-mer.es.html?label=gen173bo-10CAsojAFCLHN1aXRlcy1kYW5zLWxhLWthc2JhaC1kZS10YW5nZXItYXZlYy12dWUtbWVySDNYA2hNiAEBmAEzuAEHyAEM2AED6AEB-AEBiAIBmAIGqAIBuAKdiYbQBsACAdICJDljYTY2OTlkLTY0NjMtNDkxZS04NjQxLTgyYjNiYTBkNzZmNtgCAeACAQ&amp;sid=1649c520757e6f7845a2ce9b27efe134&amp;keep_landing=1&amp;sb_price_type=total&amp;type=total&amp;\" target=\"_blank\" class=\"suite-card reveal reveal-d2\" rel=\"noopener\">\r\n      <!--\r\n      \u2554\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2557\r\n      \u2551  \ud83d\udcf8 SUITE 2 \u2014 Suite Kasbah (suite-kasbah.jpg)             \u2551\r\n      \u2551  SHOT CLEF : ambiance int\u00e9rieure, lumi\u00e8re tamis\u00e9e,       \u2551\r\n      \u2551  architecture (vo\u00fbte, mosa\u00efque, zelliges si pr\u00e9sents).   \u2551\r\n      \u2551  Atmosph\u00e8re calme et feutr\u00e9e \u2014 contraste avec suite 1.   \u2551\r\n      \u2551  Lumi\u00e8re : naturelle douce, stores mi-ferm\u00e9s.            \u2551\r\n      \u2551  Format : portrait 2:3 \u00b7 1200\u00d71800px min                 \u2551\r\n      \u2551  <img decoding=\"async\" src=\"images\/suite-kasbah.jpg\"                      \u2551\r\n      \u2551       alt=\"Suite Kasbah \u2013 House in the Kasbah\"           \u2551\r\n      \u2551       style=\"width:100%;height:100%;object-fit:cover;\">  \u2551\r\n      \u255a\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u255d\r\n      -->\r\n      <div class=\"suite-bg\"><\/div>\r\n      <div class=\"suite-overlay\"><\/div>\r\n      <div class=\"suite-body\">\r\n        <span class=\"suite-num\">Suite 02<\/span>\r\n        <h3 class=\"suite-name\">Suite<br>Kasbah<\/h3>\r\n        <ul class=\"suite-features\">\r\n          <li>Vue d\u00e9troit, port et ville de Tanger Suite familiale<\/li>\r\n          <li>2 chambres et salon Ruelles de la Kasbah \u00e0 vos pieds<\/li>\r\n        <\/ul>\r\n        <span class=\"btn btn-outline\">R\u00e9server<\/span>\r\n      <\/div>\r\n    <\/a>\r\n\r\n  <\/div>\r\n<\/section>\r\n\r\n<!-- \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n     SCREEN 5 \u2014 LOCALISATION\r\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n<section id=\"localisation\">\r\n  <div class=\"loc-content\">\r\n    <span class=\"section-eyebrow reveal\">O\u00f9<\/span>\r\n    <h2 class=\"loc-title reveal reveal-d1\">Au coeur<br>de la Kasbah<\/h2>\r\n    <p class=\"loc-city reveal reveal-d2\">Tanger, Maroc<\/p>\r\n    <div class=\"loc-distances reveal reveal-d3\">\r\n      <div class=\"loc-d-item\">\r\n        <div class=\"loc-d-time\">5'<\/div>\r\n        <div class=\"loc-d-name\">Mus\u00e9e de la Kasbah<\/div>\r\n      <\/div>\r\n      <div class=\"loc-d-item\">\r\n        <div class=\"loc-d-time\">5'<\/div>\r\n        <div class=\"loc-d-name\">des Souks<\/div>\r\n      <\/div>\r\n      <div class=\"loc-d-item\">\r\n        <div class=\"loc-d-time\">10'<\/div>\r\n        <div class=\"loc-d-name\">Grand Socco<\/div>\r\n      <\/div>\r\n      <div class=\"loc-d-item\">\r\n        <div class=\"loc-d-time\">5'<\/div>\r\n        <div class=\"loc-d-name\">Parking<\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"loc-visual reveal\">\r\n    <!--\r\n    \u2554\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2557\r\n    \u2551  \ud83d\udcf8 LOCALISATION \u2014 Kasbah \/ ruelle (kasbah-ruelle.jpg)       \u2551\r\n    \u2551  Une ruelle de la Kasbah \u2014 murs blancs, lumi\u00e8re d\u00e9coup\u00e9e,   \u2551\r\n    \u2551  ombre et lumi\u00e8re. Pas de touristes visibles si possible.   \u2551\r\n    \u2551  Alternativement : vue sur les toits + mer depuis la rue.   \u2551\r\n    \u2551  Lumi\u00e8re : matin (ombres longues, lumi\u00e8re rasante) ou       \u2551\r\n    \u2551  d\u00e9but d'apr\u00e8s-midi (contraste fort).                       \u2551\r\n    \u2551  Format : portrait ou carr\u00e9 \u00b7 1000\u00d71200px min               \u2551\r\n    \u2551  <img decoding=\"async\" src=\"images\/kasbah-ruelle.jpg\"                        \u2551\r\n    \u2551       alt=\"Kasbah de Tanger\"                                \u2551\r\n    \u2551       style=\"width:100%;height:100%;object-fit:cover;\">     \u2551\r\n    \u255a\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u255d\r\n    -->\r\n    <div class=\"loc-img\"><\/div>\r\n    \r\n    \r\n  <\/div>\r\n<\/section>\r\n\r\n<!-- \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n     SCREEN 6 \u2014 EXP\u00c9RIENCE VILLE\r\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n<section id=\"ville\">\r\n  <p class=\"ville-quote reveal\">\r\n    Tout se fait \u00e0 pied.<br>\r\n    <em style=\"font-style:italic;\">Tanger lentement.<\/em>\r\n  <\/p>\r\n  <div class=\"sep sep-center reveal reveal-d2\" style=\"background:#8a6f50; margin-top:32px;\"><\/div>\r\n  <p class=\"ville-sub reveal reveal-d3\">M\u00e9dina \u00b7 Caf\u00e9s \u00b7 Galeries \u00b7 Port<\/p>\r\n<\/section>\r\n\r\n<!-- \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n     SCREENS 7-9 \u2014 LES 3 USAGES\r\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n<section id=\"usages\">\r\n\r\n  <!-- USAGE 1 \u2014 S\u00c9JOUR -->\r\n  <div class=\"usage\">\r\n    <div class=\"usage-media\">\r\n      <!--\r\n      \u2554\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2557\r\n      \u2551  \ud83d\udcf8 USAGE 1 \u2014 S\u00e9jour \/ atmosph\u00e8re matin (sejour.jpg)         \u2551\r\n      \u2551  SHOT : quelqu'un qui vit la maison \u2014 tasse de caf\u00e9 sur      \u2551\r\n      \u2551  la terrasse, livre ouvert, lumi\u00e8re du matin sur les murs.  \u2551\r\n      \u2551  Pas besoin de personne visible : un verre de th\u00e9 + vue      \u2551\r\n      \u2551  mer suffit \u00e0 raconter l'exp\u00e9rience.                         \u2551\r\n      \u2551  Lumi\u00e8re : matin, lumi\u00e8re douce et chaleureuse.              \u2551\r\n      \u2551  Format : 3:4 portrait \u00b7 1200\u00d71600px min                     \u2551\r\n      \u2551  <img decoding=\"async\" src=\"images\/sejour.jpg\" alt=\"S\u00e9jour \u00e0 Tanger\"          \u2551\r\n      \u2551       style=\"width:100%;height:100%;object-fit:cover;\">      \u2551\r\n      \u255a\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u255d\r\n      -->\r\n      <div class=\"usage-img\"><\/div>\r\n    <\/div>\r\n    <div class=\"usage-body reveal\">\r\n     \r\n     \r\n      <h2 class=\"usage-title\">S\u00e9journer<\/h2>\r\n      <p class=\"usage-text\">\r\n        Un lieu pour vivre Tanger autrement. Deux suites dans une maison con\u00e7ue et habit\u00e9e par des cr\u00e9ateurs depuis 40 ans. Chaque pi\u00e8ce a \u00e9t\u00e9 choisie.\r\n      <\/p>\r\n      <p class=\"usage-trigger\">Disponible \u00e0 la nuit ou \u00e0 la semaine.<\/p>\r\n      <a href=\"https:\/\/www.airbnb.co.uk\/rooms\/736804396214979345?guests=1&amp;adults=1&amp;viralityEntryPoint=1&amp;s=76&amp;unique_share_id=3933405e-5def-4337-862a-e79cc1a87c53&amp;source_impression_id=p3_1688749985_KvgIUy7NgnDrkc3y\" target=\"_blank\" class=\"btn btn-gold\" rel=\"noopener\">R\u00e9server<\/a>\r\n      <p class=\"usage-urgency\">R\u00e9ponse sous 24h<\/p>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- USAGE 2 \u2014 SHOOTING -->\r\n  <div class=\"usage\" id=\"shooting\">\r\n    <div class=\"usage-media\">\r\n      <!--\r\n      \u2554\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2557\r\n      \u2551  \ud83d\udcf8 USAGE 2 \u2014 Shooting \/ lumi\u00e8re (shooting.jpg)              \u2551\r\n      \u2551  SHOT CL\u00c9 : utilisez vos propres shootings de marque.        \u2551\r\n      \u2551  \u2192 C'est votre meilleure preuve sociale.                     \u2551\r\n      \u2551  Montrer : lumi\u00e8re naturelle dramatique dans la maison,      \u2551\r\n      \u2551  silhouette ou v\u00eatement dans le cadre, profondeur de champ.  \u2551\r\n      \u2551  Si pas encore de shooting \u00e0 partager :                      \u2551\r\n      \u2551  photographier la pi\u00e8ce principale avec la lumi\u00e8re du matin  \u2551\r\n      \u2551  (faisceau de lumi\u00e8re, ombres architecturales, volumes).     \u2551\r\n      \u2551  Lumi\u00e8re : 8h-10h (lumi\u00e8re rasante maximale) ou 16h-18h.     \u2551\r\n      \u2551  Format : 3:4 portrait \u00b7 1200\u00d71600px min                     \u2551\r\n      \u2551  <img decoding=\"async\" src=\"images\/shooting.jpg\" alt=\"Shooting \u00e0 Tanger\"      \u2551\r\n      \u2551       style=\"width:100%;height:100%;object-fit:cover;\">      \u2551\r\n      \u255a\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u255d\r\n      -->\r\n      <div class=\"usage-img\"><\/div>\r\n    <\/div>\r\n    <div class=\"usage-body reveal\">\r\n      \r\n      <h2 class=\"usage-title\">Cr\u00e9er<br>\u00e0 Tanger<\/h2>\r\n      <p class=\"usage-text\">\r\n        Un lieu pens\u00e9 pour les images. Lumi\u00e8re naturelle, textures brutes, volumes de la Kasbah. Les marques, photographes et cr\u00e9ateurs viennent chercher une atmosph\u00e8re que l'on ne construit pas en studio.\r\n      <\/p>\r\n      <p class=\"usage-trigger\">Shootings, \u00e9ditoriaux, tournages.<\/p>\r\n      <button class=\"btn btn-gold\" onclick=\"toggleShootForm(this)\">V\u00e9rifier la disponibilit\u00e9<\/button>\r\n      <p class=\"usage-urgency\">R\u00e9ponse sous 24h pour les demandes cr\u00e9atives<\/p>\r\n\r\n      <div class=\"shoot-form-wrap\" id=\"shootFormWrap\">\r\n        \r\n        <!-- HTML Forms v1.6.4 - https:\/\/wordpress.org\/plugins\/html-forms\/ -->\n<form method=\"post\"  class=\"hf-form hf-form-1925\" data-id=\"1925\" data-title=\"Form Tanger\" data-slug=\"form-tanger\" data-message-success=\"Thank you! We will be in touch soon.\" data-message-invalid-email=\"Sorry, that email address looks invalid.\" data-message-required-field-missing=\"Please fill in the required fields.\" data-message-error=\"Oops. An error occurred.\" data-message-recaptcha-failed=\"reCAPTCHA verification failed. Please try again.\" data-message-recaptcha-low-score=\"Your submission appears to be spam. Please try again.\" action=\"\"><input type=\"hidden\" name=\"_hf_form_id\" value=\"1925\" \/><div style=\"display: none;\"><input type=\"text\" name=\"_hf_h1925\" value=\"\" \/><\/div><div class=\"hf-fields-wrap\"><div class=\"shoot-form\">\r\n  <div class=\"form-row\">\r\n    <div class=\"form-group\">\r\n      <label>Nom \/ Studio<\/label>\r\n      <input type=\"text\" name=\"NOM\" placeholder=\"Votre nom ou studio\" required \/>\r\n    <\/div>\r\n    <div class=\"form-group\">\r\n      <label>Type de projet<\/label>\r\n      <select name=\"TYPE\">\r\n        <option value=\"\">S\u00e9lectionner<\/option>\r\n        <option>Shooting mode \/ \u00e9ditorial<\/option>\r\n        <option>Shooting marque \/ produit<\/option>\r\n        <option>Tournage vid\u00e9o<\/option>\r\n        <option>Contenu Instagram \/ digital<\/option>\r\n        <option>Autre<\/option>\r\n      <\/select>\r\n    <\/div>\r\n  <\/div>\r\n  <div class=\"form-group\">\r\n    <label>Date souhait\u00e9e<\/label>\r\n    <input type=\"date\" name=\"DATE\" \/>\r\n  <\/div>\r\n  <div class=\"form-group\">\r\n    <label>Message<\/label>\r\n    <textarea name=\"MESSAGE\" placeholder=\"D\u00e9crivez votre projet en quelques lignes\u2026\"><\/textarea>\r\n  <\/div>\r\n  \r\n  <button type=\"submit\" class=\"btn btn-outline\" style=\"margin-top:8px;\">Envoyer la demande \u2192<\/button>\r\n<\/div><noscript>Please enable JavaScript for this form to work.<\/noscript><\/div><input type=\"hidden\" name=\"trp-form-language\" value=\"fr\"\/><\/form><!-- \/ HTML Forms -->\r\n\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- USAGE 3 \u2014 D\u00ceNERS -->\r\n  <div class=\"usage\">\r\n    <div class=\"usage-media\">\r\n      <!--\r\n      \u2554\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2557\r\n      \u2551  \ud83d\udcf8 USAGE 3 \u2014 D\u00eener \/ table (diner.jpg)                      \u2551\r\n      \u2551  SHOT : une table dress\u00e9e simplement dans la pi\u00e8ce           \u2551\r\n      \u2551  principale ou en terrasse. Bougies allum\u00e9es. Nuit ou        \u2551\r\n      \u2551  cr\u00e9puscule pour la lumi\u00e8re douce.                           \u2551\r\n      \u2551  Pas besoin d'invit\u00e9s. Juste : table, bougies, verres,       \u2551\r\n      \u2551  vue si possible en arri\u00e8re-plan.                            \u2551\r\n      \u2551  Alternativement : lumi\u00e8re de bougie sur les murs la nuit.  \u2551\r\n      \u2551  Lumi\u00e8re : cr\u00e9puscule (20 min apr\u00e8s coucher) ou bougie       \u2551\r\n      \u2551  uniquement, ISO haut.                                       \u2551\r\n      \u2551  Format : 3:4 portrait \u00b7 1200\u00d71600px min                     \u2551\r\n      \u2551  <img decoding=\"async\" src=\"images\/diner.jpg\" alt=\"D\u00eener priv\u00e9 \u00e0 Tanger\"      \u2551\r\n      \u2551       style=\"width:100%;height:100%;object-fit:cover;\">      \u2551\r\n      \u255a\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u255d\r\n      -->\r\n      <div class=\"usage-img\"><\/div>\r\n    <\/div>\r\n  <div class=\"usage-body reveal\">\r\n      \r\n      <h2 class=\"usage-title\">Une table<br>\u00e0 Tanger<\/h2>\r\n      <p class=\"usage-text\">\r\n        Certains moments se vivent autour d'une table. Dans la lumi\u00e8re de la Kasbah, la maison accueille des d\u00eeners priv\u00e9s sur demande. Une exp\u00e9rience intime, pens\u00e9e autour du temps, du lieu et du partage.\r\n      <\/p>\r\n      <p class=\"usage-trigger\">Pour c\u00e9l\u00e9brations, rencontres ou moments confidentiels.<\/p>\r\n      \r\n      <button class=\"btn btn-gold\" id=\"btnMesaTanger\" onclick=\"toggleMesaForm()\">\r\n        Organiser un d\u00eener\r\n      <\/button>\r\n      \r\n      <p class=\"usage-urgency\">Exp\u00e9riences sur mesure<\/p>\r\n\r\n      <div class=\"shoot-form-wrap\" id=\"shootFormWrapMesa\" style=\"display: none;\">\r\n        \r\n        <!-- HTML Forms v1.6.4 - https:\/\/wordpress.org\/plugins\/html-forms\/ -->\n<form method=\"post\"  class=\"hf-form hf-form-1925\" data-id=\"1925\" data-title=\"Form Tanger\" data-slug=\"form-tanger\" data-message-success=\"Thank you! We will be in touch soon.\" data-message-invalid-email=\"Sorry, that email address looks invalid.\" data-message-required-field-missing=\"Please fill in the required fields.\" data-message-error=\"Oops. An error occurred.\" data-message-recaptcha-failed=\"reCAPTCHA verification failed. Please try again.\" data-message-recaptcha-low-score=\"Your submission appears to be spam. Please try again.\" action=\"\"><input type=\"hidden\" name=\"_hf_form_id\" value=\"1925\" \/><div style=\"display: none;\"><input type=\"text\" name=\"_hf_h1925\" value=\"\" \/><\/div><div class=\"hf-fields-wrap\"><div class=\"shoot-form\">\r\n  <div class=\"form-row\">\r\n    <div class=\"form-group\">\r\n      <label>Nom \/ Studio<\/label>\r\n      <input type=\"text\" name=\"NOM\" placeholder=\"Votre nom ou studio\" required \/>\r\n    <\/div>\r\n    <div class=\"form-group\">\r\n      <label>Type de projet<\/label>\r\n      <select name=\"TYPE\">\r\n        <option value=\"\">S\u00e9lectionner<\/option>\r\n        <option>Shooting mode \/ \u00e9ditorial<\/option>\r\n        <option>Shooting marque \/ produit<\/option>\r\n        <option>Tournage vid\u00e9o<\/option>\r\n        <option>Contenu Instagram \/ digital<\/option>\r\n        <option>Autre<\/option>\r\n      <\/select>\r\n    <\/div>\r\n  <\/div>\r\n  <div class=\"form-group\">\r\n    <label>Date souhait\u00e9e<\/label>\r\n    <input type=\"date\" name=\"DATE\" \/>\r\n  <\/div>\r\n  <div class=\"form-group\">\r\n    <label>Message<\/label>\r\n    <textarea name=\"MESSAGE\" placeholder=\"D\u00e9crivez votre projet en quelques lignes\u2026\"><\/textarea>\r\n  <\/div>\r\n  \r\n  <button type=\"submit\" class=\"btn btn-outline\" style=\"margin-top:8px;\">Envoyer la demande \u2192<\/button>\r\n<\/div><noscript>Please enable JavaScript for this form to work.<\/noscript><\/div><input type=\"hidden\" name=\"trp-form-language\" value=\"fr\"\/><\/form><!-- \/ HTML Forms -->\r\n\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n<script>\r\nfunction toggleMesaForm() {\r\n  var form = document.getElementById('shootFormWrapMesa');\r\n  var btn = document.getElementById('btnMesaTanger');\r\n  \r\n  \/\/ Activamos las clases por si tu tema las usa para efectos visuales\r\n  form.classList.toggle('active');\r\n  form.classList.toggle('open');\r\n  \r\n  \/\/ Forzamos la aparici\u00f3n segura en pantalla\r\n  if (form.style.display === 'none' || form.style.display === '') {\r\n    form.style.setProperty('display', 'block', 'important');\r\n    btn.innerHTML = 'FERMER X';\r\n  } else {\r\n    form.style.setProperty('display', 'none', 'important');\r\n    btn.innerHTML = 'Organiser un d\u00eener';\r\n  }\r\n}\r\n<\/script>\r\n\r\n<\/section>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   SECTION NOS ADRESSES\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n\r\n<section id=\"adresses\">\r\n    <div class=\"adresses-header reveal\">\r\n        <div>\r\n            <span class=\"section-eyebrow\" style=\"color:var(--muted)\">Tanger<\/span>\r\n            <h2>Nos adresses<\/h2>\r\n        <\/div>\r\n        <span class=\"galerie-label\">S\u00e9lection Maison<\/span>\r\n    <\/div>\r\n\r\n    <div class=\"adresses-grid\">\r\n        <div class=\"adresse-card reveal\">\r\n            <span class=\"adresse-cat\">Maison de Mode<\/span>\r\n            <h3 class=\"adresse-name\">Laure Welfling<\/h3>\r\n            <p class=\"adresse-text\">\r\n                Boutique-atelier au c\u0153ur de la Kasbah. Pi\u00e8ces uniques, enti\u00e8rement faites main. Place de la Kasbah, Tanger.\r\n            <\/p>\r\n            <a href=\"https:\/\/www.instagram.com\/laurewelfling\/?hl=es\" target=\"_blank\" class=\"adresse-link\" rel=\"noopener\">\r\n                @laurewelfling <span>\u2192<\/span>\r\n                \r\n            <\/a><a href=\"https:\/\/www.laurewelfling.com\/\" target=\"_blank\" class=\"adresse-link\" rel=\"noopener\">\r\n                laurewelfling <span>\u2192<\/span>\r\n            <\/a>\r\n        <\/div>\r\n\r\n        <div class=\"adresse-card reveal reveal-d1\">\r\n            <span class=\"adresse-cat\">Restaurant<\/span>\r\n            <h3 class=\"adresse-name\">Mofi<\/h3>\r\n            <p class=\"adresse-text\">\r\n                Une cuisine authentique et cr\u00e9ative. Une atmosph\u00e8re chaleureuse au coeur de la ville. L'adresse incontournable de T\u00e1nger.\r\n            <\/p>\r\n            <a href=\"https:\/\/www.instagram.com\/mofi.tanger\/?hl=es\" target=\"_blank\" class=\"adresse-link\" rel=\"noopener\">\r\n                @mofi.tanger <span>\u2192<\/span>\r\n            <\/a>\r\n        <\/div>\r\n\r\n        <div class=\"adresse-card reveal reveal-d2\">\r\n            <span class=\"adresse-cat\">Dormir<\/span>\r\n            <h3 class=\"adresse-name\">House in the Kasbah<\/h3>\r\n            <p class=\"adresse-text\">\r\n                A designer\u2019s haven. Tangier\u2019s kasbah. View of the Strait of Gibraltar. Stay - Photoshoot - Private events.\r\n            <\/p>\r\n            <a href=\"https:\/\/www.instagram.com\/houseinthekasbah\" target=\"_blank\" class=\"adresse-link\" rel=\"noopener\">\r\n                @houseinthekasbah <span>\u2192<\/span>\r\n        <\/div>\r\n    \r\n    \r\n<\/section>\r\n<!-- \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n     SCREEN 10 \u2014 UNIVERS\r\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n<!--<section id=\"univers\">\r\n  \r\n\r\n<\/section>-->\r\n\r\n\r\n<!-- \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n     SCREEN 11 \u2014 LIENS DISCRETS\r\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n<section id=\"liens\">\r\n  <a href=\"#suites\" class=\"lien\">\r\n    <span class=\"lien-cat\">S\u00e9jour<\/span>\r\n    <span class=\"lien-label\">Dormir<\/span>\r\n  <\/a>\r\n  <a href=\"#usages\" class=\"lien\">\r\n    <span class=\"lien-cat\">Cr\u00e9ation<\/span>\r\n    <span class=\"lien-label\">Shooter<\/span>\r\n  <\/a>\r\n  <a href=\"mailto:indiasalvyguide@gmail.com?subject=D\u00eener priv\u00e9\" class=\"lien\">\r\n    <span class=\"lien-cat\">Exp\u00e9rience<\/span>\r\n    <span class=\"lien-label\">D\u00eener<\/span>\r\n  <\/a>\r\n  <a href=\"https:\/\/www.instagram.com\/houseinthekasbah\" target=\"_blank\" class=\"lien\" rel=\"noopener\">\r\n    <span class=\"lien-cat\">Suivre<\/span>\r\n    <span class=\"lien-label\">Instagram<\/span>\r\n  <\/a>\r\n  <!--\r\n    \u26a0\ufe0f NOTE STRAT\u00c9GIQUE :\r\n    Lien vers la boutique volontairement absent (choix client).\r\n    Si changement de strat\u00e9gie : ajouter ici un lien discret\r\n    sans mention du nom de la marque.\r\n  -->\r\n<\/section>\r\n\r\n<!-- \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n     SCREEN 12 \u2014 CTA FINAL\r\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n<section id=\"cta-final\">\r\n  <!--\r\n  \u2554\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2557\r\n  \u2551  \ud83d\udcf8 CTA FINAL \u2014 Image de fond optionnelle (cta-bg.jpg)        \u2551\r\n  \u2551  Vue nocturne ou cr\u00e9pusculaire depuis la maison.              \u2551\r\n  \u2551  Tr\u00e8s sombre, lumi\u00e8res de la ville au loin.                   \u2551\r\n  \u2551  Servira de fond avec overlay sombre.                         \u2551\r\n  \u2551  Format : 3:2 paysage \u00b7 1920\u00d71280px min                       \u2551\r\n  \u2551  Int\u00e9gration CSS : .cta-bg { background-image:                \u2551\r\n  \u2551    url('images\/cta-bg.jpg'); background-size: cover; }        \u2551\r\n  \u255a\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u255d\r\n  -->\r\n  <div class=\"cta-bg\"><\/div>\r\n  <div class=\"cta-content\">\r\n    <span class=\"cta-eyebrow reveal\">Tanger \u00b7 Kasbah \u00b7 Vue d\u00e9troit de Gibraltar<\/span>\r\n    <h2 class=\"cta-title reveal reveal-d1\">\r\n      R\u00e9servez votre s\u00e9jour<br>\u00e0 Tanger\r\n    <\/h2>\r\n    <div class=\"cta-btns reveal reveal-d2\">\r\n      <a href=\"https:\/\/www.airbnb.co.uk\/rooms\/736804396214979345?guests=1&amp;adults=1&amp;viralityEntryPoint=1&amp;s=76&amp;unique_share_id=3933405e-5def-4337-862a-e79cc1a87c53&amp;source_impression_id=p3_1688749985_KvgIUy7NgnDrkc3y\" target=\"_blank\" class=\"btn btn-gold\" rel=\"noopener\">\r\n        Voir les disponibilit\u00e9s\r\n      <\/a>\r\n      <a href=\"mailto:indiasalvyguide@gmail.com\" class=\"btn btn-outline-white\">\r\n        Demande sur mesure\r\n      <\/a>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<!-- \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n     FOOTER\r\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n<footer>\r\n  <span class=\"footer-brand\">House in the Kasbah \u00b7 Tanger<\/span>\r\n  <ul class=\"footer-nav\">\r\n    <li><a href=\"https:\/\/www.instagram.com\/houseinthekasbah\" target=\"_blank\" rel=\"noopener\">Instagram<\/a><\/li>\r\n    <li><a href=\"mailto:indiasalvyguide@gmail.com\">Contact<\/a><\/li>\r\n    \r\n    <!-- \u26a0\ufe0f DEV : cr\u00e9er une page mentions-legales.html -->\r\n  <\/ul>\r\n  <span class=\"footer-copy\">\u00a9 2026 House in the Kasbah<\/span>\r\n<\/footer>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n     JAVASCRIPT\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<script>\r\n\/* \u2500\u2500 Nav scroll \u2500\u2500 *\/\r\nconst navbar = document.getElementById('navbar');\r\nconst floatingCta = document.getElementById('floatingCta');\r\nconst heroHeight = () => document.getElementById('hero').offsetHeight;\r\n\r\nwindow.addEventListener('scroll', () => {\r\n  navbar.classList.toggle('scrolled', window.scrollY > 60);\r\n  floatingCta.classList.toggle('show', window.scrollY > heroHeight() * 0.75);\r\n}, { passive: true });\r\n\r\n\/* \u2500\u2500 Reveal on scroll \u2500\u2500 *\/\r\nconst revealEls = document.querySelectorAll('.reveal');\r\nconst revealObs = new IntersectionObserver((entries) => {\r\n  entries.forEach(e => {\r\n    if (e.isIntersecting) { e.target.classList.add('in'); revealObs.unobserve(e.target); }\r\n  });\r\n}, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });\r\nrevealEls.forEach(el => revealObs.observe(el));\r\n\r\n\/* \u2500\u2500 Galerie drag-scroll \u2500\u2500 *\/\r\nconst track = document.getElementById('galerieTrack');\r\nlet isDragging = false, startX, scrollStart;\r\n\r\ntrack.addEventListener('mousedown', e => {\r\n  isDragging = true;\r\n  track.classList.add('grabbing');\r\n  startX = e.pageX - track.offsetLeft;\r\n  scrollStart = track.scrollLeft;\r\n});\r\ndocument.addEventListener('mouseup', () => { isDragging = false; track.classList.remove('grabbing'); });\r\ntrack.addEventListener('mousemove', e => {\r\n  if (!isDragging) return;\r\n  e.preventDefault();\r\n  track.scrollLeft = scrollStart - (e.pageX - track.offsetLeft - startX) * 1.4;\r\n});\r\n\r\n\/* \u2500\u2500 Shooting form toggle \u2500\u2500 *\/\r\nfunction toggleShootForm(btn) {\r\n  const wrap = document.getElementById('shootFormWrap');\r\n  const isOpen = wrap.classList.toggle('open');\r\n  btn.textContent = isOpen ? 'Fermer \u2715' : 'V\u00e9rifier la disponibilit\u00e9';\r\n}\r\n\r\nfunction submitShoot() {\r\n  \/*\r\n    \u26a0\ufe0f DEV \u2014 Connecter ce formulaire \u00e0 :\r\n    Option A : Formspree (le plus simple, gratuit)\r\n      1. Cr\u00e9er compte sur formspree.io\r\n      2. Cr\u00e9er un formulaire \u2192 r\u00e9cup\u00e9rer l'ID\r\n      3. Remplacer cette fonction par un fetch vers :\r\n         https:\/\/formspree.io\/f\/VOTRE-ID\r\n\r\n    Option B : Netlify Forms (si h\u00e9berg\u00e9 sur Netlify)\r\n      Ajouter data-netlify=\"true\" sur le <form>\r\n\r\n    Option C : Backend custom \u2014 envoyer les donn\u00e9es en JSON\r\n      \u00e0 votre endpoint API.\r\n\r\n    Exemple Formspree :\r\n    const formData = new FormData(document.querySelector('.shoot-form'));\r\n    fetch('https:\/\/formspree.io\/f\/VOTRE-ID', {\r\n      method: 'POST', body: formData,\r\n      headers: { 'Accept': 'application\/json' }\r\n    }).then(r => r.ok ? showSuccess() : showError());\r\n  *\/\r\n  const wrap = document.getElementById('shootFormWrap');\r\n  wrap.innerHTML = `\r\n    <div style=\"padding:28px;border:1px solid rgba(184,154,110,0.2);text-align:center;\">\r\n      <p style=\"font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.3rem;color:var(--sand-light);margin-bottom:10px;\">\r\n        Merci pour votre demande.\r\n      <\/p>\r\n      <p style=\"font-size:0.66rem;letter-spacing:0.14em;color:var(--muted);\">\r\n        Nous vous r\u00e9pondons sous 24h.\r\n      <\/p>\r\n    <\/div>`;\r\n}\r\n\r\n\/* \u2500\u2500 Custom cursor (desktop only) \u2500\u2500 *\/\r\nif (window.matchMedia('(pointer: fine)').matches) {\r\n  const cursor = document.getElementById('cursor');\r\n  const ring = document.getElementById('cursorRing');\r\n  let mx = 0, my = 0, rx = 0, ry = 0;\r\n\r\n  document.addEventListener('mousemove', e => { mx = e.clientX; my = e.clientY; });\r\n\r\n  function animateCursor() {\r\n    cursor.style.left = mx + 'px';\r\n    cursor.style.top  = my + 'px';\r\n    rx += (mx - rx) * 0.12;\r\n    ry += (my - ry) * 0.12;\r\n    ring.style.left = rx + 'px';\r\n    ring.style.top  = ry + 'px';\r\n    requestAnimationFrame(animateCursor);\r\n  }\r\n  animateCursor();\r\n\r\n  document.querySelectorAll('a, button, .suite-card, .gal-item').forEach(el => {\r\n    el.addEventListener('mouseenter', () => { cursor.classList.add('hover'); ring.classList.add('hover'); });\r\n    el.addEventListener('mouseleave', () => { cursor.classList.remove('hover'); ring.classList.remove('hover'); });\r\n  });\r\n}\r\n\r\n\/* \u2500\u2500 Mobile nav \u2500\u2500 *\/\r\nfunction openMobileNav()  { document.getElementById('mobileNav').classList.add('open'); document.body.style.overflow = 'hidden'; }\r\nfunction closeMobileNav() { document.getElementById('mobileNav').classList.remove('open'); document.body.style.overflow = ''; }\r\n<\/script>\r\n\r\n<!--\r\n\u2554\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2557\r\n\u2551                                                                      \u2551\r\n\u2551  \ud83d\udccb CHECKLIST DEV \u2014 AVANT MISE EN LIGNE                              \u2551\r\n\u2551                                                                      \u2551\r\n\u2551  REMPLACEMENTS OBLIGATOIRES :                                        \u2551\r\n\u2551  \u25a1 Tous les \"VOTRE-ID-ICI\" \u2192 URL Airbnb r\u00e9elle                       \u2551\r\n\u2551  \u25a1 Tous les \"contact@houseinthekasbah.com\" \u2192 email r\u00e9el              \u2551\r\n\u2551  \u25a1 Remplacer les backgrounds CSS gradient \u2192 vraies images <img>      \u2551\r\n\u2551  \u25a1 Connecter le formulaire shooting (Formspree ou backend)           \u2551\r\n\u2551  \u25a1 Cr\u00e9er page mentions-legales.html                                  \u2551\r\n\u2551                                                                      \u2551\r\n\u2551  IMAGES \u00c0 PR\u00c9PARER (voir guides dans le code) :                      \u2551\r\n\u2551  \u25a1 images\/hero.jpg          \u2014 Vue mer \/ Kasbah (2400\u00d71600)           \u2551\r\n\u2551  \u25a1 images\/galerie-1.jpg     \u2014 Vue d\u00e9troit (1600\u00d71000)                \u2551\r\n\u2551  \u25a1 images\/galerie-2.jpg     \u2014 Int\u00e9rieur suite (1000\u00d71400)            \u2551\r\n\u2551  \u25a1 images\/galerie-3.jpg     \u2014 Terrasse (1400\u00d7900)                    \u2551\r\n\u2551  \u25a1 images\/galerie-4.jpg     \u2014 D\u00e9tail \/ objet (900\u00d71200)              \u2551\r\n\u2551  \u25a1 images\/suite-terrasse.jpg \u2014 Suite 1 (1200\u00d71800)                   \u2551\r\n\u2551  \u25a1 images\/suite-kasbah.jpg  \u2014 Suite 2 (1200\u00d71800)                    \u2551\r\n\u2551  \u25a1 images\/kasbah-ruelle.jpg \u2014 Ruelle \/ localisation (1000\u00d71200)      \u2551\r\n\u2551  \u25a1 images\/sejour.jpg        \u2014 Atmosph\u00e8re matin (1200\u00d71600)           \u2551\r\n\u2551  \u25a1 images\/shooting.jpg      \u2014 Lumi\u00e8re shooting (1200\u00d71600)           \u2551\r\n\u2551  \u25a1 images\/diner.jpg         \u2014 Table \/ bougie (1200\u00d71600)             \u2551\r\n\u2551  \u25a1 images\/cta-bg.jpg        \u2014 Vue nocturne optionnelle (1920\u00d71280)   \u2551\r\n\u2551  \u25a1 images\/og-image.jpg      \u2014 Partage r\u00e9seaux sociaux (1200\u00d7630)     \u2551\r\n\u2551                                                                      \u2551\r\n\u2551  OPTIMISATION :                                                      \u2551\r\n\u2551  \u25a1 Compresser toutes les images (TinyPNG ou Squoosh)                 \u2551\r\n\u2551  \u25a1 Ajouter attribut loading=\"lazy\" sur les <img> hors hero           \u2551\r\n\u2551  \u25a1 Ajouter alt=\"\" descriptifs sur toutes les images                  \u2551\r\n\u2551  \u25a1 V\u00e9rifier meta og:image avec l'URL compl\u00e8te                        \u2551\r\n\u2551  \u25a1 Tester sur mobile iOS Safari + Android Chrome                     \u2551\r\n\u2551  \u25a1 V\u00e9rifier vitesse sur PageSpeed Insights                           \u2551\r\n\u2551                                                                      \u2551\r\n\u255a\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u255d\r\n-->\r\n\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Fermer \u2715 Suites S\u00e9jour &#038; Cr\u00e9ation Tanger R\u00e9server House in the Kasbah Suites Shooting &#038; D\u00eeners Tanger R\u00e9server Voir les suites \u2192 Kasbah de Tanger \u00b7 D\u00e9troit de Gibraltar Dormir dans la Kasbah Vue sur le d\u00e9troit \u00b7 Deux suites \u00b7 Maison de cr\u00e9ateurs D\u00e9couvrir Une maison pos\u00e9e sur la falaise. Face \u00e0 la mer, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1641","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/houseinthekasbah.com\/fr\/wp-json\/wp\/v2\/pages\/1641","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/houseinthekasbah.com\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/houseinthekasbah.com\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/houseinthekasbah.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/houseinthekasbah.com\/fr\/wp-json\/wp\/v2\/comments?post=1641"}],"version-history":[{"count":253,"href":"https:\/\/houseinthekasbah.com\/fr\/wp-json\/wp\/v2\/pages\/1641\/revisions"}],"predecessor-version":[{"id":1962,"href":"https:\/\/houseinthekasbah.com\/fr\/wp-json\/wp\/v2\/pages\/1641\/revisions\/1962"}],"wp:attachment":[{"href":"https:\/\/houseinthekasbah.com\/fr\/wp-json\/wp\/v2\/media?parent=1641"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}