/* ===========================================================================
   TÉLÉPHONE — reprises de mise en page
   La maquette est pensée pour un grand écran ; sur téléphone, plusieurs blocs
   s aplatissaient en paragraphes collés. Cette feuille ne s applique qu en
   dessous de 700 px et ne touche pas au rendu sur ordinateur.
   =========================================================================== */

@media (max-width: 700px) {

  /* ------------------------------------------------------------- respiration */
  .m-section { padding: 52px 0; }
  .m-section-heading { margin-bottom: 26px; }

  /* ------------------------------------------------------------- contact */
  .m-contact-grid { row-gap: 28px; }

  .m-contact-copy > p {
    font-size: 0.94rem;
    line-height: 1.7;
    margin-bottom: 22px;
  }

  /* le numéro devient le point d appui du bloc, pas une ligne parmi d autres */
  .m-contact-phone {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 14px;
    margin: 0 0 12px;
    padding: 16px 18px;
    border-radius: 14px;
    background: linear-gradient(135deg, #0659a7, #04417a);
    color: #fff !important;
    box-shadow: 0 10px 26px rgba(6, 89, 167, 0.28);
    font-size: 1.65rem;
    letter-spacing: -0.5px;
  }
  .m-contact-phone svg {
    width: 26px;
    height: 26px;
    color: #fff;
  }
  .m-contact-phone span { display: grid; gap: 3px; line-height: 1.1; }
  .m-contact-phone small {
    font-size: 0.66rem;
    letter-spacing: 1.4px;
    color: rgba(255, 255, 255, 0.78);
  }

  /* e-mail et horaires : deux lignes lisibles, encadrées */
  .m-contact-email,
  .m-contact-hours {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 12px;
    margin: 0 0 10px;
    padding: 13px 16px;
    border: 1px solid #e2eaf3;
    border-radius: 12px;
    background: #fff;
    font-size: 0.92rem;
    line-height: 1.45;
    word-break: break-word;
  }
  .m-contact-email svg,
  .m-contact-hours svg {
    width: 20px;
    height: 20px;
    color: #0659a7;
  }
  .m-contact-hours { color: #4a5a6d; font-size: 0.86rem; }

  /* le visuel de bas de bloc gagne en présence */
  .m-contact-visual {
    height: 200px;
    border-radius: 16px;
    overflow: hidden;
    margin-top: 18px;
  }
  .m-contact-visual > span {
    font-size: 1.05rem;
    line-height: 1.25;
  }

  /* ------------------------------------------------------------- formulaire */
  .m-contact form {
    border-radius: 16px;
    padding: 22px 18px;
  }
  .m-contact form input,
  .m-contact form select,
  .m-contact form textarea {
    min-height: 48px;
    font-size: 1rem;      /* en dessous de 16 px, iOS zoome sur le champ */
  }
  .m-contact form textarea { min-height: 110px; }
  .m-contact form > .m-button {
    width: 100%;
    min-height: 52px;
    justify-content: center;
  }

  /* ------------------------------------------------------------- avis */
  .m-reviews-layout { row-gap: 24px; }
  .m-review-card { min-height: 0; padding: 22px 20px 20px; border-radius: 14px; }
  .m-reviews-controls { margin-top: 16px; }

  /* ------------------------------------------------------------- questions */
  .m-faq-grid { row-gap: 22px; }
  .m-faq summary { padding: 20px 36px 20px 0; font-size: 0.95rem; line-height: 1.4; }

  /* ------------------------------------------------------------- pied de page */
  .m-footer-urgent { padding: 22px 0; }
  .m-footer-urgent-actions { width: 100%; margin-top: 14px; }
  .m-footer-urgent-actions > * { flex: 1 1 100%; justify-content: center; min-height: 50px; }

  .m-footer-columns {
    grid-template-columns: 1fr 1fr;
    row-gap: 30px;
    column-gap: 22px;
    padding-top: 30px;
  }

  /* bloc de marque : le logo passe au-dessus du texte, a taille raisonnable */
  .m-footer-company { grid-column: 1 / -1; }
  .m-footer-logo {
    display: block;
    width: 150px;
    margin-bottom: 14px;
  }
  .m-footer-logo span {
    display: block;
    padding: 10px 12px;
    border-radius: 10px;
    background: #fff;
  }
  .m-footer-logo img { width: 100%; height: auto; display: block; }
  .m-footer-company > p {
    font-size: 0.88rem;
    line-height: 1.7;
    max-width: 34ch;
  }

  /* reseaux sociaux : une ligne compacte */
  .m-footer-social { margin-top: 20px; }
  .m-footer-social h3 { margin-bottom: 10px; font-size: 0.72rem; letter-spacing: 1.6px; }
  .m-social-links { display: flex; gap: 10px; }
  .m-social-link {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    gap: 4px;
    width: 64px;
    padding: 10px 6px;
    border-radius: 12px;
    font-size: 0.66rem;
  }

  .m-footer-availability { grid-column: 1 / -1; margin-top: 4px; }

  /* colonnes de liens : deux colonnes lisibles, titres detaches */
  .m-footer-links h3 {
    margin-bottom: 12px;
    font-size: 0.78rem;
    letter-spacing: 0.6px;
  }
  .m-footer-links a {
    display: block;
    padding: 7px 0;
    font-size: 0.84rem;
    line-height: 1.35;
  }

  .m-footer-contact { grid-column: 1 / -1; }
  .m-footer-regions { padding-top: 22px; }
  .m-footer-bottom { flex-direction: column; align-items: flex-start; gap: 12px; padding-bottom: 96px; }
}

/* très petits écrans : on évite les débordements horizontaux */
@media (max-width: 380px) {
  .m-contact-phone { font-size: 1.42rem; padding: 14px 15px; }
  .m-contact-email { font-size: 0.86rem; }
}