/* ============================================================
   MAÏLY ZEN — page Contact

   Les maquettes PEMIA n'en contiennent pas. Cette feuille est écrite
   pour cette page, avec les couleurs, les rayons et les ombres du socle.

   Parti pris : le formulaire d'abord, large, à gauche ; les coordonnées
   ensuite, dans une carte crème. Sur mobile, les coordonnées passent
   au-dessus du formulaire, pour qu'on voie tout de suite par où joindre
   la praticienne avant de dérouler un formulaire.
   ============================================================ */

.mz-contact-tete {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 62px;
}
.mz-contact-tete h1 {
  margin-top: 34px;
}
.mz-contact-tete .lead {
  margin: 20px auto 0;
  text-align: center;
}

.mz-contact-grille {
  display: grid;
  grid-template-columns: 1.45fr .85fr;
  gap: 56px;
  align-items: start;
}

/* ---------- Le formulaire ---------- */

.mz-form-bloc {
  position: relative;
  z-index: 2;
}

.mz-champ + .mz-champ,
.mz-champ-duo + .mz-champ,
.mz-champ + .mz-champ-duo {
  margin-top: 22px;
}

.mz-champ-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

/* Les champs d'une même ligne ne se décalent pas l'un de l'autre.
   La règle ci-dessus empile les champs en leur posant une marge haute dès
   qu'ils se suivent. Dans une grille à deux colonnes, les deux champs SE
   SUIVENT aussi au sens du sélecteur : le second recevait donc 22 px de
   marge haute et descendait d'autant, seul, à côté du premier. C'est le
   décalage que Marina a vu sur « Votre téléphone ».

   L'écart horizontal entre les deux colonnes vient du « gap » de la grille,
   pas de cette marge : la remettre à zéro ici ne défait rien. */
.mz-champ-duo > .mz-champ + .mz-champ {
  margin-top: 0;
}

.mz-champ label {
  display: block;
  font-size: 13.5px;
  letter-spacing: .04em;
  font-weight: 500;
  color: var(--encre);
  margin-bottom: 9px;
}

.mz-oblig {
  color: var(--or);
  margin-left: 2px;
}
.mz-facultatif {
  font-weight: 400;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--encre-doux);
  margin-left: 6px;
}

.mz-champ input,
.mz-champ select,
.mz-champ textarea {
  width: 100%;
  font-family: inherit;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--encre);
  background: var(--creme-hi);
  border: 1px solid rgba(107, 91, 123, .22);
  border-radius: 14px;
  padding: 14px 17px;
  transition: border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.mz-champ textarea {
  resize: vertical;
  min-height: 160px;
}

.mz-champ input:hover,
.mz-champ select:hover,
.mz-champ textarea:hover {
  border-color: rgba(107, 91, 123, .38);
}

.mz-champ input:focus,
.mz-champ select:focus,
.mz-champ textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--or);
  box-shadow: 0 0 0 3px rgba(201, 164, 90, .18);
}

/* Le champ piège : hors de l'écran, hors du parcours au clavier.
   display:none serait plus court, mais certains robots le repèrent. */
