/*
RMD Bâtiment — Mobile UI (≤768px)
-----------------------------------

Ce fichier apporte **une interface optimisée smartphone** sans
toucher à l’interface bureau. Il ne s’applique qu’en dessous
de 768px quand il est chargé via `media="(max-width: 768px)"`.
*/

:root{ scroll-behavior:smooth; }

/* Layout global */
body{ background:var(--bg); color:var(--text); }
.container{ width:min(730px,92vw); }
.section{ padding:28px 0; }
.lead{ font-size:1rem; }

/* Utilitaires d’affichage */
.only-mobile{ display:initial; }
.only-desktop{ display:none !important; }

/* Header compact avec burger */
.site-header{ background:rgba(0,0,0,.05); backdrop-filter:saturate(1.05) blur(8px); }
.site-header .nav{ gap:.6rem; }
.site-header nav{ display:none; }
.burger{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:12px; border:1px solid var(--line,rgba(0,0,0,.12)); background:var(--panel,#111); color:var(--ink,var(--text,#fff)); box-shadow:var(--shadow,0 10px 24px rgba(0,0,0,.2)); }
.burger svg{ width:22px; height:22px }

/* Menu plein écran (bottom-sheet) */
#mobileMenu{ position:fixed; inset:0; display:none; background:rgba(0,0,0,.45); backdrop-filter:blur(2px); z-index:9998; }
#mobileMenu.open{ display:block; }
#mobileMenu .sheet{ position:absolute; left:0; right:0; bottom:0; background:var(--panel,#111); color:var(--ink,var(--text,#fff)); border-top-left-radius:18px; border-top-right-radius:18px; border:1px solid var(--line,rgba(0,0,0,.15)); box-shadow:0 -16px 40px rgba(0,0,0,.35); transform:translateY(100%); transition:transform .25s ease; }
#mobileMenu.open .sheet{ transform:translateY(0); }
#mobileMenu header{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--line,rgba(0,0,0,.08)); }
#mobileMenu header b{ font-size:1.05rem }
#mobileMenu .close{ width:38px; height:38px; display:grid; place-items:center; border-radius:10px; border:1px solid var(--line,rgba(0,0,0,.12)); background:transparent }
#mobileMenu ul{ list-style:none; margin:0; padding:10px; display:grid; gap:8px; }
#mobileMenu li a{ display:flex; align-items:center; gap:.6rem; padding:14px 12px; border-radius:12px; background:var(--panel,#111); border:1px solid var(--line,rgba(0,0,0,.12)); color:inherit; text-decoration:none; font-weight:600 }
#mobileMenu li a:active{ transform:translateY(1px) }

/* Hero + cartes en pile */
.hero{ padding:28px 0 18px; }
.hero-grid{ grid-template-columns:1fr !important; gap:1rem; }
.hero h1{ font-size:1.6rem; }
.hero-card{ padding:.8rem }
.badges{ gap:.4rem }
.cta{ padding:.8rem 1rem; border-radius:999px; font-weight:800 }

/* Grilles en 1 colonne + espacements tactiles */
.grid.services, .grid.gallery, .grid.two, .grid.three{ grid-template-columns:1fr !important; }
.card{ border-radius:16px; }
.tile{ border-radius:14px }

/* Formulaire lisible sur mobile */
.row{ grid-template-columns:1fr !important; }
label{ font-size:1rem }
input, textarea{ font-size:1rem; padding:1rem }

/* Barre d’actions collante (Appeler / Devis) */
body.has-actionbar{ padding-bottom:88px; }
#actionBar{ position:fixed; left:0; right:0; bottom:0; z-index:9997; padding:10px 12px; background:linear-gradient(180deg, transparent, rgba(0,0,0,.06) 12%, rgba(0,0,0,.12) 40%); }
#actionBar .wrap{ width:min(760px,96vw); margin-inline:auto; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
#actionBar .abtn{ display:inline-flex; align-items:center; justify-content:center; gap:.6rem; height:54px; border-radius:14px; border:1px solid var(--line,rgba(0,0,0,.12)); background:var(--panel,#111); color:var(--ink,var(--text,#fff)); text-decoration:none; font-weight:800; box-shadow:var(--shadow,0 10px 24px rgba(0,0,0,.2)); }
#actionBar .abtn:active{ transform:translateY(1px) }

/* Pied de page plus compact */
.site-footer{ padding-bottom:32px; }

/* Masquer le bouton retour haut (s’il gêne) */
.top{ display:none }

/* Améliorations d’accessibilité */
:focus-visible{ outline:2px solid var(--accent,#888); outline-offset:2px }

/* Ghost CTA stays readable on any background */
.cta.ghost{ color: var(--cta-ghost-color, var(--ink, #111)); border-color: var(--line, rgba(0,0,0,.25)); }
/* If your hero is very light, give it a subtle wash for contrast */
.hero .cta.ghost{ background: color-mix(in oklab, var(--ink, #111) 10%, transparent); }

/* ===== Var. D (Devis-first) — mobile ===== */
@media (max-width:768px){
  /* 1) Force une seule colonne (écrase le style inline) */
  .hero .container.grid{
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
    gap: 16px !important;
  }

  /* 2) Mets le formulaire AVANT le texte (plus pertinent sur mobile) */
  .hero .container.grid > form.card{ order: -1; }

  /* 3) Le formulaire occupe toute la largeur et reste confortable */
  .hero .container.grid form.card{
    width: 100%;
    max-inline-size: none;
  }
  .hero .container.grid form.card .actions .cta{
    display:block;
    width: 100%;
    text-align:center;
  }

  /* 4) Texte plus compact pour libérer de l’espace */
  .hero h1{ font-size: 1.6rem; }
  .hero .lead{ font-size: 1rem; margin-bottom: .5rem; }
  .badges{ flex-wrap: wrap; gap: .4rem; }
}