/* ============================================
   MAIN/CONTACT.CSS — Conversion manifeste
   Charge sur : template-contact.php (page Contact)

   Même ligne éditoriale que Mon approche / Mon histoire : split typo
   alignée à gauche (titre + trois engagements + contact direct), carte
   formulaire à droite — le point focal unique de la page. Puis
   alternative teal. Le formulaire garde le handler natif admin-post
   (nonce, honeypot, consentement RGPD) : seul l'habillage change.
   ============================================ */

/* base.css plafonne p/li à 640px : mise en page libérée. */
.contact-conversion__engagement,
.contact-conversion__direct-item {
  max-width: none;
}

/* ── 1. OUVERTURE-CONVERSION — split typo / carte formulaire ── */

.contact-conversion {
  background: var(--surface-default, #faf7f3);
  padding-block: calc(var(--nav-height, 72px) + clamp(24px, 4vh, 48px)) clamp(56px, 8vw, 104px);
  overflow: clip;
}

.contact-conversion__inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 96px);
  align-items: start;
}

.contact-conversion__texte {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  min-width: 0;
  /* Colonne gauche compagnon : reste en vue pendant le remplissage. */
  position: sticky;
  top: calc(var(--nav-height, 72px) + 24px);
}

.contact-conversion__folio {
  font-family: var(--font-sans);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--em-primary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  opacity: 0;
  animation: contactFadeIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.25s forwards;
}

.contact-conversion__folio::after {
  content: '';
  flex: 1 1 auto;
  max-width: 160px;
  height: 1px;
  background: color-mix(in oklch, var(--em-primary) 38%, transparent);
  transform: scaleX(0);
  transform-origin: left center;
  animation: contactLigne 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.7s forwards;
}

.contact-conversion__title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(2.4rem, 1.2rem + 4.2vw, 4.2rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: var(--em-text);
  margin: 0 0 clamp(14px, 2vw, 24px);
  max-width: 12ch;
  text-wrap: balance;
  clip-path: inset(100% 0 0 0);
  animation: contactReveal 1s cubic-bezier(0.22, 1, 0.36, 1) 0.5s forwards;
}

.contact-conversion__title em {
  font-style: italic;
  color: var(--em-primary);
}

.contact-conversion__lead {
  font-family: var(--font-sans);
  font-size: var(--t-lead);
  line-height: 1.65;
  color: var(--em-text-light);
  margin: 0 0 var(--space-lg);
  max-width: 38ch;
  opacity: 0;
  animation: contactFadeIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) 1.05s forwards;
}

/* Trois engagements — la promesse du premier contact en un regard. */
.contact-conversion__engagements {
  margin: 0;
  display: grid;
  gap: 0;
}

.contact-conversion__engagement {
  display: flex;
  /* Cf. Mon approche : centrage vertical, les libellés tiennent sur deux
     lignes et la base commune décalait le chiffre vers le haut. */
  align-items: center;
  gap: 16px;
  padding-block: 12px;
  border-top: 1px solid color-mix(in oklch, var(--ivoire-900) 18%, transparent);
  opacity: 0;
  animation: contactFadeIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.contact-conversion__engagement:nth-child(1) { animation-delay: 1.2s; }
.contact-conversion__engagement:nth-child(2) { animation-delay: 1.35s; }
.contact-conversion__engagement:nth-child(3) { animation-delay: 1.5s; }

.contact-conversion__engagement-num {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem);
  line-height: 0.95;
  color: var(--em-primary);
  margin: 0;
  min-width: 64px;
  /* Même correctif que les repères de Mon approche : « 0 » seul dans une
     colonne de 64 px se décrochait de son libellé. Centré, le trio
     48h / 90 / 0 partage le même axe optique. */
  text-align: center;
  font-feature-settings: 'lnum';
}

.contact-conversion__engagement-label {
  font-family: var(--font-sans);
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--em-text-light);
  margin: 0;
}

/* Contact direct — l'option de sortie rapide. */
.contact-conversion__direct {
  opacity: 0;
  animation: contactFadeIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) 1.7s forwards;
}

.contact-conversion__direct-intro {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: var(--t-body);
  color: var(--em-text-light);
  margin: 0 0 var(--space-xs);
}

