/* ===========================================================================
   TÉLÉPHONE — MISE AU POINT GÉNÉRALE
   ---------------------------------------------------------------------------
   Relevé fait à 375 px sur les 29 pages : le titre d accueil et le second
   bouton sortaient du cadre, le visuel du camion était poussé hors marge, une
   quinzaine de textes descendaient sous 12 px et des liens n offraient que
   21 px de hauteur au doigt.

   Les sélecteurs reprennent ceux de la maquette (.m-hero-light h1 et non h1
   seul) : sans cela les règles d origine, plus spécifiques, l emportaient.
   Cette feuille passe en dernier et ne concerne que le téléphone.
   =========================================================================== */

@media (max-width: 700px) {

  /* ------------------------------------------------------------- gouttière
     Le contenu ne touche plus le bord de l écran : 22 px de chaque côté,
     partout, y compris dans les sections de couleur. */
  .m-wrap { width: calc(100% - 44px); }

  /* --------------------------------------------------------------- titres
     clamp(2.8rem, 10.7vw, 4.3rem) : le plancher de 44,8 px s appliquait tel
     quel et « L assainissement, » sortait de sa colonne. */
  .m-hero-light h1,
  h1 {
    font-size: clamp(2rem, 8.2vw, 2.6rem);
    letter-spacing: -1.2px;
    line-height: 1.14;
    margin: 18px 0;
    overflow-wrap: break-word;
  }
  h2 { font-size: clamp(1.6rem, 6.4vw, 2rem); letter-spacing: -0.9px; }
  h3 { font-size: 1.02rem; letter-spacing: -0.3px; }

  /* ------------------------------------------------------- boutons du héros
     Deux boutons en flex:1 faisaient 171 px chacun : 352 px de contenu dans
     331 px utiles, le « Devis gratuit » sortait de l écran. */
  .m-hero-light .m-hero-actions,
  .m-hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 22px;
    width: 100%;
  }
  .m-hero-light .m-hero-actions .m-button,
  .m-hero-actions .m-button {
    width: 100%;
    min-width: 0;
    flex: none;
    min-height: 54px;
    padding: 15px 18px;
    font-size: 0.875rem;
    white-space: normal;
  }
  .m-hero-light .m-hero-actions .m-green { font-size: 0.875rem; }

  /* --------------------------------------------------------- visuel du héros */
  .m-hero-light-media { margin-top: 8px; }
  /* complements.css pilote la hauteur par aspect-ratio : fixer une hauteur
     ici faisait recalculer la largeur (526 px dans un cadre de 339) */
  .m-vehicle-frame { width: 100%; border-radius: 14px 14px 0 0; }
  .m-vehicle-caption { border-radius: 0 0 14px 14px; }

  /* ancien héros (pages intérieures) : la photo était décalée de 10 px vers
     la droite et l encart 24h/24, posé en négatif, finissait hors cadre */
  .m-hero-visual { margin-left: 0; height: 300px; border-radius: 14px 14px 46px 14px; }
  .m-availability {
    left: 0;
    right: 0;
    bottom: 14px;
    width: auto;
    margin: 0 12px;
    padding: 14px 16px;
    border-radius: 12px;
  }
  .m-availability strong { font-size: 1.22rem; }

  /* -------------------------------------------------------- plancher de texte
     Rien en dessous de 12,5 px : en dessous, un texte devient illisible au
     bras tendu et Safari propose de zoomer sur le champ. */
  small,
  th,
  td,
  figcaption,
  .m-eyebrow,
  .m-hero-light .m-eyebrow,
  .m-image-label,
  .m-social-status,
  .m-hero-checks,
  .m-hero-light .m-hero-checks,
  .m-hero-bottom,
  .m-hero-light-bottom,
  .m-vehicle-caption small,
  .m-vehicle-caption strong,
  .m-availability-pill small,
  .m-availability p,
  .m-hero-image-note,
  .m-footer-main p,
  .m-preuve-detail,
  .m-dept__detail,
  .cookies__toujours,
  .m-form-note,
  .m-service-top > span { font-size: max(0.78rem, 12.5px); }

  .m-eyebrow,
  .m-hero-light .m-eyebrow { letter-spacing: 1.2px; line-height: 1.55; }
  .m-hero-checks,
  .m-hero-light .m-hero-checks { gap: 10px 16px; }
  .m-hero-light-bottom,
  .m-hero-bottom { letter-spacing: 0.8px; gap: 12px 14px; }

  /* les intitulés de colonnes du pied étaient tombés à 10,9 px */
  .m-footer-links h3,
  .m-footer-contact h3,
  .m-footer-columns .m-footer-social h3 { font-size: 0.79rem; letter-spacing: 1.4px; }

  /* Reprises nominatives : sur ces éléments une règle plus spécifique de la
     maquette l emportait sur le plancher ci-dessus. Relevé à 375 px. */
  .m-contact-phone small,
  .m-contact-email small,
  .m-contact-hours small,
  .m-review-total span,
  .m-reviews-position span,
  .m-review-author small,
  .m-review-service span,
  .m-footer-availability small,
  .m-footer-contact small,
  .m-footer-brand small,
  .m-brand-name small,
  .m-footer-complete .m-footer-bottom span,
  .m-footer-complete .m-footer-bottom a,
  .m-footer-regions span,
  .m-intro-bottom span,
  .m-hero-light-bottom span,
  .m-radar-node b,
  .m-tableau th,
  .m-tableau td,
  .cookies__entete .cookies__toujours,
  .m-doc-section small { font-size: max(0.78rem, 12.5px); }

  /* ------------------------------------------------------- cibles au doigt
     44 px de hauteur minimale ; les liens de texte gardent leur taille
     visuelle et gagnent la zone par le remplissage. */
  .m-text-link,
  .m-footer-bottom a,
  .m-footer-bottom button,
  .m-footer-regions a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .m-footer-links a,
  .m-footer-links button {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 4px 0;
  }
  .cps-theme { min-height: 40px; }
  .cps-theme button { min-height: 36px; min-width: 40px; }
  .m-intro-replay { min-height: 40px; padding: 8px 0; }

  /* ------------------------------------------------------------ respiration
     Les blocs de contenu ne collent plus aux bords : ils restent dans la
     gouttière avec un angle franc. */
  .m-service-card,
  .m-review-card,
  .m-department-panel,
  .m-commitment-visual,
  .m-page-banner-media,
  .m-contact-visual,
  .m-doc-section { border-radius: 14px; }
  .m-commitment-visual,
  .m-page-banner-media { overflow: hidden; }

  /* ------------------------------------------------------------ débordements
     Un tableau large défile dans son cadre au lieu de pousser la page. */
  .m-tableau,
  .m-table-wrap { max-width: 100%; overflow-x: auto; }
  pre, code { overflow-x: auto; max-width: 100%; }
}

