/* HAYDAR — À propos de nous — v1.0.0 */
.ha-about{
  --ha-ink:#17130F;
  --ha-dark:#3C2D1F;
  --ha-gold:#CBA968;
  --ha-cream:#F5EFDF;
  --ha-cream2:#EEE6D7;
  --ha-leather:#6E5138;
  display:block;
  width:100%;
  flex:1 1 100%;
  background:var(--ha-cream2);
  overflow-x:hidden;
}
.ha-about *{box-sizing:border-box;}
.ha-about img{display:block;max-width:100%;height:auto;}

.ha-reveal{opacity:0; transform:translateY(28px); transition:opacity 1s ease, transform 1s ease;}
.ha-reveal.is-visible{opacity:1; transform:translateY(0);}
.ha-reveal-img{opacity:0; transform:scale(1.04); transition:opacity 1.1s ease, transform 1.4s ease;}
.ha-reveal-img.is-visible{opacity:1; transform:scale(1);}

.ha-eyebrow{
  font-family:'Poppins','Inter',sans-serif;
  font-weight:500;
  font-size:11px;
  letter-spacing:2.4px;
  text-transform:uppercase;
  color:var(--ha-gold);
  margin:0 0 18px;
}
.ha-inner{max-width:1320px;margin:0 auto;padding:0 32px;}

/* ================= HERO ================= */
.ha-hero{
  position:relative;
  min-height:86vh;
  display:flex;
  align-items:flex-end;
  background-size:cover;
  background-position:center 28%;
  overflow:hidden;
}
.ha-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(60,45,31,.05) 0%, rgba(60,45,31,.18) 45%, rgba(60,45,31,.88) 100%);
}
.ha-hero-content{
  position:relative;
  z-index:1;
  width:100%;
  padding:0 32px 72px;
  max-width:1320px;
  margin:0 auto;
}
.ha-hero-title{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-weight:500;
  font-size:clamp(36px, 6vw, 68px);
  line-height:1.08;
  letter-spacing:.5px;
  color:var(--ha-cream);
  margin:0 0 20px;
  max-width:820px;
}
.ha-hero-sub{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-style:italic;
  font-weight:400;
  font-size:clamp(16px,1.6vw,20px);
  line-height:1.5;
  color:rgba(245,239,223,.86);
  max-width:480px;
  margin:0 0 32px;
}
.ha-cta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:'Poppins','Inter',sans-serif;
  font-weight:500;
  font-size:12px;
  letter-spacing:1.6px;
  text-transform:uppercase;
  color:var(--ha-cream);
  text-decoration:none;
  border-bottom:1px solid var(--ha-gold);
  padding-bottom:6px;
  transition:letter-spacing .4s ease, color .4s ease, gap .4s ease;
}
.ha-cta:hover{color:var(--ha-gold); gap:16px;}
.ha-cta svg{width:14px;height:10px;flex:0 0 auto;transition:transform .4s ease;}
.ha-cta:hover svg{transform:translateX(3px);}

/* ================= NOTRE HISTOIRE (cream, asym) ================= */
.ha-histoire{background:var(--ha-cream2); padding:104px 0;}
.ha-histoire .ha-inner{
  display:flex;
  align-items:center;
  gap:80px;
}
.ha-histoire-text{flex:0 0 46%;}
.ha-histoire-text h2{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-weight:500;
  font-size:clamp(28px,3vw,38px);
  color:var(--ha-ink);
  margin:0 0 26px;
}
.ha-histoire-text p{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-size:19px;
  line-height:1.7;
  color:var(--ha-leather);
  margin:0 0 18px;
}
.ha-histoire-text p:last-child{margin-bottom:0;}
.ha-histoire-img{
  flex:0 0 46%;
  position:relative;
  aspect-ratio:4/5;
  overflow:hidden;
}
.ha-histoire-img img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s ease;
}
.ha-histoire-img:hover img{transform:scale(1.045);}

