.legacy-webview *,
.legacy-webview *::before,
.legacy-webview *::after {
  animation: none !important;
  -webkit-animation: none !important;

  transition-duration: 0.01ms !important;
  -webkit-transition-duration: 0.01ms !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.legacy-webview [data-animate],
.legacy-webview .animate-in,
.legacy-webview .fade-in,
.legacy-webview .slide-in,
.legacy-webview .reveal,
.legacy-webview .aos-init,
.legacy-webview .aos-animate {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  -webkit-transform: none !important;
}

.legacy-webview .pricing-grid,
.legacy-webview .plans-grid,
.legacy-webview .tariffs-grid,
.legacy-webview .plans-container,
.legacy-webview .pricing-container {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 1px !important;
  overflow: visible !important;
}

.legacy-webview .pricing-card,
.legacy-webview .plan-card,
.legacy-webview .tariff-card,
.legacy-webview .offer-card {
  display: block !important;
  position: relative !important;
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  min-height: 1px !important;
  margin: 0 0 12px !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  -webkit-transform: none !important;
  overflow: visible !important;
}

/* =========================================================
   WS58 — GRILLE FORFAITS MOBILE OBLIGATOIRE : 2 COLONNES
   Aucun smartphone ne doit afficher une seule colonne.
   ========================================================= */

@media screen and (max-width: 900px) {

  #planButtonsContainer,
  .plan-buttons-container,
  .plans-grid,
  #plans .plans-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    align-items: stretch !important;
  }

  #planButtonsContainer .plan-btn,
  .plan-buttons-container .plan-btn,
  .plans-grid .plan-btn,
  #plans .plan-btn {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  .plan-btn {
    min-height: 150px !important;
    padding: 18px 8px 14px !important;
  }

  .plan-btn .badge,
  .plan-btn .plan-badge,
  .plan-btn .recommended-badge {
    max-width: calc(100% - 12px) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* Très petits écrans : conserver obligatoirement 2 colonnes */
@media screen and (max-width: 380px) {

  #planButtonsContainer,
  .plan-buttons-container,
  .plans-grid,
  #plans .plans-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  .plan-btn {
    min-height: 138px !important;
    padding: 15px 5px 12px !important;
  }

  .plan-btn h3,
  .plan-btn .plan-name {
    font-size: 18px !important;
  }

  .plan-btn .price,
  .plan-btn .plan-price {
    font-size: 16px !important;
  }
}