/* ==========================================================================
   BUREAU STORES - FEUILLE RESPONSIVE PROPRE & HIÉRARCHISÉE
   Paliers stricts : 1180px (menu) -> 1024px (tablette 2 col) -> 768px (mobile 1 col) -> 480px -> 360px
   ========================================================================== */

/* --------------------------------------------------------------------------
   PALIER 1 : Largeur <= 1180px (Menu mobile & navigation tactile)
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  /* Barre haute compacte sur mobile : on préserve l'information clé (IDF / 1 000 € HT) */
  .top-bar-inner-luminous {
    justify-content: center;
  }

  .top-bar-left {
    display: none;
  }

  .top-bar-right {
    width: 100%;
    justify-content: center;
    gap: 1.25rem;
    font-size: 0.78rem;
  }

  .nav-inner-luminous {
    height: 72px;
  }

  .nav-links-luminous {
    position: fixed;
    top: 72px;
    left: 0;
    width: 100%;
    max-height: calc(100vh - 72px);
    overflow-y: auto;
    background-color: #ffffff;
    flex-direction: column;
    align-items: flex-start;
    padding: 2rem 1.75rem;
    box-shadow: 0 15px 30px rgba(6, 49, 84, 0.12);
    transform: translateY(-160%);
    transition: transform var(--transition-smooth);
    z-index: 999;
    border-bottom: 1px solid var(--bs-border-light);
  }

  .nav-links-luminous.active {
    transform: translateY(0);
  }

  .nav-link-item {
    width: 100%;
    font-size: 1.1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--bs-surface-mist);
  }

  .mobile-toggle-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
   PALIER 2 : Largeur <= 1024px (Tablettes & iPad - Grilles à 2 Colonnes)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .hero-layout-luminous {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .hero-h1-luminous {
    font-size: 2.75rem;
  }

  .solutions-grid-luminous {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  .solution-card-luminous.featured {
    grid-column: span 2;
    grid-template-columns: 1fr;
  }

  .models-grid-luminous {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  .case-study-box {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding: 2.5rem;
  }

  .studio-card-luminous {
    grid-template-columns: 1fr;
  }

  .radar-card-luminous {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .footer-grid-luminous {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
  }
}

/* --------------------------------------------------------------------------
   PALIER 3 : Largeur <= 768px (Smartphones en portrait - 1 Colonne stricte)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .container {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .hero-luminous {
    padding: 2.5rem 0 3.5rem 0;
  }

  .hero-h1-luminous {
    font-size: 2.2rem;
  }

  .hero-desc-luminous {
    font-size: 1.02rem;
  }

  .hero-trust-band {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .hero-card-img-box {
    height: 280px;
  }

  .solutions-grid-luminous {
    grid-template-columns: 1fr;
  }

  .solution-card-luminous.featured {
    grid-column: span 1;
  }

  .models-grid-luminous {
    grid-template-columns: 1fr;
  }

  .types-grid-luminous {
    grid-template-columns: 1fr;
  }

  .workstation-pills-row {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .workstation-pill-btn {
    flex: 1 1 calc(50% - 0.5rem);
    text-align: center;
    padding: 0.65rem 0.5rem;
    font-size: 0.85rem;
  }

  .studio-form-side {
    padding: 1.75rem 1.25rem;
  }

  .studio-summary-side {
    padding: 2rem 1.25rem;
  }

  .inputs-grid-luminous {
    grid-template-columns: 1fr;
  }

  .reviews-grid-luminous {
    grid-template-columns: 1fr;
  }

  .modal-luminous-card {
    grid-template-columns: 1fr;
    max-height: 90vh;
    overflow-y: auto;
  }

  .footer-grid-luminous {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .footer-bottom-luminous {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}

/* --------------------------------------------------------------------------
   PALIER 4 : Largeur <= 480px (Smartphones standards Android & iPhone)
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .hero-h1-luminous {
    font-size: 1.95rem;
  }

  .brand-logo-img {
    height: 32px;
  }

  .btn-lg {
    width: 100%;
    padding: 0.95rem 1.25rem;
    font-size: 0.95rem;
    text-align: center;
  }

  .hero-btns-row {
    flex-direction: column;
    width: 100%;
    gap: 0.75rem;
  }

  .hero-btns-row .btn {
    width: 100%;
  }

  .case-metrics-row {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .model-actions-grid {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .model-actions-grid .btn {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   PALIER 5 : Largeur <= 360px (Petits smartphones compacts sans débordement)
   -------------------------------------------------------------------------- */
@media (max-width: 360px) {
  .container {
    padding-left: 0.85rem;
    padding-right: 0.85rem;
  }

  .hero-h1-luminous {
    font-size: 1.75rem;
  }

  .workstation-pill-btn {
    flex: 1 1 100%;
  }

  .top-bar-right {
    flex-direction: column;
    gap: 0.25rem;
    text-align: center;
  }
}