/* ===== ADMIN : nav dense (8 entrées) ===== */
@media (max-width: 1439px) {
    body[data-space="admin"] .topnav__link .icon { display: none; }
}

/* Écrans moyens : liens du menu sans icône pour laisser la place au sélecteur de devise. */
@media (max-width: 1439px) {
    .topnav__link .icon { display: none; }
}

/* ===== TABLETTE ===== */
@media (max-width: 1199px) {
    .topnav__inner { gap: 16px; padding: 0 24px; }
    .topnav__link { padding: 0 9px; font-size: 13px; }
    .topnav__link .icon { display: none; }
    .user-chip__name { display: none; }
    .page { padding: 28px 24px 56px; }
    .grid-main { grid-template-columns: minmax(0, 1fr); }
    .band__inner, .hero__inner, .footer__inner, .footer__bottom { padding-left: 24px; padding-right: 24px; }
}

@media (max-width: 1023px) {
    .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-side { grid-template-columns: minmax(0, 1fr); }
    .footer__inner { grid-template-columns: repeat(2, 1fr); }
    .list-item__col--wide { display: none; }
    .auth-aside { padding: 40px; }
}

/* ===== MOBILE NATIF (< 768px) : expérience indépendante ===== */
@media (max-width: 767px) {

    /* ----- Chrome mobile ----- */
    .topnav { display: none; }

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

    .m-header__title {
        flex: 1;
        min-width: 0;
        font-family: var(--font-title);
        font-size: 16px;
        font-weight: 700;
        color: var(--color-text);
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .m-header .brand { font-size: 0; gap: 0; }

    .m-header__right {
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .m-header__currency { margin-left: auto; }
    .m-header__currency .dropdown__menu { right: -8px; }
    .bell { width: 36px; height: 36px; }
    .m-header .brand__mark { width: 28px; height: 28px; }

    .m-header__action {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 13px;
        font-weight: 600;
        color: var(--color-primary);
    }

    body { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }

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

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

    button.bottom-nav__item {
        border: none;
        background: none;
    }

    .bottom-nav__item .icon { width: 22px; height: 22px; }
    .bottom-nav__item.is-active { color: var(--color-primary); }

    .bottom-nav__item--primary { position: relative; }

    .bottom-nav__item--primary .bottom-nav__icon {
        width: 36px;
        height: 36px;
        border-radius: var(--radius);
        background: var(--color-primary);
        color: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: center;
    }

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

    /* ----- Page ----- */
    .page { padding: 16px 16px 24px; }

    .page-head {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        margin-bottom: 20px;
    }

    .page-head__title { font-size: 22px; }
    .page-head__actions { flex-direction: column; align-items: stretch; }
    .page-head__actions .btn--outline,
    .page-head__actions .btn--ghost,
    .page-head__actions .btn--danger { display: none; }

    .section { margin-bottom: 28px; }
    .stack { gap: 16px; }
    .grid-main, .grid-eq, .grid-3, .grid-4, .grid-side { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .legal--card { padding: 18px 16px; }
    .card--list-side { padding: 0 16px; }
    .form-row { grid-template-columns: minmax(0, 1fr); gap: 0; }

    /* ----- Cards ----- */
    .card { padding: 16px; }
    .card__header { margin-bottom: 14px; padding-bottom: 12px; }

    .card--list {
        padding: 0;
        background: none;
        box-shadow: none;
    }

    .card--list .card__header { border-bottom: none; padding-bottom: 0; margin-bottom: 10px; }

    /* ----- KPI : carousel natif ----- */
    .kpi-grid {
        display: flex;
        gap: 12px;
        margin: 0 -16px 20px;
        padding: 4px 16px 12px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding: 0 16px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

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

    .kpi-card {
        flex: 0 0 200px;
        padding: 14px 16px;
        scroll-snap-align: start;
    }

    .kpi-card__top { margin-bottom: 10px; }
    .kpi-card__value { font-size: 26px; }
    .kpi-card__spark { height: 28px; margin-top: 8px; }

    /* ----- Listes : cards compactes ----- */
    .list-item {
        padding: 14px 16px;
        margin-bottom: 8px;
        border-bottom: none;
        border-radius: var(--radius);
        background: var(--color-surface);
        box-shadow: var(--shadow-card);
        gap: 12px;
    }

    .list-item:last-child { margin-bottom: 0; }
    .list-item__col { display: none; }
    .context-wrap { display: none; }
    .list-item__right {
        flex-direction: column;
        align-items: flex-end;
        gap: 4px;
    }
    .list-item__right .btn { display: none; }
    .list-item__right .btn--danger { display: inline-flex; }
    .list-item__right .btn--filled.btn--sm { display: inline-flex; }

    /* Ligne avec bouton d'action (résultats) : texte sur toute la largeur, prix et bouton sur une rangée dessous. */
    .list-item:has(.list-item__right .btn--sm) { flex-wrap: wrap; }
    .list-item:has(.list-item__right .btn--sm) .list-item__content { flex: 1 1 0; min-width: 0; }
    .list-item:has(.list-item__right .btn--sm) .list-item__right {
        flex: 1 0 100%;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding-top: 10px;
        border-top: 1px solid var(--color-divider);
    }

    /* Listes dans une card standard : les rows restent des cards distinctes */
    .card:not(.card--list) .list-item { box-shadow: none; border: 1px solid var(--color-divider); }

    .avatar, .icon-bubble { width: 40px; height: 40px; }

    /* ----- Boutons ----- */
    .btn--filled,
    .btn--accent {
        border-radius: var(--radius);
        padding: 12px 24px;
        width: 100%;
    }

    .btn--sm { width: auto; padding: 8px 16px; }
    .drawer__footer .btn {
        flex: 1 1 0;
        min-width: 0;
        padding-left: 12px;
        padding-right: 12px;
    }

    /* ----- Onglets & pills : scroll natif ----- */
    .tabs, .pills {
        margin-left: -16px;
        margin-right: -16px;
        padding: 0 16px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .tabs { margin-bottom: 18px; }
    .pills { margin-bottom: 16px; }
    .tabs::-webkit-scrollbar, .pills::-webkit-scrollbar { display: none; }

    /* ----- Drawer plein écran ----- */
    .drawer { width: 100vw; }
    .drawer__header { padding: 14px 16px; }
    .drawer__header .drawer__close { display: none; }
    .drawer__header .drawer__back { display: inline-flex; }
    .drawer__body { padding: 16px; }
    .drawer__footer { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }

    /* ----- Divers ----- */
    .alert {
        flex-wrap: wrap;
        margin-bottom: 16px;
        padding: 12px 14px;
    }

    .alert .btn {
        width: 100%;
        margin-top: 4px;
    }
    .steps { gap: 8px; margin-bottom: 20px; }
    .steps__item span.steps__label { display: none; }
    .steps__item.is-active span.steps__label { display: inline; }
    .steps__line { max-width: none; }
    .donut-wrap { flex-direction: column; align-items: stretch; gap: 16px; }
    .donut { align-self: center; }
    .radio-card { padding: 12px 14px; }

    .invoice-sheet { padding: 20px 16px; }
    .invoice-sheet__top { flex-direction: column; }
    .invoice-sheet__title, .invoice-sheet__meta { text-align: left; }
    .invoice-sheet__parties { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .invoice-line { grid-template-columns: minmax(0, 1fr) 90px; }
    .invoice-line > :nth-child(2), .invoice-line > :nth-child(3) { display: none; }
    .toolbar { flex-wrap: wrap; }
    .bars { gap: 8px; }

    .state-page { min-height: calc(100vh - 160px); padding: 32px 16px; }
    .state-page__code { font-size: 56px; }
    .state-page__actions { flex-direction: column; align-self: stretch; }
    .state-page__actions .btn { width: 100%; }

    /* ----- Guest ----- */
    .hero--pattern::before { background-size: 240px 240px; }
    .hero__inner { padding: 36px 16px 32px; text-align: left; }
    .hero__title { font-size: 30px; margin-bottom: 12px; }
    .hero__text { margin-bottom: 22px; font-size: 15px; }

    .search-bar {
        flex-direction: column;
        align-items: stretch;
        padding: 8px;
    }

    .search-bar__field { padding: 4px 8px; }
    .search-bar .btn { width: 100%; }

    .tld-strip {
        flex-wrap: nowrap;
        justify-content: flex-start;
        margin: 20px -16px 0;
        padding: 2px 16px 8px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scroll-padding: 0 16px;
        scrollbar-width: none;
    }

    .tld-strip::-webkit-scrollbar { display: none; }
    .tld-chip { flex-shrink: 0; scroll-snap-align: start; }

    .band { padding: 32px 0; }
    .band__inner { padding: 0 16px; }
    .band__head { margin-bottom: 18px; text-align: left; }
    .band__title { font-size: 22px; line-height: 1.25; }
    .band__sub { margin-top: 6px; font-size: 14px; }

    /* Cartes de présentation : icône à gauche, texte à droite, hauteur réduite. */
    .feature {
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr);
        column-gap: 14px;
        row-gap: 2px;
        align-items: start;
        padding: 14px 16px;
    }

    .feature .icon-bubble { grid-row: 1 / span 3; }
    .feature > :not(.icon-bubble) { grid-column: 2; }
    .feature__title { font-size: 16px; }
    .feature__text { font-size: 14px; line-height: 1.45; }
    .feature .badge { margin-top: 6px; justify-self: start; }

    .faq-item { padding: 14px 0; }
    .faq { gap: 10px; }
    .faq-card__summary { gap: 12px; padding: 14px; }
    .faq-card__num { width: 32px; height: 32px; }
    .faq-card__q { font-size: 15px; line-height: 1.35; }
    .faq-card__a { padding: 0 14px 16px; font-size: 14px; }
    .faq__more { flex-direction: column; align-items: flex-start; }
    .faq__more .btn { width: 100%; }

    /* Nuage de paiement : pastilles plus compactes sur téléphone. */
    .pay-marquee { gap: 10px; }
    .pay-marquee__group { gap: 10px; padding-right: 10px; }
    .pay-logo { gap: 10px; padding: 10px 14px; font-size: 13px; }
    .pay-logo img { width: 26px; height: 26px; }
    .pay-marquee__note { margin-top: 16px; font-size: 13px; }

    .footer__inner { grid-template-columns: repeat(2, 1fr); gap: 24px; padding: 32px 16px 24px; }
    .footer__inner > :first-child { grid-column: 1 / -1; }
    .footer__link { padding: 7px 0; }
    .footer__bottom { padding: 16px 16px 24px; }

    .auth-wrap { grid-template-columns: minmax(0, 1fr); min-height: 0; }
    .auth-aside { display: none; }
    .auth-form { padding: 28px 16px; align-items: flex-start; }
}

/* KPI sans défilement horizontal (pages publiques) : cartes empilées en grille sur téléphone. */
@media (max-width: 767px) {
    .kpi-grid--static { display: grid; grid-template-columns: 1fr 1fr; overflow: visible; margin: 0 0 20px; padding: 0; }
    .kpi-grid--static .kpi-card { flex: none; }
    .kpi-grid--static .kpi-card:last-child { grid-column: 1 / -1; }
}

/* L'attribut hidden l'emporte sur les composants à display explicite. */
.alert[hidden] { display: none; }