/* ============================================================
   Bloc additionnel : contact (page Contact — formulaire + contacts directs)
   Port fidèle de .contact-page (maquette 2026-06-10, contact.html).
   La zone .contact-page__head de la maquette n'est PAS reprise : le titre/lead
   est porté par le bloc page_hero qui précède (cf. vue additional/contact.php).
   ============================================================ */

.contact-page {
  position: relative;
  color: var(--c-blue);
  /* Bas réduit à l'inter-bloc : le bloc `contact_direct` enchaîne en zone crème
     continue (sa section porte le bas de page). Cf. css/blocs/contact-direct.css. */
  padding: clamp(60px, 8vh, 120px) 0 clamp(48px, 7vh, 100px);
  background: var(--c-bg-cream);
}
/* Le hero (page_hero) précède directement le bloc contact → on colle la section
   au hero (pas de double respiration). Remplace le body.page-contact de la maquette. */
.page-hero + .contact-page {
  padding-top: 0;
}
.contact-page__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 7vh, 100px);
  /* Largeur portée par .wrap (max-width + padding latéral des pages internes). */
}

/* Bloc formulaire */
.contact-form-block__title {
  margin: 0 0 clamp(28px, 4vh, 44px);
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: clamp(1.1rem, 1.5vw, 1.5rem);
  line-height: 1.4;
  color: var(--c-blue);
  letter-spacing: -0.005em;
  max-width: 60ch;
}

/* === Formulaire — FLOATING LABEL + UNDERLINE animé ===
   Le label est posé SUR la ligne (façon placeholder). Au focus (ou si le champ
   est rempli), le label remonte au-dessus et la ligne s'épaissit en cuivre.
   Structure HTML : input AVANT label (sélecteur frère ~), placeholder=" ". */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.4vh, 28px);
}
.contact-form__row--2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(18px, 2vw, 32px);
}
.contact-form__field {
  position: relative;
  padding-top: clamp(14px, 1.8vh, 20px);   /* place pour le label flottant */
}
/* LIGNE GRISE pleine largeur — toujours visible (le rail du champ). */
.contact-form__field::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.5px;
  background: rgba(0, 57, 77, 0.22);
}
/* BARRE CUIVRE par-dessus le rail : largeur du LABEL au repos, 100% au focus.
   La largeur "label" est portée par --bar-rest (mesurée en JS), 0 si non mesurée. */
.contact-form__field::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2.5px;
  width: 100%;
  background: var(--c-copper);
  transform: scaleX(var(--bar-rest, 0));
  transform-origin: left center;
  transition: transform 0.4s var(--ease);
}
/* Focus OU champ rempli → la barre cuivre remplit toute la largeur. */
.contact-form__field:focus-within::after,
.contact-form__field:has(.contact-form__input:not(:placeholder-shown))::after,
.contact-form__field:has(.contact-form__textarea:not(:placeholder-shown))::after {
  transform: scaleX(1);
}
.contact-form__input,
.contact-form__textarea {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: clamp(8px, 1.1vh, 12px) 0;
  color: var(--c-blue);
  font-family: var(--ff-body);
  font-size: clamp(1rem, 1.1vw, 1.15rem);
  line-height: 1.5;
  width: 100%;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.contact-form__input:focus,
.contact-form__textarea:focus,
.contact-form__input:focus-visible,
.contact-form__textarea:focus-visible {
  outline: none;   /* la barre cuivre fait office d'indicateur de focus */
}
.contact-form__textarea {
  resize: vertical;
  min-height: clamp(120px, 15vh, 180px);
}
/* Le label flotte par-dessus la ligne au repos (position de placeholder). */
.contact-form__label {
  position: absolute;
  left: 0;
  bottom: clamp(8px, 1.1vh, 12px);
  font-family: var(--ff-body);
  font-size: clamp(1rem, 1.1vw, 1.15rem);
  color: var(--c-copper);
  pointer-events: none;
  transform-origin: left bottom;
  transition: transform 0.3s var(--ease), color 0.3s var(--ease);
}
/* Pour le textarea, le label se cale en haut de la zone de texte. */
.contact-form__field:has(.contact-form__textarea) .contact-form__label {
  bottom: auto;
  top: clamp(14px, 1.8vh, 20px);
}
/* Label remonté + réduit quand le champ est focus OU rempli (placeholder masqué). */
.contact-form__input:focus ~ .contact-form__label,
.contact-form__input:not(:placeholder-shown) ~ .contact-form__label,
.contact-form__textarea:focus ~ .contact-form__label,
.contact-form__textarea:not(:placeholder-shown) ~ .contact-form__label,
.contact-form__input:-webkit-autofill ~ .contact-form__label {
  transform: translateY(calc(-1 * (clamp(8px, 1.1vh, 12px) + clamp(14px, 1.8vh, 20px)))) scale(0.74);
  color: var(--c-copper);
}
.contact-form__input::placeholder,
.contact-form__textarea::placeholder {
  color: transparent;   /* placeholder=" " sert juste à piloter :placeholder-shown */
}
/* Auto-fill Chrome / Safari : neutralise le fond jaune. */
.contact-form__input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 100px var(--c-bg-cream) inset;
  -webkit-text-fill-color: var(--c-blue);
  caret-color: var(--c-blue);
}
.contact-form__submit {
  margin-top: clamp(12px, 1.8vh, 24px);
  display: flex;
  justify-content: flex-end;
}

/* Honeypot anti-spam : hors-écran, invisible et inaccessible (à ne pas remplir). */
.contact-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Messages flash après soumission (succès / erreur). */
.contact-form__alert {
  margin: 0 0 clamp(20px, 3vh, 32px);
  padding: 14px 18px;
  border-radius: 4px;
  font-family: var(--ff-body);
  font-size: clamp(0.95rem, 1vw, 1.05rem);
  line-height: 1.5;
}
.contact-form__alert--success {
  color: var(--c-blue);
  background: rgba(142, 117, 71, 0.10);
  border-left: 3px solid var(--c-copper);
}
.contact-form__alert--error {
  color: #8a1f1f;
  background: rgba(138, 31, 31, 0.08);
  border-left: 3px solid #8a1f1f;
}

/* Les contacts directs (.contact-direct*) sont désormais un bloc autonome :
   voir css/blocs/contact-direct.css. */

@media (max-width: 700px) {
  .contact-form__row--2col { grid-template-columns: 1fr; }
}

/* Zoom iOS : inputs/textarea forcés à ≥ 16px (Safari zoome si < 16px au focus). */
@media (max-width: 1024px) {
  .contact-form__input,
  .contact-form__textarea { font-size: max(1rem, 16px); }
  .contact-form__label { font-size: max(1rem, 16px); }
}