@charset "UTF-8";

@font-face {
    font-family: "BERNIER Regular";
    src: url("font/BERNIERRegular-Regular.otf");
}


.body-content {
    font-family: "BERNIER Regular";
}

.pos-block {
    display: inline-block;
}


.cashdrawer .material-label {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently
                                     supported by Chrome, Edge, Opera and Firefox */

}


.article-box {
    vertical-align: top;
}

.pres-panel {
    height: 100vh;

}


.pres-panel-logo {
    padding: 0px !important;
    padding-top: 30% !important;
    font-size: xxx-large;
    text-align: center;
}


.fullscreen-video.video-container {
    width: 100vw;
    height: 100vh;

}

.fullscreen-video.video-container iframe, .fullscreen-video.video-container object, .fullscreen-video.video-container embed {
    position: absolute;
    top: -10px;
    left: -10px;
    width: calc(100vw + 10px);
    overflow: hidden;
    height: calc(100vh + 10px);
    border: 0px solid white;
}

.poshelper .blue-text {
    color: #05355a !important;
}

.poshelper .blue {
    background-color: #05355a !important;
}

.centereddiv {
    margin: 20px auto !important;
}

.centereddiv-nomargin {
    margin: 0px auto !important;
}

.centereddiv-notforced {
    margin: 20px auto;
}

.searchcustomer-listtitle {
    text-align: center;
    font-size: xx-large;
    color: #4e4947;
}

.btn-floating.bottom-right-btn {
    position: fixed;
    right: 20px;
    bottom: 20px;
    box-shadow: 0 2px 5px #acadcc, 0 2px 10px #734141;
}

.position-relative {
    position: relative;
}

.position-fixed {
    position: fixed;
}

.position-absolute {
    position: absolute;
}

.alarm-count-small {

    border-radius: 100%;
    background-color: #2e45b5;
    padding: 6px;
    color: white;
    font-size: 9px;
    font-weight: bold;
    min-width: 20px;
    text-align: center;

}

.searchcustomer-listmessage {
    text-align: center;
    font-size: large;
}

.main-progress-circle {
    margin: 100px auto;
    width: 200px;
    font-size: 2em;
}

.orderkiosk .ticket-group {
    background-color: white;
    color: black;
    font-weight: 800;
    text-shadow: 1px 1px 1px white;
    font-size: 14px;
    border-radius: 0px;
    margin-top: 2px;
}

.ticket-group {
    background-color: rgba(154, 77, 18, 0.7);
    color: white;
    font-weight: 800;
    text-shadow: 1px 1px 1px black;
    font-size: 13px;
    border-radius: 20px;
    margin-top: 2px;
}


.display-cashregister-ticket .ticket-product {
    font-size: 35px;
}


.display-cashregister-ticket .ticket-qty {
    font-size: 35px;
}

.display-cashregister-ticket .ticket-price {
    font-size: 35px;
}

.display-cashregister-ticket .ticket-subproduct {
    font-size: 20px;
}

.display-cashregister-ticket .ticket-prod {
    width: calc(100% - 50px - 60px - 45px);
}


.ticket-box-container::-webkit-scrollbar {
    width: 1em;
}

.ticket-box-container::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(247, 232, 220, 0.5);
}

.ticket-box-container::-webkit-scrollbar-thumb {
    background-color: rgba(247, 232, 220, 0.5);
    outline: 1px solid white;
}

.ticket-box-container {
    padding: 7px;
}

.article-box-container::-webkit-scrollbar {
    width: 30px;
}

.article-box-container::-webkit-scrollbar-track {
    box-shadow: inset 0 0 1px rgba(247, 232, 220, 0.5) !important;
}

.article-box-container::-webkit-scrollbar-thumb {
    background-color: rgba(247, 232, 220, 0.5) !important;
    outline: 1px solid white !important;
}

.article-box-container {
    touch-action: pan-y;
}

.overlay-scroll::-webkit-scrollbar {
    width: 1em;
}

.overlay-scroll::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(236, 13, 13, 0.3) !important;
}

.overlay-scroll::-webkit-scrollbar-thumb {
    background-color: #eac4a7 !important;
    outline: 1px solid white !important;
}

