/* ===== TABLETTE ET MOBILE : la sidebar disparaît, navigation basse native (Aristo UI) ===== */
@media (max-width: 1023px) {
    body.has-shell {
        padding-bottom: calc(68px + env(safe-area-inset-bottom));
    }

    .shell {
        display: block;
    }

    .sidebar {
        display: none;
    }

    .topbar {
        position: sticky;
        top: 0;
        z-index: 40;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 52px;
        padding: 0 16px;
        border-bottom: 1px solid var(--color-border);
        background: var(--color-surface);
    }

    .topbar__brand {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
        font-family: var(--font-title);
        font-weight: 600;
        color: var(--color-text);
    }

    .topbar__brand img {
        width: 26px;
        height: 26px;
    }

    .page {
        padding: 24px 20px 32px;
    }

    .page__head {
        flex-direction: column;
        gap: 14px;
        margin-bottom: 24px;
    }

    .page__head .user-chip {
        display: none;
    }

    .bottom-nav {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 50;
        display: flex;
        align-items: center;
        justify-content: space-around;
        height: calc(60px + env(safe-area-inset-bottom));
        padding-bottom: env(safe-area-inset-bottom);
        border-top: 1px solid var(--color-border);
        background: var(--color-surface);
    }

    .bottom-nav__item {
        display: flex;
        flex: 1;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        min-width: 0;
        padding: 6px 0;
        color: var(--color-text-muted);
        font-size: 10px;
        text-decoration: none;
    }

    .bottom-nav__item.is-active {
        color: var(--color-primary);
    }
}

/* ===== MOBILE ===== */
@media (max-width: 767px) {
    /* Connexion : une colonne, le panneau de marque disparaît au profit d'un en-tête compact */
    .auth {
        display: block;
    }

    .auth__brand {
        display: none;
    }

    .auth__main {
        align-items: flex-start;
        min-height: 100vh;
        padding: 36px 20px 28px;
    }

    .auth__mark {
        display: flex;
        align-items: center;
        gap: 12px;
        font-family: var(--font-title);
        font-weight: 600;
        color: var(--color-text);
    }

    .auth__mark img {
        width: 36px;
        height: 36px;
    }

    .auth .btn--filled {
        border-radius: var(--radius-pill);
        padding: 13px 24px;
    }

    .actions {
        flex-direction: column;
    }

    .page {
        padding: 20px 16px 28px;
    }

    .h1 {
        font-size: 22px;
    }

    .empty {
        padding: 22px 18px;
    }
}

/* ===== TRÈS PETITS ÉCRANS ===== */
@media (max-width: 359px) {
    .form-input--code {
        font-size: 19px;
        letter-spacing: 0.22em;
    }

    .auth__links {
        flex-direction: column;
    }
}

/* ===== VUE D'ENSEMBLE : TABLETTE ET MOBILE ===== */
@media (max-width: 1023px) {
    .hero {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
    }
}

