:root{
  --brand-blue:#1A2A42;
  --brand-accent:#F18536;
  --ink:#111;
  --muted:#666;
  --border:#dad9dc;
  --card-bg: rgba(255,255,255,0.9);
}

/* conteneur principal */
.contact-main{
  max-width: 900px;
  margin: 130px auto 4rem; /* header fixe supposé */
  padding: 0 1rem;
}

/* carte/formulaire */
.contact-card{
  background: rgba(49, 49, 49, 0.8);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 1rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  padding: 2rem 1.5rem;
}

.contact-title{
  margin: 0 0 .25rem 0;
  font-size: 2rem;
  color: #bbb; /* gris clair */
  font-weight: 800;
  text-align: left;
}

.contact-lead{
  margin: 0 0 1.5rem 0;
  color: var(--brand-accent); /* accent orange */
}

.contact-fieldset{
  border: none;
  margin: 0 0 1.25rem 0;
  padding: 0;
}

.contact-fieldset > legend{
  font-weight: 700;
  color: #bbb; /* gris clair */
  margin-bottom: .75rem;
}

.legend-optional{
  font-weight: 400;
  color: var(--muted);
  font-size: .95rem;
}

/* champs */
.form-row{
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin-bottom: 1rem;
}

label{
  font-weight: 600;
  color: #bbb; /* gris clair */
}

input[type="text"],
input[type="email"],
input[type="datetime-local"],
textarea{
  padding: .9rem 1rem;
  border: 1px solid var(--border);
  border-radius: .75rem;
  font-size: 1rem;
  outline: none;
  background: #fff;
  color: var(--ink);
  transition: border-color .2s ease, box-shadow .2s ease;
}

input:focus,
textarea:focus{
  border-color: var(--brand-accent); /* accent orange */
  box-shadow: 0 0 0 3px rgba(241,133,54,.18);
}

.field-error{
  min-height: 1em;
  font-size: .9rem;
  color: #b3261e; /* rouge material */
}

/* affichage progressif */
.is-hidden{ display: none; }

/* actions */
.form-actions{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.btn-primary{
  appearance: none;
  border: 2px solid var(--border);
  background: #fff;
  color: var(--brand-accent); /* accent orange */
  padding: .9rem 1.25rem;
  border-radius: 999px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease;
}
.btn-primary:hover{
  transform: translateY(-1px);
  border-color: var(--brand-accent);
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
}
.btn-primary:active{
  transform: translateY(0);
}

/* feedback (sous le bouton) */
.form-feedback{
  margin: 0;
  text-align: center;
  width: 100%;
  font-size: .98rem;
}
.form-feedback.success{
  color: #0d6b33; /* vert accessible */
}
.form-feedback.error{
  color: #b3261e;
}

.privacy-hint {
  color: #bbb;
  font-size: 0.7rem;
  margin: 0.75rem 0 1rem;
  padding: 0 0.75rem;
  line-height: 1.4;
}
.privacy-hint a {
  color: #f18536;
  text-decoration: none;
}
.privacy-hint a:hover {
  text-decoration: underline;
}


/* responsive */
@media (max-width: 640px){
  .contact-card{ padding: 1.5rem 1rem; }
  .contact-title{ font-size: 1.7rem; }
}