/* ============================================================================
   BellCourse : ajustements mobile et écrans moyens
   Chargée après theme.min.css et site.css. Points de rupture alignés sur Bootstrap :
   petit mobile < 576 px, mobile / petite tablette < 768 px, tablette < 992 px.
   ============================================================================ */

:root {
    --bc-gutter: 16px;
    --bc-touch: 44px;                 /* taille minimale d'une cible tactile */
    --bc-bottom-nav-h: 60px;
    --bc-radius: 12px;
    --bc-safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ---------- Base ---------- */
html { -webkit-text-size-adjust: 100%; }
img, svg, video, canvas { max-width: 100%; }
body { overflow-x: hidden; }
.container, .container-fluid { padding-left: var(--bc-gutter); padding-right: var(--bc-gutter); }

/* Pas d'états :hover collants sur écran tactile */
@media (hover: none) {
    .stat-card:hover, .chart-paper:hover, .table-paper:hover, .card-hover:hover { transform: none !important; }
}

/* ---------- Petits écrans (< 768 px) ---------- */
@media (max-width: 767.98px) {

    /* Champs : 16 px minimum, sinon iOS zoome à la mise au point */
    input, select, textarea, .form-control, .form-select, .mud-input-slot, .mud-input-root {
        font-size: 16px !important;
    }
    .form-control, .form-select { min-height: var(--bc-touch); }

    /* Boutons : cibles tactiles confortables */
    .btn { min-height: var(--bc-touch); display: inline-flex; align-items: center; justify-content: center; }
    .btn-sm, .btn-xs { min-height: 40px; padding-left: 14px; padding-right: 14px; }
    .dropdown-item { padding-top: 12px; padding-bottom: 12px; }
    .mud-button-root { min-height: 40px; }
    .mud-icon-button { min-width: 44px; min-height: 44px; }

    /* Titres plus compacts */
    h1, .h1 { font-size: 1.6rem; line-height: 1.25; }
    h2, .h2 { font-size: 1.35rem; }
    h3, .h3 { font-size: 1.15rem; }

    /* En-tête compact : le logo de 200 px occupait ~1/4 de l'écran avec la barre */
    header.navbar { padding-top: 6px; padding-bottom: 6px; min-height: 0; }
    header.navbar .navbar-brand { margin-right: 0; }
    header.navbar .navbar-brand img { width: 128px; height: auto; }
    header.navbar.navbar-stuck { box-shadow: 0 2px 10px rgba(0, 0, 0, .08); }
    header .container { flex-wrap: nowrap; }
    /* Cloche et avatar poussés à droite, sans marges verticales parasites */
    header .container > .dropdown.order-lg-3 { margin-top: 0 !important; margin-bottom: 0 !important; }
    header .container > .dropdown.order-lg-3:first-of-type { margin-left: auto !important; margin-right: 12px !important; }
    header .container > .dropdown.order-lg-3 + .dropdown.order-lg-3 { margin-right: 0 !important; }

    /* Contenu : respiration au-dessus de la barre d'onglets du bas */
    body:has(.bc-bottom-nav) main.page-wrapper { padding-bottom: calc(var(--bc-bottom-nav-h) + var(--bc-safe-bottom) + 12px); }
    body:has(.bc-bottom-nav) footer { padding-bottom: calc(var(--bc-bottom-nav-h) + var(--bc-safe-bottom)); }

    /* Contenu des pages du compte : moins de marge verticale */
    main .container.pt-5 { padding-top: 1rem !important; margin-top: 4.25rem !important; }

    /* Fil d'Ariane : masqué (déjà d-none d-lg-block dans l'espace compte), compact ailleurs */
    .breadcrumb { font-size: .8rem; flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; }

    /* Bandeau cookies : compact, boutons côte à côte */
    .cookie-consent-banner { padding: 12px var(--bc-gutter) calc(12px + var(--bc-safe-bottom)) !important; }
    .cookie-consent-banner p { font-size: .8rem; line-height: 1.35; }
    .cookie-consent-banner .d-flex.gap-2 { width: 100%; }
    .cookie-consent-banner .btn { flex: 1 1 0; }
    /* Au-dessus de la barre d'onglets quand elle est présente */
    body:has(.bc-bottom-nav) .cookie-consent-banner { bottom: calc(var(--bc-bottom-nav-h) + var(--bc-safe-bottom)) !important; }

    /* Formulaires : le double remplissage (conteneur + carte p-4) laissait ~25 % de largeur perdue */
    .card.card-body.p-4, .card-body.p-4, .card.p-4, .p-4.p-sm-5, .card-body.p-sm-5 { padding: 1rem !important; }
    .px-sm-5, .px-md-5 { padding-left: var(--bc-gutter) !important; padding-right: var(--bc-gutter) !important; }
    .modal-body.px-sm-5, .modal-header.px-sm-5 { padding-left: var(--bc-gutter) !important; padding-right: var(--bc-gutter) !important; }

    /* Cartes : coins arrondis cohérents, pas de débordement */
    .card { border-radius: var(--bc-radius); }
    .card-body { padding: 1rem; }
    .mud-paper { max-width: 100%; }

    /* Tableaux MudBlazor : défilement horizontal plutôt que débordement de page */
    .mud-table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .mud-table-pagination .mud-table-pagination-toolbar { flex-wrap: wrap; justify-content: center; row-gap: 4px; }
    .mud-table-pagination-caption { display: none; }

    /* Fenêtres modales : plein écran, défilement interne, pied d'actions toujours visible */
    .mud-dialog-container { align-items: stretch !important; }
    .mud-dialog {
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100%;
        max-height: 100% !important;
        border-radius: 0 !important;
        display: flex;
        flex-direction: column;
    }
    .mud-dialog .mud-dialog-content { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-left: var(--bc-gutter); padding-right: var(--bc-gutter); }
    .mud-dialog .mud-dialog-content .mud-container { max-height: none !important; overflow-y: visible !important; }
    .mud-dialog .mud-dialog-title { padding: 12px var(--bc-gutter); }
    .mud-dialog .mud-dialog-actions { padding: 10px var(--bc-gutter) calc(10px + var(--bc-safe-bottom)); border-top: 1px solid rgba(0, 0, 0, .08); }
    .modal-dialog { margin: 0; max-width: 100%; min-height: 100%; }
    .modal-content { min-height: 100vh; border-radius: 0; border: 0; }

    /* Boutons d'action des formulaires : pleine largeur, empilés */
    .d-sm-flex.justify-content-between > .btn,
    .d-sm-flex.justify-content-between > .mud-button-root,
    form .btn-lg { width: 100%; }

    /* Cartes de statistiques : emoji plus petit */
    .stat-card .stat-icon { font-size: 1.6rem !important; }
    .stat-card .stat-value { font-size: 1.25rem !important; }

    /* Toasts : pleine largeur au-dessus de la barre du bas */
    .mud-snackbar-provider, .mud-snackbar-location-top-right { left: 8px !important; right: 8px !important; top: 8px !important; }
    .mud-snackbar { width: 100%; max-width: none; }

    /* Bouton "retour en haut" : au-dessus de la barre d'onglets */
    body:has(.bc-bottom-nav) .mud-scroll-to-top { bottom: calc(var(--bc-bottom-nav-h) + var(--bc-safe-bottom) + 12px) !important; right: 12px !important; }
    .mud-scroll-to-top .mud-fab { width: 44px; height: 44px; }

    /* Images MudBlazor (illustrations "aucune donnée" en 632x550 fixe) : proportionnelles et bornées */
    .mud-image { max-width: 100%; height: auto !important; }
    img[src$="no-data.svg"] { max-height: 240px; width: auto !important; display: block; margin: 0 auto; }

    /* Onglets (Mes commandes : En cours / Interrompues / Terminées) : libellés compacts, défilement fluide */
    .mud-tabs-toolbar .mud-tab { min-width: 0; padding: 6px 12px; font-size: .78rem; letter-spacing: 0; }
    .mud-tabs-toolbar .mud-tab .mud-icon-root { display: none; }

    /* Autocomplétions et listes déroulantes : hauteur bornée, défilement fluide */
    .mud-popover-open .mud-list { max-height: 50vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .mud-list-item { min-height: 44px; }
}

/* ---------- Très petits écrans (< 400 px) ---------- */
@media (max-width: 399.98px) {
    :root { --bc-gutter: 12px; }
    header.navbar .navbar-brand img { width: 112px; }
    .btn-lg { font-size: 1rem; padding: .6rem 1rem; }
}

/* ---------- Écrans moyens (768 à 991 px) ---------- */
@media (min-width: 768px) and (max-width: 991.98px) {
    .container { max-width: 720px; }
    h1, .h1 { font-size: 2rem; }
    .btn { min-height: 40px; }
    /* Tableaux et listes : aération horizontale */
    main .container.pt-5 { padding-top: 1rem !important; margin-top: 5rem !important; }
    body:has(.bc-bottom-nav) main.page-wrapper { padding-bottom: calc(var(--bc-bottom-nav-h) + var(--bc-safe-bottom) + 16px); }
    header.navbar .navbar-brand img { width: 160px; height: auto; }
    /* Les cartes de catalogue passent sur deux colonnes quand elles le peuvent */
    .catalog-grid .card, .row.g-4 > [class*="col-"] > .card { height: 100%; }
}

/* ---------- Barre d'onglets du bas (composant MobileBottomNav) ---------- */
.bc-bottom-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040;
    display: none;
    height: calc(var(--bc-bottom-nav-h) + var(--bc-safe-bottom));
    padding-bottom: var(--bc-safe-bottom);
    background: #fff;
    border-top: 1px solid rgba(0, 0, 0, .08);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, .06);
}
@media (max-width: 991.98px) { .bc-bottom-nav { display: flex; } }
.bc-bottom-nav a {
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    color: #6b7280; text-decoration: none; font-size: .68rem; font-weight: 600; line-height: 1.1;
    -webkit-tap-highlight-color: transparent;
}
.bc-bottom-nav a i { font-size: 1.35rem; line-height: 1; }
.bc-bottom-nav a.active, .bc-bottom-nav a:active { color: var(--bs-primary, #fd5631); }
.bc-bottom-nav a.bc-bottom-nav-cta span { transform: translateY(-8px); }
.bc-bottom-nav a.bc-bottom-nav-cta i {
    width: 44px; height: 44px; transform: translateY(-10px); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--bs-primary, #fd5631); color: #fff; font-size: 1.4rem;
    box-shadow: 0 4px 10px rgba(253, 86, 49, .4);
}
.bc-bottom-nav .bc-badge {
    position: absolute; top: 6px; margin-left: 14px; min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 8px; background: #dc3545; color: #fff; font-size: .62rem; line-height: 16px; text-align: center;
}
.bc-bottom-nav a { position: relative; }

/* Menus déroulants du header : défilement interne + notifications dans l'écran */
@media (max-width: 991.98px) {
    header .dropdown-menu.bc-account-menu {
        max-height: calc(100vh - 5rem - var(--bc-bottom-nav-h) - var(--bc-safe-bottom));
        max-height: calc(100dvh - 5rem - var(--bc-bottom-nav-h) - var(--bc-safe-bottom));
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
    header .dropdown-menu.bc-notif-menu.show {
        position: fixed !important;
        top: 4rem !important;
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
        max-width: none !important;
        transform: none !important;
        inset: 4rem 8px auto 8px !important;
        max-height: calc(100dvh - 5rem - var(--bc-bottom-nav-h) - var(--bc-safe-bottom)) !important;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

/* Champs enveloppés dans un MudTooltip : pleine largeur, sinon le champ se réduit à son contenu */
.mud-tooltip-root:has(> .mud-input-control) { display: block; width: 100%; }
@media (max-width: 767.98px) {
    .bc-phone-row .form-select { width: 9rem !important; flex: 0 0 auto; }
    .bc-phone-row .form-control { width: auto !important; flex: 1 1 0; min-width: 0; }
    .bc-phone-row .form-control + .mud-button-root { flex: 0 0 auto; }
}