/* ============================================================
   ACCUEIL SANS POOL — maquette « Accueil · nouveau » (langage 6b Éditorial)
   ------------------------------------------------------------
   Maquette « Accueil Nouveau v2 » : le mot d'accueil, les deux chemins à
   égalité (rejoindre en rouge, créer en bleu, sombres dans les deux thèmes
   comme les héros des autres accueils), « Ou joue tout de suite » et le
   repêchage instantané replié, puis « Comment ça marche ». Rien d'autre : le calendrier
   et les actualités attendent le premier pool.
   Jetons --s-* : accueil-season.css (body.fz-onboard-page).
   La file du repêchage instantané garde sa logique (instantDraft.js) ; on
   n'habille ici que ses sièges, sa ligne d'état et son bouton.
   ============================================================ */
#fzDashSection.is-poolless { background: var(--s-bg); padding: 0 0 calc(96px + env(safe-area-inset-bottom)); }
.is-poolless .fz-dash { max-width: 1040px; padding: 0; }
.fz-onboard-page .is-poolless .fz-dash > :not(#fzDashOnboard),
.fz-onboard-page #storiesSection { display: none !important; }
.fz-onboard-page { background: var(--s-bg); }

#fzDashOnboard {
    gap: 0; max-width: none; margin: 0; padding: 0 0 8px;
    color: var(--s-ink); font: 400 14px/1.35 'Saira', 'Barlow', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}
#fzDashOnboard :is(h2, h3, p) { margin: 0; }
#fzDashOnboard a { color: inherit; text-decoration: none; }
#fzDashOnboard :is(a, button):focus-visible { outline: 2px solid var(--s-red); outline-offset: 3px; }

/* ---- Mot d'accueil ---- */
#fzDashOnboard .fzn-intro { display: flex; flex-direction: column; gap: 10px; padding: 24px 20px 4px; }
#fzDashOnboard .fzn-welcome { font: 600 11px/1 'Saira', sans-serif; letter-spacing: 1.6px; text-transform: uppercase; color: var(--s-faint); }
#fzDashOnboard .fzn-titre { font: 800 34px/34px 'Saira Condensed', 'Barlow Condensed', sans-serif; text-transform: uppercase; text-wrap: balance; color: var(--s-ink); }
#fzDashOnboard .fzn-sub { font: 400 14px/20px 'Saira', sans-serif; color: var(--s-mute); text-wrap: pretty; }

