/* ============================================================
   TULIPE PALETTES - CONTACT (contact.html)
   Géométrie de la source (deux colonnes : coordonnées 440 px + panneau de formulaire, une colonne sous 900 px),
   langage visuel du site : tokens, rayons --r-*, champs .form-field, bouton .btn, révélation [data-reveal].
   Variables locales scopées à .contact-page.
   ============================================================ */
.contact-page {
  --ct-info-width: 440px;
  --ct-gap: 80px;
  --ct-panel-pad: 40px;
  --ct-quick-size: 56px;
  --ct-map-ratio: 442 / 286;
  max-width: var(--container-max-width-wide);
  margin-inline: auto;
  padding: var(--page-top-gap) var(--container-padding-x) var(--section-padding-y);
}
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.contact-page__breadcrumb { margin-bottom: clamp(24px, 3.5vw, 48px); }

/* Grille (et non flex) : une largeur de colonne fixe + le reste, sans flex-basis qui deviendrait une hauteur en colonne */
.contact { display: grid; grid-template-columns: var(--ct-info-width) minmax(0, 1fr); align-items: start; gap: var(--ct-gap); }

/* ---------- En-tête et coordonnées ---------- */
.contact__header { margin-bottom: clamp(28px, 3.4vw, 48px); }
.contact__title { margin-bottom: 24px; font-size: var(--fs-page-title); font-weight: 600; line-height: 1.1; color: var(--color-forest); }
.contact__intro { max-width: 40ch; font-size: var(--fs-lead); line-height: 1.6; color: var(--color-ink); }

.contact__details { margin-bottom: 32px; font-style: normal; }
.contact__list { display: flex; flex-direction: column; gap: 20px; }
.contact__item { display: flex; align-items: center; gap: 16px; font-size: var(--fs-base); line-height: 1.6; color: var(--color-ink); overflow-wrap: anywhere; }
.contact__item--address { align-items: flex-start; }
.contact__icon { width: 24px; height: 24px; color: var(--color-wood); }
.contact__link { color: var(--color-ink); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; text-decoration-thickness: 1.5px; transition: color 160ms ease, text-decoration-color 160ms ease; }
.contact__link:hover, .contact__link:focus-visible { color: var(--color-forest); text-decoration-color: currentColor; }

/* ---------- Contacts rapides ---------- */
.contact__quick { display: flex; gap: 16px; margin-bottom: 32px; }
.contact__quick-link {
  display: flex; align-items: center; justify-content: center; width: var(--ct-quick-size); height: var(--ct-quick-size);
  color: var(--color-wood); background: var(--color-paper); border: 1.5px solid var(--color-border-field); border-radius: var(--r-control);
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}
.contact__quick-link:hover { background: var(--color-surface-dim); border-color: var(--color-wood); color: var(--color-forest); }
.contact__quick-link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.contact__quick-icon { width: 22px; height: 22px; transition: transform 200ms ease; }
/* Le bouton ne bouge pas : seule l'icône interne réagit. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .contact__quick-link:hover { box-shadow: var(--shadow-card-hover); }
  .contact__quick-link:hover .contact__quick-icon { transform: scale(1.15); }
}

/* ---------- Carte : visuel de marque provisoire (TODO-CLIENT: iframe du fournisseur) ---------- */
.contact__map {
  position: relative; aspect-ratio: var(--ct-map-ratio); overflow: hidden; border-radius: var(--r-card);
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-moss) 22%, var(--color-cream)), color-mix(in srgb, var(--color-moss) 34%, var(--color-cream)) 45%, color-mix(in srgb, var(--color-moss) 26%, var(--color-cream)));
  border: 1px solid var(--color-border);
}
.contact__map::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; background: var(--color-ember);
  border: 3px solid var(--color-paper); border-radius: 50% 50% 50% 0; transform: translate(-50%, -100%) rotate(-45deg);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--color-ink) 18%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
  html.has-reveal .contact__map.is-visible::after { animation: contact-pin-drop 500ms cubic-bezier(0.16, 1, 0.3, 1) 200ms both; }
}
@keyframes contact-pin-drop {
  from { opacity: 0; transform: translate(-50%, -160%) rotate(-45deg); }
  to { opacity: 1; transform: translate(-50%, -100%) rotate(-45deg); }
}

/* ---------- Panneau du formulaire ---------- */
.contact__panel { min-width: 0; padding: var(--ct-panel-pad); background: var(--color-paper); border: 1px solid var(--color-border); border-radius: var(--r-card); box-shadow: var(--shadow-card); }
.contact-form { display: flex; flex-direction: column; gap: 24px; }
.contact-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.contact-form__submit { width: 100%; }
.contact-form__disclaimer { font-size: var(--fs-xs); text-align: center; color: var(--color-text-muted); }
.contact-form__disclaimer a { text-decoration: underline; text-underline-offset: 3px; }
.contact-form__disclaimer a:hover, .contact-form__disclaimer a:focus-visible { color: var(--color-forest); }
.contact__noscript { margin-bottom: 16px; color: var(--color-text-muted); }

/* ---------- Panneau de succès (remplace le formulaire) ---------- */
.contact-success { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 8px 0; }
.contact-success:focus, .contact-success:focus-visible { outline: none; } /* focus par script, élément non interactif */
.contact-success__icon { width: 44px; height: 44px; color: var(--color-moss); }
.contact-success__title { font-size: clamp(24px, 1.2vw + 18px, 32px); font-weight: 600; line-height: 1.2; color: var(--color-forest); }
.contact-success__text { max-width: 48ch; font-size: var(--fs-base); line-height: 1.6; color: var(--color-text-muted); overflow-wrap: anywhere; }
.contact-page [hidden] { display: none !important; }

/* ---------- Paliers (mêmes seuils que la source) ---------- */
@media (max-width: 1439px) {
  .contact-page { --ct-info-width: 360px; --ct-gap: 56px; --ct-panel-pad: 36px; }
}
@media (max-width: 1023px) {
  .contact-page { --ct-info-width: 300px; --ct-gap: 40px; --ct-panel-pad: 28px; }
}
@media (max-width: 899px) {
  .contact-page { --ct-gap: 48px; --ct-panel-pad: 32px; --ct-map-ratio: 16 / 9; }
  .contact { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .contact-page { --ct-panel-pad: 20px; }
  .contact-form { gap: 20px; }
  .contact-form__row { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .contact-success .btn { align-self: stretch; }
}
@media (max-width: 430px) {
  .contact-page { --ct-panel-pad: 14px; }
}
/* Écrans tactiles : e-mail et téléphone sont les actions principales, zone d'appui ≥ 44 px sans déplacer la mise en page */
@media (pointer: coarse) {
  .contact__link { display: inline-block; padding-block: 13px; margin-block: -13px; }
  .contact__list { gap: 34px; }   /* 8 px au moins entre deux zones d'appui (e-mail, téléphone) */
}