/* --- LIGNE DE PRODUIT GLOBALE --- */
.ticket-line {
    display: flex !important;
    align-items: center !important; /* Aligne verticalement au centre tous les éléments de la ligne */
    justify-content: space-between !important;
    padding: 16px 0 !important;
    border-bottom: 1px solid #f1f5f9 !important; /* Séparateur discret entre chaque produit */
    gap: 15px !important;
    position: relative;
    box-sizing: border-box;
}

/* Retirer la bordure sur la toute dernière ligne pour un rendu plus propre */
.ticket-line:last-child {
    border-bottom: none !important;
}


/* Nom du produit principal */
.ticket-product {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    line-height: 1.3 !important;
}

/* Sous-produits / Options (ex: - Frites, - Boisson...) */
.ticket-subproduct {
    font-size: 0.85rem !important;
    color: #64748b !important; /* Gris sobre pour les options */
    margin-top: 3px !important;
    display: block !important;
    line-height: 1.2 !important;
}

/* Style décoratif pour sous-produit spécifique */
.ticket-subproduct-dec {
    font-style: italic !important;
    color: #94a3b8 !important;
}

/* Note libre de l'article (SaleItem.options — ex. "Sans X, Y" pour une étape retrait) —
   couleur teal pour rester cohérent avec le retrait sur les écrans de déclinaison
   (voir .item-spe-box-removable), distinct du gris neutre des sous-produits classiques. */
.ticket-subproduct-option {
    font-size: 0.85rem !important;
    font-style: italic !important;
    color: #1E8A72 !important;
    margin-top: 3px !important;
    display: block !important;
    line-height: 1.2 !important;
}


/* 3. BLOC DE MODIFICATION (+ / -) */
/* Cible le conteneur inline-block généré par GWT qui fait 130px */
.ticket-line > div[style*="width: 130px"] {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-top: 0 !important; /* Annulation du margin-top d'origine */
}

/* 1. QUANTITÉ (À gauche) */
.ticket-qty {
    min-width: 30px !important;
    font-size: 1.15rem !important;
    font-weight: 900 !important;
    color: #d32f2f !important; /* Couleur d'accentuation rouge pour la quantité */
    text-align: center !important;
}

.orderkiosk .ticket-qty {
    display: inline-block;
    width: 40px;
    vertical-align: top;
    cursor: pointer;
    font-weight: 400;
    color: red;
    margin-right: 2px;
    border: none;
    text-align: center;
}


/* 2. INFOS PRODUITS (Au milieu - prend l'espace disponible) */
.ticket-prod {
    flex: 1 !important; /* Occupe tout l'espace disponible au milieu */
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    cursor: pointer;
}

.ticket-prod-selected {
    box-shadow: 0 2px 5px 0 rgba(192, 218, 46, 0.36), 0 2px 10px 0 rgba(214, 139, 63, 0.12);
    border-radius: 8px;
}

.ticket-prod:hover {
    min-height: 20px;
}


.ticket-subproduct-dec:before {
    content: "•";
    color: #b83b3b;
    text-shadow: #b83b3b 0 0 5px;
    margin: 0 10px;
}

/* 4. PRIX (À droite) */
.ticket-price {
    min-width: 80px !important;
    text-align: right !important;
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    position: relative !important;
    padding-right: 15px !important;
}

/* Badge de remise (Discount) s'il y en a un */
.ticket-price span[style*="font-size: 8px"] {
    font-size: 0.75rem !important;
    color: #ef4444 !important; /* Rouge vif de réduction */
    background-color: #fee2e2 !important; /* Fond rouge très léger */
    padding: 2px 6px !important;
    border-radius: 4px !important;
    position: absolute !important;
    top: -16px !important;
    right: 0 !important;
    font-weight: 800 !important;
}

