/* ============================================================
   form.css — Adhésion page — FNHT Brand Theme
   Depends on: banner.css + index.css (for :root variables)
   ============================================================ */

/* ─── Hero (reused pattern) ───────────────────────────────── */
.fed-hero {
  position: relative;
  height: 70vh;
  min-height: 460px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.fed-hero-bg {
  position: absolute; inset: -5%;
  background-size: cover; background-position: center;
  transform: scale(1.05); transition: transform 8s ease-out;
  will-change: transform;
}
.fed-hero:hover .fed-hero-bg { transform: scale(1); }
.fed-hero-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(10,4,4,0.90) 0%, rgba(10,4,4,0.35) 60%, transparent 100%),
    linear-gradient(to top,   rgba(10,4,4,0.72) 0%, transparent 55%);
}
.fed-hero .grain { z-index: 1; }
.fed-hero-content {
  position: relative; z-index: 2;
  padding: 0 8vw 6vh; max-width: 680px;
}
.fed-hero-content .section-tag { display: block; margin-bottom: 1rem; }
.fed-hero-content h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(3rem, 7vw, 6rem);
  font-weight: 300; line-height: 0.95;
  color: var(--cream); letter-spacing: -0.02em; margin-bottom: 1.5rem;
}
.fed-hero-content h1 em { font-style: italic; color: rgba(247,244,240,0.7); }
.fed-hero-content p {
  font-family: 'Barlow', sans-serif;
  font-size: 0.95rem; font-weight: 300; line-height: 1.75;
  color: rgba(247,244,240,0.60); max-width: 440px;
}
.fed-hero-scroll {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 0.5rem; margin-top: 2.5rem;
  font-family: 'Barlow', sans-serif; font-size: 0.62rem;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(247,244,240,0.4);
  animation: fadeFloat 2.5s ease-in-out infinite;
}
.fed-hero-scroll .line {
  width: 1px; height: 28px;
  background: linear-gradient(to bottom, transparent, var(--red-light));
}
@keyframes fadeFloat {
  0%,100% { opacity:.4; transform:translateY(0); }
  50%      { opacity:.8; transform:translateY(5px); }
}

/* Vertical label */
.form-vertical-label {
  position: absolute; right: 3vw; top: 50%;
  transform: translateY(-50%) rotate(90deg);
  font-family: 'Barlow', sans-serif; font-size: .62rem;
  letter-spacing: .35em; text-transform: uppercase;
  color: rgba(247,244,240,.22); white-space: nowrap; z-index: 2;
}

/* Shared section title */
.fed-section-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 300; color: var(--dark);
  letter-spacing: -0.01em; line-height: 1.05; margin-bottom: 1rem;
}
.fed-section-title em { font-style: italic; color: var(--red); }

/* ─── Adhésion section layout ─────────────────────────────── */
.adh-section { background: var(--warm-white); }

.adh-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 5rem;
  align-items: start;
}

/* ─── Info column ─────────────────────────────────────────── */
.adh-info .heading-line { margin: 1rem 0 2rem; }

.adh-intro {
  font-family: 'Barlow', sans-serif;
  font-size: 0.95rem; font-weight: 300;
  line-height: 1.85; color: var(--text-muted);
  margin-bottom: 2.5rem;
}

/* Benefits list */
.adh-benefits {
  list-style: none; padding: 0; margin: 0 0 2.5rem;
  display: flex; flex-direction: column; gap: 1.25rem;
}
.adh-benefits li {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--border-light);
  background: #fff;
  transition: border-color .3s, background .3s;
}
.adh-benefits li:hover {
  border-color: var(--red);
  background: rgba(139,26,26,.03);
}

.adh-benefit-icon {
  width: 40px; height: 40px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(139,26,26,.08);
  border: 1px solid rgba(139,26,26,.15);
  color: var(--red); font-size: 0.9rem;
  transition: background .3s, color .3s;
}
.adh-benefits li:hover .adh-benefit-icon {
  background: var(--red); color: var(--cream);
}

.adh-benefits li div { display: flex; flex-direction: column; gap: 0.2rem; }
.adh-benefits li strong {
  font-family: 'Barlow', sans-serif;
  font-size: 0.85rem; font-weight: 500;
  color: var(--dark); letter-spacing: 0.03em;
}
.adh-benefits li span {
  font-family: 'Barlow', sans-serif;
  font-size: 0.8rem; font-weight: 300;
  color: var(--text-muted);
}