/* ------------------------------------------------------------- petits écrans
   iPhone SE et Android d entrée de gamme : 320 à 380 px. */
@media (max-width: 380px) {
  .m-wrap { width: calc(100% - 36px); }
  .m-hero-light h1,
  h1 { font-size: clamp(1.8rem, 8.4vw, 2.2rem); letter-spacing: -1px; }
  .m-hero-light .m-hero-actions .m-button,
  .m-hero-actions .m-button { font-size: 0.84rem; padding: 14px 14px; }
  .m-hero-light .m-hero-actions .m-green { font-size: 0.84rem; }
  .m-services-grid { grid-template-columns: 1fr; }
  .m-steps { grid-template-columns: 1fr; }
  .m-departments { grid-template-columns: 1fr; }
  .m-hero-visual { height: 260px; }
}

/* ===========================================================================
   BANDEAU DES PUBLICS — TÉLÉPHONE
   ---------------------------------------------------------------------------
   « Particuliers · Professionnels · Copropriétés · Commerces » passait en
   flex-wrap centré : deux colonnes de largeurs différentes, des séparateurs
   verts échoués en bout de ligne et un libellé aligné à droite sans son point.
   Une grille de deux colonnes remet les quatre publics d aplomb.
   =========================================================================== */
@media (max-width: 700px) {
  .m-hero-light-bottom {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
    justify-content: stretch;
    white-space: normal;
  }
  /* les séparateurs n ont plus de sens dans une grille */
  .m-hero-light-bottom > i { display: none; }
  .m-hero-light-bottom > span {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-start;
    text-align: left;
    font-size: max(0.72rem, 11.5px);
    letter-spacing: 1px;
    line-height: 1.35;
  }
  /* une pastille propre devant chaque public, à la place des points flottants */
  .m-hero-light-bottom > span::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green, #2f892c);
    flex-shrink: 0;
  }
  /* le dernier libellé était masqué : dans une grille, les quatre tiennent */
  .m-hero-light-bottom > span:last-child { display: flex; }
}

