/*
 * CarpeDiem CBD — Thème identité visuelle officielle
 * Compatible avec MudBlazor 8.x
 * Palette : vert forêt #2D5A3D · lin crème #F5EFE4 · or #C9A66B · eau #6B9E98
 */

/* ==================== Variables CSS ==================== */
:root {
    /* AppBar height — doit correspondre au Style="--mud-appbar-height:96px" du MainLayout */
    --mud-appbar-height: 96px;

    /* Couleurs principales */
    --carpediem-primary: #2D5A3D;
    --carpediem-primary-lighten: #4A7A5A;
    --carpediem-primary-darken: #1A3D28;
    --carpediem-primary-hover: rgba(45, 90, 61, 0.08);
    --carpediem-secondary: #C9A66B;
    --carpediem-secondary-lighten: #E0C699;
    --carpediem-secondary-darken: #A88850;
    --carpediem-tertiary: #6B9E98;
    /* États */
    --carpediem-success: #5A8A4A;
    --carpediem-warning: #E6A741;
    --carpediem-error: #C76856;
    --carpediem-info: #6B9E98;
    /* Fonds et surfaces */
    --carpediem-background: #F5EFE4;
    --carpediem-surface: #FDFAF4;
    --carpediem-background-gray: #EAE0D0;
    /* Textes */
    --carpediem-text-primary: #2A1F14;
    --carpediem-text-secondary: #6B5F4F;
    --carpediem-text-disabled: #A89A89;
    /* Bordures */
    --carpediem-divider: #D4C9B5;
    --carpediem-border-radius: 8px;
    --cd-border-gold: 1px solid #B99442;
    --cd-border-radius-card: 16px;
    /* Typographie */
    --font-family-display: 'Playfair Display', Georgia, serif;
    --font-family-body: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    /* MudBlazor CSS Variables Override (CRITIQUE) */
    --mud-palette-primary: #2D5A3D !important;
    --mud-palette-primary-rgb: 45, 90, 61 !important;
    --mud-palette-primary-text: #FFFFFF !important;
    --mud-palette-primary-hover: rgba(45, 90, 61, 0.08) !important;
    --mud-palette-secondary: #C9A66B !important;
    --mud-palette-secondary-rgb: 201, 166, 107 !important;
    --mud-palette-tertiary: #6B9E98 !important;
    --mud-palette-success: #5A8A4A !important;
    --mud-palette-warning: #E6A741 !important;
    --mud-palette-error: #C76856 !important;
    --mud-palette-info: #6B9E98 !important;
}

/* ==================== MudBlazor Component Overrides (PRIORITAIRE) ==================== */

/* AppBar - Transparent (visuel géré par NvoHeader.png en position:fixed) */
/* left:0 + width:100% → le burger ne bouge pas quand le drawer s'ouvre   */
/* z-index:1300 → reste AU-DESSUS du scrim MudDrawer (z-index:1200)        */
.mud-appbar {
    background-color: transparent !important;
    background-image: none !important;
    color: white !important;
    box-shadow: none !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 1300 !important;
}

/* Desktop : sticky → suit le scroll naturel du body (MudBlazor fixed → sticky ici) */
@media (min-width: 600px) {
    .mud-appbar {
        position: sticky !important;
        top: 0 !important;
    }
}

/* ── Drawer : hauteur pleine page sous l'AppBar + scroll interne ─────── */
.mud-drawer {
    height: calc(100vh - var(--mud-appbar-height, 96px)) !important;
    overflow-y: auto;
}

/* Header du drawer sticky → pin toujours visible même si menu long */
.mud-drawer-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1 !important;
    background-color: var(--mud-palette-surface) !important;
}

/* Drawer pinné (état 2 desktop) — fixe au viewport, colle sous l'AppBar au scroll */
.drawer-pinned {
    position: fixed !important;
    top: var(--mud-appbar-height, 96px) !important;
    height: calc(100vh - var(--mud-appbar-height, 96px)) !important;
    left: 0 !important;
    width: 260px !important;
}

/* Drawer — démarre au bas de l'image header */
.mud-drawer {
    top: calc(max(13vw, 120px) - 1px) !important;
    height: calc(100vh - max(13vw, 120px) + 1px) !important;
}

.mud-main-content {
    padding-top: calc(max(20vw, 185px) - 20px) !important; /* hauteur totale NvoHeader.png incl. overflow carte */
    padding-bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
}

