/* ============================================================
   MOBILE — famille NETTOYAGE (hub + sous-pages matière/origine
   + détachage + tapis mité). Chargé APRÈS le CSS inline et
   après mobile-common.css. Uniquement des règles @media :
   le design desktop reste strictement identique.
   Templates couverts :
   A) maquette-nettoyage-tapis.html (hub)
   B) maquette-nettoyage-laine.html
   C) maquette-nettoyage-soie/viscose.html
   D) groupe berbere/chinois/kilim/orient/turc/detachage/mite
   (B, C, D partagent le même squelette « sous-page »)
   ============================================================ */

/* ---------- ≤ 900px : tablette / mobile large ---------- */
@media (max-width:900px){

  /* --- Commun aux 4 templates ------------------------------ */

  /* Bandeau services offerts : colonne alignée à gauche, centrée en bloc */
  .offer-band{ padding:26px 0; }
  .offer-band ul{ flex-direction:column; align-items:flex-start; width:max-content; max-width:100%; margin:0 auto; gap:12px; }
  .offer-band ul li{ font-size:14px; }

  /* Chiffres : cases moins hautes, rythme plus compact */
  .stats .stat{ padding:34px 16px; }
  .stats .stat .lbl{ margin-top:9px; }

  /* FAQ : questions confortables, bouton bien tapable */
  .faq .faq-q{ font-size:20px; line-height:1.3; gap:16px; padding:22px 0; }
  .faq .faq-a p{ font-size:15px; line-height:1.7; }

  /* --- Template A (hub nettoyage) --------------------------- */

  /* Hero : respiration sous le header burger */
  .hero .hero-content{ padding-top:18px; }
  .hero-sub{ font-size:15.5px; line-height:1.7; }

  /* Trio de cartes : padding plus contenu */
  .trio-grid .tcard{ padding:36px 26px 34px; }
  .trio-grid .tcard h3{ font-size:27px; }
  .trio-grid .tcard p{ font-size:15px; line-height:1.65; }
  .trio-grid .tcard .tcard-ico{ margin-bottom:22px; }

  /* Éditorial / citation : rythme vertical plus compact */
  .editorial{ padding:84px 0; }
  .editorial .sep{ height:44px; margin-bottom:34px; }
  .editorial .ed-body{ font-size:16px; line-height:1.75; }

  /* Sections vidéo : cadrage du texte et marges cohérentes */
  .vA, .vB{ height:76vh; min-height:520px; }
  .vA-title{ top:26px; left:22px; font-size:19px; }
  .vA-text{ padding:0 22px 112px; }
  .vA-text p{ font-size:15px; }
  .vA-btn{ right:22px; bottom:32px; }
  .vB-text{ left:22px; right:22px; bottom:46px; }
  .vB-text p{ font-size:15px; }

  /* Méthode compacte */
  .method-compact .head{ margin-bottom:40px; }
  .mc-grid{ gap:30px 30px; }
  .mc-step p{ font-size:15px; line-height:1.7; }

  /* Sections matière / origine : têtes moins hautes */
  .matsec .mat-head{ margin-bottom:36px; }
  .matsec .mat-head p{ font-size:15.5px; }

  /* Carrousel SEO : texte à gauche (le justifié creuse des trous) */
  .seo-lead{ text-align:left; }
  .seo-block p{ text-align:left; }
  .seo-carousel{ gap:28px; }
  .seo-block{ flex-basis:88vw; }
  .seo-block h3{ font-size:23px; }
  .seo-block p{ font-size:15.5px; line-height:1.75; }
  .seo-head{ margin-bottom:34px; }

  /* Tarifs (section verte du hub) */
  .tarifs-dark{ padding:84px 0; }
  .tarif-lead{ margin-bottom:40px; }
  .tgrid{ gap:16px; }
  .tgc{ padding:32px 24px; }
  .tgc p{ font-size:14px; line-height:1.65; }

  /* Bandeau détachage immersif */
  .feature-band{ min-height:0; padding:84px 0; }
  .fb-content p{ font-size:15.5px; }

  /* Savoir-faire : moins d'air sous la pile de photos */
  .sf{ padding-bottom:96px; }
  .sf .wrap{ gap:44px; }
  .sf-text p{ font-size:15.5px; }

  /* Conversion (hub — les perks du hub contiennent un <b>) :
     trois bandeaux empilés, titre seul sur sa ligne, texte dessous. */
  .cta .perks:has(li b){ grid-template-columns:1fr; max-width:460px; }
  .cta .perks li:has(> b){ border-left:0; padding:22px 4px; text-align:left; }
  .cta .perks li:has(> b) + li:has(> b){ border-top:1px solid rgba(250,246,240,.16); }
  .cta .perks b{ display:block; font-size:19px; margin-bottom:7px; }
  .cta .perks li:has(> b) span{ display:block; font-size:13.5px; line-height:1.55; }

  /* Nettoyage ou restauration : le tableau passe en deux blocs empilés,
     sinon les deux colonnes se touchent sur mobile. */
  .pricetable .row{ flex-direction:column; align-items:flex-start; gap:9px; padding:24px 22px; }
  .pricetable .row .name{ font-size:22px; line-height:1.22; }
  .pricetable .row .price{ font-size:14px; line-height:1.6; }

  /* Détachage ciblé : photo sous le texte */
  .detach{ overflow:hidden; }
  .detach .wrap{ grid-template-columns:1fr; gap:38px; }
  .detach-text p{ font-size:15.5px; }
  .detach-media{ aspect-ratio:4/3; }
  .detach-wm{ font-size:clamp(90px,30vw,150px); right:-6vw; color:rgba(250,246,240,.028); }

  /* --- Templates B/C/D (sous-pages) ------------------------- */

  /* Hero sous-page : contenu bien calé au-dessus du bas */
  .hero .wrap{ padding-top:150px; padding-bottom:64px; }
  .hero .crumb{ margin-bottom:16px; }
  .hero .wrap h1{ font-size:clamp(38px,11vw,64px); }
  .hero .wrap p{ font-size:15.5px; margin:22px 0 30px; }

  /* Section « Comprendre » : gap raisonnable, textes confort */
  .subj .wrap{ gap:36px; }
  .subj p{ font-size:15.5px; }
  .subj-body .mag-block h3{ font-size:21px; }
  .subj-body .mag-block p{ font-size:15.5px; line-height:1.75; }

  /* Emplacement vidéo : hauteur pilotée par le contenu
     (évite tout texte coupé sur petits écrans) */
  .videostrip{ height:auto; min-height:0; }
  .videostrip-cap{ position:relative !important; top:auto !important; bottom:auto !important; padding:88px 0 !important; }
  .videostrip-cap p{ font-size:15.5px; }
  .vs-text{ max-width:none; }

  /* Process : cases moins massives */
  .process .head{ margin-bottom:38px; }
  .steps .step{ padding:32px 24px; }
  .steps .step h3{ font-size:24px; }
  .steps .step p{ font-size:15px; line-height:1.7; }
  .steps .step .n{ margin-bottom:14px; }

  /* Têtes de sections tableau / magazine */
  .etapes .head{ margin-bottom:34px; }
  .tarifs .head{ margin-bottom:36px; }
  .mag-head{ margin-bottom:30px; }
  .mag-lead{ margin-bottom:40px; }

  /* Carrousel magazine : texte à gauche + gaps réduits */
  .mag-body{ gap:28px; }
  .mag-block p{ text-align:left; font-size:15.5px; line-height:1.75; }
  .mag-block h3{ font-size:22px; }

  /* Cartes tarifs (fond vert) */
  .tarif-grid{ gap:16px; }
  .tarif-grid .tcard{ padding:30px 24px; }
  .tarif-grid .tcard h3{ font-size:25px; }
  .tarif-grid .tcard .price{ font-size:30px; }
  .tarif-grid .tcard p{ font-size:14.5px; }
  .tarifs .note, .etapes .note{ font-size:13.5px; line-height:1.65; }

  /* Autres prestations */
  .autres-grid{ gap:18px; }
}