.box-shadow {
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

.login-panel {
    background: white;
    position: relative;
    height: 90vh;
}

.login-top {
    padding: 0px !important;
    padding-top: 3% !important;
    font-size: xxx-large;
    text-align: center;
}

.login-fieldPanel {
    background: white;
    padding: 6%;
}

.calldisplayer-title {
    text-shadow: 5px 5px 5px black;
}


.orderkiosk .stepper .step > div:first-child .circle {
    background: #732410 !important;
}

.box-sale-calldisplayer-removal {
    background-color: #cc0000 !important;
    text-shadow: 8px 8px 8px white !important;
    box-shadow: 0 2px 5px 0 #cc0000, 0 2px 10px 0 #cc0000 !important;
}

.offline-box {
    margin: auto;
    text-align: center;
    color: white;
    font-weight: 800;
    text-shadow: 0px 3px 8px black;
    font-size: 35px;
    height: 50px;
}


/* Conteneur principal de l'alerte */
.alert2-pay-screen {

    border-top: 5px solid #e53935;
    margin-left: auto;
    margin-right: auto;
    opacity: 75%;
    position: fixed;
    bottom: 3px;
    left: 49%;
    width: 50%;
    z-index: 99;
    min-width: 400px;
    background: #d3def6;
    border-radius: 8px;
    padding: 15px 25px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

}

/* Texte principal */
.alert2-pay-box {
    color: #c62828; /* Rouge foncé professionnel */
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 8px;
    text-align: center;
    line-height: 1.4;
}

/* Texte secondaire (le petit texte) */
.alert2-pay-box-small {
    color: #757575; /* Gris pour ne pas surcharger l'œil */
    font-size: 0.85rem;
    font-weight: 400;
    text-align: center;
    font-style: italic;
}

/* Style optionnel pour mettre en valeur les jours restants */
.alert2-highlight {
    color: #d32f2f;
    font-weight: 900;
    text-decoration: underline;
}


/* Conteneur principal de l'écran de blocage */
.lock-pay-screen {
    border: 2px solid #d32f2f;
    border-top: 10px solid #d32f2f; /* Bande supérieure épaisse pour marquer l'arrêt */
    padding: 40px 30px;
    margin: 50px auto;
    max-width: 600px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    background: #d3def6;
    opacity: 90%;
    position: fixed;
    bottom: 3px;
    left: 30%;
    width: 50%;
    z-index: 99;
}

/* Titre principal (Le message d'arrêt) */
.lock-pay-box {
    color: #b71c1c;
    font-size: 1.5rem;
    font-weight: 800;
    margin-top: 20px;
    margin-bottom: 15px;
    line-height: 1.3;
}

/* Texte secondaire */
.lock-pay-box-small {
    color: #616161;
    font-size: 0.95rem;
    font-weight: 400;
    margin-bottom: 25px;
    padding: 0 20px;
}

/* Style spécifique pour le bouton d'action */
.btn-pay-action {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold !important;
    height: 50px !important;
    line-height: 50px !important;
    padding: 0 30px !important;
}


.posimage {
    min-height: 100vh;
}

.posapp-box {
    box-shadow: 0 2px 5px 0 rgba(43, 49, 143, 0.86), 0 2px 10px 0 rgba(43, 49, 143, 0.86) !important;
    border-radius: 30px !important;
}

.spe_header {
    background-color: white;
    color: rgb(158, 80, 80);
    border-bottom: 1px solid rgb(195, 188, 185);
    max-width: 850px;
    margin: auto;
    font-size: 22px;
    font-weight: 700;
    padding-bottom: 8px;
    text-transform: uppercase;
    text-align: left;
}

/* Bouton d'action des étapes spéciales (Valider/Continuer) — la couleur (chili ou
   turquoise) et le libellé viennent du Java (ArticleSpePanel), ici juste la forme :
   coins arrondis façon carte, et un état "grisé mais toujours là" plutôt que masqué. */
/* Les CSS par palier d'écran (matposcloud-{0-500,500-900,900-1280,1281}.css)
   imposent une largeur/hauteur FIXES à ce bouton (150px x 50px, calibrées à
   l'époque pour le seul libellé "VALIDER") — "CONTINUER" (mode retrait, plus
   long) y débordait/était tronqué verticalement. Rendu flexible ici pour
   primer sur ces règles historiques quel que soit le palier d'écran. */
.spe-valid-btn {
    border-radius: 12px !important;
    width: auto !important;
    min-width: 150px !important;
    height: auto !important;
    min-height: 50px !important;
    padding: 8px 24px !important;
    white-space: nowrap !important;
}
.spe-valid-btn-disabled {
    opacity: .4;
    pointer-events: none;
}

.spe-box-disabled {
    background: #ffffff;
    box-shadow: 0 0 3px 4px #E6E6E6;
    background-size: 100%;
    font-size: 13px;
    letter-spacing: -1px;
    font-family: AvenirNextLTPro-MediumCn;
    color: #7c7770;
    font-family: Lora, Georgia, serif;
    display: inline-block;
    margin: 7px;
    vertical-align: top;
    opacity: 0.2;
}


.spe-qte {
    padding: 2px;
    border-radius: 100%;
    background-color: rgba(232, 22, 22, 0.5);
    color: white;
    font-weight: 800;
    width: 15px;
    font-size: 10px;
    position: absolute;
    top: 2px;
    left: 2px;
}

.spe-del {
    padding: 2px;
    color: red;
    font-weight: 800;
    width: 15px;
    font-size: 25px;
    position: absolute;
    top: 2px;
    right: 7px;
}

.arrow_box {
    position: relative;
    height: 50%;
    margin-top: 15px;
    margin-left: 20px;
    line-height: 12px;
    padding: 10px !important;
    border-radius: 5px;
    color: #d7dadc;
    cursor: pointer;
}

.arrow_box:before {
    left: 100%;
    top: 50%;
    border: solid transparent;
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.arrow-active {
    color: #e57373;
    font-weight: 800;
}

.arrow-active:before {
    border-left-color: red !important;
}

.inlineblock {
    /* !important nécessaire : MaterialLabel a sa propre classe .material-label
       (display:block) réappliquée à chaque setVisible(true) — voir StepBarPanel,
       qui efface au passage tout display inline posé via setDisplay(). */
    display: inline-block !important;
}

/* Corollaire du !important ci-dessus : un onglet .inlineblock ne peut plus jamais
   être masqué via setVisible(false) (StepBarPanel) — un style inline simple
   (display:none) ne bat jamais une règle de feuille de style en !important. Cette
   classe (2 sélecteurs, plus spécifique que .inlineblock seul) reprend la main de
   façon fiable — voir StepBarPanel#activeStep, qui la pose/retire à la place. */
.arrow_box.step-hidden {
    display: none !important;
}

/* Récap des choix des étapes déjà validées, sous la barre de navigation (voir
   StepBarPanel#updateRecap) — demande utilisateur : garder trace des choix faits
   en avançant, sans alourdir la barre d'onglets elle-même. Une puce par étape,
   plutôt qu'une ligne de texte brute (retour utilisateur : "pas très joli"). */
.step-choice-recap {
    display: flex !important;
    flex-wrap: wrap;
    clear: both;
    gap: 8px;
    padding: 8px 20px 4px;
    align-items: center;
}

/* Même piège et même correctif que .arrow_box.step-hidden ci-dessus : le display:flex
   !important ci-dessus bat le display:none inline de setVisible(false) (StepBarPanel#updateRecap).
   Un conteneur flex vide forcé visible provoque en plus un bug de layout sur CEF ancien
   (Chromium 84) — hauteur calculée à 2^25 px, qui repousse tout le contenu de l'étape hors
   de l'écran (incident Elepik "Déclinaison" vide, 2026-09-06). Sélecteur à 2 classes,
   plus spécifique que .step-choice-recap seul, pour reprendre la main de façon fiable. */
.step-choice-recap.step-hidden {
    display: none !important;
}

.step-choice-chip {
    display: inline-block !important;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    padding: 4px 12px;
    border-radius: 20px;
    white-space: nowrap;
}

/* OrderKiosk : puces plus grandes, ton crème/chaud cohérent avec le reste de
   l'écran client (gros libellés, palette crème/chili/teal déjà utilisée pour
   .item-spe-box-removable, .spe-valid-btn...). */
.orderkiosk .step-choice-chip {
    font-size: 14px;
    padding: 6px 16px;
    background-color: #FBF3E9;
    color: #8A5A32;
    border: 1px solid #E8D9C3;
}

/* CashRegister : plus compact/discret pour ne pas alourdir l'écran dense de la
   caisse (beaucoup d'infos déjà affichées) — ton neutre gris-bleu. */
.cashdrawer .step-choice-chip {
    font-size: 11px;
    padding: 3px 10px;
    background-color: #EEF1F4;
    color: #4A5568;
    border: 1px solid #D8DEE4;
}

.ticket-box {
    border: 1px solid #f9ddcf;
    border-radius: 20px;
    margin-left: 10px;
    padding: 10px;
    height: 80vh;;
    max-height: 700px;
    width: 30vw;
    min-width: 300px;
    display: inline-block;
    vertical-align: bottom;
    position: relative;
    font-size: 11px;
}

.action-bar {
    background-color: white;
    margin: 0px 8px;
}

.action-bar-top {
    background-color: white;
    padding: 5px;
    margin-bottom: 0px !important;
}

.action-bar-middle {
    background-color: #3c3a3a;
    padding: 5px;
    margin-bottom: 0px !important;
}

.action-bar-bottom {
    margin-bottom: 0px !important;
    background-color: #4e4947;
    padding: 5px;
}

.background-color-bar {
    background-color: #4e4947 !important;
}

.cashdrawer::-webkit-scrollbar {
    width: 1em;
}

.cashdrawer::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(236, 13, 13, 0.3);
}

.cashdrawer::-webkit-scrollbar-thumb {
    background-color: #eac4a7;
    outline: 1px solid white;
}

.cashdrawer {
    height: calc(100vh - 100px);
}

.cashdrawer-displayer {

    background: url("../images/poshelper/cloud2.jpg") no-repeat scroll 0% 0% transparent;
    background-position: center;
    background-size: cover;
    min-height: 100%;
    padding: 50px;
}

.cashdisplayer-slider {

    border: 15px solid white;
    border-radius: 20px;

}

.chat-content {
    float: none;
    font-size: 12px;
    font-weight: 800;
}

.align-right {
    text-align: right;
}

.align-left {
    text-align: left;
}


.pdf-container {
    padding-bottom: 100% !important;
}

.map-style {
    border-radius: 10px;
    border: 1px solid #eac4a7;
    margin: auto;
}

.toast-info-light {
    background-color: rgba(93, 91, 234, 0.6) !important;
}

.toast-green {
    background-color: rgba(101, 193, 71, 0.3) !important;
    color: #424242 !important;
}

.toast-red {
    background-color: red !important;
}

.submitted-sale {
    position: absolute;
    top: calc(100vh / 2 - 200px);
    left: calc(100vw / 2 - 200px);
    background-color: rgba(208, 148, 73, 0.7);
    border-radius: 100%;
    padding: 180px 70px;
}

.submitted-sale-text {
    font-size: 35px;
    color: white;
    font-weight: 800;
    text-shadow: 1px 1px 1px red;
}

.submitted-sale-overlay {
    background: rgba(78, 75, 76, 0.5) !important;
}

.bar-update-title {
    font-size: 25px;
    color: red;
}

.button-pad {
    font-size: 20px;
    font-weight: 800;
    width: 68px;
    height: 68px;
}

.button-pad-tpe {
    font-size: 10px;
    font-weight: 600;
    width: 68px;
    height: 68px;
    padding: 3px;
}


.cloud-bg {
    background: url("../images/poshelper/cloud2.jpg") no-repeat scroll 0% 0% transparent;
    background-position: center;
    background-size: cover;
    height: 100vh;
}

.caisse-label {
    background-color: rgba(66, 165, 245, 0.7);
}

.caisse-title {
    color: #181a33 !important;
    text-shadow: 0px 2px 5px #dbe825, 0px 2px 10px #500909;
    text-transform: uppercase;
    font-weight: 900;
    font-size: 50px;
}

.caisse-logo {
    background: white;
    opacity: 50%;
    margin: 60px;
    border-radius: 20px;

}

.footer-aka {
    background-color: #785b5b !important;
    color: white;
}

.deposit-line-pair {
    background-color: rgba(178, 176, 195, 0.4);
    padding: 10px 2px;
}

.deposit-line-impair {
    background-color: rgba(239, 240, 241, 0.4);
    padding: 10px 2px;
}

.deposit-line-total {
    padding: 10px 2px;
}

.ui-itemspe-checked {
    border-radius: 12px !important;
    color: red;
    border: 2px solid #C6402B !important;
    background-color: #FBEAE6 !important;
    transition: border-color .12s ease, background-color .12s ease, transform .08s ease;
}
.ui-itemspe-checked:active {
    transform: scale(.97);
}


.ui-itemspe-unchecked {
    border-radius: 12px !important;
    transition: border-color .12s ease, background-color .12s ease, opacity .12s ease;
}

/* Step "removable" (composition de base, retirable) : inclus par défaut, le tap retire.
   Accent turquoise, distinct du chili des suppléments — deux mécaniques différentes
   (retirer vs ajouter) ne doivent pas se lire pareil du premier coup d'oeil. Tuiles
   volontairement plus grandes que les suppléments classiques : c'est la composition
   principale du produit, pas une option annexe. */
/* Taille et mise en page forcées en flex + box-sizing pour que toutes les tuiles retrait
   fassent EXACTEMENT la même taille, qu'il y ait une image ou non (ArticleItemProxyBox
   suit deux chemins très différents selon hadPicto() — voir les deux règles suivantes) :
   sans ce recadrage, le libellé "avec image" (.article-text-box, min-width 150px, 23px)
   déborde d'une tuile de 130px de large, et le libellé "sans image" (aucune classe,
   police par défaut minuscule) ne matche ni la taille ni la position du premier.
   `inline-flex`, pas `flex` : le widget pose déjà `display:inline-block` en style inline
   (ArticleItemProxyBox, constructeur) pour s'enchaîner avec ses voisins dans la grille —
   un `display:flex` (block-level) ici empilait donc chaque tuile seule sur sa ligne. */
.item-spe-box-removable {
    width: 150px !important;
    height: 150px !important;
    min-height: 150px !important;
    padding: 12px 8px !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}
.item-spe-box-removable .articlebox-image {
    width: 70px !important;
    height: 70px !important;
    min-height: 70px !important;
    flex: none;
}
/* Neutralise les règles historiques (largeur fixe, position relative décalée, tailles de
   police très disparates selon .article-text-box vs. libellé nu) pour un rendu identique
   dans les deux cas. */
.item-spe-box-removable .article-text-box,
.item-spe-box-removable .material-label:not(.spe-qte):not(.spe-del) {
    position: static !important;
    bottom: auto !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
    letter-spacing: normal !important;
    font-weight: 700 !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
    /* Un item sans image (ex. "Banane") a le libellé en blanc par défaut (pensé pour un
       fond sombre) — illisible sur le fond menthe clair du mode retrait. */
    color: #0F5445 !important;
}
.item-spe-box-removable.ui-itemspe-checked {
    border: 2.5px solid #1E8A72 !important;
    background-color: #E2F2ED !important;
}
.item-spe-box-removable.ui-itemspe-checked .spe-qte {
    background-color: #1E8A72 !important;
}
.item-spe-box-removable.ui-itemspe-checked .spe-del {
    color: #1E8A72 !important;
    border-color: #1E8A72 !important;
}
.item-spe-box-removable.ui-itemspe-unchecked {
    border: 1.5px dashed #D9D2C7 !important;
    background-color: #ffffff !important;
    opacity: .55;
}
.item-spe-box-removable.ui-itemspe-unchecked .article-text-box {
    text-decoration: line-through;
}

/* Badges quantité/suppression — un vrai bouton rond plutôt qu'un chiffre/croix flottants. */
.spe-qte {
    background-color: #C6402B;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
}
.spe-del {
    background-color: #ffffff;
    border: 1.5px solid #C6402B;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 13px;
    padding: 0;
    line-height: 15px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .15);
}