.contact-conversion__direct-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.contact-conversion__direct-item {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.contact-conversion__direct-label {
  font-family: var(--font-sans);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* --em-text-muted plafonnait à 4.12:1 sur crème à cette taille (AA 4.5). */
  color: var(--em-text-light);
  min-width: 92px;
}

.contact-conversion__direct-value {
  font-family: var(--font-serif);
  font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
  color: var(--em-primary);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in oklch, var(--em-primary) 35%, transparent);
  padding-bottom: 2px;
  transition:
    color 0.3s var(--ease-editorial),
    border-color 0.3s var(--ease-editorial);
}

.contact-conversion__direct-value:hover,
.contact-conversion__direct-value:focus-visible {
  color: var(--em-text);
  border-bottom-color: var(--em-accent-light);
}

@keyframes contactReveal {
  to { clip-path: inset(0 0 0 0); }
}

@keyframes contactFadeIn {
  to { opacity: 1; }
}

@keyframes contactLigne {
  to { transform: scaleX(1); }
}

/* ── 2. CARTE FORMULAIRE — le point focal ── */

.contact-conversion__carte {
  background: color-mix(in oklch, var(--em-bg) 94%, white);
  border: 1px solid color-mix(in oklch, var(--ivoire-900) 10%, transparent);
  padding: clamp(24px, 3.2vw, 48px);
  scroll-margin-top: calc(var(--nav-height, 72px) + 24px);
  /* fondu pur : un translateY sur opacity 0 compte dans le CLS */
  opacity: 0;
  animation: contactFadeIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.6s forwards;
}

.contact-form__header {
  margin-bottom: var(--space-md);
}

.contact-form__overline {
  font-family: var(--font-sans);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--em-accent);
  margin: 0 0 8px;
}

.contact-form__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  line-height: 1.15;
  color: var(--em-text);
  margin: 0 0 8px;
  max-width: none;
}

.contact-form__intro {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--em-text-light);
  margin: 0;
  max-width: 52ch;
}

/* Bannière de statut (succès / erreur — inc/contact-form.php). */
.contact-form__notice {
  margin: 0 0 var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border-left: 2px solid var(--em-primary);
  background: color-mix(in oklch, var(--em-primary) 8%, transparent);
}

.contact-form__notice p {
  margin: 0;
  font-size: var(--t-body);
  color: var(--em-text);
  max-width: none;
}

.contact-form__notice--error {
  border-left-color: var(--em-accent);
  background: color-mix(in oklch, var(--em-accent) 8%, transparent);
}

/* ── Formulaire natif (champs conservés, habillage carte) ── */

.contact-form__form {
  display: grid;
  gap: var(--space-md);
}

.contact-form__hint {
  margin: 0;
  font-size: var(--t-small);
  color: var(--em-text-light);
  font-style: italic;
  max-width: none;
}

.contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  margin: 0;
}

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

.contact-form__field {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: none;
}

.contact-form__field label {
  font-family: var(--font-sans);
  font-size: var(--t-small);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
  color: var(--em-text-light);
}

.contact-form__field input,
.contact-form__field textarea {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  padding: 14px 16px;
  border: 1px solid rgba(43, 41, 38, 0.15);
  background: var(--em-bg);
  color: var(--em-text);
  border-radius: 0;
  transition: var(--transition-border);
}

.contact-form__field input:focus,
.contact-form__field textarea:focus {
  outline: none;
  border-color: var(--em-primary);
}

.contact-form__field textarea {
  min-height: 140px;
  resize: vertical;
  line-height: 1.55;
}

/* Validation CSS-only — :user-invalid s'active SEULEMENT après
   interaction utilisateur, jamais au chargement. */
.contact-form__field input:user-invalid,
.contact-form__field textarea:user-invalid {
  border-color: var(--em-accent, #b3492a);
}

.contact-form__field input:user-valid,
.contact-form__field textarea:user-valid {
  border-color: rgba(43, 41, 38, 0.15);
}

/* Honeypot : hors écran mais présent dans le DOM pour les bots. */
.contact-form__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Consentement RGPD — explicite, non pré-coché, obligatoire (CNIL). */
.contact-form__consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--em-text);
  max-width: none;
}

