/* ==========================================================================
   page-contact.css
   Chargé UNIQUEMENT sur cette page (voir functions.php, section 3).
   Ne mettre ici QUE ce qui est spécifique à cette page :
   base.css et header-footer.css couvrent déjà le reste.
   ========================================================================== */

.container-contact {
   background-color: var(--blue-mist);
   width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-3);
}

.donnees-svg svg {
       width: 24px;
    height: 24px;
    color: var(--accent);
    flex-shrink: 0;
    margin-top: 3px;
}


/* ==========================================================================
   COORDONNÉES — Layout + responsive
   ========================================================================== */

.contact-info-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 1rem !important;
  padding-block: 1rem !important;
  border-bottom: 1px solid var(--border, rgba(10,47,92,.1)) !important;
}

.contact-info-item:first-of-type {
  padding-top: 0 !important;
}

.contact-info-item svg {
  width: 22px !important;
  height: 22px !important;
  flex-shrink: 0 !important;
  color: var(--blue-primary, #0F5AA6) !important;
  margin-top: 2px !important;
}

.contact-info-item div {
  display: flex !important;
  flex-direction: column !important;
  gap: .2rem !important;
}

.contact-info-item strong {
  font-size: .82rem !important;
  color: var(--ink-soft, #777) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .03em !important;
}

.contact-info-item a,
.contact-info-item span {
  font-size: 1rem !important;
  color: var(--blue-deep) !important;
  font-weight: 500 !important;
}

.contact-info-item a {
  transition: color .25s ease !important;
}

.contact-info-item a:hover {
  color: var(--accent, #F2793A) !important;
}

.contact-actions {
  display: flex !important;
  gap: 1rem !important;
  margin-top: 1.5rem !important;
  flex-wrap: wrap !important;
}

.contact-actions .btn {
  flex: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.map-frame {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 16 / 10 !important;
  margin-top: 2rem !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}

.map-frame iframe {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* Tablette : on resserre légèrement les espacements */
@media (max-width: 860px) {
  .contact-info-item {
    padding-block: .85rem !important;
  }

  .map-frame {
    aspect-ratio: 4 / 3 !important;
  }
}

/* Mobile : icônes plus petites, boutons empilés, texte ajusté */
@media (max-width: 560px) {
  .contact-info-item {
    gap: .75rem !important;
    padding-block: .75rem !important;
  }

  .contact-info-item svg {
    width: 19px !important;
    height: 19px !important;
  }

  .contact-info-item strong {
    font-size: .75rem !important;
  }

  .contact-info-item a,
  .contact-info-item span {
    font-size: .92rem !important;
  }

  .contact-actions {
    flex-direction: column !important;
  }

  .contact-actions .btn {
    width: 100% !important;
  }

  .map-frame {
    aspect-ratio: 1 / 1 !important;
    border-radius: 12px !important;
  }
}


/* ==========================================================================
   FORMULAIRE CONTACT (Contact Form 7) — Layout + responsive
   ========================================================================== */

.form-title {
  font-size: 1.4rem !important;
  color: var(--blue-deep) !important;
  margin-bottom: 1.5rem !important;
}

.field-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 1.2rem !important;
}

.field {
  display: flex !important;
  flex-direction: column !important;
  gap: .4rem !important;
  margin-bottom: 1.2rem !important;
}

.field label {
  font-size: .88rem !important;
  font-weight: 600 !important;
  color: var(--blue-deep) !important;
}

/* Champs générés par CF7 (input, select, textarea) */
.field .wpcf7-form-control {
  width: 100% !important;
  padding: .75rem 1rem !important;
  border: 1px solid var(--border, rgba(10,47,92,.15)) !important;
  border-radius: 10px !important;
  font-size: .95rem !important;
  font-family: inherit !important;
  color: var(--blue-deep) !important;
  background: var(--surface-2, #fff) !important;
  transition: border-color .25s ease, box-shadow .25s ease !important;
}

.field .wpcf7-form-control:focus {
  outline: none !important;
  border-color: var(--blue-primary, #0F5AA6) !important;
  box-shadow: 0 0 0 3px rgba(15,90,166,.12) !important;
}

.field textarea.wpcf7-form-control {
  min-height: 140px !important;
  resize: vertical !important;
}

.field select.wpcf7-form-control {
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A2F5C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 1rem center !important;
  background-size: 18px !important;
  padding-right: 2.6rem !important;
}

/* CF7 enveloppe chaque champ dans un span — on le laisse transparent pour ne pas casser le layout */
.field .wpcf7-form-control-wrap {
  display: block !important;
  width: 100% !important;
}

/* Messages d'erreur par champ */
.field .wpcf7-not-valid-tip {
  font-size: .8rem !important;
  color: var(--red-600, #c0392b) !important;
  margin-top: .3rem !important;
}

.field .wpcf7-form-control.wpcf7-not-valid {
  border-color: var(--red-600, #c0392b) !important;
}

/* Bouton submit */
.wpcf7-form input[type="submit"].btn-block {
  width: 40% !important;
  margin-top: .5rem !important;
  color: white;
  border: none;
  border-radius: 25px;
  padding: 10px 20px !important;
}

/* Message global de statut (succès/erreur d'envoi) */
.wpcf7-form .wpcf7-response-output {
  margin-top: 1rem !important;
  padding: .8rem 1rem !important;
  border-radius: 10px !important;
  font-size: .9rem !important;
  text-align: center !important;
}

.wpcf7-form.sent .wpcf7-response-output {
  background: var(--green-50, #eaf3de) !important;
  color: var(--green-800, #27500a) !important;
  border: 1px solid var(--green-200, #97c459) !important;
}

.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.aborted .wpcf7-response-output,
.wpcf7-form.spam .wpcf7-response-output {
  background: var(--red-50, #fcebeb) !important;
  color: var(--red-800, #791f1f) !important;
  border: 1px solid var(--red-200, #f09595) !important;
}

/* Petit spinner pendant l'envoi (généré par CF7) */
.wpcf7-form .wpcf7-spinner {
  margin-left: .6rem !important;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* Tablette : on garde 2 colonnes mais on resserre le gap */
@media (max-width: 860px) {
  .field-row {
    gap: 1rem !important;
  }
}

/* Mobile : nom + téléphone passent en 1 colonne */
@media (max-width: 560px) {
  .field-row {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  .form-title {
    font-size: 1.2rem !important;
    margin-bottom: 1.2rem !important;
  }

  .field .wpcf7-form-control {
    padding: .7rem .9rem !important;
    font-size: .92rem !important;
  }

  .field textarea.wpcf7-form-control {
    min-height: 120px !important;
  }
}