/* Récap en langage naturel sous la grille d'une étape "spéciale" (ajout ou retrait). */
.spe-recap {
    max-width: 850px;
    margin: 10px auto 0;
    font-size: 13px;
    color: #6E675B;
    font-style: italic;
    min-height: 18px;
}

/* Déclinaison au poids (boucherie) : "− 1,2 kg +", boutons rapides, prix calculé */
.spe-weight {
    max-width: 850px;
    margin: 15px auto 5px;
    text-align: center;
}

.spe-weight-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.spe-weight .spe-weight-btn {
    width: 80px;
    height: 80px;
    line-height: 80px;
    padding: 0;
    border-radius: 50%;
    font-size: 44px;
    font-weight: 700;
    background-color: #C62828;
    color: #FFFFFF;
}

/* Materialize "button.btn-flat:focus { background-color: transparent }" (0,2,1) l'emporte
   sinon au tap : le bouton perdait son fond rouge et son "−/+" blanc devenait invisible
   jusqu'à ce que le focus parte ailleurs. */
.spe-weight button.spe-weight-btn:focus,
.spe-weight button.spe-weight-btn:hover,
.spe-weight button.spe-weight-btn:active {
    background-color: #C62828;
    color: #FFFFFF;
}

.spe-weight button.spe-weight-preset:focus,
.spe-weight button.spe-weight-preset:hover,
.spe-weight button.spe-weight-preset:active {
    background-color: #FFFFFF;
    color: #C62828;
}

