/* ============================================================
   MOBILE.CSS — Établissement Marceau
   ------------------------------------------------------------
   Ce fichier ne s'applique QUE sur les écrans de 980px de large
   ou moins (tablettes et téléphones). Il est chargé par
   index.html avec :  <link media="(max-width:980px)" ...>

   ➜ Vous pouvez modifier ce fichier librement : la version
     desktop du site (>980px) ne sera JAMAIS affectée.

   Structure :
   1. Tablette (toute taille ≤ 980px)
   2. Téléphone uniquement (≤ 680px)
   ============================================================ */


/* ============================================================
   1. TABLETTE — s'applique dès 980px et en dessous
   ============================================================ */

/* --- Hero : passe en 1 colonne (texte au-dessus, photo dessous) --- */
.hero .container{grid-template-columns:1fr;gap:2.6rem}
.hero{padding:3.8rem 0 4.5rem}

/* --- Services : 2 cartes par ligne au lieu de 4 --- */
.services-grid{grid-template-columns:repeat(2,1fr)}

/* --- Zones et Contact : 1 colonne --- */
.zones-wrap,.contact-wrap{grid-template-columns:1fr}

/* --- Footer : 2 colonnes au lieu de 3 --- */
.footer-grid{grid-template-columns:1fr 1fr}


/* ============================================================
   2. TÉLÉPHONE — s'applique à 680px et en dessous
   ============================================================ */
@media (max-width:680px){

  /* --- Bandeau orange du haut : centré, texte de gauche masqué --- */
  .topbar .container{justify-content:center;text-align:center}
  .topbar .left{display:none}
  .topbar{padding:.3rem 0;font-size:.82rem}

  /* --- Header compact : logo réduit, nom sur lignes serrées --- */
  .nav{padding:.45rem 0}
  .logo-img{width:40px;height:40px;border-radius:10px}
  .logo{font-size:1.05rem;gap:.5rem;line-height:1.15}

  /* --- Menu burger (remplace la navigation horizontale) --- */
  .burger{display:flex}
  .btn-nav{display:none}
  .nav-links{
    position:absolute;top:100%;left:0;right:0;
    background:var(--blanc);flex-direction:column;gap:0;
    box-shadow:0 18px 30px rgba(11,37,69,.15);
    max-height:0;overflow:hidden;transition:max-height .4s ease;
  }
  .nav-links.open{max-height:420px}
  .nav-links li{width:100%;text-align:center;border-top:1px solid #EDF2F9}
  .nav-links a{display:block;padding:1rem 0}
  .nav-links a::after{display:none}

  /* --- Services et formulaire : 1 colonne --- */
  .services-grid,.tarifs-grid{grid-template-columns:1fr}

  /* --- Footer : 1 colonne --- */
  .footer-grid{grid-template-columns:1fr}

  /* --- Barre d'appel collante en bas de l'écran --- */
  .call-bar{display:flex}
  body{padding-bottom:70px}   /* évite que la barre cache le bas du footer */

  /* --- Hero mobile : texte → carte photo → bouton d'appel → badges.
         Espacements resserrés pour que le bouton remonte et ne colle
         pas au bandeau "Appeler maintenant" fixé en bas.
         Le grand bloc photo desktop est masqué (doublon). --- */
  .hero-key-bg{display:none}
  .hero-visual{display:none}
  .hero{padding:1rem 0 2.4rem}
  .hero-tag{margin-bottom:.9rem}
  .hero h1{margin-bottom:.9rem}
  .price-flash{margin-bottom:.6rem}
  .price-flash-note{margin-bottom:1rem}
  .hero p.lead{margin-bottom:1.2rem}
  .hero-photo-mobile{
    display:block;width:100%;
    aspect-ratio:16/9;object-fit:cover;
    border-radius:14px;
    border:4px solid rgba(255,255,255,.14);
    box-shadow:0 18px 40px rgba(0,0,0,.4);
    margin-bottom:1.4rem;
  }
  .hero-cta{margin-bottom:1.6rem}

  /* --- Sections : espacement vertical réduit --- */
  .section{padding:3.8rem 0}
}

/* --- Tarifs : 2 colonnes sur tablette uniquement (681-980px) --- */
@media (min-width:681px){
  .tarifs-grid{grid-template-columns:repeat(2,1fr)}
}

/* --- Tarifs : la carte pleine largeur s'empile sur petit écran --- */
.tarif-card.wide{flex-direction:column;align-items:flex-start;gap:.9rem}