/* HAYDAR — Témoignages — v1.1.0 (two-tone: header on cream, cards on dark band) */
.htm-wrap{
  --htm-ink:#17130F;
  --htm-card-bg:#1A1611;
  --htm-dark:#3C2D1F;
  --htm-gold:#CBA968;
  --htm-cream:#F5EFDF;
  --htm-leather:#6E5138;
  --htm-border:rgba(245,239,223,.14);
  --htm-border-hover:rgba(203,169,104,.55);
  position:relative;
  display:block;
  width:100%;
  flex:1 1 100%;
  box-sizing:border-box;
}
.htm-wrap *{box-sizing:border-box;}

/* ---------- header (on cream section background) ---------- */
.htm-header{
  position:relative;
  z-index:1;
  text-align:center;
  max-width:640px;
  margin:0 auto;
  padding:88px 32px 56px;
  opacity:0;
  transform:translateY(16px);
  transition:opacity .8s ease, transform .8s ease;
}
.htm-wrap.is-visible .htm-header{opacity:1; transform:translateY(0);}
.htm-ornament{
  display:inline-block;
  width:16px;
  height:16px;
  margin-bottom:18px;
  opacity:.9;
}
.htm-ornament svg{width:100%;height:100%;display:block;}
.htm-ornament svg *{stroke:var(--htm-gold);}
.htm-title{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-weight:500;
  font-size:clamp(30px, 4vw, 42px);
  line-height:1.15;
  letter-spacing:.3px;
  color:var(--htm-ink);
  margin:0 0 22px;
}
.htm-divider{
  width:64px;
  height:1px;
  margin:0 auto 22px;
  background:linear-gradient(90deg, transparent, var(--htm-gold), transparent);
  position:relative;
}
.htm-divider::before{
  content:"";
  position:absolute;
  left:50%;
  top:-2px;
  width:4px;
  height:4px;
  background:var(--htm-gold);
  border-radius:50%;
  transform:translateX(-50%) rotate(45deg);
}
.htm-subtitle{
  font-family:'Poppins','Inter',sans-serif;
  font-weight:500;
  font-size:11px;
  letter-spacing:2.6px;
  text-transform:uppercase;
  color:var(--htm-leather);
  margin:0;
}

/* ---------- dark band (full bleed, holds the carousel) ---------- */
.htm-band{
  position:relative;
  width:100%;
  background:var(--htm-dark);
  padding:64px 0 88px;
  overflow:hidden;
}
.htm-band::before{
  content:"";
  position:absolute;
  top:-30px;
  right:-50px;
  width:360px;
  height:360px;
  pointer-events:none;
  z-index:0;
  opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23CBA968' stroke-width='1'%3E%3Cpolygon points='100,10 190,70 155,180 45,180 10,70'/%3E%3Cpolygon points='100,40 165,82 140,165 60,165 35,82'/%3E%3Cline x1='100' y1='10' x2='100' y2='190'/%3E%3Cline x1='10' y1='70' x2='190' y2='130'/%3E%3Cline x1='190' y1='70' x2='10' y2='130'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-size:contain;
}
.htm-band-inner{
  position:relative;
  z-index:1;
  max-width:1320px;
  margin:0 auto;
  padding:0 32px;
}
.htm-carousel{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .9s ease .15s, transform .9s ease .15s;
}
.htm-wrap.is-visible .htm-carousel{opacity:1; transform:translateY(0);}
.htm-viewport{
  overflow:hidden;
  cursor:grab;
}
.htm-viewport.is-dragging{cursor:grabbing;}
.htm-track{
  display:flex;
  align-items:stretch;
  gap:28px;
  will-change:transform;
  transition:transform 1s cubic-bezier(.65,0,.35,1);
}
.htm-track.no-transition{transition:none !important;}

/* ---------- card ---------- */
.htm-card{
  flex:0 0 calc((100% - 56px)/3);
  min-width:0;
  background:var(--htm-card-bg);
  border:1px solid var(--htm-border);
  border-radius:2px;
  padding:34px 30px 28px;
  margin:0;
  display:flex;
  flex-direction:column;
  transition:transform .5s ease, border-color .5s ease, box-shadow .5s ease;
}
.htm-card:hover{
  transform:translateY(-6px);
  border-color:var(--htm-border-hover);
}
.htm-quote{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-weight:600;
  font-size:46px;
  line-height:1;
  color:var(--htm-gold);
  opacity:.85;
  margin-bottom:6px;
  display:inline-block;
  transition:transform .5s ease;
}
.htm-card:hover .htm-quote{transform:translateX(3px) translateY(-2px);}
.htm-text{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-style:italic;
  font-weight:400;
  font-size:19px;
  line-height:1.5;
  color:var(--htm-cream);
  margin:0 0 22px;
  flex-grow:1;
}
.htm-line{
  width:36px;
  height:1px;
  background:var(--htm-gold);
  opacity:.55;
  margin-bottom:18px;
}

/* ---------- footer of card: avatar + name/city ---------- */
.htm-person{
  display:flex;
  align-items:center;
  gap:14px;
}
.htm-avatar{
  flex:0 0 auto;
  width:46px;
  height:46px;
  border-radius:50%;
  border:1px solid var(--htm-gold);
  padding:2px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.htm-avatar-inner{
  width:100%;
  height:100%;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Cormorant Garamond', Georgia, serif;
  font-weight:600;
  font-size:15px;
  color:var(--htm-cream);
  background:linear-gradient(145deg, var(--htm-leather), var(--htm-dark) 70%);
}
.htm-name{
  font-style:normal;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.htm-name b{
  font-family:'Poppins','Inter',sans-serif;
  font-weight:600;
  font-size:12px;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:var(--htm-cream);
}
.htm-city{
  font-family:'Poppins','Inter',sans-serif;
  font-weight:400;
  font-size:11px;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--htm-gold);
  opacity:.85;
}

/* ---------- dots ---------- */
.htm-dots{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  margin-top:44px;
}
.htm-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:transparent;
  border:1px solid var(--htm-border-hover);
  padding:0;
  cursor:pointer;
  transition:background .4s ease, transform .4s ease, width .4s ease;
}
.htm-dot.is-active{
  background:var(--htm-gold);
  border-color:var(--htm-gold);
  width:18px;
  border-radius:3px;
}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .htm-card{flex:0 0 calc((100% - 28px)/2);}
}
@media (max-width:640px){
  .htm-header{padding:64px 20px 40px;}
  .htm-band{padding:48px 0 64px;}
  .htm-band-inner{padding:0 20px;}
  .htm-track{gap:16px;}
  .htm-card{flex:0 0 100%;padding:28px 24px 24px;}
  .htm-title{font-size:28px;}
}

@media (prefers-reduced-motion: reduce){
  .htm-header,.htm-carousel,.htm-card,.htm-quote,.htm-track{transition:none !important;}
}