/* ================================
   Shorts Caroussel – Swiper + GA/A11Y + Perf
   ================================ */

.hn-shorts-caroussel{
  --gap:12px;
  --card-w:180px;
  --radius:14px;
  --ring:rgba(255,255,255,.15);
  color:#fff;
}

/* Header */
.hn-shorts-caroussel__head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:10px;
}
.hn-shorts-caroussel__title{
  margin:0;font:700 18px/1.2 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
}
.hn-shorts-caroussel__actions{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end;
}
.hn-shorts-caroussel__nav{display:flex;gap:8px}
.hn-shorts-caroussel__btn{
  width:36px;height:36px;border-radius:9px;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.15);color:#fff;cursor:pointer;
}
.hn-shorts-caroussel__btn:hover{background:rgba(255,255,255,.2)}
.hn-shorts-caroussel__btn:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* CTA "S’abonner" */
.hn-shorts-caroussel__follow{
  --yt:#ff0033;
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 14px;border-radius:999px;background:var(--yt);
  color:#fff;text-decoration:none;font-weight:700;line-height:1;
  border:1px solid rgba(255,255,255,.15);
  box-shadow:0 2px 8px rgba(255,0,51,.25);
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease;
}
.hn-shorts-caroussel__follow:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(255,0,51,.35)}
.hn-shorts-caroussel__follow:active{transform:translateY(0);box-shadow:0 2px 8px rgba(255,0,51,.25)}
.hn-shorts-caroussel__follow:focus-visible{outline:2px solid #fff;outline-offset:2px}
.hn-shorts-caroussel__follow-ic{display:inline-flex}
@media (max-width:360px){.hn-shorts-caroussel__follow{padding:8px 12px;font-weight:600}}

/* Swiper */
.hn-shorts-caroussel__swiper{overflow:hidden}
.hn-shorts-caroussel__swiper .swiper-wrapper{align-items:stretch}
.hn-shorts-caroussel__swiper .swiper-slide{width:var(--card-w) !important}

/* Cartes */
.hn-shorts-caroussel .hn-shortcard{
  display:block;position:relative;text-decoration:none;color:inherit;
}
.hn-shorts-caroussel .hn-shortcard:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:12px}
.hn-shorts-caroussel .hn-shortcard__frame{
  position:relative;width:100%;aspect-ratio:9/16;overflow:hidden;
  border-radius:var(--radius);background:#000;box-shadow:0 1px 2px rgba(0,0,0,.35);
  outline:1px solid var(--ring);
}
.hn-shorts-caroussel .hn-shortcard__thumb,
.hn-shorts-caroussel .hn-shortcard__preview iframe{
  position:absolute;inset:0;width:100%;height:100%;
}
.hn-shorts-caroussel .hn-shortcard__thumb{object-fit:cover;display:block}

/* Aperçu hover (desktop) — désactivé si prefers-reduced-motion */
.hn-shorts-caroussel .hn-shortcard__preview{
  position:absolute;inset:0;opacity:0;transition:opacity .15s ease;pointer-events:none;z-index:0;
}
.hn-shorts-caroussel .hn-shortcard:hover .hn-shortcard__preview{opacity:1}
@media (prefers-reduced-motion: reduce){
  .hn-shorts-caroussel .hn-shortcard__preview{display:none}
}

/* Titre sous la vignette */
.hn-shorts-caroussel .hn-shortcard__title{
  margin:6px 2px 0;
  font:600 13px/1.25 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
  color:#f5f5f5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;min-height:calc(1.25em * 2);
}

/* Slide CTA */
.hn-shorts-caroussel .hn-shortcard--cta .hn-shortcard__frame{
  display:grid;place-items:center;background:linear-gradient(135deg,#111 0%,#333 100%);
}
.hn-shorts-caroussel .hn-shortcard__frame--cta{outline:1px dashed rgba(255,255,255,.35)}
.hn-shorts-caroussel .hn-shortcard__cta-label{
  display:inline-block;padding:10px 14px;border-radius:999px;background:#fff;color:#111;font-weight:700
}
.hn-shorts-caroussel .hn-shortcard__title--cta{color:#ddd;text-align:center}

/* Breakpoints (mobile-first) */
@media (min-width:640px){
  .hn-shorts-caroussel{--card-w:200px;--gap:14px}
  .hn-shorts-caroussel__title{font-size:19px}
}
@media (min-width:960px){
  .hn-shorts-caroussel{--card-w:220px}
  .hn-shorts-caroussel__title{font-size:20px}
}
@media (min-width:1050px){
  .hn-shorts-caroussel{--card-w:240px}
  .hn-shorts-caroussel__title{font-size:21px}
}
@media (min-width:1250px){
  .hn-shorts-caroussel{--card-w:260px}
  .hn-shorts-caroussel__title{font-size:22px}
}