:root{
  --hf-primary:#234881;
  --hf-bg:#f6f7fb;
  --hf-card:#ffffff;
  --hf-dark:#0e0e11;
  --hf-muted:#7c88a3;
  --hf-radius:20px;
  --hf-shadow:0 18px 36px rgba(0,0,0,.12);


  --hf-h:220px;


  --hf-controls-bottom:26px;   /* distance du bas de section */
  --hf-progress-w:240px;       /* largeur de la barre */
  --hf-progress-h:6px;         /* hauteur de la barre */
  --hf-arrow-size:40px;        /* diamètre des flèches */
  --hf-gap:14px;    
  --hf-arrow-v-offset: -10px !important;         
}


.hf-testi{
  padding:48px 0;
  background:var(--hf-bg);
  position:relative;
  overflow:hidden;
}


.hf-testi__viewport{
  max-width:1480px;
  width:100%;
  margin:0 auto;
  padding:12px clamp(16px,5vw,56px) calc(var(--hf-controls-bottom) + var(--hf-arrow-size) + 16px);
  position:relative;
}


.hf-testi__track{
  display:grid;
  grid-template-columns: 2.1fr minmax(480px,560px) 2.1fr;
  gap:28px;
  align-items:stretch;
  grid-auto-rows:1fr;
}


.hf-testi__card{
  display:none;
  height:var(--hf-h);
  position:relative;
  border-radius:var(--hf-radius);
  padding:22px;
  background:var(--hf-card);
  border:1px solid #e7ecf5;
  box-shadow:0 12px 28px rgba(35,72,129,.08);
  flex-direction:column;
  justify-content:space-between;
}
.hf-testi__card.is-center{
  background:var(--hf-dark);
  color:#fff;
  border:0;
  box-shadow:0 18px 36px rgba(0,0,0,.12);
  padding:28px;
}
.hf-testi__card.is-side .hf-testi__avatar{ display:none; }


