/* MOBILE — famille tapissier. Règles uniquement en @media (max-width:900px ou moins). */

/* ============================================================
   ≤ 900px — corrections générales de la famille tapissier
   (prestations, villes, zones). Chargé après le CSS inline
   et mobile-common.css : le desktop reste pixel-identique.
   ============================================================ */
@media (max-width:900px){

  /* --- HERO : lisibilité du fil d'Ariane et de l'eyebrow sur photo claire --- */
  .hero .crumb,
  .hero .eyebrow{ text-shadow:0 1px 14px rgba(18,13,22,.65), 0 0 2px rgba(18,13,22,.4); }
  .hero .wrap{ padding-bottom:60px; }
  .hero p{ font-size:15.5px; line-height:1.75; margin:22px 0 30px; }

  /* --- EN-TÊTE SIMPLE (page zones, sans photo) : moins de vide sous le header fixe --- */
  section[style*="padding:170px"]{ padding:136px 0 62px !important; }

  /* --- CHIFFRES : plus compacts en 2×2 --- */
  .stat{ padding:40px 16px; }
  .stat .lbl{ margin-top:10px; }

  /* --- SECTION "COMPRENDRE" (texte + image) --- */
  .subj .wrap{ gap:44px; }
  .subj p{ font-size:15.5px; line-height:1.8; }

  /* --- EMPLACEMENT VIDÉO : moins haut sur téléphone --- */
  .videostrip{ height:58vh; min-height:400px; }
  .videostrip-cap{ padding:0 22px 46px; }

  /* --- PROCESS : cartes moins tassées mais plus compactes --- */
  .process .head{ margin-bottom:40px; }
  .step{ padding:34px 24px 36px; }
  .step .n{ margin-bottom:14px; }
  .step p{ font-size:15px; }

  /* --- MATÉRIAUX (fond violet) : le titre et le chapô touchaient les bords --- */
  .mats .head,
  .mats-lead{ padding-left:22px; padding-right:22px; }
  .mats-lead{ margin-bottom:44px; }
  /* le scroll-snap alignait la 1re carte sur le bord et avalait la gouttière */
  .mats-carousel{ scroll-padding-left:22px; scroll-padding-right:22px; }
  .mat-card p{ font-size:14.5px; }

  /* --- BLOCS MAGAZINE : le texte justifié creusait des « rivières » --- */
  .mag-block p{ text-align:left !important; }
  .mag-block p{ font-size:15.5px; line-height:1.8; }
  .mag-body{ gap:30px; }

  /* --- TARIFS : cartes moins massives, prix mieux composé --- */
  .tarifs .head{ margin-bottom:40px; }
  .tcard{ padding:30px 24px 32px; }
  .tcard .price{ font-size:30px; line-height:1.15; }
  .tcard .price small{ display:block; font-size:14px; margin-top:6px; }
  .tcard p{ font-size:15px; }

  /* --- FAQ / têtes de section --- */
  .faq .head{ margin-bottom:36px; }
  .faq-a p{ font-size:15px; }

  /* --- CTA : bouton et liste d'avantages posés proprement --- */
  .cta .perks{ flex-direction:column; align-items:center; gap:13px; margin-top:42px; }
  .cta .perks li{ font-size:13.5px; text-align:left; }
  .cta p{ font-size:15.5px; line-height:1.75; }

  /* --- PAGE ZONES : listes de villes empilées --- */
  .aa-grid[style*="gap:60px"]{ gap:48px !important; }
  .aa-grid li a > span:last-child{ font-size:13px !important; line-height:1.5; }

  /* --- Cartes "autres prestations" : libellés confortables --- */
  .acard .lab{ left:20px; right:20px; bottom:20px; }

  /* --- Notes de bas de tableau --- */
  .tarifs .note, .etapes .note{ font-size:13px; line-height:1.7; }
}

/* ============================================================
   ≤ 640px — téléphones : boutons pleine largeur, tableaux
   linéarisés (ils étaient illisibles sur 3 colonnes étroites).
   ============================================================ */