.mz-piege {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- L'accord ---------- */

.mz-accord {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin-top: 26px;
  padding: 18px 20px;
  border-radius: 16px;
  background: rgba(196, 168, 212, .12);
  border: 1px solid rgba(196, 168, 212, .34);
}
.mz-accord input {
  margin-top: 4px;
  width: 18px;
  height: 18px;
  flex: none;
  accent-color: var(--mauve-deep);
}
.mz-accord label {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--encre-doux);
}
.mz-accord a {
  color: var(--mauve-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- L'envoi ---------- */

.mz-form-envoi {
  margin-top: 30px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.mz-form-envoi .btn {
  border: 0;
  cursor: pointer;
  font-family: inherit;
}
.mz-form-note {
  font-size: 13.5px;
  color: var(--encre-doux);
  max-width: 28ch;
}

/* ---------- Les erreurs ----------
   Le bloc est sorti de la grille, sous le titre : sans JavaScript on ne
   peut pas ramener la visiteuse au formulaire, il faut donc que le
   message soit là où le regard se pose d'abord. */

.mz-form-erreurs {
  max-width: 720px;
  margin: 0 auto 44px;
  padding: 20px 24px;
  border-radius: 16px;
  background: rgba(184, 74, 74, .07);
  border: 1px solid rgba(184, 74, 74, .34);
  color: #7d3030;
}
.mz-form-erreurs p {
  font-size: 16px;
}
.mz-form-erreurs ul {
  margin-top: 10px;
  padding-left: 20px;
  list-style: disc;
  font-size: 15px;
  line-height: 1.7;
}

/* ---------- Les coordonnées ---------- */

.mz-coord {
  position: relative;
  z-index: 2;
  background: var(--creme-hi);
  border: 1px solid rgba(201, 164, 90, .32);
  border-radius: 26px;
  padding: 34px 32px;
  box-shadow: var(--shadow-card);
}

.mz-coord h2 {
  font-size: 22px;
  line-height: 1.15;
}

.mz-coord-liste {
  margin-top: 26px;
}
.mz-coord-liste li + li {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(107, 91, 123, .13);
}
.mz-coord-label {
  display: block;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--encre-doux);
  margin-bottom: 6px;
}
.mz-coord-liste a,
.mz-coord-liste span:not(.mz-coord-label) {
  font-size: 16.5px;
  color: var(--encre);
}
.mz-coord-liste a {
  background-image: linear-gradient(var(--or), var(--or));
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  padding-bottom: 2px;
  transition: background-size .45s cubic-bezier(.2, .9, .25, 1);
}
.mz-coord-liste a:hover {
  background-size: 100% 1px;
}

/* Le trou assumé, quand aucun moyen de contact n'est renseigné. */
.mz-coord-vide {
  margin-top: 22px;
  display: inline-block;
  padding: 8px 18px;
  border-radius: 100px;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #8a6a2f;
  background: rgba(201, 164, 90, .14);
  border: 1px dashed rgba(201, 164, 90, .55);
}

.mz-coord-resa {
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid rgba(107, 91, 123, .13);
}
.mz-coord-resa p {
  font-size: 15px;
  color: var(--encre-doux);
  margin-bottom: 16px;
}

.mz-coord-delai {
  margin-top: 24px;
  font-size: 14.5px;
  font-style: italic;
  line-height: 1.7;
  color: var(--encre-doux);
}

/* ---------- Réduction ---------- */

@media (max-width: 1000px) {
  .mz-contact-grille {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  /* Les coordonnées d'abord : sur un écran étroit, voir par où joindre la
     praticienne avant de dérouler le formulaire. */
  .mz-coord { order: -1; }
}

@media (max-width: 600px) {
  .mz-contact-tete { margin-bottom: 44px; }
  .mz-champ-duo { grid-template-columns: 1fr; gap: 22px; }
  .mz-coord { padding: 28px 24px; border-radius: 22px; }
  .mz-form-envoi { gap: 18px; }
  .mz-form-envoi .btn { width: 100%; justify-content: space-between; }
  .mz-form-note { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mz-champ input,
  .mz-champ select,
  .mz-champ textarea,
  .mz-coord-liste a {
    transition: none;
  }
}

/* Le lien Instagram porte l'icône, et non plus « Voir le compte ».
   Le soulignement doré au survol vient de .mz-coord-liste a et s'étendrait
   sous l'icône comme sous le texte : on le reprend sur le seul pseudonyme,
   pour que le trait ne barre pas le dessin.

   Le lien Facebook, ajouté le 24 septembre, prend exactement la même forme :
   les sélecteurs listent les deux plutôt que d'écrire deux fois les mêmes
   déclarations. */
.mz-coord-insta,
.mz-coord-fb {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-image: none;
}
.mz-coord-insta svg,
.mz-coord-fb svg {
  width: 19px;
  height: 19px;
  flex: none;
  color: var(--or);
}
.mz-coord-insta span,
.mz-coord-fb span {
  background-image: linear-gradient(var(--or), var(--or));
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  padding-bottom: 2px;
  transition: background-size .45s cubic-bezier(.2, .9, .25, 1);
}
.mz-coord-insta:hover span,
.mz-coord-fb:hover span {
  background-size: 100% 1px;
}

/* ===================== LA SECONDE LISTE, LES PACKS =====================
   Ajoutée le 12 octobre 2026. Elle n'apparaît que si la demande porte sur
   un pack, et le tri se fait sans une ligne de JavaScript.

   `option[value="pack"]:checked` suit la sélection en direct, et `:has()`
   remonte l'information du select jusqu'au bloc voisin. Le champ reste
   toujours dans la page : le serveur peut le lire, et un navigateur sans
   `:has()` l'affiche simplement tout le temps. Inutile, jamais cassé.

   La clé « pack » est celle de mz_sujets_contact(), « Un pack signature ». */
.mz-champ--pack {
  display: none;
}
.mz-form:has(#mz_sujet option[value="pack"]:checked) .mz-champ--pack {
  display: block;
  animation: packOuvre .42s cubic-bezier(.2, .9, .25, 1) both;
}
@keyframes packOuvre {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* Sans :has(), le bloc reste visible en permanence plutôt que caché à jamais. */
@supports not selector(:has(*)) {
  .mz-champ--pack { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .mz-form:has(#mz_sujet option[value="pack"]:checked) .mz-champ--pack {
    animation: none;
  }
}