/* ============================================================
   MOBILE — Famille ÉBÉNISTE (hub + 14 sous-pages)
   Chargé APRÈS le CSS inline et mobile-common.css.
   Uniquement des règles @media : le desktop reste identique.
   ============================================================ */

@media (max-width:900px){

  /* ---------- Rythme & padding horizontal cohérent (22px) ---------- */
  .wrap{ padding-left:22px; padding-right:22px; }

  /* ---------- HERO ---------- */
  .hero .wrap{ padding-bottom:72px; }
  .hero h1{ font-size:clamp(40px,11vw,56px); line-height:1.02; }
  .hero p{ font-size:16px; line-height:1.7; margin:22px 0 30px; }
  .hero .crumb{ margin-bottom:18px; }
  .hero .btn{ width:100%; justify-content:center; text-align:center; padding:17px 20px; }

  /* ---------- Boutons : confort tactile, pleine largeur élégante ---------- */
  .cta .btn, .sinistre .actions .btn{ width:100%; justify-content:center; text-align:center; padding:17px 20px; }
  .btn{ min-height:48px; }

  /* ---------- Volets plein écran : lisibilité du panneau ---------- */
  .slide-panel, .slide.right .slide-panel{
    padding:34px 22px 44px;
    background:linear-gradient(rgba(24,15,8,0), rgba(24,15,8,.55) 16%, rgba(24,15,8,.92)) !important;
  }
  .slide-num{ margin-bottom:14px; font-size:17px; }
  .slide-panel h2, .slide-panel h3{ font-size:clamp(27px,7.2vw,34px); margin-bottom:16px; }
  .slide-panel p{ font-size:15px; line-height:1.75; }

  /* ---------- Éditorial « wide » : ne pas rétrécir sur mobile ---------- */
  .editorial.wide .wrap{ max-width:100%; }
  .editorial .wrap{ max-width:100%; }
  .ed-body{ font-size:16px; line-height:1.8; }
  .ed-statement{ font-size:clamp(30px,8.6vw,40px); }

  /* ---------- Réponse directe (GEO) ---------- */
  .answer .box{ padding:34px 24px; }
  .answer h2{ font-size:24px; line-height:1.25; }
  .answer p{ font-size:15.5px; line-height:1.8; }

  /* ---------- Savoir-faire / prestations (liste .svc) ---------- */
  .svc{ grid-template-columns:38px 1fr; gap:16px; padding:26px 0; }
  .svc .n{ font-size:18px; }
  .svc h3{ font-size:22px; line-height:1.2; margin-bottom:8px; }
  .svc p{ font-size:14.5px; line-height:1.7; }

  /* ---------- TABLEAUX (.spec-table) ----------
     2 colonnes : le tableau respire dans la page.
     3 colonnes et + (page prix) : défilement horizontal contenu. */
  .spec-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 -22px; padding:0 22px; }
  .spec-table th{ padding:14px 12px 12px 0; font-size:10px; letter-spacing:.16em; }
  .spec-table td{ padding:18px 12px 18px 0; font-size:14px; line-height:1.65; }
  .spec-table td.org{ white-space:normal; font-size:19px; line-height:1.25; width:38%; min-width:118px; }

  /* Tableaux à 3 colonnes ou plus : largeur mini + glisser horizontal */
  .spec-wrap:has(th:nth-child(3)) .spec-table{ min-width:660px; }
  .spec-wrap:has(th:nth-child(3)) .spec-table td.org{ width:auto; min-width:150px; }
  .spec-wrap:has(th:nth-child(3)) .spec-table th,
  .spec-wrap:has(th:nth-child(3)) .spec-table td{ padding-right:20px; }
  .spec-wrap:has(th:nth-child(3))::after{
    content:"Glissez pour lire le tableau →";
    display:block; position:sticky; left:22px; width:max-content;
    margin:16px 0 4px; font-family:'Inter',sans-serif; font-size:10.5px; font-weight:600;
    letter-spacing:.18em; text-transform:uppercase; color:var(--gold);
  }
  .resume{ margin-top:56px; }
  .resume h3{ font-size:25px; }
  .resume dt{ font-size:20px; }
  .resume dd{ font-size:14.5px; line-height:1.75; }

  /* ---------- Fourchette de prix (barre) ---------- */
  .tarif-range{ gap:14px; }
  .tarif-range .bar{ min-width:42px; }
  .tarif-range .end .v{ font-size:22px; }
  .tarif-range .end .l{ font-size:10px; letter-spacing:.12em; margin-top:7px; }

  /* ---------- Carte devis ---------- */
  .devis-card{ padding:36px 24px; }
  .devis-card .btn-devis{ font-size:11.5px; letter-spacing:.13em; padding:16px 14px; gap:8px; min-height:50px; }
  .devis-card li{ font-size:14px; line-height:1.65; }

  /* ---------- Cartes sinistre (hub) ---------- */
  .scard{ padding:34px 26px; }
  .scard h3{ font-size:24px; }
  .sin-lead{ font-size:18px; line-height:1.55; margin-bottom:40px; }

  /* ---------- Galerie & carrousels ---------- */
  .gal-track, .ap-carousel, .lr-carousel{ scroll-padding-left:22px; }
  .gal-item figcaption{ font-size:17px; }
  .gal-hint{ margin-top:12px; }
  .lr-card{ padding:32px 24px; }
  .lr-card h3{ font-size:23px; }
  .lr-card p, .lr-card li{ font-size:14.5px; line-height:1.75; }

  /* ---------- Types (hub) ---------- */
  .tile h3{ font-size:23px; }
  .tile p{ font-size:14px; line-height:1.65; }
  .tile .go{ padding-top:14px; min-height:24px; }

  /* ---------- Étapes (hub) ---------- */
  .bstep h3{ font-size:26px; }
  .bstep p{ font-size:15px; line-height:1.75; }
  .bstep-num{ font-size:64px; }

  /* ---------- FAQ ---------- */
  .faq-q{ font-size:20px; line-height:1.3; padding:22px 0; gap:16px; }
  .faq-a p{ font-size:15px; line-height:1.75; }

  /* ---------- CTA ---------- */
  .cta h2{ font-size:clamp(30px,8.4vw,40px); }
  .cta p{ font-size:15.5px; line-height:1.75; }

  /* ---------- Cartes origines / fcard / gcard ---------- */
  .fcard{ padding:34px 24px; }
  .fcard h3{ font-size:24px; }
  .org-card h3{ font-size:24px; line-height:1.2; }

  /* ---------- Citation (hub) ---------- */
  .quotebreak blockquote{ font-size:24px; line-height:1.4; padding:0 22px; }
  .quotebreak .ed-kicker{ bottom:40px; padding:0 22px; }
}

/* ============================================================ */
@media (max-width:640px){
  /* Grille "gratuits" (page sinistre) : 1 colonne confortable */
  .grat-grid{ grid-template-columns:1fr; gap:12px; }
  .gcard{ padding:28px 22px; text-align:left; }
  .gcard .ic{ margin:0 0 16px; }

  /* Tableau 2 colonnes : un peu plus d'air vertical */
  .spec-table td{ padding-top:16px; padding-bottom:16px; }

  /* Offer-band : liste centrée mais aérée */
  .offer-band{ padding:18px 0; }
  .offer-band ul{ gap:10px 20px; }
}

/* ============================================================ */
@media (max-width:480px){
  .hero h1{ font-size:clamp(36px,10.5vw,44px); }
  .answer .box{ padding:30px 20px; }
  .stat{ padding:30px 12px; }
  .stat .lbl{ font-size:12px; }
  .marquee{ padding:16px 0; }
  .mq-w{ font-size:11.5px; padding:0 24px; }
}