@import url('../fonts/mobile-fonts.css');

/* ==========================================================================
   1. VARIABLES & BASE TYPOGRAPHIQUE (CHARTE TACOS M)
   ========================================================================== */
:root {
    --tm-cream: #FFF9EF;
    --tm-cream-deep: #FFF4DF;
    --tm-cream-2: #FFF7EC;
    --tm-card: #FFFFFF;
    --tm-cheddar: #FFB800;
    --tm-cheddar-dark: #F59E0B;
    --tm-orange: #FF7A00;
    --tm-red: #E84832;
    --tm-ink: #151923;
    --tm-muted: #737783;
    --tm-light: #A7A9AF;
    --tm-border: #F0ECE4;
    --tm-green: #16A34A;
    --tm-shadow: 0 5px 18px rgba(21,25,35,.065);
    --tm-shadow-lg: 0 12px 28px rgba(21,25,35,.09);
}
[data-theme="dark"] {
    --tm-cream: #151923;
    --tm-cream-deep: #1E2330;
    --tm-card: #1E2330;
    --tm-ink: #FFF9EF;
    --tm-muted: #9CA3AF;
    --tm-border: #2A303C;
}
[data-theme="dark"] #kiosk-nav-bar,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .step-collapsed,
[data-theme="dark"] .product-recap-card.fixed-header,
[data-theme="dark"] .sticky-action-bar,
[data-theme="dark"] #kiosk-cart,
[data-theme="dark"] .option-card-v3,
[data-theme="dark"] .cat-card-modern {
    background-color: #1E2330 !important;
    color: #FFF9EF !important;
    border-color: #2A303C !important;
}
html, body {
    height: 100dvh !important;
    width: 100% !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
    -webkit-overflow-scrolling: auto !important;
    font-family: 'Poppins', sans-serif !important;
    color: var(--tm-ink) !important;
    background: var(--tm-cream) !important;
}

button, input {
    font-family: 'Poppins', sans-serif !important;
    -webkit-tap-highlight-color: transparent !important;
}

.option-card-v3, .step-collapsed, .cat-card-modern, .product-card {
    -webkit-tap-highlight-color: transparent !important;
}

#kiosk-container {
    width: 100vw !important;
    height: 100dvh !important;
    max-width: 100% !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
    background: var(--tm-cream) !important;
}

#main-grid-container {
    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch;
    padding-top: 4px !important;
    overflow-x: hidden !important;
    background: transparent !important;
}

#kiosk-content {
    padding-bottom: 72px !important;
    overflow-x: hidden !important;
    background: var(--tm-cream) !important;
}

#kiosk-content:has(#discover-container:not(.hidden)) {
    padding-bottom: 60px !important;
}

/* ==========================================================================
   2. ÉCRAN DE VEILLE & MODALES
   ========================================================================== */
.logo-mark {
    width: 56px !important;
    height: 56px !important;
    font-size: 24px !important;
}

.logo-title {
    font-size: 32px !important;
}

.touch-overlay {
    height: 60px !important;
    padding: 0 24px !important;
    font-size: 20px !important;
    animation: none !important;
}

.touch-icon {
    width: 32px !important;
    height: 32px !important;
    font-size: 14px !important;
}

.modal-overlay {
    background: rgba(21,25,35,.55) !important;
    backdrop-filter: blur(7px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

.modal-content {
    width: 92% !important;
    padding: 24px !important;
    background: #fff !important;
    border: 1px solid var(--tm-border) !important;
    border-radius: 24px !important;
    box-shadow: 0 24px 60px rgba(21,25,35,.22) !important;
    animation: bhModalIn .32s cubic-bezier(.22,1,.36,1) both !important;
}

.modal-content h2 {
    font-family: 'Baloo 2', sans-serif !important;
    font-size: 28px !important;
    font-weight: 800 !important;
    color: var(--tm-ink) !important;
}

.modal-badge {
    background: #FFF5D6 !important;
    color: #9A6500 !important;
    border: 0 !important;
    border-radius: 999px !important;
    font-weight: 950 !important;
}

.modal-close {
    border-radius: 12px !important;
    transition: transform .16s ease !important;
}

.modal-close:active {
    transform: rotate(8deg) scale(.9) !important;
}

.choice-modal .modal-close {
    top: 14px !important;
    right: 14px !important;
    width: 52px !important;
    height: 52px !important;
    font-size: 22px !important;
}

.choice-buttons {
    flex-direction: column !important;
    gap: 12px !important;
}

.choice-btn {
    height: 100px !important;
    flex-direction: row !important;
    padding: 16px !important;
    gap: 16px !important;
    justify-content: flex-start !important;
    border-radius: 20px !important;
    border: 1px solid var(--tm-border) !important;
    box-shadow: var(--tm-shadow) !important;
    transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s ease !important;
}

.choice-btn:active {
    transform: scale(.97) !important;
}

.choice-icon-wrap {
    width: 56px !important;
    height: 56px !important;
    font-size: 24px !important;
    margin-bottom: 0 !important;
    flex-shrink: 0 !important;
}

.choice-label {
    font-size: 22px !important;
}

#customer-name {
    height: 56px !important;
    font-size: 18px !important;
}

.dialog-modal-card {
    padding: 26px 20px 22px !important;
    border-radius: 24px !important;
}

.dialog-modal-card h2 {
    font-size: 28px !important;
}

.dialog-modal-card .modal-sub {
    font-size: 14px !important;
    margin-bottom: 20px !important;
}

.dialog-modal-card .customization-actions {
    height: 44px !important;
    margin-top: 16px !important;
    gap: 8px !important;
}

.dialog-modal-card .btn-action {
    font-size: 13px !important;
    border-radius: 12px !important;
}

/* ==========================================================================
   3. HERO BANNER & NAVIGATION
   ========================================================================== */
#promo-banner {
    position: relative !important;
    height: 142px !important;
    overflow: hidden !important;
    border-radius: 0 0 24px 24px !important;
    box-shadow: 0 9px 24px rgba(21,25,35,.12) !important;
}

#promo-banner::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    background: linear-gradient(90deg, rgba(21,25,35,.74), rgba(21,25,35,.16) 66%, transparent),
                linear-gradient(0deg, rgba(21,25,35,.24), transparent 52%) !important;
}

#promo-banner img {
    transform: scale(1.035) !important;
    transition: transform 1.2s cubic-bezier(.2,.8,.2,1) !important;
}

#promo-banner:hover img {
    transform: scale(1.07) !important;
}

.promo-content {
    position: relative !important;
    z-index: 2 !important;
    padding: 18px 17px !important;
    animation: bhHeroIn .55s cubic-bezier(.22,1,.36,1) both !important;
}

.promo-tag {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    border-radius: 999px !important;
    text-transform: uppercase !important;
    background: var(--tm-cheddar) !important;
    color: var(--tm-ink) !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: .65px !important;
    padding: 6px 10px !important;
    box-shadow: 0 6px 14px rgba(21,25,35,.14) !important;
}

.promo-tag i {
    animation: bhPulse 1.8s ease-in-out infinite !important;
}

.promo-title {
    margin-top: 9px !important;
    color: #fff !important;
    font-family: 'Baloo 2', sans-serif !important;
    font-size: 28px !important;
    font-weight: 800 !important;
    letter-spacing: -.55px !important;
    line-height: .98 !important;
    text-shadow: 0 4px 18px rgba(0,0,0,.24) !important;
}

#kiosk-nav-bar {
    height: 64px !important;
    padding: 0 10px !important;
    gap: 8px !important;
    background: rgba(255,255,255,.92) !important;
    border-bottom: 1px solid var(--tm-border) !important;
    box-shadow: 0 4px 15px rgba(21,25,35,.045) !important;
    backdrop-filter: blur(18px) saturate(1.35) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.35) !important;
}

.nav-icon-btn {
    width: 42px !important;
    height: 42px !important;
    border-radius: 14px !important;
    background: #fff !important;
    border: 1px solid var(--tm-border) !important;
    box-shadow: none !important;
    color: var(--tm-ink) !important;
    font-size: 14px !important;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease !important;
}

.nav-icon-btn:active {
    transform: scale(.92) !important;
}

.nav-right {
    gap: 4px !important;
}

.order-type-toggle {
    padding: 4px !important;
    border-radius: 15px !important;
    background: #F7F2E9 !important;
    box-shadow: inset 0 1px 2px rgba(16,24,40,.08) !important;
}

