/* V32.1 — Timelapse du classement sur /classement */

.ranking-video-launch{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:22px;
  align-items:center;
  margin:22px 0;
  padding:20px;
}
.ranking-video-launch-copy h2{
  margin:5px 0 7px;
  font-size:clamp(20px,4vw,28px);
  letter-spacing:-.035em;
}
.ranking-video-launch-copy p{
  max-width:760px;
  margin:0;
  color:#9db0c2;
  font-size:12px;
  line-height:1.6;
}
.ranking-video-launch-meta{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:12px;
}
.ranking-video-launch-meta span{
  padding:6px 9px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:999px;
  background:rgba(255,255,255,.025);
  color:#8fa6b9;
  font-size:8px;
  font-weight:800;
}
.ranking-video-launch-button{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-width:250px;
  min-height:58px;
  padding:11px 15px;
  border:1px solid rgba(112,169,217,.34);
  border-radius:15px;
  background:linear-gradient(180deg,rgba(69,127,176,.17),rgba(35,78,116,.09));
  color:#e4f0fa;
  font:inherit;
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  transition:transform .18s ease,border-color .18s ease,background .18s ease;
}
.ranking-video-launch-button:hover{
  transform:translateY(-1px);
  border-color:rgba(128,187,237,.48);
  background:linear-gradient(180deg,rgba(75,142,198,.23),rgba(38,86,128,.13));
}
.ranking-video-launch-button>span:first-child{font-size:22px}
.ranking-video-launch-button>span:last-child{display:grid;text-align:left}
.ranking-video-launch-button strong{font-size:11px}
.ranking-video-launch-button small{margin-top:3px;color:#91a9bd;font-size:8px;font-weight:650}

body.wall-video-open{overflow:hidden}
.wall-video-modal[hidden]{display:none!important}
.wall-video-modal{
  position:fixed;
  inset:0;
  z-index:180;
  display:grid;
  place-items:center;
  padding:14px;
}
.wall-video-backdrop{
  position:absolute;
  inset:0;
  border:0;
  background:rgba(2,8,16,.80);
  backdrop-filter:blur(8px);
  cursor:pointer;
}
.wall-video-panel{
  position:relative;
  z-index:1;
  width:min(980px,100%);
  max-height:min(94vh,920px);
  overflow:auto;
  padding:18px;
  border:1px solid rgba(139,177,210,.24);
  border-radius:24px;
  background:linear-gradient(145deg,rgba(11,28,47,.99),rgba(5,15,27,.995));
  box-shadow:0 28px 80px rgba(0,0,0,.55);
}
.wall-video-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}
.wall-video-head h2{
  margin:4px 0 0;
  font-size:24px;
  letter-spacing:-.04em;
}
.wall-video-head p{
  max-width:650px;
  margin:7px 0 0;
  color:#92a7ba;
  font-size:11px;
  line-height:1.55;
}
.wall-video-close{
  flex:0 0 38px;
  width:38px;
  height:38px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:50%;
  background:rgba(255,255,255,.045);
  color:#d9e6f0;
  font:700 24px/1 system-ui;
  cursor:pointer;
}
.wall-video-layout{
  display:grid;
  grid-template-columns:minmax(250px,320px) minmax(0,1fr);
  gap:22px;
  align-items:start;
  margin-top:18px;
}
.wall-video-preview-wrap{
  position:relative;
  width:min(100%,300px);
  margin:0 auto;
}
.wall-video-canvas{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:9/16;
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  background:#06101d;
  box-shadow:0 16px 36px rgba(0,0,0,.32);
}
.wall-video-preview-badge{
  position:absolute;
  left:10px;
  right:10px;
  bottom:10px;
  padding:6px 8px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:9px;
  background:rgba(4,12,22,.75);
  backdrop-filter:blur(8px);
  color:#b7c9d9;
  font-size:8px;
  font-weight:800;
  text-align:center;
}
.wall-video-options{display:grid;gap:13px;min-width:0}
.wall-video-field{
  min-width:0;
  margin:0;
  padding:13px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:14px;
  background:rgba(255,255,255,.025);
}
fieldset.wall-video-field{border:1px solid rgba(255,255,255,.075)}
.wall-video-label{
  display:block;
  margin:0 0 9px;
  color:#dce9f4;
  font-size:10px;
  font-weight:800;
}
.wall-video-dates{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.wall-video-dates label{
  display:grid;
  gap:5px;
  color:#8197aa;
  font-size:8px;
  font-weight:700;
}
.wall-video-dates input{
  width:100%;
  min-width:0;
  height:40px;
  padding:0 10px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:10px;
  background:#081728;
  color:#edf6ff;
  font:700 10px system-ui;
  color-scheme:dark;
}
.wall-video-presets{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:9px;
}
.wall-video-presets button{
  min-height:32px;
  padding:6px 10px;
  border:1px solid rgba(123,160,194,.18);
  border-radius:9px;
  background:rgba(66,103,136,.06);
  color:#a9bfd2;
  font:800 8px system-ui;
  cursor:pointer;
}
.wall-video-presets button:hover,
.wall-video-presets button.is-active{
  border-color:rgba(123,185,237,.40);
  background:rgba(79,141,194,.13);
  color:#eef7ff;
}
.wall-video-choice{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px;
}
.wall-video-choice-three{grid-template-columns:repeat(3,minmax(0,1fr))}
.wall-video-choice label{position:relative;cursor:pointer}
.wall-video-choice input{position:absolute;opacity:0;pointer-events:none}
.wall-video-choice span{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:7px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:10px;
  background:rgba(255,255,255,.025);
  color:#9db1c3;
  font-size:8px;
  font-weight:800;
  text-align:center;
}
.wall-video-choice input:checked+span{
  border-color:rgba(118,184,239,.50);
  background:rgba(79,143,197,.14);
  color:#f2f8fd;
  box-shadow:inset 0 0 0 1px rgba(112,176,231,.09);
}
.wall-video-summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(6,18,32,.68);
  color:#8fa6ba;
  font-size:9px;
}
.wall-video-summary strong{
  color:#d6e7f5;
  font-size:10px;
  text-align:right;
}
.wall-video-create{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  width:100%;
  min-height:48px;
  border:1px solid rgba(109,180,238,.46);
  border-radius:13px;
  background:linear-gradient(180deg,rgba(55,139,207,.34),rgba(31,89,137,.26));
  color:#fff;
  font:850 11px system-ui;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(4,21,37,.20);
}
.wall-video-create:disabled{opacity:.52;cursor:not-allowed}
.wall-video-progress{
  display:grid;
  gap:7px;
  padding:13px;
  border:1px solid rgba(106,163,210,.16);
  border-radius:13px;
  background:rgba(7,20,35,.60);
}
.wall-video-progress-track{
  height:7px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.07);
}
.wall-video-progress-track span{
  display:block;
  width:0;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#4d91c8,#8ac8f5);
  transition:width .18s linear;
}
.wall-video-progress strong{color:#e5f1fa;font-size:10px}
.wall-video-progress small{color:#8298aa;font-size:8px}
.wall-video-ready{
  display:grid;
  gap:10px;
  padding:13px;
  border:1px solid rgba(104,189,148,.20);
  border-radius:13px;
  background:rgba(38,114,80,.08);
}
.wall-video-ready-title{
  display:flex;
  align-items:center;
  gap:8px;
  color:#dff7e9;
  font-size:10px;
}
.wall-video-ready-title>span{
  display:grid;
  place-items:center;
  width:22px;
  height:22px;
  border-radius:50%;
  background:rgba(91,189,138,.15);
  color:#8de1b3;
}
.wall-video-ready-actions{display:grid;grid-template-columns:1fr;gap:7px}
.wall-video-ready-actions button{
  width:100%;
  min-height:42px;
  padding:8px;
  border:1px solid rgba(104,177,231,.36);
  border-radius:10px;
  background:rgba(53,129,188,.16);
  color:#e4f1fa;
  font:800 9px system-ui;
  cursor:pointer;
}
.wall-video-status{
  min-height:16px;
  margin:0;
  color:#a9bed0;
  font-size:8px;
  line-height:1.45;
}
.wall-video-status.is-error{color:#ffb1ba}
.wall-video-note{
  margin:0;
  color:#71879a;
  font-size:7px;
  line-height:1.45;
}

@media(max-width:760px){
  .ranking-video-launch{
    grid-template-columns:1fr;
    gap:15px;
    padding:16px;
  }
  .ranking-video-launch-button{
    width:100%;
    min-width:0;
  }
  .wall-video-modal{padding:8px}
  .wall-video-panel{max-height:96vh;padding:14px;border-radius:20px}
  .wall-video-head h2{font-size:21px}
  .wall-video-head p{font-size:10px}
  .wall-video-layout{grid-template-columns:1fr;gap:16px}
  .wall-video-preview-wrap{width:min(58vw,230px)}
  .wall-video-options{gap:10px}
  .wall-video-field{padding:11px}
}
@media(max-width:430px){
  .wall-video-dates{grid-template-columns:1fr}
  .wall-video-preview-wrap{width:min(64vw,220px)}
}