/* ==========================================================================
BORNE TACTILE - STYLES GLOBAUX & COMPOSANTS
========================================================================== */
@import url('../fonts/customer-fonts.css');

@font-face {
    font-family: 'Block Berthold Condensed';
    src: url('../fonts/BlockBertholdCondensed.woff2') format('woff2'),
         url('../fonts/BlockBertholdCondensed.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'AmsiProNarw-Ultra';
    src: url('../fonts/AmsiProNarw-Ultra.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

:root, [data-theme="light"]{
--bg:#FFFBF2;
--bg-soft:#FFF6E5;
--bg-elevated:#FFFFFF;
--card:#FFFFFF;
--card-hover:#FFFFFF;
--text:#111827;
--text-soft:#374151;
--muted:#9CA3AF;
--muted-2:#6B7280;
--line:#F3F4F6;
--line-strong:#E5E7EB;
--primary:#0F4C5C;
--primary-2:#00A8E8;
--primary-light:#E0F7FF;
--accent:#FF2D2D;
--accent-light:#FEF2F2;
--success:#16A34A;
--success-light:#DCFCE7;
--shadow-sm:0 4px 12px rgba(0,0,0,.06);
--shadow-md:0 12px 32px rgba(0,0,0,.10);
--shadow-lg:0 24px 48px rgba(0,0,0,.14);
--shadow-float:0 -16px 40px rgba(17,24,39,.12);
--overlay:rgba(17,24,39,.72);
--input-bg:#F9FAFB;
--promo-overlay:linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.15) 65%);
--idle-overlay:linear-gradient(0deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,.15) 100%);
}

[data-theme="dark"]{
--bg:#0E1012;
--bg-soft:#171A1E;
--bg-elevated:#1D2126;
--card:#1E2329;
--card-hover:#262C34;
--text:#F9FAFB;
--text-soft:#D1D5DB;
--muted:#6B7280;
--muted-2:#9CA3AF;
--line:#232830;
--line-strong:#2F3742;
--primary:#0F4C5C;
--primary-2:#22CCFF;
--primary-light:#0F2D3A;
--accent:#FF4D4D;
--accent-light:#2A1515;
--success:#22C55E;
--success-light:#14261A;
--shadow-sm:0 4px 12px rgba(0,0,0,.30);
--shadow-md:0 12px 32px rgba(0,0,0,.45);
--shadow-lg:0 24px 48px rgba(0,0,0,.60);
--shadow-float:0 -16px 40px rgba(0,0,0,.55);
--overlay:rgba(0,0,0,.78);
--input-bg:#171A1E;
--promo-overlay:linear-gradient(90deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.25) 65%);
--idle-overlay:linear-gradient(0deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.35) 100%);
}

*{
box-sizing:border-box;
user-select:none;
-webkit-tap-highlight-color:transparent;
}

html, body{
margin:0;
padding:0;
width:100vw;
height:100vh;
background:var(--bg);
font-family:'Nunito',sans-serif;
overflow:hidden;
color:var(--text);
}

button{
font-family:'Nunito',sans-serif;
cursor:pointer;
outline:none;
}

.hidden{
display:none !important;
}

/* ==========================================================================
ÉCRAN DE VEILLE (IDLE)
========================================================================== */
#idle-screen{
position:absolute;
inset:0;
z-index:100;
background:#000;
overflow:hidden;
}

#idle-screen video{
width:100%;
height:100%;
object-fit:cover;
}

.idle-gradient{
position:absolute;
inset:0;
background:var(--idle-overlay);
z-index:1;
}

.idle-content{
position:absolute;
inset:0;
z-index:2;
display:flex;
flex-direction:column;
align-items:center;
justify-content:space-between;
padding:90px 40px 100px;
}

.idle-logo{
display:flex;
align-items:center;
gap:16px;
color:#fff;
}

.logo-mark{
width:72px;
height:72px;
background:#fff;
color:#111;
display:grid;
place-items:center;
border-radius:50%;
font-size:32px;
}

.logo-text{
display:flex;
flex-direction:column;
line-height:1;
}

.logo-title{
font-family:'Block Berthold Condensed','Bebas Neue',sans-serif;
font-size:42px;
letter-spacing:2px;
}

.logo-sub{
font-weight:800;
font-size:11px;
letter-spacing:3px;
opacity:.7;
margin-top:-6px;
}

.touch-overlay{
background:#fff;
color:#111;
padding:0 44px;
height:88px;
border-radius:999px;
font-family:'Block Berthold Condensed','Bebas Neue',sans-serif;
font-size:34px;
display:flex;
align-items:center;
gap:16px;
box-shadow:var(--shadow-lg);
animation:pulseSoft 2.2s infinite;
}

.touch-icon{
width:48px;
height:48px;
background:#111;
color:#fff;
border-radius:50%;
display:grid;
place-items:center;
font-size:20px;
}

@keyframes pulseSoft{
0%,100%{transform:scale(1)}
50%{transform:scale(1.04)}
}

.idle-sub{
color:rgba(255,255,255,.85);
font-weight:700;
font-size:17px;
margin-top:20px;
text-align:center;
}

.idle-footer{
display:flex;
gap:24px;
color:rgba(255,255,255,.5);
font-size:12px;
font-weight:700;
letter-spacing:.5px;
text-transform:uppercase;
}

/* ==========================================================================
MODALES (CHOIX SUR PLACE / EMPORTER & VALIDATION)
========================================================================== */
.modal-overlay{
position:absolute;
inset:0;
background:var(--overlay);
backdrop-filter:blur(18px);
display:flex;
justify-content:center;
align-items:center;
z-index:80;
padding:32px;
}

.modal-content{
background:var(--card);
padding:48px 40px 40px;
border-radius:36px;
width:880px;
box-shadow:var(--shadow-lg);
text-align:center;
border:1px solid var(--line);
animation:modalIn .35s cubic-bezier(.2,.8,.2,1);
}

.modal-content.small{
width:560px;
}

@keyframes modalIn{
from{transform:translateY(24px) scale(.96);opacity:0}
to{transform:translateY(0) scale(1);opacity:1}
}

.modal-close{
position:absolute;
top:20px;
right:20px;
width:44px;
height:44px;
border-radius:50%;
border:1px solid var(--line);
background:var(--input-bg);
color:var(--muted);
font-size:18px;
display:grid;
place-items:center;
}

.modal-badge{
display:inline-flex;
background:var(--bg-soft);
border:1px solid var(--line);
padding:8px 18px;
border-radius:999px;
font-weight:900;
font-size:12px;
letter-spacing:1px;
text-transform:uppercase;
margin-bottom:16px;
color:var(--text-soft);
}

.modal-content h2{
font-family:'Block Berthold Condensed','Bebas Neue',sans-serif;
font-size:48px;
line-height:.95;
margin:0 0 12px;
color:var(--text);
}