.mud-main-content > .mud-container {
    flex: 1 0 auto;
}

/* Boutons Primary - Forcer le vert sauge */
.mud-button-filled-primary,
.mud-button-filled.mud-primary-text,
.mud-fab-primary {
    background-color: var(--carpediem-primary) !important;
    color: white !important;
}

.mud-button-filled-primary:hover,
.mud-button-filled.mud-primary-text:hover {
    background-color: var(--carpediem-primary-darken) !important;
}

.mud-button-outlined-primary,
.mud-button-outlined.mud-primary-text {
    color: var(--carpediem-primary) !important;
    border-color: var(--carpediem-primary) !important;
}

.mud-button-text-primary,
.mud-button-text.mud-primary-text {
    color: var(--carpediem-primary) !important;
}

/* Sliders - Forcer le vert sauge */
.mud-slider .mud-slider-thumb {
    background-color: var(--carpediem-primary) !important;
}

.mud-slider .mud-slider-track-fill {
    background-color: var(--carpediem-primary) !important;
}

.mud-slider.mud-slider-primary .mud-slider-thumb,
.mud-slider.mud-slider-primary .mud-slider-track-fill {
    background-color: var(--carpediem-primary) !important;
}

/* Checkbox Primary */
.mud-checkbox-primary.mud-checked .mud-icon-root {
    color: var(--carpediem-primary) !important;
}

/* Switch Primary */
.mud-switch-primary.mud-checked .mud-switch-thumb {
    background-color: var(--carpediem-primary) !important;
}

.mud-switch-primary.mud-checked .mud-switch-track {
    background-color: var(--carpediem-primary-lighten) !important;
}

/* Radio Primary */
.mud-radio-primary.mud-checked .mud-radio-icons {
    color: var(--carpediem-primary) !important;
}

/* Progress - Circular et Linear */
.mud-progress-circular-primary svg circle,
.mud-progress-linear-primary .mud-progress-linear-bar {
    stroke: var(--carpediem-primary) !important;
    color: var(--carpediem-primary) !important;
}

/* Chips Primary */
.mud-chip-filled.mud-chip-primary {
    background-color: var(--carpediem-primary) !important;
    color: white !important;
}

/* Links */
.mud-link-primary {
    color: var(--carpediem-primary) !important;
}

/* Ripple effect Primary */
.mud-ripple-primary .mud-ripple {
    background-color: var(--carpediem-primary) !important;
    opacity: 0.3 !important;
}

/* Input focus - Forcer le vert sauge */
.mud-input.mud-input-outlined:focus-within .mud-input-slot,
.mud-input.mud-input-outlined.mud-input-focused .mud-input-slot {
    border-color: var(--carpediem-primary) !important;
}

.mud-input.mud-input-outlined:focus-within .mud-input-label,
.mud-input.mud-input-outlined.mud-input-focused .mud-input-label {
    color: var(--carpediem-primary) !important;
}

/* Select focus */
.mud-select.mud-select-outlined:focus-within .mud-input-slot,
.mud-select.mud-select-outlined.mud-input-focused .mud-input-slot {
    border-color: var(--carpediem-primary) !important;
}

/* Icon buttons Primary */
.mud-icon-button.mud-primary-text {
    color: var(--carpediem-primary) !important;
}

.mud-icon-button.mud-primary-text:hover {
    background-color: var(--carpediem-primary-hover) !important;
}

/* Background général et body */
html, body {
    margin: 0 !important;
    padding: 0 !important;
}

body {
    background-color: var(--carpediem-background) !important;
    color: var(--carpediem-text-primary) !important;
    font-family: var(--font-family-body) !important;
}

.mud-main-content {
    background-color: var(--carpediem-background) !important;
}

/* ==================== Typographie Personnalis�e ==================== */

/* Playfair Display pour les grands titres (cohérence logo) */
h1, .mud-typography-h1,
h2, .mud-typography-h2,
h3, .mud-typography-h3 {
    font-family: var(--font-family-display) !important;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--carpediem-primary);
}

/* Inter pour le reste */
h4, .mud-typography-h4,
h5, .mud-typography-h5,
h6, .mud-typography-h6,
body, .mud-typography-body1, .mud-typography-body2,
.mud-button-root, .mud-input-root {
    font-family: var(--font-family-body) !important;
}