/* ---- Rejoindre, créer : deux grandes cartes, une couleur chacune ---- */
#fzDashOnboard .fzn-chemins { display: flex; flex-direction: column; gap: 10px; margin: 18px 10px 0; }
#fzDashOnboard .fzn-chemin {
    /* Rouge par défaut (rejoindre) ; .is-creer passe au bleu. */
    --c-fort: rgba(240, 64, 48, .5); --c-doux: rgba(255, 90, 70, .18); --c-raie: 255, 72, 56;
    --c-fond: #2A1213, #171214 55%, #100E10;
    --c-puce: rgba(229, 55, 43, .2); --c-puce-ink: #FF8A80;
    position: relative; isolation: isolate; overflow: hidden;
    display: flex; flex-direction: column; gap: 16px;
    padding: 18px 16px 16px; border-radius: 24px; color: #F3F1EE;
    background:
        radial-gradient(90% 120% at 0% 100%, var(--c-fort) 0%, transparent 62%),
        radial-gradient(70% 90% at 100% 0%, var(--c-doux) 0%, transparent 60%),
        linear-gradient(135deg, var(--c-fond));
}
#fzDashOnboard .fzn-chemin.is-creer {
    --c-fort: rgba(48, 120, 240, .5); --c-doux: rgba(90, 160, 255, .18); --c-raie: 64, 140, 255;
    --c-fond: #101A2E, #121520 55%, #0E0F14;
    --c-puce: rgba(60, 130, 240, .22); --c-puce-ink: #8FBFFF;
}
#fzDashOnboard .fzn-chemin::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(160deg, transparent 22%, rgba(var(--c-raie), .6) 23%, transparent 31%, transparent 38%, rgba(var(--c-raie), .38) 39.5%, transparent 50%);
}
#fzDashOnboard .fzn-chemin::after {
    content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 62%; z-index: -1; pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, .13) 1px, transparent 1.5px);
    background-size: 9px 9px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 70%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 70%);
}
html[data-theme="light"] #fzDashOnboard .fzn-chemin { box-shadow: 0 10px 28px rgba(20, 20, 30, .16); }
#fzDashOnboard .fzn-chemin-copie { display: flex; flex-direction: column; gap: 8px; }
#fzDashOnboard .fzn-puce {
    align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
    height: 24px; padding: 0 9px; border-radius: 999px;
    background: var(--c-puce); color: var(--c-puce-ink);
    font: 600 11px/1 'Saira', sans-serif; letter-spacing: 1.2px; text-transform: uppercase;
}
#fzDashOnboard .fzn-chemin h3 { font: 800 28px/28px 'Saira Condensed', 'Barlow Condensed', sans-serif; text-transform: uppercase; color: #F3F1EE; }
#fzDashOnboard .fzn-chemin-copie p { font: 400 13px/18px 'Saira', sans-serif; color: #C9C7C4; text-wrap: pretty; }
#fzDashOnboard a.fzn-chemin-cta {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    height: 48px; border-radius: 13px; background: #F3F1EE; color: #0B0B0C;
    font: 600 15px/1 'Saira', sans-serif; transition: background-color .15s;
}
#fzDashOnboard a.fzn-chemin-cta:hover { background: #fff; }
#fzDashOnboard a.fzn-chemin-cta:active { transform: scale(.98); }

/* ---- Ou joue tout de suite ---- */
#fzDashOnboard .fzn-ou { display: flex; align-items: center; gap: 10px; margin: 22px 16px 0; font: 600 11px/1 'Saira', sans-serif; letter-spacing: 1.4px; text-transform: uppercase; color: var(--s-dim); }
#fzDashOnboard .fzn-ou::before, #fzDashOnboard .fzn-ou::after { content: ''; flex: 1; height: 1px; background: var(--s-line2); }

/* ---- Repêchage instantané : replié sous son en-tête ---- */
#fzDashOnboard .fzn-instant {
    --fzo-line: #4A4E4E; --fzo-faint: #C9C7C4; --fzo-muted: #4A4A50;
    --fzo-fill: var(--s-ink); --fzo-on-fill: var(--s-bg);
    margin: 12px 10px 0; border-radius: 18px; overflow: hidden;
    background: var(--s-card); border: 1px solid var(--s-line2);
}
html[data-theme="light"] #fzDashOnboard .fzn-instant { --fzo-line: #DDDAD5; --fzo-faint: #74716D; }
#fzDashOnboard .fzn-instant summary {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px;
    list-style: none; cursor: pointer; color: var(--s-ink);
}
#fzDashOnboard .fzn-instant summary::-webkit-details-marker { display: none; }
#fzDashOnboard .fzn-instant summary:focus-visible { outline: 2px solid var(--s-red); outline-offset: -2px; border-radius: 18px; }
#fzDashOnboard .fzn-instant-ico { display: flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--s-red-soft); color: var(--s-red-ink); }
#fzDashOnboard .fzn-instant-tete { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
#fzDashOnboard .fzn-instant-tete strong { font: 600 15px/1 'Saira', sans-serif; }
#fzDashOnboard .fzn-instant .fzo-start-status { font: 400 12px/1 'Saira', sans-serif; color: var(--s-faint); }
#fzDashOnboard .fzn-instant-chevron { flex: none; color: var(--s-faint); transition: transform .2s; }
#fzDashOnboard .fzn-instant[open] .fzn-instant-chevron { transform: rotate(180deg); }
#fzDashOnboard .fzn-instant-corps { display: flex; flex-direction: column; gap: 14px; padding: 2px 14px 14px; }
#fzDashOnboard .fzn-instant-corps > p { font: 400 13px/18px 'Saira', sans-serif; color: var(--s-mute); text-wrap: pretty; }
#fzDashOnboard .fzn-instant .fzo-seats { gap: 10px; }
#fzDashOnboard .fzn-instant .fzo-seat { width: 52px; height: 52px; font: 800 13px/1 'Saira Condensed', sans-serif; letter-spacing: 0; }
#fzDashOnboard .fzn-instant .fzo-seat.is-free { box-shadow: inset 0 0 0 1.5px var(--s-line); background: var(--s-raise); }
#fzDashOnboard .fzn-instant .fzo-seat-ring { inset: 16px; border-width: 2px; }
#fzDashOnboard .fzn-instant .fzo-start-button {
    width: 100%; height: 48px; padding: 0 16px; border-radius: 13px;
    background: var(--s-ink); color: var(--s-bg); font: 600 15px/1 'Saira', sans-serif;
}
#fzDashOnboard .fzn-instant .fzo-start-button:hover { opacity: .9; }
#fzDashOnboard .fzn-instant .fzo-start-button:active { transform: scale(.98); }
#fzDashOnboard .fzn-instant .fzo-start-button[data-instant-action="quitter"] { background: var(--s-chip); color: var(--s-mute); }
#fzDashOnboard .fzn-instant .fzo-start-button[data-instant-action="aller"] { background: var(--s-green); color: #0B0B0C; }
html[data-theme="light"] #fzDashOnboard .fzn-instant .fzo-start-button[data-instant-action="aller"] { color: #fff; }