/* Contact items */
.adh-contact-items { display: flex; flex-direction: column; gap: 0.75rem; }
.adh-contact-item {
  display: flex; align-items: center; gap: 1rem;
  padding: 0.9rem 1rem;
  background: #fff; border: 1px solid var(--border-light);
  transition: border-color .3s;
}
.adh-contact-item:hover { border-color: var(--red); }
.adh-contact-item div { display: flex; flex-direction: column; gap: 0.1rem; }
.adh-contact-item strong {
  font-family: 'Barlow', sans-serif;
  font-size: 0.88rem; font-weight: 500; color: var(--dark);
}
.adh-contact-item span {
  font-family: 'Barlow', sans-serif;
  font-size: 0.7rem; color: var(--text-muted); letter-spacing: 0.05em;
}

/* ─── Form column ─────────────────────────────────────────── */
.adh-form-card {
  background: #fff;
  border: 1px solid var(--border-light);
  position: relative;
  overflow: hidden;
}

/* Red-to-green top stripe */
.adh-form-card::before {
  content: ''; position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(to right, var(--red) 60%, var(--green) 100%);
}

.adh-form-header {
  padding: 2rem 2rem 0;
  margin-bottom: 1.5rem;
}
.adh-form-header p {
  font-family: 'Barlow', sans-serif;
  font-size: 0.85rem; font-weight: 300;
  color: var(--text-muted); margin-top: 0.5rem; margin-bottom: 0;
}

/* Form itself */
form#adh-form { padding: 0 2rem 2rem; }

.adh-form-row { margin-bottom: 1rem; }
.adh-form-row.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

/* Reuse .form-field from index.css */
.form-field { display: flex; flex-direction: column; }
.form-field label {
  font-family: 'Barlow', sans-serif;
  font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--text-body); margin-bottom: 0.4rem;
}
.form-field .req { color: var(--red); }

.form-field input {
  width: 100%; background: var(--warm-white);
  border: 1px solid var(--border-light); border-radius: 0;
  padding: 0.85rem 1rem;
  font-family: 'Barlow', sans-serif; font-size: 0.9rem;
  font-weight: 300; color: var(--dark);
  outline: none; transition: border-color .3s, background .3s;
}
.form-field input::placeholder { color: rgba(122,112,104,.5); }
.form-field input:focus {
  border-color: var(--red);
  background: #fff;
}
.form-field input:valid:not(:placeholder-shown) {
  border-color: var(--green);
}

/* Submit button */
.adh-submit {
  width: 100%;
  display: flex; align-items: center; justify-content: center;
  gap: 0.75rem;
  font-family: 'Barlow', sans-serif;
  font-size: 0.8rem; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--cream);
  background: var(--red);
  border: 1px solid var(--red);
  padding: 1rem 2rem;
  cursor: pointer;
  position: relative; overflow: hidden;
  transition: background .35s ease, border-color .35s ease;
  margin-top: 0.5rem;
}
.adh-submit::before {
  content: ''; position: absolute; inset: 0;
  background: var(--red-bright);
  transform: translateX(-101%);
  transition: transform .45s cubic-bezier(0.77,0,0.175,1);
}
.adh-submit:hover::before { transform: translateX(0); }
.adh-submit span, .adh-submit i { position: relative; z-index: 1; }
.adh-submit i { transition: transform .3s ease; }
.adh-submit:hover i { transform: translateX(5px); }

/* ─── Responsive ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  .adh-grid { grid-template-columns: 1fr; gap: 3rem; }
}

@media (max-width: 768px) {
  .fed-hero { height: 58vh; min-height: 380px; }
  .fed-hero-content { padding: 0 6vw 5vh; }
  .fed-hero-content h1 { font-size: clamp(2rem, 8vw, 3rem); }
  .form-vertical-label { display: none; }

  .adh-form-row.two-col { grid-template-columns: 1fr; }
  .adh-form-header, form#adh-form { padding-left: 1.25rem; padding-right: 1.25rem; }
}

@media (max-width: 480px) {
  .fed-hero-content h1 { font-size: 1.9rem; }
  .adh-benefits li { flex-direction: column; gap: 0.75rem; }
}