.order-type-toggle button {
    padding: 0 10px !important;
    border-radius: 11px !important;
    height: 34px !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: .25px !important;
    gap: 4px !important;
    transition: all .22s cubic-bezier(.22,1,.36,1) !important;
}

.order-type-toggle button.active {
    background: var(--tm-ink) !important;
    color: #fff !important;
    box-shadow: 0 5px 12px rgba(21,25,35,.13) !important;
}

#btn-vider-panier {
    height: 32px !important;
    padding: 0 10px !important;
    font-size: 11px !important;
    gap: 4px !important;
    border-radius: 12px !important;
    border: 1px solid var(--tm-border) !important;
    background: #FFF2ED !important;
    color: var(--tm-red) !important;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease !important;
}

#btn-vider-panier:active {
    transform: scale(.92) !important;
}

/* ==========================================================================
   4. CATÉGORIES PRINCIPALES & À DÉCOUVRIR
   ========================================================================== */
.categories-grid {
    display: grid !important;
    gap: 8px !important;
    padding: 10px 0 20px !important;
    padding-top: 4px !important;
}

.categories-grid.cols-2 {
    grid-template-columns: repeat(2, 1fr) !important;
}

.categories-grid.cols-2 .cat-img-wrapper {
    height: 100px !important;
}

.categories-grid.cols-3 {
    grid-template-columns: repeat(3, 1fr) !important;
}

.categories-grid.cols-3 .cat-img-wrapper {
    height: 75px !important;
}

.cat-card-modern {
    background: var(--tm-card) !important;
    border: 1px solid var(--tm-border) !important;
    border-radius: 20px !important;
    box-shadow: var(--tm-shadow) !important;
    transition: transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s ease, border-color .22s ease !important;
}

.cat-card-modern:active {
    transform: scale(.975) translateY(1px) !important;
}

.cat-arrow {
    display: none !important;
}

.cat-card-modern .cat-img-wrapper {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 18px 18px 0 0 !important;
}

.cat-card-modern .cat-img-wrapper::after {
    content: "" !important;
    position: absolute !important;
    left: 8px !important;
    right: 8px !important;
    bottom: 5px !important;
    height: 18px !important;
    background: radial-gradient(ellipse, rgba(16,24,40,.14), transparent 70%) !important;
    filter: blur(3px) !important;
    pointer-events: none !important;
}

.cat-card-modern img {
    transition: transform .35s cubic-bezier(.22,1,.36,1) !important;
}

.cat-card-modern:active img {
    transform: scale(1.045) !important;
}

.cat-info-bar {
    padding: 6px 8px !important;
    gap: 6px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    background: #fff !important;
}

.cat-icon-circle {
    width: 24px !important;
    height: 24px !important;
    font-size: 11px !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    box-shadow: 0 4px 10px rgba(16,24,40,.18) !important;
}

.categories-grid .cat-name {
    margin-top: 1px !important;
    text-align: left !important;
    white-space: normal !important;
    word-break: break-word !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    font-family: 'Baloo 2', sans-serif !important;
    font-size: 13px !important;
    line-height: 1.15 !important;
    color: var(--tm-ink) !important;
}

.cat-card-modern.long-title .cat-name {
    font-size: 10px !important;
    letter-spacing: -0.3px !important;
}

.cat-ribbon-min-price {
    font-size: 8px !important;
    padding: 4px 6px !important;
    border-bottom-left-radius: 10px !important;
    box-shadow: -2px 2px 4px rgba(0,0,0,0.15) !important;
    letter-spacing: 0.2px !important;
}

/* Section "À découvrir aussi" */
#discover-container {
    padding: 8px 10px 10px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 4px !important;
}

#discover-container .section-title {
    font-size: 14px !important;
    margin-bottom: 6px !important;
    gap: 6px !important;
}

#discover-container .section-title i {
    font-size: 14px !important;
}

.discover-grid {
    gap: 8px !important;
    padding-bottom: 0 !important;
}

.discover-card.cat-card-modern {
    width: 90px !important;
    flex: 0 0 90px !important;
    border-radius: 10px !important;
    min-height: auto !important;
}

.discover-card.cat-card-modern .cat-img-wrapper {
    height: 48px !important;
}

.discover-card.cat-card-modern .cat-info-bar {
    padding: 4px 6px !important;
    gap: 4px !important;
    align-items: center !important;
    text-align: center !important;
    justify-content: center !important;
}

.discover-card.cat-card-modern .cat-icon-circle {
    width: 18px !important;
    height: 18px !important;
    font-size: 9px !important;
    flex-shrink: 0 !important;
}

.discover-card.cat-card-modern .cat-name {
    font-size: 10px !important;
    letter-spacing: -0.3px !important;
    line-height: 1.05 !important;
    margin-top: 1px !important;
    white-space: normal !important;
    word-break: break-word !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-align: center !important;
}

/* ==========================================================================
   5. GRILLES PRODUITS (STYLES 1 & 2)
   ========================================================================== */
#main-grid-container .products-header {
    margin: -16px -16px 12px -16px !important;
    padding: 16px !important;
    top: -16px !important;
    gap: 12px !important;
}

#main-grid-container .category-header-title h2 {
    font-size: 26px !important;
}

#main-grid-container .cat-brush-stroke-svg {
    height: 10px !important;
    margin-top: -4px !important;
    width: 105% !important;
}

#main-grid-container .back-btn {
    width: 40px !important;
    height: 40px !important;
    font-size: 16px !important;
}

#main-grid-container .products-grid {
    display: grid !important;
    gap: 8px !important;
    padding-bottom: 24px !important;
}

#main-grid-container .products-grid.cols-2,
#main-grid-container .products-grid.cols-3 {
    grid-template-columns: repeat(2, 1fr) !important;
    align-items: stretch !important;
}

#main-grid-container .products-grid.cols-1 {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
}

.product-card {
    background: var(--tm-card) !important;
    border: 1px solid var(--tm-border) !important;
    border-radius: 20px !important;
    box-shadow: var(--tm-shadow) !important;
    transition: transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s ease, border-color .22s ease !important;
}

.product-card:active {
    transform: scale(.975) translateY(1px) !important;
}

.product-card img {
    transition: transform .35s cubic-bezier(.22,1,.36,1) !important;
}

.product-card:active img {
    transform: scale(1.045) !important;
}

/* Style 1 classique */
#main-grid-container .product-card:not(.style-2) {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 12px !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
}

#main-grid-container .product-card:not(.style-2) .product-img-wrapper {
    width: 100% !important;
    height: 135px !important;
    min-height: 135px !important;
    max-height: 135px !important;
    padding: 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    overflow: hidden !important;
    border-radius: 18px 18px 0 0 !important;
}

#main-grid-container .product-card:not(.style-2) .product-img-wrapper::after {
    content: "" !important;
    position: absolute !important;
    left: 8px !important;
    right: 8px !important;
    bottom: 5px !important;
    height: 18px !important;
    background: radial-gradient(ellipse, rgba(16,24,40,.14), transparent 70%) !important;
    filter: blur(3px) !important;
    pointer-events: none !important;
}

#main-grid-container .product-card:not(.style-2) .product-info {
    padding: 6px 8px !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    width: 100% !important;
}

#main-grid-container .product-card:not(.style-2) .product-name {
    font-size: 11.5px !important;
    line-height: 1.05 !important;
    margin-bottom: 2px !important;
    white-space: normal !important;
    word-break: break-word !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

#main-grid-container .product-card:not(.style-2) .product-desc {
    font-size: 10px !important;
    margin-bottom: 6px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    min-height: 22px !important;
}

#main-grid-container .product-card:not(.style-2) .product-footer {
    margin-top: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
}

#main-grid-container .product-card:not(.style-2) .product-price {
    font-size: 13px !important;
    margin: 0 !important;
    font-weight: 900 !important;
}

#main-grid-container .product-card:not(.style-2) .product-add-circle {
    position: static !important;
    width: 26px !important;
    height: 26px !important;
    font-size: 12px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
}

/* Style 1 (Cas 1 colonne) */
#main-grid-container .products-grid.cols-1:not(.style-prod-2) {
    padding-bottom: 4px !important;
    gap: 8px !important;
}

#main-grid-container .products-grid.cols-1:not(.style-prod-2) .product-card:not(.style-2) {
    max-width: 200px !important;
    margin: 0 auto !important;
}

#main-grid-container .products-grid.cols-1:not(.style-prod-2) .product-card:not(.style-2) .product-img-wrapper {
    height: 95px !important;
    min-height: 95px !important;
    max-height: 95px !important;
}

#main-grid-container .products-grid.cols-1:not(.style-prod-2) .product-name {
    font-size: 14px !important;
}

