pourquoi la mise à jour des notifs dans le NavButton en direct ne fonctionne pas : Vous utilisez `addCartUpdateListener` et `removeCartUpdateListener` pour gérer les mises à jour du panier. Si ces fonctions ne sont pas correctement définies ou si elles ne sont pas appelées au bon moment, cela pourrait également causer des problèmes. Pour résoudre ce problème, je vous recommande de vérifier chacun de ces points. Vous pouvez utiliser des outils de débogage ou ajouter des logs dans votre code pour voir où le processus échoue. Si vous avez besoin d'aide pour déboguer un de ces points, n'hésitez pas à me donner plus de détails sur votre code
import { useEffect, useState } from 'react'
import { motion } from 'framer-motion';
import { easeOut } from 'framer-motion/dom';
import { setCookie, getCookie } from '../../cookies/CookiesLib';
import { addCartUpdateListener, removeCartUpdateListener } from  '../../pages/Billeterie/cartEvent.tsx';


type Props = {
    isCart? : boolean
    setIsOpen: (isOpen : boolean) => void;
}

export default function NavButton({ isCart, setIsOpen }: Props) {
  const [cartItemCount, setCartItemCount] = useState<number>(0);

  const updateCartItemCount = () => {
    const cartItems = getCookie('cart');
    const total = cartItems ? cartItems.reduce((sum: number, item: { quantity: number }) => sum + item.quantity, 0) : 0;
    setCartItemCount(total);
  };

  useEffect(() => {
    addCartUpdateListener(updateCartItemCount);
    updateCartItemCount();
    return () => removeCartUpdateListener(updateCartItemCount);
  }, []);

  const bgVariants = {
    default: {
      backgroundColor: '#E45A3B00',
      stroke: "#E45A3B",
      transition: {
        duration: 0.3,
        ease: easeOut,
      }
    },
    hover: {
      backgroundColor: '#E45A3B',
      stroke: "#FFFBEE",
      transition: {
        duration: 0.3,
        ease: easeOut,
      }
    }
  };


  return (
    <motion.div className='nav-btn' 
    variants={bgVariants}
    initial='default'
    whileHover="hover"
    onClick={() => setIsOpen(true)}
    >
               
               {isCart ?
         <>
         {cartItemCount > 0 && (
           <div className="cart-notification">{cartItemCount}</div>
         )}
            <svg width="37" height="37" viewBox="0 0 37 37" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12.4856 30.6457C13.1125 30.6457 13.6206 30.1375 13.6206 29.5106C13.6206 28.8838 13.1125 28.3756 12.4856 28.3756C11.8588 28.3756 11.3506 28.8838 11.3506 29.5106C11.3506 30.1375 11.8588 30.6457 12.4856 30.6457Z" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M28.3753 30.6457C29.0021 30.6457 29.5103 30.1375 29.5103 29.5106C29.5103 28.8838 29.0021 28.3756 28.3753 28.3756C27.7484 28.3756 27.2402 28.8838 27.2402 29.5106C27.2402 30.1375 27.7484 30.6457 28.3753 30.6457Z" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M3.40527 5.67517H7.94537L11.3504 24.9706H29.5108" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M11.3501 20.4304H29.0451C29.1764 20.4305 29.3036 20.3851 29.4051 20.302C29.5067 20.2188 29.5763 20.103 29.602 19.9743L31.6451 9.75909C31.6615 9.67672 31.6595 9.59171 31.6392 9.51021C31.6188 9.42871 31.5806 9.35274 31.5274 9.28779C31.4741 9.22284 31.4071 9.17053 31.3311 9.13463C31.2552 9.09873 31.1722 9.08014 31.0882 9.0802H9.08008" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
         </>
        : 
        <svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
             <path d="M23.5154 9.84375C23.2474 13.4579 20.5076 16.4062 17.4998 16.4062C14.4919 16.4062 11.7473 13.4586 11.4841 9.84375C11.2107 6.08398 13.8767 3.28125 17.4998 3.28125C21.1228 3.28125 23.7888 6.15234 23.5154 9.84375Z" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M17.5002 20.7812C11.5529 20.7812 5.51677 24.0625 4.39978 30.2559C4.26511 31.0023 4.68757 31.7188 5.46892 31.7188H29.5314C30.3134 31.7188 30.7359 31.0023 30.6012 30.2559C29.4836 24.0625 23.4474 20.7812 17.5002 20.7812Z" stroke-width="3" stroke-miterlimit="10"/>
        </svg>
        }

    </motion.div>
)
}import { motion } from 'framer-motion';
import { useState } from 'react';
import Button from '../components/form/Button';
import { getCookie, setCookie } from '../cookies/CookiesLib.tsx';
import { dispatchCartUpdate } from '../pages/Billeterie/cartEvent.tsx'


type Props = {
  id: number;
  title: string;
  price: number|string;
  nbTicket: number;
  isForfait?: boolean; 
};

const initialDays = { '20Juillet': false, '21Juillet': false, '22Juillet': false };