/* sous 340 px seulement : a 375 px les deux colonnes tiennent tres bien, et
   quatre lignes empilees mangeaient 129 px de hauteur pour rien */
@media (max-width: 340px) {
  .m-hero-light-bottom { grid-template-columns: 1fr; gap: 8px; }
}

/* ===========================================================================
   CARTES DE PRESTATIONS — UNE PAR LIGNE SUR TÉLÉPHONE
   ---------------------------------------------------------------------------
   Deux cartes par ligne sur 375 px laissaient 160 px par carte : titres coupés
   en deux, paragraphes en colonnes de quatre mots, photo illisible. Une carte
   par ligne rend chaque prestation lisible d un coup d œil.
   =========================================================================== */
@media (max-width: 700px) {
  .m-services-grid { grid-template-columns: 1fr; gap: 14px; }
  .m-service-card {
    min-height: 0;
    padding: 20px 20px 18px;
    border-radius: 14px;
  }
  /* la photo de fond a la place de respirer : la carte devient une vignette
     large plutot qu une colonne etroite */
  .m-service-card { aspect-ratio: 16 / 11; }
  .m-service-top { min-height: 0; margin-bottom: auto; }
  .m-service-card h3 { font-size: 1.32rem; line-height: 1.2; letter-spacing: -0.5px; }
  .m-service-card p {
    font-size: max(0.86rem, 13px);
    line-height: 1.6;
    margin: 10px 0 16px;
    max-width: 38ch;
  }
  .m-service-link { font-size: max(0.8rem, 12.5px); padding-top: 14px; }
  .m-service-link svg { width: 20px; height: 20px; }

  /* mêmes règles pour les autres grilles de cartes du site */
  .m-zone-cards,
  .m-commitment-cards,
  .m-avis-grille,
  .m-plan-grille { grid-template-columns: 1fr; }
}

/* ===========================================================================
   COMMANDES DU CARROUSEL — TÉLÉPHONE
   ---------------------------------------------------------------------------
   Les flèches des avis et le bouton « retour en haut » occupaient la même
   colonne (x ≈ 315 px) : dès que la section arrivait en bas d écran, le rond
   bleu se posait sur la flèche verte. Les commandes passent à gauche, la
   progression à droite : plus aucun croisement possible.
   =========================================================================== */
@media (max-width: 700px) {
  .m-reviews-controls {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
  }
  .m-reviews-arrows { margin: 0; }
  .m-reviews-position { flex: 1; justify-content: flex-end; }

  /* le bouton flottant garde ses distances avec la barre d appel */
  .cps-remonter { right: 14px; bottom: 88px; }
}

/* ===========================================================================
   PIED DE PAGE — RESSERRÉ SUR TÉLÉPHONE
   ---------------------------------------------------------------------------
   Relevé avant reprise : quatre écrans de défilement pour atteindre le bas.
   Chaque lien occupait 56 px de haut, les onze liens des deux colonnes
   s empilaient sur une seule file, les huit départements prenaient quatre
   lignes et les cinq mentions légales cinq lignes de plus.
   Ici : liens sur deux colonnes, interlignes serrés, départements en bande
   qui défile, mentions légales sur deux colonnes.
   =========================================================================== */