#main-grid-container .products-grid.cols-1:not(.style-prod-2) .product-desc {
    min-height: 0 !important;
    margin-bottom: 4px !important;
}

#main-grid-container .products-grid.cols-1:not(.style-prod-2) .product-price {
    font-size: 16px !important;
}

#main-grid-container .products-grid.cols-1:not(.style-prod-2) .product-add-circle {
    width: 32px !important;
    height: 32px !important;
    font-size: 14px !important;
}

/* Style 2 horizontal */
#main-grid-container .product-card.style-2 {
    width: 100% !important;
    max-width: 100% !important;
    height: 80px !important;
    min-height: 80px !important;
    max-height: 80px !important;
    border-radius: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: row !important;
}

#main-grid-container .prod-left-wrap {
    width: 65px !important;
    min-width: 65px !important;
    max-width: 65px !important;
    flex-shrink: 0 !important;
    height: 100% !important;
}

#main-grid-container .prod-left-visual {
    padding: 0 4px !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#main-grid-container .prod-left-visual img {
    width: 50px !important;
    height: 65px !important;
    object-fit: contain !important;
}

#main-grid-container .prod-right-details {
    padding: 6px 6px 6px 4px !important;
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    position: relative !important;
}

#main-grid-container .products-grid .product-card.style-2 .prod-title-s2 {
    font-size: 11px !important;
    line-height: 1.05 !important;
    margin: 0 0 2px 0 !important;
    white-space: normal !important;
    word-break: break-word !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

#main-grid-container .products-grid .product-card.style-2 .prod-desc-s2 {
    font-size: 9px !important;
    margin: 0 0 2px 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

#main-grid-container .products-grid .product-card.style-2 .prod-price-s2 {
    font-size: 13px !important;
    margin-top: auto !important;
    line-height: 1 !important;
}

#main-grid-container .products-grid .product-card.style-2 .prod-btn-plus-s2 {
    width: 26px !important;
    height: 26px !important;
    font-size: 12px !important;
    bottom: 6px !important;
    right: 6px !important;
    position: absolute !important;
}

/* ==========================================================================
   6. TUNNEL DE PERSONNALISATION
   ========================================================================== */
body.in-custom #kiosk-cart,
body.in-custom #promo-banner,
body.in-custom #kiosk-nav-bar {
    display: none !important;
}

body.in-custom #kiosk-container {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    overflow: hidden !important;
}

body.in-custom #kiosk-content,
body.in-custom #main-grid-container,
.mobile-custom-flow {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    min-height: 0 !important;
    height: 100% !important;
    background: var(--tm-cream) !important;
    padding-bottom: 0 !important;
}

body.in-custom #main-grid-container {
    padding: 0 !important;
}

.mobile-custom-flow {
    gap: 9px !important;
    padding: 8px 10px 24px !important;
    animation: bhFlowIn .38s cubic-bezier(.22,1,.36,1) both !important;
}

/* Carte Récapitulative Produit Fixe */
.product-recap-card.fixed-header {
    position: relative !important;
    flex-shrink: 0 !important;
    z-index: 40 !important;
    min-height: 82px !important;
    margin: 0 !important;
    padding: 9px 10px !important;
    border: 1px solid var(--tm-border) !important;
    border-bottom: 1.5px solid var(--line-strong, #E5E7EB) !important;
    border-radius: 0 0 22px 22px !important;
    background: #fff !important;
    box-shadow: 0 8px 24px rgba(21,25,35,.07) !important;
    backdrop-filter: blur(18px) saturate(1.25) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.25) !important;
    overflow: hidden !important;
}

.product-recap-card.fixed-header::before {
    content: '✦' !important;
    position: absolute !important;
    right: 122px !important;
    top: 5px !important;
    color: var(--tm-cheddar) !important;
    font-size: 14px !important;
    transform: rotate(12deg) !important;
    opacity: .9 !important;
    pointer-events: none !important;
}

.product-recap-card.fixed-header::after {
    content: '' !important;
    position: absolute !important;
    left: -10px !important;
    bottom: -12px !important;
    width: 88px !important;
    height: 28px !important;
    background: var(--tm-cheddar) !important;
    opacity: .12 !important;
    border-radius: 50% 65% 45% 30% !important;
    transform: rotate(-8deg) !important;
    pointer-events: none !important;
}

.product-recap-card.fixed-header .product-recap-top {
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
    position: relative !important;
    z-index: 1 !important;
}

.product-recap-card.fixed-header .product-recap-img-wrap {
    width: 78px !important;
    height: 78px !important;
    flex: 0 0 78px !important;
    border-radius: 19px !important;
    background: linear-gradient(145deg,#FFF8E7,#FFF0C7) !important;
    border: 1px solid #F4E5C4 !important;
    box-shadow: 0 7px 15px rgba(255,184,0,.12) !important;
    transform: rotate(-1deg) !important;
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
}

.product-recap-card.fixed-header .product-recap-img-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    padding: 3px !important;
    transform: scale(1.06) !important;
}

.product-recap-card.fixed-header .product-recap-infos {
    flex: 1 !important;
    min-width: 0 !important;
    align-self: center !important;
    padding-bottom: 1px !important;
}

.product-recap-card.fixed-header .product-recap-title {
    font-family: 'Baloo 2', sans-serif !important;
    font-size: 20px !important;
    line-height: .98 !important;
    letter-spacing: -.35px !important;
    text-transform: uppercase !important;
    margin: 0 0 3px !important;
    color: var(--tm-ink) !important;
}

.product-recap-card.fixed-header .product-recap-desc {
    font-family: 'Poppins', sans-serif !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
    color: var(--tm-muted) !important;
    margin: 0 !important;
}

.product-recap-card.fixed-header .product-recap-price-col {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    align-self: stretch !important;
    justify-content: center !important;
    gap: 1px !important;
    flex-shrink: 0 !important;
    text-align: right !important;
    min-width: 102px !important;
    padding: 7px 7px !important;
    background: #FFF9E9 !important;
    border: 1px solid #F3E2B5 !important;
    border-radius: 16px !important;
    box-sizing: border-box !important;
}

.price-line-base,
.price-line-extras,
.price-line-total {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    white-space: nowrap !important;
    gap: 4px !important;
    line-height: 1.15 !important;
}