.spe-weight-value {
    min-width: 200px;
    font-size: 48px;
    font-weight: 700;
    color: #212121;
}

.spe-weight-presets {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 15px;
}

.spe-weight .spe-weight-preset {
    height: auto;
    min-height: 56px;
    padding: 0 24px;
    font-size: 22px;
    font-weight: 700;
    border: 2px solid #C62828;
    border-radius: 28px;
    background-color: #FFFFFF;
    color: #C62828;
    text-transform: none;
}

/* Total en gros, lisible à distance sur une borne (retour client : prix trop petit à 22px) */
.spe-weight-total {
    margin-top: 18px;
    font-size: 52px;
    font-weight: 800;
    line-height: 1.1;
    color: #C62828;
}

.spe-weight-total:empty {
    display: none;
}

.spe-weight-price {
    margin-top: 6px;
    font-size: 30px;
    font-weight: 600;
    color: #424242;
}

.display-cashregister-ticket {
    margin-left: 5px;
    border: 1px solid #e8e1e1;
    min-height: 400px;
    padding: 10px;
    border-radius: 20px;
    box-shadow: 0 2px 5px 0 rgb(84 64 218 / 36%), 0 2px 10px 0 rgb(50 75 206 / 12%);
}

.cr-slot-button {

    padding: 15px;
    border-radius: 5px;
    background-color: #524949;
    border: 1px solid #4a4343;
    font-weight: 800;
    color: white;
    margin: 3px;
    vertical-align: top;
    display: inline-block;
    box-shadow: 0px 2px 2px #a4a599;
    cursor: pointer;

}