/* Ajustements sp�cifiques */
.mud-typography-h1 {
    font-size: 3rem;
    line-height: 1.2;
}

.mud-typography-h2 {
    font-size: 2.5rem;
    line-height: 1.2;
}

.mud-typography-h3 {
    font-size: 2rem;
    line-height: 1.3;
}

.mud-typography-h4 {
    font-size: 1.75rem;
    line-height: 1.4;
}

.mud-typography-h5 {
    font-size: 1.5rem;
    line-height: 1.5;
}

.mud-typography-h6 {
    font-size: 1.25rem;
    line-height: 1.6;
}

.mud-typography-body1 {
    font-size: 1rem;
    line-height: 1.6;
    letter-spacing: 0.01em;
}

.mud-typography-body2 {
    font-size: 0.875rem;
    line-height: 1.6;
    letter-spacing: 0.01em;
}

/* ==================== Scrollbar Personnalis�e ==================== */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: var(--carpediem-background);
}

::-webkit-scrollbar-thumb {
    background: var(--carpediem-primary);
    border-radius: 6px;
    border: 2px solid var(--carpediem-background);
}

    ::-webkit-scrollbar-thumb:hover {
        background: var(--carpediem-primary-darken);
    }

/* ==================== Badges Produits ==================== */
.badge-best-seller {
    background: var(--carpediem-warning);
    color: white;
    border-radius: 16px;
    padding: 4px 12px;
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.badge-coup-de-coeur {
    background: var(--carpediem-error);
    color: white;
    border-radius: 16px;
    padding: 4px 12px;
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.badge-nouveaute {
    background: var(--carpediem-info);
    color: white;
    border-radius: 16px;
    padding: 4px 12px;
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.badge-huiles-cbd {
    background: var(--carpediem-primary);
    color: white;
    border-radius: 16px;
    padding: 4px 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.badge-gelules {
    background: var(--carpediem-secondary);
    color: var(--carpediem-text-primary);
    border-radius: 16px;
    padding: 4px 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* ==================== Cartes Produits ==================== */
.product-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: var(--carpediem-border-radius);
}

    .product-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 24px rgba(62, 53, 41, 0.15);
    }

    .product-card .mud-card-media,
    .pack-card .mud-card-media {
        border-radius: var(--carpediem-border-radius) var(--carpediem-border-radius) 0 0;
    }

/* ==================== Boutons Personnalis�s ==================== */
.mud-button-root {
    border-radius: var(--carpediem-border-radius);
    font-weight: 500;
    letter-spacing: 0.02em;
    transition: all 0.2s ease;
}

.mud-button-filled-primary:hover {
    background-color: var(--carpediem-primary-darken) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(122, 158, 126, 0.3);
}

.mud-button-outlined-secondary:hover {
    background-color: rgba(201, 166, 107, 0.08);
}

/* ==================== Inputs et Formulaires ==================== */
.mud-input-root {
    border-radius: var(--carpediem-border-radius);
}

.mud-input-outlined .mud-input-outlined-input:focus {
    border-color: var(--carpediem-primary);
}

.mud-select {
    border-radius: var(--carpediem-border-radius);
}

/* ==================== Chips (Tags) ==================== */
.mud-chip {
    border-radius: 16px;
    font-weight: 500;
}

/* Chip pour concentration CBD */
.cbd-concentration-chip {
    background: linear-gradient(135deg, var(--carpediem-primary), var(--carpediem-primary-lighten));
    color: white;
    font-weight: 600;
}

/* Chip pour format THC < 0.3% */
.thc-compliant-chip {
    background: var(--carpediem-success);
    color: white;
}

/* ==================== AppBar Transparente (Optionnel) ==================== */
.mud-appbar-sticky {
    backdrop-filter: blur(10px);
    background-color: rgba(122, 158, 126, 0.95) !important;
    transition: background-color 0.3s ease;
}

.mud-appbar-scrolled {
    background-color: var(--carpediem-primary) !important;
    box-shadow: 0 2px 8px rgba(62, 53, 41, 0.1);
}

/* ==================== Drawer (Menu Lat�ral) ==================== */
.mud-drawer {
    border-right: 1px solid var(--carpediem-divider);
}

.mud-nav-link:hover {
    background-color: rgba(122, 158, 126, 0.08) !important;
}

.mud-nav-link.active {
    background-color: rgba(122, 158, 126, 0.15) !important;
    color: var(--carpediem-primary) !important;
}

/* ==================== Tables ==================== */
.mud-table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--carpediem-background) !important;
}

.mud-table-hover tbody tr:hover {
    background-color: var(--carpediem-background-gray) !important;
}

.mud-table {
    border-radius: var(--carpediem-border-radius);
}

/* ==================== Alerts & Snackbars ==================== */
.mud-alert-filled-success {
    background-color: var(--carpediem-success) !important;
}

.mud-alert-filled-warning {
    background-color: var(--carpediem-warning) !important;
}

.mud-alert-filled-error {
    background-color: var(--carpediem-error) !important;
}

.mud-alert-filled-info {
    background-color: var(--carpediem-info) !important;
}

/* ==================== Pagination ==================== */
.mud-pagination .mud-pagination-item.active {
    background-color: var(--carpediem-primary) !important;
    color: white !important;
}

.mud-pagination .mud-pagination-item:hover {
    background-color: var(--carpediem-primary-lighten) !important;
}

/* ==================== Dialogues & Modales ==================== */
.mud-dialog {
    border-radius: calc(var(--carpediem-border-radius) * 2);
}

.mud-dialog-title {
    font-family: var(--font-family-display) !important;
    color: var(--carpediem-primary);
}

/* ==================== Loading Skeleton ==================== */
.mud-skeleton {
    background: linear-gradient( 90deg, var(--carpediem-background-gray) 25%, var(--carpediem-background) 50%, var(--carpediem-background-gray) 75% );
    background-size: 200% 100%;
    animation: loading 1.5s ease-in-out infinite;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* ==================== Prix Produits ==================== */
.product-price {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--carpediem-tertiary);
    font-family: var(--font-family-body);
}

.product-price-old {
    font-size: 1rem;
    font-weight: 400;
    color: var(--carpediem-text-secondary);
    text-decoration: line-through;
}

/* ==================== Conformit� CBD ==================== */
.cbd-legal-notice {
    background: linear-gradient(135deg, rgba(122, 158, 126, 0.1), rgba(163, 188, 166, 0.1));
    border-left: 4px solid var(--carpediem-primary);
    padding: 1rem;
    border-radius: var(--carpediem-border-radius);
    margin: 1rem 0;
}

/* ==================== Stock Status ==================== */
.stock-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 12px;
}

    .stock-status.in-stock {
        background-color: rgba(119, 178, 85, 0.15);
        color: var(--carpediem-success);
    }

    .stock-status.low-stock {
        background-color: rgba(230, 167, 65, 0.15);
        color: var(--carpediem-warning);
    }

    .stock-status.out-of-stock {
        background-color: rgba(199, 104, 86, 0.15);
        color: var(--carpediem-error);
    }