.price-line-base {
    font-size: 11px !important;
    color: var(--muted-2, #6B7280) !important;
    font-weight: 700 !important;
}

.price-line-extras {
    font-size: 11px !important;
    color: #D97706 !important;
    font-weight: 800 !important;
}

.price-line-extras.is-zero {
    color: var(--muted, #9CA3AF) !important;
    opacity: 0.65 !important;
}

.price-line-total {
    margin-top: 3px !important;
    padding-top: 4px !important;
    border-top: 1px dashed rgba(16,24,40,.13) !important;
}

.price-line-total .price-label {
    font-size: 11px !important;
    font-weight: 900 !important;
    color: var(--text, #111827) !important;
    text-transform: uppercase !important;
}

.price-current {
    font-size: 19px !important;
    font-weight: 950 !important;
    letter-spacing: -.4px !important;
    color: var(--tm-orange) !important;
    font-family: 'Poppins', sans-serif !important;
}

.price-old {
    font-size: 12px !important;
    color: var(--muted, #9CA3AF) !important;
    text-decoration: line-through !important;
    font-weight: 700 !important;
}

/* 7. ÉTAPES DU TUNNEL (VALIDÉES, ACTIVES, FUTURES) */
.mobile-steps-overview {
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    max-height: 35vh !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    background: transparent !important;
    gap: 5px !important;
    padding: 4px 10px 5px !important;
    border-bottom: 0 !important;
}

.mobile-steps-overview:empty {
    display: none !important;
    padding: 0 !important;
    max-height: 0 !important;
    min-height: 0 !important;
    border: 0 !important;
    margin: 0 !important;
}

.mobile-steps-overview::-webkit-scrollbar {
    width: 4px !important;
}

.mobile-steps-overview::-webkit-scrollbar-thumb {
    background: #D1D5DB !important;
    border-radius: 999px !important;
}

.mobile-active-wrapper {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 6px 10px 76px 10px !important;
    background: transparent !important;
    position: relative !important;
}

.step-collapsed {
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    padding: 0 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    border: 1px solid var(--tm-border) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 13px rgba(21,25,35,.045) !important;
    background: #fff !important;
    cursor: pointer !important;
    transition: transform .2s ease, box-shadow .2s ease !important;
}

.mobile-steps-overview .step-collapsed:active {
    transform: scale(.985) !important;
}

.step-collapsed.validated {
    background: #fff !important;
    border-color: #E8EEE8 !important;
}

.step-collapsed.future {
    opacity: .86 !important;
    background: #FFFFFFB8 !important;
    border-style: dashed !important;
    cursor: default !important;
}

.step-collapsed-left {
    flex: 1 !important;
    min-width: 0 !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important; /* Centre verticalement la coche et le bloc de texte */
    gap: 10px !important;         /* Espace horizontal entre la coche et le texte */
}

.step-collapsed-left > div:not(.check-green) {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding-top: 2px !important; /* Ajustement fin pour descendre optiquement le texte */
}

.check-green, .step-number-blue, .step-number-gray {
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    display: grid !important;
    place-items: center !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    flex-shrink: 0 !important;
}

.check-green {
    background: var(--tm-green) !important;
    color: #fff !important;
    box-shadow: 0 4px 9px rgba(22,163,74,.18) !important;
}

.step-number-gray {
    background: #E5E7EB !important;
    color: #6B7280 !important;
}

.step-collapsed-title {
    font-size: 11px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-weight: 900 !important;
    letter-spacing: .4px !important;
    text-transform: uppercase !important;
    color: var(--text, #111827) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-left: 6px !important;
}

.valid-badge {
    min-width: 30px !important;
    height: 18px !important;
    padding: 0 6px !important;
    display: inline-grid !important;
    place-items: center !important;
    background: #ECF8EF !important;
    color: var(--tm-green) !important;
    border: 1px solid #CDEAD4 !important;
    border-radius: 999px !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    letter-spacing: 1px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

.step-collapsed-sub {
    font-size: 10px !important;
    color: var(--muted-2, #6B7280) !important;
    line-height: 1.1 !important;
    margin-top: 2px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
}

.btn-modifier {
    height: 25px !important;
    padding: 0 10px !important;
    background: #FFF5EA !important;
    color: var(--tm-orange) !important;
    border: 1px solid #FFDDBA !important;
    border-radius: 10px !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    flex-shrink: 0 !important;
}

.waiting-badge {
    height: 24px !important;
    padding: 0 10px !important;
    font-size: 10px !important;
    border-radius: 999px !important;
    font-weight: 900 !important;
    flex-shrink: 0 !important;
    display: inline-grid !important;
    place-items: center !important;
    background: #F7F4EE !important;
    color: var(--tm-muted) !important;
    border: 1px solid rgba(16,24,40,.06) !important;
}

/* Étape Active */
.mobile-active-wrapper .step-active-card {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    position: relative !important;
    max-height: none !important;
    padding: 0 !important;
    border: 1px solid #F0E5D0 !important;
    border-top: 0 !important;
    outline: 0 !important;
    box-shadow: 0 8px 25px rgba(21,25,35,.065) !important;
    background: #fff !important;
    border-radius: 22px !important;
}

.mobile-active-wrapper .step-active-card::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 0 auto 0 !important;
    height: 3px !important;
    background: linear-gradient(90deg,var(--tm-cheddar),var(--tm-orange)) !important;
    z-index: 20 !important;
}

.step-active-card .step-active-header {
    flex: 0 0 auto !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    display: flex !important;
    gap: 10px !important;
    align-items: flex-start !important;
    border-radius: 18px 18px 0 0 !important;
    background: linear-gradient(180deg,#FFFCF5 0%,#FFF9EF 100%) !important;
    border-bottom: 1px solid #F2E9D8 !important;
    padding: 12px 12px 10px !important;
}

.step-active-title {
    font-family: 'Baloo 2', sans-serif !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    letter-spacing: -.2px !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    color: var(--tm-ink) !important;
}

.step-active-title::after {
    content: '✦' !important;
    display: inline-block !important;
    margin-left: 6px !important;
    color: var(--tm-orange) !important;
    font-size: 12px !important;
    transform: rotate(8deg) !important;
}

.step-active-sub {
    font-family: 'Poppins', sans-serif !important;
    font-size: 9.5px !important;
    margin-top: 4px !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    color: var(--tm-muted) !important;
}

.step-number-blue {
    width: 25px !important;
    height: 25px !important;
    background: var(--tm-cheddar) !important;
    color: var(--tm-ink) !important;
    box-shadow: 0 5px 12px rgba(255,184,0,.23) !important;
    border: 2px solid #fff !important;
    border-radius: 50% !important;
    display: grid !important;
    place-items: center !important;
    font-weight: 900 !important;
    flex-shrink: 0 !important;
}

.step-progress-badge {
    margin-left: auto !important;
    flex-shrink: 0 !important;
    background: var(--tm-ink) !important;
    color: #fff !important;
    padding: 6px 9px !important;
    min-width: 38px !important;
    text-align: center !important;
    font-size: 9px !important;
    box-shadow: 0 5px 12px rgba(21,25,35,.16) !important;
    border-radius: 999px !important;
    height: 30px !important;
    display: grid !important;
    place-items: center !important;
    font-weight: 950 !important;
}

.progress-rail {
    position: relative !important;
    height: 5px !important;
    background: #F1E4C8 !important;
    margin-top: 8px !important;
    border-radius: 999px !important;
    overflow: hidden !important;
}

.progress-fill {
    height: 100% !important;
    border-radius: 999px !important;
    position: relative !important;
    overflow: hidden !important;
    background: linear-gradient(90deg,var(--tm-cheddar),var(--tm-orange)) !important;
    box-shadow: 0 0 10px rgba(255,184,0,.28) !important;
    transition: width .28s cubic-bezier(.22,1,.36,1) !important;
}

.progress-fill::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.7) 50%, rgba(255,255,255,0) 100%) !important;
    transform: translateX(-100%) !important;
    animation: progressShimmer 1.8s infinite !important;
}

/* Grille d'Options & Cartes d'Options */
.mobile-active-wrapper .options-grid-3 {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    grid-auto-rows: auto !important;
    align-content: start !important;
    align-items: start !important;
    border-radius: 0 0 18px 18px !important;
    position: relative !important;
    z-index: 1 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    background: #FFF9EF !important;
    padding: 8px 9px 18px !important;
    gap: 18px 9px !important;
}

.option-card-v3 {
    box-sizing: border-box !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    text-align: center !important;
    cursor: pointer !important;
    align-self: stretch !important;
    min-height: 112px !important;
    height: 112px !important;
    padding: 14px 5px 16px !important;
    border-radius: 17px !important;
    border: 1px solid #F0ECE4 !important;
    background: #fff !important;
    box-shadow: 0 5px 15px rgba(21,25,35,.055) !important;
    overflow: visible !important;
    transition: box-shadow .22s ease, border-color .22s ease, background .22s ease !important;
}

.option-card-v3::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: inherit !important;
    opacity: 0 !important;
    transition: opacity .22s ease !important;
    pointer-events: none !important;
    background: linear-gradient(145deg, rgba(255,184,0,.11), rgba(255,122,0,.04) 55%, transparent) !important;
}

.option-card-v3:active {
    box-shadow: 0 3px 9px rgba(16,24,40,.08) !important;
}

.option-card-v3.selected {
    border: 2px solid var(--tm-cheddar) !important;
    background: #FFF9E3 !important;
    box-shadow: 0 0 0 2px rgba(255,184,0,.08), 0 9px 19px rgba(255,184,0,.12) !important;
    animation: none !important;
}

.option-card-v3.selected::after {
    opacity: 1 !important;
}

.option-card-v3 .option-img {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    width: 56px !important;
    height: 54px !important;
    flex: 0 0 54px !important;
    border-radius: 0 !important;
    background: transparent !important;
    overflow: visible !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    position: relative !important;
    z-index: 1 !important;
}

.option-card-v3 .option-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    filter: drop-shadow(0 5px 6px rgba(21,25,35,.12)) !important;
    transform-origin: center center !important;
}

.option-card-v3.selected .option-img img {
    filter: drop-shadow(0 8px 10px rgba(0,96,140,.17)) !important;
}

.option-card-v3 .option-name-v3 {
    margin: 0 !important;
    min-height: 22px !important;
    max-height: 23px !important;
    width: 100% !important;
    padding: 0 3px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1.12 !important;
    color: var(--tm-ink) !important;
    letter-spacing: -.05px !important;
    position: relative !important;
    z-index: 2 !important;
}

.badge-price {
    position: absolute !important;
    top: 6px !important;
    left: 6px !important;
    padding: 3px 6px !important;
    font-size: 8px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    z-index: 6 !important;
    border-radius: 999px !important;
    color: #fff !important;
    background: var(--tm-orange) !important;
    box-shadow: 0 4px 9px rgba(255,122,0,.2) !important;
}

.badge-price.free {
    display: none !important;
}

.option-check-radio {
    position: absolute !important;
    top: 5px !important;
    right: 5px !important;
    width: 21px !important;
    height: 21px !important;
    border-radius: 50% !important;
    border: 2px solid #fff !important;
    background: var(--tm-cheddar) !important;
    color: var(--tm-ink) !important;
    display: grid !important;
    place-items: center !important;
    z-index: 6 !important;
    font-size: 10px !important;
    opacity: 0 !important;
    transform: scale(.7) !important;
    box-shadow: none !important;
    transition: all .2s cubic-bezier(.22,1,.36,1) !important;
}

.option-card-v3.selected .option-check-radio {
    opacity: 1 !important;
    transform: scale(1) !important;
    width: 25px !important;
    height: 25px !important;
    top: -7px !important;
    right: -7px !important;
    border: 3px solid #fff !important;
    box-shadow: 0 5px 12px rgba(255,184,0,.3) !important;
    animation: bhCheck .28s cubic-bezier(.22,1,.36,1) both !important;
}

.option-card-v3.selected .option-check-radio i {
    font-size: 11px !important;
}

.option-card-v3 .qty-pill {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    bottom: -8px !important;
    transform: translateX(-50%) !important;
    display: inline-flex !important;
    align-items: center !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    z-index: 8 !important;
    opacity: 1 !important;
    visibility: visible !important;
    height: 27px !important;
    width: 76px !important;
    min-width: 76px !important;
    background: #fff !important;
    border: 1.5px solid var(--tm-cheddar) !important;
    box-shadow: 0 5px 12px rgba(21,25,35,.12) !important;
    animation: bhQtyIn .2s cubic-bezier(.22,1,.36,1) both !important;
}

.option-card-v3 .qty-pill button {
    border: 0 !important;
    font-weight: 900 !important;
    display: grid !important;
    place-items: center !important;
    flex-shrink: 0 !important;
    width: 25px !important;
    height: 25px !important;
    min-width: 25px !important;
    background: #FFF7D8 !important;
    color: var(--tm-orange) !important;
    font-size: 14px !important;
    transition: filter .15s ease, transform .15s ease !important;
}

.option-card-v3 .qty-pill button:active {
    filter: brightness(.92) !important;
    transform: scale(.90) !important;
}

.option-card-v3 .qty-pill .qty-val-v3 {
    text-align: center !important;
    background: #fff !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 800 !important;
    color: var(--tm-ink) !important;
    font-size: 11px !important;
    min-width: 20px !important;
}

.product-recap-badges,
.badge-sur-mesure,
.badge-format,
.sticky-details,
.recap-wrapper {
    display: none !important;
}

/* Barre d'action sticky en bas */
.sticky-action-bar {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 60 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 9px !important;
    padding: 9px 10px calc(9px + env(safe-area-inset-bottom)) !important;
    background: rgba(255,255,255,.93) !important;
    border-top: 1px solid #EEE8DD !important;
    box-shadow: 0 -12px 28px rgba(21,25,35,.09) !important;
    backdrop-filter: blur(20px) saturate(1.35) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.35) !important;
}

.sticky-action-bar .btn-back {
    flex: 0 0 46px !important;
    width: 46px !important;
    height: 48px !important;
    border-radius: 16px !important;
    background: #fff !important;
    border: 1px solid var(--tm-border) !important;
    color: var(--tm-ink) !important;
    box-shadow: 0 4px 12px rgba(21,25,35,.05) !important;
    display: grid !important;
    place-items: center !important;
    font-size: 14px !important;
    transition: transform .16s ease !important;
}

.sticky-action-bar .btn-back:active {
    transform: scale(.91) !important;
}

.sticky-action-bar .btn-next-intent {
    flex: 1 1 auto !important;
    height: 48px !important;
    border-radius: 17px !important;
    background: var(--tm-ink) !important;
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(21,25,35,.18) !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 800 !important;
    font-size: 15px !important;
    letter-spacing: .1px !important;
    text-transform: uppercase !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border: 0 !important;
    position: relative !important;
    overflow: hidden !important;
    transition: transform .16s ease, box-shadow .18s ease !important;
}

.sticky-action-bar .btn-next-intent::before {
    content: '✦' !important;
    position: absolute !important;
    left: 18px !important;
    top: 50% !important;
    transform: translateY(-52%) rotate(10deg) !important;
    color: var(--tm-cheddar) !important;
    opacity: .9 !important;
    pointer-events: none !important;
}

.sticky-action-bar .btn-next-intent::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: -42% !important;
    width: 24% !important;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent) !important;
    transform: skewX(-18deg) !important;
    animation: bhShimmer 3.5s ease-in-out infinite !important;
    pointer-events: none !important;
    opacity: .7 !important;
}

