/* ===================================================================
   HYDREAULYS — Page Contact
   =================================================================== */

.contact { padding: 72px 0 116px; }
.contact__layout {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 56px;
  align-items: start;
}

/* ----- Colonne info ----- */
.contact__aside { display: flex; flex-direction: column; gap: 16px; }
.cinfo {
  background: #fff;
  border: 1px solid var(--hy-line);
  border-radius: var(--radius-card, 22px);
  padding: 24px 26px;
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.cinfo__ic {
  width: 48px; height: 48px;
  border-radius: 14px;
  background: var(--hy-green-tint);
  color: var(--hy-blue);
  display: grid; place-items: center;
  flex: none;
}
.cinfo__t { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--hy-blue); margin: 2px 0 8px; }
.cinfo__v { font-size: 16px; font-weight: 700; color: var(--hy-ink); line-height: 1.4; }
.cinfo__v a { color: var(--hy-ink); }
.cinfo__v a:hover { color: var(--hy-blue); }
.cinfo__sub { font-size: 13.5px; color: var(--hy-muted); margin-top: 4px; line-height: 1.5; }

.cinfo--urgent {
  background: var(--hy-blue);
  border-color: var(--hy-blue);
  color: #fff;
}
.cinfo--urgent .cinfo__ic { background: rgba(255,255,255,.16); color: #fff; }
.cinfo--urgent .cinfo__t { color: var(--hy-cyan); }
.cinfo--urgent .cinfo__v, .cinfo--urgent .cinfo__v a { color: #fff; }
.cinfo--urgent .cinfo__sub { color: rgba(255,255,255,.8); }

/* ----- Carte formulaire ----- */
.contact__panel {
  background: #fff;
  border: 1px solid var(--hy-line);
  border-radius: 28px;
  padding: 42px 44px 40px;
  box-shadow: 0 30px 70px -42px rgba(0,58,112,.28);
}
.contact__panel-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--hy-blue); }
.contact__panel-title { font-size: clamp(26px, 3vw, 34px); font-weight: 800; letter-spacing: -.02em; line-height: 1.12; margin: 8px 0 6px; color: var(--hy-blue-ink); }
.contact__panel-sub { font-size: 15px; color: var(--hy-muted); line-height: 1.6; margin: 0 0 28px; max-width: 540px; }

/* ----- Thèmes (sélecteur visuel) ----- */
.ctheme-label { font-size: 13.5px; font-weight: 700; color: var(--hy-ink); margin-bottom: 12px; display: block; }
.ctheme-label .req { color: #C0392B; margin-left: 2px; }
.cthemes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 28px;
}
.ctheme {
  display: flex;
  align-items: center;
  gap: 11px;
  text-align: left;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1.5px solid var(--hy-line);
  background: var(--hy-paper);
  cursor: pointer;
  transition: all .18s ease;
  font-family: inherit;
}
.ctheme:hover { border-color: var(--hy-cyan); background: #fff; }
.ctheme__ic {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--hy-line);
  color: var(--hy-blue);
  display: grid; place-items: center;
  flex: none;
  transition: all .18s ease;
}
.ctheme__lbl { font-size: 13.5px; font-weight: 700; color: var(--hy-ink); line-height: 1.25; }
.ctheme--active {
  border-color: var(--hy-blue);
  background: var(--hy-blue-tint);
  box-shadow: 0 12px 26px -16px rgba(0,80,152,.5);
}
.ctheme--active .ctheme__ic { background: var(--hy-blue); border-color: var(--hy-blue); color: #fff; }
.ctheme--active .ctheme__lbl { color: var(--hy-blue-ink); }

@media (max-width: 1080px) {
  .contact__layout { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .cthemes { grid-template-columns: 1fr 1fr; }
  .contact__panel { padding: 28px 22px; }
}
@media (max-width: 460px) {
  .cthemes { grid-template-columns: 1fr; }
}

/* ----- Champs additionnels selon le thème ----- */
.cextra {
  border: 1px solid var(--hy-green-soft);
  background: var(--hy-green-tint);
  border-radius: 18px;
  padding: 22px 22px 24px;
  margin: -6px 0 4px;
  animation: cextraIn .3s cubic-bezier(.2,.8,.2,1);
}
@keyframes cextraIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.cextra__note {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 13.5px; font-weight: 700; color: var(--hy-blue-ink);
  margin: 0 0 18px; line-height: 1.4;
}
.cextra__note svg { color: var(--hy-blue); flex: none; margin-top: 2px; }
.cextra__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.cextra__full { grid-column: 1 / -1; }
.cextra .rec-input { background: #fff; }
.cextra__link {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 16px;
  font-size: 13.5px; font-weight: 800; color: var(--hy-blue);
}
.cextra__link:hover { color: var(--hy-blue-ink); }
.cextra__link svg { transition: transform .2s ease; }
.cextra__link:hover svg { transform: translateX(3px); }
@media (max-width: 720px) {
  .cextra__grid { grid-template-columns: 1fr; }
}