﻿/* Draft home: Apple dark-ladder panels, condensed type, red actions. The hero
   on top has its own sheet (accueil-draft-hero.css). */
body.fz-draft-page { background:var(--bg); }
.fz-draft-page #storiesSection { display:none!important; }
#fzDashSection.is-drafting { padding:16px 22px 24px; background:var(--bg); }
.is-drafting .fz-dash { max-width:1500px; --fzd-bg:#1C1C1E; --fzd-bg-alt:#2C2C2E; --fzd-surface:#1C1C1E; --fzd-ink:#F5F5F7; --fzd-text:#F5F5F7; --fzd-text-muted:#A1A1A6; --fzd-border:#38383A; --fzd-border-soft:#38383A; --fzd-accent:var(--primary-text); --fzd-solid:var(--primary); --fzd-on-solid:var(--on-primary); }
.is-drafting .fz-dash > :not(#fzDraftHome) { display:none!important; }
.fzh { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:16px; color:#F5F5F7; font:400 17px/1.35 'Barlow Condensed',sans-serif; --fzm-bg:#000000; --fzm-panel:#1C1C1E; --fzm-surface:#1C1C1E; --fzm-ink:#F5F5F7; --fzm-ink-soft:#A1A1A6; --fzm-ink-faint:#A1A1A6; --fzm-border:#38383A; --fzm-red:var(--primary-text); --fzm-red-soft:rgba(var(--primary-rgb),.16); --fzm-green:var(--success); --fzm-solid:var(--primary); --fzm-on-solid:var(--on-primary); }
.fzh [hidden] { display:none!important; }
.fzh button { font:inherit; cursor:pointer; }
.fzh .fzh-panel { min-width:0; border:1px solid #38383A; border-radius:13px; background:#1C1C1E; box-shadow:inset 0 1px 0 rgba(255,255,255,.02); }
.fzh .fzh-icon { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; vertical-align:middle; }
.fzh .fzh-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.fzh h2 { display:flex; align-items:center; gap:14px; color:#F5F5F7; font:500 16px/1.25 'Oswald',sans-serif; text-transform:uppercase; margin:0; }
.fzh .fzh-link { border:0; padding:0; background:transparent; color:var(--primary-text); font:400 15px 'Barlow Condensed',sans-serif; text-decoration:none; display:inline-flex; gap:12px; align-items:center; }
.fzh .fzh-link:hover { color:var(--primary-text); }.fzh .fzh-link > span { font-size:24px; }
.fzh a:focus-visible,.fzh button:focus-visible { outline:2px solid var(--primary); outline-offset:4px; }
.fzh .fzh-news { grid-column:1/-1; min-height:170px; position:relative; overflow:hidden; isolation:isolate; background:#1C1C1E url('assets/hero/fantazy-ice-reference.png') center 48%/cover; }
.fzh-news:after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,#1C1C1Ef5 0%,#1C1C1Ed9 29%,#1C1C1E30 60%,#1C1C1E99); z-index:-1; }
.fzh-news-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 35%; z-index:-2; }
.fzh-news-copy { max-width:50%; padding:18px 28px; }
.fzh-news-badge { display:inline-block; background:var(--primary); color:var(--on-primary); padding:4px 17px; border-radius:20px; font-weight:600; text-transform:uppercase; font-size:14px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fzh .fzh-news h2 { margin:8px 0 5px; font:700 25px/1.13 'Barlow Condensed',sans-serif; text-transform:none; display:block; }
.fzh .fzh-news h2 a { color:#F5F5F7; }.fzh-news-copy p { margin:6px 0; font-size:16px; color:#F5F5F7; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }.fzh-news-copy small { display:block; margin-top:7px; color:#A1A1A6; font-size:14px; }.fzh-news-copy small span { margin:0 7px; }
.fzh-news-controls { position:absolute; right:16px; bottom:12px; display:flex; align-items:center; gap:10px; }.fzh-news-controls > button { width:42px; height:42px; display:grid; place-items:center; border:1px solid #636366; border-radius:50%; background:rgba(28,28,30,.72); color:white; }.fzh-news-dots { display:flex; margin-right:28px; gap:10px; }.fzh-news-dots button { width:12px; height:12px; background:#636366; border:0; border-radius:50%; padding:0; }.fzh-news-dots button[aria-pressed=true] { background:var(--primary); }

.fzh-eyebrow { display:block; color:#A1A1A6; font:400 13px/1.4 'Oswald',sans-serif; text-transform:uppercase; letter-spacing:1.3px; margin:0; }

.fzh-scores { display:none; padding:16px; }.fzh-score-track { display:flex; gap:10px; overflow-x:auto; }.fzh-game { padding:8px 12px; flex:1 0 145px; border:1px solid #38383A; border-radius:10px; background:#1C1C1E; }.fzh-game p { font-size:12px; color:#A1A1A6; margin:0 0 8px; white-space:nowrap; }.fzh-game > div { display:grid; grid-template-columns:30px 1fr 28px; align-items:center; gap:10px; }.fzh-game img { width:30px; height:30px; object-fit:contain; }.fzh-game b { text-align:right; }.fzh-game-badge { display:inline-block; margin-top:7px; padding:2px 8px; border-radius:4px; background:#3A3A3C; text-transform:uppercase; font-size:13px; font-weight:600; }.fzh-game-badge.is-live { background:var(--primary); color:var(--on-primary); }
/* Blocs partagés (accueil-dash.js) : ils arrivent avec leur propre balisage
   et leur propre mise en forme ; l'accueil de repêchage ne leur donne que
   leur place dans la grille et son fond de panneau. */
.fzh :is(#fzdOffCount, #fzdOffMoves, #fzdOffWatch) { grid-column:1/-1; min-width:0; }
/* « À surveiller » partage sa rangée avec « Alignements », comme sur la
   maquette : deux cartes de même hauteur. */
.fzh #fzdOffWatch { grid-column:span 6; }
.fzh #fzdOffCount { padding:16px 22px; min-height:100px; }
.fzh #fzdOffWatch { padding:18px; }
/* Sans « À surveiller », « Alignements » prend la rangée entière plutôt que
   de laisser une moitié creuse. */
.fzh:has(#fzdOffWatch[hidden]) .fzh-al { grid-column:1/-1; }

.fzh .fzd-off-face { width:37px; height:37px; flex-shrink:0; border-radius:50%; background:#2C2C2E; }
.fzh-empty { color:#A1A1A6; padding:12px; font-size:15px; }
/* Sélections : une pastille par équipe du pool, les choix de celle qui est
   choisie en dessous, une rangée par catégorie. Le calendrier de la LNH
   n'a pas d'emplacement sur cet accueil : il reste masqué à sa place. */
.fzh .fzh-picks { grid-column:1/-1; padding:16px 22px 18px; }
.fzh-picks-tabs { position:relative; display:flex; gap:8px; overflow-x:auto; scrollbar-width:thin; margin-bottom:14px; padding-bottom:4px; }
.fzh .fzh-picks-tab { display:inline-flex; align-items:center; gap:8px; flex-shrink:0; padding:6px 14px; border:1px solid var(--fzh-border); border-radius:20px; background:transparent; color:var(--fzh-ink); font-size:15px; white-space:nowrap; }
.fzh .fzh-picks-tab:hover { border-color:var(--fzh-muted); }
.fzh .fzh-picks-tab[aria-pressed="true"] { background:var(--fzh-accent-fill); border-color:var(--fzh-accent-fill); color:var(--on-primary); }
.fzh-picks-tab b { padding:1px 8px; border-radius:12px; background:var(--fzh-tint); color:var(--fzh-accent); font-size:12px; font-weight:600; text-transform:uppercase; }
.fzh-picks-tab[aria-pressed="true"] b { background:rgba(255,255,255,.2); color:var(--on-primary); }
/* L'équipe au choix : le point vert de la pastille « En cours ». */
.fzh-picks-tab i { width:8px; height:8px; border-radius:50%; background:var(--success); }
.fzh-picks-tab[aria-pressed="true"] i { background:var(--on-primary); }
.fzh-picks-body { display:grid; gap:12px; }
.fzh-picks-body > .fzh-empty { padding:4px 0; margin:0; }
.fzh-picks-group { display:grid; grid-template-columns:150px minmax(0,1fr); gap:14px; align-items:start; padding-top:12px; border-top:1px solid var(--fzh-border); }
.fzh-picks-group:first-child { padding-top:0; border-top:0; }
.fzh-picks-label { display:flex; justify-content:space-between; gap:8px; margin:10px 0 0; color:var(--fzh-muted); font:400 13px/1.4 'Oswald',sans-serif; text-transform:uppercase; letter-spacing:1px; }
.fzh-picks-label span { color:var(--fzh-ink); letter-spacing:0; }
.fzh-picks-players { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:8px; margin:0; padding:0; list-style:none; }
.fzh-picks-player { display:flex; align-items:center; gap:10px; min-width:0; padding:6px 12px 6px 6px; border-radius:10px; background:var(--fzh-raised); }
.fzh-picks-player > span { min-width:0; }
.fzh-picks-player strong { display:block; overflow:hidden; font-size:16px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.fzh-picks-player small { display:block; color:var(--fzh-muted); font-size:13px; }
.fzh .fzh-picks-player .fzd-off-face { width:34px; height:34px; background:var(--fzh-panel); }
/* Un logo de club se lit entier, pas recadré comme un portrait. */
.fzh-picks-player.is-club .fzd-off-face img { object-fit:contain; padding:4px; background:transparent; }
.fzh-picks-none { margin:10px 0 0; color:var(--fzh-muted); font-size:15px; }

@media(max-width:1000px) and (min-width:769px) { .fzh-news-copy { max-width:65%; } }
@media(max-width:768px) {
 #fzDashSection.is-drafting { padding:14px 16px calc(90px + env(safe-area-inset-bottom)); }
 .fzh { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; font-size:16px; }
 .fzh .fzh-panel { border-radius:12px; }.fzh .fzh-news { order:8; min-height:215px; }.fzh-news-copy { padding:18px 20px; max-width:65%; }.fzh .fzh-news h2 { font-size:23px; }.fzh-news-copy p { font-size:15px; }.fzh-news-copy small { margin-top:12px; font-size:13px; }.fzh-news-badge { font-size:12px; padding:4px 12px; }.fzh-news-controls { right:12px; bottom:12px; gap:7px; }.fzh-news-controls > button { width:36px; height:36px; }.fzh-news-dots { margin-right:10px; gap:7px; }.fzh-news-dots button { width:9px; height:9px; }
 .fzh-eyebrow { font-size:11px; letter-spacing:1.1px; }
 .fzh-scores { grid-column:1/-1; display:block; order:4; padding:14px; }.fzh :is(#fzdOffCount, #fzdOffMoves, #fzdOffWatch) { grid-column:1/-1; }.fzh #fzdOffCount { order:6; padding:16px; }.fzh #fzdOffMoves { order:7; }.fzh #fzdOffWatch { grid-column:1/-1; order:2; padding:14px; }.fzh h2 { font-size:15px; gap:12px; }
 .fzh .fzh-picks { order:5; padding:14px; }.fzh-picks-group { grid-template-columns:minmax(0,1fr); gap:6px; }.fzh-picks-label { margin:0; justify-content:flex-start; }.fzh-picks-players { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:6px; }.fzh-picks-player { gap:7px; padding:5px 8px 5px 5px; }.fzh-picks-player strong { font-size:15px; }.fzh .fzh-picks-player .fzd-off-face { width:30px; height:30px; }.fzh-picks-none { margin:0; }
}
@media(max-width:480px) {
 #fzDashSection.is-drafting { padding-left:12px; padding-right:12px; }.fzh-news-copy { max-width:86%; padding:17px; }.fzh .fzh-news h2 { max-width:260px; }.fzh-news-copy p { max-width:230px; }.fzh-news-copy small { max-width:190px; }.fzh-news-controls { bottom:12px; }.fzh-news-dots { display:none; }.fzh-news:after { background:linear-gradient(90deg,#1C1C1Ef5,#1C1C1Ead 60%,#1C1C1E66); }.fzh-news-image { object-position:65% center; }.fzh .fzh-link { font-size:13px; gap:6px; }
}
@media(prefers-reduced-motion:reduce) { .fzh * { scroll-behavior:auto!important; } }

/* ==================== ALIGNEMENTS (maquette « Accueil v2 ») ====================
   Une carte sombre dans les deux thèmes, trente-deux tuiles aux couleurs des
   clubs. Toute la carte mène à l'onglet « Alignements » (le lien du titre
   s'étend sur elle) ; chaque tuile, posée par-dessus, ouvre son club.
   Au survol, la carte se soulève, la flèche pivote, et les tuiles montent en
   arc — --arc et --delai viennent d'accueil-draft.js. Le même bloc ferme
   l'accueil de saison (.fzs, accueil-season.js). */
:is(.fzh, .fzs) .fzh-al {
    grid-column:span 6; min-width:0;
    position:relative; isolation:isolate;
    display:flex; flex-direction:column; gap:18px;
    padding:22px 24px;
    border-radius:14px;
    background:#141518; color:#fff;
    font-family:'Barlow',system-ui,sans-serif;
    transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s;
}
html:not([data-theme="light"]) :is(.fzh, .fzs) .fzh-al { box-shadow:0 0 0 1px #2A2C31; }
:is(.fzh, .fzs) .fzh-al:hover { transform:translateY(-3px); box-shadow:0 18px 40px rgba(20,21,24,.28); }
html:not([data-theme="light"]) :is(.fzh, .fzs) .fzh-al:hover { box-shadow:0 0 0 1px #2A2C31, 0 18px 40px rgba(0,0,0,.5); }

:is(.fzh, .fzs) .fzh-al-lien { display:flex; align-items:flex-end; gap:12px; color:#fff; text-decoration:none; }
:is(.fzh, .fzs) .fzh-al-lien::after { content:''; position:absolute; inset:0; border-radius:inherit; z-index:0; }
:is(.fzh, .fzs) .fzh-al-lien:focus-visible { outline:none; }
:is(.fzh, .fzs) .fzh-al-lien:focus-visible::after { outline:2px solid #fff; outline-offset:-4px; }
.fzh-al-tete { display:flex; flex-direction:column; gap:4px; }
.fzh-al-sur { font:400 12px/1.2 'Oswald',sans-serif; letter-spacing:1.4px; text-transform:uppercase; color:#8A8D95; }
:is(.fzh, .fzs) .fzh-al .fzh-al-lien h2 { display:block; margin:0; color:#fff; font:600 28px/1.1 'Oswald',sans-serif; letter-spacing:.5px; text-transform:uppercase; }
.fzh-al-fleche {
    display:grid; place-items:center;
    width:40px; height:40px; margin-left:auto; flex-shrink:0;
    border-radius:50%;
    background:var(--primary); color:#fff; font-size:18px;
    transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
:is(.fzh, .fzs) .fzh-al:hover .fzh-al-fleche { transform:translateX(4px) rotate(-45deg); }

:is(.fzh, .fzs) .fzh-al-clubs {
    position:relative; z-index:1;
    display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:6px;
    margin:0; padding:0; list-style:none;
}
:is(.fzh, .fzs) .fzh-al-club {
    position:relative;
    display:grid; place-items:center;
    aspect-ratio:1/1;
    border-radius:8px;
    background:var(--fond); color:var(--encre);
    font:600 13px/1 'Oswald',sans-serif; letter-spacing:.5px;
    text-decoration:none;
    transition:transform .45s cubic-bezier(.3,1.6,.5,1), opacity .3s;
    transition-delay:var(--delai, 0ms);
}
/* Au repos, un damier à peine marqué ; au survol de la carte, tout s'allume. */
:is(.fzh, .fzs) .fzh-al-club.is-ombre { opacity:.88; }
:is(.fzh, .fzs) .fzh-al:hover .fzh-al-club { opacity:1; transform:translateY(var(--arc, 0)); }
:is(.fzh, .fzs) .fzh-al .fzh-al-club:hover,
:is(.fzh, .fzs) .fzh-al .fzh-al-club:focus-visible { z-index:2; opacity:1; transform:translateY(-6px) scale(1.12); transition-delay:0ms; }
:is(.fzh, .fzs) .fzh-al-club:focus-visible { outline:2px solid #fff; outline-offset:2px; }
:is(.fzh, .fzs) .fzh-al-club:hover { color:var(--encre); }

.fzh-al-note { position:relative; z-index:0; margin:0; font-size:13px; color:#A3A6AE; pointer-events:none; }

@media (prefers-reduced-motion: reduce) {
    :is(.fzh, .fzs) .fzh-al, :is(.fzh, .fzs) .fzh-al-fleche, :is(.fzh, .fzs) .fzh-al-club { transition:none; }
    :is(.fzh, .fzs) .fzh-al:hover, :is(.fzh, .fzs) .fzh-al:hover .fzh-al-club, :is(.fzh, .fzs) .fzh-al:hover .fzh-al-fleche { transform:none; }
}
@media (max-width:768px) {
    /* Ici, après la règle de base : son span 6, plus loin que les deux
       colonnes du téléphone, créerait des colonnes implicites et
       rétrécirait tous les autres panneaux (1/-1). */
    .fzh .fzh-al { grid-column:1/-1; order:3; padding:18px 16px; gap:14px; }
    :is(.fzh, .fzs) .fzh-al .fzh-al-lien h2 { font-size:24px; }
    :is(.fzh, .fzs) .fzh-al-club { font-size:12px; letter-spacing:0; }
}
@media (max-width:380px) {
    :is(.fzh, .fzs) .fzh-al-clubs { gap:4px; }
    :is(.fzh, .fzs) .fzh-al-club { font-size:11px; }
}
