/* Highlights — direction visuelle V2 */
.clips-page{--clips-navy:#06162f;--clips-blue:#1167d8;--clips-red:#ed2939;--clips-ink:#0b1730;--clips-muted:#68768c;--clips-line:#dfe6ef;padding:20px 0 64px;background:#f3f6fa;color:var(--clips-ink)}
.clips-page>.bbd-shell{width:min(1240px,calc(100% - 32px));max-width:none;padding:0}

/* Hero éditorial */
.clips-hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 170px;align-items:center;min-height:250px;overflow:hidden;padding:35px 38px 30px;border-radius:24px;color:#fff;background:radial-gradient(circle at 82% 18%,rgba(17,103,216,.62),transparent 30%),radial-gradient(circle at 72% 110%,rgba(237,41,57,.28),transparent 32%),linear-gradient(135deg,#06142b 0%,#0a2348 61%,#092d60 100%);box-shadow:0 22px 52px rgba(6,22,47,.2)}
.clips-hero::after{content:"HIGHLIGHTS";position:absolute;right:-20px;bottom:-26px;color:rgba(255,255,255,.035);font-size:82px;font-weight:1000;letter-spacing:-.06em;pointer-events:none}
.clips-hero__copy,.clips-hero__visual,.clips-hero__figures{position:relative;z-index:1}
.clips-hero__eyebrow,.clips-heading__eyebrow{margin:0;color:#8dc9ff;font-size:11px;font-weight:950;letter-spacing:.14em}
.clips-hero__eyebrow{display:flex;align-items:center;gap:8px}
.clips-hero__eyebrow span{width:8px;height:8px;border-radius:50%;background:var(--clips-red);box-shadow:0 0 0 5px rgba(237,41,57,.16)}
.clips-hero h1{margin:14px 0 10px;font-size:clamp(38px,5vw,58px);line-height:.92;letter-spacing:-.058em;font-weight:1000}
.clips-hero h1 em{color:#70b9ff;font-style:normal}
.clips-hero__intro{max-width:590px;margin:0;color:rgba(255,255,255,.68);font-size:14px;font-weight:650;line-height:1.55}
.clips-hero__visual{display:grid;place-items:center;justify-self:center;width:125px;height:125px;border:1px solid rgba(255,255,255,.18);border-radius:50%;background:rgba(255,255,255,.07);box-shadow:0 0 0 18px rgba(255,255,255,.025)}
.clips-hero__visual strong{position:absolute;bottom:21px;color:rgba(255,255,255,.52);font-size:9px;letter-spacing:.22em}
.clips-hero__play{display:grid;width:52px;height:52px;place-items:center;border-radius:50%;background:#fff;box-shadow:0 10px 25px rgba(0,0,0,.22)}
.clips-hero__play svg{width:25px;fill:var(--clips-blue);transform:translateX(1px)}
.clips-hero__figures{position:absolute;left:38px;bottom:25px;display:flex;gap:10px;transform:translateX(360px)}
.clips-hero__figures span{padding:7px 11px;border:1px solid rgba(255,255,255,.13);border-radius:9px;background:rgba(255,255,255,.07);color:rgba(255,255,255,.62);font-size:10px;font-weight:750}
.clips-hero__figures strong{margin-right:3px;color:#fff;font-size:13px}

.clips-wrap{padding-top:27px}
.clips-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:0 2px 18px}
.clips-heading__eyebrow{color:var(--clips-blue)}
.clips-heading h2{margin:4px 0 0;font-size:26px;line-height:1.05;letter-spacing:-.04em;font-weight:950}
.clips-heading>p{max-width:360px;margin:0;color:var(--clips-muted);font-size:12px;font-weight:650;text-align:right}
.clips-filters{display:flex;overflow-x:auto;gap:7px;margin:-3px 0 17px;padding:2px 1px 5px;scrollbar-width:none}
.clips-filters::-webkit-scrollbar{display:none}
.clips-filter{flex:0 0 auto;padding:8px 12px;border:1px solid var(--clips-line);border-radius:999px;background:#fff;color:#536177;cursor:pointer;font-family:inherit;font-size:11px;font-weight:850;transition:.15s ease}
.clips-filter:hover{border-color:#b9c8da;color:var(--clips-ink)}
.clips-filter.is-active{border-color:var(--clips-navy);background:var(--clips-navy);color:#fff}

/* États */
.clips-loading{display:flex;min-height:250px;flex-direction:column;align-items:center;justify-content:center;gap:14px;border:1px solid var(--clips-line);border-radius:20px;background:#fff;color:var(--clips-muted);font-size:13px}
.clips-spinner{width:36px;height:36px;border:3px solid #e4eaf2;border-top-color:var(--clips-blue);border-radius:50%;animation:clips-spin .7s linear infinite}
@keyframes clips-spin{to{transform:rotate(360deg)}}
.clips-empty{padding:54px 24px;border:1px solid var(--clips-line);border-radius:20px;background:#fff;color:var(--clips-muted);font-size:14px;line-height:1.7;text-align:center}

/* Sections et grille */
.clips-date-section{margin-bottom:34px}
.clips-date-title{display:flex;align-items:center;gap:12px;margin:0 0 13px;color:#536177;font-size:11px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.clips-date-title::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--clips-red)}
.clips-date-title::after{content:"";flex:1;height:1px;background:var(--clips-line)}
.clips-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.clips-grid--feed{margin-top:14px}

/* Carte vidéo */
.clip-card{all:unset;box-sizing:border-box;cursor:pointer;display:flex;min-width:0;overflow:hidden;flex-direction:column;border:1px solid var(--clips-line);border-radius:17px;background:#fff;box-shadow:0 8px 24px rgba(11,23,48,.065);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.clip-card:hover{transform:translateY(-3px);border-color:#c5d3e5;box-shadow:0 16px 34px rgba(11,23,48,.12)}
.clip-card:focus-visible{outline:3px solid rgba(17,103,216,.3);outline-offset:3px}
.clip-card__thumb{position:relative;display:flex;aspect-ratio:16/9;overflow:hidden;align-items:flex-end;background:radial-gradient(circle at 84% 21%,color-mix(in srgb,var(--clip-accent) 64%,transparent),transparent 34%),linear-gradient(135deg,#06142b,#122c55)}
.clip-card__thumb::before{content:"BBD";position:absolute;left:14px;top:9px;color:rgba(255,255,255,.055);font-size:48px;font-weight:1000;letter-spacing:-.08em}
.clip-card__photo{position:absolute;right:2%;bottom:0;width:auto;height:96%;object-fit:contain;object-position:bottom right;opacity:.98;filter:drop-shadow(-7px 3px 13px rgba(0,0,0,.42));pointer-events:none;transition:transform .25s ease}
.clip-card:hover .clip-card__photo{transform:scale(1.035)}
.clip-card__performance{position:absolute;z-index:2;top:25px;left:19px;display:grid;grid-template-columns:auto auto;align-items:end;color:#fff;text-shadow:0 3px 12px rgba(0,0,0,.35)}
.clip-card__performance strong{font-size:45px;line-height:.78;letter-spacing:-.07em;font-weight:1000}
.clip-card__performance span{margin-left:5px;font-size:11px;font-weight:950;letter-spacing:.08em}
.clip-card__performance small{grid-column:1/3;margin-top:9px;color:rgba(255,255,255,.67);font-size:9px;font-weight:850;letter-spacing:.05em}
.clip-card__play{position:absolute;z-index:4;top:48%;left:27%;filter:drop-shadow(0 8px 13px rgba(0,0,0,.3));transition:transform .18s ease}
.clip-card:hover .clip-card__play{transform:scale(1.1)}
.clip-card__matchup{position:absolute;z-index:3;right:0;bottom:0;left:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:6px;padding:26px 12px 9px;background:linear-gradient(to top,rgba(5,13,29,.96),rgba(5,13,29,0))}
.clip-card__mteam{display:flex;min-width:0;align-items:center;gap:5px;color:rgba(255,255,255,.82);font-size:10px;font-weight:900;letter-spacing:.04em}
.clip-card__mteam--r{flex-direction:row-reverse}
.clip-card__tlogo{width:21px;height:21px;flex-shrink:0;object-fit:contain;filter:drop-shadow(0 1px 3px rgba(0,0,0,.5))}
.clip-card__mscore{display:flex;align-items:center;gap:4px;color:#fff;font-size:12px;font-weight:950;white-space:nowrap}
.clip-card__result{display:inline-block;padding:2px 5px;border-radius:5px;font-size:9px;font-weight:950;letter-spacing:.04em}
.clip-card__result--v{background:#dcfce7;color:#15803d}.clip-card__result--d{background:#fee2e2;color:#b91c1c}
.clip-card__info{position:relative;display:flex;min-height:94px;flex-direction:column;padding:12px 14px}
.clip-card__date{margin:0 0 3px;color:#8290a5;font-size:9px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.clip-card__name{display:flex;align-items:center;gap:6px;margin:0;color:var(--clips-ink);font-size:16px;font-weight:950;letter-spacing:-.025em}
.clip-card__flag{font-size:12px}
.clip-card__stats{display:flex;flex-wrap:wrap;gap:5px;margin:7px 62px 0 0;color:#415069;font-size:10px;font-weight:850}
.clip-card__stats span{padding:3px 7px;border-radius:6px;background:#f1f5f9;white-space:nowrap}
.clip-card__min{color:#0758b7!important;background:#eaf3ff!important}
.clip-card__info>.clip-vote{position:absolute;right:11px;bottom:11px}
.clip-vote{gap:3px}.clip-vote__btn{width:25px;height:25px;padding:0;font-size:12px}.clip-vote__score{min-width:18px;font-size:11px}

/* Une seule vraie vedette, puis le flux compact. */
.clip-card--featured{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(260px,.75fr);min-height:305px;border:0;background:var(--clips-navy);color:#fff;box-shadow:0 18px 42px rgba(6,22,47,.18)}
.clip-card--featured .clip-card__thumb{aspect-ratio:auto;min-height:305px}
.clip-card--featured .clip-card__thumb::before{content:"À VOIR";top:18px;left:22px;color:rgba(255,255,255,.08);font-size:61px}
.clip-card--featured .clip-card__photo{right:8%;height:103%}
.clip-card--featured .clip-card__performance{top:45px;left:34px}
.clip-card--featured .clip-card__performance strong{font-size:70px}
.clip-card--featured .clip-card__performance span{font-size:14px}
.clip-card--featured .clip-card__performance small{font-size:11px}
.clip-card--featured .clip-card__play{top:55%;left:29%}
.clip-card--featured .clip-card__play svg{width:58px;height:58px}
.clip-card--featured .clip-card__matchup{padding:34px 22px 14px}
.clip-card--featured .clip-card__info{justify-content:center;min-height:0;padding:30px;background:radial-gradient(circle at 100% 0%,rgba(17,103,216,.3),transparent 46%),var(--clips-navy)}
.clip-card--featured .clip-card__date{color:#70b9ff;font-size:10px}
.clip-card--featured .clip-card__name{color:#fff;font-size:25px}
.clip-card--featured .clip-card__stats{margin-top:14px;margin-right:0;color:#fff;font-size:11px}
.clip-card--featured .clip-card__stats span{padding:6px 9px;background:rgba(255,255,255,.1)}
.clip-card--featured .clip-card__min{color:#8dc9ff!important;background:rgba(17,103,216,.18)!important}
.clip-card--featured .clip-card__info>.clip-vote{right:auto;bottom:27px;left:30px}
.clip-card--featured .clip-vote__btn{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.08)}

/* Archives */
.clips-older-section{margin-top:44px;padding-top:25px;border-top:1px solid var(--clips-line)}
.clips-older-list{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
.clips-older-item{overflow:hidden;border:1px solid var(--clips-line);border-radius:14px;background:#fff;box-shadow:0 5px 18px rgba(11,23,48,.04)}
.clips-older-btn{display:flex;width:100%;align-items:center;gap:14px;padding:15px 17px;border:0;background:none;cursor:pointer;color:inherit;font-family:inherit;text-align:left;transition:background .15s}
.clips-older-btn:hover,.clips-older-btn--open{background:#f5f8fc}
.clips-older-date{min-width:112px;color:var(--clips-ink);font-size:12px;font-weight:900;text-transform:uppercase}
.clips-older-names{flex:1;overflow:hidden;color:var(--clips-muted);font-size:12px;font-weight:650;text-overflow:ellipsis;white-space:nowrap}
.clips-older-count{padding:4px 9px;border-radius:999px;background:#eaf3ff;color:#0758b7;font-size:10px;font-weight:900;white-space:nowrap}
.clips-older-chevron{flex-shrink:0;color:#8290a5;transition:transform .2s}.clips-older-btn--open .clips-older-chevron{transform:rotate(180deg)}
.clips-older-grid{padding:14px;border-top:1px solid var(--clips-line)}

/* Lecteur */
.clips-modal{position:fixed;z-index:9999;inset:0;display:flex;align-items:center;justify-content:center;padding:18px}
.clips-modal__backdrop{position:absolute;inset:0;background:rgba(3,10,23,.84);backdrop-filter:blur(8px)}
.clips-modal__inner{position:relative;z-index:1;display:flex;width:100%;max-width:min(1120px,96vw);max-height:94vh;overflow:auto;flex-direction:column;gap:7px;padding:21px;border:1px solid rgba(255,255,255,.1);border-radius:20px;background:#07162d;box-shadow:0 24px 80px rgba(0,0,0,.46)}
.clips-modal__close{position:absolute;z-index:2;top:12px;right:12px;width:35px;height:35px;padding:0;border:1px solid rgba(255,255,255,.14);border-radius:50%;background:rgba(255,255,255,.08);color:#fff;cursor:pointer;font-size:22px;line-height:1}
.clips-modal__close:hover{background:rgba(255,255,255,.15)}
.clips-modal__title{margin:0;padding-right:45px;color:#fff;font-size:21px;font-weight:950;letter-spacing:-.025em}
.clips-modal__meta{margin:0;color:rgba(255,255,255,.56);font-size:12px;font-weight:650}
.clips-modal__video{width:100%;max-height:72vh;margin-top:8px;border-radius:11px;background:#000}
.clips-modal__actions{display:flex;gap:8px;align-items:center;margin-top:5px}
.clips-modal__btn{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border:0;border-radius:9px;cursor:pointer;font-family:inherit;font-size:12px;font-weight:850;text-decoration:none}
.clips-modal__btn--dark{background:#fff;color:#07162d}.clips-modal__btn--light{background:rgba(255,255,255,.1);color:#fff}.clips-modal__btn:hover{filter:brightness(.94)}
.clips-modal .clip-vote__btn{border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.08)}

@media(max-width:900px){
  .clips-hero{grid-template-columns:minmax(0,1fr) 130px;min-height:230px;padding:30px}
  .clips-hero__visual{width:105px;height:105px}.clips-hero__figures{left:30px;bottom:22px;transform:translateX(330px)}
  .clips-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .clip-card--featured{grid-template-columns:minmax(0,1.3fr) minmax(225px,.7fr)}
}
@media(max-width:640px){
  .clips-page{padding-top:10px}.clips-page>.bbd-shell{width:calc(100% - 20px);padding:0}
  .clips-hero{display:block;min-height:0;padding:25px 20px 24px;border-radius:20px}.clips-hero::after{font-size:48px}
  .clips-hero h1{font-size:39px}.clips-hero__intro{max-width:88%;font-size:12px}.clips-hero__visual{position:absolute;right:19px;top:25px;width:63px;height:63px}.clips-hero__visual strong{display:none}.clips-hero__play{width:35px;height:35px}.clips-hero__play svg{width:19px}
  .clips-hero__figures{position:static;margin-top:18px;transform:none}.clips-hero__figures span{font-size:9px}
  .clips-wrap{padding-top:22px}.clips-heading{align-items:flex-start}.clips-heading h2{font-size:22px}.clips-heading>p{display:none}
  .clips-grid{grid-template-columns:1fr;gap:12px}.clip-card__info{min-height:82px}
  .clip-card--featured{display:flex;min-height:0}.clip-card--featured .clip-card__thumb{min-height:0;aspect-ratio:16/10}.clip-card--featured .clip-card__info{min-height:132px;padding:18px}.clip-card--featured .clip-card__name{font-size:20px}.clip-card--featured .clip-card__info>.clip-vote{right:13px;bottom:13px;left:auto}.clip-card--featured .clip-card__performance{top:29px;left:22px}.clip-card--featured .clip-card__performance strong{font-size:54px}.clip-card--featured .clip-card__play{left:28%}
  .clips-older-btn{flex-wrap:wrap;gap:7px 10px}.clips-older-date{min-width:0}.clips-older-names{order:3;width:100%;flex-basis:100%}.clips-older-count{margin-left:auto}
  .clips-modal{padding:8px}.clips-modal__inner{padding:14px;border-radius:15px}.clips-modal__actions{flex-wrap:wrap}.clips-modal #modal-vote{margin-left:0!important}
}