.modal-sub{
color:var(--muted);
font-size:18px;
font-weight:600;
margin:0 0 36px;
}

.modal-icon{
width:80px;
height:80px;
background:var(--bg-soft);
border:1px solid var(--line);
border-radius:50%;
display:grid;
place-items:center;
font-size:32px;
margin:0 auto 20px;
color:var(--primary-2);
}

.choice-buttons{
display:flex;
gap:20px;
}

.choice-btn{
flex:1;
height:360px;
border:1.5px solid var(--line);
border-radius:28px;
background:var(--card);
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
transition:all .22s;
box-shadow:var(--shadow-sm);
padding:24px;
}

.choice-btn:active{
transform:scale(.96);
}

.choice-icon-wrap{
width:112px;
height:112px;
border-radius:50%;
display:grid;
place-items:center;
font-size:46px;
margin-bottom:20px;
}

.choice-icon-wrap.surplace{
background:var(--primary-light);
color:var(--primary-2);
}

.choice-icon-wrap.emporter{
background:#FEF3C7;
color:#D97706;
}

[data-theme="dark"] .choice-icon-wrap.emporter{
background:#2A2210;
color:#FBBF24;
}

.choice-label{
font-family:'Block Berthold Condensed','Bebas Neue',sans-serif;
font-size:34px;
color:var(--text);
line-height:1;
}

.choice-desc{
font-size:14px;
font-weight:700;
color:var(--muted);
margin-top:8px;
}

#customer-name{
width:100%;
height:72px;
font-size:22px;
font-weight:800;
padding:0 24px;
text-align:center;
border:2px solid var(--line);
border-radius:16px;
background:var(--input-bg);
color:var(--text);
}

#customer-name:focus{
border-color:var(--primary-2);
background:var(--card);
box-shadow:0 0 0 4px var(--primary-light);
outline:none;
}

/* ==========================================================================
STRUCTURE BORNE & HEADER
========================================================================== */
#kiosk-container{
width:1080px;
height:1920px;
display:flex;
flex-direction:column;
position:relative;
background:var(--bg);
}

#promo-banner{
position:relative;
height:280px;
flex-shrink:0;
overflow:hidden;
background:var(--bg-elevated);
}

#promo-banner img{
width:100%;
height:100%;
object-fit:cover;
}

#promo-banner::after{
content:'';
position:absolute;
inset:0;
background:var(--promo-overlay);
}

.promo-content{
position:absolute;
left:32px;
bottom:24px;
z-index:2;
color:#fff;
}

.promo-tag{
background:#FFD60A;
color:#111;
font-weight:900;
font-size:12px;
padding:6px 14px;
border-radius:999px;
display:inline-flex;
gap:6px;
margin-bottom:10px;
}

.promo-title{
font-family:'Block Berthold Condensed','Bebas Neue',sans-serif;
font-size:48px;
line-height:.9;
margin:0;
text-shadow:0 2px 12px rgba(0,0,0,.3);
}

.promo-cta{
margin-top:10px;
display:inline-flex;
gap:8px;
background:rgba(255,255,255,.18);
backdrop-filter:blur(8px);
border:1px solid rgba(255,255,255,.18);
padding:8px 16px;
border-radius:999px;
font-weight:800;
font-size:13px;
}

#kiosk-nav-bar{
background:color-mix(in srgb, var(--card) 92%, transparent);
backdrop-filter:blur(16px);
height:80px;
display:flex;
align-items:center;
gap:10px;
padding:0 16px;
border-bottom:1px solid var(--line);
position:sticky;
top:0;
z-index:20;
flex-shrink:0;
}

.nav-icon-btn{
width:52px;
height:52px;
border-radius:14px;
border:1px solid var(--line);
background:var(--input-bg);
color:var(--text);
font-size:18px;
display:grid;
place-items:center;
flex-shrink:0;
}

.order-type-toggle{
display:flex;
background:var(--input-bg);
border:1px solid var(--line);
border-radius:999px;
padding:3px;
gap:3px;
}

.order-type-toggle button{
border:none;
background:transparent;
padding:0 18px;
height:40px;
border-radius:999px;
font-weight:800;
font-size:13px;
color:var(--muted);
display:flex;
align-items:center;
gap:6px;
}

.order-type-toggle button.active{
background:var(--card);
color:var(--text);
box-shadow:var(--shadow-sm);
border:1px solid var(--line);
}

.nav-right{
margin-left:auto;
display:flex;
gap:8px;
align-items:center;
}

#btn-vider-panier{
height:44px;
padding:0 16px;
border-radius:999px;
border:1px solid var(--line);
background:var(--accent-light);
color:var(--accent);
font-weight:800;
font-size:13px;
display:flex;
align-items:center;
gap:6px;
}

#kiosk-content{
flex:1;
display:flex;
flex-direction:column;
overflow:hidden;
padding-bottom:140px;
}

#main-grid-container{
flex:1;
overflow-y:auto;
overflow-x:hidden;
padding:16px;
scrollbar-width:none;
display:flex;
flex-direction:column;
}

#main-grid-container::-webkit-scrollbar{
display:none;
}

/* ==========================================================================
GRILLE DES CATÉGORIES PRINCIPALES
========================================================================== */
.categories-grid{
display:grid !important;
gap:18px !important;
padding:10px 4px 20px !important;
width:100% !important;
}

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

.cat-card-modern {
    background: var(--card) !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
    border: 2px solid var(--line) !important;
    display: flex !important;
    flex-direction: column !important;
    cursor: pointer !important;
    width: 100% !important;
    position: relative !important;
    transition: transform 0.12s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.12s ease !important;
}

.cat-card-modern:active,
.cat-card-modern.pop {
    transform: scale(0.97) translateY(2px) !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04) !important;
    border-color: var(--line-strong) !important;
}

.cat-img-wrapper {
    width: 100% !important;
    height: 160px !important; 
    overflow: hidden !important;
    background: #ffffff !important;
}

[data-theme="dark"] .cat-img-wrapper {
    background: var(--card) !important;
}

.cat-img-wrapper img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.cat-info-bar {
    display: flex !important;
    align-items: center !important;
    padding: 14px 16px !important;
    gap: 14px !important;
    background: var(--card) !important;
}

.cat-icon-circle {
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    display: grid !important;
    place-items: center !important;
    color: #ffffff !important;
    font-size: 18px !important;
    flex-shrink: 0 !important;
}

.cat-name {
    flex: 1 !important;
    font-family: 'Block Berthold Condensed', 'Bebas Neue', sans-serif !important;
    font-size: 22px !important;
    font-weight: 900 !important;
    color: var(--text) !important;
    text-transform: uppercase !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    line-height: 1.05 !important;
    margin-top: 2px !important;
}

