/* ============================================================
   MOBILE — FAMILLE TAPIS
   maquette-restauration-tapis · maquette-renovation-tapis ·
   maquette-tapis-degat-des-eaux
   Chargé APRÈS le CSS inline et mobile-common.css.
   Uniquement des règles en @media ≤900px : desktop inchangé.
   ============================================================ */

@media (max-width:900px){

  /* ---------- Rythme vertical & typographie ---------- */
  .section{ padding:78px 0; }
  .editorial{ padding:92px 0; }
  .editorial .sep{ height:44px; margin-bottom:34px; }
  .ed-statement{ font-size:clamp(26px,7.2vw,34px); line-height:1.22; margin-top:22px; }
  .ed-body{ font-size:16px; line-height:1.75; margin-top:26px; }
  .quote .ed-quote{ font-size:clamp(23px,6.6vw,32px); }

  /* Hint des carrousels : ne doit plus être coupé */
  .drag-hint{ white-space:normal; line-height:1.55; }

  /* Texte justifié -> aligné à gauche (évite les "rivières" sur colonne étroite) */
  .seo-lead, .seo-block p, .mag-block p{ text-align:left; }
  .seo-block h3, .seo-cols h3, .mag-block h3{ line-height:1.25; }
  .seo-carousel, .mag-body{ gap:30px; }

  /* ---------- Boutons : pleine largeur, centrés, ≥52px ---------- */
  .btn, .btn-outline, .btn-solid{
    width:100%; max-width:420px;
    justify-content:center; text-align:center;
    padding-left:22px; padding-right:22px; min-height:52px;
  }

  /* ---------- Cartes trio (hubs) & cartes tarifs (dégât des eaux) ---------- */
  .tcard{ padding:36px 26px 34px; }
  .tcard h3{ line-height:1.18; }
  .tcard .price{ line-height:1.25; display:inline-block; margin-top:4px; }
  .tcard-ico{ margin-bottom:22px; }

  /* ---------- Chiffres ---------- */
  .stat{ padding:42px 18px; }

  /* ---------- FAQ : plus compact, confortable au doigt ---------- */
  .faq-q{ font-size:21px; line-height:1.3; gap:16px; padding:22px 0; }
  .faq-a p{ font-size:15.5px; line-height:1.7; }

  /* ---------- Sections vidéo A / B : marges cohérentes (22px) ---------- */
  .vA-title{ top:24px; left:22px; right:22px; font-size:19px; line-height:1.35; }
  .vA-btn{ right:22px; bottom:30px; }
  .vA-text{ padding:0 22px 112px; }
  .vB-text{ left:22px; right:22px; bottom:48px; }

  /* ---------- CTA hubs : les 4 avantages en 1 colonne aérée ---------- */
  .perks:has(li b){ grid-template-columns:1fr; max-width:440px; }
  .perks:has(li b) li{ border-left:0; padding:22px 10px; }
  .perks:has(li b) li + li{ border-top:1px solid rgba(250,246,240,.16); }
  .perks b{ margin-bottom:6px; }
  .perks span{ font-size:13.5px; line-height:1.55; }

  /* ---------- Piliers (rénovation) : la carte grandit avec son texte
       (l'inline la fige en 16/12 et le titre est rogné) ---------- */
  .pl-grid{ gap:12px; }
  .pl-card{ height:auto; min-height:0; aspect-ratio:auto; }
  .pl-body{ padding:225px 22px 32px; max-width:none; transform:none; }
  .pl-card:hover .pl-body{ transform:none; }
  .pl-body p, .pl-card:hover .pl-body p{
    opacity:1; max-height:none; transform:none;
    margin:12px 0 20px; font-size:15.5px; line-height:1.7;
  }
  .pl-card h3{ font-size:clamp(28px,8vw,34px); margin:10px 0 0; }
  .pl-scrim, .pl-card:hover .pl-scrim{
    background:linear-gradient(rgba(18,16,13,.05), rgba(18,16,13,.45) 40%, rgba(18,16,13,.9) 66%);
  }
  .pl-card::after{ inset:14px; }

  /* ---------- Dégât des eaux ---------- */
  /* Hero : voile renforcé pour la lisibilité du fil d'Ariane et du titre */
  .hero-bg + .hero-scrim{
    background:linear-gradient(180deg, rgba(16,14,11,.72), rgba(16,14,11,.42) 40%, rgba(16,14,11,.56) 62%, rgba(16,14,11,.9));
  }
  .hero .crumb{ font-size:10.5px; line-height:1.6; }

  /* Badge "agréés par les assurances" : flux en ligne propre
     (l'inline-flex éclatait le texte en deux colonnes) */
  .assur-badge{ display:inline-block; text-align:left; line-height:1.6; padding:13px 20px; border-radius:18px; }
  .assur-badge svg{ display:inline-block; vertical-align:-3px; margin-right:9px; }
  .assur-steps{ gap:30px 28px; margin-top:44px; }

  /* Carrousel texte "Comprendre" : padding aligné sur le reste (22px) */
  .subj-carousel-wrap{ padding:0 22px; margin-top:48px; }
  .subj .wrap{ gap:36px; }

  /* Étapes du process (cartes claires) */
  .step{ padding:36px 24px; }
}

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

  /* Tableaux (tarifs sombres + étapes claires) : colonnes respirables */
  .tarif-table th, .tarif-table td{ padding:14px 10px 14px 0; font-size:13.5px; }
  .tarif-table td:nth-child(2){ font-size:16px; }
  .etapes .tarif-table td:first-child{ width:34px; font-size:19px; }
  .etapes .tarif-table td:nth-child(2){ font-size:14.5px; }
  .tarifs .note, .etapes .note{ font-size:12.5px; }

  /* Dossier assurance : 1 colonne dès 640px (2 colonnes trop serrées) */
  .assur-steps{ grid-template-columns:1fr; gap:28px; }
}

/* ============================================================ */
@media (max-width:480px){

  /* Titres de section : un cran plus contenus sur petit écran */
  .h2{ font-size:clamp(29px,8.4vw,34px); }
  .filmstrip-cap h2{ font-size:clamp(28px,8.2vw,34px); }
  .videostrip-cap h2{ font-size:clamp(27px,8vw,32px); }
}