@media (max-width:640px){

  .section{ padding:74px 0; }

  /* --- BOUTONS : pleine largeur, hauteur ≥ 50px, numéro de téléphone sans césure moche --- */
  .btn{
    width:100%;
    justify-content:center;
    text-align:center;
    padding:17px 18px;
    letter-spacing:.15em;
    line-height:1.7;
    min-height:50px;
    white-space:normal;
  }

  /* --- TABLEAUX TARIFS (fond violet) : une fiche par ligne --- */
  .tarifs .tarif-table{ display:block; margin-top:24px; border-top:1px solid rgba(250,246,240,.16); }
  .tarifs .tarif-table tbody{ display:block; }
  .tarifs .tarif-table tr{ display:block; padding:20px 2px 22px; border-bottom:1px solid rgba(250,246,240,.16); }
  .tarifs .tarif-table td{ display:block; width:100%; padding:0 !important; border-bottom:0 !important; }
  .tarifs .tarif-table td:first-child{
    font-family:'Inter',sans-serif; font-size:11.5px; font-weight:600;
    letter-spacing:.16em; text-transform:uppercase; color:var(--gold);
  }
  .tarifs .tarif-table td:nth-child(2){ font-size:22px; margin:8px 0 6px; }
  .tarifs .tarif-table td:nth-child(3){ font-size:14.5px; line-height:1.65; }
  /* En-têtes de colonnes devenus redondants une fois le tableau linéarisé :
     retirés visuellement mais conservés pour les lecteurs d'écran. */
  .tarifs .tarif-table thead,
  .etapes .tarif-table thead{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
  }

  /* --- TABLEAU DES ÉTAPES (fond clair) : numéro + titre, puis description --- */
  .etapes .tarif-table{ display:block; margin-top:24px; border-top:1px solid var(--line); }
  .etapes .tarif-table tbody{ display:block; }
  .etapes .tarif-table tr{
    display:grid; grid-template-columns:32px 1fr; column-gap:14px; row-gap:8px;
    align-items:center; padding:20px 2px; border-bottom:1px solid var(--line);
  }
  .etapes .tarif-table td{ display:block; width:auto; padding:0 !important; border-bottom:0 !important; }
  .etapes .tarif-table td:first-child{ grid-column:1; grid-row:1; font-size:21px; line-height:1; }
  .etapes .tarif-table td:nth-child(2){ grid-column:2; grid-row:1; font-size:15.5px; line-height:1.4; }
  .etapes .tarif-table td:nth-child(3){ grid-column:1 / -1; grid-row:2; font-size:14.5px; line-height:1.7; }

  /* --- FAQ : questions un cran plus petites, bouton bien tapable --- */
  .faq-q{ font-size:20px; line-height:1.35; padding:22px 0; gap:16px; }

  /* --- CHIFFRES 2×2 plus denses --- */
  .stat{ padding:34px 12px; }

  /* --- Carrousel matériaux : cartes un peu plus larges --- */
  .mat-card{ flex-basis:78vw; }
}

/* ============================================================
   ≤ 480px — petits téléphones : gouttière 20px partout,
   titres recalibrés pour éviter les coupes disgracieuses.
   ============================================================ */
@media (max-width:480px){
  .wrap{ padding:0 20px; }
  .mats .head, .mats-lead{ padding-left:20px; padding-right:20px; }
  .mats-carousel{ padding:6px 20px 10px; scroll-padding-left:20px; scroll-padding-right:20px; }
  .mats .mats-cscroll{ padding:0 20px; }
  .videostrip-cap{ padding:0 20px 42px; }

  .hero h1{ font-size:clamp(33px,10vw,40px); }
  .h2{ font-size:clamp(28px,8.6vw,34px); }
  .h-cap{ font-size:clamp(23px,7vw,28px); }
  .cta h2{ font-size:clamp(30px,9vw,36px); }
  .videostrip-cap h2{ font-size:clamp(27px,8.4vw,32px); }
}