/* =========================================================
   La Bonne Baguette - Carrousels publics
   Fichier commun pour tous les carrousels cote utilisateur.
   Charge par chaque page publique JUSTE AVANT public.css (lbbAsset, version
   automatique). Plus d'@import dans public.css depuis le 12/11/2026 : un @import
   bloque le rendu en serie et sa version (?v=8) etait a bumper a la main.
   ========================================================= */

/* ---------------------------------------------------------
   Container principal (largeur 80% page)
   --------------------------------------------------------- */
.public-carrousel {
    width: 80%;
    max-width: 1200px;
    margin: 1.5rem auto;
    position: relative;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-sizing: border-box;
    outline: none;
    padding-bottom: 0.5rem;
}
.public-carrousel:focus-visible {
    box-shadow: 0 0 0 3px rgba(222,1,69,0.25);
    border-radius: 8px;
}

.public-carrousel .carrousel-title {
    margin: 0;
    padding: 0.8rem 5.5rem 0.5rem 0.2rem;   /* place reservee a droite pour les fleches */
    font-size: 1.2rem;
    color: #DE0145;
}

/* ---------------------------------------------------------
   Viewport scrollable horizontal (cree par JS)
   --------------------------------------------------------- */
.public-carrousel .carrousel-viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    /* Barre de defilement masquee : navigation par les fleches + les points (.carrousel-dots) */
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* anciens IE/Edge */
}
.public-carrousel .carrousel-viewport::-webkit-scrollbar { width: 0; height: 0; display: none; } /* Chrome/Safari */

/* ---------------------------------------------------------
   Track : flexbox horizontal, items cote a cote
   --------------------------------------------------------- */
.public-carrousel .carrousel-track {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    align-items: stretch;
}

/* ---------------------------------------------------------
   ITEM : image plein cadre, contenu superpose, excedent coupe
   --------------------------------------------------------- */
.public-carrousel .carrousel-item {
    flex: 0 0 220px;
    height: 320px;
    scroll-snap-align: start;
    position: relative;            /* anchor pour image et overlays */
    overflow: hidden;              /* coupe l'excedent de l'image */
    border-radius: 6px;
    border: 1px solid #F8C7D2;
    background: #ffffff;           /* fallback si pas d'image */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;     /* contenu pousse vers le bas */
    transition: transform .15s, box-shadow .15s;
}
.public-carrousel .carrousel-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.09);
}

/* L'IMAGE remplit toute la carte et est rognee si elle deborde */
.public-carrousel .carrousel-item img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;             /* COVER -> remplit + crop l'excedent */
    object-position: center;
    z-index: 0;
    margin: 0;
    user-select: none;
    -webkit-user-drag: none;
    transition: transform 0.4s ease;
}
/* Zoom doux de la photo au survol (l'overflow:hidden de l'item rogne l'excedent) */
@media (hover: hover) {
    .public-carrousel .carrousel-item:hover img {
        transform: scale(1.06);
    }
}
@media (prefers-reduced-motion: reduce) {
    .public-carrousel .carrousel-item img { transition: none; }
    .public-carrousel .carrousel-item:hover img { transform: none; }
}

/* Degrade sombre en bas pour rendre le texte lisible sur n'importe quelle image */
.public-carrousel .carrousel-item::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 70%;
    background: linear-gradient(to top,
        rgba(0,0,0,0.85) 0%,
        rgba(0,0,0,0.55) 35%,
        rgba(0,0,0,0.15) 70%,
        transparent 100%);
    z-index: 1;
    pointer-events: none;
}

/* TOUS les enfants (texte, boutons, etc.) AU-DESSUS de l'image et du degrade */
.public-carrousel .carrousel-item > *:not(img) {
    position: relative;
    z-index: 2;
}

