/* SILES YouTube — catalogue officiel via YouTube Data API */
body.youtube-view .content { margin-top: 0; padding-top: calc(var(--header-height) + 18px); }
body.youtube-view .footer { display: none; }
.youtube-page { min-height: calc(100vh - var(--header-height)); padding: 22px var(--page-pad) 80px; color: #fff; }
.youtube-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 24px; min-height: 220px; border: 1px solid rgba(255,255,255,.08); border-radius: 26px; padding: 34px; background: radial-gradient(circle at 78% 20%, rgba(255,0,0,.18), transparent 34%), linear-gradient(135deg, rgba(255,255,255,.055), rgba(8,8,11,.42)); box-shadow: 0 26px 80px rgba(0,0,0,.3); }
.youtube-hero::after { content:""; position:absolute; inset:auto -10% -70% auto; width:430px; aspect-ratio:1; border-radius:50%; background:rgba(255,0,0,.16); filter:blur(90px); pointer-events:none; }
.youtube-hero-copy { position:relative; z-index:2; max-width:760px; }
.youtube-eyebrow { display:flex; align-items:center; gap:8px; margin-bottom:11px; color:#ff4b4b; font-size:9px; font-weight:900; letter-spacing:.16em; text-transform:uppercase; }
.youtube-eyebrow::before { content:""; width:8px; height:8px; border-radius:50%; background:#ff0000; box-shadow:0 0 18px rgba(255,0,0,.8); }
.youtube-hero h1 { margin:0; font-size:clamp(34px,5vw,68px); line-height:.95; letter-spacing:-.055em; }
.youtube-hero p { max-width:660px; margin:16px 0 0; color:rgba(255,255,255,.65); font-size:13px; line-height:1.65; }
.youtube-brand-chip { position:relative; z-index:2; align-self:start; display:inline-flex; align-items:center; gap:9px; min-height:42px; border:1px solid rgba(255,255,255,.12); border-radius:999px; padding:0 15px; background:rgba(0,0,0,.32); color:#fff; font-size:10px; font-weight:760; backdrop-filter:blur(14px); }
.youtube-brand-chip svg { width:22px; height:22px; color:#ff0000; }
.youtube-search-panel { position:sticky; z-index:40; top:calc(var(--header-height) + 8px); display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; margin:22px 0 10px; padding:10px; border:1px solid rgba(255,255,255,.08); border-radius:18px; background:rgba(8,8,11,.88); box-shadow:0 18px 55px rgba(0,0,0,.3); backdrop-filter:blur(24px) saturate(140%); -webkit-backdrop-filter:blur(24px) saturate(140%); }
.youtube-search-field { min-width:0; display:flex; align-items:center; gap:11px; min-height:48px; border:1px solid rgba(255,255,255,.1); border-radius:13px; padding:0 15px; background:rgba(255,255,255,.045); }
.youtube-search-field svg { width:20px; height:20px; color:rgba(255,255,255,.52); }
.youtube-search-field input { width:100%; border:0; outline:0; background:transparent; color:#fff; font:inherit; font-size:13px; }
.youtube-search-field input::placeholder { color:rgba(255,255,255,.34); }
.youtube-search-submit { min-height:48px; border:0; border-radius:13px; padding:0 22px; color:#fff; background:#e50914; font:inherit; font-size:11px; font-weight:820; cursor:pointer; transition:.18s ease; }
.youtube-search-submit:hover { background:#ff1f2b; transform:translateY(-1px); }
.youtube-category-strip { display:flex; gap:8px; overflow:auto; padding:8px 0 4px; scrollbar-width:none; }
.youtube-category-strip::-webkit-scrollbar { display:none; }
.youtube-category-chip { flex:0 0 auto; min-height:34px; border:1px solid rgba(255,255,255,.09); border-radius:999px; padding:0 13px; color:rgba(255,255,255,.72); background:rgba(255,255,255,.035); font:inherit; font-size:9px; font-weight:760; cursor:pointer; }
.youtube-category-chip:hover, .youtube-category-chip.active { color:#fff; border-color:rgba(255,255,255,.23); background:rgba(255,255,255,.1); }
.youtube-section { margin-top:34px; scroll-margin-top:150px; }
.youtube-section-head { display:flex; align-items:end; justify-content:space-between; gap:16px; margin-bottom:15px; }
.youtube-section-head h2 { margin:0; font-size:clamp(19px,2.3vw,28px); letter-spacing:-.035em; }
.youtube-section-head span { color:rgba(255,255,255,.38); font-size:9px; }
.youtube-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px 15px; }
.youtube-card { min-width:0; border:0; padding:0; color:#fff; background:transparent; text-align:left; cursor:pointer; }
.youtube-thumb { position:relative; overflow:hidden; aspect-ratio:16/9; border-radius:14px; background:#17171b; box-shadow:0 12px 34px rgba(0,0,0,.28); }
.youtube-thumb img { width:100%; height:100%; display:block; object-fit:cover; transition:transform .28s ease, filter .28s ease; }
.youtube-card:hover .youtube-thumb img, .youtube-card:focus-visible .youtube-thumb img { transform:scale(1.045); filter:brightness(.78); }
.youtube-card:focus-visible { outline:2px solid #fff; outline-offset:5px; border-radius:14px; }
.youtube-duration, .youtube-live { position:absolute; right:7px; bottom:7px; min-height:20px; display:inline-flex; align-items:center; border-radius:5px; padding:0 6px; color:#fff; background:rgba(0,0,0,.82); font-size:8px; font-weight:820; }
.youtube-live { left:7px; right:auto; background:#e50914; text-transform:uppercase; }
.youtube-card-copy { display:grid; grid-template-columns:36px minmax(0,1fr); gap:10px; padding-top:11px; }
.youtube-channel-avatar { width:36px; height:36px; display:grid; place-items:center; border-radius:50%; color:#fff; background:linear-gradient(145deg,#e50914,#451019); font-size:12px; font-weight:900; }
.youtube-card-text { min-width:0; }
.youtube-card-title { display:-webkit-box; overflow:hidden; margin:0; color:#fff; font-size:12px; line-height:1.35; font-weight:770; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.youtube-channel, .youtube-meta { display:block; overflow:hidden; margin-top:5px; color:rgba(255,255,255,.46); font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.youtube-meta { margin-top:3px; }
.youtube-empty, .youtube-loading { min-height:230px; display:grid; place-items:center; align-content:center; gap:12px; border:1px solid rgba(255,255,255,.07); border-radius:20px; padding:30px; color:rgba(255,255,255,.52); background:rgba(255,255,255,.025); text-align:center; }
.youtube-loading-spinner { width:38px; height:38px; border:3px solid rgba(255,255,255,.1); border-top-color:#e50914; border-radius:50%; animation:youtubeSpin .75s linear infinite; }
@keyframes youtubeSpin { to { transform:rotate(360deg); } }
.youtube-empty strong { color:#fff; font-size:17px; }
.youtube-empty code { max-width:100%; overflow:auto; border-radius:8px; padding:7px 10px; color:#ffb3b6; background:rgba(229,9,20,.1); font-size:10px; }
.youtube-player-layer { position:fixed; z-index:5000; inset:0; display:none; background:#000; }
.youtube-player-layer.open { display:grid; grid-template-rows:auto minmax(0,1fr); }
.youtube-player-top { min-height:68px; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:calc(10px + env(safe-area-inset-top)) 18px 10px; background:linear-gradient(180deg,rgba(0,0,0,.9),rgba(0,0,0,.35)); }
.youtube-player-info { min-width:0; display:grid; gap:4px; }
.youtube-player-info strong { overflow:hidden; font-size:14px; text-overflow:ellipsis; white-space:nowrap; }
.youtube-player-info span { overflow:hidden; color:rgba(255,255,255,.55); font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.youtube-player-actions { display:flex; align-items:center; gap:8px; }
.youtube-player-action { min-width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.14); border-radius:50%; padding:0 12px; color:#fff; background:rgba(255,255,255,.07); font:inherit; font-size:9px; font-weight:760; cursor:pointer; text-decoration:none; }
.youtube-player-action.wide { border-radius:999px; }
.youtube-player-stage { position:relative; min-height:0; display:grid; place-items:center; }
.youtube-player-stage iframe { width:100%; height:100%; border:0; background:#000; }
.youtube-disclaimer { margin-top:35px; color:rgba(255,255,255,.34); font-size:8px; line-height:1.5; text-align:center; }
@media (max-width:1180px) { .youtube-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:820px) {
  body.youtube-view .content { padding-top:var(--header-height); }
  .youtube-page { padding-inline:15px; }
  .youtube-hero { grid-template-columns:1fr; min-height:190px; padding:25px; }
  .youtube-brand-chip { position:absolute; top:18px; right:18px; }
  .youtube-search-panel { top:calc(var(--header-height) + 5px); grid-template-columns:1fr auto; }
  .youtube-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 10px; }
}
@media (max-width:520px) {
  .youtube-page { padding-top:10px; }
  .youtube-hero { min-height:175px; border-radius:20px; padding:22px 18px; }
  .youtube-hero h1 { font-size:38px; }
  .youtube-hero p { font-size:11px; }
  .youtube-brand-chip { display:none; }
  .youtube-search-panel { grid-template-columns:1fr; padding:7px; }
  .youtube-search-submit { min-height:42px; }
  .youtube-grid { grid-template-columns:1fr; gap:24px; }
  .youtube-card-title { font-size:13px; }
  .youtube-player-top { min-height:62px; padding-inline:10px; }
  .youtube-player-action.wide { width:42px; padding:0; font-size:0; }
}
body.tv-mode .youtube-card:focus-visible { outline:4px solid #fff; outline-offset:7px; transform:scale(1.025); }