/* ===== DISONS DINETTE — Page Contact / Demande de devis ===== */
/* Charte reprise de index.html + legal.css : palette, typographies, composants partagés. */

/* ===== HERO ===== */
.ct-hero {
  padding: 64px 24px 40px;
  text-align: center;
  background: linear-gradient(180deg, var(--creme-rose), var(--creme));
}
.ct-hero .section-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--rose); margin-bottom: 14px;
}
.ct-hero h1 { font-size: clamp(2.2rem, 4vw, 3.2rem); margin-bottom: 12px; }
.ct-hero p { font-size: .95rem; color: #555; max-width: 540px; margin: 0 auto; line-height: 1.65; }

/* ===== LAYOUT ===== */
.ct-wrap {
  max-width: 760px; margin: 0 auto; padding: 48px 24px 90px;
}

/* ===== FORMULAIRE ===== */
.cta-form {
  text-align: left;
  background: #fff; border: 1px solid rgba(0,0,0,.07); border-radius: 16px;
  padding: 40px;
  box-shadow: 0 20px 60px rgba(30,74,46,.08);
}
.cta-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.cta-form-field { margin-bottom: 18px; }
.cta-form label {
  display: block; font-size: .82rem; font-weight: 500;
  color: var(--vert-fonce); margin-bottom: 6px;
}
.cta-form input, .cta-form select, .cta-form textarea {
  width: 100%; padding: 12px 14px; border: 1px solid #e2ddd3; border-radius: 6px;
  font-family: 'DM Sans', sans-serif; font-size: .9rem; color: var(--noir);
  background: var(--creme); transition: border-color .2s;
}
.cta-form input:focus, .cta-form select:focus, .cta-form textarea:focus {
  outline: none; border-color: var(--vert-moyen);
}
.cta-form textarea { resize: vertical; min-height: 110px; }

.cta-form .btn-rose {
  background: var(--rose); color: #fff;
  padding: 15px 32px; border-radius: 6px;
  text-decoration: none; font-size: .95rem; font-weight: 500;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: .2s; width: 100%; border: none; cursor: pointer; font-family: inherit;
}
.cta-form .btn-rose:hover { background: #d63060; transform: translateY(-2px); }
.cta-form .btn-rose:disabled { opacity: .6; cursor: not-allowed; transform: none; }

.cta-form-honeypot { position: absolute; left: -9999px; }
.cta-form-note { font-size: .78rem; color: #888; margin-top: 14px; text-align: center; }
.cta-form-error {
  display: none; color: var(--rose); font-size: .85rem; margin-top: 14px; text-align: center;
}
.cta-form-error.visible { display: block; }

.cta-form-success {
  display: none; text-align: center; padding: 56px 40px;
  background: #fff; border: 1px solid rgba(0,0,0,.07); border-radius: 16px;
  box-shadow: 0 20px 60px rgba(30,74,46,.08);
}
.cta-form-success.visible { display: block; }
.cta-form-success h2 { color: var(--vert-fonce); font-size: 1.6rem; margin-bottom: 10px; }
.cta-form-success p { color: #666; font-size: .95rem; }

/* ===== AUTRES MOYENS DE CONTACT ===== */
.ct-alt {
  max-width: 760px; margin: 0 auto; padding: 0 24px 60px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  text-align: center;
}
.ct-alt-item {
  background: #fff; border: 1px solid rgba(0,0,0,.07); border-radius: 14px;
  padding: 24px 16px; font-size: .9rem; color: var(--noir);
}
.ct-alt-item svg { width: 22px; height: 22px; color: var(--rose); margin-bottom: 10px; }
.ct-alt-item a { color: var(--vert-fonce); text-decoration: none; font-weight: 500; }
.ct-alt-item a:hover { color: var(--rose); }

@media (max-width: 860px) {
  .ct-hero { padding: 48px 20px 28px; }
}
@media (max-width: 600px) {
  .cta-form { padding: 28px 22px; }
  .cta-form-row { grid-template-columns: 1fr; gap: 0; }
  .ct-alt { grid-template-columns: 1fr; }
}