/* Extrait de inclure/modal/modal-billets.html : feuille du composant, appelée par <link> à son emplacement (HTML valide dans le body) */
  /* ===== Variables marque (ok global) ===== */
  :root{
    --citron:#ffe100;
    --citron-stroke:#E2C500;
    --citron-fg:#000;
  }

  /* ===== Layout & scroll — SCOPÉ à #billetteriemodal ===== */
  #billetteriemodal .modal-content{
    display:flex;
    flex-direction:column;
    background-attachment:local; /* surtout pas fixed */
  }
  #billetteriemodal .modal-body{
    flex:1 1 auto;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
  }
  #billetteriemodal{
    --bs-modal-header-border-width:0;
    --bs-modal-footer-border-width:0;
  }

  /* Boîte "transparente" — SCOPÉE (ne touche pas les autres modales) */
  #billetteriemodal .modal-transparent{
    --bs-modal-bg:transparent;  /* BS5 */
    background:transparent!important;
    border:0;
    box-shadow:none;
  }

  /* ===== Responsive — SCOPÉ ===== */
  @media (max-width:576px){
    #billetteriemodal .modal-dialog{ margin:0; }
    #billetteriemodal .modal-content{ min-height:100dvh; }
  }

  /* iOS: neutraliser blur + lisibilité — SCOPÉ */
  @supports (-webkit-touch-callout:none){
    @media (max-width:576px){
      #billetteriemodal .modal-content{
        -webkit-backdrop-filter:none;
        backdrop-filter:none;
        background-color:rgba(255,255,255,.98);
        background-size:50%;
        background-position:right -12vw bottom -40px;
        /* background-repeat:no-repeat; */
      }
    }
  }

  /* Tuiles ancre — SCOPÉ (évite d'écraser d'autres modales) */
  #billetteriemodal .card-tile{
    background-color:#fff;
  }

  /* Backdrop sombre — classe DÉDIÉE au body pour la billetterie uniquement */
  body.backdrop-billets .modal-backdrop{
    background-color:rgba(17,17,17,.7);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
  }

  /* Bouton de fermeture "citron" — SCOPÉ */
  #billetteriemodal .btn-close-citron{
    position:absolute; top:.5rem; right:.75rem;
    width:50px; height:50px; border-radius:50%;
    display:inline-grid; place-items:center; padding:0;
    background:var(--citron); border:1.5px solid var(--citron-stroke);
    box-shadow:0 2px 6px rgba(0,0,0,.15);
    cursor:pointer; opacity:1!important; outline:none;
    z-index:1061; pointer-events:auto;
  }
  #billetteriemodal .btn-close-citron::before,
  #billetteriemodal .btn-close-citron::after{
    content:""; position:absolute; width:20px; height:2px;
    background:var(--citron-fg); transition:transform .15s ease;
  }
  #billetteriemodal .btn-close-citron::before{ transform:rotate(45deg); }
  #billetteriemodal .btn-close-citron::after { transform:rotate(-45deg); }
  #billetteriemodal .btn-close-citron:hover{ filter:brightness(.96); }
  #billetteriemodal .btn-close-citron:active{ transform:scale(.96); }
  #billetteriemodal .btn-close-citron:focus-visible{ box-shadow:0 0 0 3px rgba(246,227,91,.45); }

  @media (prefers-reduced-motion:reduce){
    #billetteriemodal .btn-close-citron,
    #billetteriemodal .btn-close-citron::before,
    #billetteriemodal .btn-close-citron::after{ transition:none; }
  }