/* ==================== Responsive ==================== */
@media (max-width: 960px) {
    .mud-typography-h1 {
        font-size: 2.5rem;
    }

    .mud-typography-h2 {
        font-size: 2rem;
    }

    .mud-typography-h3 {
        font-size: 1.75rem;
    }
}

@media (max-width: 600px) {
    /* Désactiver le point focal sur mobile — centrage par défaut */
    .product-card .mud-card-media {
        background-position: center !important;
    }

    .mud-typography-h1 {
        font-size: 2rem;
    }

    .mud-typography-h2 {
        font-size: 1.75rem;
    }

    .mud-typography-h3 {
        font-size: 1.5rem;
    }

    .product-card {
        margin-bottom: 1rem;
    }
}

/* ==================== Hero Section ==================== */
.hero-section {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #e8f0e8 0%, #F5EFE4 50%, #edf0e8 100%);
    border-radius: 20px !important;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 3rem 2rem !important;
}

/* Cercle décoratif en arrière-plan (vert sauge, très doux) */
.hero-section::before {
    content: '';
    position: absolute;
    top: -80px;
    right: -80px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(122, 158, 126, 0.18) 0%, transparent 70%);
    pointer-events: none;
}

/* Second cercle en bas à gauche */
.hero-section::after {
    content: '';
    position: absolute;
    bottom: -60px;
    left: -60px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(201, 166, 107, 0.15) 0%, transparent 70%);
    pointer-events: none;
}

/* Textes à l'intérieur du hero au-dessus des pseudo-éléments */
.hero-section > * {
    position: relative;
    z-index: 1;
}