@media (max-width: 700px) {

  /* ------------------------------------------------------------- marque */
  .m-footer-columns { padding-top: 22px; padding-bottom: 18px; gap: 20px 16px; }
  .m-footer-logo { margin-bottom: 10px; }
  .m-footer-logo img { height: 42px; }
  .m-footer-company > p { font-size: max(0.82rem, 12.5px); line-height: 1.55; max-width: 100%; }
  .m-footer-social { margin-top: 14px; }
  .m-social-link { width: 40px; min-width: 40px; height: 40px; min-height: 40px; }

  .m-footer-availability { margin-top: 12px; padding: 10px 13px; }
  .m-footer-availability strong { font-size: 0.95rem; }

  /* --------------------------------------------------- colonnes de liens
     Les deux listes passent sur deux colonnes chacune : onze liens tiennent
     alors en six lignes au lieu de onze. */
  .m-footer-links h3,
  .m-footer-contact h3 { margin-bottom: 8px; }

  .m-footer-links {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  .m-footer-links h3 { grid-column: 1 / -1; }
  .m-footer-links a,
  .m-footer-links button {
    display: block;
    min-height: 0;
    padding: 6px 0;
    font-size: max(0.8rem, 12.5px);
    line-height: 1.3;
  }
  /* la liste elle-même se répartit sur deux colonnes */
  .m-footer-links {
    column-count: 2;
    column-gap: 16px;
    display: block;
  }
  .m-footer-links h3 { column-span: all; }

  /* ------------------------------------------------------------- contact */
  .m-footer-contact { grid-column: 1 / -1; }
  .m-footer-contact a,
  .m-footer-contact > div { padding: 5px 0; }
  .m-footer-contact small { font-size: max(0.66rem, 11px); letter-spacing: 1px; }
  .m-footer-contact strong { font-size: 1.12rem; }
  .m-footer-contact-button { margin-top: 10px; min-height: 46px; }

  /* --------------------------------------------------- départements
     Huit pastilles sur quatre lignes : une bande qui défile au doigt tient
     sur une seule. */
  .m-footer-regions {
    display: grid;
    gap: 8px;
    padding: 14px 0;
  }
  .m-footer-regions > span { font-size: max(0.66rem, 11px); letter-spacing: 1.2px; }
  .m-footer-regions > div {
    display: flex;
    flex-wrap: nowrap;
    gap: 7px;
    overflow-x: auto;
    padding-bottom: 3px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .m-footer-regions > div::-webkit-scrollbar { display: none; }
  .m-footer-regions a {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 6px 11px;
    font-size: max(0.74rem, 12px);
    white-space: nowrap;
  }

  /* --------------------------------------------------- mentions légales
     Cinq liens empilés sur cinq lignes : deux colonnes suffisent. */
  .m-footer-bottom {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 14px;
    padding-top: 14px;
    padding-bottom: 84px;
    font-size: max(0.74rem, 12px);
  }
  .m-footer-complete .m-footer-bottom > span:first-child {
    grid-column: 1 / -1;
    margin-bottom: 2px;
    opacity: 0.75;
  }
  .m-footer-complete .m-footer-bottom a,
  .m-footer-complete .m-footer-bottom button {
    min-height: 32px;
    padding: 3px 0;
    margin: 0;
    justify-content: flex-start;
  }
  .m-intro-replay { grid-column: 1 / -1; min-height: 32px; padding: 3px 0; }

  /* ------------------------------------------------------------- bandeau
     d urgence au-dessus du pied : il n a pas besoin de trois lignes */
  .m-footer-urgent { padding: 18px 0; }
  .m-footer-urgent h2 { font-size: 1.28rem; line-height: 1.3; }
  .m-footer-urgent-actions { margin-top: 12px; gap: 8px; }
  .m-footer-urgent-actions > * { min-height: 46px; font-size: max(0.84rem, 13px); }
}