.form-header-background {
    /*background-color: #0f45a7 !important;*/
    background-color: rgba(178, 176, 195, 0.4) !important;
    padding: 5px !important;
    font-size: 16px;
    text-transform: uppercase;
}


.article-box-noimg {
    margin-top: 2px;
    border-radius: 10px;
    background-color: #bd6845;
    padding: 15px 2px;
    color: white !important;
    width: 200px;
    height: 80px;
}

.spe-bloc {
    margin: 5px;
    vertical-align: top;
    display: inline-block;
    border: 1px dashed #e0dcdc;
    padding: 5px;
    border-radius: 5px;
}

.btn.later-button {
    height: 200px;
    width: 200px;
    margin-right: 20px;
    border-radius: 20px;
    color: white;
    background-color: #101644 !important;
}

.ticket-panel-container {
    height: 40vh;
}

/*.kiosk-ticket {*/
/*    position: fixed !important;*/
/*    top: 50% !important;*/
/*    left: 50% !important;*/
/*    transform: translate(-50%, -50%) !important; !* Centrage absolu sur l'écran *!*/
/*    width: 80% !important; !* Plus large pour accueillir confortablement 2 boutons côte à côte *!*/
/*    height: 63vh !important; !* Hauteur limitée pour rester accessible *!*/
/*    max-height: 80vh !important;*/
/*    background-color: #ffffff !important;*/
/*    z-index: 9999;*/
/*    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25) !important; !* Ombre profonde 3D *!*/
/*    border-radius: 35px !important; !* Bords bien arrondis *!*/
/*    display: flex;*/
/*    flex-direction: column !important;*/
/*    overflow: hidden !important; !* Empêche les éléments de dépasser des arrondis *!*/
/*}*/

