/* =========================================================
   MINDSET THEME — Page Contact
   Chargé automatiquement sur template-contact.php
   ========================================================= */

/* ---- Hero compact ---------------------------------------- */
.ms-hero--compact {
  min-height: clamp(260px, 38vh, 380px);
}

/* ---- Grille formulaire / infos --------------------------- */
.ms-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

/* ---- Formulaire ------------------------------------------ */
.ms-form {
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
}

.ms-form__field {
  display: flex;
  flex-direction: column;
  gap: .45rem;
}

.ms-form__label {
  font-size: .9rem;
  font-weight: 700;
  color: var(--wp--preset--color--primary);
}

.ms-form__required {
  color: var(--wp--preset--color--accent);
  margin-left: .15rem;
}

.ms-form__input {
  width: 100%;
  padding: .8rem 1rem;
  border: 1.5px solid color-mix(in srgb, var(--wp--preset--color--primary) 18%, transparent);
  border-radius: var(--ms-radius);
  background: var(--wp--preset--color--white);
  color: var(--wp--preset--color--text);
  font-family: var(--wp--preset--font-family--body, inherit);
  font-size: .97rem;
  line-height: 1.5;
  transition: border-color .25s var(--ms-ease), box-shadow .25s var(--ms-ease);
  outline: none;
}

.ms-form__input:focus {
  border-color: var(--wp--preset--color--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--accent) 15%, transparent);
}

.ms-form__input::placeholder {
  color: color-mix(in srgb, var(--wp--preset--color--text) 40%, transparent);
}

.ms-form__input:invalid:not(:placeholder-shown) {
  border-color: #e53e3e;
}

.ms-form__textarea {
  resize: vertical;
  min-height: 140px;
}

/* Honeypot — totalement invisible, hors flux visuel */
.ms-form__honeypot {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  tab-size: 0;
}

/* ---- Zone statut ----------------------------------------- */
.ms-form__status {
  border-radius: var(--ms-radius);
  padding: .9rem 1.2rem;
  font-size: .95rem;
  font-weight: 600;
  display: none; /* affiché par JS */
}

.ms-form__status.is-success {
  display: block;
  background: color-mix(in srgb, #38a169 12%, transparent);
  border: 1.5px solid #38a169;
  color: #276749;
}

.ms-form__status.is-error {
  display: block;
  background: color-mix(in srgb, #e53e3e 10%, transparent);
  border: 1.5px solid #e53e3e;
  color: #c53030;
}

/* ---- Message de confirmation (remplace le form) ----------- */
.ms-form-confirmation {
  text-align: center;
  padding: 3rem 2rem;
  background: var(--wp--preset--color--white);
  border-radius: var(--ms-radius-lg);
  border: 1.5px solid color-mix(in srgb, #38a169 30%, transparent);
  box-shadow: var(--ms-shadow-soft);
}

.ms-form-confirmation__icon {
  font-size: 3rem;
  line-height: 1;
  margin-bottom: 1rem;
}

.ms-form-confirmation h3 {
  font-size: 1.5rem;
  color: var(--wp--preset--color--primary);
  margin-bottom: .7rem;
}

.ms-form-confirmation p {
  color: var(--wp--preset--color--muted);
  font-size: 1.02rem;
}

/* ---- Carte infos ----------------------------------------- */
.ms-contact-card {
  padding: 2rem 1.8rem;
}

.ms-contact-card .ms-section-head {
  margin-bottom: 1.8rem;
}

.ms-contact-details {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.ms-contact-details__item {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  font-size: .97rem;
  color: var(--wp--preset--color--muted);
}

.ms-contact-details__icon {
  font-size: 1.25rem;
  line-height: 1.4;
  flex-shrink: 0;
}

.ms-contact-details__item a {
  color: var(--wp--preset--color--accent);
  font-weight: 600;
  text-underline-offset: 3px;
  transition: color .25s var(--ms-ease);
}

.ms-contact-details__item a:hover {
  color: var(--wp--preset--color--primary);
  text-decoration: underline;
}

/* ---- Section Maps — SEOD-05 : façade (pas d'iframe au chargement) --- */
.ms-section--maps {
  padding-block: var(--ms-section-y);
}

/* Conteneur commun façade + iframe */
.ms-maps-facade {
  border-radius: var(--ms-radius-lg);
  overflow: hidden;
  box-shadow: var(--ms-shadow-soft);
  height: clamp(280px, 45vh, 480px);
  position: relative;
}

/* ---- Façade (état initial) ---- */
.ms-maps-facade__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--wp--preset--color--bg-alt);
  border-radius: var(--ms-radius-lg);
}

.ms-maps-facade__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 2rem;
  text-align: center;
  max-width: 320px;
}

.ms-maps-facade__icon {
  color: var(--wp--preset--color--accent);
  opacity: .7;
}

.ms-maps-facade__address {
  font-size: .95rem;
  color: var(--wp--preset--color--muted);
  line-height: 1.55;
  margin: 0;
}

.ms-maps-facade__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  width: 100%;
}

.ms-maps-facade__show {
  /* hérite .ms-btn depuis design-system.css */
}

.ms-maps-facade__directions {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--wp--preset--color--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .2s ease;
}

.ms-maps-facade__directions:hover {
  color: var(--wp--preset--color--primary);
}

/* ---- Iframe (après clic) ---- */
.ms-maps-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.ms-maps-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---- Bouton désactivé ------------------------------------ */
#ms-form-submit:disabled {
  opacity: .6;
  cursor: not-allowed;
  pointer-events: none;
}

/* ---- Responsive ------------------------------------------ */
@media (max-width: 900px) {
  .ms-contact-grid {
    grid-template-columns: 1fr;
  }
  .ms-contact-info {
    order: -1; /* infos au-dessus sur mobile */
  }
}

@media (max-width: 640px) {
  .ms-form__input {
    font-size: 1rem; /* évite le zoom iOS */
  }
}