/* ================================================
   PAGE DE CONTACT - Styles spécifiques
   ================================================ */

/* 1. Empêcher le zoom automatique sur iOS en fixant la taille de police à 16px minimum */
@media (max-width: 767px) {
  /* Tous les champs de formulaire doivent avoir au moins 16px pour éviter le zoom iOS */
  section.contact-us input[type="text"],
  section.contact-us input[type="email"],
  section.contact-us input[type="tel"],
  section.contact-us input[type="number"],
  section.contact-us textarea,
  section.contact-us select,
  section.contact-us .form-control,
  section.contact-us .form-control.cp1,
  section.contact-us input.form-control,
  section.contact-us textarea.form-control,
  section.contact-us select.form-control {
    font-size: 16px !important;
    -webkit-text-size-adjust: 100% !important;
    -moz-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
  }
  
  /* Le select a une taille inline de 14px, on doit la surcharger */
  section.contact-us select#subject {
    font-size: 16px !important;
  }
  
  /* Newsletter form aussi */
  section.subscrive input[type="text"],
  section.subscrive input[type="email"],
  section.subscrive .form-control {
    font-size: 16px !important;
    -webkit-text-size-adjust: 100% !important;
    -moz-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
  }
}

/* 2. Empêcher le scroll horizontal même quand la page est zoomée - UNIQUEMENT pour la page de contact */
/* Ne pas affecter le header - cette règle est appliquée uniquement sur la page de contact */
/* Le header a ses propres règles dans shared-header.css */

/* Empêcher les éléments de dépasser - UNIQUEMENT dans les sections de contact */
section.contact-us *,
section.google-map *,
section.subscrive * {
  box-sizing: border-box !important;
}

/* Formulaire de contact spécifiquement */
section.contact-us {
  max-width: 100% !important;
  overflow-x: hidden !important;
  width: 100% !important;
}

/* Les containers doivent respecter leur max-width Bootstrap et être centrés */
/* Ne pas forcer max-width: 100% sur desktop - laisser Bootstrap gérer */
section.contact-us .container {
  overflow-x: hidden !important;
  /* Bootstrap gère déjà le centrage avec margin: 0 auto */
}

section.contact-us .row,
section.contact-us .col-md-8,
section.contact-us .col-md-4,
section.contact-us .billing-box,
section.contact-us form {
  max-width: 100% !important;
  overflow-x: hidden !important;
  width: 100% !important;
}

/* Inputs et textarea ne doivent pas dépasser */
section.contact-us input,
section.contact-us textarea,
section.contact-us select,
section.contact-us .form-control {
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

section.contact-us select.contact-subject-select {
  padding: 15px 10px;
  margin-bottom: 15px;
  font-size: 16px;
  letter-spacing: 0;
  font-family: inherit;
  background-color: #fff;
  cursor: pointer;
  border: 1px solid #ced4da;
  border-radius: 4px;
  min-height: 50px;
  height: 50px;
  color: #26252f;
}

section.contact-us select.contact-subject-select option {
  color: #26252f;
  background-color: #fff;
}

/* Newsletter section aussi */
section.subscrive {
  max-width: 100% !important;
  overflow-x: hidden !important;
  width: 100% !important;
}

/* Les containers doivent respecter leur max-width Bootstrap et être centrés */
section.subscrive .container {
  overflow-x: hidden !important;
  /* Bootstrap gère déjà le centrage avec margin: 0 auto */
}

section.subscrive .row,
section.subscrive input,
section.subscrive .form-control {
  max-width: 100% !important;
  overflow-x: hidden !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* 3. S'assurer que les images et iframes ne dépassent pas - UNIQUEMENT dans les sections de contact */
/* Ne pas affecter les images du header */
section.contact-us img,
section.contact-us picture,
section.contact-us video,
section.google-map img,
section.google-map picture,
section.subscrive img,
section.subscrive picture {
  max-width: 100% !important;
  width: 100% !important;
  height: auto !important;
}

/* Google Maps iframe spécifiquement - Garder une bonne taille */
section.google-map {
  max-width: 100% !important;
  width: 100% !important;
  overflow-x: hidden !important;
  margin-bottom: 40px !important; /* Réduire l'espace entre map et newsletter */
  padding: 0 !important;
}

section.google-map .container {
  overflow-x: hidden !important;
  /* Bootstrap gère déjà le centrage avec margin: 0 auto */
  /* Ne pas forcer max-width: 100% sur desktop */
}

section.google-map .map {
  width: 100% !important;
  height: 500px !important; /* Garder une bonne taille */
  max-width: 100% !important;
  overflow: hidden !important;
}

section.google-map iframe {
  max-width: 100% !important;
  width: 100% !important;
  height: 500px !important; /* Garder une bonne taille, ne pas mettre auto */
  border: 0 !important;
  display: block !important;
}

/* Responsive: Ajuster la taille de la map sur mobile */
@media (max-width: 767px) {
  section.google-map .map,
  section.google-map iframe {
    height: 400px !important; /* Taille réduite mais correcte sur mobile */
  }
  
  section.google-map {
    margin-bottom: 30px !important; /* Moins d'espace sur mobile */
  }
}

/* 4. Ajuster les espacements et marges de la page de contact */
section.contact-us {
  padding: 60px 0 !important;
  margin-bottom: 0 !important;
}

section.subscrive {
  padding: 50px 0 !important;
  margin-top: 0 !important;
}

/* Responsive: Ajuster les espacements sur mobile - UNIQUEMENT pour les sections de contact */
@media (max-width: 767px) {
  /* Le scroll horizontal est géré par les règles globales, pas besoin de le forcer ici */
  
  /* Les éléments des sections de contact doivent respecter la largeur */
  section.contact-us *,
  section.google-map *,
  section.subscrive * {
    max-width: 100% !important;
  }
  
  /* Container dans les sections de contact uniquement - Mobile uniquement */
  section.contact-us .container,
  section.google-map .container,
  section.subscrive .container {
    padding-left: 15px !important;
    padding-right: 15px !important;
    max-width: 100% !important; /* Sur mobile, éviter le dépassement */
    overflow-x: hidden !important;
  }
  
  /* Espacements réduits sur mobile */
  section.contact-us {
    padding: 40px 0 !important;
  }
  
  section.subscrive {
    padding: 40px 0 !important;
  }
  
  section.google-map {
    margin-bottom: 20px !important;
  }
}

/* Numéro cliquable (indicatif +212) : même style que le bloc coordonnées */
section.contact-us .contact-details .sc-text a[href^="tel:"] {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

section.contact-us .contact-details .sc-text a[href^="tel:"]:hover,
section.contact-us .contact-details .sc-text a[href^="tel:"]:focus {
  opacity: 0.9;
}