/* =====================================================================
   CONTACT.CSS - Styles propres à contact.html
   ===================================================================== */

/* Hero interne plus court */
.hero-inner--sm { min-height: 46vh; }

/* ---- Champs de formulaire ---- */
.field label { display: block; font-size: .82rem; font-weight: 600; color: var(--blue-900); margin-bottom: .45rem; }
.field-wrap {
  position: relative; display: flex; align-items: center;
  background: #fff; border: 1px solid rgba(0, 87, 168, 0.16);
  border-radius: .7rem; transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.field-wrap > i { position: absolute; left: .85rem; color: var(--slate-400); pointer-events: none; }
.field-wrap input, .field-wrap select, .field-wrap textarea {
  width: 100%; background: transparent; border: none; outline: none;
  padding: .8rem 1rem .8rem 2.6rem; font-size: .95rem; color: var(--ink);
  font-family: inherit; border-radius: .7rem;
}
.field-wrap select { appearance: none; cursor: pointer; color: var(--ink); }
.field-wrap--area { align-items: flex-start; }
.field-wrap--area textarea { padding-left: 1rem; resize: vertical; min-height: 7rem; }
.field-wrap:focus-within { border-color: var(--blue-500); box-shadow: 0 0 0 3px rgba(0, 133, 202, 0.15); }
.field-wrap.invalid { border-color: var(--red-500); box-shadow: 0 0 0 3px rgba(239, 51, 64, 0.12); }

/* Chevron du select */
.field-wrap:has(select)::after {
  content: ''; position: absolute; right: 1rem; width: 8px; height: 8px;
  border-right: 2px solid var(--slate-400); border-bottom: 2px solid var(--slate-400);
  transform: rotate(45deg) translateY(-2px); pointer-events: none;
}

/* Consentement */
.consent { display: flex; align-items: flex-start; gap: .6rem; font-size: .88rem; color: var(--slate-600); cursor: pointer; }
.consent input { margin-top: .2rem; width: 1.05rem; height: 1.05rem; accent-color: var(--blue-700); flex-shrink: 0; }

/* Bouton submit + états */
#submit-btn { position: relative; }
#submit-btn .btn-loading { display: none; align-items: center; gap: .6rem; }
#submit-btn.is-loading .btn-label { display: none; }
#submit-btn.is-loading .btn-loading { display: inline-flex; }
#submit-btn.is-loading { opacity: .85; cursor: progress; }
.spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Alerte erreur */
.form-alert {
  display: flex; align-items: center; gap: .6rem; margin-top: 1.25rem;
  background: var(--red-50); color: var(--red-700);
  border: 1px solid rgba(206, 17, 38, 0.2); border-radius: .7rem;
  padding: .85rem 1rem; font-size: .9rem; font-weight: 500;
}
.form-alert i { flex-shrink: 0; }

/* Succès */
.form-success { text-align: center; padding: 2.5rem 1rem; animation: panelFade .4s var(--ease); }
.success-ic {
  width: 4.5rem; height: 4.5rem; border-radius: 9999px; margin: 0 auto 1.25rem;
  display: flex; align-items: center; justify-content: center;
  background: rgba(22, 163, 74, 0.1); color: #16A34A;
  border: 1px solid rgba(22, 163, 74, 0.25);
}
@keyframes panelFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---- Cartes canaux ---- */
.channel-card {
  display: flex; align-items: flex-start; gap: 1rem; padding: 1.5rem;
  transition: transform .3s var(--ease), border-color .3s var(--ease);
  text-decoration: none;
}
a.channel-card:hover { transform: translateY(-3px); border-color: rgba(212, 160, 23, 0.45); }
.channel-ic {
  width: 3rem; height: 3rem; border-radius: .85rem; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--grad-hero); color: #fff;
  box-shadow: 0 12px 22px -12px rgba(0, 41, 77, 0.6);
}
.channel-card h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; font-weight: 700; color: var(--blue-900); margin-bottom: .2rem; }
.channel-card p { font-size: .9rem; color: var(--slate-600); font-weight: 300; line-height: 1.45; }
.channel-meta { display: inline-block; margin-top: .4rem; font-size: .78rem; font-weight: 600; color: var(--blue-700); }

/* Note d'information */
.info-note {
  display: flex; gap: .75rem; align-items: flex-start;
  background: var(--blue-50); border: 1px solid rgba(0, 87, 168, 0.14);
  border-radius: .85rem; padding: 1.1rem 1.25rem;
  font-size: .85rem; color: var(--blue-800); line-height: 1.5;
}
.info-note i { color: var(--blue-700); margin-top: .1rem; }

/* ---- FAQ accordéon ---- */
.faq { display: flex; flex-direction: column; gap: .85rem; }
.faq-item { background: #fff; border: 1px solid rgba(0, 87, 168, 0.12); border-radius: 1rem; overflow: hidden; box-shadow: var(--glass-shadow); }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.25rem 1.5rem; cursor: pointer; background: none; border: none;
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.02rem; font-weight: 600;
  color: var(--blue-900); text-align: left; transition: color .25s var(--ease);
}
.faq-q:hover { color: var(--blue-700); }
.faq-chevron { color: var(--blue-700); transition: transform .3s var(--ease); flex-shrink: 0; }
.faq-q[aria-expanded="true"] .faq-chevron { transform: rotate(180deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .35s var(--ease); }
.faq-a p { padding: 0 1.5rem 1.4rem; color: var(--slate-600); font-weight: 300; line-height: 1.6; }