/* =====================================================
   GSSIEP — pages-mobile.css
   Version : 5.1.0
   Date    : 2026-01-22
   Objectif :
   - Overrides MOBILE UNIQUEMENT (<= 980px)
   - Uniformisation responsive (grilles, cards, CTA, médias)
   - Desktop inchangé (tout est sous @media)
   ===================================================== */

@media (max-width: 980px){

  html, body{
    overflow-x: auto; /* FIX: évite contenu coupé si un élément déborde */
  }

  /* Conteneurs */
  .container{
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* HERO : empilement (évite colonnes trop étroites et numéros “tronqués”) */
  .hero{
    padding: 4.2rem 0 3.2rem;
  }

  .hero-grid{
    grid-template-columns: 1fr !important;
    gap: 1.5rem;
    align-items: start;
  }

  .hero-panel{
    justify-content: flex-start;
  }

  .hero-card{
    width: 100%;
  }

  /* Boutons du hero : cohérents au doigt */
  .hero-actions{
    flex-direction: column;
    align-items: stretch;
  }
  .hero-actions .btn{
    width: 100%;
    justify-content: center;
  }

  /* Grilles -> 1 colonne */
  .services-grid,
  .pricing-grid,
  .support-grid,
  .videos-grid,
  .steps-grid,
  .aisance-grid,
  .zones-list,
  .pack-grid,
  .cards-grid{
    grid-template-columns: 1fr !important;
  }

  /* Contact : ne pas casser le numéro sur 2 lignes */
  .zones-contact a[href^="tel"],
  .hero-card a[href^="tel"]{
    white-space: nowrap;
  }

  /* Évite certains blocs “écrasés” : respire légèrement */
  .section-header{
    margin-bottom: 2rem;
  }

  /* Rythme vertical (évite l'effet "tout collé") */
  .section{
    padding: 2.25rem 0;
  }

  /* Cards */
  .card{
    padding: 1.25rem;
  }

  /* CTA : cliquable au doigt */
  .card .btn,
  .card .btn-primary,
  .card .btn-outline{
    width: 100%;
    justify-content: center;
  }

  /* Médias */
  img, svg, video, iframe{
    max-width: 100%;
    height: auto;
  }

  /* Tables : autoriser le scroll horizontal */
  .table-wrap{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Très petits écrans */
@media (max-width: 520px){
  .card{
    padding: 1.1rem;
  }

/* =====================================================
   MOBILE — GARDE-FOUS ANTI DÉBORDEMENT
   Objectif :
   - Éviter le contenu "coupé" sur mobile (S25 / iPhone)
   - Empêcher images/iframes/pre de dépasser la largeur écran
   ===================================================== */

img,
video,
iframe {
  max-width: 100%;
  height: auto;
}

pre {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

code {
  overflow-wrap: anywhere;
}

}