/* Titre et paragraphes en blanc, avec text-shadow pour la lisibilite */
.public-carrousel .carrousel-item h3 {
    margin: 0.4rem 0.8rem 0.2rem;
    font-size: 1rem;
    font-weight: 700;
    color: #FFFFFF;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
.public-carrousel .carrousel-item p {
    margin: 0.15rem 0.8rem;
    font-size: 0.85rem;
    color: #FFFFFF;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.public-carrousel .carrousel-item p strong {
    color: #FFFFFF;
    font-size: 1rem;
}

/* Boutons "Ajouter au panier" et "Reserver dans cette boutique" */
.public-carrousel .carrousel-item .add-to-panier,
.public-carrousel .carrousel-item .btn-reserver {
    background: #DE0145;
    color: #fff;
    border: none;
    padding: 0.55rem 0.9rem;
    margin: 0.5rem 0.6rem 0.7rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    display: inline-block;
    transition: background .15s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.public-carrousel .carrousel-item .add-to-panier:hover,
.public-carrousel .carrousel-item .btn-reserver:hover {
    background: #B30037;
}
.public-carrousel .carrousel-item .add-to-panier:disabled {
    opacity: 0.6;
    cursor: wait;
}

/* Bloc "horaires" boutique : panneau blanc lisible sur l'image */
.public-carrousel .carrousel-item details {
    margin: 0.3rem 0.6rem;
    font-size: 0.78rem;
}
.public-carrousel .carrousel-item details summary {
    cursor: pointer;
    color: #FFFFFF;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.public-carrousel .carrousel-item details ul {
    list-style: none;
    padding: 0.4rem 0.6rem;
    margin: 0.3rem 0 0;
    background: rgba(255,255,255,0.95);
    border-radius: 4px;
    color: #1a1a1a;
    text-shadow: none;
}
.public-carrousel .carrousel-item details ul li {
    display: flex;
    justify-content: space-between;
    padding: 0.1rem 0;
    font-size: 0.76rem;
}

/* Bloc quantite (reservation.php) : panneau blanc lisible */
.public-carrousel .carrousel-item .qty-row {
    background: rgba(255,255,255,0.95);
    border-radius: 4px;
    padding: 0.4rem 0.6rem;
    margin: 0.4rem 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.public-carrousel .carrousel-item .qty-row label {
    color: #DE0145;
    font-weight: 600;
    text-shadow: none;
    margin: 0;
    font-size: 0.85rem;
}
.public-carrousel .carrousel-item .qty-row input {
    width: 60px;
    padding: 0.3rem;
    text-align: center;
    border: 1px solid #F8C7D2;
    border-radius: 4px;
    font-size: 0.95rem;
}

/* ---------------------------------------------------------
   Indicateurs (badges) : produit dans le panier / boutique selectionnee
   --------------------------------------------------------- */
.public-carrousel .carrousel-item.has-quantity {
    box-shadow: inset 0 0 0 3px #f39c12;
}
.public-carrousel .carrousel-item.has-quantity::before {
    content: "Dans votre panier";
    position: absolute;
    top: 8px;
    right: 8px;
    background: #f39c12;
    color: #fff;
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    z-index: 3;
    text-shadow: none;
}
.public-carrousel .carrousel-item.is-current-shop {
    box-shadow: inset 0 0 0 3px #27ae60;
}
.public-carrousel .carrousel-item .current-shop-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: #27ae60;
    color: #fff;
    padding: 0.25rem 0.7rem;
    border-radius: 12px;
    font-size: 0.78rem;
    font-weight: 600;
    z-index: 5;
    text-shadow: none;
}

/* ---------------------------------------------------------
   Fleches de navigation : en haut a droite, alignees avec le titre.
   Cercle a contour framboise + chevron CSS qui se remplit et glisse au survol.
   --------------------------------------------------------- */
.carrousel-prev, .carrousel-next {
    position: absolute;
    top: 0.5rem;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    color: #DE0145;
    border: 1.5px solid #DE0145;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0;                 /* masque le caractere fleche du markup (←/→) */
    z-index: 10;
    transition: background .18s ease, color .18s ease, border-color .18s ease, opacity .15s ease, transform .12s ease;
}
.carrousel-prev::before, .carrousel-next::before {
    content: "";
    width: 8px;
    height: 8px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transition: transform .2s ease;
}
.carrousel-prev::before { transform: rotate(-135deg); margin-left: 3px; }
.carrousel-next::before { transform: rotate(45deg);   margin-right: 3px; }
.carrousel-prev:hover, .carrousel-next:hover { background: #DE0145; color: #fff; }
.carrousel-prev:hover::before { transform: rotate(-135deg) translate(-1.5px, -1.5px); }
.carrousel-next:hover::before { transform: rotate(45deg)   translate(1.5px, 1.5px); }
.carrousel-prev:active, .carrousel-next:active { transform: scale(0.92); }
.carrousel-prev:focus-visible, .carrousel-next:focus-visible { outline: 2px solid #DE0145; outline-offset: 2px; }
.carrousel-prev:disabled, .carrousel-next:disabled {
    opacity: 0.3;
    cursor: default;
    background: transparent;
    color: #DE0145;
}
.carrousel-prev:disabled:hover, .carrousel-next:disabled:hover { background: transparent; color: #DE0145; }
.carrousel-prev:disabled:hover::before { transform: rotate(-135deg); }
.carrousel-next:disabled:hover::before { transform: rotate(45deg); }
/* Rien a faire defiler (classe posee par public-carrousel.js) : pas de fleches */
.carrousel--tout-visible > .carrousel-prev,
.carrousel--tout-visible > .carrousel-next { display: none; }
.carrousel-prev { right: 2.9rem; left: auto; }
.carrousel-next { right: 0.2rem; }
@media (prefers-reduced-motion: reduce) {
    .carrousel-prev, .carrousel-next, .carrousel-prev::before, .carrousel-next::before { transition: none; }
    .carrousel-prev:hover::before { transform: rotate(-135deg); }
    .carrousel-next:hover::before { transform: rotate(45deg); }
}

/* Indicateur "X produits - faites defiler" sous le track */
.carrousel-indicator {
    display: none;   /* indice "X produits - faites defiler" masque (demande client) */
    text-align: center;
    font-size: 0.82rem;
    color: #888;
    padding: 0.3rem 0.4rem 0.1rem;
    min-height: 1.2em;
}

/* ---------------------------------------------------------
   Points de navigation (remplacent la barre de defilement)
   --------------------------------------------------------- */
.carrousel-dots {
    display: none;   /* pastilles de navigation masquees (demande client) - fleches + swipe conserves */
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    padding: 0.5rem 0.6rem 0.15rem;
    list-style: none;
}
.carrousel-dots:empty { display: none; }       /* pas de points si tout tient a l'ecran */
.carrousel-dots .carrousel-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: #F8C7D2;                        /* inactif : rose pale */
    cursor: pointer;
    transition: background .2s ease, width .2s ease, transform .15s ease;
}
.carrousel-dots .carrousel-dot:hover { background: #F0A0B4; transform: scale(1.15); }
.carrousel-dots .carrousel-dot.is-active {
    background: #DE0145;                        /* actif : framboise, en pilule */
    width: 22px;
}
.carrousel-dots .carrousel-dot:focus-visible {
    outline: 2px solid #DE0145;
    outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    .carrousel-dots .carrousel-dot { transition: none; }
}

/* ---------------------------------------------------------
   Flash "+1 ajoute au panier" et badge pulse (libelle reel accentue cote JS)
   --------------------------------------------------------- */
/* ===== Variante par defaut (grid produit.php / categorie.php) =====
   Position absolue DANS la card. Simple, sobre, version d'origine. */
.panier-message {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    background: rgba(222,1,69,0.95);
    color: #fff;
    padding: 0.55rem 1rem;
    border-radius: 20px;
    z-index: 30;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s, transform .2s;
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
    text-shadow: none;
}
.panier-message.is-visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* ===== Variante "flottante" (carrousels) =====
   Position: fixed sur le body, sort de tout overflow:hidden des cards.
   Plus visible : triple anneau framboise + bounce. */
.panier-message--floating {
    position: fixed;
    z-index: 99999;
    background: #DE0145;
    padding: 0.7rem 1.2rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.3px;
    box-shadow:
        0 4px 14px rgba(0,0,0,0.1),
        0 0 0 4px rgba(255,255,255,0.95),
        0 0 0 6px rgba(222,1,69,0.35);
    transform: translate(-50%, -50%) scale(0.6);
    transition:
        opacity 0.2s ease,
        transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.panier-message--floating.is-visible {
    transform: translate(-50%, -50%) scale(1);
    animation: lbb-panier-bounce 0.6s ease-out;
}
@keyframes lbb-panier-bounce {
    0%   { transform: translate(-50%, -50%) scale(0.5) rotate(-8deg); }
    50%  { transform: translate(-50%, -50%) scale(1.15) rotate(3deg); }
    75%  { transform: translate(-50%, -50%) scale(0.95) rotate(-2deg); }
    100% { transform: translate(-50%, -50%) scale(1)    rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
    .panier-message,
    .panier-message--floating,
    .panier-message.is-visible,
    .panier-message--floating.is-visible { animation: none !important; transition: opacity 0.2s !important; }
}

/* ---------------------------------------------------------
   Pastilles allergenes (icones reglementaires INCO)
   Utilisees dans : carrousel item, grid produit, panier, reservation, admin

   Pastilles blanches rondes en overlay sur la carte produit,
   juste sous le prix. Tooltip custom au survol qui affiche
   le nom de l allergene.
   --------------------------------------------------------- */
.allergenes-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 0;
    margin: 0.4rem 0 0.5rem;
    list-style: none;
    justify-content: center;
}
.allergenes-icons .allergene-tag {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: transparent;        /* PAS de rond blanc */
    cursor: help;
}
.allergenes-icons .allergene-tag img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    /* plus d'ombre : les icones sont desormais sur fond clair */
}

/* Effet hover sur la pastille (legere mise en avant) */
.allergenes-icons .allergene-tag {
    transition: transform .12s;
}
.allergenes-icons .allergene-tag:hover {
    transform: scale(1.2);
}

/* Pour la carte du carrousel : la liste doit etre au-dessus du gradient,
   au meme niveau que le texte/bouton */
.public-carrousel .carrousel-item .allergenes-icons,
.produit-tile .allergenes-icons {
    position: relative;
    z-index: 3;
}
/* Variante "inline" pour panier/reservation (fond clair, pas besoin du blanc opaque) */
.allergenes-icons--inline {
    justify-content: flex-start;
    gap: 3px;
    margin: 0.3rem 0 0;
}
.allergenes-icons--inline .allergene-tag {
    width: 26px;
    height: 26px;
    box-shadow: none;
    background: #ffffff;
    border: 1px solid #F8C7D2;
}
.allergenes-icons--inline .allergene-tag img { width: 20px; height: 20px; }

.panier-count {
    display: inline-block;
    min-width: 1.4em;
    padding: 0 0.3em;
    text-align: center;
    transition: transform .2s;
}
.panier-count.is-pulse {
    animation: panier-pulse .5s cubic-bezier(.3, 1.4, .5, 1);
}
@keyframes panier-pulse {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.6); color: #FFE082; text-shadow: 0 0 10px rgba(255,224,130,0.9); }
    100% { transform: scale(1); }
}

/* Clone d'image qui "vole" vers le panier (cree par flyToCart en JS) */
.lbb-fly-img {
    position: fixed;
    z-index: 1200;                 /* au-dessus du header sticky (1100) */
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 8px 22px rgba(0,0,0,0.1);
    pointer-events: none;
    margin: 0;
}

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */
@media (max-width: 768px) {
    .public-carrousel { width: 95%; }
    .public-carrousel .carrousel-item {
        flex: 0 0 70vw;
        height: 280px;
    }
    .carrousel-prev, .carrousel-next {
        width: 38px;      /* 30 px se rataient au pouce */
        height: 38px;
    }
    .carrousel-prev { right: 3rem; left: auto; }
    .carrousel-next { right: 0.2rem; }
}