export default function TicketCard(props: Props) {
  const [isOpen, setIsOpen] = useState(false);
  const [tickets, setTickets] = useState(props.nbTicket);
  const [rotation, setRotation] = useState(0);
  const [days, setDays] = useState(initialDays);

  const addToCartHandler = () => {
    const selectedDays = isForfait 
      ? Object.entries(days).filter(([day, isChosen]) => isChosen).map(([day, _]) => day) 
      : 
      [];
      dispatchCartUpdate();

    const itemForCart = {
      id: props.id,
      title: props.title,
      price: typeof props.price === 'number' ? props.price : 0,
      quantity: tickets,
      selectedDays: selectedDays,
    };

    let cart = getCookie('cart') || []; 
    const billetIndex = cart.findIndex((billet: any) => billet.id === itemForCart.id);
    if (billetIndex > -1) {
      cart[billetIndex].quantity += itemForCart.quantity;
    } else {
      cart.push(itemForCart);
    }
    setCookie('cart', cart, { expires: 7, sameSite: 'None', secure: true}); 
  };
  const handleTicketChange = (newTickets: number, event: React.MouseEvent) => {
    event.stopPropagation();
    setTickets(newTickets);
  };
  console.log(getCookie('cart'));

  const contentVariants = {
    closed: {
      opacity: 0,
      height: 0,
      overflow: 'hidden',
      transition: {
        duration: 0.2,
        ease: 'easeInOut',
        when: 'afterChildren',
      },
    },
    open: {
      opacity: 1,
      height: props.title === "Forfait 2 jours" ? 150 : 120,
      transition: {
        duration: 0.2,
        ease: 'easeInOut',
        when: 'beforeChildren',
      }
    },
  };

  const cardVariants = {
    hidden: { opacity: 0, y: 50 },
    visible: {
      opacity: 1,
      y: 0,
      transition: {
        type: 'spring',
        stiffness: 120,
      },
    },
  };

  const maxSelectedDays = 2;

  const selectedDayCount = () => {
    return Object.values(days).filter(Boolean).length;
  };

  const toggleDaySelection = (day: keyof typeof initialDays) => {
    setDays(prevDays => {
      const isSelected = prevDays[day];
      const count = selectedDayCount();
  
      if (!isSelected && count >= maxSelectedDays) {
        return prevDays;
      }
      
      return { ...prevDays, [day]: !prevDays[day] };
    });
  };
  
  const isForfait = props.isForfait || false; // Déterminez si c'est un forfait en se basant sur la

  return (
    <motion.div
      className="ticket-card"
      layout
      initial="hidden"
      animate="visible"
      variants={cardVariants}
      onClick={() => {
        setIsOpen(!isOpen);
        setRotation(rotation === 0 ? 90 : 0);
      }}
    >
      <div className="content">
        <div className='left-part'>
          <h4>{props.title}</h4>
          <p>Les tickets ne sont pas remboursables.</p>
          <p>Dernière entrée à 11H.</p>
        </div>
        <div className='right-part'>
          <p>{props.price}€</p>
          <motion.div className="svg-container" animate={{ rotate: rotation }}>
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="20" viewBox="0 0 13 20" fill="none">
              <path d="M2 18L10 10L2 2" stroke="#4E4E4E" strokeWidth="4" />
            </svg>
          </motion.div>
        </div>
      </div>
      <motion.div
  className={`sub-menu ${props.title === "Forfait 2 jours" ? "forfait-2j" : ""}`}
  variants={contentVariants}
  initial="closed"
  animate={isOpen ? "open" : "closed"}
  exit="closed"
>
  <div className='top-partsubmenu'>
        <div className='left-part-sub'>
        {isForfait && (Object.keys(days) as Array<keyof typeof days>).map(day => (
          <label key={day}>
            <input 
              type="checkbox"
              checked={days[day]}
              onChange={() => toggleDaySelection(day)}
            />
            {day}
          </label>
        ))}
          <div className='sub-menu-left-part'>
          <div className ="rect">
            <img src="images/billet_pass1j.png" alt="Billet pass 1 jour" />
          </div>
          <div className='article-select'>
          <svg xmlns="http://www.w3.org/2000/svg" width="22" height="21" viewBox="0 0 22 21" fill="none">
            <path d="M22 9.03848H14.6966L19.8599 4.10947L17.6953 2.04109L12.532 6.97007V0H9.46799V6.97007L4.30475 2.04109L2.13807 4.10947L7.30131 9.03848H0V11.9615H7.30131L2.13807 16.8906L4.30475 18.9589L9.46799 14.0299V21H12.532V14.0299L17.6953 18.9589L19.8599 16.8906L14.6966 11.9615H22V9.03848Z" fill="#FFD600"/>
          </svg>
          <p>x{tickets} Article(s) sélectionné(s)</p>
          </div>
          </div>
        <div className="ticket-control">
          <button onClick={(event) => handleTicketChange(Math.max(tickets - 1, 0), event)}>-</button>
          <span>{tickets}</span>
          <button className='sommeButton' onClick={(event) => handleTicketChange(tickets + 1, event)}>+</button>
        </div>
        </div>
      </div>
      <div className='delimiter-submenu'></div>
      <div className='bottom-partsubmenu'>
        <div className='bottom-part-left'>
        <p>Sous-total</p>
          <p>{tickets * props.price}€</p>
        </div>
        <button onClick={addToCartHandler}>AJOUTER AU PANIER</button>
      </div>

      </motion.div>
    </motion.div>
  );
}
export const CART_UPDATE_EVENT = 'cart-update-event';

export const dispatchCartUpdate = () => {
  const event = new CustomEvent(CART_UPDATE_EVENT);
  document.dispatchEvent(event);
};

export const addCartUpdateListener = (handler: EventListener) => {
  document.addEventListener(CART_UPDATE_EVENT, handler);
};

export const removeCartUpdateListener = (handler: EventListener) => {
  document.removeEventListener(CART_UPDATE_EVENT, handler);
};