.prep-mobile-title,
.prep-mobile-only {
    display: none;
}

@media (max-width: 767.98px) {
    .prep-time-page {
        padding: 0 22px 40px !important;
    }

    /* Navigation Tickets / Analyse inutile dans la vue mobile. */
    .prep-time-page > .mt-4 {
        display: none !important;
    }

    .prep-mobile-title {
        display: block;
        margin: 28px 0 24px;
        color: var(--text);
        font-size: 2rem;
        font-weight: 700;
        letter-spacing: .08em;
    }

    .prep-time-page .tuco-control-panel {
        margin-bottom: 26px !important;
        border: 0 !important;
        border-radius: 24px !important;
        background: var(--filter-surface) !important;
        box-shadow: none !important;
    }

    .prep-time-page .tuco-control-panel .card-body {
        padding: 24px !important;
    }

    .prep-time-page .prep-filter-native {
        min-height: 52px;
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        background: var(--surface);
        font-size: 1rem;
    }

    .prep-time-page #prep-main-content-div {
        width: 100%;
    }

    .prep-time-page .prep-summary-kpis {
        --bs-gutter-x: 14px;
        --bs-gutter-y: 14px;
        margin-bottom: 14px;
    }

    .prep-time-page .prep-summary-kpis > [class*="col"] {
        flex: 0 0 50%;
        width: 50%;
        padding-top: 0;
    }

    .prep-time-page .prep-summary-kpis .card {
        height: 100%;
        min-height: 174px;
        margin-bottom: 0 !important;
        border: 1px solid var(--border) !important;
        border-left: 1px solid var(--border) !important;
        border-radius: 22px !important;
        background: var(--surface);
        box-shadow: 0 8px 22px rgba(29, 45, 61, .05) !important;
    }

    .prep-time-page .prep-summary-kpis .card-body {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 20px 18px;
    }

    .prep-time-page .prep-summary-kpis h6,
    .prep-mobile-kpi-label {
        margin-bottom: 18px !important;
        color: #77756f !important;
        font-size: .82rem;
        font-weight: 700;
        letter-spacing: .06em;
        line-height: 1.35;
        text-transform: uppercase;
    }

    .prep-time-page .prep-summary-kpis h2,
    .prep-mobile-kpi-value {
        margin: 0 !important;
        color: var(--text) !important;
        font-size: 1.75rem;
        font-weight: 700;
    }

    .prep-mobile-only {
        display: block;
    }

    .prep-mobile-hour-kpi,
    .prep-mobile-hour-card {
        border: 1px solid var(--border) !important;
        border-radius: 22px !important;
        background: var(--surface);
        box-shadow: 0 8px 22px rgba(29, 45, 61, .05) !important;
        overflow: hidden;
    }

    .prep-mobile-hour-kpi {
        margin-bottom: 20px;
    }

    .prep-mobile-hour-kpi .card-body {
        padding: 24px;
    }

    .prep-mobile-kpi-sub {
        margin-top: 8px;
        color: #96938d;
        font-size: .9rem;
    }

    .prep-mobile-hour-title {
        padding: 22px 24px;
        border-bottom: 1px solid var(--border);
        background: var(--filter-surface);
        color: #075860;
        font-size: 1.25rem;
        font-weight: 700;
    }

    .prep-mobile-hour-row {
        display: grid;
        grid-template-columns: 72px 72px minmax(120px, 1fr);
        align-items: center;
        min-height: 58px;
        padding: 10px 14px;
        border-bottom: 1px solid #e8e3da;
        color: var(--text);
        font-size: .92rem;
    }

    .prep-mobile-hour-row:last-child {
        border-bottom: 0;
    }

    .prep-mobile-hour-head {
        min-height: 48px;
        background: var(--surface-2);
        color: #6f6d68;
        font-size: .68rem;
        font-weight: 700;
        letter-spacing: .03em;
        text-transform: uppercase;
    }

    .prep-mobile-hour-row > div:not(:first-child) {
        text-align: right;
    }

    .prep-mobile-empty {
        padding: 22px;
        color: #8b8984;
        text-align: center;
    }

    /* Toute l’analyse avancée reste disponible sur desktop. */
    .prep-time-page #prep-main-content-div > .card {
        display: none !important;
    }
}

@media (max-width: 767.98px) {
    .prep-mobile-hour-row {
        width: 100%;
        box-sizing: border-box;
        grid-template-columns: minmax(0, .8fr) minmax(0, .8fr) minmax(0, 1.4fr);
        column-gap: 12px;
        padding-right: 12px;
        padding-left: 12px;
    }

    .prep-mobile-hour-row > div:last-child {
        min-width: 0;
        justify-self: end;
        padding-right: 2px;
        white-space: normal;
        overflow-wrap: anywhere;
        text-align: right;
    }
}

@media (max-width: 767.98px) {
    .prep-mobile-hour-row > div {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .prep-mobile-hour-head > div {
        white-space: normal;
    }
}