.contact-form__consent input[type="checkbox"] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  accent-color: var(--em-primary);
  cursor: pointer;
}

.contact-form__consent label {
  cursor: pointer;
  font-weight: 400;
}

.contact-form__consent a {
  color: var(--em-text);
  text-decoration: underline;
  text-decoration-color: rgba(43, 41, 38, 0.35);
  text-underline-offset: 3px;
}

.contact-form__consent a:hover,
.contact-form__consent a:focus-visible {
  color: var(--em-primary);
  text-decoration-color: var(--em-primary);
}

/* Erreur consentement uniquement après interaction. */
.contact-form__consent input[type="checkbox"]:user-invalid + label {
  color: var(--text-accent-strong, #b54a3a);
}

.contact-form__submit {
  margin: 0;
  max-width: none;
}

.contact-form__submit button {
  cursor: pointer;
}

.contact-form__legal {
  margin: 0;
  font-size: var(--t-small);
  color: var(--em-text-light);
  line-height: 1.5;
  max-width: none;
}

.contact-form__legal a {
  color: var(--em-text-light);
  text-decoration: underline;
  text-decoration-color: rgba(43, 41, 38, 0.3);
  text-underline-offset: 3px;
}

.contact-form__legal a:hover,
.contact-form__legal a:focus-visible {
  color: var(--em-primary);
  text-decoration-color: var(--em-primary);
}

/* ── 3. ALTERNATIVE TEAL ── */

/* Parité avec les bandeaux CTA teal du site (.hub-event__cta,
   hub-event.css — non chargé ici) : même respiration verticale,
   même colonne centrée. */
.contact-alternative {
  padding-block: var(--space-2xl);
}

.contact-alternative__inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.contact-alternative__inner .accent-line {
  margin-inline: auto;
}

.contact-alternative__title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(1.9rem, 1.4rem + 2vw, 3rem);
  line-height: 1.1;
  color: var(--ivoire-50, #faf7f3);
  margin: 0 auto var(--space-sm);
  max-width: none;
}

.contact-alternative__lead {
  font-family: var(--font-sans);
  font-size: var(--t-lead);
  line-height: 1.65;
  color: color-mix(in oklch, var(--ivoire-50) 85%, transparent);
  margin: var(--space-sm) auto var(--space-lg);
  max-width: 54ch;
}

.contact-alternative__links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(14px, 2vw, 26px);
  flex-wrap: wrap;
}

/* ── MOTION — reduced-motion : tout visible immédiatement ── */

@media (prefers-reduced-motion: reduce) {
  .contact-conversion__folio,
  .contact-conversion__lead,
  .contact-conversion__engagement,
  .contact-conversion__direct,
  .contact-conversion__carte {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .contact-conversion__title {
    clip-path: none;
    animation: none;
  }

  .contact-conversion__folio::after {
    transform: none;
    animation: none;
  }
}

/* ── RESPONSIVE ── */

@media (max-width: 1024px) {
  .contact-conversion__inner {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .contact-conversion__texte {
    position: static;
  }
}

@media (max-width: 767px) {
  .contact-conversion {
    padding-block: calc(var(--nav-height, 64px) + 20px) 56px;
  }

  /* Parité avec Mon approche et Mon histoire : la colonne texte occupe le
     viewport et y distribue folio / titre+lead+engagements / contact direct.
     Elle s'arrêtait sinon à 76 % de l'écran (65 % sur un téléphone haut),
     l'ouverture ne tenait pas le viewport. La carte formulaire passe donc
     juste sous le pli. Géométrie dupliquée dans critical.css. */
  .contact-conversion__texte {
    gap: var(--space-md);
    justify-content: space-between;
    min-height: calc(100svh - var(--nav-height, 64px) - 44px);
  }

  .contact-conversion__title {
    max-width: none;
  }

  .contact-conversion__lead {
    margin-bottom: var(--space-md);
    max-width: none;
  }

  .contact-conversion__engagement-num {
    font-size: 1.5rem;
    min-width: 56px;
  }

  .contact-conversion__carte {
    padding: 20px 18px 24px;
  }

  .contact-alternative__links {
    flex-direction: column;
    align-items: stretch;
  }

  .contact-alternative__links .btn {
    width: 100%;
    text-align: center;
  }
}