/* ================= NOTRE VISION (dark, centered statement) ================= */
.ha-vision{background:var(--ha-dark); padding:120px 0;}
.ha-vision .ha-inner{max-width:880px; text-align:center;}
.ha-vision-eyebrow{text-align:center;}
.ha-vision h2{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-weight:500;
  font-style:italic;
  font-size:clamp(28px,3.6vw,44px);
  line-height:1.28;
  color:var(--ha-cream);
  margin:0 0 30px;
}
.ha-vision p{
  font-family:'Poppins','Inter',sans-serif;
  font-weight:300;
  font-size:16px;
  line-height:1.75;
  color:rgba(245,239,223,.72);
  max-width:620px;
  margin:0 auto;
}

/* ================= LE MAROC, NOTRE INSPIRATION (banner + caption) ================= */
.ha-maroc{background:var(--ha-cream2); padding-bottom:0;}
.ha-maroc-media{
  position:relative;
  width:100%;
  aspect-ratio:16/8;
  overflow:hidden;
}
.ha-maroc-media img{width:100%;height:100%;object-fit:cover; transition:transform 1.4s ease;}
.ha-maroc-media:hover img{transform:scale(1.03);}
.ha-maroc-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(0deg, rgba(60,45,31,.76) 0%, rgba(60,45,31,0) 45%);
}
.ha-maroc-caption{
  position:absolute;
  left:0; right:0; bottom:0;
  z-index:1;
  padding:52px 32px;
  max-width:1320px;
  margin:0 auto;
}
.ha-maroc-caption h2{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-weight:500;
  font-size:clamp(26px,3vw,36px);
  color:var(--ha-cream);
  margin:0 0 14px;
}
.ha-maroc-caption p{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-style:italic;
  font-size:17px;
  line-height:1.65;
  color:rgba(245,239,223,.86);
  max-width:560px;
  margin:0;
}

/* ================= POUR QUI (cream, asym reversed) ================= */
.ha-pourqui{background:var(--ha-cream2); padding:104px 0;}
.ha-pourqui .ha-inner{
  display:flex;
  align-items:center;
  gap:80px;
  flex-direction:row-reverse;
}
.ha-pourqui-text{flex:0 0 48%;}
.ha-pourqui-text h2{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-weight:500;
  font-size:clamp(28px,3.2vw,40px);
  line-height:1.2;
  color:var(--ha-ink);
  margin:0 0 26px;
}
.ha-pourqui-text p{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-size:19px;
  line-height:1.7;
  color:var(--ha-leather);
  margin:0 0 16px;
}
.ha-pourqui-text p:last-child{margin-bottom:0;}
.ha-pourqui-img{
  flex:0 0 40%;
  position:relative;
  aspect-ratio:3/4;
  overflow:hidden;
}
.ha-pourqui-img img{width:100%;height:100%;object-fit:cover; transition:transform 1.2s ease;}
.ha-pourqui-img:hover img{transform:scale(1.045);}

/* ================= NOTRE MANIERE DE CREER (dark band, 4-step) ================= */
.ha-process{background:var(--ha-dark); padding:104px 0;}
.ha-process-head{text-align:center; max-width:640px; margin:0 auto 64px;}
.ha-process-head .ha-eyebrow{text-align:center;}
.ha-process-head h2{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-weight:500;
  font-size:clamp(26px,3vw,34px);
  color:var(--ha-cream);
  margin:0;
}
.ha-process-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:28px;
}
.ha-process-item{position:relative;}
.ha-process-media{
  position:relative;
  aspect-ratio:3/4;
  overflow:hidden;
  margin-bottom:20px;
  border:1px solid rgba(245,239,223,.12);
}
.ha-process-media img{width:100%;height:100%;object-fit:cover; transition:transform 1.2s ease, filter .5s ease;}
.ha-process-item:hover .ha-process-media img{transform:scale(1.06);}
.ha-process-index{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-size:13px;
  color:var(--ha-gold);
  letter-spacing:1px;
  margin-bottom:6px;
  display:block;
}
.ha-process-item h3{
  font-family:'Poppins','Inter',sans-serif;
  font-weight:500;
  font-size:12px;
  letter-spacing:1.8px;
  text-transform:uppercase;
  color:var(--ha-cream);
  margin:0 0 10px;
}
.ha-process-item p{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-style:italic;
  font-size:15.5px;
  line-height:1.55;
  color:rgba(245,239,223,.7);
  margin:0;
}

