@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,400&family=Outfit:wght@200;300;400;500&display=swap');

.em-contact-global {
  --or:       #FFD050;
  --or2:      #E09820;
  --or-bd:    rgba(224,152,32,0.28);
  --f0:       #FFD050;
  --f1:       #1E1710;
  --f2:       rgba(224,152,32,0.20);
  --f3:       rgba(224,152,32,0.35);
  --e0:       #0E0B06;
  --e1:       #FDFAF5;
  --e4:       rgba(253,250,245,0.68);
  --e5:       rgba(253,250,245,0.45);
  --card:     #17130D;
  --card-bd:  rgba(224,152,32,0.42);
  --rouge:    #FF6B5E;
  --serif:    'Cormorant Garamond', Georgia, serif;
  --sans:     'Outfit', system-ui, sans-serif;
  --ease:     cubic-bezier(0.16,1,0.3,1);
  --pill:     50px;
  background: var(--e0);
  font-family: var(--sans);
  color: var(--e1);
  min-height: 100vh;
}

/* Fond noir pleine page — même raison que sur le panier : ce fichier
   n'est chargé que sur la page "contact" (voir etherikmind_enqueue()),
   donc pas besoin de cibler une classe body précise. */
html, body {
  background: #0E0B06 !important;
  min-height: 100vh;
}

/* ════ HEADER ════ */
.em-contact-header { text-align:center; padding:64px 24px 0; }
.em-contact-header .eyebrow {
  display:block; font-size:9px; letter-spacing:.35em;
  text-transform:uppercase; color:var(--e5); margin-bottom:8px;
}
.em-contact-header h1 {
  font-family:var(--serif); font-size:clamp(2rem,5vw,3rem);
  font-weight:500; color:var(--e1); margin:0 0 14px;
}
.em-contact-divider { display:flex; align-items:center; gap:14px; justify-content:center; margin-top:6px; }
.em-contact-divider span { flex:1; max-width:60px; height:.5px; background:linear-gradient(90deg,transparent,var(--or-bd)); }
.em-contact-divider span:last-child { background:linear-gradient(270deg,transparent,var(--or-bd)); }
.em-contact-divider i { width:5px; height:5px; background:var(--or); transform:rotate(45deg); flex-shrink:0; display:block; }
.em-contact-sub {
  max-width:440px; margin:18px auto 0; font-family:var(--serif); font-style:italic;
  font-size:15px; line-height:1.6; color:var(--e4);
}

/* ════ LAYOUT ════ */
.em-contact-layout {
  max-width:920px; margin:56px auto 96px; padding:0 24px;
  display:grid; grid-template-columns:0.8fr 1.2fr; gap:56px; align-items:start;
}
@media (max-width:800px) {
  .em-contact-layout { grid-template-columns:1fr; gap:44px; margin:44px auto 72px; }
}

/* ════ COLONNE INFOS ════ */
.em-contact-info { display:flex; flex-direction:column; gap:28px; }
.em-ci-block { padding-bottom:24px; border-bottom:1px solid var(--f2); }
.em-ci-block:last-child { border-bottom:none; padding-bottom:0; }
.em-ci-label {
  display:block; font-family:var(--sans); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--e5); margin-bottom:8px;
}
.em-ci-value {
  font-family:var(--serif); font-size:19px; color:var(--e1); text-decoration:none;
  transition:color .3s var(--ease);
}
a.em-ci-value:hover { color:var(--or); }
.em-ci-socials { display:flex; gap:10px; margin-top:2px; }
.em-ci-socials a {
  display:flex; align-items:center; justify-content:center; width:38px; height:38px;
  border-radius:50%; background:var(--card); border:1px solid var(--card-bd);
  color:var(--e4); transition:all .3s var(--ease);
}
.em-ci-socials a:hover { color:var(--or); border-color:var(--or2); transform:translateY(-2px); }

/* ════ FORMULAIRE (WPForms restylé) ════ */
.em-contact-form-wrap {
  background:var(--card); border:1px solid var(--card-bd); border-radius:20px;
  padding:36px 32px;
}
@media (max-width:480px) { .em-contact-form-wrap { padding:28px 20px; } }

.em-contact-form-wrap .wpforms-container { margin:0 !important; }
.em-contact-form-wrap .wpforms-field-container { margin:0 !important; }
.em-contact-form-wrap .wpforms-field {
  padding:0 !important; margin:0 0 16px !important;
}
.em-contact-form-wrap .wpforms-field-hp { display:none !important; }

.em-contact-form-wrap .wpforms-field-label { display:none !important; } /* déjà masqués visuellement par WPForms, on s'assure qu'ils ne réapparaissent pas */

.em-contact-form-wrap input[type="text"],
.em-contact-form-wrap input[type="email"],
.em-contact-form-wrap input[type="tel"],
.em-contact-form-wrap textarea {
  width:100% !important; box-sizing:border-box !important;
  font-family:var(--sans) !important; font-size:16px !important; font-weight:300 !important;
  color:var(--e1) !important; background:var(--e0) !important;
  border:1px solid var(--f3) !important; border-radius:14px !important;
  padding:14px 18px !important; outline:none !important;
  transition:border-color .25s var(--ease) !important;
}
.em-contact-form-wrap textarea {
  min-height:130px !important; resize:vertical !important; border-radius:16px !important;
  font-family:var(--sans) !important;
}
.em-contact-form-wrap input::placeholder,
.em-contact-form-wrap textarea::placeholder { color:var(--e5) !important; opacity:1 !important; }
.em-contact-form-wrap input:focus,
.em-contact-form-wrap textarea:focus { border-color:var(--or) !important; }

.em-contact-form-wrap .wpforms-submit-container { margin:8px 0 0 !important; }
.em-contact-form-wrap button.wpforms-submit {
  display:block !important; width:100% !important; text-align:center !important;
  font-family:var(--sans) !important; font-size:15px !important; font-weight:500 !important;
  letter-spacing:.02em !important; color:var(--e0) !important; background:var(--f0) !important;
  border:none !important; border-radius:var(--pill) !important; padding:16px 32px !important;
  cursor:pointer !important; transition:all .3s var(--ease) !important;
  box-shadow:0 6px 20px rgba(224,152,32,.22) !important;
}
.em-contact-form-wrap button.wpforms-submit:hover {
  transform:translateY(-2px); box-shadow:0 10px 28px rgba(224,152,32,.3) !important;
}

/* Messages d'erreur / succès WPForms */
.em-contact-form-wrap .wpforms-error { color:var(--rouge) !important; font-size:12px !important; margin-top:4px !important; }
.em-contact-form-wrap .wpforms-confirmation-container,
.em-contact-form-wrap .wpforms-confirmation-container-full {
  font-family:var(--serif) !important; font-size:18px !important; font-style:italic !important;
  color:var(--e1) !important; text-align:center !important; padding:20px 0 !important;
  background:none !important; border:none !important;
}