/* ── Divider ── */
.ref-divider{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-soft);margin-bottom:18px;display:flex;align-items:center;gap:10px;}
.ref-divider span{flex:1;height:1px;background:var(--rule-s);display:block;}

/* ── Carrousel wrapper ── */
.ref-carousel-wrap {
  position: relative;
  margin-bottom: 36px;
  padding: 0 28px;
}

/* ── Viewport ── */
.ref-viewport {
  overflow: hidden;
  border-radius: 14px;
}

/* Track */
.ref-track {
  display: flex;
  gap: 20px;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

/* ── Carte ── */
.ref-card {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 28px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: start;
  flex-shrink: 0;
  transition: box-shadow 0.5s ease, border-color 0.5s ease;
}
.ref-card.active {
  box-shadow: 0 8px 32px rgba(37,99,168,0.10);
  border-color: var(--blue-bd);
}

.ref-main{}
.ref-header{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.ref-avatar{width:34px;height:34px;border-radius:8px;background:var(--blue-bg);border:1px solid var(--blue-bd);display:flex;align-items:center;justify-content:center;font-family:'Fraunces',serif;font-optical-sizing:auto;font-size:13px;font-weight:600;color:var(--blue);}
.ref-name{font-size:13.5px;font-weight:600;color:var(--ink);}
.ref-sub{font-size:11.5px;color:var(--ink-soft);font-weight:300;}
.ref-quote{font-size:13.5px;color:var(--ink-mid);line-height:1.75;font-weight:300;font-style:italic;margin-bottom:16px;}
.ref-author{font-size:12px;color:var(--ink-soft);}
.ref-author strong{color:var(--ink);font-weight:500;}
.ref-stats{display:flex;flex-direction:column;gap:10px;min-width:160px;}
.ref-stat{background:var(--sand);border:1px solid var(--rule);border-radius:10px;padding:14px 16px;text-align:center;}
.ref-stat-blue{background:var(--blue-bg);border-color:var(--blue-bd);}
.ref-stat-n{font-family:'Fraunces',serif;font-optical-sizing:auto;font-size:22px;font-weight:600;color:var(--ink);}
.ref-stat-blue .ref-stat-n{color:var(--blue);}
.ref-stat-l{font-size:11px;color:var(--ink-soft);font-weight:300;margin-top:3px;}

/* ── Flèches — superposées sur le viewport, centrées verticalement ── */
.ref-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s;
  box-shadow: 0 2px 12px rgba(0,0,0,0.10);
}
.ref-arrow:hover {
  background: var(--blue-bg);
  border-color: var(--blue-bd);
  box-shadow: 0 4px 18px rgba(37,99,168,0.18);
  transform: translateY(-50%) scale(1.07);
}
.ref-arrow svg { width: 16px; height: 16px; color: var(--ink-soft); transition: color 0.15s; }
.ref-arrow:hover svg { color: var(--blue); }
/* Flèches à l'intérieur du masque, alignées sur la zone peek */
.ref-arrow-prev { left: -22px; }
.ref-arrow-next { right: -22px; }
.ref-arrow:disabled { opacity: 0.2; pointer-events: none; }

/* ── Dots ── */
.ref-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 20px;
}
.ref-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--rule);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.25s, width 0.25s, border-radius 0.25s;
}
.ref-dot.active {
  background: var(--blue);
  width: 20px;
  border-radius: 4px;
}

/* ── Compteur ── */
.ref-counter {
  text-align: center;
  font-size: 11.5px;
  color: var(--ink-soft);
  margin-top: 10px;
  font-weight: 300;
  letter-spacing: 0.04em;
}

/* ── Responsive ── */
@media (max-width: 600px) {
  .ref-card { grid-template-columns: 1fr; }
  .ref-stats { flex-direction: row; min-width: unset; }
  .ref-arrow { width: 32px; height: 32px; }
}