/* ============================================================
   MOBILE — famille sous-pages prestation + expertise tapis
   (maquette-expertise-tapis, maquette-sous-page-bordures /
    -couleurs / -kilim / -prestation / -tapis-brule / -trous)
   Chargé APRÈS le CSS inline et mobile-common.css.
   Uniquement des @media : le desktop reste pixel-identique.
   ============================================================ */

@media (max-width:900px){

  /* ---------- Rythme vertical général ---------- */
  .section{ padding:78px 0; }

  /* ---------- HERO ---------- */
  .hero .wrap{ padding-top:112px; padding-bottom:56px; }
  .hero .crumb{ margin-bottom:18px; line-height:1.6; }
  .hero .eyebrow{ margin-bottom:14px; }
  .hero h1{ font-size:clamp(32px,8.6vw,44px); line-height:1.1; }
  .hero p{ font-size:15.5px; line-height:1.75; margin:20px 0 30px; }

  /* ---------- CHIFFRES ---------- */
  .stat{ padding:42px 16px; }
  .stat .num{ font-size:clamp(36px,10vw,46px); }
  .stat .lbl{ margin-top:10px; }

  /* ---------- SUJET (Comprendre / Réalisations) ---------- */
  .subj .wrap{ gap:44px; }
  .subj .h2{ margin-bottom:22px; }
  .subj p{ font-size:15.5px; line-height:1.78; }
  .subj-body{ margin-top:26px; }
  .subj-body .mag-block p{ font-size:15.5px; line-height:1.75; }

  /* ---------- EMPLACEMENT VIDÉO ---------- */
  .videostrip{ height:54vh; min-height:360px; }
  .videostrip .ph::after{ padding:0 26px; text-align:center; line-height:1.9; letter-spacing:.16em; }
  .videostrip-cap{ padding:0 22px 44px; }
  .videostrip-cap h2{ font-size:clamp(27px,7.4vw,36px); line-height:1.1; }

  /* ---------- PROCESS (3 étapes) ---------- */
  .process .head{ margin-bottom:40px; }
  .step{ padding:34px 26px; }
  .step .n{ margin-bottom:14px; }
  .step h3{ font-size:24px; }
  .step p{ font-size:15px; line-height:1.72; }

  /* ---------- Têtes de sections ---------- */
  .aa .head, .etapes .head, .tarifs .head, .faq .head,
  .autres .head, .mag-head{ margin-bottom:36px; }
  .mag-lead{ margin-bottom:40px; }

  /* ---------- AVANT / APRÈS ---------- */
  .aa-grid{ gap:24px; }
  .aa-cap{ left:18px; bottom:16px; font-size:18px; }

  /* ---------- MAGAZINE (carrousel SEO) ---------- */
  .mag-body{ gap:24px; }
  .mag-block{ flex-basis:78vw; }
  .mag-block h3{ font-size:21px; }
  .mag-block p{ text-align:left; font-size:15.5px; line-height:1.75; }
  .mag-hint, .subj-hint{ margin-top:12px; }

  /* ---------- TARIFS ---------- */
  .tarif-grid{ gap:18px; }
  .tcard{ padding:32px 24px; }
  .tcard h3{ font-size:25px; }
  .tcard .price{ font-size:30px; }
  .tcard p{ font-size:15px; line-height:1.72; }
  .tarifs .note, .etapes .note{ font-size:13.5px; line-height:1.7; }

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

  /* ---------- CTA ---------- */
  .cta p{ font-size:15.5px; line-height:1.75; }
  .cta .perks{ margin-top:40px; }

  /* ---------- AUTRES PRESTATIONS ---------- */
  .acard{ aspect-ratio:4/5; }
  .acard .lab{ left:20px; right:20px; bottom:20px; }
  .acard .lab h3{ font-size:23px; }
}

@media (max-width:640px){

  /* Boutons pleine largeur, hauteur confortable (>=48px) */
  .btn{ display:flex; width:100%; justify-content:center; text-align:center; padding:17px 24px; }

  /* Hero un peu plus compact sur petit écran */
  .hero{ min-height:78vh; }

  /* ---------- TABLEAU DES ÉTAPES → fiches empilées ---------- */
  .etapes .tarif-table{ display:block; margin-top:26px; }
  .etapes .tarif-table thead, .etapes .tarif-table tbody{ display:block; }
  .etapes .tarif-table thead tr{ display:flex; gap:18px; padding:0 0 12px; border-bottom:1px solid var(--line); }
  .etapes .tarif-table th{ padding:0; width:auto !important; border-bottom:0; }
  .etapes .tarif-table tbody tr{
    display:grid; grid-template-columns:auto 1fr; column-gap:16px; align-items:baseline;
    padding:20px 0; border-bottom:1px solid var(--line);
  }
  .etapes .tarif-table td{ border-bottom:0; padding:0; }
  .etapes .tarif-table td:first-child{ width:auto; grid-row:1; font-size:21px; line-height:1.2; }
  .etapes .tarif-table td:nth-child(2){ grid-row:1; font-size:15.5px; line-height:1.4; }
  .etapes .tarif-table td:nth-child(3){ grid-column:1 / -1; margin-top:9px; font-size:15px; line-height:1.7; }

  /* ---------- TABLEAU DES TARIFS (fond vert) → fiches ---------- */
  .tarifs .tarif-table{ display:block; margin-top:26px; }
  .tarifs .tarif-table thead, .tarifs .tarif-table tbody{ display:block; }
  .tarifs .tarif-table thead tr{ display:flex; gap:18px; padding:0 0 12px; border-bottom:1px solid rgba(250,246,240,.16); }
  .tarifs .tarif-table th{ padding:0; border-bottom:0; }
  .tarifs .tarif-table tbody tr{ display:block; padding:20px 0; border-bottom:1px solid rgba(250,246,240,.16); }
  .tarifs .tarif-table td{ display:block; border-bottom:0; padding:0; }
  .tarifs .tarif-table td:first-child{ font-weight:600; color:var(--ivory); font-size:15.5px; }
  .tarifs .tarif-table td:nth-child(2){ font-size:20px; margin-top:6px; }
  .tarifs .tarif-table td:nth-child(3){ margin-top:6px; font-size:14.5px; color:rgba(250,246,240,.72); }
}

@media (max-width:480px){
  .hero h1{ font-size:clamp(30px,8.6vw,36px); }
  .h2{ font-size:clamp(27px,7.6vw,32px); }
  .h-cap{ font-size:clamp(23px,6.4vw,28px); }
  .cta h2{ font-size:clamp(29px,8vw,36px); }
}