.sticky-action-bar .btn-next-intent:active {
    transform: scale(.975) !important;
    box-shadow: 0 5px 13px rgba(255,90,31,.22) !important;
}

/* ==========================================================================
   7. PANIER FLOTTANT
   ========================================================================== */
#kiosk-cart {
    overflow-x: hidden !important;
    width: 100vw !important;
    max-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
    border-radius: 22px 22px 0 0 !important;
    background: rgba(255,255,255,.96) !important;
    border-top: 1px solid var(--tm-border) !important;
    box-shadow: 0 -12px 28px rgba(21,25,35,.10) !important;
    backdrop-filter: blur(20px) saturate(1.35) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.35) !important;
}

#kiosk-cart.collapsed {
    transform: translateY(calc(100% - 60px)) !important;
}

#kiosk-cart.expanded {
    transform: translateY(0) !important;
}

.cart-summary {
    height: 64px !important;
    padding: 0 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

#kiosk-cart .cart-summary .cart-icon {
    width: 42px !important;
    height: 42px !important;
    border-radius: 15px !important;
    background: var(--tm-ink) !important;
    color: #fff !important;
    box-shadow: 0 7px 15px rgba(16,24,40,.18) !important;
    font-size: 16px !important;
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    flex-shrink: 0 !important;
}

#kiosk-cart .cart-summary .cart-icon #cart-count {
    width: 20px !important;
    height: 20px !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    top: -4px !important;
    right: -4px !important;
    position: absolute !important;
    border-radius: 50% !important;
    border: 2px solid #fff !important;
    background: var(--tm-red) !important;
    color: #fff !important;
    display: grid !important;
    place-items: center !important;
    box-shadow: 0 4px 10px rgba(240,68,56,.26) !important;
}

#kiosk-cart .cart-info {
    margin-left: 10px !important;
    flex: 1 !important;
}

#kiosk-cart .cart-info .cart-label {
    font-family: 'Poppins', sans-serif !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: .75px !important;
    color: var(--tm-muted) !important;
    margin-bottom: 2px !important;
}

#kiosk-cart .cart-info .cart-total {
    font-family: 'Poppins', sans-serif !important;
    font-size: 14px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    color: var(--tm-ink) !important;
}

#kiosk-cart .cart-info #cart-total-price {
    font-size: 17px !important;
    font-weight: 950 !important;
    color: var(--tm-orange) !important;
}

#btn-validate-order {
    min-width: 108px !important;
    height: 44px !important;
    padding: 0 14px !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: .3px !important;
    border: 0 !important;
    border-radius: 18px !important;
    background: var(--tm-cheddar) !important;
    color: var(--tm-ink) !important;
    box-shadow: 0 7px 16px rgba(255,184,0,.25) !important;
    transition: transform .16s ease, box-shadow .18s ease !important;
}

#btn-validate-order:active {
    transform: scale(.95) !important;
}