.cat-arrow {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: var(--input-bg) !important; 
    color: var(--text) !important;
    display: grid !important;
    place-items: center !important;
    font-size: 14px !important;
    flex-shrink: 0 !important;
}

/* ==========================================================================
TRANSITION & RUBRIQUE "À DÉCOUVRIR AUSSI !"
========================================================================== */
#discover-container{
flex-shrink:0 !important;
background:var(--bg-soft) !important;
border-top:2px solid var(--line-strong) !important;
box-shadow:0 -12px 28px rgba(0,0,0,.08) !important;
padding:16px 16px 0px !important;
margin-top:4px !important;
position:relative !important;
z-index:10 !important;
overflow:visible !important;
}

[data-theme="dark"] #discover-container{
background:var(--bg-soft) !important;
border-top:2px solid var(--line) !important;
box-shadow:0 -12px 30px rgba(0,0,0,.4) !important;
}

#discover-container.hidden{
display:none !important;
}

#discover-container .section-title{
font-family:'Block Berthold Condensed','Bebas Neue',sans-serif !important;
font-size:26px !important;
font-weight:900 !important;
letter-spacing:1.5px !important;
color:var(--text) !important;
margin:0 0 14px 0 !important;
display:flex !important;
align-items:center !important;
gap:12px !important;
text-transform:uppercase !important;
}

#discover-container .section-title i{
color:var(--accent) !important;
font-size:24px !important;
filter:drop-shadow(0 2px 6px rgba(227,6,19,.35)) !important;
}

#discover-container .section-title::after{
content:'' !important;
flex:1 !important;
height:2px !important;
background:linear-gradient(90deg, var(--line-strong) 0%, transparent 95%) !important;
border-radius:999px !important;
}

.discover-grid{
display:flex !important;
flex-wrap:nowrap !important;
gap:14px !important;
overflow-x:auto !important;
overflow-y:visible !important;
scroll-snap-type:x mandatory !important;
padding-bottom:10px !important;
scrollbar-width:none !important;
}

.discover-grid::-webkit-scrollbar{
display:none !important;
}

.discover-card.cat-card-modern {
    flex: 0 0 160px !important;
    width: 160px !important;
    height: auto !important;
    aspect-ratio: auto !important;
}

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

.discover-card.cat-card-modern .cat-name {
    font-size: 15px !important;
    line-height: 1.1 !important;
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.discover-card.cat-card-modern .cat-info-bar {
    padding: 10px 12px !important;
    gap: 8px !important;
}

.discover-card.cat-card-modern .cat-icon-circle {
    width: 28px !important;
    height: 28px !important;
    font-size: 12px !important;
}

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

/* ==========================================================================
AFFICHAGE DES PRODUITS & HEADER TITRE DYNAMIQUE
========================================================================== */
.products-header {
    display: flex !important;
    align-items: center !important;
    gap: 22px !important;
    flex-shrink: 0 !important;
    position: sticky !important;
    top: -16px !important;
    z-index: 50 !important;
    background: var(--bg) !important;
    margin: -16px -16px 20px -16px !important;
    padding: 20px 22px 16px 22px !important; 
}

.back-btn{
width: 58px !important;
height: 58px !important;
border-radius: 50% !important;
border: 1px solid var(--line) !important;
background: #ffffff !important;
color: var(--text) !important;
box-shadow: 0 4px 14px rgba(0,0,0,0.08) !important;
display: grid !important;
place-items: center !important;
font-size: 20px !important;
cursor: pointer !important;
transition: transform 0.15s ease !important;
flex-shrink: 0 !important;
}

.back-btn:active {
transform: scale(0.92) !important;
}

[data-theme="dark"] .back-btn{
background: var(--card) !important;
box-shadow: 0 4px 14px rgba(0,0,0,0.4) !important;
}

.category-header-title {
position: relative !important;
display: inline-flex !important;
flex-direction: column !important;
align-items: flex-start !important;
}

.category-header-title h2{
font-family: 'Block Berthold Condensed', 'Bebas Neue', sans-serif !important;
font-size: 46px !important;
font-weight: 900 !important;
letter-spacing: 1.2px !important;
line-height: 0.9 !important;
color: var(--text) !important;
margin: 0 !important;
text-transform: uppercase !important;
transform: rotate(-3deg) !important;
transform-origin: left bottom !important;
display: inline-block !important;
}

.cat-brush-stroke-svg {
width: 110% !important;
height: 18px !important;
margin-top: 4px !important;
transform: rotate(-1.5deg) !important;
pointer-events: none !important;
}

.cat-brush-stroke-svg svg {
width: 100% !important;
height: 100% !important;
display: block !important;
filter: drop-shadow(0 2px 4px rgba(255, 31, 31, 0.35)) !important;
}

/* ==========================================================================
GRILLES PRODUITS ADAPTATIVES (COMMUN AUX DEUX STYLES)
========================================================================== */
.products-grid{
display: flex !important;
flex-wrap: wrap !important;
gap: 16px !important;
width: 100% !important;
}

/* CAS 1 COLONNE (2 Produits) */
.products-grid.cols-1[data-count="2"] {
flex-direction: column !important;
align-items: center !important;
gap: 22px !important;
}

.products-grid.cols-1[data-count="2"] .product-card {
flex: 0 1 auto !important;
width: 100% !important;
max-width: 680px !important;
margin: 0 auto !important;
}

.products-grid.cols-1[data-count="2"] .product-card:not(.style-2) .product-img-wrapper {
height: 380px !important;
padding: 18px !important;
}

.products-grid.cols-1[data-count="2"] .product-card.style-2 {
height: 220px !important;
max-height: 220px !important;
min-height: 220px !important;
}

/* CAS 1 COLONNE (3 Produits) */
.products-grid.cols-1[data-count="3"] {
flex-direction: column !important;
align-items: center !important;
justify-content: space-between !important;
gap: 14px !important;
height: calc(100% - 85px) !important;
flex: 1 1 auto !important;
overflow: hidden !important;
}

.products-grid.cols-1[data-count="3"] .product-card {
flex: 1 1 calc(33.333% - 10px) !important;
width: 100% !important;
max-width: 680px !important;
max-height: calc(33.333% - 10px) !important;
margin: 0 auto !important;
border-radius: 20px !important;
}

.products-grid.cols-1[data-count="3"] .product-card:not(.style-2) .product-img-wrapper {
flex: 1 1 auto !important;
height: auto !important;
min-height: 0 !important;
padding: 8px !important;
}

.products-grid.cols-1[data-count="3"] .product-info {
padding: 10px 18px 12px !important;
flex-shrink: 0 !important;
}

.products-grid.cols-1[data-count="3"] .product-name {
font-size: 30px !important;
margin-bottom: 2px !important;
}

.products-grid.cols-1[data-count="3"] .product-desc {
font-size: 13px !important;
margin-bottom: 6px !important;
min-height: 0 !important;
-webkit-line-clamp: 1 !important;
}

.products-grid.cols-1[data-count="3"] .product-price {
font-size: 40px !important;
}

.products-grid.cols-1[data-count="3"] .product-add-circle {
width: 44px !important;
height: 44px !important;
font-size: 20px !important;
}

/* CAS 2 COLONNES (4 à 6 produits) */
.products-grid.cols-2 .product-card {
flex: 0 1 calc(50% - 8px) !important;
max-width: calc(50% - 8px) !important;
}

.products-grid.cols-2 .product-card:not(.style-2) .product-img-wrapper {
height: 290px !important;
padding: 12px !important;
}

/* CAS 3 COLONNES (7 produits ou plus) */
.products-grid.cols-3 .product-card {
flex: 0 1 calc(33.333% - 11px) !important;
max-width: calc(33.333% - 11px) !important;
}

.products-grid.cols-3 .product-card:not(.style-2) .product-img-wrapper {
height: 210px !important;
padding: 8px !important;
}

.products-grid.cols-3 .product-card:not(.style-2) .product-name {
font-size: 28px !important;
}

.products-grid.cols-3 .product-card:not(.style-2) .product-price {
font-size: 42px !important;
}

.products-grid.cols-3 .product-card:not(.style-2) .product-add-circle {
width: 48px !important;
height: 48px !important;
font-size: 20px !important;
}

/* Style de base Style 1 */
.product-card{
background: var(--card) !important;
border-radius: 24px !important;
border: 1.5px solid var(--line) !important;
overflow: hidden !important;
box-shadow: 0 8px 24px rgba(0,0,0,0.06) !important;
cursor: pointer !important;
display: flex !important;
flex-direction: column !important;
transition: transform 0.08s ease-out !important;
will-change: transform;
transform: translateZ(0);
position: relative !important;
}

.product-card:active {
    transform: scale(0.96) translateZ(0) !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.06) !important;
    border-color: var(--line-strong) !important;
}

