.elementor-90 .elementor-element.elementor-element-513c356{--display:flex;}.elementor-90 .elementor-element.elementor-element-42e098a{margin:-31px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-90 .elementor-element.elementor-element-7239ea5{--display:flex;}.elementor-90 .elementor-element.elementor-element-54975da{--display:flex;}.elementor-90 .elementor-element.elementor-element-1b51a48{margin:-42px 0px calc(var(--kit-widget-spacing, 0px) + -37px) 0px;}.elementor-90 .elementor-element.elementor-element-e006c46{--display:flex;}.elementor-90 .elementor-element.elementor-element-65016ae{--display:flex;}.elementor-90 .elementor-element.elementor-element-b8c2cf6{margin:-89px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-90 .elementor-element.elementor-element-7a0c0d3{--display:flex;}.elementor-90 .elementor-element.elementor-element-cd3af42{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + -36px) 0px;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-42e098a *//* --- PAGE 4 : DESERT HERO HEADER --- */

.mohammed-desert-hero {
  position: relative;
  width: 100%;
  height: 90vh; /* Presque toute la hauteur pour une immersion totale */
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: 'Lato', sans-serif;
  overflow: hidden;
}

/* Couche sombre d'ambiance (plus chaude que sur les autres pages) */
.mohammed-desert-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Dégradé radial pour un effet de focus central + linéaire en bas */
  background: radial-gradient(circle at center, rgba(30, 20, 10, 0.2) 0%, rgba(20, 15, 10, 0.7) 100%),
              linear-gradient(to bottom, rgba(0,0,0,0) 70%, rgba(0,0,0,0.5) 100%);
  z-index: 1;
}

/* Contenu textuel */
.mohammed-desert-hero-content {
  position: relative;
  z-index: 2;
  color: #FAF9F6;
  padding: 0 20px;
  max-width: 900px;
}

/* Surtitre Doré/Sable */
.mohammed-desert-eyebrow {
  display: block;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 5px; /* Très espacé pour le côté Luxe */
  color: #E2C792; 
  margin-bottom: 25px;
  font-weight: 300;
}

/* Titre principal massif et poétique */
.mohammed-desert-title {
  font-family: 'Playfair Display', serif;
  font-size: 5rem; /* Très grand pour l'impact */
  font-weight: 400;
  margin-bottom: 30px;
  line-height: 1.1;
  text-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* Sous-titre épuré */
.mohammed-desert-subtitle {
  font-size: 1.3rem;
  font-weight: 300;
  letter-spacing: 1px;
  color: #E8E8E8;
  line-height: 1.6;
  max-width: 700px;
  margin: 0 auto;
}

/* --- INDICATEUR SCROLL DOWN (DYNAMIQUE) --- */
.mohammed-scroll-down {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0.8;
}

.mohammed-scroll-text {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: #FAF9F6;
  margin-bottom: 10px;
}

.mohammed-scroll-line {
  width: 1px;
  height: 50px;
  background-color: rgba(250, 249, 246, 0.5);
  position: relative;
  overflow: hidden;
}

/* Animation de la ligne qui descend */
.mohammed-scroll-line::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #E2C792; /* Ligne dorée */
  animation: scrollLineAnim 2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes scrollLineAnim {
  0% { transform: translateY(-100%); }
  50% { transform: translateY(0); }
  100% { transform: translateY(100%); }
}

/* --- RÉUTILISATION DE L'ANIMATION FADE-UP --- */
/* (Déjà dans votre fichier CSS principal si vous avez suivi les étapes) */
.mohammed-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: all 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.mohammed-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- RESPONSIVE --- */
@media (max-width: 1024px) {
  .mohammed-desert-title {
    font-size: 4rem;
  }
}

@media (max-width: 768px) {
  .mohammed-desert-hero {
    height: 80vh;
  }
  .mohammed-desert-title {
    font-size: 3rem;
  }
  .mohammed-desert-subtitle {
    font-size: 1.1rem;
  }
}

@media (max-width: 480px) {
  .mohammed-desert-eyebrow {
    font-size: 0.8rem;
    letter-spacing: 3px;
  }
  .mohammed-desert-title {
    font-size: 2.5rem;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-33b942d *//* --- PAGE 4 : SECTION EXPÉRIENCES (AGADA / SAHARA) --- */

.mohammed-experiences-section {
  background-color: #FFFFFF !important;
  padding: 100px 20px !important;
  font-family: 'Lato', sans-serif !important;
  overflow: hidden !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.mohammed-experiences-container {
  max-width: 1200px !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 100px !important;
}

/* Structure de la ligne (Row) */
.mohammed-experience-row {
  display: flex !important;
  align-items: center !important;
  gap: 80px !important;
}

/* Inverse l'ordre pour la deuxième ligne (Image à droite, Texte à gauche) */
.mohammed-row-reverse {
  flex-direction: row-reverse !important;
}

/* --- COLONNE IMAGE --- */
.mohammed-experience-image-col {
  flex: 1 !important;
  width: 100% !important;
}

.mohammed-experience-img-wrapper {
  overflow: hidden !important;
  border-radius: 4px !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08) !important;
  aspect-ratio: 4 / 5 !important; /* Format portrait élégant sur Desktop */
  width: 100% !important;
}

.mohammed-experience-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

.mohammed-experience-img-wrapper:hover .mohammed-experience-img {
  transform: scale(1.05) !important; /* Effet de zoom fluide */
}

/* --- COLONNE TEXTE --- */
.mohammed-experience-text-col {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.mohammed-experience-eyebrow {
  display: block !important;
  font-size: 0.85rem !important;
  text-transform: uppercase !important;
  letter-spacing: 3px !important;
  color: #2F696B !important; 
  margin-bottom: 15px !important;
}

.mohammed-experience-title {
  font-family: 'Playfair Display', serif !important;
  font-size: 3.2rem !important;
  color: #2C2C2C !important;
  font-weight: 400 !important;
  line-height: 1.1 !important;
  margin-bottom: 15px !important;
}

.mohammed-experience-subtitle {
  font-family: 'Lato', sans-serif !important;
  font-size: 1.15rem !important;
  color: #8C7B65 !important; 
  font-weight: 400 !important;
  margin-bottom: 25px !important;
}

.mohammed-experience-desc {
  font-size: 1.05rem !important;
  color: #666666 !important;
  line-height: 1.8 !important;
  font-weight: 300 !important;
  margin-bottom: 20px !important;
}

/* Bouton */
.mohammed-experience-btn {
  align-self: flex-start !important;
  margin-top: 15px !important;
  padding: 15px 35px !important;
  font-family: 'Lato', sans-serif !important;
  font-size: 0.9rem !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  color: #2F696B !important;
  background-color: transparent !important;
  border: 1px solid #2F696B !important;
  text-decoration: none !important;
  transition: all 0.4s ease !important;
}

.mohammed-experience-btn:hover {
  background-color: #2F696B !important;
  color: #FAF9F6 !important;
}

/* ==========================================================
   RESPONSIVE OPTIMISÉ POUR TOUS LES ÉCRANS
========================================================== */

/* Laptops et petits écrans de bureau (max 1024px) */
@media (max-width: 1024px) {
  .mohammed-experience-row { gap: 40px !important; }
  .mohammed-experience-title { font-size: 2.6rem !important; }
  .mohammed-experiences-container { gap: 80px !important; }
}

/* Tablettes (max 768px) - Bascule de layout */
@media (max-width: 768px) {
  .mohammed-experiences-section { padding: 80px 20px !important; }
  
  /* Annule l'alternance gauche/droite et empile tout verticalement */
  .mohammed-experience-row,
  .mohammed-row-reverse {
    flex-direction: column !important;
    gap: 40px !important;
  }
  
  /* Transforme l'image portrait en format paysage pour éviter le scroll excessif */
  .mohammed-experience-img-wrapper {
    aspect-ratio: 3 / 2 !important; 
  }
  
  /* Conserve l'alignement à gauche pour la lisibilité des textes longs */
  .mohammed-experience-text-col {
    align-items: flex-start !important; 
    text-align: left !important;
  }
}

/* Mobiles (max 480px) */
@media (max-width: 480px) {
  .mohammed-experiences-section { padding: 60px 15px !important; }
  .mohammed-experiences-container { gap: 60px !important; }
  
  /* Ajustement de la typographie pour les petits écrans */
  .mohammed-experience-title { font-size: 2rem !important; line-height: 1.2 !important;}
  .mohammed-experience-subtitle { font-size: 1.05rem !important; }
  .mohammed-experience-desc { font-size: 1rem !important; line-height: 1.6 !important; }
  
  .mohammed-experience-img-wrapper {
    aspect-ratio: 4 / 3 !important; 
  }

  /* Bouton pleine largeur pour faciliter le clic au pouce */
  .mohammed-experience-btn {
    width: 100% !important;
    text-align: center !important;
    box-sizing: border-box !important;
    padding: 15px 20px !important;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-1b51a48 *//* --- STYLE SÉPARATEUR ZELLIGE THREAD (FORCÉ POUR ELEMENTOR) --- */

.mohammed-full-width {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  justify-content: center !important;
}

.mohammed-divider-zellige-thread {
  display: block !important;
  width: 100% !important;
  height: 120px !important; /* Hauteur par défaut pour Desktop */
  background-color: transparent !important; /* S'adapte au fond de la page */
  position: relative !important;
  z-index: 1 !important;
  margin: 40px 0 !important; /* Espace au-dessus et en-dessous */
}

/* 1. Le fond avec la texture Zellige */
.mohammed-divider-zellige-bg {
  opacity: 0.1 !important; /* Rend la texture de fond extrêmement subtile */
}

/* 2. La ligne de base (fixe et subtile) */
.mohammed-zellige-path-base {
  opacity: 0.3 !important; /* Rend la ligne de base très discrète */
}

/* 3. La ligne animée qui scintille */
.mohammed-zellige-path-animated {
  /* stroke-dasharray crée l'effet de "pointillé" long pour le scintillement */
  stroke-dasharray: 200 1500 !important; 
  stroke-linecap: round !important;
  
  /* L'animation fait défiler ce pointillé le long de la ligne */
  animation: mohammed-zellige-flow 8s linear infinite !important;
  
  /* Un léger effet de lueur (glow) pour le côté luxueux */
  filter: drop-shadow(0px 0px 5px rgba(226, 199, 146, 0.6)) !important;
}

/* Animation du scintillement doré */
@keyframes mohammed-zellige-flow {
  0% {
    stroke-dashoffset: 1500; /* Position de départ hors écran à gauche */
  }
  100% {
    stroke-dashoffset: -200; /* Position de fin hors écran à droite */
  }
}

/* ==========================================================
   MISE À L'ÉCHELLE RESPONSIVE (CONTRÔLE DE LA HAUTEUR)
========================================================== */

/* Laptops et petits écrans de bureau (max 1024px) */
@media (max-width: 1024px) {
  .mohammed-divider-zellige-thread { 
    height: 90px !important; 
    margin: 30px 0 !important; 
  }
}

/* Tablettes (max 768px) */
@media (max-width: 768px) {
  .mohammed-divider-zellige-thread { 
    height: 70px !important; 
    margin: 25px 0 !important;
  }
  
  .mohammed-zellige-path-animated {
    stroke-width: 2 !important; /* Ligne légèrement plus fine sur tablette */
    stroke-dasharray: 150 1200 !important; /* Pointillé plus court pour tablette */
  }
}

/* Mobiles (max 480px) */
@media (max-width: 480px) {
  .mohammed-divider-zellige-thread { 
    height: 55px !important; 
    margin: 20px 0 !important;
  }
  
  .mohammed-zellige-path-animated {
    stroke-dasharray: 100 1000 !important; /* Pointillé plus court pour mobile */
    animation-duration: 10s !important; /* Animation plus lente pour un effet apaisant sur petit écran */
    filter: drop-shadow(0px 0px 3px rgba(226, 199, 146, 0.6)) !important;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-a630ee2 *//* --- PAGE 4 : SECTION MOODBOARD (GALERIE D'INSPIRATION) --- */

.mohammed-moodboard-section {
  background-color: #FAF9F6; /* Fond crème très léger */
  padding: 80px 20px;
  overflow: hidden;
}

.mohammed-moodboard-container {
  max-width: 1400px; /* Plus large pour un effet panoramique */
  margin: 0 auto;
}

/* Grille complexe asymétrique */
.mohammed-moodboard-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 350px);
  gap: 20px;
}

.mohammed-mood-item {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}

/* Gestion de l'asymétrie */
.item-tall {
  grid-row: span 2; /* Prend 2 lignes de hauteur */
}

.item-wide {
  grid-column: span 2; /* Prend 2 colonnes de largeur */
}

/* Wrapper pour l'animation de zoom */
.mohammed-mood-img-wrapper {
  width: 100%;
  height: 100%;
  transition: transform 2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.mohammed-mood-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Effet de zoom lent au survol */
.mohammed-mood-item:hover .mohammed-mood-img-wrapper {
  transform: scale(1.1);
}

/* --- RESPONSIVE --- */

@media (max-width: 1024px) {
  .mohammed-moodboard-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, 300px);
  }
  
  /* On réinitialise les spans pour un affichage plus propre sur tablette */
  .item-tall, .item-wide {
    grid-row: span 1;
    grid-column: span 1;
  }
  
  /* On redéfinit manuellement un ou deux spans pour garder du style */
  .item-tall {
    grid-row: span 2;
  }
}

@media (max-width: 600px) {
  .mohammed-moodboard-grid {
    grid-template-columns: 1fr; /* Une seule colonne sur mobile */
    grid-template-rows: repeat(4, 400px);
  }
  
  .item-tall, .item-wide {
    grid-row: span 1;
    grid-column: span 1;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-b8c2cf6 *//* --- PAGE DÉSERT : DÉTAILS & CTA --- */

/* Fond blanc pur pour contraster avec le moodboard précédent */
.mohammed-desert-details {
  background-color: #FFFFFF;
  padding: 100px 20px;
  font-family: 'Lato', sans-serif;
}

.mohammed-details-container {
  max-width: 900px; /* Conteneur volontairement réduit pour garder un texte resserré */
  margin: 0 auto;
}

.mohammed-details-title {
  font-family: 'Playfair Display', serif;
  font-size: 2.5rem;
  color: #2C2C2C;
  text-align: center;
  margin-bottom: 60px;
  font-weight: 400;
}

/* Grille pour les deux boîtes (Inclus/Exclus) */
.mohammed-details-grid {
  display: flex;
  gap: 50px;
  margin-bottom: 60px;
}

/* Style des boîtes */
.mohammed-details-box {
  flex: 1;
  background-color: #FAF9F6; /* Crème clair */
  padding: 40px;
  border-top: 3px solid #2F696B; /* Ligne de couleur accentuée en haut */
}

.mohammed-details-subtitle {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  color: #2C2C2C;
  margin-bottom: 25px;
  font-weight: 400;
}

/* Listes d'éléments */
.mohammed-details-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mohammed-details-list li {
  font-size: 1.05rem;
  color: #555555;
  margin-bottom: 16px;
  padding-left: 30px;
  position: relative;
  font-weight: 300;
  line-height: 1.4;
}

/* Icône "Check" pour les inclusions */
.mohammed-details-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: #2F696B;
  font-weight: bold;
}

/* Icône "Tiret" subtil pour les exclusions */
.mohammed-list-exclude li::before {
  content: '—';
  color: #A0A0A0; /* Gris clair */
  font-weight: normal;
}


/* Responsive : Ajustements pour tablettes et mobiles */
@media (max-width: 768px) {
  .mohammed-desert-details {
    padding: 80px 20px;
  }

  .mohammed-details-grid {
    flex-direction: column; /* Les boîtes s'empilent */
    gap: 30px;
  }
  
  .mohammed-details-title {
    font-size: 2.2rem;
    margin-bottom: 40px;
  }
  
  .mohammed-details-box {
    padding: 30px 20px;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-cd3af42 *//* --- PAGE 4 : SECTION CTA (APPEL À L'ACTION) --- */

.mohammed-desert-cta {
  position: relative;
  padding: 150px 20px;
  background-size: cover;
  background-position: center;
  /* Effet parallaxe élégant */
  background-attachment: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: 'Lato', sans-serif;
  overflow: hidden;
}

.mohammed-cta-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(20, 20, 20, 0.65); /* Assombrit l'image de fond */
  z-index: 1;
}

.mohammed-cta-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  color: #FAF9F6;
}

.mohammed-cta-eyebrow {
  display: block;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 4px;
  color: #E2C792; /* Touche dorée/sable */
  margin-bottom: 20px;
}

.mohammed-cta-title {
  font-family: 'Playfair Display', serif;
  font-size: 3.5rem;
  font-weight: 400;
  margin-bottom: 25px;
  line-height: 1.2;
}

.mohammed-cta-subtitle {
  font-size: 1.2rem;
  font-weight: 300;
  color: #E8E8E8;
  margin-bottom: 40px;
  line-height: 1.6;
}

/* Bouton inversé (Fond clair, texte foncé) pour attirer l'œil */
.mohammed-cta-btn {
  display: inline-block;
  padding: 18px 45px;
  font-family: 'Lato', sans-serif;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #2F696B;
  background-color: #FAF9F6;
  text-decoration: none;
  border: none;
  border-radius: 2px;
  transition: all 0.4s ease;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.mohammed-cta-btn:hover {
  background-color: #E2C792; /* Devient doré au survol */
  color: #1A3C3D; /* Texte plus foncé */
  transform: translateY(-3px);
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.3);
}

/* --- RESPONSIVE --- */

/* Désactivation du parallaxe sur les tablettes/mobiles (souvent mal supporté sur iOS) */
@media (max-width: 1024px) {
  .mohammed-desert-cta {
    background-attachment: scroll;
    padding: 120px 20px;
  }
  .mohammed-cta-title {
    font-size: 2.8rem;
  }
}

@media (max-width: 768px) {
  .mohammed-desert-cta {
    padding: 100px 20px;
  }
  .mohammed-cta-title {
    font-size: 2.2rem;
  }
  .mohammed-cta-subtitle {
    font-size: 1.05rem;
    margin-bottom: 30px;
  }
}/* End custom CSS */