*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
}

/* ========================================
   MENU MOBILE ANIMATIONS
   ======================================== */

/* Hamburger icon animation */
.hamburger-icon {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 28px;
    height: 24px;
    cursor: pointer;
}

.hamburger-line {
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #f43f5e 0%, #fb923c 100%);
    border-radius: 3px;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transform-origin: center;
}

/* Animation du hamburger en X quand le menu est ouvert */
[aria-expanded="true"] .hamburger-line:nth-child(1) {
    transform: translateY(10.5px) rotate(45deg);
}

[aria-expanded="true"] .hamburger-line:nth-child(2) {
    opacity: 0;
    transform: translateX(20px);
}

[aria-expanded="true"] .hamburger-line:nth-child(3) {
    transform: translateY(-10.5px) rotate(-45deg);
}

/* Animation du menu slide depuis la droite */
#mobileNav.menu-open {
    transform: translateX(0);
}

/* Animation de l'overlay */
#mobileNavOverlay.overlay-visible {
    opacity: 1;
}

/* Animation en cascade des items du menu */
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Applique l'animation avec délai progressif */
.mobile-nav-item {
    animation: slideInRight 0.4s ease-out forwards;
}

.mobile-nav-item:nth-child(1) { animation-delay: 0.05s; }
.mobile-nav-item:nth-child(2) { animation-delay: 0.1s; }
.mobile-nav-item:nth-child(3) { animation-delay: 0.15s; }
.mobile-nav-item:nth-child(4) { animation-delay: 0.2s; }
.mobile-nav-item:nth-child(5) { animation-delay: 0.25s; }
.mobile-nav-item:nth-child(6) { animation-delay: 0.3s; }
.mobile-nav-item:nth-child(7) { animation-delay: 0.35s; }
.mobile-nav-item:nth-child(8) { animation-delay: 0.4s; }
.mobile-nav-item:nth-child(9) { animation-delay: 0.45s; }
.mobile-nav-item:nth-child(10) { animation-delay: 0.5s; }

/* Réinitialise l'animation quand le menu est fermé */
#mobileNav:not(.menu-open) .mobile-nav-item {
    animation: none;
    opacity: 0;
}

/* Animation hover subtile pour les liens */
.mobile-nav-item a {
    position: relative;
    overflow: hidden;
}

.mobile-nav-item a::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(251, 146, 60, 0.1), transparent);
    transition: left 0.5s ease;
}

.mobile-nav-item a:hover::before {
    left: 100%;
}

/* Amélioration de la performance avec will-change */
#mobileNav,
#mobileNavOverlay,
.hamburger-line,
.mobile-nav-item {
    will-change: transform, opacity;
}

/* Reset will-change après animation pour optimiser les performances */
#mobileNav.menu-closed,
#mobileNavOverlay.overlay-hidden {
    will-change: auto;
}
.primary{

    background: #fff;
    /* Le parent est blanc */
}