.product-img-wrapper {
position: relative !important;
width: 100% !important;
overflow: hidden !important;
background: #ffffff !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}

[data-theme="dark"] .product-img-wrapper {
background: var(--bg-soft) !important;
}

.product-img-wrapper img{
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
object-position: center !important;
display: block !important;
}

.product-badge-custom {
position: absolute !important;
top: 14px !important;
right: 14px !important;
background: #FFFFFF !important;
color: #111827 !important;
border-radius: 999px !important;
padding: 5px 14px 4px !important;
display: flex !important;
align-items: center !gap: 7px !important;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22) !important;
z-index: 2 !important;
}

.product-badge-custom i {
font-size: 13px !important;
color: #111827 !important;
}

.product-badge-custom span {
font-family: 'AmsiProNarw-Ultra', 'Block Berthold Condensed', 'Bebas Neue', sans-serif !important;
font-size: 15px !important;
font-weight: 900 !important;
letter-spacing: 0.6px !important;
text-transform: uppercase !important;
line-height: 1 !important;
margin-top: 1px !important;
}

.product-info{
padding: 18px 20px 20px !important;
display: flex !important;
flex-direction: column !important;
flex: 1 !important;
background: var(--card) !important;
border-top: 1px solid var(--line) !important;
}

.product-name{
font-family: 'AmsiProNarw-Ultra', 'Nunito', sans-serif !important;
font-size: 38px !important;
font-weight: 900 !important;
line-height: 0.95 !important;
text-transform: uppercase !important;
margin: 0 0 8px 0 !important;
color: var(--text) !important;
letter-spacing: -0.5px !important;
}

.product-desc{
font-size: 16px !important;
color: var(--muted-2) !important;
line-height: 1.35 !important;
font-weight: 700 !important;
margin: 0 0 16px 0 !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
min-height: 44px !important;
}

.product-footer{
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
margin-top: auto !important;
padding-top: 4px !important;
}

.product-price{
font-family: 'AmsiProNarw-Ultra', 'Block Berthold Condensed', 'Bebas Neue', sans-serif !important;
font-size: 50px !important;
font-weight: 900 !important;
color: #FF1F1F !important;
letter-spacing: 0.5px !important;
line-height: 0.85 !important;
display: inline-block !important;
margin: 0 !important;
}

.product-add-circle{
width: 54px !important;
height: 54px !important;
border-radius: 50% !important;
background: #FF1F1F !important;
color: #FFFFFF !important;
border: none !important;
display: grid !important;
place-items: center !important;
font-size: 24px !important;
box-shadow: 0 6px 16px rgba(255, 31, 31, 0.45) !important;
cursor: pointer !important;
flex-shrink: 0 !important;
}

/* ==========================================================================
STYLE 2 : CARTE HORIZONTALE AVEC IMAGE INTÉGRALE
========================================================================== */
.product-card.style-2 {
    flex-direction: row !important;
    height: 180px !important;
    max-height: 180px !important;
    min-height: 180px !important;
    border-radius: 20px !important;
    border: 1.5px solid var(--line) !important;
    background: var(--card) !important;
    position: relative !important;
    overflow: hidden !important;
    padding: 0 !important;
    align-items: stretch !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.05) !important;
}

.prod-left-wrap {
    width: 40%;
    height: 100%;
    position: relative;
    filter: drop-shadow(3px 0 5px rgba(0,0,0,0.22)) drop-shadow(1px 0 0 rgba(0,0,0,0.12));
    flex-shrink: 0;
    margin-right: 2px;
}

.prod-left-visual {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--trame-bg) !important;
    background-image: var(--trame-img) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    isolation: isolate;
    padding-left: 12px;
    padding-right: 18px;
    clip-path: url(#torn-paper-real);
    -webkit-clip-path: polygon(0 0, 100% 0, 99.53% 2.19%, 98.79% 4.38%, 99.41% 6.57%, 98.39% 8.76%, 98.47% 10.95%, 98.83% 13.14%, 97.81% 15.33%, 98.16% 17.52%, 98.52% 19.71%, 98.59% 21.90%, 98.39% 24.09%, 98.74% 26.28%, 97.46% 28.47%, 97.81% 30.66%, 98.16% 32.85%, 97.96% 35.04%, 97.77% 37.23%, 97.31% 39.42%, 97.66% 41.61%, 97.20% 43.80%, 96.18% 45.99%, 97.08% 48.18%, 97.43% 50.36%, 95.04% 52.55%, 95.67% 54.74%, 95.74% 56.93%, 96.37% 59.12%, 95.35% 61.31%, 95.16% 63.50%, 95.51% 65.69%, 95.32% 67.88%, 95.39% 70.07%, 94.64% 72.26%, 94.99% 74.45%, 95.35% 76.64%, 94.33% 78.83%, 94.41% 81.02%, 94.22% 83.21%, 94.84% 85.40%, 94.11% 87.59%, 93.09% 89.78%, 92.35% 91.97%, 92.70% 94.16%, 91.96% 96.35%, 91.76% 98.54%, 92.00% 100.00%, 0 100%);
}

