/* ==========================================================================
   TRIOPARC — Page Contact
   Source : Figma « Contact v1 » (391:2) — 1920 × 1985
   ========================================================================== */

/* Fond derrière la courbe du hero = début de la section Contact */
.contact-page { background: #14183e; }

/* ---------- HERO (618) ---------- */
.contact-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 618px;
  padding-top: 124px;
  padding-bottom: 200px;
  background: var(--bg-1);
  /* Courbe du bas : même masque que l'accueil (ellipse 2800 × 808), aligné au bas du hero */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio=%22none%22 overflow=%22visible%22 style=%22display: block;%22 width=%222800%22 height=%22924%22 viewBox=%220 0 2800 924%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M2360 225.938C2630.89 299.61 2800 404.106 2800 520C2800 743.123 2173.2 924 1400 924C626.801 924 0 743.123 0 520C0 404.106 169.107 299.61 440 225.938V0H2360V225.938Z%22 fill=%22%23D9D9D9%22/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio=%22none%22 overflow=%22visible%22 style=%22display: block;%22 width=%222800%22 height=%22924%22 viewBox=%220 0 2800 924%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M2360 225.938C2630.89 299.61 2800 404.106 2800 520C2800 743.123 2173.2 924 1400 924C626.801 924 0 743.123 0 520C0 404.106 169.107 299.61 440 225.938V0H2360V225.938Z%22 fill=%22%23D9D9D9%22/%3E%3C/svg%3E");
  -webkit-mask-size: max(2800px, 145.84%) auto;
  mask-size: max(2800px, 145.84%) auto;
  -webkit-mask-position: 50% 100%;
  mask-position: 50% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
/* VISUEL — hero, déposer ici (emplacement photo/vidéo, dégradé de la maquette) */
.contact-hero__visuel {
  position: absolute;
  top: 0; bottom: 0;
  left: 38.54%;      /* 740 / 1920 */
  width: 61.46%;     /* 1180 / 1920 */
  background: linear-gradient(180deg, #1a2450 0%, #0a1024 100%);
  overflow: hidden;
}
.contact-hero__visuel img, .contact-hero__visuel video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* VOILE — fusion de l'image vers la gauche */
.contact-hero__visuel::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, #000 70.7%);
}
/* Dégradé — voile de gauche */
.contact-hero__voile {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(180deg, rgba(3, 5, 13, 0.88) 0%, rgba(3, 5, 13, 0.28) 10%, rgba(3, 5, 13, 0) 20%, rgba(3, 5, 13, 0) 84%, rgba(3, 5, 13, 0.42) 100%),
    radial-gradient(576px 210px at 14% 86%, rgba(201, 92, 255, 0.22) 0%, rgba(201, 92, 255, 0.1364) 40%, rgba(201, 92, 255, 0.0484) 70%, rgba(201, 92, 255, 0) 100%),
    radial-gradient(806px 433px at 30% 44%, rgba(138, 92, 255, 0.62) 0%, rgba(138, 92, 255, 0.3844) 40%, rgba(138, 92, 255, 0.1364) 70%, rgba(138, 92, 255, 0) 100%),
    linear-gradient(90deg, rgb(10, 15, 40) 0%, rgb(21, 15, 62) 26%, rgba(27, 18, 72, 0.9) 38.5%, rgba(23, 26, 68, 0.52) 47%, rgba(12, 20, 50, 0.16) 55%, rgba(6, 11, 28, 0) 63%, rgba(6, 11, 28, 0) 100%);
}
.contact-hero .container { position: relative; z-index: 1; }
.contact-hero__header { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.contact-hero__header .eyebrow { line-height: 1.6; }
.contact-hero__title {
  font-size: 80px;
  line-height: 1.02;
  letter-spacing: -0.8px;
  color: var(--txt-principal);
  text-shadow: 0 0 64px rgba(56, 198, 240, 0.18);
  white-space: nowrap;
}
.contact-hero__title .grad-text { background-image: linear-gradient(90deg, #38c6f0 0%, #a9e85e 100%); }
.contact-hero__sub {
  max-width: 700px;
  font-size: 20px;
  line-height: 1.65;
  color: var(--txt-doux);
}

/* Indicateur de défilement */
.contact-hero__scroll {
  position: absolute;
  left: 50%;
  top: calc(100% - 104px);     /* y = 514 sur 618 (maquette) */
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #d1def5;
}
.contact-hero__scroll-label { display: flex; flex-direction: column; align-items: center; gap: 10px; white-space: nowrap; }
.contact-hero__scroll-label span:first-child { font-size: 12px; letter-spacing: 4.08px; }
.contact-hero__scroll-label span:last-child { font-size: 26px; font-weight: 300; line-height: 1; animation: contact-bob 2.2s ease-in-out infinite; }
.contact-hero__light {
  width: 246px; height: 3px;
  background: linear-gradient(90deg, rgba(15, 28, 61, 0) 0%, rgba(56, 198, 240, 0.55) 28%, rgba(255, 255, 255, 0.95) 50%, rgba(255, 111, 168, 0.55) 72%, rgba(15, 28, 61, 0) 100%);
  box-shadow: 0 -8px 60px 6px rgba(140, 102, 255, 0.5), 0 0 26px 0 rgba(255, 255, 255, 0.45);
}
@keyframes contact-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* ---------- SECTION CONTACT (1040) ---------- */
.contact-main {
  background: linear-gradient(180deg, #14183e 0%, #18214b 18%, #1a2250 37%, #13183d 56%, var(--bg-6) 78%, var(--bg-7) 100%);
}
.contact-main .container { padding-top: 140px; padding-bottom: 140px; }
/* Masse fluide cyan (halo central de la maquette) */
.contact-blob--cyan {
  width: 1400px; height: 1100px;
  left: calc(50% - 700px); top: -140px;
  background: radial-gradient(ellipse closest-side, rgba(56, 198, 240, 0.2) 0%, rgba(56, 198, 240, 0.14) 30%, rgba(56, 198, 240, 0.04) 60%, rgba(56, 198, 240, 0) 76%);
}
.contact-main .blob--fond { left: -1020px; top: -760px; }

.contact-cols { display: flex; align-items: flex-start; gap: 80px; width: 100%; }
.contact-h2 {
  font-size: 42px;
  line-height: 1.12;
  letter-spacing: -0.42px;
  color: var(--txt-principal);
}
.contact-h2 .grad-text { background-image: linear-gradient(90deg, #38c6f0 0%, #a9e85e 100%); }

/* Colonne — formulaire */
.contact-form-col {
  flex: 0 0 860px;
  max-width: 100%;
  min-width: 0;
  display: flex; flex-direction: column; align-items: stretch; gap: 34px;
}
.contact-form { display: flex; flex-direction: column; gap: 34px; width: 100%; }
.contact-form__grid { display: flex; flex-direction: column; gap: 24px; width: 100%; }
.contact-form__row { display: flex; gap: 28px; width: 100%; }
.contact-form__row > .contact-field { flex: 1 1 0; min-width: 0; }
.contact-field { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; width: 100%; }
.contact-field__label {
  font-size: 13px; font-weight: 500; letter-spacing: 2.34px; line-height: 16px;
  color: var(--txt-discret);
  text-transform: uppercase;
}
.contact-field__box { position: relative; width: 100%; }
.contact-field__input {
  display: block;
  width: 100%;
  margin: 0;
  padding: 15px 20px;          /* 58 px bordure comprise (maquette) */
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.13);
  font: inherit;
  font-size: 20px;
  line-height: 1.3;
  color: var(--txt-principal);
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.contact-field__input::placeholder { color: var(--txt-tres-discret); opacity: 1; }
.contact-field__input:hover { border-color: rgba(255, 255, 255, 0.22); }
.contact-field__input:focus {
  border-color: rgba(56, 198, 240, 0.6);
  box-shadow: 0 0 0 3px rgba(56, 198, 240, 0.12);
  background: rgba(255, 255, 255, 0.05);
}
.contact-field__input--select { padding-right: 48px; cursor: pointer; }
.contact-field__input--select:invalid, .contact-field__input--select.is-placeholder { color: var(--txt-tres-discret); }
.contact-field__input--select option { color: #0a122b; background: #fff; }
.contact-field__box--select::after {
  content: "▾";
  position: absolute;
  right: 20px; top: 50%;
  transform: translateY(-50%);
  font-size: 15px;
  color: var(--txt-discret);
  pointer-events: none;
}
textarea.contact-field__input {
  height: 190px;
  padding: 18px 20px;
  line-height: 1.5;
  resize: vertical;
}
/* Erreurs de validation */
.contact-field.is-invalid .contact-field__input { border-color: rgba(255, 111, 168, 0.7); box-shadow: 0 0 0 3px rgba(255, 111, 168, 0.12); }
.contact-field__error {
  display: none;
  font-size: 14px; line-height: 1.4;
  color: var(--neon-rose);
}
.contact-field.is-invalid .contact-field__error { display: block; }
.contact-form .btn { width: 100%; }
.contact-form .btn[disabled] { opacity: .6; cursor: progress; transform: none; }
.contact-form__note { width: 100%; font-size: 15px; line-height: 1.5; color: var(--txt-tres-discret); text-align: center; white-space: pre-wrap; }
.contact-form__status { font-size: 15px; line-height: 1.5; color: var(--neon-rose); text-align: center; }
.contact-form__status:empty { display: none; }

/* État de succès */
.contact-success {
  display: none;
  flex-direction: column; align-items: flex-start; gap: 20px;
  width: 100%;
  padding: 40px 36px;
  border-radius: 18px;
  background: #0a122b;
  border: 1.5px solid var(--neon-lime);
  box-shadow: 0 0 40px 0 rgba(169, 232, 94, 0.24);
}
.contact-success.is-visible { display: flex; animation: contact-fade .5s ease; }
.contact-form.is-hidden { display: none; }
.contact-success__eyebrow { font-size: 13px; font-weight: 500; letter-spacing: 2.34px; color: var(--neon-lime); text-transform: uppercase; }
.contact-success__title { font-size: 26px; line-height: 1.18; letter-spacing: -0.26px; color: var(--txt-principal); }
.contact-success__title .grad-text { background-image: linear-gradient(90deg, #a9e85e 0%, #38c6f0 100%); }
.contact-success__p { font-size: 20px; line-height: 1.65; color: var(--txt-doux); }
.contact-success .contact-filet { --c: 169, 232, 94; }
@keyframes contact-fade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Colonne — informations */
.contact-info-col {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: 40px;
}
.contact-list { display: flex; flex-direction: column; width: 100%; }
.contact-info {
  --c: 255, 198, 58;
  display: flex; align-items: flex-start; gap: 20px;
  width: 100%;
  padding: 24px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.contact-info:first-child { padding-top: 0; }
.contact-info--jaune { --c: 255, 198, 58; --glow: 160, 107, 255; }
.contact-info--rose { --c: 255, 111, 168; }
.contact-info--cyan { --c: 56, 198, 240; }
.contact-info__icon {
  flex: 0 0 44px;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(var(--glow, var(--c)), 0.55);
}
.contact-info__text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.contact-info__title { font-size: 22px; font-weight: 500; line-height: 1.18; color: #fff; }
.contact-info__val { font-size: 17px; line-height: 1.5; color: var(--txt-discret); }
.contact-info__val a { transition: color .2s ease; }
.contact-info__val a:hover { color: #fff; }

/* Carte — Carrières */
.contact-carrieres {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 20px;
  width: 100%;
  padding: 40px 36px;
  border-radius: 18px;
  border: 1.2px solid transparent;
  /* Contour dégradé néon (rendu de la maquette) sur fond #0a122b */
  background:
    linear-gradient(#0a122b, #0a122b) padding-box,
    linear-gradient(135deg, #a9e85e 0%, #38c6f0 35%, #ff6fa8 65%, #ffc63a 100%) border-box;
  box-shadow: 6px 6px 32px -6px rgba(56, 198, 240, 0.16), -6px 6px 32px -6px rgba(255, 111, 168, 0.16);
}
.contact-carrieres__eyebrow { font-size: 13px; font-weight: 500; letter-spacing: 2.34px; line-height: normal; color: var(--neon-lime); text-transform: uppercase; }
.contact-carrieres__title { font-size: 26px; line-height: 1.18; letter-spacing: -0.26px; color: var(--txt-principal); }
.contact-filet {
  --c: 169, 232, 94;
  width: 100%; height: 1px;
  background: linear-gradient(90deg, rgba(var(--glow, var(--c)), 0.6) 0%, rgba(var(--glow, var(--c)), 0.04) 100%);
}
.contact-carrieres .btn { width: 100%; padding: 14px 20px; font-size: 17px; white-space: normal; text-align: center; }

/* ---------- Responsive ---------- */
@media (max-width: 1440px) {
  .contact-hero__title { font-size: 64px; }
  .contact-form-col { flex-basis: 56%; }
}
@media (max-width: 1280px) {
  .contact-cols { flex-direction: column; gap: 64px; }
  .contact-form-col, .contact-info-col { flex: 1 1 auto; width: 100%; }
}
@media (max-width: 1024px) {
  .contact-hero { min-height: 0; padding-top: 140px; padding-bottom: 180px; }
  .contact-hero__title { white-space: normal; }
}
@media (max-width: 720px) {
  .contact-hero { padding-top: 120px; padding-bottom: 150px; -webkit-mask-size: 300% auto; mask-size: 300% auto; }
  .contact-hero__visuel { left: 0; width: 100%; opacity: .55; }
  .contact-hero__title { font-size: 44px; }
  .contact-hero__sub { font-size: 18px; }
  .contact-hero__scroll { display: none; }
  .contact-main .container { padding-top: 90px; padding-bottom: 90px; }
  .contact-h2 { font-size: 34px; }
  .contact-form__row { flex-direction: column; gap: 24px; }
  .contact-field__input { font-size: 17px; }
  .contact-carrieres, .contact-success { padding: 32px 24px; }
}

/* Lueur mauve pour les éléments jaunes par défaut (sans variante de couleur) */
.contact-info:not([class*="contact-info--"]) { --glow: 160, 107, 255; }