/* Page Clips — cartes propres */
body[data-page="clips"] .clips-grid{
  display:grid !important;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap:22px !important;
  align-items:start !important;
}

body[data-page="clips"] .clip-card{
  overflow:hidden !important;
  border-radius:18px !important;
  background:rgba(255,255,255,.12) !important;
  border:1px solid rgba(255,255,255,.20) !important;
  box-shadow:0 12px 28px rgba(0,0,0,.16) !important;
}

body[data-page="clips"] .clip-thumb{
  position:relative !important;
  display:block !important;
  aspect-ratio:16 / 9 !important;
  background:rgba(0,0,0,.18) !important;
  overflow:hidden !important;
  text-decoration:none !important;
}

body[data-page="clips"] .clip-thumb img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
}

body[data-page="clips"] .clip-no-thumb{
  width:100% !important;
  height:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  color:rgba(255,255,255,.86) !important;
  font-weight:900 !important;
}

body[data-page="clips"] .clip-play{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%, -50%) !important;
  width:54px !important;
  height:54px !important;
  border-radius:999px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:rgba(254,200,76,.95) !important;
  color:#09232F !important;
  font-size:22px !important;
  font-weight:900 !important;
  box-shadow:0 8px 22px rgba(0,0,0,.22) !important;
}

body[data-page="clips"] .clip-body{
  padding:14px 16px 16px !important;
}

body[data-page="clips"] .clip-body h2{
  margin:0 0 6px !important;
  font-family:Inter, sans-serif !important;
  font-size:17px !important;
  line-height:1.2 !important;
  font-weight:900 !important;
  color:#fff !important;
}

body[data-page="clips"] .clip-body p{
  margin:0 0 10px !important;
  font-size:13px !important;
  font-weight:800 !important;
  color:rgba(255,255,255,.82) !important;
}

body[data-page="clips"] .clip-meta{
  display:flex !important;
  justify-content:space-between !important;
  gap:10px !important;
  font-size:12px !important;
  font-weight:800 !important;
  color:rgba(255,255,255,.72) !important;
}

@media (max-width:640px){
  body[data-page="clips"] .clips-grid{
    grid-template-columns:1fr !important;
    gap:16px !important;
  }

  body[data-page="clips"] .clip-meta{
    flex-direction:column !important;
    gap:4px !important;
  }
}
/* CLIPS — filtres propres */
body[data-page="clips"] .clip-filters{
  display:flex !important;
  justify-content:flex-end !important;
  align-items:center !important;
  gap:12px !important;
  flex-wrap:wrap !important;
}

body[data-page="clips"] .clip-filters .input{
  width:auto !important;
  min-width:210px !important;
  height:46px !important;
  padding:0 42px 0 16px !important;
  border-radius:14px !important;
  border:1px solid rgba(255,255,255,.28) !important;
  background:
    linear-gradient(180deg, rgba(7,72,96,.92), rgba(5,55,78,.92)) !important;
  color:#fff !important;
  font-family:Inter, sans-serif !important;
  font-size:14px !important;
  font-weight:800 !important;
  box-shadow:
    0 10px 22px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.12) !important;
  cursor:pointer !important;
  outline:none !important;
  appearance:none !important;
  -webkit-appearance:none !important;
  -moz-appearance:none !important;
  background-image:
    linear-gradient(45deg, transparent 50%, #fff 50%),
    linear-gradient(135deg, #fff 50%, transparent 50%),
    linear-gradient(180deg, rgba(7,72,96,.92), rgba(5,55,78,.92)) !important;
  background-position:
    calc(100% - 22px) 19px,
    calc(100% - 16px) 19px,
    0 0 !important;
  background-size:
    6px 6px,
    6px 6px,
    100% 100% !important;
  background-repeat:no-repeat !important;
}

body[data-page="clips"] .clip-filters .input:hover{
  border-color:rgba(254,200,76,.75) !important;
  box-shadow:
    0 12px 26px rgba(0,0,0,.18),
    0 0 0 3px rgba(254,200,76,.10),
    inset 0 1px 0 rgba(255,255,255,.14) !important;
}

body[data-page="clips"] .clip-filters .input:focus{
  border-color:#FEC84C !important;
  box-shadow:
    0 12px 26px rgba(0,0,0,.18),
    0 0 0 3px rgba(254,200,76,.18),
    inset 0 1px 0 rgba(255,255,255,.14) !important;
}

body[data-page="clips"] .clip-filters .input option{
  background:#07506b !important;
  color:#fff !important;
  font-family:Inter, sans-serif !important;
  font-size:14px !important;
  font-weight:700 !important;
}

@media (max-width:640px){
  body[data-page="clips"] .clip-filters{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
  }

  body[data-page="clips"] .clip-filters .input{
    width:100% !important;
    min-width:0 !important;
  }
}
/* CLIPS — faux select custom propre */
body[data-page="clips"] .native-select-hidden{
  display:none !important;
}

body[data-page="clips"] .sofk-select{
  position:relative;
  min-width:210px;
  z-index:50;
}

body[data-page="clips"] .sofk-select-btn{
  width:100%;
  height:46px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:0 14px 0 16px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.28);
  background:linear-gradient(180deg, rgba(7,72,96,.96), rgba(5,55,78,.96));
  color:#fff;
  font-family:Inter, sans-serif;
  font-size:14px;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 10px 22px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.12);
}

body[data-page="clips"] .sofk-select-btn::after{
  content:"";
  width:8px;
  height:8px;
  border-right:2px solid #fff;
  border-bottom:2px solid #fff;
  transform:rotate(45deg) translateY(-2px);
  opacity:.95;
}

body[data-page="clips"] .sofk-select.open .sofk-select-btn{
  border-color:#FEC84C;
  box-shadow:0 12px 26px rgba(0,0,0,.18), 0 0 0 3px rgba(254,200,76,.18);
}

body[data-page="clips"] .sofk-select-menu{
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + 8px);
  max-height:260px;
  overflow:auto;
  padding:8px;
  border-radius:16px;
  background:rgba(5,55,78,.98);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 18px 38px rgba(0,0,0,.28);
  display:none;
}

body[data-page="clips"] .sofk-select.open .sofk-select-menu{
  display:block;
}

body[data-page="clips"] .sofk-select-option{
  width:100%;
  display:block;
  padding:10px 11px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:rgba(255,255,255,.86);
  font-family:Inter, sans-serif;
  font-size:14px;
  font-weight:800;
  text-align:left;
  cursor:pointer;
}

body[data-page="clips"] .sofk-select-option:hover{
  background:rgba(255,255,255,.12);
  color:#fff;
}

body[data-page="clips"] .sofk-select-option.active{
  background:#FEC84C;
  color:#09232F;
}

@media (max-width:640px){
  body[data-page="clips"] .sofk-select{
    width:100%;
    min-width:0;
  }
}