.prod-left-visual.has-image {
    background-color: var(--trame-bg) !important;
    background-image: var(--trame-img) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

.prod-left-visual.has-image img {
    position: relative !important;
    z-index: 3 !important;
}

.prod-left-visual.has-trame {
    background-image: var(--trame-img);
}

.prod-left-visual img {
    position: relative !important;
    z-index: 3 !important;
    width: 92px !important;
    height: 122px !important;
    object-fit: contain !important;
    filter: drop-shadow(0 14px 18px rgba(0,0,0,0.36)) drop-shadow(0 2px 6px rgba(0,0,0,0.22)) !important;
    transform: scale(1.08) rotate(-2deg);
    transition: transform 0.25s ease;
    margin-left: 4px;
}

.product-card.style-2:hover .prod-left-visual img {
    transform: scale(1.14) rotate(-1deg);
}

.prod-badge-best {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 4;
    background: #FFD400;
    color: #111;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    display: flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
}

.prod-right-details {
flex: 1 !important;
padding: 14px 18px !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: flex-start !important;
min-width: 0 !important;
background: transparent !important;
}

.prod-title-s2 { 
    font-weight: 900 !important; 
    text-transform: uppercase !important; 
    color: #0F3254 !important; 
    margin: 0 0 4px 0 !important; 
    line-height: 1.05 !important; 
    display: block !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
    letter-spacing: -0.1px !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

[data-theme="dark"] .prod-title-s2 { 
    font-weight: 900 !important; 
    text-transform: uppercase !important; 
    color: #0F3254 !important; 
    margin: 0 0 4px 0 !important; 
    line-height: 1.05 !important; 
    display: block !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
    letter-spacing: -0.1px !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

.prod-desc-s2 {
font-size: 15px !important;
color: var(--muted) !important;
font-weight: 700 !important;
margin: 0 0 8px 0 !important;
line-height: 1.2 !important;
}

.prod-price-s2 {
font-family: 'AmsiProNarw-Ultra', 'Block Berthold Condensed', 'Bebas Neue', sans-serif !important;
font-size: 40px !important;
font-weight: 900 !important;
color: #006082 !important;
line-height: 0.9 !important;
letter-spacing: -0.5px !important;
}

[data-theme="dark"] .prod-price-s2 {
color: #22CCFF !important;
}

.prod-btn-plus-s2 {
position: absolute !important;
bottom: 10px !important;
right: 10px !important;
width: 48px !important;
height: 48px !important;
border-radius: 50% !important;
background: #FF1F1F !important;
color: #FFFFFF !important;
border: none !important;
display: grid !important;
place-items: center !important;
font-size: 20px !important;
box-shadow: 0 6px 16px rgba(255, 31, 31, 0.45) !important;
cursor: pointer !important;
z-index: 5 !important;
}

.product-add-circle, .prod-btn-plus-s2 {
    transition: transform 0.08s ease-out !important;
    will-change: transform;
    transform: translateZ(0);
}

.product-add-circle:active, .prod-btn-plus-s2:active {
    transform: scale(0.88) translateZ(0) !important;
}

.products-grid.cols-3 .product-card.style-2 {
    height: 190px !important;
}
.products-grid.cols-3 .prod-left-wrap {
    width: 42% !important;
}

/* ==========================================================================
TUNNEL DE PERSONNALISATION
========================================================================== */
.customization-layout{
flex:1;
display:flex;
flex-direction:column;
overflow:hidden;
height:100%;
background:var(--bg);
}

.customization-header{
padding:0;
display:flex;
flex-direction:column;
align-items:stretch;
background:#fff;
border-bottom:none;
}

[data-theme="dark"] .customization-header{
background:var(--card);
}

.product-hero-fiche{
display:flex;
gap:18px;
padding:18px;
align-items:center;
background:inherit;
border-bottom:1.5px solid var(--line);
}

.hero-img{
width:130px;
height:130px;
border-radius:18px;
object-fit:contain;
background:#fff;
border:2px solid var(--line);
padding:8px;
flex-shrink:0;
}

.hero-infos{
flex:1;
min-width:0;
display:flex;
flex-direction:column;
gap:6px;
}

.hero-name{
font-family:'AmsiProNarw-Ultra', 'Nunito', sans-serif !important;
font-size:32px !important;
font-weight:900 !important;
line-height:1 !important;
text-transform:uppercase !important;
color:var(--text);
margin:0 !important;
}

.hero-desc{
font-size:14px;
font-weight:600;
color:var(--text-soft);
line-height:1.35;
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
overflow:hidden;
}

.hero-price{
font-family:'AmsiProNarw-Ultra', 'Block Berthold Condensed', 'Bebas Neue', sans-serif !important;
font-weight:900 !important;
font-size:36px !important;
color:var(--accent) !important;
margin-top:2px !important;
}

.back-btn-header{
width:40px;
height:40px;
border-radius:50%;
border:1.5px solid var(--line);
background:var(--card);
display:grid;
place-items:center;
flex-shrink:0;
color:var(--text);
}

.steps-progress-container{
padding:14px 16px 12px;
background:var(--bg-soft);
border-bottom:1.5px solid var(--line);
}

.steps-titles-row{
display:flex;
gap:8px;
overflow-x:auto;
scrollbar-width:none;
padding-bottom:8px;
}

.steps-titles-row::-webkit-scrollbar{
display:none;
}

.step-item{
display:flex;
align-items:center;
gap:8px;
padding:8px 14px;
border-radius:999px;
font-size:12px;
font-weight:800;
white-space:nowrap;
border:1.5px solid var(--line);
background:#fff;
color:var(--muted);
flex-shrink:0;
}

.step-item.done{
background:#111;
color:#fff;
border-color:#111;
}

.step-item.current{
background:#fff;
color:#111;
border-color:#111;
border-width:2px;
box-shadow:0 2px 8px rgba(0,0,0,.1);
}

.step-item.upcoming{
background:var(--input-bg);
color:var(--muted);
}

.step-num{
width:22px;
height:22px;
border-radius:50%;
background:var(--line);
color:var(--text);
display:grid;
place-items:center;
font-size:11px;
font-weight:900;
}

.step-item.done .step-num{
background:#fff;
color:#111;
}

.step-item.current .step-num{
background:#111;
color:#fff;
}

.step-check{
font-size:10px;
}

.stepper-bar{
display:flex;
gap:6px;
padding:0 4px;
margin-top:4px;
}

.stepper-dot{
height:6px;
flex:1;
border-radius:999px;
background:var(--line);
transition:all .3s;
}

.stepper-dot.active{
background:#111;
}

.stepper-dot.done{
background:#111;
opacity:.4;
}

.step-titles{
padding:18px 16px 0;
}

.step-title{
font-family:'Block Berthold Condensed','Bebas Neue',sans-serif;
font-size:32px;
margin:0;
line-height:.95;
color:var(--text);
}

.step-subtitle{
color:var(--muted);
font-weight:700;
font-size:13px;
margin:6px 0 0;
display:flex;
gap:8px;
align-items:center;
}

.step-subtitle .req-badge{
background:var(--accent-light);
color:var(--accent);
border:1px solid var(--line);
padding:3px 10px;
border-radius:999px;
font-size:11px;
font-weight:800;
}

.options-scroll-area{
flex:1;
overflow-y:auto;
overflow-x:hidden;
padding:16px;
}

.options-grid{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:14px;
width:100%;
}

.option-card {
    flex: 0 1 calc(33.333% - 10px);
    max-width: calc(33.333% - 10px);
    min-width: 0;
    min-height: 220px;
    background: var(--card);
    border: 2px solid var(--line);
    border-radius: 18px;
    padding: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.12s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.12s ease !important;
}

.option-card:active {
    transform: scale(0.97) translateY(2px) !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04) !important;
}

.options-grid.cols-2 .option-card{
flex:0 1 calc(50% - 7px);
max-width:calc(50% - 7px);
}

.option-card.selected{
border-color:var(--primary-2);
background:var(--primary-light);
}

.option-img-wrap{
width:100%;
height:140px;
background:var(--input-bg);
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
border-bottom:1px solid var(--line);
}

.option-img-wrap img{
width:100%;
height:100%;
object-fit:contain;
padding:10px;
}

.option-content{
padding:10px 12px;
flex:1;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
}

.option-name{
font-weight:800;
font-size:13px;
text-align:center;
line-height:1.2;
color:var(--text);
}

.option-price{
font-weight:900;
color:var(--success);
font-size:12px;
margin-top:4px;
}

.option-check{
position:absolute;
top:8px;
right:8px;
width:28px;
height:28px;
border-radius:50%;
background:var(--card);
border:1.5px solid var(--line);
display:grid;
place-items:center;
font-size:14px;
color:transparent;
}

.option-card.selected .option-check{
background:var(--primary-2);
border-color:var(--primary-2);
color:#fff;
}

.option-qty{
position:absolute;
bottom:8px;
right:8px;
display:flex;
align-items:center;
gap:4px;
background:var(--text);
color:var(--bg);
border-radius:999px;
padding:3px;
z-index:2;
}

.qty-btn{
width:26px;
height:26px;
border-radius:50%;
border:none;
background:rgba(255,255,255,.2);
color:inherit;
display:grid;
place-items:center;
font-size:12px;
}

.qty-val{
font-weight:900;
font-size:13px;
min-width:16px;
text-align:center;
}

.customization-fixed-bottom{
flex-shrink:0;
background:var(--card);
border-top:1px solid var(--line);
box-shadow:var(--shadow-float);
padding:14px 16px;
display:flex;
flex-direction:column;
gap:12px;
max-height:42%;
min-height:180px;
}

.customization-actions{
display:flex;
gap:10px;
height:56px;
flex-shrink:0;
}

.btn-action{
flex:1;
border:none;
border-radius:14px;
font-weight:900;
font-size:14px;
letter-spacing:.4px;
display:flex;
align-items:center;
justify-content:center;
gap:8px;
}

.btn-action.back{
background:var(--input-bg);
color:var(--text-soft);
border:1px solid var(--line);
}

.btn-action.next{
background:var(--text);
color:var(--bg);
}

.recap-wrapper{
flex:1;
min-height:0;
border:1px solid var(--line);
border-radius:16px;
background:var(--input-bg);
display:flex;
gap:12px;
padding:12px;
overflow:hidden;
}

.recap-prod-col{
width:100px;
flex-shrink:0;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
border-right:1px solid var(--line);
padding-right:12px;
}

.recap-prod-img{
width:64px;
height:64px;
object-fit:contain;
margin-bottom:6px;
}

.recap-prod-name{
font-family:'AmsiProNarw-Ultra', sans-serif !important;
font-size:13px !important;
text-transform:uppercase;
font-weight:900;
color:var(--text);
line-height:1.1;
}

.recap-prod-price{
font-family:'AmsiProNarw-Ultra', sans-serif !important;
font-weight:900 !important;
color:var(--accent);
font-size:20px;
margin-top:4px;
}

.recap-sel-col{
flex:1;
display:flex;
flex-wrap:wrap;
gap:8px;
align-content:flex-start;
overflow-y:auto;
min-width:0;
}

.recap-sel-item{
width:52px;
text-align:center;
position:relative;
flex-shrink:0;
}

.recap-sel-item img{
width:36px;
height:36px;
object-fit:contain;
background:var(--card);
border-radius:8px;
border:1px solid var(--line);
padding:2px;
}

.recap-sel-item span{
font-size:9px;
font-weight:800;
display:block;
line-height:1.1;
margin-top:4px;
text-transform:uppercase;
color:var(--text-soft);
}

.recap-tot-col{
width:140px;
flex-shrink:0;
display:flex;
flex-direction:column;
justify-content:flex-end;
gap:4px;
border-left:1px solid var(--line);
padding-left:12px;
}

.recap-extras, .recap-total{
display:flex;
justify-content:space-between;
font-weight:800;
font-size:11px;
color:var(--text-soft);
}

.recap-total .tot-val{
font-family:'AmsiProNarw-Ultra', 'Block Berthold Condensed', 'Bebas Neue', sans-serif !important;
font-size:26px !important;
color:var(--accent);
}

/* ==========================================================================
PANIER FLOTTANT EN BAS
========================================================================== */
#kiosk-cart{
position:absolute;
bottom:0;
left:0;
right:0;
background:color-mix(in srgb, var(--card) 96%, transparent);
backdrop-filter:blur(20px);
border-top:1px solid var(--line);
box-shadow:var(--shadow-float);
border-radius:32px 32px 0 0;
z-index: 95 !important;
transition:transform .4s cubic-bezier(.2,.8,.2,1);
}

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

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

.cart-summary{
height:120px;
display:flex;
align-items:center;
padding:0 28px;
gap:20px;
cursor:pointer;
}

.cart-icon{
width:76px;
height:76px;
border-radius:50%;
background:var(--text);
color:var(--bg);
display:grid;
place-items:center;
position:relative;
flex-shrink:0;
font-size:30px;
}

#cart-count{
position:absolute;
top:-4px;
right:-4px;
background:var(--accent);
color:#fff;
width:32px;
height:32px;
border-radius:50%;
display:grid;
place-items:center;
font-weight:900;
font-size:15px;
border:3px solid var(--card);
}

