/* ====== Section 5 – Intro Témoignages ====== */
.hf-s5-intro{
  background:#fff;
  
}

.hf-s5-wrap{
  width:min(980px,92vw);
  margin-inline:auto;
  text-align:center;
  position:relative;
  padding: clamp(48px,6vw,84px) 0;
}

.hf-s5-wrap h2{
  margin:0 0 10px;
  font-weight:800;
  color:#0e0e10;
  font-size: clamp(22px, 2.6vw, 32px);
  line-height:1.15;
}

.hf-s5-desc{
  max-width: 70ch;
  margin: 0 auto;
  color: var(--hf-deep);
  opacity:.85;
  font-size: clamp(14px, 1.4vw, 18px);
  line-height:1.7;
  padding-inline: clamp(12px, 4vw, 40px); 
}

/* Icônes décoratives */
.hf-s5-ico{
  position:absolute;
  top: 25%;         
  width: clamp(28px, 3.2vw, 42px);
  height:auto;
  opacity:.85;
  pointer-events:none;
  user-select:none;
}

.hf-s5-ico--left{  left: clamp(8px, 8vw, 120px); }
.hf-s5-ico--right{ right: clamp(8px, 8vw, 120px); }

@media (max-width: 640px){
  .hf-s5-ico{
    top: 12%;        
    width: 22px;
    opacity: .85;
    display: block;   
    z-index: 3;       
  }
  .hf-s5-ico--left{  left: 12px; }
  .hf-s5-ico--right{ right: 12px; }

  .hf-s5-wrap{ padding-top: clamp(40px, 8vw, 64px); }
  .hf-s5-desc{ padding-inline: clamp(20px, 8vw, 40px); }
}

/* ===== Fix mobile (icônes & texte) ===== */
@media (max-width: 640px){
  .hf-s5-ico{
    top: 20%;          
    width: 22px;        
    opacity: .75;
  }
  .hf-s5-ico--left{  left: 14px;  }  
  .hf-s5-ico--right{ right: 14px; }

  .hf-s5-desc{
    padding-inline: clamp(20px, 8vw, 40px);
  }

  .hf-s5-wrap{
    padding-top: clamp(40px, 8vw, 64px);
  }
}