/* ==========================================================================
   SAMA — Responsive
   Desktop → Tablette → Mobile.
   Le ticket sticky devient un tiroir ancré en bas de l'écran sur mobile.
   ========================================================================== */

/* ---------- Tablette (≤ 1024px) ---------- */
@media (max-width: 1024px){

  .collections-grid{
    grid-template-columns: repeat(2, 1fr);
  }

  .service-card{
    grid-template-columns: 120px 1fr auto;
  }
}

/* ---------- Bascule vers layout mobile (≤ 920px) ---------- */
@media (max-width: 920px){

  .page{
    grid-template-columns: 1fr;
  }

  .collections-grid{
    grid-template-columns: 1fr;
  }

  .service-card{
    grid-template-columns: 1fr;
    text-align: left;
  }

  .service-card.is-compact{
    grid-template-columns: 1fr;
  }

  .service-card .service-media{
    height: 140px;
  }

  .service-card.is-compact .service-media{
    height: 140px;
  }

  .service-card .service-right{
    justify-content: space-between;
  }

  /* Le ticket devient un tiroir ancré en bas, tirable vers le haut */
  .ticket-col{
    position: fixed;
    inset: auto 0 0 0;
    height: auto;
    padding: 0;
    z-index: 50;
    justify-content: stretch;
    transform: translateY(calc(100% - 64px));
    transition: transform var(--transition-fast);
  }

  .ticket-col.is-open{
    transform: translateY(0);
  }

  .ticket{
    max-width: none;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: 0 -20px 40px rgba(0,0,0,0.45);
  }

  .ticket-drag{
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding-bottom: var(--space-sm);
    margin-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-border);
    font-size: 0.8rem;
    cursor: pointer;
  }

  .ticket-drag .drag-handle{
    animation: dragPulse 1.8s ease-in-out infinite;
  }

  @keyframes dragPulse{
    0%, 100%{ transform: translateY(0); opacity: 0.6; }
    50%{ transform: translateY(-3px); opacity: 1; }
  }

  .ticket-lines{
    max-height: 26vh;
  }
}

/* la poignée du tiroir n'existe que sur mobile */
.ticket-drag{
  display: none;
}

/* ---------- Petit mobile (≤ 480px) ---------- */
@media (max-width: 480px){

  .site-nav{
    flex-wrap: wrap;
    gap: var(--space-xs);
  }

  .site-nav-links{
    gap: var(--space-sm);
  }

  .hero-content h1{
    font-size: 2.4rem;
  }

  .final-cta-actions{
    flex-direction: column;
  }

  .btn{
    width: 100%;
  }
}