.cart-info{
flex:1;
}

.cart-label{
font-size:18px;
font-weight:800;
letter-spacing:1.5px;
text-transform:uppercase;
color:var(--muted);
margin-bottom:4px;
display:block;
}

.cart-total{
font-family:'Block Berthold Condensed','Bebas Neue',sans-serif;
font-size:34px;
color:var(--text);
line-height:1;
}

#cart-total-price{
font-family:'AmsiProNarw-Ultra', sans-serif !important;
font-size:38px !important;
color: #FF1F1F !important;
}

.cart-actions{
display:flex;
align-items:center;
gap:18px;
}

.cart-toggle-hint{
font-size:13px;
font-weight:800;
letter-spacing:1px;
text-transform:uppercase;
color:var(--muted);
display:flex;
gap:8px;
align-items:center;
}

.cart-toggle-hint i{
font-size:16px;
transition:transform .3s;
}

#kiosk-cart.expanded .cart-toggle-hint i{
transform:rotate(180deg);
}

#btn-validate-order{
background:var(--text);
color:var(--bg);
border:none;
border-radius:20px;
padding:0 34px;
height:70px;
font-weight:900;
font-size:19px;
letter-spacing:1px;
display:flex;
align-items:center;
gap:12px;
box-shadow: 0 6px 20px rgba(0,0,0,0.15);
transition: transform 0.15s ease;
}

