@import url("tokens-uPDBcPl.css");
@import url("fonts-xL2MXrm.css");
@import url("icons-z8HhHU1.css");

/* ---------- Base ---------- */
* { box-sizing: border-box; }

body {
    margin: 0;
    /* Zones système du téléphone (APK/PWA plein écran) : ne rien dessiner dessous. */
    padding-top: env(safe-area-inset-top);
    font-family: var(--fy-font-body);
    -webkit-font-smoothing: antialiased;
    background: var(--fy-bg);
    color: var(--fy-ink);
}

h1, h2, h3 { font-family: var(--fy-font-title); color: var(--fy-ink); }

input::placeholder { color: #A9B6C8; }

.sx { scrollbar-width: none; }
.sx::-webkit-scrollbar { width: 0; height: 0; }

@keyframes scrIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes popIn { 0% { opacity: 0; transform: scale(.6); } 60% { transform: scale(1.08); } 100% { opacity: 1; transform: scale(1); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* ---------- Shell app joueur (mobile-first, plein viewport) ---------- */
.fy-app {
    max-width: 520px;
    margin: 0 auto;
    min-height: 100dvh;
    background: var(--fy-bg);
    display: flex;
    flex-direction: column;
}

.fy-screen {
    flex: 1;
    animation: scrIn .32s ease;
    padding: 8px 18px calc(86px + env(safe-area-inset-bottom));
}

.fy-screen-title { margin: 14px 0 2px; font-weight: 700; font-size: 22px; letter-spacing: -.5px; }
.fy-screen-sub { margin: 0 0 16px; font-size: 13px; color: var(--fy-text-muted); font-weight: 600; }

/* ---------- Navigation basse ---------- */
.fy-bottomnav {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    margin: 0 auto;
    max-width: 520px;
    display: flex;
    background: var(--fy-surface);
    border-top: 1px solid var(--fy-border);
    padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
    z-index: 20;
}

.fy-bottomnav a {
    flex: 1;
    max-width: 84px;
    min-height: 52px;
    margin: 0 auto;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    text-decoration: none;
    color: var(--fy-text-faint);
    font-size: 10px;
    font-weight: 600;
    transition: all .15s;
}

.fy-bottomnav a i { font-size: 22px; }

.fy-bottomnav a.active {
    color: #fff;
    font-weight: 700;
    background: var(--fy-gradient);
    box-shadow: 0 6px 14px -6px rgba(240, 74, 76, .55);
}

/* ---------- Cartes / conteneurs ---------- */
.fy-card {
    background: var(--fy-surface);
    border: 1px solid var(--fy-border);
    border-radius: var(--fy-r-lg);
    box-shadow: var(--fy-shadow-card);
}

.fy-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 20px 0 11px;
}

.fy-section-head h2 { margin: 0; font-weight: 700; font-size: 15px; }
.fy-section-head .fy-link { font-size: 12px; color: var(--fy-accent); font-weight: 700; text-decoration: none; }

/* ---------- Boutons ---------- */
.fy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: var(--fy-tap);
    padding: 0 22px;
    border: none;
    border-radius: var(--fy-r-md);
    background: var(--fy-gradient);
    color: #fff;
    font-family: var(--fy-font-title);
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    box-shadow: var(--fy-shadow-pop);
}

.fy-btn--secondary {
    background: var(--fy-surface);
    color: var(--fy-primary);
    border: 1.5px solid var(--fy-border-soft);
    box-shadow: none;
}

.fy-btn--ghost {
    background: transparent;
    color: var(--fy-text-soft);
    box-shadow: none;
}

/* ---------- Pastilles de statut ---------- */
.fy-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--fy-r-pill);
    font-size: 11px;
    font-weight: 700;
}

.fy-pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; }
.fy-pill--claim { background: var(--fy-st-claim-bg); color: var(--fy-st-claim-fg); }
.fy-pill--claim::before { background: var(--fy-st-claim-dot); }
.fy-pill--live { background: var(--fy-st-live-bg); color: var(--fy-st-live-fg); }
.fy-pill--live::before { background: var(--fy-st-live-dot); }
.fy-pill--done { background: var(--fy-st-done-bg); color: var(--fy-st-done-fg); }
.fy-pill--done::before { background: var(--fy-st-done-dot); }
.fy-pill--exp { background: var(--fy-st-exp-bg); color: var(--fy-st-exp-fg); }
.fy-pill--exp::before { background: var(--fy-st-exp-dot); }

/* ---------- Logo lettre commerçant ---------- */
.fy-logo-badge {
    width: 46px;
    height: 46px;
    flex: none;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: var(--fy-font-title);
    font-weight: 700;
    font-size: 18px;
}

/* ---------- Jauge de progression ---------- */
.fy-progress {
    height: 7px;
    border-radius: var(--fy-r-pill);
    background: #F1EAE3;
    overflow: hidden;
}

.fy-progress > span {
    display: block;
    height: 100%;
    border-radius: var(--fy-r-pill);
}

/* ---------- Tuile de stat (cockpit) ---------- */
.fy-stat {
    background: var(--fy-surface);
    border: 1px solid var(--fy-border);
    border-radius: var(--fy-r-lg);
    box-shadow: var(--fy-shadow-soft);
    padding: 14px;
}

.fy-stat .fy-stat-value { font-family: var(--fy-font-title); font-weight: 700; font-size: 24px; }
.fy-stat .fy-stat-label { font-size: 11.5px; color: var(--fy-text-muted); font-weight: 600; }

.fy-trend {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10.5px;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: 7px;
    color: var(--fy-st-done-fg);
    background: var(--fy-st-done-bg);
}

.fy-trend--down { color: var(--fy-danger); background: var(--fy-danger-bg); }