/* ── HERO CONTACT ──────────────────────────────────────── */
.contact-hero {
  padding-top: var(--nav-h);
  background: var(--ink);
  position: relative; overflow: hidden;
}

.contact-hero::after {
  content: '';
  position: absolute; top: -60px; right: -60px;
  width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(200,16,46,0.25) 0%, transparent 70%);
  filter: blur(40px);
}
.contact-hero-inner {
  max-width: var(--max-w); margin: 0 auto;
  padding: 4rem 2rem 3.5rem;
  position: relative; z-index: 1;
}
.contact-eyebrow {
  font-family: var(--font-display); font-size: .72rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--accent);
  display: flex; align-items: center; gap: 10px; margin-bottom: 1rem;
}
.contact-eyebrow::before { content: ''; display: block; width: 20px; height: 2px; background: var(--accent); }
.contact-hero h1 {
  font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 800; letter-spacing: -.04em; color: #fff; margin-bottom: 1rem; line-height: 1.1;
}
.contact-hero h1 em { font-style: normal; color: var(--red); }
.contact-hero-sub {
  font-size: 1rem; color: rgba(255,255,255,0.55); line-height: 1.75; max-width: 560px;
}

/* ── MAIN LAYOUT ───────────────────────────────────────── */
.contact-main {
  max-width: var(--max-w); margin: 0 auto;
  padding: 4rem 2rem 6rem;
}
.contact-layout {
  display: grid; grid-template-columns: 1fr 420px; gap: 4rem; align-items: start;
}

/* ── FORMULAIRE ────────────────────────────────────────── */
.contact-form-wrap {}
.contact-form-header { margin-bottom: 2rem; }
.contact-form-header h2 {
  font-family: var(--font-display); font-size: 1.4rem; font-weight: 800;
  letter-spacing: -.03em; margin-bottom: .4rem;
}
.contact-form-header p { font-size: .85rem; color: var(--mid); }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-bottom: 1.2rem; }
.form-group { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1.2rem; }
.form-row .form-group { margin-bottom: 0; }

.contact-form-wrap label {
  font-family: var(--font-display); font-size: .72rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--mid);
}
.contact-form-wrap input[type=text],
.contact-form-wrap input[type=email],
.contact-form-wrap input[type=tel],
.contact-form-wrap select,
.contact-form-wrap textarea {
  padding: .75rem 1rem; border-radius: 8px;
  border: 1.5px solid var(--border);
  font-family: var(--font-body); font-size: .9rem;
  background: var(--white); color: var(--ink);
  transition: border-color .2s, box-shadow .2s;
  width: 100%;
}
.contact-form-wrap input:focus,
.contact-form-wrap select:focus,
.contact-form-wrap textarea:focus {
  outline: none; border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(200,16,46,0.1);
}
.contact-form-wrap input.error,
.contact-form-wrap select.error,
.contact-form-wrap textarea.error { border-color: var(--red); }
.contact-form-wrap textarea { resize: vertical; min-height: 140px; line-height: 1.6; }
.contact-form-wrap select { cursor: pointer; }

/* Validation visuelle */
.contact-form-wrap input:valid:not(:placeholder-shown),
.contact-form-wrap textarea:valid:not(:placeholder-shown) {
  border-color: var(--green);
}

.btn-submit {
  width: 100%; padding: 15px 28px; border-radius: 8px;
  background: var(--red); color: #fff; border: none; cursor: pointer;
  font-family: var(--font-display); font-size: .95rem; font-weight: 700;
  letter-spacing: .02em;
  transition: background .2s, transform .15s, box-shadow .2s;
  box-shadow: 0 4px 20px rgba(200,16,46,0.3);
  margin-top: .5rem;
}
.btn-submit:hover {
  background: #a50d26; transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(200,16,46,0.4);
}
.btn-submit:disabled { opacity: .6; cursor: not-allowed; transform: none; }

/* Alerte formulaire */
.form-alert {
  padding: 1rem 1.2rem; border-radius: 8px;
  font-family: var(--font-display); font-size: .85rem;
  margin-bottom: 1.5rem;
}
.form-alert.success {
  background: rgba(0,119,73,0.1); color: var(--green);
  border: 1px solid rgba(0,119,73,0.25);
}
.form-alert.error {
  background: rgba(200,16,46,0.08); color: var(--red);
  border: 1px solid rgba(200,16,46,0.2);
}

/* ── INFOS CONTACT ─────────────────────────────────────── */
.contact-info-wrap { display: flex; flex-direction: column; gap: 1.5rem; }

.contact-info-block {
  background: var(--pale); border-radius: 16px; padding: 1.8rem;
  border: 1px solid var(--border);
}
.contact-info-block h3 {
  font-family: var(--font-display); font-size: 1rem; font-weight: 700;
  letter-spacing: -.02em; margin-bottom: 1.4rem;
}
.contact-info-item {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: .8rem 0; border-bottom: 1px solid var(--border);
}
.contact-info-item:last-child { border-bottom: none; padding-bottom: 0; }
.contact-info-icon {
  width: 36px; height: 36px; border-radius: 8px;
  background: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 1rem; flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.contact-info-label {
  font-family: var(--font-display); font-size: .65rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--mid);
  margin-bottom: .2rem;
}
.contact-info-value {
  font-size: .88rem; color: var(--ink); line-height: 1.5;
}
.contact-info-value a {
  color: var(--red); transition: opacity .2s;
}
.contact-info-value a:hover { opacity: .75; }

/* ── CARTE ─────────────────────────────────────────────── */
.contact-map-wrap {
  border-radius: 16px; overflow: hidden;
  border: 1px solid var(--border);
}
.contact-map-label {
  font-family: var(--font-display); font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--mid);
  padding: .9rem 1.2rem; background: var(--pale);
  border-bottom: 1px solid var(--border);
}
#map { height: 260px; width: 100%; }

/* Leaflet override */
.leaflet-container { font-family: var(--font-display); }
.leaflet-popup-content-wrapper {
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important;
}
.leaflet-popup-content {
  font-family: var(--font-display); font-size: .82rem; line-height: 1.5;
}
.map-popup-title {
  font-weight: 700; color: var(--ink); margin-bottom: .3rem;
}
.map-popup-addr { color: var(--mid); font-size: .78rem; }

/* ── CARD ISTQB ────────────────────────────────────────── */
.contact-istqb-card {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.2rem 1.5rem; border-radius: 12px;
  background: var(--ink); border: 1px solid rgba(255,255,255,0.08);
  transition: transform .2s, box-shadow .2s;
}
.contact-istqb-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.2); }
.contact-istqb-logo {
  font-family: var(--font-display); font-size: 1rem; font-weight: 800;
  color: #fff; background: var(--red); padding: .5rem .8rem;
  border-radius: 7px; flex-shrink: 0; letter-spacing: .02em;
}
.contact-istqb-title {
  font-family: var(--font-display); font-size: .88rem; font-weight: 700;
  color: #fff; margin-bottom: .2rem;
}
.contact-istqb-sub {
  font-family: var(--font-display); font-size: .75rem;
  color: rgba(255,255,255,0.45);
}

/* → footer géré par main.css + footer.js *//* ── RESPONSIVE ────────────────────────────────────────── */
@media (max-width: 1024px) {
  .contact-layout { grid-template-columns: 1fr; gap: 2.5rem; }
  .contact-info-wrap { order: -1; }
  #map { height: 220px; }
}
@media (max-width: 600px) {
  .form-row { grid-template-columns: 1fr; }
}