.roboto-title {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

.qwigley-regular {
  font-family: "Qwigley", cursive;
  font-weight: 400;
  font-style: normal;
}

.special-offer {
    /* background: linear-gradient(90deg, #003A61 0%, #ffffff 100%); */
      background-image: url("../images/smoke-NN2merp.jpg");
    color: #fff;
     filter: brightness(1.3) opacity(0.8); /* Atténue l'image */
    /* On affiche une portion du dégradé selon l'index */
    background-size: cover;
    background-repeat: no-repeat;
    /* Par défaut, première portion */
    background-position-x: 0%;
    transition: background-position-x 0.5s;
    padding: 10px 20px;
    border-radius: 25px;
}




.gradient-child {
    /* Dégradé horizontal orange -> rose */
    background: linear-gradient(90deg, #FE9D3E 0%, #EE244B 100%);
   
  
    color: #fff;
    /* On affiche une portion du dégradé selon l'index */
    background-size: 700% 100%;
    background-repeat: no-repeat;
    /* Par défaut, première portion */
    background-position-x: 0%;
    transition: background-position-x 0.5s;
}

/* Exemple pour 7 enfants : chaque enfant reçoit une portion du dégradé */
.gradient-child:nth-child(1) { background-position-x: 0%; }
.gradient-child:nth-child(2) { background-position-x: 16.6%; }
.gradient-child:nth-child(3) { background-position-x: 33.2%; }
.gradient-child:nth-child(4) { background-position-x: 49.8%; }
.gradient-child:nth-child(5) { background-position-x: 66.4%; }
.gradient-child:nth-child(6) { background-position-x: 83%; }
.gradient-child:nth-child(7) { background-position-x: 100%; }


.gradient-title-child {
    /* Dégradé horizontal orange -> rose */
    background: linear-gradient(90deg, #FE9D3E 0%, #EE244B 100%);
    color: #fff;
    /* On affiche une portion du dégradé selon l'index */
    background-size: 700% 100%;
    background-repeat: no-repeat;
    /* Par défaut, première portion */
    background-position-x: 0%;
    transition: background-position-x 0.5s;
}

/* Exemple pour 7 enfants : chaque enfant reçoit une portion du dégradé */
.gradient-title-child:nth-child(1) { background-position-x: 0%; }
.gradient-title-child:nth-child(2) { background-position-x: 16.6%; }
.gradient-title-child:nth-child(3) { background-position-x: 33.2%; }
.gradient-title-child:nth-child(4) { background-position-x: 49.8%; }
.gradient-title-child:nth-child(5) { background-position-x: 66.4%; }
.gradient-title-child:nth-child(6) { background-position-x: 83%; }
.gradient-title-child:nth-child(7) { background-position-x: 100%; }

.parent {
display: grid;
grid-template-columns: repeat(11, 1fr);
grid-template-rows: repeat(7, 1fr);
grid-column-gap: 4px;
grid-row-gap: 4px;
}

.div1{
    background-color: pink;
}

.div1 { grid-area: 1 / 1 / 2 / 12; }
.div2 { grid-area: 7 / 1 / 8 / 12; }
.div3 { grid-area: 2 / 1 / 7 / 8; }
.div4 { grid-area: 2 / 8 / 7 / 12; }

.toast {
      animation: slideIn 0.5s forwards, fadeOut 0.5s forwards 3s;
    }
    @keyframes slideIn {
      from { transform: translateX(100%); opacity: 0; }
      to { transform: translateX(0); opacity: 1; }
    }
    @keyframes fadeOut {
      to { opacity: 0; }
    }


.card{
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column  ;
    justify-content: space-between;
}

.card .imgBx{
    position: relative;
    width: 100%;
    height: 100%;
    /* height: 240px; */
    border-radius: 15px;
    background-image: url("../images/yoomi-face-nMwWRXv.jpg");
    background-size: cover;
}

.card .imgBx::before{

  content: '';
  position: absolute;
  bottom: -1px;
  left: 55%;
  width: 20px;
  height: 20px;
  background: transparent;
  border-radius: 50%;
  box-shadow: -4px 5px 0 #d9dae1;
}

/* .card .imgBx::after{

  content: '';
  position: absolute;
  bottom: 70px;
  left: 0;
  width: 20px;
  height: 20px;
  background: transparent;
  border-radius: 50%;
  box-shadow: -10px 10px 0 white;
} */

.card .content{
  position: relative;
  width: 100%;
  /* height: 150px; */
  height: 0px;
  background: transparent;
  border-radius: 15px;
  border-top-left-radius: 0%;
}

.card .content .price {
  position: absolute;
  /* top: -80px ; */
  top: -18rem ;
  height: 18.5rem;
  width: 55%;
  /* width: 50%; */
  /* background: linear-gradient(90deg, #ebecf4 0%, #f7e6e9 100%); */
  background: transparent;
  backdrop-filter: blur(10px);
  /* height: 80px; */
  border-top: 10px solid #f1e8ee;
  border-right: 10px solid #f1e9ee;
  border-top-right-radius: 25px;
  border-bottom-left-radius: 15px;

}

.card .content .price::before {
  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  background: transparent;
  border-radius: 50%;
  box-shadow: -10px -10px 0 #f5f5fc;
}

/* .card .content .price::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: -25px;
  width: 25px;
  height: 25px;
  background: transparent;
  border-radius: 50%;
  box-shadow: -20px 10px 0 white;
} */

/* Styles pour les modales POS */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content {
    max-width: 90vw;
    max-height: 90vh;
    overflow-y: auto;
    z-index: 1000;
}

/* Animation pour les messages flash */
@keyframes slideInFromTop {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.flash-message {
    animation: slideInFromTop 0.3s ease-out;
}

/* Flash modal générique (front + POS) */
.flash-modal {
    position: fixed;
    inset: 0;
    z-index: 1100;
    align-items: flex-start;
    justify-content: center;
    padding-top: 6rem; /* espace sous le header */
}
.flash-modal.hidden { display: none; }

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.25);
    backdrop-filter: blur(2px);
}

.flash-modal-content {
    position: relative;
    width: min(480px, 92%);
    background: #fff;
    border-radius: 1rem;
    padding: 1.25rem 1.25rem 1rem;
    box-shadow: 0 8px 32px -6px rgba(0,0,0,0.25);
    animation: slideInFromTop 0.35s cubic-bezier(.34,1.56,.64,1);
    display: flex;
    flex-direction: column;
    gap: .75rem;
    border: 1px solid #e5e7eb;
}

.flash-modal-content.flash-success { border-color: #bbf7d0; background: linear-gradient(135deg,#ecfdf5,#ffffff); }
.flash-modal-content.flash-error { border-color: #fecaca; background: linear-gradient(135deg,#fef2f2,#ffffff); }
.flash-modal-content.flash-warning { border-color: #fde68a; background: linear-gradient(135deg,#fffbeb,#ffffff); }
.flash-modal-content.flash-info { border-color: #bfdbfe; background: linear-gradient(135deg,#eff6ff,#ffffff); }

.flash-header { display: flex; align-items: center; gap: .5rem; }
.flash-icon { width: 24px; height: 24px; opacity: .85; }
.flash-title { font-size: 1rem; font-weight: 600; margin: 0; }
.flash-message { font-size: .875rem; line-height: 1.4; margin: 0; }
.flash-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .25rem; }
.flash-btn { font-size: .75rem; padding: .5rem .9rem; border-radius: 9999px; font-weight: 500; cursor: pointer; border: 1px solid transparent; background: #f3f4f6; }
.flash-btn-primary { background: #111827; color: #fff; }
.flash-btn-primary:hover { background: #1f2937; }
.flash-btn-secondary { background: #f3f4f6; }
.flash-btn-secondary:hover { background: #e5e7eb; }
.flash-close-btn { position: absolute; top: .65rem; right: .65rem; background: transparent; border: none; cursor: pointer; padding: .25rem; border-radius: .5rem; }
.flash-close-btn:hover { background: rgba(0,0,0,0.04); }

/* Entrée / sortie animées (contrôleur Stimulus) */
.fade-in { animation: fadeIn .25s ease-out; }
.fade-out { animation: fadeOut .25s ease-in forwards; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-4px);} to { opacity: 1; transform: translateY(0);} }
@keyframes fadeOut { to { opacity: 0; transform: translateY(-4px);} }

/* Améliorations pour le formulaire de quantité */
.quantity-input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Indicateur de stock */
.stock-low {
    color: #ef4444;
    font-weight: 600;
}

.stock-warning {
    color: #f59e0b;
    font-weight: 600;
}

.stock-ok {
    color: #10b981;
    font-weight: 600;
}

/* Amélioration des turbo-frame */
turbo-frame {
    display: block;
}

turbo-frame[busy] {
    opacity: 0.7;
    pointer-events: none;
}

/* Styles pour l'édition de quantité */
.quantity-display {
    transition: all 0.2s ease;
    border-radius: 4px;
}

.quantity-display:hover {
    background-color: #dbeafe !important;
    transform: scale(1.05);
}

/* Amélioration visuelle des lignes de commande */
.order-line-row:hover {
    background-color: #f8fafc;
}

/* Le bouton actions est toujours visible, mais plus discret */
.order-line-actions button {
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.order-line-row:hover .order-line-actions button {
    opacity: 1;
}

/* Effet clic boutons POS */
.button.pos-pressed, .pos-pressed.button {
  transform: scale(0.94);
  filter: brightness(0.9);
  transition: transform 60ms ease, filter 120ms ease;
}
.button { transition: transform 80ms ease, filter 120ms ease; }

/* Surface de fond du tableau de bord (non blanche) */
.dashboard-surface {
    position: relative;
    border-radius: 12px;
    padding: 16px; /* fallback si Tailwind n'est pas dispo */
    /* Dégradés doux superposés */
    background:
        radial-gradient(1200px 600px at 0% 0%, rgba(99, 102, 241, 0.08), transparent 60%),
        radial-gradient(1200px 600px at 100% 100%, rgba(14, 165, 233, 0.08), transparent 60%),
        linear-gradient(180deg, #eef2ff 0%, #f1f5f9 100%);
}

.dashboard-surface::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    /* Motif discret en points pour texturer légèrement */
    background-image: radial-gradient(rgba(30, 41, 59, 0.06) 1px, transparent 1px);
    background-size: 14px 14px;
    pointer-events: none;
}

/* ========================================
   BANDEAU COOKIES
   ======================================== */

/* Animation slide-up pour l'apparition du bandeau */
@keyframes slideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.animate-slide-up {
    animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Animation slide-out pour la fermeture du bandeau */
@keyframes slideOut {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(100%);
        opacity: 0;
    }
}

.animate-slide-out {
    animation: slideOut 0.3s cubic-bezier(0.4, 0, 0.6, 1);
}

/* ========================================
   POS RESPONSIVE
   ======================================== */

/* -- Grille principale : forcer la hauteur à 100vh sans débordement --
   overflow: hidden empêche le scroll de page ; tout se scroll
   à l'intérieur des cellules de grille. */
body.pos-page {
    overflow: hidden;
}

/* ---- Zoom proportionnel de toute l'interface POS ----
   Principe : on scale l'ensemble via zoom pour préserver les proportions.
   Seuils choisis pour ne pas toucher les écrans Full HD (1920) ni les
   laptops 1440px qui sont la résolution de bureau la plus courante.
   ---------------------------------------------------- */
@media (max-width: 1280px) {
    body.pos-page {
        zoom: 0.90;
        width: calc(100vw / 0.90);
        height: calc(100vh / 0.90);
    }
}

@media (max-width: 1100px) {
    body.pos-page {
        zoom: 0.82;
        width: calc(100vw / 0.82);
        height: calc(100vh / 0.82);
    }
}

@media (max-width: 960px) {
    body.pos-page {
        zoom: 0.72;
        width: calc(100vw / 0.72);
        height: calc(100vh / 0.72);
    }
}

/* Hauteur d'écran courte (ex : laptop 768px de haut) */
@media (max-height: 768px) {
    body.pos-page {
        zoom: 0.88;
        width: calc(100vw / 0.88);
        height: calc(100vh / 0.88);
    }
}

@media (max-height: 650px) {
    body.pos-page {
        zoom: 0.76;
        width: calc(100vw / 0.76);
        height: calc(100vh / 0.76);
    }
}

/* -- Barre d'actions bas de page : scroll horizontal de secours --
   Si malgré le zoom il reste trop de boutons, ils défilent horizontalement
   plutôt que d'être coupés. */
body.pos-page #listButtonPos {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
    flex-wrap: nowrap;
    justify-content: flex-start;
}
body.pos-page #listButtonPos::-webkit-scrollbar { height: 3px; }
body.pos-page #listButtonPos::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}
body.pos-page #listButtonPos .button,
body.pos-page #listButtonPos form {
    flex-shrink: 0;
    white-space: nowrap;
}

/* -- Contraindre les cellules de grille à leur zone allouée --
   min-height: auto (défaut) laisse les items dépasser leur ligne de grille.
   min-height: 0 force le respect strict de la zone allouée. */
body.pos-page #contextBox {
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}
body.pos-page #cartArticlesContent {
    min-height: 0;
    overflow: hidden;
}
body.pos-page #cartArticlesContent > turbo-frame {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
body.pos-page #contextBox > turbo-frame {
    height: 100%;
    min-height: 0;
}
body.pos-page #contextBox turbo-frame > div.h-full {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
body.pos-page #contextBox turbo-frame > div.h-full > div.flex-1 {
    overflow-y: auto;
    min-height: 0;
}