/* ---- Comment ça marche : carrousel, un point par carte ---- */
#fzDashOnboard .fzn-comment { margin-top: 30px; }
#fzDashOnboard .fzn-tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin: 0 16px; }
#fzDashOnboard .fzn-tete > span:first-child { display: flex; flex-direction: column; gap: 6px; }
#fzDashOnboard .fzn-tete small { font: 600 11px/1 'Saira', sans-serif; letter-spacing: 1.4px; text-transform: uppercase; color: var(--s-faint); }
#fzDashOnboard .fzn-tete h3 { font: 800 24px/1 'Saira Condensed', 'Barlow Condensed', sans-serif; text-transform: uppercase; color: var(--s-ink); }
#fzDashOnboard .fzn-points { display: flex; gap: 5px; padding-bottom: 4px; }
#fzDashOnboard .fzn-points i { width: 6px; height: 6px; border-radius: 3px; background: #3A3A40; transition: width .25s, background-color .25s; }
html[data-theme="light"] #fzDashOnboard .fzn-points i { background: var(--s-line); }
#fzDashOnboard .fzn-points i.is-on { width: 18px; background: var(--s-ink); }
#fzDashOnboard .fzn-etapes {
    display: flex; gap: 10px; margin: 0; padding: 14px 10px 2px; list-style: none;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 10px; scrollbar-width: none;
}
#fzDashOnboard .fzn-etapes::-webkit-scrollbar { display: none; }
#fzDashOnboard .fzn-etape { flex: none; width: 286px; scroll-snap-align: start; border-radius: 20px; background: var(--s-card); border: 1px solid var(--s-line2); overflow: hidden; }
#fzDashOnboard .fzn-etape > p { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; border-top: 1px solid var(--s-line2); }
#fzDashOnboard .fzn-etape strong { font: 800 20px/1 'Saira Condensed', 'Barlow Condensed', sans-serif; text-transform: uppercase; color: var(--s-ink); }
#fzDashOnboard .fzn-etape small { font: 400 13px/18px 'Saira', sans-serif; color: var(--s-faint); text-wrap: pretty; }

