/* ====================================================================
   HUB DE L'ACCUEIL — la semaine du stream (templates/home.html, home.js)
   Une planche de 7 colonnes, comme les plannings que les streamers
   publient : le jour courant est ouvert, un clic ouvre un autre jour.
   Dessous : la wager race en course (une barre par joueur) et les liens
   « entre deux lives ».
   ==================================================================== */
body.theme-luv .home-hub { padding: 64px 24px; position: relative; z-index: 1; }
body.theme-luv .hub-grid { max-width: 1180px; margin: 0 auto; }
body.theme-luv .home-hub [hidden] { display: none !important; }

/* ── La planche ── */
body.theme-luv .hub-week {
    --hub-rule: #1f3157;
    display: flex;
    min-height: 360px;
    border: 1px solid #2b4170;
    border-radius: 8px;
    background: #0e1b36;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
}
body.theme-luv .hub-day {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--hub-rule);
    overflow: hidden;
    transition: flex-grow 0.35s ease, background-color 0.2s ease;
}
body.theme-luv .hub-day:first-child { border-left: 0; }
body.theme-luv .hub-day:not(.is-open):hover { background-color: #112141; }
body.theme-luv .hub-day.is-open {
    flex-grow: 4;
    background: linear-gradient(160deg, #142850 0%, #0e1b36 70%);
}

/* En-tête de colonne : bouton qui ouvre le jour */
body.theme-luv .hub-day-tab {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding: 20px 18px 18px;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
body.theme-luv .hub-day-tab:focus-visible { outline: 2px solid var(--luv-orange); outline-offset: -4px; }
body.theme-luv .hub-day.is-open .hub-day-tab { flex: 0 0 auto; padding-bottom: 0; cursor: default; }
body.theme-luv .hub-day-head { display: block; }
body.theme-luv .hub-dn { display: block; font: 400 34px/1 var(--luv-font-display); color: var(--luv-text); }
body.theme-luv .hub-dd { display: block; margin-top: 6px; font-size: 13px; color: var(--luv-text-mute); }
body.theme-luv .hub-dp { margin-top: auto; padding-top: 16px; font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--luv-text); }
body.theme-luv .hub-dp small { display: block; margin-top: 2px; font-size: 13px; font-weight: 600; color: var(--luv-orange); }
body.theme-luv .hub-day.is-open .hub-dp { display: none; }
body.theme-luv .hub-day.is-open .hub-dn,
body.theme-luv .hub-day.is-today .hub-dd { color: var(--luv-orange); }
body.theme-luv .hub-day.is-today .hub-dd { font-weight: 700; }
body.theme-luv .hub-day.is-past .hub-dn,
body.theme-luv .hub-day.is-past .hub-dp { color: #5d6b88; }
body.theme-luv .hub-day.is-past .hub-dp small { color: rgba(255, 184, 0, 0.5); }
body.theme-luv .hub-day--off .hub-dp { font-weight: 500; color: var(--luv-text-mute); }

/* Contenu du jour ouvert */
body.theme-luv .hub-day-more { display: none; position: relative; z-index: 1; max-width: 370px; padding: 20px 18px 22px; }
body.theme-luv .hub-day.is-open .hub-day-more { display: block; }
body.theme-luv .hub-big { margin: 0; font: 400 42px/1.02 var(--luv-font-display); color: var(--luv-text); }
body.theme-luv .hub-big--live { display: flex; align-items: center; gap: 14px; }
body.theme-luv .hub-livedot { width: 14px; height: 14px; border-radius: 50%; background: #ff4d4d; box-shadow: 0 0 16px #ff4d4d; animation: hubPulse 1.6s infinite; flex: none; }
@keyframes hubPulse { 50% { opacity: 0.4; } }
body.theme-luv .hub-what { margin: 12px 0 0; font-size: 15.5px; line-height: 1.45; color: var(--luv-text-dim); }
body.theme-luv .hub-what b { color: var(--luv-text); }
body.theme-luv .hub-soon { margin: 14px 0 0; font-size: 15px; color: var(--luv-text); }
body.theme-luv .hub-soon b { font-weight: 800; }
body.theme-luv .hub-bar { display: block; max-width: 260px; height: 6px; margin-top: 12px; border-radius: 99px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
body.theme-luv .hub-bar i { display: block; height: 100%; border-radius: inherit; background: var(--luv-orange); }
body.theme-luv .hub-feed { display: grid; gap: 6px; margin-top: 14px; }
body.theme-luv .hub-feed-row { margin: 0; font-size: 14.5px; color: var(--luv-text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.theme-luv .hub-feed-row > span:first-child { margin-right: 8px; font-size: 13px; color: var(--luv-text-mute); }
body.theme-luv .hub-feed-row b { color: var(--luv-text); }
body.theme-luv .hub-feed-row.is-fresh { animation: hubFresh 1.2s ease; }
@keyframes hubFresh { 0% { color: var(--luv-orange); } 100% { color: var(--luv-text-dim); } }

body.theme-luv .hub-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
body.theme-luv .hub-b {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: none;
    color: var(--luv-text);
    font: 800 12.5px/1 var(--luv-font-body);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.18s, color 0.18s, filter 0.18s;
}
body.theme-luv .hub-b svg { width: 15px; height: 15px; }
body.theme-luv .hub-b-p { background: var(--luv-orange); color: #1a1200; }
body.theme-luv .hub-b-p:hover { filter: brightness(1.08); }
body.theme-luv .hub-b-g { border-color: var(--luv-line-strong); }
body.theme-luv .hub-b-g:hover { border-color: var(--luv-orange); color: var(--luv-orange); }

/* Illustration : l'icône néon du programme, en partie hors cadre */
body.theme-luv .hub-day-art {
    display: none;
    position: absolute;
    right: -46px;
    bottom: -54px;
    width: 210px;
    height: auto;
    transform: rotate(-8deg);
    filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.5));
    pointer-events: none;
}
body.theme-luv .hub-day.is-open .hub-day-art { display: block; }

/* ── Sous la planche ── */
body.theme-luv .hub-below { display: grid; grid-template-columns: 1.55fr 1fr; gap: 32px 56px; margin-top: 32px; align-items: start; }
body.theme-luv .hub-below--solo { grid-template-columns: 1fr; }
body.theme-luv .hub-h { display: block; font: 400 21px/1.1 var(--luv-font-display); color: var(--luv-text); }

/* Wager race : une course, la barre de chaque joueur suit son wager, un jeton en tête */
body.theme-luv .hub-race { display: block; color: inherit; text-decoration: none; }
body.theme-luv .hub-race-head { display: flex; align-items: center; gap: 14px; }
body.theme-luv .hub-race-ic { width: 52px; height: 52px; flex: none; transform: rotate(-6deg); filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.45)); }
body.theme-luv .hub-race-t { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
body.theme-luv .hub-race-sub { font-size: 14.5px; color: var(--luv-text-dim); }
body.theme-luv .hub-race-sub b { color: var(--luv-text); }
body.theme-luv .hub-race-go { margin-left: auto; white-space: nowrap; font-size: 14px; font-weight: 700; color: var(--luv-orange); text-decoration: underline; text-underline-offset: 3px; }
body.theme-luv .hub-race:hover .hub-race-go { color: var(--luv-orange-2, #ffcf4d); }
body.theme-luv .hub-lanes { display: grid; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
body.theme-luv .hub-lane { display: grid; grid-template-columns: 20px 120px 1fr auto; align-items: center; gap: 12px; }
body.theme-luv .hub-lane-rk { font: 400 17px/1 var(--luv-font-display); color: var(--luv-text-mute); }
body.theme-luv .hub-lane-nm { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14.5px; font-weight: 600; color: var(--luv-text); }
body.theme-luv .hub-lane-track { height: 30px; margin-right: 16px; border-radius: 6px; background: rgba(255, 255, 255, 0.045); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); }
body.theme-luv .hub-lane-fill { position: relative; display: block; width: var(--w); height: 100%; border-radius: inherit; background: linear-gradient(90deg, #233a63, #3a5a8f); }
body.theme-luv .hub-lane-fill::after {
    content: "";
    position: absolute;
    right: -15px;
    top: 50%;
    width: 30px;
    height: 30px;
    transform: translateY(-50%) rotate(-12deg);
    background: url("../img/deco/jeton-bleu.webp?v=1") center / contain no-repeat;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5));
}
body.theme-luv .hub-lane-am { min-width: 76px; text-align: right; font-size: 15px; font-weight: 800; color: var(--luv-text); }
body.theme-luv .hub-lane--1 .hub-lane-rk,
body.theme-luv .hub-lane--1 .hub-lane-am { color: var(--luv-orange); }
body.theme-luv .hub-lane--1 .hub-lane-fill { background: linear-gradient(90deg, #a87200, #FFB800); }
body.theme-luv .hub-lane--1 .hub-lane-fill::after { background-image: url("../img/deco/jeton-orange.webp?v=1"); }
body.theme-luv .hub-lane--2 .hub-lane-fill { background: linear-gradient(90deg, #2a4677, #4a6fae); }
body.theme-luv .hub-lane--3 .hub-lane-fill::after { background-image: url("../img/deco/jeton-braise.webp?v=1"); }

/* Entre deux lives : les objets du site posés sur le tapis */
body.theme-luv .hub-also { display: grid; gap: 14px; }
body.theme-luv .hub-also .hub-h { margin-bottom: 2px; }
body.theme-luv .hub-also-l { display: flex; align-items: center; gap: 16px; color: inherit; text-decoration: none; }
body.theme-luv .hub-also-l img { width: 52px; height: 52px; flex: none; object-fit: contain; transform: rotate(-6deg); filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.45)); transition: transform 0.25s ease; }
body.theme-luv .hub-also-l:nth-of-type(2) img { transform: rotate(5deg); }
body.theme-luv .hub-also-l:hover img { transform: rotate(0deg) scale(1.06); }
body.theme-luv .hub-also-l b { display: block; font: 400 17px/1.15 var(--luv-font-display); color: var(--luv-text); transition: color 0.18s; }
body.theme-luv .hub-also-l small { display: block; margin-top: 3px; font-size: 13.5px; color: var(--luv-text-dim); }
body.theme-luv .hub-also-l:hover b { color: var(--luv-orange); }
body.theme-luv .hub-also-l:focus-visible,
body.theme-luv .hub-race:focus-visible { outline: 2px solid var(--luv-orange); outline-offset: 4px; border-radius: 8px; }
body.theme-luv .hub-also-rumble { padding: 6px; }

/* ── Tablette : colonnes fermées plus étroites ── */
@media (max-width: 1000px) {
    body.theme-luv .hub-day-tab { padding: 16px 12px 14px; }
    body.theme-luv .hub-dn { font-size: 26px; }
    body.theme-luv .hub-dp { font-size: 13.5px; }
    body.theme-luv .hub-day-more { padding: 18px 14px 20px; }
    body.theme-luv .hub-big { font-size: 36px; }
    body.theme-luv .hub-below { grid-template-columns: 1fr; }
    /* Plus la place pour l'icône en bas : petite, en haut à droite */
    body.theme-luv .hub-day.is-open .hub-day-art { width: 60px; right: 14px; top: 14px; bottom: auto; transform: rotate(6deg); }
}

/* ── Mobile : les jours en lignes, aujourd'hui déplié ── */
@media (max-width: 760px) {
    body.theme-luv .home-hub { padding: 48px 16px; }
    body.theme-luv .hub-week { flex-direction: column; min-height: 0; }
    body.theme-luv .hub-day { flex: none; border-left: 0; border-top: 1px solid var(--hub-rule); }
    body.theme-luv .hub-day:first-child { border-top: 0; }
    body.theme-luv .hub-day-tab { flex-direction: row; align-items: center; gap: 14px; padding: 14px 16px; }
    body.theme-luv .hub-day-head { display: flex; align-items: baseline; gap: 12px; }
    body.theme-luv .hub-dn { min-width: 54px; font-size: 22px; }
    body.theme-luv .hub-dd { margin: 0; }
    body.theme-luv .hub-dp { margin: 0 0 0 auto; padding: 0; text-align: right; font-size: 14px; }
    body.theme-luv .hub-dp small { font-size: 12.5px; }
    body.theme-luv .hub-day.is-open .hub-day-tab { padding: 18px 16px 0; }
    body.theme-luv .hub-day-more { max-width: none; padding: 12px 16px 22px; }
    body.theme-luv .hub-big { font-size: 34px; }
    body.theme-luv .hub-btns .hub-b { flex: 1 1 auto; justify-content: center; }
    body.theme-luv .hub-race-head { flex-wrap: wrap; }
    body.theme-luv .hub-race-go { flex-basis: 100%; margin: 2px 0 0 66px; }
    body.theme-luv .hub-lane { grid-template-columns: 16px 92px 1fr auto; gap: 10px; }
    body.theme-luv .hub-lane-am { min-width: 0; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    body.theme-luv .hub-day,
    body.theme-luv .hub-also-l img { transition: none; }
    body.theme-luv .hub-livedot { animation: none; }
}