/* CF TV v9 — identité Community Pop : vivante, lumineuse et premium */
:root{
  --bg:#100622;
  --bg-soft:#170a32;
  --surface:#211042;
  --surface-2:#291451;
  --surface-3:#341866;
  --line:rgba(255,255,255,.11);
  --line-strong:rgba(255,255,255,.2);
  --text:#fffaff;
  --muted:#c1b5d6;
  --muted-2:#8e7fa9;
  --violet:#9b5cff;
  --violet-light:#d8b7ff;
  --violet-dark:#6730ce;
  --green:#35e6a6;
  --red:#ff3d81;
  --orange:#ff9d2e;
  --blue:#25c7ff;
  --pink:#ff47bc;
  --lime:#c7f43a;
  --shadow:0 30px 90px rgba(17,2,42,.42);
}

html{background:#100622}
body{
  background:
    radial-gradient(circle at 95% 8%,rgba(255,70,188,.18),transparent 30%),
    radial-gradient(circle at 4% 38%,rgba(37,199,255,.13),transparent 28%),
    linear-gradient(155deg,#100622 0%,#170a32 46%,#0d1435 100%);
  background-attachment:fixed;
}
body::before{
  background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);
  background-size:54px 54px;
  mask-image:linear-gradient(to bottom,black,transparent 82%);
}
::selection{background:rgba(255,71,188,.5);color:#fff}
.ambient{filter:blur(105px);opacity:.65}
.ambient-one{width:620px;height:620px;right:-210px;top:-270px;background:linear-gradient(145deg,#ff3d8d,#8f47ff)}
.ambient-two{width:560px;height:560px;left:-330px;top:38vh;background:linear-gradient(145deg,#25c7ff,#6b45ff);opacity:.36}

/* Navigation */
.site-header{border-bottom-color:rgba(255,255,255,.1);background:rgba(16,6,34,.7);backdrop-filter:blur(28px) saturate(175%)}
.brand-mark{
  border-color:rgba(255,255,255,.3);
  background:linear-gradient(145deg,#ff3d81 0%,#ff8b35 44%,#8c4dff 100%);
  box-shadow:0 10px 28px rgba(255,61,129,.3),inset 0 1px rgba(255,255,255,.4);
}
.brand-copy b{font-weight:900;letter-spacing:-.8px}
.brand-copy small{color:#c7b8df}
.main-nav{background:rgba(255,255,255,.065);border-color:rgba(255,255,255,.11)}
.main-nav a{color:#c7badb}
.main-nav a:hover{background:rgba(255,255,255,.1)}
.main-nav a.active{background:linear-gradient(135deg,rgba(255,71,188,.23),rgba(117,79,255,.26));box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.header-signal{color:#d7cce7}

/* Éléments partagés */
.kicker{color:#ff94d9}.kicker-dot{background:#ff47bc;box-shadow:0 0 0 5px rgba(255,71,188,.12),0 0 18px rgba(255,71,188,.75)}
.btn{border-radius:14px}
.btn-primary{
  color:white;
  background:linear-gradient(110deg,#ff3d81 0%,#ff7854 38%,#9b5cff 100%);
  background-size:160% 100%;
  border-color:rgba(255,255,255,.25);
  box-shadow:0 16px 38px rgba(255,61,129,.27),inset 0 1px rgba(255,255,255,.36);
}
.btn-primary:hover{background-position:100% 0;box-shadow:0 20px 48px rgba(255,61,129,.36),inset 0 1px rgba(255,255,255,.4)}
.btn-quiet{background:rgba(255,255,255,.075);border-color:rgba(255,255,255,.18);color:#fff}
.btn-quiet:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.3)}
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline-color:#ff81d2}
input{background:rgba(12,5,28,.72);border-color:rgba(255,255,255,.16)}
input:focus{background:rgba(24,9,50,.9);border-color:rgba(255,71,188,.62);box-shadow:0 0 0 4px rgba(255,71,188,.11)}

/* Hero */
.home-hero{min-height:700px;padding-top:86px}
.home-hero::before{
  content:"";position:absolute;z-index:-1;width:240px;height:240px;left:34%;top:12%;border-radius:52% 48% 62% 38%;
  background:linear-gradient(145deg,rgba(255,157,46,.17),rgba(255,71,188,.12));filter:blur(3px);transform:rotate(22deg);
}
.hero-copy h1{text-wrap:balance;text-shadow:0 12px 45px rgba(29,5,67,.35)}
.hero-copy h1 em{
  background:linear-gradient(100deg,#ffdf63 0%,#ff6db9 34%,#b78aff 67%,#63dcff 100%);
  background-size:180% auto;background-clip:text;-webkit-background-clip:text;color:transparent;
  animation:headline-shift 7s ease-in-out infinite alternate;
}
.hero-lead{color:#c9bddb;font-size:18px}
.trust-row{color:#b6a8cb}
.trust-icon{border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.075);color:#ffacde}
.hero-visual::before{inset:-4% -10% -12% -5%;background:conic-gradient(from 70deg,rgba(37,199,255,.22),rgba(155,92,255,.28),rgba(255,61,129,.3),rgba(255,157,46,.18),rgba(37,199,255,.22));filter:blur(38px);border-radius:50%}
.broadcast-card{
  background:linear-gradient(165deg,rgba(47,21,91,.96),rgba(17,8,39,.97));
  border-color:rgba(255,255,255,.19);
  box-shadow:0 55px 130px rgba(20,2,51,.58),0 0 0 1px rgba(255,255,255,.035),inset 0 1px rgba(255,255,255,.12);
}
.broadcast-topbar{background:rgba(255,255,255,.025);color:#a898c2}
.broadcast-screen{
  background:
    radial-gradient(circle at 82% 20%,rgba(37,199,255,.43),transparent 34%),
    radial-gradient(circle at 18% 82%,rgba(255,61,129,.36),transparent 34%),
    linear-gradient(135deg,#392067,#151039 72%);
}
.screen-grid{opacity:.65}
.signal-orbit{border-color:rgba(255,223,99,.2)}.signal-orbit i:nth-child(3){background:rgba(255,71,188,.13)}
.broadcast-screen>img{background:#fff;border-color:rgba(255,255,255,.92);box-shadow:0 18px 42px rgba(20,5,52,.38)}
.live-label{background:linear-gradient(105deg,rgba(255,61,129,.92),rgba(255,91,88,.86));color:#fff;border:1px solid rgba(255,255,255,.17)}
.broadcast-rail{background:linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,.04))}
.rail-heading b{color:#ff9edc}
.rail-channel:hover{background:linear-gradient(90deg,rgba(255,71,188,.1),rgba(37,199,255,.07))}
.rail-logo{background:#fff;border-color:rgba(255,255,255,.3)}
.rail-play{background:linear-gradient(135deg,rgba(255,61,129,.2),rgba(155,92,255,.2));color:#ffb6e2}
.floating-chip{background:rgba(35,14,71,.85);border-color:rgba(255,255,255,.18);color:#d3c8e2}.floating-chip b{color:#63dcff}

.vibe-ticker{
  position:relative;margin:0 calc(clamp(20px,4vw,64px) * -1) 38px;overflow:hidden;border-block:1px solid rgba(255,255,255,.15);
  background:linear-gradient(90deg,#ff3d81,#ff923a 27%,#985cff 61%,#25c7ff);transform:rotate(-1deg);box-shadow:0 14px 35px rgba(25,4,61,.25);
}
.vibe-ticker>div{width:max-content;min-width:100%;display:flex;justify-content:space-around;align-items:center;gap:28px;padding:12px 30px;color:#fff;font-size:11px;letter-spacing:.17em;font-weight:900;white-space:nowrap;text-shadow:0 1px 8px rgba(53,6,71,.25)}
.vibe-ticker span{padding:5px 9px;border-radius:6px;background:rgba(16,6,34,.28)}.vibe-ticker i{font-style:normal;color:#fff6a7}

/* Chiffres et catalogue */
.experience-strip{border-color:rgba(255,255,255,.14);background:linear-gradient(110deg,rgba(255,61,129,.09),rgba(155,92,255,.11) 50%,rgba(37,199,255,.08));box-shadow:0 24px 60px rgba(24,5,55,.18),inset 0 1px rgba(255,255,255,.07)}
.experience-strip>div{border-color:rgba(255,255,255,.1)}
.experience-strip>div:nth-child(1) strong{color:#ff89cc}.experience-strip>div:nth-child(2) strong{color:#ffcb68}.experience-strip>div:nth-child(3) strong{color:#ba9aff}.experience-strip>div:nth-child(4) strong{color:#61dbff}
.experience-strip span{color:#aa9abc}
.catalog-heading h2{background:linear-gradient(90deg,#fff,#ffd7ef 45%,#c7b1ff);background-clip:text;-webkit-background-clip:text;color:transparent}
.catalog-heading p{color:#bcaed0}
.catalog-count{padding:11px 15px;border:1px solid rgba(255,255,255,.13);border-radius:14px;background:rgba(255,255,255,.055)}
.catalog-count strong{color:#ff91d1}.catalog-count span{color:#a996bf}
.catalog-toolbar{border-color:rgba(255,255,255,.15);background:linear-gradient(145deg,rgba(38,17,76,.88),rgba(20,12,53,.86));box-shadow:0 22px 60px rgba(21,4,51,.28),inset 0 1px rgba(255,255,255,.06)}
.search-wrap input{background:rgba(10,5,26,.72)}
.search-wrap kbd{background:#32185f;color:#c9b8e2;box-shadow:0 2px 0 #100622}
.filter-label{color:#a18fb9}
.filter-scroll button{color:#b9abc9;border-radius:999px}
.filter-scroll button:hover{background:rgba(255,255,255,.09)}
.filter-scroll button.selected{
  color:#fff;background:linear-gradient(110deg,rgba(255,61,129,.27),rgba(143,78,255,.32));border-color:rgba(255,140,211,.25);box-shadow:inset 0 0 0 1px rgba(255,255,255,.04),0 7px 18px rgba(29,6,67,.16)
}

.cards{gap:19px}
.channel{
  border-color:rgba(255,255,255,.13);
  background:linear-gradient(180deg,rgba(40,18,77,.96),rgba(23,10,49,.98));
  box-shadow:0 16px 38px rgba(18,3,43,.19),inset 0 1px rgba(255,255,255,.045);
}
.channel:hover{transform:translateY(-8px) scale(1.015);border-color:rgba(255,140,211,.48);box-shadow:0 30px 65px rgba(20,4,48,.42),0 0 0 1px rgba(255,71,188,.1)}
.poster{background:linear-gradient(140deg,#5a1b71,#21104d 76%)}
.channel:nth-child(8n+1) .poster{background:linear-gradient(140deg,#a41969,#3a145d 78%)}
.channel:nth-child(8n+2) .poster{background:linear-gradient(140deg,#c34c2b,#4b1749 78%)}
.channel:nth-child(8n+3) .poster{background:linear-gradient(140deg,#5934bd,#201461 78%)}
.channel:nth-child(8n+4) .poster{background:linear-gradient(140deg,#087da9,#142657 78%)}
.channel:nth-child(8n+5) .poster{background:linear-gradient(140deg,#a86b0c,#4f224c 78%)}
.channel:nth-child(8n+6) .poster{background:linear-gradient(140deg,#137f75,#1b2456 78%)}
.channel:nth-child(8n+7) .poster{background:linear-gradient(140deg,#7d2aae,#2c145b 78%)}
.channel:nth-child(8n+8) .poster{background:linear-gradient(140deg,#b22951,#351554 78%)}
.poster::after{content:"";position:absolute;width:110px;height:110px;right:-52px;bottom:-56px;border:1px solid rgba(255,255,255,.15);border-radius:50%;box-shadow:0 0 0 22px rgba(255,255,255,.035),0 0 0 44px rgba(255,255,255,.018)}
.poster-glow{background:#ff47bc!important;opacity:.65}
.channel:nth-child(4n+2) .poster-glow{background:#ff9d2e!important}.channel:nth-child(4n+3) .poster-glow{background:#25c7ff!important}.channel:nth-child(4n+4) .poster-glow{background:#9b5cff!important}
.poster>img{width:66%;height:56%;max-width:158px;max-height:84px;padding:11px 14px;border:0;border-radius:14px;background:#fff;box-shadow:0 16px 30px rgba(18,4,43,.35);filter:none}
.monogram.wordmark{color:rgba(255,255,255,.91);text-shadow:0 4px 18px rgba(15,3,36,.32)}.monogram.wordmark small{color:rgba(255,255,255,.5)}
.card-status.online{color:#fff;background:linear-gradient(105deg,rgba(255,37,111,.96),rgba(255,108,73,.94));border-color:rgba(255,255,255,.2);box-shadow:0 7px 18px rgba(97,6,50,.24)}
.card-play{background:linear-gradient(135deg,#ff3d81,#9b5cff);border-color:rgba(255,255,255,.3);box-shadow:0 10px 25px rgba(25,4,59,.3)}
.channel:hover .card-play{background:linear-gradient(135deg,#ff9d2e,#ff3d81)}
.meta{background:linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,.045))}
.meta-top b{color:#fff}.channel:hover .meta-top>span{color:#ff92d3}
.meta>small{color:#a998bc}
.provider{color:#e1d3f2;background:rgba(155,92,255,.13);border-color:rgba(188,147,255,.16)}
.quality{color:#65dbff}
.empty-state{border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.04)}

/* Lecteur */
.watch-heading h1{background:linear-gradient(90deg,#fff,#ffc8e8 55%,#b99bff);background-clip:text;-webkit-background-clip:text;color:transparent}
.watch-tags span{background:rgba(255,255,255,.065);border-color:rgba(255,255,255,.13);color:#c9bbda}
.player{border-color:rgba(255,255,255,.18);box-shadow:0 35px 90px rgba(18,3,43,.5)}
.player-backdrop{background:radial-gradient(circle at 76% 23%,rgba(37,199,255,.27),transparent 33%),radial-gradient(circle at 20% 78%,rgba(255,61,129,.3),transparent 34%),linear-gradient(145deg,#321663,#0c1536)}
.player-backdrop::before{border-color:rgba(255,140,211,.14);box-shadow:0 0 0 45px rgba(155,92,255,.04),0 0 0 90px rgba(37,199,255,.025)}
#playOverlay{background:linear-gradient(110deg,#ff3d81,#ff813d 45%,#9b5cff);box-shadow:0 20px 55px rgba(11,3,28,.6),0 0 0 9px rgba(255,71,188,.1)}
.below-player,.side-card,.program-placeholder{background:linear-gradient(145deg,rgba(43,19,83,.88),rgba(22,10,48,.9));border-color:rgba(255,255,255,.13)}
.watchtools button>i{background:linear-gradient(135deg,rgba(255,61,129,.17),rgba(155,92,255,.17));color:#ff9bd7}
.program-line i{background:linear-gradient(90deg,#ff3d81,#ff9d2e,#25c7ff);box-shadow:0 0 15px rgba(255,71,188,.42)}

/* Administration / connexion */
.panel,.stats>div,.login-card{background:linear-gradient(145deg,rgba(43,19,83,.92),rgba(22,10,48,.93));border-color:rgba(255,255,255,.14);box-shadow:0 22px 55px rgba(18,3,43,.23),inset 0 1px rgba(255,255,255,.05)}
.stat-icon.violet{background:rgba(255,71,188,.13);color:#ff99d5}.panel-icon{color:#ff8ed0}
.scan-spinner{border-top-color:#ff47bc}.activity-list i b{background:linear-gradient(90deg,#ff3d81,#ff9d2e,#25c7ff)}
.file-drop{border-color:rgba(255,71,188,.3);background:rgba(255,71,188,.035)}.file-drop:hover{background:rgba(255,71,188,.07);border-color:rgba(255,71,188,.5)}
.upload-icon{background:linear-gradient(135deg,rgba(255,61,129,.18),rgba(155,92,255,.18));color:#ff9bd7}
.login-art{background:radial-gradient(circle at 50% 50%,rgba(255,61,129,.31),rgba(155,92,255,.13) 43%,transparent 68%),linear-gradient(145deg,#25104c,#101335)}
.login-rings{border-color:rgba(255,140,211,.17)}.login-rings i:nth-child(3){background:rgba(37,199,255,.06)}
.lock-icon{border-color:rgba(255,71,188,.25);background:rgba(255,71,188,.11);color:#ff9bd7}
.site-footer{background:rgba(11,4,26,.72);border-top-color:rgba(255,255,255,.1)}

@keyframes headline-shift{to{background-position:100% 50%}}

@media(max-width:650px){
  .home-hero{padding-top:52px}.hero-copy h1{font-size:clamp(43px,13.5vw,58px)}
  .vibe-ticker{margin-inline:-16px;transform:none}.vibe-ticker>div{justify-content:flex-start;padding-block:10px;gap:19px;font-size:9px}
  .poster>img{max-width:128px;max-height:70px;padding:8px 10px}
  .catalog-count{width:max-content}
}