#btn-validate-order:active{
transform: scale(0.96);
}

.cart-details {
    /* S'adapte au contenu, et plafonne à 66.666vh moins la hauteur du bandeau (120px) */
    max-height: calc(66.666vh - 120px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 0;
    background: #fff;
    -webkit-overflow-scrolling: touch;
}

[data-theme="dark"] .cart-details{
background:var(--card);
}

.cart-item-v2{
display:flex;
gap:14px;
padding:16px 14px;
border-bottom:1.5px solid var(--line);
align-items:center;
}

.cart-item-v2 img{
width:86px;
height:86px;
border-radius:14px;
object-fit:contain;
background:#fff;
border:1.5px solid var(--line);
padding:6px;
flex-shrink:0;
}

.cart-item-main{
flex:1;
min-width:0;
display:flex;
flex-direction:column;
gap:6px;
}

.cart-item-header{
display:flex;
justify-content:flex-start;
align-items:center;
gap:10px;
}

.cart-item-name{
font-family:'AmsiProNarw-Ultra', 'Nunito', sans-serif !important;
font-size:22px !important;
font-weight:900;
text-transform:uppercase;
color:var(--text);
flex:1;
}

.cart-item-options{
font-size:11px;
color:var(--muted-2);
line-height:1.35;
font-weight:600;
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
overflow:hidden;
}

.cart-item-actions{
display:flex;
align-items:center;
gap:8px;
margin-top:6px;
flex-wrap:wrap;
}

.qty-controls{
display:flex;
align-items:center;
border:1.5px solid var(--line);
border-radius:999px;
overflow:hidden;
background:#fff;
}

.qty-btn{
width:32px;
height:32px;
border:none;
background:inherit;
display:grid;
place-items:center;
font-weight:900;
font-size:16px;
cursor:pointer;
}

.qty-btn.minus{
color:var(--accent);
}

.qty-btn.plus{
color:var(--success);
}

.qty-val{
min-width:28px;
text-align:center;
font-weight:900;
font-size:14px;
border-left:1.5px solid var(--line);
border-right:1.5px solid var(--line);
height:32px;
display:grid;
place-items:center;
}

.btn-cart-action{
height:30px;
padding:0 12px;
border-radius:999px;
border:1.5px solid var(--line-strong);
background:#fff;
font-size:11px;
font-weight:800;
display:flex;
align-items:center;
gap:5px;
cursor:pointer;
text-transform:uppercase;
}

.btn-cart-action.personnaliser{
color:var(--primary);
border-color:#BAE6FF;
background:var(--primary-light);
}

.btn-cart-action.supprimer{
color:var(--accent);
border-color:#FFD6D6;
background:var(--accent-light);
}

/* ==========================================================================
COLONNE DROITE : PRIX EN HAUT + NUMÉRO EN BAS (BORNE)
========================================================================== */
.cart-item-right-col {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
}

.cart-item-price{
    background:var(--accent);
    color:#fff;
    font-weight:900;
    font-size:14px;
    padding:5px 10px;
    border-radius:6px;
    flex-shrink:0;
    white-space: nowrap;
}

.cart-item-number{
    width:44px;
    height:44px;
    border-radius:50%;
    background:#0F8ACB;
    color:#fff;
    display:grid;
    place-items:center;
    font-weight:900;
    font-size:14px;
    flex-shrink:0;
}

.cart-empty{
padding:40px 20px;
text-align:center;
color:var(--muted);
}

/* =========================================================
   RUBAN "À PARTIR DE" (CATÉGORIES)
========================================================= */
.categories-grid .cat-card-modern,
.discover-grid .cat-card-modern {
    position: relative !important;
}

.cat-ribbon-min-price {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    background-color: #e3000f !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    padding: 6px 14px !important;
    border-bottom-left-radius: 16px !important;
    z-index: 10 !important;
    text-transform: uppercase !important;
    box-shadow: -3px 3px 8px rgba(0,0,0,0.15) !important;
    white-space: nowrap !important;
    letter-spacing: 0.5px !important;
}

/* ==========================================================================
CORRECTION AFFICHAGE BORNE : 1 SEUL PRODUIT (STYLE 1)
========================================================================== */
.products-grid.cols-1[data-count="1"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

.products-grid.cols-1[data-count="1"] .product-card:not(.style-2) {
    width: 100% !important;
    max-width: 420px !important;
    margin: 0 auto !important;
}

.products-grid.cols-1[data-count="1"] .product-card:not(.style-2) .product-img-wrapper {
    height: 320px !important;
    min-height: 320px !important;
    max-height: 320px !important;
}

/* ==========================================================================
ANIMATION VOL DE PRODUIT & REBOND
========================================================================== */
.fly-product-img {
    position: fixed !important;
    z-index: 999999 !important;
    object-fit: contain !important;
    pointer-events: none !important;
}

.pop-bounce {
    animation: cartBounce 0.24s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

@keyframes cartBounce {
    0% { transform: scale(1); }
    50% { transform: scale(1.28); }
    100% { transform: scale(1); }
}

/* ==========================================================================
ANIMATION ENTRÉE BORNE V2
========================================================================== */
#kiosk-container.kiosk-enter { animation: kioskFadeIn 0.24s ease-out both; }
#kiosk-container.kiosk-enter #kiosk-nav-bar { animation: navSlideDown 0.32s cubic-bezier(.2,.8,.2,1) both; }
#kiosk-container.kiosk-enter #promo-banner { animation: promoSlideIn 0.36s cubic-bezier(.2,.8,.2,1) 0.06s both; }

@keyframes kioskFadeIn { from{opacity:0} to{opacity:1} }
@keyframes navSlideDown { from{transform:translateY(-100%);opacity:0} to{transform:translateY(0);opacity:1} }
@keyframes promoSlideIn { from{transform:translateY(-18px) scale(0.98);opacity:0} to{transform:translateY(0) scale(1);opacity:1} }

@keyframes catMainIn {
  0% { opacity:0; transform: translateY(50px) scale(0.82); filter: blur(6px); }
  55% { opacity:1; transform: translateY(-7px) scale(1.04); filter: blur(0); }
  100% { opacity:1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes catDiscoverIn {
  0% { opacity:0; transform: translateX(70px) scale(0.88) rotate(4deg); filter: blur(5px); }
  70% { opacity:1; transform: translateX(-6px) scale(1.03) rotate(-1deg); }
  100% { opacity:1; transform: translateX(0) scale(1) rotate(0); filter: blur(0); }
}

.categories-grid .cat-card-modern {
  opacity: 0;
  animation: catMainIn 0.48s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  will-change: transform, opacity;
  transform-origin: center bottom;
}

.discover-grid .discover-card.cat-card-modern {
  opacity: 0;
  animation: catDiscoverIn 0.42s cubic-bezier(0.25, 0.85, 0.35, 1.15) both;
  will-change: transform, opacity;
  transform-origin: center right;
}

#discover-container.discover-enter {
  animation: discoverUp 0.34s cubic-bezier(.2,.8,.2,1) both;
}
#discover-container.discover-enter .section-title {
  animation: titleIn 0.32s ease 0.05s both;
}
@keyframes discoverUp { from{transform:translateY(20px);opacity:0} to{transform:translateY(0);opacity:1} }
@keyframes titleIn { from{transform:translateX(-16px);opacity:0} to{transform:translateX(0);opacity:1} }

.categories-grid .cat-card-modern:hover,
.discover-grid .discover-card:hover {
  transform: translateY(-2px) scale(1.01);
  transition: transform 0.14s ease;
}

@media (prefers-reduced-motion: reduce) {
  .categories-grid .cat-card-modern,
  .discover-grid .discover-card,
  #kiosk-container.kiosk-enter,
  #kiosk-container.kiosk-enter #kiosk-nav-bar,
  #kiosk-container.kiosk-enter #promo-banner,
  #discover-container.discover-enter {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* ==========================================================================
BOÎTES DE DIALOGUE (COMMUN)
========================================================================== */
.dialog-modal-card {
    text-align: center !important;
}

.dialog-modal-card .customization-actions {
    display: flex !important;
    gap: 12px !important;
    width: 100% !important;
    height: 56px !important;
    margin-top: 24px !important;
}

.dialog-modal-card .btn-action {
    flex: 1 1 0 !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 16px !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
}

.dialog-modal-card .btn-action.btn-danger-confirm {
    background: var(--accent) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 18px rgba(255, 31, 31, 0.35) !important;
}

#kiosk-dialog-modal {
    z-index: 9999 !important;
}

/* ==========================================================================
BOUTON FERMETURE MODALE CHOIX (BORNE PAR DÉFAUT)
========================================================================== */
.choice-modal {
    position: relative !important;
}

.choice-modal .modal-close {
    position: absolute !important;
    top: 24px !important;
    right: 24px !important;
    width: 68px !important;
    height: 68px !important;
    border-radius: 50% !important;
    background: var(--input-bg) !important;
    border: 2px solid var(--line-strong) !important;
    color: var(--text) !important;
    font-size: 28px !important;
    display: grid !important;
    place-items: center !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
    cursor: pointer !important;
    z-index: 20 !important;
    transition: transform 0.15s ease, background 0.15s ease !important;
}

.choice-modal .modal-close:active {
    transform: scale(0.92) !important;
    background: var(--line) !important;
}

/* Backdrop d'interception du panier - commun Borne, Tablette et Mobile */
#cart-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 90 !important; /* Juste sous le panier #kiosk-cart qui a z-index: 30 */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    -webkit-tap-highlight-color: transparent;
}

#cart-backdrop.active {
    opacity: 1;
    visibility: visible;
}

/* Désactive le backdrop si la tablette a la classe app-tablette ou sur grand écran paysage */
body.app-tablette #cart-backdrop,
@media (min-width: 1024px) and (orientation: landscape) {
    #cart-backdrop {
        display: none !important;
        pointer-events: none !important;
        visibility: hidden !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 */
}

/* ==========================================================================
   GESTION DU RETRAIT D'INGRÉDIENTS (COMPOSITION)
   ========================================================================== */
.option-card.composition-card.included {
    border: 2px solid #22c55e !important;
    background: #f0fdf4 !important;
}
.option-card.composition-card.included .option-check {
    background: #22c55e !important;
    border-color: #22c55e !important;
    color: #ffffff !important;
}
.option-composition-badge {
    font-size: 11px;
    font-weight: 800;
    margin-top: 4px;
}

.option-card.composition-card.retired {
    border: 2px solid #fecaca !important;
    background: #fef2f2 !important;
    opacity: 0.78;
}
.option-card.composition-card.retired .option-img-wrap img {
    filter: grayscale(1) opacity(0.5);
}
.option-card.composition-card.retired .option-name {
    text-decoration: line-through !important;
    text-decoration-color: #ef4444 !important;
    text-decoration-thickness: 2px !important;
    color: #dc2626 !important;
}
.option-card.composition-card.retired .option-check {
    background: #ef4444 !important;
    border-color: #ef4444 !important;
    color: #ffffff !important;
}
.order-sending-overlay{position:fixed;inset:0;z-index:100000;background:rgba(15,23,42,.9);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.3rem;font-weight:700;cursor:wait}

/* Chargement et reprise du catalogue, communs aux trois canaux client. */
.catalogue-feedback { max-width:560px; margin:clamp(20px,6vh,72px) auto; padding:clamp(24px,5vw,48px); text-align:center; color:var(--text); background:var(--card); border:1px solid var(--line-strong); border-radius:24px; }
.catalogue-feedback > i { display:block; margin-bottom:20px; font-size:36px; color:var(--text-soft); }
.catalogue-feedback h2 { margin:0 0 12px; font-size:clamp(22px,3vw,32px); line-height:1.15; }
.catalogue-feedback p { color:var(--text-soft); font-size:clamp(14px,1.5vw,18px); line-height:1.6; }
.catalogue-retry { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; margin-top:12px; padding:12px 24px; border:0; border-radius:14px; background:var(--text); color:var(--card); font:inherit; font-weight:800; cursor:pointer; }
.catalogue-retry:focus-visible { outline:3px solid var(--primary-2); outline-offset:4px; }