/* ==================== Benefits Cards ==================== */
.benefit-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border-top: 3px solid var(--carpediem-primary);
}

.benefit-card:hover {
    transform: translateY(-3px);
}

/* ==================== Utilities ==================== */
.text-primary-color {
    color: var(--carpediem-primary) !important;
}

.text-secondary-color {
    color: var(--carpediem-secondary) !important;
}

.bg-natural {
    background: linear-gradient(135deg, #F8F6F2, #FFFFFF);
}

.shadow-natural {
    box-shadow: 0 4px 12px rgba(62, 53, 41, 0.12);
}

.rounded-natural {
    border-radius: var(--carpediem-border-radius);
}

/* ==================== Story 8.5 - Gestion Commandes ==================== */

/* Fond orange clair pour les commandes "En préparation" (Status=Confirmed) */
.order-pending-row {
    background-color: rgba(255, 165, 0, 0.08);
}

/* ==================== Zen & Bien-être — Global ==================== */

/* Boutons pill : arrondis généreux */
.mud-button-root {
    border-radius: 24px !important;
}

/* Chips arrondies */
.mud-chip {
    border-radius: 20px !important;
}

/* Cards : ombre très douce, plus de respiration */
.mud-card {
    border-radius: 16px !important;
    box-shadow: 0 2px 16px rgba(62, 53, 41, 0.07) !important;
    transition: box-shadow 0.25s ease, transform 0.2s ease;
}

.mud-card:hover {
    box-shadow: 0 6px 24px rgba(62, 53, 41, 0.12) !important;
}

/* Dialogs arrondis */
.mud-dialog {
    border-radius: 20px !important;
}

/* Inputs : arrondis et confortables */
.mud-input-outlined .mud-input-outlined-border,
.mud-input-outlined .mud-notched-outline {
    border-radius: 12px !important;
}

/* AppBar logo full — responsive */
.appbar-logo-full {
    height: 80px;
    object-fit: contain;
}

/* AppBar logo icon — desktop uniquement */
.appbar-logo-icon {
    display: flex !important;
}

/* AppBar actions droite — compact en mobile */
.appbar-actions {
    display: flex;
    align-items: center;
}

@media (max-width: 959px) {
    .appbar-actions .mud-icon-button,
    .appbar-actions .mud-button-root {
        padding: 6px !important;
        width: 40px !important;
        height: 40px !important;
        min-width: unset !important;
    }
}

@media (max-width: 959px) {
    .appbar-logo-icon {
        display: none !important;
    }
    .appbar-logo-full {
        height: 50px;
    }
}

/* Footer links */
.footer-link,
.footer-link:visited,
.footer-link.mud-link {
    color: rgba(255, 255, 255, 0.75) !important;
    text-decoration: none !important;
}
.footer-link:hover {
    color: #C9A66B !important;
}

/* Éléments interactifs : fond opaque pour lisibilité sur le pattern */
/* Uniquement les conteneurs non-interactifs — ne pas écraser hover/selected */
.mud-paper:not(.app-footer),
.mud-card,
.mud-dialog,
.mud-popover-paper,
.mud-drawer-content {
    background-color: var(--carpediem-surface) !important;
}

/* Inputs & selects — fond opaque avec radius pour correspondre à la bordure */
.mud-input-outlined,
.mud-input-outlined .mud-input-slot,
.mud-input-outlined .mud-input-adornment,
.mud-input-outlined .mud-input-adornment-end,
.mud-input-control-input-slot {
    background-color: var(--carpediem-surface) !important;
    border-radius: 12px !important;
}

/* Boutons outlined — fond opaque (évite fond transparent sur pattern) */
.mud-button-root.mud-button-outlined {
    background-color: var(--carpediem-surface) !important;
}


/* Fond de page : lin crème + pattern botanique via pseudo-élément */
body {
    background-color: var(--carpediem-background) !important;
    position: relative;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url('/images/background.png');
    background-repeat: repeat;
    background-size: 800px auto;
    background-position: center calc(max(20vw, 185px) - 20px);
    opacity: 0.45;
    z-index: 0;
    pointer-events: none;
    transform: translateZ(0);
    will-change: transform;
}

.mud-main-content {
    background-color: transparent !important;
    position: relative;
    z-index: 1;
}

/* Tables : lignes plus aérées */
.mud-table-cell {
    padding: 14px 16px !important;
}

/* Paper / surfaces */
.mud-paper {
    border-radius: 16px !important;
}

/* ==================== MudDialog - Tabs hauteur fixe ==================== */

/* Le MudTabs remplit toute la hauteur du DialogContent fixe */
.dialog-tabs-fixed {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.dialog-tabs-fixed > .mud-tabs-panels {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

/* Chaque panel remplit son conteneur */
.dialog-tab-panel {
    height: 100%;
}

/* ==================== Mobile — pas de scroll horizontal (Story 22.4) ==================== */
@media (max-width: 600px) {
    html, body {
        overflow-x: hidden;
        max-width: 100%;
    }
}

/* ==================== Catalogue — Drawer filtre/tri sous AppBar ==================== */
.mud-drawer-temporary.mud-drawer-pos-right {
    top: 96px !important;
    height: calc(100vh - 96px) !important;
}

/* ==================== Charte Graphique Or — Classe Utilitaire ==================== */
.cd-card {
    border: var(--cd-border-gold) !important;
    border-radius: var(--cd-border-radius-card) !important;
}

/* ==================== Stock Dashboard — Lot Lineage Grouping ==================== */
.cd-lot-group-start > td {
    border-top: 2px solid #B99442 !important;
}
.cd-child-lot-indent {
    padding-left: 8px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.8rem;
}

/* ==================== Shipping option cards ==================== */
.shipping-option-btn {
    transition: box-shadow 0.15s ease, border-color 0.15s ease !important;
    user-select: none;
}

.shipping-option-btn:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.15) !important;
}

.shipping-option-btn--selected {
    border-color: var(--mud-palette-primary) !important;
    background-color: color-mix(in srgb, var(--mud-palette-primary) 6%, transparent) !important;
}

/* ==================== Mobile — Header padding réduit ==================== */
@media (max-width: 599px) {
    .mud-main-content {
        padding-top: calc(max(20vw, 70px) - 32px) !important; /* image ~20vw ou AppBar 70px */
    }
    .mud-drawer {
        top: calc(20vw - 32px) !important;
        height: calc(100vh - 20vw + 32px) !important;
    }

    /* AppBar plus petite sur mobile → icônes remontent */
    /* position:fixed obligatoire sur iOS Safari : sticky dans flexbox MudBlazor ne colle pas */
    .mud-appbar {
        height: 70px !important;
        --mud-appbar-height: 70px !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        background-color: #2D5A3D !important;
    }

    /* Icônes AppBar réduites sur iPhone : 40px → 32px = libère ~24px
       pour éviter le chevauchement avec la carte logo centrée */
    .mud-appbar .mud-icon-button,
    .mud-appbar .mud-icon-button.mud-button-root {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        padding: 2px !important;
    }
    .mud-appbar .mud-icon-root {
        font-size: 20px !important;
        width: 20px !important;
        height: 20px !important;
    }
    /* MudMenu (menu utilisateur) — même réduction */
    .mud-appbar .mud-menu .mud-icon-button {
        width: 32px !important;
        height: 32px !important;
        padding: 2px !important;
    }
}

/* ==================== Catalogue — Drawers filtre/tri sous header ==================== */
.catalogue-overlay-drawer {
    top: calc(max(13vw, 120px) - 1px) !important;
    height: calc(100vh - max(13vw, 120px) + 1px) !important;
}

@media (max-width: 599px) {
    .catalogue-overlay-drawer {
        top: calc(20vw - 15px) !important;
        height: calc(100vh - 20vw + 15px) !important;
    }
}

/* ==================== Impression facture (dialog plein écran) ==================== */
@media print {
    /* Masquer l'appbar, le drawer, le contenu principal et le fond */
    .mud-appbar,
    .mud-drawer,
    .mud-main-content,
    .mud-overlay-scrim,
    body::before { display: none !important; }

    /* Fond blanc */
    body { background: #fff !important; margin: 0 !important; }

    /* Dialog en mode statique plein page */
    .mud-dialog-container { position: static !important; }
    .mud-dialog {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    .mud-dialog-content { overflow: visible !important; max-height: none !important; padding: 0 !important; }
    .mud-dialog-title { display: none !important; }
    .mud-dialog-actions { display: none !important; }

    /* Boutons no-print */
    .no-print { display: none !important; }

    /* Tableau facture */
    .invoice-table tr { page-break-inside: avoid; }

    @page { margin: 15mm; size: A4 portrait; }
}