@media (max-width: 767px) {
    .hero__title {
        font-size: 26px;
    }

    /* Chiffres clés : carousel horizontal natif */
    .kpi-row {
        gap: 12px;
        margin: 0 -16px;
        padding: 2px 16px 6px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 16px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .kpi-row::-webkit-scrollbar {
        display: none;
    }

    .kpi,
    .kpi:first-child {
        flex: 0 0 150px;
        padding: 14px 16px;
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        background: var(--color-surface);
        scroll-snap-align: start;
    }

    .services {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        margin-bottom: 28px;
    }

    .service,
    .service:nth-child(2) {
        gap: 14px;
        padding: 16px;
    }

    .service__number {
        font-size: 32px;
    }

    .service__meta {
        max-width: 60%;
    }

    .block {
        padding: 0;
        background: none;
    }

    .block__head {
        margin-bottom: 12px;
    }

    .list-group .list-item {
        margin-bottom: 8px;
        padding: 14px 16px;
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        background: var(--color-surface);
    }

    .list-item__time {
        display: none;
    }

    .list-item__when {
        display: inline;
    }

    .block__empty {
        padding: 14px 16px;
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        background: var(--color-surface);
    }
}

/* ===== SITES : TABLETTE ET MOBILE ===== */
@media (max-width: 1023px) {
    .toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .toolbar__main {
        flex-wrap: wrap;
    }

    .search {
        flex: 1 1 220px;
        width: auto;
    }
}

@media (max-width: 767px) {
    .block--list {
        padding: 0;
        background: none;
    }

    .site {
        flex-wrap: wrap;
    }

    .site .list-item__body {
        flex: 1 1 calc(100% - 60px);
    }

    .site__badges {
        flex: 1 1 100%;
        justify-content: flex-start;
        max-width: none;
        margin-left: 54px;
    }

    .row__manage {
        display: none;
    }

    .toolbar .btn--filled {
        border-radius: var(--radius-pill);
        padding: 12px 24px;
    }

    /* Tiroir plein écran avec retour ← (Aristo UI §5) */
    .drawer {
        width: 100vw;
    }

    .drawer__header {
        padding: 12px 12px 12px 8px;
    }

    .drawer__close {
        display: none;
    }

    .drawer__back {
        display: inline-flex;
    }

    .drawer__body {
        padding: 20px 16px;
    }

    .drawer__footer {
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    }

    .drawer__footer .btn--filled {
        border-radius: var(--radius-pill);
        padding: 12px 24px;
    }

    .facts {
        grid-template-columns: 1fr;
    }

    .secret-row .btn {
        align-self: stretch;
    }
}

/* ===== PAGES DE SERVICE : TABLETTE ET MOBILE ===== */
@media (max-width: 1023px) {
    .svc__bar {
        flex-direction: column;
        align-items: stretch;
    }

    .svc__controls {
        justify-content: space-between;
    }
}

@media (max-width: 767px) {
    .svc__body > * + * {
        margin-top: 16px;
    }

    .segmented {
        flex: 1;
    }

    .segmented__item {
        flex: 1;
    }

    /* Indicateurs : carousel horizontal natif */
    .metrics {
        display: flex;
        gap: 12px;
        margin: 0 -16px;
        padding: 2px 16px 6px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 16px;
        scrollbar-width: none;
    }

    .metrics::-webkit-scrollbar {
        display: none;
    }

    .metric {
        flex: 0 0 150px;
        padding: 14px 16px;
        scroll-snap-align: start;
    }

    .metric__value {
        font-size: 24px;
    }

    .block--chart {
        padding: 16px;
        background: var(--color-surface);
    }

    .panels {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .panel {
        padding: 16px;
    }

    /* Tableaux : une carte par ligne, libellé devant chaque valeur */
    .table thead {
        display: none;
    }

    .table,
    .table tbody,
    .table tr,
    .table td {
        display: block;
    }

    .table tr {
        padding: 10px 0;
        border-top: 1px solid var(--color-divider);
    }

    .table tr:first-child {
        border-top: 0;
    }

    .table td {
        display: flex;
        justify-content: space-between;
        gap: 16px;
        padding: 4px 0;
        border-top: 0;
        text-align: right;
    }

    .table td::before {
        content: attr(data-label);
        flex-shrink: 0;
        font-size: 12px;
        color: var(--color-text-muted);
        text-align: left;
    }

    .table td:first-child {
        font-size: 15px;
    }
}

/* ===== FICHE SITE : MOBILE ===== */
@media (max-width: 767px) {
    .identity {
        padding: 16px;
    }

    .avatar--lg {
        width: 44px;
        height: 44px;
        font-size: 15px;
    }

    .identity__name {
        font-size: 19px;
    }

    .services--site {
        margin-bottom: 0;
    }
}

/* ===== JOURNAL : MOBILE ===== */
@media (max-width: 767px) {
    .filters {
        flex-direction: column;
        gap: 12px;
        padding: 14px;
    }

    .filter {
        width: 100%;
    }

    .filter .segmented {
        overflow-x: auto;
        scrollbar-width: none;
    }

    .filter .segmented::-webkit-scrollbar {
        display: none;
    }

    .filter .segmented__item {
        flex: 0 0 auto;
    }

    .filter .form-input {
        min-width: 0;
        width: 100%;
    }

    .timeline .block {
        padding: 0;
        background: none;
    }
}