#fzDashOnboard .fzn-art {
    --art-anneau: #1F2222;
    position: relative; isolation: isolate; height: 150px; overflow: hidden;
    background: radial-gradient(80% 100% at 50% 110%, rgba(229, 55, 43, .22) 0%, transparent 70%), linear-gradient(180deg, #1C1C1F, var(--s-card));
}
html[data-theme="light"] #fzDashOnboard .fzn-art {
    --art-anneau: #F6F5F2;
    background: radial-gradient(80% 100% at 50% 110%, rgba(213, 43, 30, .14) 0%, transparent 70%), linear-gradient(180deg, var(--s-raise), var(--s-card));
}
#fzDashOnboard .fzn-art::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1.5px); background-size: 9px 9px;
    -webkit-mask-image: linear-gradient(180deg, #000, transparent); mask-image: linear-gradient(180deg, #000, transparent);
}
html[data-theme="light"] #fzDashOnboard .fzn-art::before { background-image: radial-gradient(rgba(0, 0, 0, .08) 1px, transparent 1.5px); }
#fzDashOnboard .fzn-art > em { position: absolute; top: 12px; left: 14px; font: 800 15px/1 'Saira Condensed', sans-serif; font-style: normal; letter-spacing: 1px; color: var(--s-red); }

#fzDashOnboard .fzn-art-cartes { display: flex; align-items: flex-end; justify-content: center; }
#fzDashOnboard .fzn-art-cartes > span {
    position: relative; bottom: -4px; width: 78px; height: 104px; margin: 0 -8px; border-radius: 12px; overflow: hidden;
    display: flex; align-items: flex-end; justify-content: center;
    background: var(--club); border: 1.5px solid #2A2A2F; box-shadow: 0 10px 24px rgba(0, 0, 0, .45);
    transform: rotate(var(--rot)) translateY(var(--y));
}
html[data-theme="light"] #fzDashOnboard .fzn-art-cartes > span { box-shadow: 0 10px 24px rgba(0, 0, 0, .2); }
#fzDashOnboard .fzn-art-cartes > span.is-vedette { z-index: 1; border-color: #E5372B; }
#fzDashOnboard .fzn-art-cartes img { height: 88px; width: auto; }
#fzDashOnboard .fzn-art-cartes b { position: absolute; left: 0; right: 0; bottom: 0; padding: 5px 0; background: linear-gradient(0deg, rgba(0, 0, 0, .8), transparent); font: 700 9px/1 'Saira', sans-serif; letter-spacing: .5px; text-align: center; color: #fff; }

#fzDashOnboard .fzn-art-groupe { display: flex; align-items: center; justify-content: center; }
#fzDashOnboard .fzn-groupe { display: flex; align-items: center; margin-top: -8px; }
#fzDashOnboard .fzn-groupe > span {
    display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: -8px; border-radius: 50%;
    background: var(--av); box-shadow: 0 0 0 3px var(--art-anneau); color: #fff; font: 800 13px/1 'Saira Condensed', sans-serif;
}
#fzDashOnboard .fzn-groupe > span:first-child { margin-left: 0; }
#fzDashOnboard .fzn-groupe > span.is-moi { position: relative; z-index: 1; transform: scale(1.25); background: var(--s-ink); color: var(--s-bg); }
#fzDashOnboard .fzn-pret {
    position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
    display: flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; white-space: nowrap;
    background: color-mix(in srgb, var(--s-green) 14%, transparent); color: var(--s-green); font: 600 11px/1 'Saira', sans-serif;
}
#fzDashOnboard .fzn-pret i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

#fzDashOnboard .fzn-rangs { position: absolute; left: 16px; right: 16px; top: 36px; display: flex; flex-direction: column; gap: 5px; }
#fzDashOnboard .fzn-rangs > span {
    display: flex; align-items: center; gap: 10px; height: 30px; padding: 0 12px; border-radius: 9px;
    background: var(--s-chip); color: var(--s-ink2); font: 600 12px/1 'Saira', sans-serif;
}
#fzDashOnboard .fzn-rangs > span.is-un { background: var(--s-ink); color: var(--s-bg); }
#fzDashOnboard .fzn-rangs i { width: 12px; font: 800 14px/1 'Saira Condensed', sans-serif; font-style: normal; color: var(--s-dim); }
#fzDashOnboard .fzn-rangs .is-un i { color: var(--s-red); }
#fzDashOnboard .fzn-rangs b { margin-left: auto; font: 800 15px/1 'Saira Condensed', sans-serif; }