.cart-details {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch;
    width: 100% !important;
    max-height: 60vh !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

#cart-items-list, 
ul#cart-items-list,
.cart-details ul {
    margin: 0 !important;
    padding: 0 !important;
    padding-left: 0 !important;
    padding-inline-start: 0 !important;
    list-style: none !important;
    width: 100% !important;
}

.cart-item-v2, 
li.cart-item-v2 {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 8px 10px !important;
    margin: 0 !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    border-bottom: 1.5px solid var(--line, #F3F4F6) !important;
}

.cart-item-v2 img {
    width: 48px !important;
    height: 48px !important;
    border-radius: 10px !important;
    padding: 2px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
}

.cart-item-main {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.cart-item-header {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    width: 100% !important;
}

.cart-item-name {
    font-size: 13.5px !important;
    line-height: 1.15 !important;
    margin: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.cart-item-options {
    font-size: 10.5px !important;
    margin: 3px 0 4px 0 !important;
    line-height: 1.35 !important;
    color: var(--muted-2, #6B7280) !important;
    display: block !important;
}

.cart-item-options strong {
    color: var(--text, #111827) !important;
    font-weight: 800 !important;
}

.cart-item-right-col {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
    min-width: 48px !important;
    margin-left: auto !important;
}

.cart-item-price {
    font-size: 11.5px !important;
    padding: 2.5px 6px !important;
    border-radius: 6px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    text-align: center !important;
}

.cart-item-number,
.cart-item-v2 .cart-item-number {
    display: flex !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    border-radius: 50% !important;
    background: #0F8ACB !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    box-shadow: 0 2px 6px rgba(15, 138, 203, 0.3) !important;
}

.cart-item-actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    margin-top: 4px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.qty-controls {
    flex-shrink: 0 !important;
    border-radius: 999px !important;
    height: 24px !important;
}

.qty-btn {
    width: 20px !important;
    height: 24px !important;
    font-size: 11px !important;
}

.qty-val {
    height: 24px !important;
    font-size: 11px !important;
    min-width: 16px !important;
    padding: 0 2px !important;
}

.btn-cart-action {
    height: 24px !important;
    padding: 0 6px !important;
    border-radius: 999px !important;
    font-size: 8.5px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    gap: 3px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.btn-cart-action i {
    font-size: 9px !important;
}

.btn-cart-action .btn-text-full {
    display: none !important;
}

.btn-cart-action .btn-text-short {
    display: inline !important;
}

/* ==========================================================================
   8. ANIMATIONS & SYSTÈME DE MOUVEMENT
   ========================================================================== */
.step-active-card.step-anim-enter {
    animation: tacosStepEnter .38s cubic-bezier(.22,1,.36,1) backwards !important;
}

.step-active-card.step-anim-enter .option-card-v3 {
    animation: optionPop .34s cubic-bezier(.22,1,.36,1) backwards;
}

.step-active-card.step-anim-enter .option-card-v3:nth-child(2) { animation-delay: .025s; }
.step-active-card.step-anim-enter .option-card-v3:nth-child(3) { animation-delay: .05s; }
.step-active-card.step-anim-enter .option-card-v3:nth-child(4) { animation-delay: .075s; }
.step-active-card.step-anim-enter .option-card-v3:nth-child(5) { animation-delay: .1s; }
.step-active-card.step-anim-enter .option-card-v3:nth-child(6) { animation-delay: .125s; }

/* DÉCLENCHEMENT DU SURSAUT AU CLIC SUR LA CARTE */
.option-card-v3.card-pop {
    animation: optionPunch 0.32s cubic-bezier(0.25, 1.4, 0.5, 1) both !important;
    z-index: 10 !important;
}



@keyframes optionPunch {
    0% {
        transform: scale(1);
    }
    30% {
        transform: scale(0.92);
    }
    60% {
        transform: scale(1.08) translateY(-4px);
    }
    85% {
        transform: scale(0.98) translateY(1px);
    }
    100% {
        transform: scale(1);
    }
}



@keyframes tacosStepEnter {
    0% { opacity: 0; transform: translateY(18px); }
    55% { opacity: 1; transform: translateY(-2px); }
    100% { opacity: 1; transform: none; }
}

@keyframes optionPop {
    from { opacity: 0; transform: translateY(7px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes bhHeroIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes bhFlowIn {
    from { opacity: 0; transform: translateY(7px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes bhCheck {
    0% { transform: scale(.6) rotate(-12deg); opacity: .4; }
    65% { transform: scale(1.14) rotate(4deg); }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}

@keyframes bhQtyIn {
    from { opacity: 0; transform: translateX(-50%) scale(.82); }
    to { opacity: 1; transform: translateX(-50%) scale(1); }
}

@keyframes bhPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.16); }
}

@keyframes bhShimmer {
    0%, 38% { left: -42%; }
    65%, 100% { left: 130%; }
}

@keyframes bhModalIn {
    from { opacity: 0; transform: translateY(12px) scale(.97); }
    to { opacity: 1; transform: none; }
}

@keyframes progressShimmer {
    100% { transform: translateX(100%); }
}

/* ==========================================================================
   9. RESPONSIVE COMPACT (< 360px) & ACCESSIBILITÉ
   ========================================================================== */
@media (max-width: 360px) {
    .product-recap-card.fixed-header .product-recap-img-wrap {
        width: 70px !important;
        height: 70px !important;
        flex-basis: 70px !important;
    }
    .product-recap-card.fixed-header .product-recap-price-col {
        min-width: 96px !important;
    }
    .product-recap-title {
        font-size: 18px !important;
    }
    .option-card-v3,
    .option-card-v3.selected {
        min-height: 108px !important;
        height: 108px !important;
    }
    .option-card-v3 .option-img {
        width: 52px !important;
        height: 50px !important;
        flex-basis: 50px !important;
    }
    .option-name-v3 {
        font-size: 10.5px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .step-active-card.step-anim-enter,
    .step-active-card.step-anim-enter .option-card-v3 {
        animation: none !important;
    }
}

/* Cartes catégories en mode sombre */
[data-theme="dark"] .cat-card-modern {
    background: #1E2330 !important;
    border-color: #2A303C !important;
}

[data-theme="dark"] .cat-info-bar {
    background: #1E2330 !important;
}

[data-theme="dark"] .categories-grid .cat-name,
[data-theme="dark"] .discover-card.cat-card-modern .cat-name {
    color: #FFFFFF !important;
}

/* Barre du haut et boutons */
[data-theme="dark"] #kiosk-nav-bar {
    background: rgba(30, 35, 48, 0.95) !important;
    border-bottom-color: #2A303C !important;
}

[data-theme="dark"] .nav-icon-btn {
    background: #262C3D !important;
    border-color: #374151 !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .order-type-toggle {
    background: #151923 !important;
}

[data-theme="dark"] .order-type-toggle button:not(.active) {
    color: #9CA3AF !important;
}

[data-theme="dark"] .order-type-toggle button.active {
    background: #FFB800 !important;
    color: #151923 !important;
}

/* ==========================================================================
   CONFIGURATEUR D'OPTIONS EN MODE SOMBRE
   ========================================================================== */

/* 1. Carte récapitulative produit en haut */
[data-theme="dark"] .product-recap-card.fixed-header {
    background: #1E2330 !important;
    border-color: #2A303C !important;
}
[data-theme="dark"] .product-recap-card.fixed-header .product-recap-title {
    color: #FFFFFF !important;
}
[data-theme="dark"] .product-recap-card.fixed-header .product-recap-desc {
    color: #9CA3AF !important;
}
[data-theme="dark"] .product-recap-card.fixed-header .product-recap-price-col {
    background: #151923 !important;
    border-color: #2A303C !important;
}
[data-theme="dark"] .price-line-base {
    color: #9CA3AF !important;
}
[data-theme="dark"] .price-line-total .price-label {
    color: #FFFFFF !important;
}

/* 2. Étapes réduites (Validées & En attente) */
[data-theme="dark"] .step-collapsed.validated {
    background: #1E2330 !important;
    border-color: #2A303C !important;
}
[data-theme="dark"] .step-collapsed-title {
    color: #FFFFFF !important;
}
[data-theme="dark"] .step-collapsed-sub {
    color: #9CA3AF !important;
}
[data-theme="dark"] .valid-badge {
    background: rgba(22, 163, 74, 0.2) !important;
    color: #4ADE80 !important;
    border-color: rgba(22, 163, 74, 0.4) !important;
}
[data-theme="dark"] .step-collapsed.future {
    background: rgba(30, 35, 48, 0.7) !important;
    border-color: #374151 !important;
}
[data-theme="dark"] .waiting-badge {
    background: #151923 !important;
    color: #9CA3AF !important;
    border-color: #2A303C !important;
}

/* 3. Carte de l'étape active */
[data-theme="dark"] .mobile-active-wrapper .step-active-card {
    background: #1E2330 !important;
    border-color: #2A303C !important;
}
[data-theme="dark"] .step-active-card .step-active-header {
    background: #1A1F2C !important;
    border-bottom-color: #2A303C !important;
}
[data-theme="dark"] .step-active-title {
    color: #FFFFFF !important;
}
[data-theme="dark"] .step-active-sub {
    color: #9CA3AF !important;
}
[data-theme="dark"] .progress-rail {
    background: #2A303C !important;
}
[data-theme="dark"] .step-progress-badge {
    background: #151923 !important;
    border: 1px solid #374151 !important;
}

/* 4. Grille d'options et cartes d'options */
[data-theme="dark"] .mobile-active-wrapper .options-grid-3 {
    background: #151923 !important;
}
[data-theme="dark"] .option-card-v3 {
    background: #1E2330 !important;
    border-color: #2A303C !important;
}
[data-theme="dark"] .option-card-v3 .option-name-v3 {
    color: #FFFFFF !important;
}
[data-theme="dark"] .option-card-v3.selected {
    background: #252D3D !important;
    border-color: var(--tm-cheddar) !important;
}

/* 5. Barre d'action fixe en bas */
[data-theme="dark"] .sticky-action-bar {
    background: rgba(21, 25, 35, 0.95) !important;
    border-top-color: #2A303C !important;
}
[data-theme="dark"] .sticky-action-bar .btn-back {
    background: #1E2330 !important;
    border-color: #2A303C !important;
    color: #FFFFFF !important;
}
[data-theme="dark"] .sticky-action-bar .btn-next-intent {
    background: #FFB800 !important;
    color: #151923 !important;
}
/* Pastille de quantité (+ / chiffre / -) en mode sombre */
[data-theme="dark"] .option-card-v3 .qty-pill {
    background: #151923 !important;
    border-color: var(--tm-cheddar) !important;
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.4) !important;
}

/* Boutons + et - */
[data-theme="dark"] .option-card-v3 .qty-pill button {
    background: #252D3D !important;
    color: var(--tm-cheddar) !important;
}

/* Chiffre de la quantité au milieu */
[data-theme="dark"] .option-card-v3 .qty-pill .qty-val-v3 {
    background: #151923 !important;
    color: #FFFFFF !important;
}
/* ==========================================================================
   PANIER FLOTTANT & LISTE DES ARTICLES EN MODE SOMBRE
   ========================================================================== */

/* 1. Conteneur principal du panier */
[data-theme="dark"] #kiosk-cart {
    background: rgba(21, 25, 35, 0.98) !important;
    border-top-color: #2A303C !important;
    box-shadow: 0 -12px 28px rgba(0, 0, 0, 0.45) !important;
}

/* 2. Icône du panier en haut à gauche */
[data-theme="dark"] #kiosk-cart .cart-summary .cart-icon {
    background: #1E2330 !important;
    border: 1px solid #374151 !important;
    color: #FFFFFF !important;
}

/* 3. Lignes d'articles du panier */
[data-theme="dark"] .cart-item-v2,
[data-theme="dark"] li.cart-item-v2 {
    border-bottom: 1.5px solid #2A303C !important;
}

[data-theme="dark"] .cart-item-name {
    color: #FFFFFF !important;
}

[data-theme="dark"] .cart-item-options {
    color: #9CA3AF !important;
}

[data-theme="dark"] .cart-item-options strong {
    color: #E5E7EB !important;
}

/* 4. Contrôles de quantité (- 1 +) dans le panier */
[data-theme="dark"] .qty-controls {
    background: #1E2330 !important;
    border: 1px solid #374151 !important;
}

[data-theme="dark"] .qty-btn {
    background: #252D3D !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .qty-val {
    background: #1E2330 !important;
    color: #FFFFFF !important;
}

/* 5. Boutons d'action (Modifier & Supprimer) */
[data-theme="dark"] .btn-cart-action {
    background: #1E2330 !important;
    border: 1px solid #374151 !important;
}

[data-theme="dark"] .btn-cart-action.btn-cart-edit {
    color: #38BDF8 !important; /* Bleu clair pour le crayon */
    border-color: rgba(56, 189, 248, 0.3) !important;
}

[data-theme="dark"] .btn-cart-action.btn-cart-delete {
    color: #F87171 !important; /* Rouge doux pour la suppression */
    border-color: rgba(248, 113, 113, 0.3) !important;
}

#idle-screen {
    position: fixed !important;
    inset: 0 !important;
    z-index: 50 !important;
}

#dining-choice-modal.modal-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 150 !important; /* Supérieur à #idle-screen */
}

/* Mobile : cartes d'ingrédients précomposés */
.option-card-v3.composition-card.included {
    border: 2px solid #22c55e !important;
    background: #f0fdf4 !important;
}
.option-card-v3.composition-card.included .option-check-radio {
    background: #22c55e !important;
    border-color: #ffffff !important;
    color: #ffffff !important;
    opacity: 1 !important;
    transform: scale(1) !important;
}
.badge-price.badge-included {
    background: #22c55e !important;
    color: #ffffff !important;
}

.option-card-v3.composition-card.retired {
    border: 2px solid #fecaca !important;
    background: #fef2f2 !important;
    opacity: 0.75;
}
.option-card-v3.composition-card.retired .option-name-v3 {
    text-decoration: line-through !important;
    text-decoration-color: #ef4444 !important;
    text-decoration-thickness: 2px !important;
    color: #dc2626 !important;
}
.option-card-v3.composition-card.retired .option-img img {
    filter: grayscale(1) opacity(0.5);
}
.option-card-v3.composition-card.retired .option-check-radio {
    background: #ef4444 !important;
    border-color: #ffffff !important;
    color: #ffffff !important;
    opacity: 1 !important;
    transform: scale(1) !important;
}
.badge-price.badge-retired {
    background: #ef4444 !important;
    color: #ffffff !important;
}



/* ==========================================================================
   HEADER GOURMET PARTAGÉ — MOBILE & TABLETTE
   Même identité visuelle que la borne, sans modifier le HTML ni le JavaScript.
   Requiert les assets déjà utilisés par borne.css :
   ../fonts/LondrinaSolid-900.woff2
   ../fonts/DMSans-*.woff2
   ../img/header-gourmet-bg.svg
   ========================================================================== */
@font-face {
    font-family: 'KioskLondrina';
    src: url('../fonts/LondrinaSolid-900.woff2') format('woff2');
    font-style: normal;
    font-weight: 900;
    font-display: swap;
}
@font-face {
    font-family: 'KioskDMSans';
    src: url('../fonts/DMSans-400.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'KioskDMSans';
    src: url('../fonts/DMSans-700.woff2') format('woff2');
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: 'KioskDMSans';
    src: url('../fonts/DMSans-800.woff2') format('woff2');
    font-style: normal;
    font-weight: 800;
    font-display: swap;
}

/* Base commune : fond intégral, contours doux et dimensions indépendantes de l'image */
.product-recap-card.fixed-header {
    position: relative !important;
    isolation: isolate !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: clamp(126px, 17vw, 184px) !important;
    min-height: clamp(126px, 17vw, 184px) !important;
    max-height: clamp(126px, 17vw, 184px) !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid #F4D5A8 !important;
    border-radius: 22px !important;
    background-color: #FFF4DF !important;
    background-image: url('../img/header-gourmet-bg.svg') !important;
    background-size: cover !important;
    background-position: center !important;
    box-shadow: 0 8px 22px rgba(120,72,20,.08), inset 0 1px 0 rgba(255,255,255,.8) !important;
}
.product-recap-card.fixed-header::before,
.product-recap-card.fixed-header::after {
    content: none !important;
    display: none !important;
}
.product-recap-card.fixed-header .product-recap-top {
    display: grid !important;
    grid-template-columns: minmax(0, 32%) minmax(0, 1fr) minmax(150px, 28%) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    align-items: center !important;
    gap: clamp(8px, 1.3vw, 18px) !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    padding: clamp(8px, 1.4vw, 18px) clamp(10px, 1.8vw, 22px) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    position: relative !important;
    z-index: 1 !important;
}
.product-recap-card.fixed-header .product-recap-top > *,
.product-recap-card.fixed-header .product-recap-img-wrap,
.product-recap-card.fixed-header .product-recap-infos {
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: 100% !important;
    align-self: center !important;
}
.product-recap-card.fixed-header .product-recap-img-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}
.product-recap-card.fixed-header .product-recap-img-wrap img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    max-height: 100% !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: center bottom !important;
    filter: drop-shadow(0 8px 6px rgba(78,43,12,.20)) !important;
    transform: none !important;
}
.product-recap-card.fixed-header .product-recap-infos {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 5px !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 4px 0 !important;
    overflow: hidden !important;
}
.product-recap-card.fixed-header .product-recap-title {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #3A1708 !important;
    font-family: 'KioskLondrina', 'Londrina Solid', sans-serif !important;
    font-size: clamp(25px, 3.2vw, 44px) !important;
    font-weight: 900 !important;
    line-height: .98 !important;
    letter-spacing: .1px !important;
    text-transform: uppercase !important;
    transform: rotate(-1deg) skewX(-1deg) !important;
    transform-origin: left center !important;
    overflow-wrap: anywhere !important;
}
.product-recap-card.fixed-header .product-recap-desc {
    display: block !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #563723 !important;
    font-family: 'KioskDMSans', 'DM Sans', sans-serif !important;
    font-size: clamp(10px, 1.25vw, 15px) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
.product-recap-card.fixed-header .product-recap-desc::before {
    content: none !important;
    display: none !important;
}
.product-recap-card.fixed-header .product-recap-price-col {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100% - 4px) !important;
    align-self: center !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: clamp(3px, .5vw, 7px) !important;
    margin: 0 !important;
    padding: clamp(8px, 1.25vw, 16px) clamp(9px, 1.5vw, 18px) !important;
    border: 1px solid rgba(255,255,255,.95) !important;
    border-radius: clamp(14px, 1.8vw, 23px) !important;
    background: rgba(255,255,255,.91) !important;
    box-shadow: 0 8px 22px rgba(111,66,17,.09), inset 0 1px 0 #fff !important;
    overflow: hidden !important;
    text-align: left !important;
}
.product-recap-card.fixed-header .product-recap-price-col::before {
    content: none !important;
    display: none !important;
}
.product-recap-card.fixed-header .price-line-base,
.product-recap-card.fixed-header .price-line-extras,
.product-recap-card.fixed-header .price-line-total {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    gap: 5px !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    white-space: nowrap !important;
    font-family: 'KioskDMSans', 'DM Sans', sans-serif !important;
}
.product-recap-card.fixed-header .price-line-base,
.product-recap-card.fixed-header .price-line-extras {
    font-size: clamp(9px, 1vw, 13px) !important;
    line-height: 1.2 !important;
}
.product-recap-card.fixed-header .price-label {
    color: #806047 !important;
    font-weight: 500 !important;
}
.product-recap-card.fixed-header .price-line-base .price-val,
.product-recap-card.fixed-header .price-line-extras .price-val {
    color: #39271C !important;
    font-size: clamp(10px, 1.05vw, 14px) !important;
    font-weight: 800 !important;
}
.product-recap-card.fixed-header .price-line-total {
    margin-top: 2px !important;
    padding-top: clamp(4px, .65vw, 8px) !important;
    border-top: 1px solid #F1D9BC !important;
    color: #F06400 !important;
    font-size: clamp(11px, 1.25vw, 17px) !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
}
.product-recap-card.fixed-header .price-line-total .price-label {
    color: #F06400 !important;
    font-weight: 800 !important;
}
.product-recap-card.fixed-header .price-line-total .price-current {
    color: #F06400 !important;
    font-family: 'KioskLondrina', 'Londrina Solid', sans-serif !important;
    font-size: clamp(22px, 2.5vw, 36px) !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: -.3px !important;
}

/* Mobile : image + titre sur la première ligne, résumé compact en dessous */
@media (max-width: 620px) {
    .product-recap-card.fixed-header {
        height: clamp(142px, 39vw, 170px) !important;
        min-height: clamp(142px, 39vw, 170px) !important;
        max-height: clamp(142px, 39vw, 170px) !important;
        border-radius: 19px !important;
        margin-bottom: 8px !important;
    }
    .product-recap-card.fixed-header .product-recap-top {
        grid-template-columns: minmax(78px, 29%) minmax(0, 1fr) !important;
        grid-template-rows: minmax(0, 1fr) auto !important;
        column-gap: 8px !important;
        row-gap: 3px !important;
        padding: 7px 9px 8px !important;
    }
    .product-recap-card.fixed-header .product-recap-img-wrap {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }
    .product-recap-card.fixed-header .product-recap-infos {
        grid-column: 2 !important;
        grid-row: 1 !important;
        gap: 4px !important;
    }
    .product-recap-card.fixed-header .product-recap-title {
        font-size: clamp(22px, 6.2vw, 31px) !important;
        line-height: .98 !important;
    }
    .product-recap-card.fixed-header .product-recap-desc {
        font-size: clamp(9px, 2.7vw, 12px) !important;
        line-height: 1.15 !important;
    }
    .product-recap-card.fixed-header .product-recap-price-col {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.15fr) !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 5px 8px !important;
        border-radius: 12px !important;
        max-height: none !important;
    }
    .product-recap-card.fixed-header .price-line-base,
    .product-recap-card.fixed-header .price-line-extras,
    .product-recap-card.fixed-header .price-line-total {
        justify-content: space-between !important;
        gap: 3px !important;
        white-space: nowrap !important;
        border: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .product-recap-card.fixed-header .price-line-base,
    .product-recap-card.fixed-header .price-line-extras {
        font-size: clamp(8px, 2.25vw, 10px) !important;
    }
    .product-recap-card.fixed-header .price-line-base .price-val,
    .product-recap-card.fixed-header .price-line-extras .price-val {
        font-size: clamp(8px, 2.35vw, 11px) !important;
    }
    .product-recap-card.fixed-header .price-line-total {
        border-left: 1px solid #F1D9BC !important;
        padding-left: 6px !important;
        font-size: clamp(9px, 2.6vw, 12px) !important;
    }
    .product-recap-card.fixed-header .price-line-total .price-current {
        font-size: clamp(17px, 4.8vw, 23px) !important;
    }
}

/* Tablette : bannière horizontale, titre large et panneau de prix à droite */
@media (min-width: 621px) and (max-width: 1100px) {
    .product-recap-card.fixed-header {
        height: clamp(118px, 16vw, 168px) !important;
        min-height: clamp(118px, 16vw, 168px) !important;
        max-height: clamp(118px, 16vw, 168px) !important;
        border-radius: 22px !important;
    }
    .product-recap-card.fixed-header .product-recap-top {
        grid-template-columns: minmax(0, 30%) minmax(0, 1fr) minmax(145px, 28%) !important;
        gap: clamp(8px, 1.3vw, 14px) !important;
        padding: 8px clamp(10px, 1.5vw, 16px) !important;
    }
    .product-recap-card.fixed-header .product-recap-title {
        font-size: clamp(26px, 3.6vw, 40px) !important;
    }
    .product-recap-card.fixed-header .product-recap-desc {
        font-size: clamp(10px, 1.35vw, 14px) !important;
    }
    .product-recap-card.fixed-header .product-recap-price-col {
        padding: 10px 12px !important;
        border-radius: 17px !important;
    }
    .product-recap-card.fixed-header .price-line-total .price-current {
        font-size: clamp(24px, 3vw, 34px) !important;
    }
}



/* Listes de produits fournies : trois colonnes compactes. */
body[data-view=mobile] #main-grid-container .products-grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:9px!important}body[data-view=mobile] #main-grid-container .products-grid.cols-3 .product-card{min-width:0!important;height:auto!important;min-height:0!important;border-radius:14px!important}body[data-view=mobile] #main-grid-container .products-grid.cols-3 .product-card:not(.style-2) .product-img-wrapper{height:112px!important;min-height:112px!important;max-height:112px!important;padding:6px!important}body[data-view=mobile] #main-grid-container .products-grid.cols-3 .product-info{padding:8px 7px!important}body[data-view=mobile] #main-grid-container .products-grid.cols-3 .product-name,body[data-view=mobile] #main-grid-container .products-grid.cols-3 .prod-title-s2{font-size:14px!important;line-height:1.1!important;min-height:31px!important;white-space:normal!important;overflow-wrap:anywhere}body[data-view=mobile] #main-grid-container .products-grid.cols-3 .product-desc,body[data-view=mobile] #main-grid-container .products-grid.cols-3 .prod-desc-s2{font-size:10px!important;line-height:1.2!important}body[data-view=mobile] #main-grid-container .products-grid.cols-3 .product-price,body[data-view=mobile] #main-grid-container .products-grid.cols-3 .prod-price-s2{font-size:17px!important;white-space:nowrap!important}body[data-view=mobile] #main-grid-container .products-grid.cols-3 .product-add-circle,body[data-view=mobile] #main-grid-container .products-grid.cols-3 .prod-btn-plus-s2{width:30px!important;height:30px!important;min-width:30px!important;font-size:20px!important}body[data-view=mobile] #main-grid-container .products-grid.cols-3 .prod-left-visual{height:112px!important;min-height:112px!important}body[data-view=mobile] #main-grid-container .products-grid.cols-3 .prod-right-details{padding:8px 7px 40px!important}