/* ------------------------------------------
   Formulaires AC Consultance (version propre)
   Ne modifie PAS la topbar / bottombar.
-------------------------------------------*/

:root {
  --text: #EDDFCF;
  --accent: #C9A552;
  --accent-strong: #E0C78F;
  --glass: rgba(255,255,255,0.06);
  --glass-border: rgba(255,255,255,0.18);
  --label-width: 150px;
}

/* Positionnement global du formulaire */
/* On laisse header_footer.css gérer les marges globales */
main.vp-center {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 80px;
  padding-bottom: 80px;
  min-height: calc(100vh - 160px); /* topbar + bottombar */
}

.form-wrapper {
  max-width: 760px;
  width: 100%;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  padding: 26px 34px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.25);
}

.form-wrapper h1 {
  text-align: center;
  font-size: 32px;
  margin-bottom: 6px;
  font-weight: 600;
}
.form-wrapper .subtitle {
  text-align: center;
  opacity: .85;
  margin-bottom: 32px;
  font-style: italic;
}

/* Grille labels / champs */
.form-row {
  display: grid;
  grid-template-columns: var(--label-width) 1fr;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.form-row label {
  text-align: right;
  color: var(--text);
  font-weight: 500;
}

/* Champs */
.form-row input,
.form-row select,
.form-row textarea {
  width: 100%;
  padding: 8px 12px;
  border-radius: 6px;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.18);
  color: var(--text);
  font-size: 0.95rem;
  transition: 0.25s;
}

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 6px rgba(201,165,82,0.55);
  outline: none;
}

/* Téléphone */
.phone-field { display: flex; gap: 10px; }
.phone-field select { width: 110px; flex-shrink: 0; }

/* ---- AJOUT IMPORTANT POUR LES DROPDOWN ---- */
/* Les <option> ne prennent PAS les styles automatiques du select,
   donc on les force pour qu’on voie enfin le texte. */
.form-row select option {
  background: #ffffff; /* Fond clair, lisible */
  color: #000000; /* Texte lisible dans la liste déroulante */
}

/* Survol d’une option dans la liste */
.form-row select option:hover {
  background: var(--accent); /* Ta couleur or (#c9a552) */
  color: #ffffff; /* Texte blanc pour le contraste */
}

/* Option sélectionnée dans la liste */
.form-row select option:checked {
  background: var(--accent);
  color: #ffffff;
}

/* Note champs obligatoires */
.form-note {
  text-align: right;
  font-size: 0.9rem;
  opacity: .75;
  margin-top: 10px;
  margin-bottom: 5px;
  padding-right: 5px;
}

/* Boutons */
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 14px;
  margin-top: 20px;
}

.btn-send,
.btn-cancel {
  min-width: 120px;
  height: 44px;
  font-family: "Century Schoolbook", Georgia, serif;
  font-weight: 600;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  cursor: pointer;
  transition: all .2s ease-in-out;
  border: 1px solid rgba(255,255,255,.25);
}

.btn-send {
  background: var(--accent);
  color: #2b2a26;
  border-color: var(--accent);
}
.btn-send:hover { background: #e6c249; }

.btn-cancel {
  background: rgba(255,255,255,.12);
  color: var(--text);
}
.btn-cancel:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* Alertes */
.alert {
  max-width: 80%;
  margin: 0 auto 25px;
  padding: 14px 20px;
  border-radius: 10px;
  text-align: center;
}

/* Succès */
.alert.ok {
  background: #fff8dd;
  color: #2b2a26;
  border: 1px solid #d8c37a;
}

/* Erreur */
.alert.err {
  background: #ffefef;
  border: 1px solid #a23333;
  color: #5f1111;
}

/* Anti-bot */
.hp-field { display:none !important; }

/* ===========================================
   RESPONSIVE — uniquement pour le formulaire
   (ne touche pas au body/topbar/bottombar)
=========================================== */

/* Larges écrans (réglage doux) */
@media (max-width: 1024px) {
  .form-wrapper { max-width: 720px; }
}

/* Tablettes classiques / petits laptops */
@media (max-width: 820px) {
  /* Le formulaire reste centré mais on empile les champs */
  .form-wrapper { width: 94%; padding: 22px 24px; }
  .form-row { grid-template-columns: 1fr !important; }
  .form-row label { text-align: left; padding-left: 2px; }
  .phone-field { gap: 10px; } /* pas de cassure visuelle */
}

/* Petites tablettes / grands téléphones en paysage */
@media (max-width: 680px) {
  :root { --label-width: 120px; } /* cohérent si des lignes 2-col subsistent */
  .form-wrapper { width: 96%; }
}

/* Téléphones (plein écran fluide) */
@media (max-width: 540px) {
  /* On sort du flex pour autoriser l’étirement pleine largeur */
  main.vp-center {
    display: block;
    padding-top: 30px;   /* respiration sous la topbar */
    padding-bottom: 80px;/* respiration au-dessus de la bottombar */
  }

  .form-wrapper {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0;
    padding: 20px 16px;
    border-radius: 0;       /* bord à bord, “plein téléphone” */
  }

  .form-row { grid-template-columns: 1fr !important; }
  .form-row label { text-align: left; padding-left: 2px; }

  .form-actions {
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
  }

  .btn-send, .btn-cancel {
    width: 100%;
    max-width: 260px;
    height: 44px;
  }

  textarea { min-height: 140px; }
}

/* Très petits écrans */
@media (max-width: 400px) {
  .form-wrapper h1 { font-size: 24px; }
  .subtitle { font-size: .95rem; }
  .form-row input,
  .form-row select,
  .form-row textarea { font-size: 1rem; }
}