/* ---- Bureau : les deux cartes côte à côte, les étapes en grille ---- */
@media (min-width: 900px) {
    #fzDashSection.is-poolless { padding: 32px 24px 56px; }
    #fzDashOnboard .fzn-intro { padding: 8px 4px 4px; }
    #fzDashOnboard .fzn-titre { font-size: 48px; line-height: 46px; }
    #fzDashOnboard .fzn-sub { font-size: 15px; }
    #fzDashOnboard .fzn-chemins { flex-direction: row; gap: 12px; margin: 24px 0 0; }
    #fzDashOnboard .fzn-chemin { flex: 1 1 0; min-width: 0; justify-content: space-between; gap: 22px; padding: 26px; }
    #fzDashOnboard .fzn-chemin h3 { font-size: 34px; line-height: 34px; }
    #fzDashOnboard .fzn-chemin-copie p { font-size: 14px; line-height: 20px; }
    #fzDashOnboard a.fzn-chemin-cta { align-self: flex-start; width: 260px; }
    #fzDashOnboard .fzn-ou { margin: 28px 4px 0; }
    #fzDashOnboard .fzn-instant { margin: 14px 0 0; }
    #fzDashOnboard .fzn-instant summary { padding: 14px 18px; }
    #fzDashOnboard .fzn-instant-corps { display: grid; grid-template-columns: minmax(0, 1fr) auto 260px; align-items: center; column-gap: 28px; padding: 2px 18px 18px; }
    #fzDashOnboard .fzn-comment { margin-top: 36px; }
    #fzDashOnboard .fzn-tete { margin: 0 4px; }
    #fzDashOnboard .fzn-points { display: none; }
    #fzDashOnboard .fzn-etapes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 14px 0 0; overflow: visible; }
    #fzDashOnboard .fzn-etape { width: auto; }
}
@media (prefers-reduced-motion: reduce) {
    #fzDashOnboard :is(.fzo-start-button, .fzn-chemin-cta):active { transform: none; }
    #fzDashOnboard :is(.fzn-instant-chevron, .fzn-points i) { transition: none; }
}

/* ---- Pools illisibles (base en réveil, session expirée) ----
   Jamais l'accueil sans pool à la place : on ne sait pas si la personne en a
   un. Un message court, une action, rien d'autre. */
.is-pool-erreur .fz-dash > :not(#fzDashErreur),
body.fz-onboard-page:has(.is-pool-erreur) #storiesSection { display: none !important; }
#fzDashSection.is-pool-erreur { background: var(--s-bg); }
#fzDashErreur {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    max-width: 420px; margin: 0 auto; padding: 72px 20px 96px; text-align: center;
    color: var(--s-ink); font: 400 14px/20px 'Saira', 'Barlow', system-ui, sans-serif;
}
#fzDashErreur[hidden] { display: none; }
#fzDashErreur h2 { margin: 0; font: 800 26px/28px 'Saira Condensed', 'Barlow Condensed', sans-serif; text-transform: uppercase; }
#fzDashErreur p { margin: 0; color: var(--s-mute); text-wrap: pretty; }
#fzDashErreur button {
    margin-top: 8px; min-height: 44px; padding: 0 22px; border: 0; border-radius: 999px;
    background: var(--s-red); color: #fff; font: 700 14px/1 'Saira', sans-serif; cursor: pointer;
}
#fzDashErreur button:disabled { opacity: .55; cursor: progress; }
#fzDashErreur button:focus-visible { outline: 2px solid var(--s-red); outline-offset: 3px; }