/* MODALE INTERNE (La boîte blanche du panier) */
.kiosk-ticket {
    width: 80% !important;
    height: 63vh !important;
    max-height: 80vh !important;
    background-color: #ffffff !important;
    border-radius: 35px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
    display: flex;
    flex-direction: column !important;
    overflow: hidden !important;

}

/* CONTAINER PRINCIPAL (L'overlay sombre plein écran) */
.kiosk-ticket-main {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    background-color: rgba(0, 0, 0, 0.4) !important; /* Voile sombre semi-transparent */
    backdrop-filter: blur(5px); /* Effet de flou moderne */
    z-index: 9999 !important; /* Passe au-dessus de tout le reste de la borne */

    /* Flexbox pour centrer parfaitement la modale 'content' au milieu de l'écran */
    display: flex;
    justify-content: center !important;
    align-items: center !important;
}

.btn-floating.close-kiosk-ticket {

    width: 55px;
    height: 55px;
}


.kiosk-cartButton-text {
    text-shadow: 1px 1px 1px black;
}


.cart-qty {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 13px;
    color: black;
    border-radius: 100%;
    width: 20px;
    background-color: yellow;
    vertical-align: top;
}

/* Header de la popup */
.cart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 35px;
    border-bottom: 1px solid #f1f5f9;
}