/* ---------- ≤ 640px : mobile ---------- */
@media (max-width:640px){

  /* Boutons : pleine largeur, hauteur ≥ 48px, centrés */
  .btn, .btn-outline, .btn-solid{
    display:flex; width:100%; justify-content:center; text-align:center;
    padding:17px 20px; box-sizing:border-box;
  }
  /* … garde-fou : jamais pleine largeur dans le header */
  .nav .btn, .nav .btn-outline{ width:auto; display:inline-flex; }

  /* --- Template A (hub) : cartes matière / origine en liste --- */
  .mat-grid, .mat-grid.cols5{ grid-template-columns:1fr; gap:14px; }
  .mat-card{
    display:grid; grid-template-columns:122px 1fr;
    grid-template-rows:minmax(14px,1fr) auto auto auto minmax(14px,1fr);
    column-gap:18px; padding:0 18px 0 0;
  }
  .mat-card .thumb, .mat-grid.cols5 .thumb{
    grid-row:1 / -1; grid-column:1; aspect-ratio:auto; height:100%; min-height:142px;
  }
  .mat-card h3, .mat-grid.cols5 .mat-card h3{ grid-row:2; grid-column:2; font-size:20px; margin:0 0 4px; }
  .mat-card p, .mat-grid.cols5 .mat-card p{ grid-row:3; grid-column:2; font-size:14px; line-height:1.55; margin:0 0 8px; }
  .mat-card .lnk, .mat-grid.cols5 .mat-card .lnk{ grid-row:4; grid-column:2; margin:0; align-self:start; justify-self:start; }

  /* Hub : perks de conversion plus lisibles */
  .cta .perks span{ font-size:13px; }

  /* Curseur avant/après (si présent) : poignée généreuse */
  .ba-knob{ width:52px; height:52px; }

  /* --- Sous-pages : tableaux empilés (fini le 3 colonnes serré) --- */

  /* Tableau « étapes » (fond clair) : n° + titre + description */
  .etapes .tarif-table{ display:block; width:100%; }
  .etapes .tarif-table thead, .etapes .tarif-table tbody{ display:block; width:100%; }
  .etapes .tarif-table thead tr{ display:block; padding:0 0 12px; border-bottom:1px solid var(--line); }
  .etapes .tarif-table thead th{ display:inline-block; width:auto !important; border:0; padding:0 16px 0 0; }
  .etapes .tarif-table tbody tr{
    display:grid; grid-template-columns:44px 1fr; column-gap:16px;
    padding:18px 0; border-bottom:1px solid var(--line);
  }
  .etapes .tarif-table tbody td{ display:block; border:0; padding:0; width:auto !important; }
  .etapes .tarif-table tbody td:first-child{ grid-row:1 / span 2; font-size:26px; padding-top:1px; }
  .etapes .tarif-table tbody td:nth-child(2){ font-size:16px; margin-bottom:5px; }
  .etapes .tarif-table tbody td:nth-child(3){ grid-column:2; font-size:14.5px; line-height:1.65; }

  /* Tableau tarifs (fond vert) : fiches empilées */
  .tarifs .tarif-table{ display:block; width:100%; margin-top:28px; }
  .tarifs .tarif-table thead, .tarifs .tarif-table tbody{ display:block; width:100%; }
  .tarifs .tarif-table thead tr{ display:block; padding:0 0 12px; border-bottom:1px solid rgba(250,246,240,.16); }
  .tarifs .tarif-table thead th{ display:inline-block; width:auto !important; border:0; padding:0 16px 0 0; }
  .tarifs .tarif-table tbody tr{ display:block; padding:18px 0; border-bottom:1px solid rgba(250,246,240,.16); }
  .tarifs .tarif-table tbody td{ display:block; border:0; padding:2px 0; }
  .tarifs .tarif-table tbody td:first-child{ font-size:15.5px; color:var(--ivory); font-weight:500; }
  .tarifs .tarif-table tbody td:nth-child(2){ font-size:20px; }
  .tarifs .tarif-table tbody td:nth-child(3){ font-size:13.5px; color:rgba(250,246,240,.66); }

  /* Perks du CTA sous-page (liste à puces ✓) : colonne nette */
  .cta .perks:has(> li > svg){
    flex-direction:column; align-items:flex-start;
    width:max-content; max-width:100%; margin-left:auto; margin-right:auto;
    gap:12px;
  }
  .cta .perks:has(> li > svg) li{ font-size:14px; }
}

/* ---------- ≤ 480px : petits mobiles ---------- */
@media (max-width:480px){

  /* Hub : titres des grands blocs un cran plus contenus */
  .fb-content h2{ font-size:clamp(30px,8.6vw,38px); }
  .cta h2{ font-size:clamp(30px,8.6vw,38px); }

  /* Sous-pages : titres capitales sur 2-3 lignes propres */
  .h-cap{ font-size:clamp(23px,6.6vw,26px); letter-spacing:.05em; }

  /* Vignette vidéo hub : bouton « Voir » ne chevauche pas le texte */
  .vA-text{ padding-bottom:118px; }

  /* Cartes tarifs vertes (hub) : prix légèrement réduit */
  .tgc .price{ font-size:40px; }
}

/* ---------- ≤ 360px : très petits écrans ---------- */
@media (max-width:360px){
  .faq .faq-q{ font-size:19px; }
  .mat-card{ grid-template-columns:104px 1fr; column-gap:14px; }
  .mat-card .thumb, .mat-grid.cols5 .thumb{ min-height:126px; }
}