.hf-testi__text{ margin:0 0 18px; font:400 15px/1.6 Inter,system-ui,sans-serif; color:#222; }
.hf-testi__card.is-center .hf-testi__text{ color:#fff; font-weight:500; font-size:16px; line-height:1.7; }
.hf-testi__card.is-side .hf-testi__text{
  color:#667289; font-size:14px; line-height:1.55;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}


.hf-testi__foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.hf-testi__who{ display:flex; align-items:center; gap:12px; }
.hf-testi__avatar{ width:44px; height:44px; border-radius:50%; object-fit:cover; flex:0 0 44px; border:2px solid #fff; }
.hf-testi__name{ font-weight:700; color:#111; line-height:1.1; }
.hf-testi__date{ display:block; font-size:12px; color:var(--hf-muted); }
.is-center .hf-testi__name{ color:#fff; }
.is-center .hf-testi__date{ color:#d2d6de; }


.hf-testi__rate{ display:inline-flex; align-items:center; gap:8px; background:#fff; color:#111; border-radius:12px; padding:8px 12px; border:1px solid #f0f0f0; font-weight:700; }
.hf-testi__star{ width:18px; height:18px; fill:#ffb200; }


.hf-testi__card:nth-child(1),
.hf-testi__card:nth-child(2),
.hf-testi__card:nth-child(3){ display:flex; grid-row:1; }
.hf-testi__card:nth-child(1){ grid-column:1; }
.hf-testi__card:nth-child(2){ grid-column:2; }
.hf-testi__card:nth-child(3){ grid-column:3; }
.hf-testi__card:nth-child(1),
.hf-testi__card:nth-child(3){ background:#fff; border:1px solid #e7ecf5; box-shadow:0 12px 28px rgba(35,72,129,.08); }
.hf-testi__card:nth-child(2){ background:var(--hf-dark); color:#fff; border:0; box-shadow:0 18px 36px rgba(0,0,0,.12); padding:28px; }


.hf-testi__card.pos-left,
.hf-testi__card.pos-center,
.hf-testi__card.pos-right{ display:flex; grid-row:1; }
.hf-testi__card.pos-left  { grid-column:1; }
.hf-testi__card.pos-center{ grid-column:2; }
.hf-testi__card.pos-right { grid-column:3; }
.hf-testi__card.pos-center{
  background:#0e0e11; color:#fff; border:0; box-shadow:0 18px 36px rgba(0,0,0,.12); padding:28px;
}
.hf-testi__card.pos-center .hf-testi__text{ color:#fff; font-weight:500; font-size:16px; line-height:1.7; }
.hf-testi__card.pos-center .hf-testi__name{ color:#fff; }
.hf-testi__card.pos-center .hf-testi__date{ color:#d2d6de; }
.hf-testi__card.pos-left,
.hf-testi__card.pos-right{ background:#fff; border:1px solid #e7ecf5; box-shadow:0 12px 28px rgba(35,72,129,.08); }
.hf-testi__card.pos-left .hf-testi__text,
.hf-testi__card.pos-right .hf-testi__text{
  color:#667289; font-size:14px; line-height:1.55;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.hf-testi__card.pos-left .hf-testi__avatar,
.hf-testi__card.pos-right .hf-testi__avatar{ display:none; }


:root{

  --hf-progress-w: 240px;    
  --hf-progress-h: 6px;     

  --hf-controls-bottom: 54px; 


  --hf-arrow-size: 40px;    
  --hf-gap: 14px;             
  --hf-arrow-v-offset: 0px;  
}

.hf-testi__viewport{
  padding-bottom: calc(var(--hf-controls-bottom) + var(--hf-arrow-size) + 16px) !important;
  position: relative;
}


.hf-testi__progress{
  position:absolute;
  left:50%;
  bottom: var(--hf-controls-bottom) !important;
  transform:translateX(-50%);
  width: var(--hf-progress-w);
  height: var(--hf-progress-h);
  background:#e9eef6;
  border-radius:999px;
  overflow:hidden;
  margin:0;
  z-index:2;
}
.hf-testi__thumb{
  position:absolute; top:0; left:0;
  width:56px; height:100%;
  background:var(--hf-primary);
  border-radius:999px;
  transition:left .4s ease;
}


.hf-testi__nav{
  position:absolute;
  top:auto !important;                
  transform:none !important;    
  bottom: calc(
    var(--hf-controls-bottom, 54px)
    + (var(--hf-progress-h, 6px) / 2)
    - (var(--hf-arrow-size, 40px) / 2)
    + var(--hf-arrow-v-offset, 0px)
  ) !important;
  width: var(--hf-arrow-size);
  height: var(--hf-arrow-size);
  background:transparent;
  border:none;
  display:flex; align-items:center; justify-content:center;
  font-size:28px; line-height:1;
  color:#234881;
  cursor:pointer; transition:.2s ease;
  z-index:3;


  left:50%;
}
.hf-testi__nav:hover{ background:rgba(35,72,129,.08); border-radius:50%; color:#0e0e11; }

.hf-testi__nav.is-prev{
  transform: translateX(calc(
    -50% - (var(--hf-progress-w)/2 + var(--hf-gap) + var(--hf-arrow-size)/2)
  )) !important;
}
.hf-testi__nav.is-next{
  transform: translateX(calc(
    -50% + (var(--hf-progress-w)/2 + var(--hf-gap) + var(--hf-arrow-size)/2)
  )) !important;
}

@media (max-width:1366px){
  :root{ --hf-progress-w:220px; --hf-gap:12px; }
}
@media (max-width:1024px){
  :root{ --hf-progress-w:200px; --hf-controls-bottom:18px; }
  .hf-testi__nav{ display:none; }  /* flèches masquées en mobile */
}


@media (max-width: 1440px){
  .hf-testi__track{
    grid-template-columns: 1.8fr minmax(460px,540px) 1.8fr;
    gap: 24px;
  }
  :root{ --hf-h: 210px; }
}


@media (max-width: 1366px){
  .hf-testi__track{
    grid-template-columns: 1.6fr minmax(440px,520px) 1.6fr;
    gap: 22px;
  }
  :root{ --hf-h: 200px; --hf-progress-w:220px; --hf-gap:12px; }
}


@media (max-width: 1024px){

  .hf-testi__track{
    grid-template-columns: 1fr;
    gap: 18px;
  }


  .hf-testi__card:nth-child(1),
  .hf-testi__card:nth-child(3),
  .hf-testi__card.pos-left,
  .hf-testi__card.pos-right{
    display: none !important;
  }

  .hf-testi__card:nth-child(2),
  .hf-testi__card.pos-center{
    display: flex !important;
    grid-column: 1;
  }


  :root{ --hf-h: 188px; --hf-progress-w:200px; --hf-controls-bottom:18px; }
  .hf-testi__card.is-center{ padding:24px; }
  .hf-testi__card.is-center .hf-testi__text{ font-size:15px; line-height:1.65; }


  .hf-testi__nav{ display:none !important; }
}


@media (max-width: 820px){
  .hf-testi__viewport{
    max-width: 720px;
    padding: 12px 18px calc(var(--hf-controls-bottom) + 56px);
  }
  :root{ --hf-h: 184px; --hf-progress-w:180px; }
  .hf-testi__rate{ padding:7px 10px; border-radius:10px; }
  .hf-testi__avatar{ width:40px; height:40px; }
}


@media (max-width: 600px){
  :root{
    --hf-h: auto;            
    --hf-progress-w: 160px;
    --hf-controls-bottom: 16px;
  }
  .hf-testi__card,
  .hf-testi__card.is-center{
    padding: 18px;
    min-height: 0;
  }
  .hf-testi__text{ font-size:14px; line-height:1.6; margin-bottom:14px; }
  .hf-testi__card.is-center .hf-testi__text{ font-size:14.5px; line-height:1.65; }

  .hf-testi__who{ gap:10px; }
  .hf-testi__avatar{ width:38px; height:38px; }
  .hf-testi__name{ font-size:15px; }
  .hf-testi__date{ font-size:11.5px; }
  .hf-testi__rate{ padding:6px 10px; font-size:14px; }

  .hf-testi__card:nth-child(1),
  .hf-testi__card:nth-child(3){ display:none !important; }
  .hf-testi__card:nth-child(2){ display:flex !important; grid-column:1; }
}

@media (max-width: 420px){
  .hf-testi__viewport{ padding: 8px 14px calc(var(--hf-controls-bottom) + 52px); }
  :root{ --hf-progress-w: 140px; }
  .hf-testi__rate{ gap:6px; }
  .hf-testi__star{ width:16px; height:16px; }
}


@media (max-width:600px){
  :root{
    --hf-arrow-size: 32px; 
    --hf-gap: 10px;         
  }
  .hf-testi__nav{
    font-size:22px;
  }
}


@media (max-width:1024px){
  .hf-testi__nav{
    display:flex !important;
  }
}


@media (max-width:1024px){
  .hf-testi__nav{
    bottom: calc(var(--hf-controls-bottom) - 30px) !important;
  }
}

@media (max-width:600px){
  .hf-testi__nav{
    bottom: calc(var(--hf-controls-bottom) - 28px) !important;
  }
}


@media (max-width:600px){
  .hf-testi__card{
    display: flex !important;
    grid-column: 1;
    background: var(--hf-dark) !important;  
    color: #fff !important;
    border: 0 !important;
    box-shadow: 0 18px 36px rgba(0,0,0,.12) !important;
    padding: 24px !important;
  }

  .hf-testi__text{
    color: #fff !important;
    font-size: 15px;
    line-height: 1.65;
    margin-bottom: 14px;
  }

  .hf-testi__avatar{
    display: block !important;
    width: 42px;
    height: 42px;
    border: 2px solid #fff;
  }

  .hf-testi__name{ color:#fff !important; }
  .hf-testi__date{ color:#d2d6de !important; }


  .hf-testi__rate{
    background:#fff;
    color:#111;
  }
}

@media (max-width:600px){

  .hf-testi__card{
    display: none !important;
    grid-column: 1;
    background: var(--hf-dark) !important; 
    color: #fff !important;
    border: 0 !important;
    box-shadow: 0 18px 36px rgba(0,0,0,.12) !important;
    padding: 24px !important;
  }

  .hf-testi__card[aria-current="true"]{
    display: flex !important;
  }

  .hf-testi__text{
    color: #fff !important;
    font-size: 15px;
    line-height: 1.65;
    margin-bottom: 14px;
  }

  .hf-testi__avatar{
    display: block !important;
    width: 42px;
    height: 42px;
    border: 2px solid #fff;
  }

  .hf-testi__name{ color:#fff !important; }
  .hf-testi__date{ color:#d2d6de !important; }

  .hf-testi__rate{
    background:#fff;
    color:#111;
  }
}


@media (min-width:1025px){
  :root{
    --hf-arrow-size: 52px;   
  }
  .hf-testi__nav{
    font-size: 54px;      
  }
}

.hf-testi__nav:hover{
  background: transparent !important;
  border-radius: 0 !important;
  color: inherit !important;
}

@media (max-width:1024px) and (min-width:601px){
  :root{
    --hf-arrow-size: 44px;   
  }
  .hf-testi__nav{ font-size:36px; }
}

@media (max-width:600px){
  :root{
    --hf-arrow-size: 38px;
  }
  .hf-testi__nav{ font-size:36px; }
}