.cart-header-title {
    font-size: 1.6rem !important;
    font-weight: 900 !important;
    color: #1e293b !important;
}


/* Bouton fermer (Toujours présent mais moins critique grâce au bouton du bas) */
.close-cart-btn {
    border-radius: 50% !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    box-shadow: none !important;
}

.kiosk-cartbutton-top {
    margin: 40px auto
}


.btn.suggest {
    background: #f0c14b;
    border-radius: 5px;
    text-transform: capitalize;
    margin-bottom: 5px;
}

.default-pres-kiosk-band {
    color: white;
    position: absolute;
    text-align: center;
    bottom: 0;
    letter-spacing: -1px;
    font-weight: 800;
    font-size: 70px;
    text-transform: uppercase;
    padding-top: 100px;
    padding-bottom: 100px;

    background-color: #ffc222;
    box-shadow: 0 0 5px 5px black;
    margin: 150px 100px;
    width: calc(100% - 200px)

}

/* Fond de la borne avec un léger dégradé */
.take-away-mode-kiosk {
    /*background: linear-gradient(180deg, #ffffff 0%, #f3f3f3 100%);*/
    /*height: 100vh;*/
    /*display: flex;*/
    /*flex-direction: column;*/
    /*justify-content: space-between; !* Espace les éléments entre le haut et le bas *!*/
    /*padding: 60px 0;*/
}


/* Footer de la borne */
.kiosk-footer {
    font-size: 1.2rem;
    color: #bbb;
    padding-bottom: 20px;
}

/* --- ADAPTATION DE LA MODALE POUR LA FIDELITE --- */
.loyalty-popup-content {
    width: 500px !important; /* Plus étroite que le panier, idéale pour un clavier */
    height: auto !important;
    max-height: 85vh !important;
    background: white;
}

.loyalty-body {
    padding: 30px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.loyalty-subtitle {
    font-size: 1.05rem !important;
    color: #64748b !important;
    text-align: center;
    margin-bottom: 25px !important;
    line-height: 1.4 !important;
}

/* --- CHAMP DE Saisie GÉANT --- */
.kiosk-loyalty-input {
    width: 100% !important;
    margin-bottom: 25px !important;
}

.kiosk-loyalty-input input {
    font-size: 2.2rem !important; /* Chiffres très gros et lisibles */
    font-weight: 900 !important;
    color: #1e293b !important;
    text-align: center !important;
    letter-spacing: 4px !important;
    border-bottom: 2.5px solid #cbd5e1 !important;
    height: 60px !important;
    background-color: transparent !important;
}

/* --- GRILLE DU PAVÉ NUMÉRIQUE (3 colonnes) --- */
.numpad-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 15px !important;
    width: 100% !important;
    max-width: 320px !important;
    margin: 0 auto 30px auto !important;
}

/* Bouton individuel du pavé */
.btn.numpad-btn {
    background-color: #f1f5f9 !important; /* Gris clair neutre */
    color: #1e293b !important;
    font-size: 1.8rem !important;
    font-weight: 800 !important;
    height: 75px !important;
    width: 75px !important;
    border-radius: 50% !important; /* Boutons parfaitement circulaires */
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
    transition: background-color 0.15s ease, transform 0.1s ease;
}

/* Icônes spécifiques retour arrière / reset */
.btn.numpad-btn i {
    font-size: 1.8rem !important;
    color: #475569 !important;
    line-height: 75px !important;
}

/* Effet tactile au toucher/clic */
.btn.numpad-btn:active {
    background-color: #cbd5e1 !important; /* Devient plus sombre */
    transform: scale(0.92); /* Effet d'enfoncement physique */
}

/* Bouton Valider en bas */
.btn.loyalty-action-btn {
    width: 100% !important;
    max-width: 320px !important;
    height: 60px !important;
    line-height: 60px !important;
    border-radius: 30px !important;
    font-size: 1.2rem !important;
}