/* ================= HAYDAR TODAY (full bleed overlay) ================= */
.ha-today{position:relative; min-height:78vh; display:flex; align-items:center; justify-content:center; overflow:hidden; background-size:cover; background-position:center;}
.ha-today::after{content:""; position:absolute; inset:0; background:rgba(60,45,31,.55);}
.ha-today-content{position:relative; z-index:1; text-align:center; max-width:620px; padding:0 32px;}
.ha-today-content .ha-eyebrow{text-align:center;}
.ha-today h2{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-weight:500;
  font-size:clamp(28px,4vw,44px);
  color:var(--ha-cream);
  margin:0 0 22px;
}
.ha-today p{
  font-family:'Poppins','Inter',sans-serif;
  font-weight:300;
  font-size:15.5px;
  line-height:1.75;
  color:rgba(245,239,223,.82);
  margin:0;
}

/* ================= SIGNATURE (final, dark, minimal) ================= */
.ha-signature{background:var(--ha-dark); padding:140px 0 120px; text-align:center;}
.ha-signature-word{
  font-family:'Cinzel', 'Cormorant Garamond', serif;
  font-weight:500;
  font-size:clamp(30px,4vw,44px);
  letter-spacing:8px;
  color:var(--ha-cream);
  margin:0 0 26px;
}
.ha-signature-arabic{
  font-family:'Amiri', 'Traditional Arabic', serif;
  direction:rtl;
  unicode-bidi:isolate;
  font-size:clamp(20px,2.4vw,28px);
  color:var(--ha-gold);
  margin:0 0 40px;
  line-height:1.9;
}
.ha-signature .ha-cta{border-bottom-color:rgba(203,169,104,.5);}

/* ================= RESPONSIVE ================= */
@media (max-width:1024px){
  .ha-process-grid{grid-template-columns:repeat(2,1fr); row-gap:44px;}
  .ha-histoire .ha-inner, .ha-pourqui .ha-inner{gap:48px;}
}
@media (max-width:820px){
  .ha-histoire .ha-inner,
  .ha-pourqui .ha-inner{
    flex-direction:column;
    align-items:stretch;
  }
  .ha-histoire-img, .ha-pourqui-img, .ha-histoire-text, .ha-pourqui-text{flex:0 0 auto; width:100%;}
  .ha-histoire-img{order:-1; aspect-ratio:4/3; margin-bottom:8px;}
  .ha-pourqui-img{order:-1; aspect-ratio:4/3; margin-bottom:8px;}
}
@media (max-width:640px){
  .ha-inner{padding:0 22px;}
  .ha-hero{min-height:78vh;}
  .ha-hero-content{padding:0 22px 48px;}
  .ha-histoire, .ha-pourqui{padding:64px 0;}
  .ha-vision{padding:80px 0;}
  .ha-process{padding:64px 0;}
  .ha-process-grid{grid-template-columns:1fr 1fr; gap:16px;}
  .ha-process-head{margin-bottom:40px;}
  .ha-today{min-height:60vh;}
  .ha-signature{padding:88px 0 80px;}
  .ha-maroc-caption{padding:32px 22px;}
}

@media (prefers-reduced-motion: reduce){
  .ha-about *{transition:none !important;}
  .ha-reveal, .ha-reveal-img{opacity:1 !important; transform:none !important;}
}